Merge pull request #18 from suvarnakale/main

Issue #PS-2121 chore: packages and theme matched with admin

package.json

@@ -9,12 +9,12 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "@emotion/react": "^11.13.3",
-    "@emotion/styled": "^11.13.0",
-    "@module-federation/nextjs-mf": "^8.6.0",
-    "@module-federation/utilities": "1.7.3",
-    "@mui/icons-material": "^6.1.1",
-    "@mui/material": "^6.1.1",
+    "@emotion/react": "^11.11.4",
+    "@emotion/styled": "^11.11.5",
+    "@module-federation/nextjs-mf": "^8.5.5",
+    "@module-federation/utilities": "3.0.11",
+    "@mui/icons-material": "^5.15.20",
+    "@mui/material": "^5.16.0",
     "async": "^3.2.5",
     "body-parser": "^1.20.2",
     "dotenv": "^16.4.5",

src/components/CourseCard.tsx

@@ -54,7 +54,7 @@ const CourseCard: React.FC<ContentCardProps> = ({
           }}
         >
           {imageUrl ? (
-            <img src={imageUrl} alt={title} />
+            <img src={imageUrl} alt={title} height={"100%"} width={"100%"} />
           ) : (
             <ImageIcon fontSize="large" />
           )}

src/components/SideBar.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState } from "react";
 import { useRouter } from "next/router";
 import {
   Box,
@@ -7,9 +7,15 @@ import {
   ListItemIcon,
   ListItemText,
   Typography,
+  IconButton,
+  Drawer,
   useTheme,
+  useMediaQuery,
 } from "@mui/material";
+import MenuIcon from "@mui/icons-material/Menu";
 import DatabaseIcon from "@mui/icons-material/Storage";
+import CloseIcon from "@mui/icons-material/Close";
+
 const menuItems = [
   { text: "Create", key: "create" },
   { text: "All My Contents", key: "allContents" },
@@ -18,35 +24,84 @@ const menuItems = [
   { text: "Publish", key: "publish" },
 ];
 
+interface SidebarProps {
+  selectedKey: string;
+  onSelect: (key: string) => void;
+}
+
 const Sidebar: React.FC<SidebarProps> = ({ selectedKey, onSelect }) => {
+  const [drawerOpen, setDrawerOpen] = useState(false);
   const router = useRouter();
   const theme = useTheme<any>();
+  const isMobile = useMediaQuery(theme.breakpoints.down("sm"));
+
   const handleNavigation = (key: string) => {
+    console.log(key);
     router.push(`/workspace/content/${key}`);
     onSelect(key);
+    if (isMobile) {
+      setDrawerOpen(false); // Close drawer after selecting in mobile view
+    }
   };
 
-  return (
-    <Box
-      sx={{
-        width: 250,
-        height: "100vh",
-        bgcolor: "background.paper",
-        borderRight: 1,
-        borderColor: "divider",
-      }}
-    >
-      <Box p={2} display="flex" alignItems="center">
-        <ListItemIcon>
-          <DatabaseIcon fontSize="large" />
-        </ListItemIcon>
-        <Typography variant="h6">My Workspace</Typography>
+  const toggleDrawer = () => {
+    setDrawerOpen(!drawerOpen);
+  };
+
+  const drawerContent = (
+    <Box margin={"1rem"} width={"100%"} height={"100%"}>
+      <Box
+        p={2}
+        display="flex"
+        alignItems="center"
+        justifyContent="space-between"
+      >
+        <Box display="flex" alignItems="center">
+          <ListItemIcon>
+            <IconButton>
+              <MenuIcon sx={{ color: theme.palette.warning["100"] }} />
+            </IconButton>
+          </ListItemIcon>
+          <Typography
+            variant="h2"
+            fontSize={"16px"}
+            sx={{ color: theme.palette.warning["100"] }}
+          >
+            My Workspace
+          </Typography>
+        </Box>
+        {isMobile && (
+          <IconButton onClick={toggleDrawer}>
+            <CloseIcon />
+          </IconButton>
+        )}
       </Box>
       <List>
         {menuItems.map((item) => (
           <ListItemButton
+            sx={{
+              gap: "10px",
+              width: "100%",
+              display: "flex",
+              justifyContent: "flex-start",
+              borderRadius: "4rem",
+              backgroundColor:
+                selectedKey === item.key
+                  ? theme.palette.primary.main
+                  : "transparent", // Background for selected item
+              color:
+                selectedKey === item.key
+                  ? "#2E1500"
+                  : theme.palette.warning.A200,
+
+              "&:hover": {
+                background:
+                  selectedKey === item.key
+                    ? theme.palette.primary.main
+                    : "transparent",
+              },
+            }}
             key={item.key}
-            selected={selectedKey === item.key}
             onClick={() => handleNavigation(item.key)}
           >
             <ListItemText primary={item.text} />
@@ -55,6 +110,48 @@ const Sidebar: React.FC<SidebarProps> = ({ selectedKey, onSelect }) => {
       </List>
     </Box>
   );
+
+  return (
+    <>
+      {isMobile ? (
+        <>
+          <IconButton
+            edge="start"
+            color="inherit"
+            aria-label="menu"
+            onClick={toggleDrawer}
+            sx={{ marginLeft: 2 }}
+          >
+            <MenuIcon />
+          </IconButton>
+          <Drawer
+            anchor="left"
+            open={drawerOpen}
+            onClose={toggleDrawer}
+            ModalProps={{
+              keepMounted: true, // Improves performance on mobile
+            }}
+          >
+            {drawerContent}
+          </Drawer>
+        </>
+      ) : (
+        <Box
+          sx={{
+            display: "flex",
+            justifyContent: "flex-start",
+            width: 250,
+            height: "100vh",
+            bgcolor: theme.palette.background.paper,
+            borderRight: 1,
+            borderColor: theme.palette.divider,
+          }}
+        >
+          {drawerContent}
+        </Box>
+      )}
+    </>
+  );
 };
 
 export default Sidebar;

src/pages/workspace/content/allContents/index.tsx

@@ -79,7 +79,7 @@ const AllContentsPage = () => {
         ];
 
         const response = await getContent(status);
-        const contentList = response?.content || [];
+        const contentList = response?.content || response?.QuestionSet;
         setContentList(contentList);
       } catch (error) {
         console.log(error);
@@ -118,7 +118,7 @@ const AllContentsPage = () => {
                   <TableCell>
                     <Box display="flex" alignItems="center">
                       {content?.appIcon ? (
-                        <img src={content?.appIcon} />
+                        <img src={content?.appIcon} height={"25px"} />
                       ) : (
                         <UpReviewTinyImage fontSize="small" />
                       )}

src/pages/workspace/content/create/index.tsx

@@ -1,12 +1,14 @@
 import React, { useState } from "react";
 import Layout from "../../../../components/Layout";
-import { Typography, Box } from "@mui/material";
+import { Typography, Box, useTheme } from "@mui/material";
 import ContentCard from "../../../../components/ContentCard";
 import DescriptionOutlinedIcon from "@mui/icons-material/DescriptionOutlined";
 import DescriptionIcon from "@mui/icons-material/Description";
 import UploadIcon from "@mui/icons-material/Upload";
 import { useRouter } from "next/router";
+
 const CreatePage = () => {
+  const theme = useTheme<any>();
   const [selectedKey, setSelectedKey] = useState("create");
   const router = useRouter();
 
@@ -35,8 +37,13 @@ const CreatePage = () => {
   return (
     <Layout selectedKey={selectedKey} onSelect={setSelectedKey}>
       <Box p={3}>
-        <Typography variant="h4">Create Content</Typography>
-        <Typography>Here you can create new content.</Typography>
+        <Typography
+          variant="h2"
+          fontSize={"16px"}
+          sx={{ color: theme.palette.warning["100"] }}
+        >
+          Here you can create new content.
+        </Typography>
       </Box>
 
       <Box

src/pages/workspace/content/draft/index.tsx

@@ -58,7 +58,7 @@ const DraftPage = () => {
     const getDraftContentList = async () => {
       try {
         const response = await getContent(["Draft", "FlagDraft"]);
-        const contentList = response?.content || [];
+        const contentList = response?.content || response?.QuestionSet;
         setContentList(contentList);
       } catch (error) {
         console.log(error);
@@ -83,7 +83,7 @@ const DraftPage = () => {
         </Box>
 
         <Box display="flex" flexWrap="wrap" gap={3}>
-          {contentList.map((content, index) => (
+          {contentList?.map((content, index) => (
             <Box
               key={index}
               sx={{

src/services/ContentService.ts

@@ -6,7 +6,6 @@ const baseUrl = process.env.NEXT_PUBLIC_BASE_URL;
 const defaultReqBody = {
   request: {
     filters: {
-      createdBy: "84721b4a-6536-4cb0-b8c3-57583ef4cada",
       primaryCategory: [
         "Course Assessment",
         "eTextbook",
@@ -21,8 +20,6 @@ const defaultReqBody = {
         "Question paper",
       ],
     },
-    offset: 0,
-    limit: 9,
     query: "",
     sort_by: {
       lastUpdatedOn: "desc",
@@ -44,7 +41,7 @@ const getReqBodyWithStatus = (status: string[]) => {
 };
 
 export const getContent = async (status: string[]) => {
-  const apiURL = "https://sunbirdsaas.com/api/content/v1/search";
+  const apiURL = "/action/composite/v3/search";
   try {
     const reqBody = getReqBodyWithStatus(status);
     const response = await post(apiURL, reqBody);