article table

components/table/article-table.tsx

@@ -43,23 +43,28 @@ import withReactContent from "sweetalert2-react-content";
 const columns = [
   { name: "No", uid: "no" },
   { name: "Judul", uid: "title" },
-  { name: "Kategori", uid: "categoryName" },
+  { name: "Kategori", uid: "category" },
   { name: "Tanggal Unggah", uid: "createdAt" },
   { name: "Kreator", uid: "createdByName" },
-
   { name: "Aksi", uid: "actions" },
 ];
 
+interface Category {
+  id: number;
+  title: string;
+}
+
 type ArticleData = Article & {
   no: number;
   createdAt: string;
+  categories: Category[];
 };
 
 export default function ArticleTable() {
   const MySwal = withReactContent(Swal);
   const [page, setPage] = useState(1);
   const [totalPage, setTotalPage] = useState(1);
-  const [article, setArticle] = useState<ArticleData[]>([]);
+  const [article, setArticle] = useState<any[]>([]);
   const [showData, setShowData] = useState("10");
   const [search, setSearch] = useState("");
   const [categories, setCategoies] = useState<any>([]);
@@ -96,7 +101,6 @@ export default function ArticleTable() {
     };
     const res = await getListArticle(req);
     getTableNumber(parseInt(showData), res.data?.data);
-    console.log("res.data?.data", res.data);
     setTotalPage(res?.data?.meta?.totalPage);
   }
 
@@ -109,7 +113,6 @@ export default function ArticleTable() {
         value.no = startIndex + iterate;
         return value;
       });
-      console.log("daata", data);
       setArticle(newData);
     }
   };
@@ -142,8 +145,9 @@ export default function ArticleTable() {
     });
   };
 
-  const renderCell = useCallback((article: ArticleData, columnKey: Key) => {
+  const renderCell = useCallback(
-    const cellValue = article[columnKey as keyof ArticleData];
+    (article: any, columnKey: Key) => {
+      const cellValue = article[columnKey as keyof any];
       const statusColorMap: Record<string, ChipProps["color"]> = {
         active: "primary",
         cancel: "danger",
@@ -160,12 +164,19 @@ export default function ArticleTable() {
               variant="flat"
             >
               <div className="flex flex-row items-center gap-2 justify-center">
-              {cellValue}
+                {article.status}
               </div>
             </Chip>
           );
         case "createdAt":
           return <p>{convertDateFormat(article.createdAt)}</p>;
+        case "category":
+          return (
+            <p>
+              {article?.categories?.map((list: any) => list.title).join(", ") +
+                " "}
+            </p>
+          );
 
         case "actions":
           return (
@@ -209,7 +220,9 @@ export default function ArticleTable() {
         default:
           return cellValue;
       }
-  }, []);
+    },
+    [article]
+  );
 
   let typingTimer: NodeJS.Timeout;
   const doneTypingInterval = 1500;
@@ -333,7 +346,7 @@ export default function ArticleTable() {
               emptyContent={"No data to display."}
               loadingContent={<Spinner label="Loading..." />}
             >
-              {(item) => (
+              {(item: any) => (
                 <TableRow key={item.id}>
                   {(columnKey) => (
                     <TableCell>{renderCell(item, columnKey)}</TableCell>