diff --git a/pkgs/ui/src/app/access-point/page.tsx b/pkgs/ui/src/app/access-point/page.tsx index 70159ab..91bd903 100644 --- a/pkgs/ui/src/app/access-point/page.tsx +++ b/pkgs/ui/src/app/access-point/page.tsx @@ -1,6 +1,6 @@ "use client"; -import { mutate } from 'swr'; +import { mutate } from "swr"; import { useGetAttachedEntities } from "@/api/entities/entities"; import { useGetRepositories } from "@/api/repositories/repositories"; import SummaryDetails from "@/components/summary_card"; @@ -10,16 +10,29 @@ import { APAttachmentsTableConfig, APServiceRepositoryTableConfig, } from "@/config/access_point"; -import { useEffect } from 'react'; +import { useEffect } from "react"; export default function AccessPoint() { - - const { data: APAttachementData, isLoading: loadingAttachements, swrKey: attachedEntitiesKeyFunc } = useGetAttachedEntities(); - const { data: APRepositories, isLoading: laodingRepositories, swrKey: repositoriesKeyFunc } = useGetRepositories(); + const { + data: APAttachementData, + isLoading: loadingAttachements, + swrKey: attachedEntitiesKeyFunc, + } = useGetAttachedEntities(); + const { + data: APRepositories, + isLoading: laodingRepositories, + swrKey: repositoriesKeyFunc, + } = useGetRepositories(); const onRefresh = () => { - const attachedEntitiesKey = typeof attachedEntitiesKeyFunc === 'function' ? attachedEntitiesKeyFunc() : attachedEntitiesKeyFunc; - const repositoriesKey = typeof repositoriesKeyFunc === 'function' ? repositoriesKeyFunc() : repositoriesKeyFunc; + const attachedEntitiesKey = + typeof attachedEntitiesKeyFunc === "function" + ? attachedEntitiesKeyFunc() + : attachedEntitiesKeyFunc; + const repositoriesKey = + typeof repositoriesKeyFunc === "function" + ? repositoriesKeyFunc() + : repositoriesKeyFunc; if (attachedEntitiesKey) { mutate(attachedEntitiesKey); @@ -27,7 +40,7 @@ export default function AccessPoint() { if (repositoriesKey) { mutate(repositoriesKey); } - } + }; useEffect(() => { const interval = setInterval(() => { diff --git a/pkgs/ui/src/app/client-1/page.tsx b/pkgs/ui/src/app/client-1/page.tsx index 8d583a0..c0343de 100644 --- a/pkgs/ui/src/app/client-1/page.tsx +++ b/pkgs/ui/src/app/client-1/page.tsx @@ -6,7 +6,16 @@ import { } from "@/config/client_1"; import CustomTable from "@/components/table"; import useGetEntityByName from "@/components/hooks/useGetEntityById"; -import { Alert, Button, Card, CardContent, CardHeader, Skeleton, Snackbar, Typography } from "@mui/material"; +import { + Alert, + Button, + Card, + CardContent, + CardHeader, + Skeleton, + Snackbar, + Typography, +} from "@mui/material"; import CopyToClipboard from "@/components/copy_to_clipboard"; import { mutate } from "swr"; import { useGetEntity } from "@/api/entities/entities"; @@ -14,48 +23,56 @@ import { BASE_URL } from "@/constants"; import axios from "axios"; export default function Client1() { - - const { entity } = useGetEntityByName('C1'); - const { data: client1, isLoading, swrKey: entityKeyFunc } = useGetEntity({ entity_did: entity?.did }) + const { entity } = useGetEntityByName("C1"); + const { + data: client1, + isLoading, + swrKey: entityKeyFunc, + } = useGetEntity({ entity_did: entity?.did }); const cardContentRef = useRef(null); const [isAttached, setIsAttached] = useState(entity?.attached || false); const [snackbarOpen, setSnackbarOpen] = useState(false); - const [snackbarMessage, setSnackbarMessage] = useState(''); + const [snackbarMessage, setSnackbarMessage] = useState(""); const closeSnackBar = () => { - setSnackbarMessage(''); + setSnackbarMessage(""); setSnackbarOpen(false); - } + }; const onAttachEntity = async () => { try { - const response = await axios.post(`${BASE_URL}/attach`, { entity_did: entity?.did }); + const response = await axios.post(`${BASE_URL}/attach`, { + entity_did: entity?.did, + }); setSnackbarMessage(response.data.message); setSnackbarOpen(true); } catch (error) { console.error(error); } finally { - setIsAttached(true) + setIsAttached(true); } - } + }; const onDetachEntity = async () => { try { - const response = await axios.post(`${BASE_URL}/detach`, { entity_did: entity?.did }); + const response = await axios.post(`${BASE_URL}/detach`, { + entity_did: entity?.did, + }); console.log(response); - setSnackbarMessage('Entity detached successfully.'); + setSnackbarMessage("Entity detached successfully."); setSnackbarOpen(true); } catch (error) { console.error(error); } finally { - setIsAttached(false) + setIsAttached(false); } - } + }; const onRefresh = () => { - const entityKey = typeof entityKeyFunc === 'function' ? entityKeyFunc() : entityKeyFunc; + const entityKey = + typeof entityKeyFunc === "function" ? entityKeyFunc() : entityKeyFunc; if (entityKey) mutate(entityKey); - } + }; useEffect(() => { const interval = setInterval(() => { @@ -66,8 +83,7 @@ export default function Client1() { // eslint-disable-next-line react-hooks/exhaustive-deps }, []); - if (isLoading) - return + if (isLoading) return ; return (
@@ -80,18 +96,27 @@ export default function Client1() { >

Client 1

- - {isAttached === false ? - - : - - } + )} - +
@@ -128,8 +153,13 @@ export default function Client1() { configuration={Client1ProducerTableConfig} /> - - + + {snackbarMessage} diff --git a/pkgs/ui/src/app/client-2/page.tsx b/pkgs/ui/src/app/client-2/page.tsx index f10209f..31526a5 100644 --- a/pkgs/ui/src/app/client-2/page.tsx +++ b/pkgs/ui/src/app/client-2/page.tsx @@ -6,7 +6,16 @@ import { } from "@/config/client_2"; import CustomTable from "@/components/table"; import useGetEntityByName from "@/components/hooks/useGetEntityById"; -import { Button, Card, CardContent, CardHeader, Skeleton, Typography, Snackbar, Alert } from "@mui/material"; +import { + Button, + Card, + CardContent, + CardHeader, + Skeleton, + Typography, + Snackbar, + Alert, +} from "@mui/material"; import CopyToClipboard from "@/components/copy_to_clipboard"; import { useGetEntity } from "@/api/entities/entities"; import { mutate } from "swr"; @@ -14,46 +23,54 @@ import axios from "axios"; import { BASE_URL } from "@/constants"; export default function Client2() { - - const { entity } = useGetEntityByName('C2'); - const { data: client2, isLoading, swrKey: entityKeyFunc } = useGetEntity({ entity_did: entity?.did }) + const { entity } = useGetEntityByName("C2"); + const { + data: client2, + isLoading, + swrKey: entityKeyFunc, + } = useGetEntity({ entity_did: entity?.did }); const cardContentRef = useRef(null); const [isAttached, setIsAttached] = useState(entity?.attached); const [snackbarOpen, setSnackbarOpen] = useState(false); - const [snackbarMessage, setSnackbarMessage] = useState(''); + const [snackbarMessage, setSnackbarMessage] = useState(""); const closeSnackBar = () => { - setSnackbarMessage(''); + setSnackbarMessage(""); setSnackbarOpen(false); - } + }; const onAttachEntity = async () => { try { - const response = await axios.post(`${BASE_URL}/attach`, { entity_did: entity?.did }); + const response = await axios.post(`${BASE_URL}/attach`, { + entity_did: entity?.did, + }); alert(response.data.message); } catch (error) { console.error(error); } finally { - setIsAttached(true) + setIsAttached(true); } - } + }; const onDetachEntity = async () => { try { - const response = await axios.post(`${BASE_URL}/detach`, { entity_did: entity?.did }); - console.log('detach', response) - alert('Entity Detached Successfully.'); + const response = await axios.post(`${BASE_URL}/detach`, { + entity_did: entity?.did, + }); + console.log("detach", response); + alert("Entity Detached Successfully."); } catch (error) { console.error(error); } finally { - setIsAttached(false) + setIsAttached(false); } - } + }; const onRefresh = () => { - const entityKey = typeof entityKeyFunc === 'function' ? entityKeyFunc() : entityKeyFunc; + const entityKey = + typeof entityKeyFunc === "function" ? entityKeyFunc() : entityKeyFunc; if (entityKey) mutate(entityKey); - } + }; useEffect(() => { const interval = setInterval(() => { @@ -64,8 +81,7 @@ export default function Client2() { // eslint-disable-next-line react-hooks/exhaustive-deps }, []); - if (isLoading) - return + if (isLoading) return ; return (
@@ -78,16 +94,26 @@ export default function Client2() { >

Client 2

- {isAttached === false ? - - : - - } - + )} +
@@ -124,8 +150,13 @@ export default function Client2() { configuration={Client2ProducerTableConfig} /> - - + + {snackbarMessage} diff --git a/pkgs/ui/src/app/distributed-ledger-gateway/page.tsx b/pkgs/ui/src/app/distributed-ledger-gateway/page.tsx index 5c7a501..9698c9f 100644 --- a/pkgs/ui/src/app/distributed-ledger-gateway/page.tsx +++ b/pkgs/ui/src/app/distributed-ledger-gateway/page.tsx @@ -6,13 +6,16 @@ import SummaryDetails from "@/components/summary_card"; import useFetch from "@/components/hooks/useFetch"; import { useEffect } from "react"; - export default function DLG() { - const { data: resolutionData, loading: loadingResolutions, fetch } = useFetch('/get_resolutions'); + const { + data: resolutionData, + loading: loadingResolutions, + fetch, + } = useFetch("/get_resolutions"); const onRefresh = () => { fetch(); - } + }; useEffect(() => { const interval = setInterval(() => { diff --git a/pkgs/ui/src/app/home/page.tsx b/pkgs/ui/src/app/home/page.tsx index a4ec67b..d405ccf 100644 --- a/pkgs/ui/src/app/home/page.tsx +++ b/pkgs/ui/src/app/home/page.tsx @@ -9,15 +9,17 @@ import { useEffect } from "react"; import { mutate } from "swr"; export default function Home() { - const { data } = useAppState(); const entitiesKeyFunc = data.entitiesKeyFunc; const onRefresh = () => { - const entityKey = typeof entitiesKeyFunc === 'function' ? entitiesKeyFunc() : entitiesKeyFunc; + const entityKey = + typeof entitiesKeyFunc === "function" + ? entitiesKeyFunc() + : entitiesKeyFunc; if (entitiesKeyFunc) mutate(entityKey); - } + }; useEffect(() => { const interval = setInterval(() => { @@ -39,7 +41,11 @@ export default function Home() {

Home View Table

- +
diff --git a/pkgs/ui/src/components/hooks/useAppContext.tsx b/pkgs/ui/src/components/hooks/useAppContext.tsx index e45ac7c..d8e9c31 100644 --- a/pkgs/ui/src/components/hooks/useAppContext.tsx +++ b/pkgs/ui/src/components/hooks/useAppContext.tsx @@ -22,10 +22,10 @@ type AppContextType = { export const AppContext = createContext({} as AppContextType); type AppState = { - allEntities: Entity[] | undefined, - loadingEntities: boolean, - entitiesKeyFunc: any, -} + allEntities: Entity[] | undefined; + loadingEntities: boolean; + entitiesKeyFunc: any; +}; interface AppContextProviderProps { children: ReactNode; @@ -35,7 +35,6 @@ export const WithAppState = (props: AppContextProviderProps) => { const { data: entityData, swrKey: entitiesKeyFunc } = useGetEntities(); - const isLoading = false; const error = undefined; @@ -47,7 +46,7 @@ export const WithAppState = (props: AppContextProviderProps) => { useEffect(() => { if (entityData) { - setAppState(prevState => ({ + setAppState((prevState) => ({ ...prevState, allEntities: entityData.data, entitiesKeyFunc, diff --git a/pkgs/ui/src/components/hooks/useFetch.tsx b/pkgs/ui/src/components/hooks/useFetch.tsx index 24e103f..5a138e8 100644 --- a/pkgs/ui/src/components/hooks/useFetch.tsx +++ b/pkgs/ui/src/components/hooks/useFetch.tsx @@ -1,6 +1,6 @@ -import { useState, useEffect } from 'react'; -import axios from 'axios'; -import { BASE_URL } from '@/constants'; +import { useState, useEffect } from "react"; +import axios from "axios"; +import { BASE_URL } from "@/constants"; const useFetch = (url: string) => { const [data, setData] = useState([]); @@ -9,7 +9,8 @@ const useFetch = (url: string) => { const fetch = () => { setLoading(true); - axios.get(BASE_URL + url) + axios + .get(BASE_URL + url) .then((response) => { setData(response.data); }) @@ -29,5 +30,4 @@ const useFetch = (url: string) => { return { data, loading, error, fetch }; }; - export default useFetch; diff --git a/pkgs/ui/src/components/hooks/useGetEntityById.tsx b/pkgs/ui/src/components/hooks/useGetEntityById.tsx index b1be4f3..7736d44 100644 --- a/pkgs/ui/src/components/hooks/useGetEntityById.tsx +++ b/pkgs/ui/src/components/hooks/useGetEntityById.tsx @@ -10,10 +10,10 @@ const useGetEntityByName = (nameOrDid: string) => { } const entity = allEntities.find( - (entity) => entity.name === nameOrDid || entity.did === nameOrDid + (entity) => entity.name === nameOrDid || entity.did === nameOrDid, ); return { entity, isLoading: false }; }; -export default useGetEntityByName; \ No newline at end of file +export default useGetEntityByName; diff --git a/pkgs/ui/src/components/summary_card/index.tsx b/pkgs/ui/src/components/summary_card/index.tsx index 504935f..0a6c016 100644 --- a/pkgs/ui/src/components/summary_card/index.tsx +++ b/pkgs/ui/src/components/summary_card/index.tsx @@ -36,7 +36,11 @@ const SummaryDetails = ({ Attach / Detach )} - {hasRefreshButton && } + {hasRefreshButton && ( + + )}
{hasDetails && ( diff --git a/pkgs/ui/src/components/table/index.tsx b/pkgs/ui/src/components/table/index.tsx index 090b325..25af334 100644 --- a/pkgs/ui/src/components/table/index.tsx +++ b/pkgs/ui/src/components/table/index.tsx @@ -12,10 +12,8 @@ import { ICustomTable, CustomTableConfiguration } from "@/types"; import { Checkbox, Skeleton } from "@mui/material"; const CustomTable = ({ configuration, data, loading }: ICustomTable) => { - - if (loading) - return + return ; // display empty icon in case there is no data if (!data || data.length === 0) diff --git a/pkgs/ui/src/config/access_point/index.tsx b/pkgs/ui/src/config/access_point/index.tsx index 335505a..2d8575a 100644 --- a/pkgs/ui/src/config/access_point/index.tsx +++ b/pkgs/ui/src/config/access_point/index.tsx @@ -28,11 +28,10 @@ export const APAttachmentsTableConfig = [ key: "other", label: "Network", render: (value: any) => { - let renderedValue = '' - if (typeof value === 'object') - renderedValue = value?.network; + let renderedValue = ""; + if (typeof value === "object") renderedValue = value?.network; return renderedValue; - } + }, }, { key: "ip", @@ -65,13 +64,17 @@ export const APServiceRepositoryTableConfig = [ key: "other", label: "Type", render: (value: any) => { - let renderedValue: any = '' - if (typeof value === 'object') { + let renderedValue: any = ""; + if (typeof value === "object") { const label = Object.keys(value)[0]; - const info = value[label] - renderedValue = ({label} {info}); + const info = value[label]; + renderedValue = ( + + {label} {info} + + ); } return renderedValue; - } + }, }, ]; diff --git a/pkgs/ui/src/config/client_1/index.tsx b/pkgs/ui/src/config/client_1/index.tsx index 69f44bb..ca3a025 100644 --- a/pkgs/ui/src/config/client_1/index.tsx +++ b/pkgs/ui/src/config/client_1/index.tsx @@ -13,8 +13,12 @@ export const Client1ConsumerTableConfig = [ key: "endpoint_url", label: "End Point", render: () => { - return - } + return ( + + ); + }, }, // { // key: "entity", @@ -55,14 +59,19 @@ export const Client1ProducerTableConfig = [ key: "other", label: "Action", render: (value: any) => { - let renderedValue: any = ''; + let renderedValue: any = ""; if (typeof value === "object") renderedValue = ( <> - {value.action.map((actionType: string) => <>{actionType}
)} + {value.action.map((actionType: string) => ( + <> + {actionType} +
+ + ))} - ) + ); return renderedValue; }, - } + }, ]; diff --git a/pkgs/ui/src/config/client_2/index.tsx b/pkgs/ui/src/config/client_2/index.tsx index 7cc0f2a..982b2ad 100644 --- a/pkgs/ui/src/config/client_2/index.tsx +++ b/pkgs/ui/src/config/client_2/index.tsx @@ -13,8 +13,12 @@ export const Client2ConsumerTableConfig = [ key: "endpoint_url", label: "End Point", render: () => { - return - } + return ( + + ); + }, }, // { // key: "entity", @@ -55,14 +59,19 @@ export const Client2ProducerTableConfig = [ key: "other", label: "Action", render: (value: any) => { - let renderedValue: any = ''; + let renderedValue: any = ""; if (typeof value === "object") renderedValue = ( <> - {value.action.map((actionType: string) => <>{actionType}
)} + {value.action.map((actionType: string) => ( + <> + {actionType} +
+ + ))} - ) + ); return renderedValue; }, - } + }, ]; diff --git a/pkgs/ui/src/config/dlg/index.ts b/pkgs/ui/src/config/dlg/index.ts index 134aadc..0cc3109 100644 --- a/pkgs/ui/src/config/dlg/index.ts +++ b/pkgs/ui/src/config/dlg/index.ts @@ -46,6 +46,6 @@ export const DLGResolutionTableConfig = [ { key: "timestamp", label: "Timestamp", - render: (value: string) => formatDateTime(value) - } + render: (value: string) => formatDateTime(value), + }, ]; diff --git a/pkgs/ui/src/config/home/index.ts b/pkgs/ui/src/config/home/index.ts index 57893fe..7f72fe5 100644 --- a/pkgs/ui/src/config/home/index.ts +++ b/pkgs/ui/src/config/home/index.ts @@ -13,7 +13,7 @@ export const HomeTableConfig = [ render: (value: any) => { const renderedValue = typeof value === "object" ? value?.network : "-"; return renderedValue; - } + }, }, { key: "ip", @@ -23,9 +23,10 @@ export const HomeTableConfig = [ key: "other", label: "Roles", render: (value: any) => { - const renderedValue = typeof value === "object" ? value?.roles?.join(", ") : "-"; + const renderedValue = + typeof value === "object" ? value?.roles?.join(", ") : "-"; return renderedValue; - } + }, }, { key: "attached", diff --git a/pkgs/ui/src/constants/index.ts b/pkgs/ui/src/constants/index.ts index 58bad54..449ac7f 100644 --- a/pkgs/ui/src/constants/index.ts +++ b/pkgs/ui/src/constants/index.ts @@ -1,15 +1,9 @@ -const BASE_URL = 'http://localhost:2979/api/v1'; +const BASE_URL = "http://localhost:2979/api/v1"; // Home View -const HOME_VIEW_TABLE = '/get_entities'; - +const HOME_VIEW_TABLE = "/get_entities"; // Access Point -const SERVICE_REPOSITORY_URL = '/get_repositories'; +const SERVICE_REPOSITORY_URL = "/get_repositories"; - -export { - BASE_URL, - HOME_VIEW_TABLE, - SERVICE_REPOSITORY_URL, -} \ No newline at end of file +export { BASE_URL, HOME_VIEW_TABLE, SERVICE_REPOSITORY_URL }; diff --git a/pkgs/ui/src/utils/helpers.ts b/pkgs/ui/src/utils/helpers.ts index f852c27..8d6e3b2 100644 --- a/pkgs/ui/src/utils/helpers.ts +++ b/pkgs/ui/src/utils/helpers.ts @@ -1,12 +1,12 @@ export const formatDateTime = (date: string) => { const _date = new Date(date); - return _date.toLocaleDateString('en-US', { - year: 'numeric', - month: 'long', - day: 'numeric', - hour: '2-digit', - minute: '2-digit', - second: '2-digit', - hour12: true + return _date.toLocaleDateString("en-US", { + year: "numeric", + month: "long", + day: "numeric", + hour: "2-digit", + minute: "2-digit", + second: "2-digit", + hour12: true, }); -} \ No newline at end of file +};