Merge pull request #28 from moh-kenya/feat-institution-list

Add ability to add organizations
moh-kenya · Feb 1, 2024 · 7a9cac6 · 7a9cac6
2 parents 8cd808c + 15c94d5
commit 7a9cac6
Show file tree

Hide file tree

Showing 3 changed files with 88 additions and 7 deletions.
diff --git a/components/Navbar.js b/components/Navbar.js
@@ -19,7 +19,7 @@ import { SearchRounded, SearchTwoTone } from '@mui/icons-material';
 const pages = [
     {name: 'Concepts', link: '/search'},
     {name: 'Domains',  link: '/domains'},
-    {name: 'Institutions',  link: '/institutions'},
+    {name: 'Institutions',  link: '/orgs/institutions'},
     {name: 'Announcements',  link: '/announcements'},
     {name: 'Resources', link: '/resources'},
 ];

diff --git a/pages/api/organizations.js b/pages/api/organizations.js
@@ -0,0 +1,22 @@
+
+import useSWR from "swr";
+import { API_BASE_URL } from '../index';
+
+export const getOrganizations = () => {
+    const fetcher = (url) => fetch(url).then((res) => res.json());
+
+    const {
+        data,
+        isLoading,
+        isError,
+        mutate,
+    } = useSWR(
+        `${API_BASE_URL}/orgs?limit=1000&verbose=false&includeRetired=false`,
+        fetcher,
+        { revalidateOnFocus: false, revalidateOnReconnect: false }
+    );
+
+    return {
+        data, isLoading, isError, mutate
+    }
+}
diff --git a/pages/orgs/[org]/index.js b/pages/orgs/[org]/index.js
@@ -1,9 +1,68 @@
-import React from 'react'
+import React from "react";
+import { Box, TextField, Button, Skeleton, Stack, Alert, AlertTitle } from "@mui/material";
+import Head from "next/head";
+import { useRouter } from "next/router";
+import { DataGrid, GridColDef, GridValueGetterParams } from "@mui/x-data-grid";
+import { getOrganizations } from "@/pages/api/organizations";
 
-function OrgDetails() {
-  return (
-    <div>OrgDetails</div>
-  )
+function InstitutionsList() {
+    const router = useRouter();
+    const { data, isLoading, isError, mutate } = getOrganizations();
+    const columns = [
+      "id",
+      "name",
+      "type",
+      "url",
+    ];
+
+    if (isLoading) {
+      return (
+        <Box sx={{ pt: 0.5 }}>
+          <Skeleton />
+          <Skeleton width="60%" />
+        </Box>
+      );
+    }
+
+    if (isError) {
+      return (
+        <Stack sx={{ width: "100%" }} spacing={2}>
+          <Alert severity="error">
+            <AlertTitle>Error</AlertTitle>
+            Error fetching data, please retry.
+          </Alert>
+        </Stack>
+      );
+    }
+
+    return (
+      <>
+        <Head>
+          <title>MOH KNHTS | Organizations</title>
+          <meta name="description" content="MOH KNHTS" />
+          <meta name="viewport" content="width=device-width, initial-scale=1" />
+          <link rel="icon" href="/favicon.ico" />
+        </Head>
+
+        <Box my={2} sx={{ width: "100%" }}>
+          <DataGrid
+            rows={Object.values(data)}
+            getRowId={(row) => row.id}
+            columns={columns.map((key) => {
+              return {
+                field: key.toLowerCase(),
+                headerName: key.charAt(0).toUpperCase() + key.slice(1),
+                width: 200,
+              };
+            })}
+            initialState={{
+              pagination: { paginationModel: { pageSize: 25 } },
+            }}
+            pageSizeOptions={[25, 50, 100, 250]}
+          />
+        </Box>
+      </>
+    );
 }
 
-export default OrgDetails
+export default InstitutionsList;