From b41b5d62243dbd5106de65fce90aa57a71669e65 Mon Sep 17 00:00:00 2001
From: family36 <minti363636@gmail.com>
Date: Mon, 16 Sep 2024 20:39:38 +0900
Subject: [PATCH] feat: list all the credential groups

---
 apps/dashboard/src/api/bandadaAPI.ts |  8 +++-
 apps/dashboard/src/pages/groups.tsx  | 56 ++++++++++++++++++++++++++++
 2 files changed, 62 insertions(+), 2 deletions(-)

diff --git a/apps/dashboard/src/api/bandadaAPI.ts b/apps/dashboard/src/api/bandadaAPI.ts
index d9f533a9..8d477445 100644
--- a/apps/dashboard/src/api/bandadaAPI.ts
+++ b/apps/dashboard/src/api/bandadaAPI.ts
@@ -40,9 +40,13 @@ export async function generateMagicLink(
  * @param adminId The admin id.
  * @returns The list of groups or null.
  */
-export async function getGroups(adminId: string): Promise<Group[] | null> {
+export async function getGroups(adminId?: string): Promise<Group[] | null> {
     try {
-        const groups = await request(`${API_URL}/groups/?adminId=${adminId}`)
+        const url = adminId
+            ? `${API_URL}/groups/?adminId=${adminId}`
+            : `${API_URL}/groups/`
+
+        const groups = await request(url)
 
         return groups.map((group: Group) => ({
             ...group,
diff --git a/apps/dashboard/src/pages/groups.tsx b/apps/dashboard/src/pages/groups.tsx
index b1ae40b8..c8dc645f 100644
--- a/apps/dashboard/src/pages/groups.tsx
+++ b/apps/dashboard/src/pages/groups.tsx
@@ -27,6 +27,7 @@ export default function GroupsPage(): JSX.Element {
     const { admin } = useContext(AuthContext)
     const [_isLoading, setIsLoading] = useState(false)
     const [_groups, setGroups] = useState<Group[]>([])
+    const [_allCredentialGroups, setAllCredentialGroups] = useState<Group[]>([])
     const [_searchField, setSearchField] = useState<string>("")
     const navigate = useNavigate()
 
@@ -35,6 +36,7 @@ export default function GroupsPage(): JSX.Element {
             if (admin) {
                 setIsLoading(true)
                 setGroups([])
+                setAllCredentialGroups([])
 
                 await Promise.all([
                     getOnchainGroups(admin.address).then((onchainGroups) => {
@@ -49,6 +51,14 @@ export default function GroupsPage(): JSX.Element {
                                 ...offchainGroups
                             ])
                         }
+                    }),
+                    getOffchainGroups().then((allOffchainGroups) => {
+                        if (allOffchainGroups) {
+                            const credentialGroups = allOffchainGroups.filter(
+                                (group) => group.credentials !== null
+                            )
+                            setAllCredentialGroups(credentialGroups)
+                        }
                     })
                 ])
 
@@ -153,6 +163,52 @@ export default function GroupsPage(): JSX.Element {
                             ))}
                     </Grid>
                 )}
+
+                <Box h="100px" />
+
+                <HStack justifyContent="space-between" width="100%">
+                    <Heading fontSize="40px" as="h1">
+                        All credential groups
+                    </Heading>
+                </HStack>
+
+                {_isLoading && (
+                    <Box pt="100px">
+                        <Spinner />
+                    </Box>
+                )}
+
+                {!_isLoading && _allCredentialGroups.length === 0 && (
+                    <Text fontSize="2xl" fontWeight="bold" pt="100px">
+                        No credential groups found
+                    </Text>
+                )}
+
+                {!_isLoading && _allCredentialGroups.length > 0 && (
+                    <Grid
+                        templateColumns="repeat(3, 1fr)"
+                        gap={10}
+                        w="100%"
+                        mt="60px"
+                    >
+                        {_allCredentialGroups
+                            .sort(
+                                (a, b) =>
+                                    new Date(b.createdAt || "").getTime() -
+                                    new Date(a.createdAt || "").getTime()
+                            )
+                            .map((group) => (
+                                <Link
+                                    key={group.id + group.name}
+                                    to={`/groups/${group.type}/${group.id}`}
+                                >
+                                    <GridItem>
+                                        <GroupCard {...group} />
+                                    </GridItem>
+                                </Link>
+                            ))}
+                    </Grid>
+                )}
             </VStack>
         </Container>
     )