Creatives Table

src/app/features/repositories/catalog/creative.repository.ts

@@ -0,0 +1,22 @@
+import { client } from "../clients/graphql.client";
+import { Brand, CreateBrandInput, CreativeLibraryFilter, CreativeLibraryFolder } from "src/graphql/client";
+import { CreativeRepository } from "src/domain/creatives/creatives.domain";
+
+export class CreativeBackendRepository implements CreativeRepository {
+  async listFolder(libFilter: CreativeLibraryFilter): Promise<CreativeLibraryFolder> {
+    return client.chain.query.listFolder({ input: libFilter })
+      .get({
+        request: {
+          id: 1
+        }
+      })
+  }
+
+  async createBrand(input: CreateBrandInput) {
+    return client.chain.mutation.createBrand({ input }).get({
+      id: 1,
+      name: 1,
+      sector: 1,
+    }) as Promise<Brand>;
+  }
+}

src/app/pages/creative-intelligence-suite/pages/creative-lab/pages/creative-library/creative-library.page.tsx

@@ -1,8 +1,33 @@
-import { FC } from "react";
+import { FC, useEffect, useState } from "react";
+import { useSessionFeature } from "src/app/features/session/session.feature";
 import CardPageUI from "src/app/ui/cards/card-page.ui";
+import { EmptyCreateUI } from "src/app/ui/empty/empty-create.ui";
 import { SearchInputUI } from "src/app/ui/inputs/search-input.ui";
+import { useCreativesDomain } from "src/domain/creatives/creatives.domain";
+import { CreativeLibraryFolder } from "src/graphql/client";
+import { CreativeTableWidget } from "./creative.table.widget";
 
 const CreativeLibraryPage: FC = () => {
+
+  const [folder, setFolder] = useState<CreativeLibraryFolder|null>(null)
+  const [hasCreatives, setHasCreatives] = useState(false)
+  const { currentBrand } = useSessionFeature()
+  const { listFolder } = useCreativesDomain()
+
+  useEffect(() => {
+    if (currentBrand?.id) {
+      listFolder({brandId: currentBrand.id})
+      .then( res => {
+        setFolder(res)
+        if (res.creatives?.length) {
+          setHasCreatives(true)
+        }
+      }
+      )
+      .catch(err => {throw new Error(err)})
+    }
+  }, [currentBrand])
+
   return (
     <CardPageUI>
       <header
@@ -17,7 +42,11 @@ const CreativeLibraryPage: FC = () => {
       >
         <SearchInputUI />
       </header>
-      <pre>Insert Table here</pre>
+      {hasCreatives ? (
+        <CreativeTableWidget data={folder?.creatives} />
+      ) : (
+        <EmptyCreateUI description="You don't have any creatives yet." />
+      )}
     </CardPageUI>
   );
 };

src/app/pages/creative-intelligence-suite/pages/creative-lab/pages/creative-library/creative.table.widget.tsx

@@ -0,0 +1,53 @@
+import { Avatar } from "antd";
+import { ColumnsType } from "antd/es/table";
+import dayjs from "dayjs";
+import { FC } from "react";
+import { TableUI } from "src/app/ui/tables/table.ui";
+import { CreativeLibraryItem } from "src/graphql/client";
+
+export const CreativeTableWidget: FC<any> = ({ data = [] }) => {
+
+  const generateCreativeKey = (creative: CreativeLibraryItem) => ({...creative, key: creative.creativeId})
+
+  const columns: ColumnsType<CreativeLibraryItem> = [
+    {
+      title: "Name",
+      dataIndex: "name",
+      render: (name, record) => {
+        return (
+          <div style={{ display: "flex", gap: "8px" }}>
+            <Avatar
+              src={record.url}
+              style={{
+                backgroundColor: "rgb(230 244 255)",
+                color: "#1677ff",
+                fontWeight: "bold",
+              }}
+            >
+              {record.url ? "" : name[0]}
+            </Avatar>
+            <div className="flex items-center">
+              <div>{name}</div>
+            </div>
+          </div>
+        );
+      },
+    },
+    {
+      title: "Uploaded Date",
+      dataIndex: "createdAt",
+      render: uploadDate => {
+        return <div>{dayjs(uploadDate).format('MM/DD/YYYY')}</div>
+      }
+    },
+    {
+      title: "File Type",
+      dataIndex: "fileType",
+      render: fileType => {
+        return <div>{fileType}</div>
+      }
+    }
+  ];
+
+  return <TableUI columns={columns} data={data.map(generateCreativeKey)} />;
+};

src/app/pages/login/login.page.tsx

@@ -28,6 +28,7 @@ export default function Login() {
 
   const onSubmit = useCallback(
     async ({ email, password }: FormValues) => {
+      console.log({email, password})
       await sendRequest({
         request: login({ email, password }),
         id: "login",

src/domain/creatives/creatives.domain.ts

@@ -0,0 +1,18 @@
+import { useRepositoryFeature } from "src/app/features/repositories/repositories.feature";
+import { CreativeLibraryFilter, CreativeLibraryFolder } from "src/graphql/client";
+
+export interface CreativeRepository {
+  listFolder(libFilter: CreativeLibraryFilter): Promise<CreativeLibraryFolder>;
+}
+
+export const useCreativesDomain = (repoId = "CreativeRepository") => {
+  const { repository } = useRepositoryFeature<CreativeRepository>(repoId);
+
+  const listFolder = (libFilter: CreativeLibraryFilter) => {
+    return repository.listFolder(libFilter);
+  };
+
+  return {
+    listFolder
+  };
+};