Before Milestone Meeting Final Changes (#40)

some final fixes before the demo

Co-authored-by: Luis-Hebendanz <consulting@qube.email>
Reviewed-on: #40
Co-authored-by: sara-pervana <saramakishti@gmail.com>
Co-committed-by: sara-pervana <saramakishti@gmail.com>

pkgs/ui/src/components/hooks/useAppContext.tsx

@@ -1,3 +1,5 @@
+import { useGetEntities } from "@/api/entities/entities";
+import { Entity } from "@/api/model";
 import { AxiosError } from "axios";
 import React, {
   createContext,
@@ -5,6 +7,7 @@ import React, {
   ReactNode,
   SetStateAction,
   useState,
+  useEffect,
 } from "react";
 
 type AppContextType = {
@@ -18,7 +21,11 @@ type AppContextType = {
 
 export const AppContext = createContext<AppContextType>({} as AppContextType);
 
-type AppState = NonNullable<unknown>;
+type AppState = {
+  allEntities: Entity[] | undefined;
+  loadingEntities: boolean;
+  entitiesKeyFunc: any;
+};
 
 interface AppContextProviderProps {
   children: ReactNode;
@@ -26,10 +33,28 @@ interface AppContextProviderProps {
 export const WithAppState = (props: AppContextProviderProps) => {
   const { children } = props;
 
+  const { data: entityData, swrKey: entitiesKeyFunc } = useGetEntities();
+
   const isLoading = false;
   const error = undefined;
 
-  const [data, setAppState] = useState<AppState>({});
+  const [data, setAppState] = useState<AppState>({
+    allEntities: [],
+    loadingEntities: true,
+    entitiesKeyFunc,
+  });
+
+  useEffect(() => {
+    if (entityData) {
+      setAppState((prevState) => ({
+        ...prevState,
+        allEntities: entityData.data,
+        entitiesKeyFunc,
+        loadingEntities: false,
+      }));
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [entityData]);
 
   return (
     <AppContext.Provider

pkgs/ui/src/components/hooks/useFetch.tsx

@@ -0,0 +1,33 @@
+import { useState, useEffect } from "react";
+import axios from "axios";
+import { BASE_URL } from "@/constants";
+
+const useFetch = (url: string) => {
+  const [data, setData] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+
+  const fetch = () => {
+    setLoading(true);
+    axios
+      .get(BASE_URL + url)
+      .then((response) => {
+        setData(response.data);
+      })
+      .catch((error) => {
+        setError(error);
+      })
+      .finally(() => {
+        setLoading(false);
+      });
+  };
+
+  useEffect(() => {
+    fetch();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [url]);
+
+  return { data, loading, error, fetch };
+};
+
+export default useFetch;

pkgs/ui/src/components/hooks/useGetEntityById.tsx

@@ -0,0 +1,19 @@
+import { useContext } from "react";
+import { AppContext } from "./useAppContext";
+
+const useGetEntityByName = (nameOrDid: string) => {
+  const { data } = useContext(AppContext);
+  const allEntities = data.allEntities;
+
+  if (!allEntities) {
+    return { entity: undefined, isLoading: true };
+  }
+
+  const entity = allEntities.find(
+    (entity) => entity.name === nameOrDid || entity.did === nameOrDid,
+  );
+
+  return { entity, isLoading: false };
+};
+
+export default useGetEntityByName;

pkgs/ui/src/components/summary_card/index.tsx

@@ -14,6 +14,8 @@ const SummaryDetails = ({
   entity,
   hasRefreshButton,
   hasAttachDetach,
+  fake,
+  onRefresh,
 }: ISummaryDetails) => {
   const cardContentRef = useRef(null);
   const hasDetails = entity.details && entity.details.length > 0;
@@ -34,13 +36,17 @@ const SummaryDetails = ({
               Attach / Detach
             </Button>
           )}
-          {hasRefreshButton && <Button variant="contained">Refresh</Button>}
+          {hasRefreshButton && (
+            <Button onClick={onRefresh} variant="contained">
+              Refresh
+            </Button>
+          )}
         </div>
       </div>
       {hasDetails && (
         <Card variant="outlined">
           <CardHeader
-            subheader="Summary"
+            subheader={fake ? "Summary (Fake Data)" : "Summary"}
             action={<CopyToClipboard contentRef={cardContentRef} />}
           />
           <CardContent ref={cardContentRef}>

pkgs/ui/src/components/table/index.tsx

@@ -9,9 +9,12 @@ import Paper from "@mui/material/Paper";
 import { NoDataOverlay } from "@/components/noDataOverlay";
 import { StyledTableCell, StyledTableRow } from "./style";
 import { ICustomTable, CustomTableConfiguration } from "@/types";
-import { Checkbox } from "@mui/material";
+import { Checkbox, Skeleton } from "@mui/material";
+
+const CustomTable = ({ configuration, data, loading }: ICustomTable) => {
+  if (loading)
+    return <Skeleton variant="rectangular" animation="wave" height={200} />;
 
-const CustomTable = ({ configuration, data }: ICustomTable) => {
   // display empty icon in case there is no data
   if (!data || data.length === 0)
     return <NoDataOverlay label="No Activity yet" />;