Merge pull request #13 from suvarnakale/main

Issue #PS-2122 feat: API integration to show list view for Drafts, Submitted for Review and Publish
tekdi · Oct 7, 2024 · 0ccab3d · 0ccab3d
2 parents 41fe997 + 80cdf68
commit 0ccab3d
Show file tree

Hide file tree

Showing 7 changed files with 145 additions and 168 deletions.
diff --git a/src/components/CourseCard.tsx b/src/components/CourseCard.tsx
@@ -16,7 +16,7 @@ import { Status } from "@/utils/app.constant";
 
 interface ContentCardProps {
   title: string;
-  description: string;
+  description?: string;
   type: string;
   imageUrl?: string;
   status: string;
@@ -54,11 +54,7 @@ const CourseCard: React.FC<ContentCardProps> = ({
           }}
         >
           {imageUrl ? (
-            <img
-              src={imageUrl}
-              alt={title}
-              style={{ width: "100%", height: "100%", objectFit: "cover" }}
-            />
+            <img src={imageUrl} alt={title} />
           ) : (
             <ImageIcon fontSize="large" />
           )}
@@ -75,14 +71,12 @@ const CourseCard: React.FC<ContentCardProps> = ({
           }}
         />
       </Box>
-
       <CardContent sx={{ flex: 1 }}>
         <Typography variant="h6">{title}</Typography>
         <Typography variant="body2" color="text.secondary">
           {description}
         </Typography>
       </CardContent>
-
       {(status === Status.DRAFT || status === Status.LIVE) && (
         <CardActions disableSpacing>
           <Box display="flex" justifyContent="flex-end" width="100%">

diff --git a/src/pages/workspace/content/allContents/index.tsx b/src/pages/workspace/content/allContents/index.tsx
@@ -18,14 +18,6 @@ import SearchBox from "../../../../components/SearchBox";
 import { getContent } from "../../../../services/ContentService";
 import { timeAgo } from "@/utils/Helper";
 
-interface content {
-  name: string;
-  status: string;
-  lastUpdatedOn: string;
-  appIcon: string;
-  contentType: string;
-}
-
 const AllContentsPage = () => {
   const theme = useTheme<any>();
 
@@ -76,42 +68,17 @@ const AllContentsPage = () => {
   useEffect(() => {
     const getContentList = async () => {
       try {
-        const reqBody = {
-          request: {
-            filters: {
-              status: [
-                "Draft",
-                "FlagDraft",
-                "Review",
-                "Processing",
-                "Live",
-                "Unlisted",
-                "FlagReview",
-              ],
-              createdBy: "84721b4a-6536-4cb0-b8c3-57583ef4cada",
-              primaryCategory: [
-                "Course Assessment",
-                "eTextbook",
-                "Explanation Content",
-                "Learning Resource",
-                "Practice Question Set",
-                "Teacher Resource",
-                "Exam Question",
-                "Content Playlist",
-                "Course",
-                "Digital Textbook",
-                "Question paper",
-              ],
-            },
-            offset: 0,
-            limit: 9,
-            query: "",
-            sort_by: {
-              lastUpdatedOn: "desc",
-            },
-          },
-        };
-        const response = await getContent(reqBody);
+        const status = [
+          "Draft",
+          "FlagDraft",
+          "Review",
+          "Processing",
+          "Live",
+          "Unlisted",
+          "FlagReview",
+        ];
+
+        const response = await getContent(status);
         const contentList = response?.content || [];
         setContentList(contentList);
       } catch (error) {

diff --git a/src/pages/workspace/content/draft/index.tsx b/src/pages/workspace/content/draft/index.tsx
@@ -1,33 +1,9 @@
-import React, { useMemo, useState } from "react";
+import React, { useEffect, useMemo, useState } from "react";
 import Layout from "../../../../components/Layout";
-import { Typography, Box, Grid, TablePagination } from "@mui/material";
+import { Typography, Box, TablePagination } from "@mui/material";
 import CourseCard from "../../../../components/CourseCard";
 import SearchBox from "../../../../components/SearchBox";
-
-// Sample data for draft contents
-const draftData = [
-  {
-    title: "Home Science",
-    description: "Learn about home science basics.",
-    type: "Course",
-    imageUrl: "", // URL for image if available, else empty
-    status: "draft", // Status of the content
-  },
-  {
-    title: "Test1",
-    description: "Practice question set for Test1.",
-    type: "Question Set",
-    imageUrl: "",
-    status: "draft",
-  },
-  {
-    title: "",
-    description: "",
-    type: "eBook",
-    imageUrl: "",
-    status: "draft",
-  },
-];
+import { getContent } from "@/services/ContentService";
 
 const DraftPage = () => {
   const [selectedKey, setSelectedKey] = useState("draft");
@@ -36,6 +12,7 @@ const DraftPage = () => {
   const [searchTerm, setSearchTerm] = useState("");
   const [filter, setFilter] = useState("all");
   const [sortBy, setSortBy] = useState("updated");
+  const [contentList, setContentList] = React.useState<content[]>([]);
 
   const handleChangePage = (event: unknown, newPage: number) => {
     setPage(newPage);
@@ -62,21 +39,34 @@ const DraftPage = () => {
 
   const filteredData = useMemo(
     () =>
-      draftData.filter((content) =>
-        content.title.toLowerCase().includes(searchTerm)
+      contentList.filter((content) =>
+        content.name.toLowerCase().includes(searchTerm)
       ),
     [searchTerm]
   );
 
-  const displayedCards = filteredData.slice(
-    page * rowsPerPage,
-    page * rowsPerPage + rowsPerPage
-  );
+  // const displayedCards = filteredData.slice(
+  //   page * rowsPerPage,
+  //   page * rowsPerPage + rowsPerPage
+  // );
 
   const handleDelete = (index: number) => {
     console.log(`Deleting item at index ${index}`);
   };
 
+  useEffect(() => {
+    const getDraftContentList = async () => {
+      try {
+        const response = await getContent(["Draft", "FlagDraft"]);
+        const contentList = response?.content || [];
+        setContentList(contentList);
+      } catch (error) {
+        console.log(error);
+      }
+    };
+    getDraftContentList();
+  }, []);
+
   return (
     <Layout selectedKey={selectedKey} onSelect={setSelectedKey}>
       <Box p={3}>
@@ -87,13 +77,13 @@ const DraftPage = () => {
           <SearchBox
             placeholder="Search by title..."
             onSearch={handleSearch}
-            onFilterChange={handleFilterChange}
-            onSortChange={handleSortChange}
+            // onFilterChange={handleFilterChange}
+            // onSortChange={handleSortChange}
           />
         </Box>
 
         <Box display="flex" flexWrap="wrap" gap={3}>
-          {displayedCards.map((content, index) => (
+          {contentList.map((content, index) => (
             <Box
               key={index}
               sx={{
@@ -104,12 +94,10 @@ const DraftPage = () => {
               }}
             >
               <CourseCard
-                title={content.title || "Untitled Course"}
-                description={
-                  content.description || "Enter description of course"
-                }
-                type={content.type || "Course"}
-                imageUrl={content.imageUrl}
+                title={content?.name}
+                description={content?.description}
+                type={content?.contentType}
+                imageUrl={content.appIcon}
                 status={content.status}
                 onDelete={() => handleDelete(index)}
               />
@@ -120,7 +108,7 @@ const DraftPage = () => {
         <Box display="flex" justifyContent="center" mt={3}>
           <TablePagination
             component="div"
-            count={draftData.length}
+            count={contentList.length}
             page={page}
             onPageChange={handleChangePage}
             rowsPerPage={rowsPerPage}

diff --git a/src/pages/workspace/content/publish/index.tsx b/src/pages/workspace/content/publish/index.tsx
@@ -1,38 +1,16 @@
-import React, { useMemo, useState } from "react";
+import React, { useEffect, useMemo, useState } from "react";
 import Layout from "../../../../components/Layout";
 import { Typography, Box } from "@mui/material";
 import CourseCard from "../../../../components/CourseCard";
 import SearchBox from "../../../../components/SearchBox";
-
-const PublishData = [
-  {
-    title: "Home Science",
-    description: "Learn about home science basics.",
-    type: "Course",
-    imageUrl: "",
-    status: "published",
-  },
-  {
-    title: "Test1",
-    description: "Practice question set for Test1.",
-    type: "Question Set",
-    imageUrl: "",
-    status: "published",
-  },
-  {
-    title: "",
-    description: "",
-    type: "eBook",
-    imageUrl: "",
-    status: "published",
-  },
-];
+import { getContent } from "@/services/ContentService";
 
 const PublishPage = () => {
   const [selectedKey, setSelectedKey] = useState("publish");
   const [searchTerm, setSearchTerm] = useState("");
   const [filter, setFilter] = useState("all");
   const [sortBy, setSortBy] = useState("updated");
+  const [contentList, setContentList] = React.useState<content[]>([]);
 
   const handleSearch = (search: string) => {
     setSearchTerm(search.toLowerCase());
@@ -48,8 +26,8 @@ const PublishPage = () => {
 
   const filteredData = useMemo(
     () =>
-      PublishData.filter((content) =>
-        content.title.toLowerCase().includes(searchTerm)
+      contentList.filter((content) =>
+        content.name.toLowerCase().includes(searchTerm)
       ),
     [searchTerm]
   );
@@ -64,6 +42,19 @@ const PublishPage = () => {
     console.log(`Deleting item at index ${index}`);
   };
 
+  useEffect(() => {
+    const getPublishContentList = async () => {
+      try {
+        const response = await getContent(["Live"]);
+        const contentList = response?.content || response?.QuestionSet;
+        setContentList(contentList);
+      } catch (error) {
+        console.log(error);
+      }
+    };
+    getPublishContentList();
+  }, [searchTerm]);
+
   return (
     <Layout selectedKey={selectedKey} onSelect={setSelectedKey}>
       <Box p={3}>
@@ -74,13 +65,13 @@ const PublishPage = () => {
           <SearchBox
             placeholder="Search by title..."
             onSearch={handleSearch}
-            onFilterChange={handleFilterChange}
-            onSortChange={handleSortChange}
+            // onFilterChange={handleFilterChange}
+            // onSortChange={handleSortChange}
           />
         </Box>
 
         <Box display="flex" flexWrap="wrap" gap={3} padding={2}>
-          {displayedCards.map((content, index) => (
+          {contentList.map((content, index) => (
             <Box
               key={index}
               sx={{
@@ -91,12 +82,10 @@ const PublishPage = () => {
               }}
             >
               <CourseCard
-                title={content.title || "Untitled Course"}
-                description={
-                  content.description || "Enter description of course"
-                }
-                type={content.type || "Course"}
-                imageUrl={content.imageUrl}
+                title={content?.name}
+                description={content?.description}
+                type={content?.contentType || "QuestionSet"}
+                imageUrl={content.appIcon}
                 status={content.status}
                 onDelete={() => handleDelete(index)}
               />