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,74 +145,84 @@ export default function ArticleTable() {
     });
   };
 
-  const renderCell = useCallback((article: ArticleData, columnKey: Key) => {
-    const cellValue = article[columnKey as keyof ArticleData];
-    const statusColorMap: Record<string, ChipProps["color"]> = {
-      active: "primary",
-      cancel: "danger",
-      pending: "success",
-    };
+  const renderCell = useCallback(
+    (article: any, columnKey: Key) => {
+      const cellValue = article[columnKey as keyof any];
+      const statusColorMap: Record<string, ChipProps["color"]> = {
+        active: "primary",
+        cancel: "danger",
+        pending: "success",
+      };
 
-    switch (columnKey) {
-      case "status":
-        return (
-          <Chip
-            className="capitalize "
-            color={statusColorMap[article.status]}
-            size="lg"
-            variant="flat"
-          >
-            <div className="flex flex-row items-center gap-2 justify-center">
-              {cellValue}
+      switch (columnKey) {
+        case "status":
+          return (
+            <Chip
+              className="capitalize "
+              color={statusColorMap[article.status]}
+              size="lg"
+              variant="flat"
+            >
+              <div className="flex flex-row items-center gap-2 justify-center">
+                {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 (
+            <div className="relative flex justify-star items-center gap-2">
+              <Dropdown className="lg:min-w-[150px] bg-black text-white shadow border ">
+                <DropdownTrigger>
+                  <Button isIconOnly size="lg" variant="light">
+                    <DotsYIcon className="text-default-300" />
+                  </Button>
+                </DropdownTrigger>
+                <DropdownMenu>
+                  <DropdownItem key="detail">
+                    <Link href={`/admin/article/detail/${article.id}`}>
+                      <EyeIconMdi className="inline mr-2 mb-1" />
+                      Detail
+                    </Link>
+                  </DropdownItem>
+                  <DropdownItem key="edit">
+                    <Link href={`/admin/article/edit/${article.id}`}>
+                      <CreateIconIon className="inline mr-2 mb-1" />
+                      Edit
+                    </Link>
+                  </DropdownItem>
+                  <DropdownItem
+                    key="delete"
+                    onClick={() => handleDelete(article.id)}
+                  >
+                    <DeleteIcon
+                      color="red"
+                      width={20}
+                      height={16}
+                      className="inline mr-2 mb-1"
+                    />
+                    Delete
+                  </DropdownItem>
+                </DropdownMenu>
+              </Dropdown>
             </div>
-          </Chip>
-        );
-      case "createdAt":
-        return <p>{convertDateFormat(article.createdAt)}</p>;
+          );
 
-      case "actions":
-        return (
-          <div className="relative flex justify-star items-center gap-2">
-            <Dropdown className="lg:min-w-[150px] bg-black text-white shadow border ">
-              <DropdownTrigger>
-                <Button isIconOnly size="lg" variant="light">
-                  <DotsYIcon className="text-default-300" />
-                </Button>
-              </DropdownTrigger>
-              <DropdownMenu>
-                <DropdownItem key="detail">
-                  <Link href={`/admin/article/detail/${article.id}`}>
-                    <EyeIconMdi className="inline mr-2 mb-1" />
-                    Detail
-                  </Link>
-                </DropdownItem>
-                <DropdownItem key="edit">
-                  <Link href={`/admin/article/edit/${article.id}`}>
-                    <CreateIconIon className="inline mr-2 mb-1" />
-                    Edit
-                  </Link>
-                </DropdownItem>
-                <DropdownItem
-                  key="delete"
-                  onClick={() => handleDelete(article.id)}
-                >
-                  <DeleteIcon
-                    color="red"
-                    width={20}
-                    height={16}
-                    className="inline mr-2 mb-1"
-                  />
-                  Delete
-                </DropdownItem>
-              </DropdownMenu>
-            </Dropdown>
-          </div>
-        );
-
-      default:
-        return cellValue;
-    }
-  }, []);
+        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>