Webui: proper async hash

webui/src/PeerAvailableCard.tsx

@@ -2,10 +2,13 @@ import { TAvailablePeerInfoTo } from "./api/dto";
 import { useFetcher } from "react-router-dom";
 
 import "./PeerAvailableCard.scss";
-import { hashCert } from "./hash";
+
+interface TAvailablePeerInfoToWithHash extends TAvailablePeerInfoTo {
+    certHash: string;
+}
 
 export interface TPeerAvailableCardProps {
-    peerInfo: TAvailablePeerInfoTo;
+    peerInfo: TAvailablePeerInfoToWithHash;
 }
 
 export function PeerAvailableCard({ peerInfo }: TPeerAvailableCardProps) {
@@ -18,7 +21,7 @@ export function PeerAvailableCard({ peerInfo }: TPeerAvailableCardProps) {
                     <span>{peerInfo.uuid}</span>
                 </div>
                 <div>
-                    <span>Cert: {hashCert(peerInfo.cert)}</span>
+                    <span>Cert: {peerInfo.certHash}</span>
                 </div>
             </div>
             <fetcher.Form

webui/src/PeerKnownCard.tsx

@@ -4,10 +4,13 @@ import "./PeerKnownCard.scss";
 import { useFetcher, useLoaderData } from "react-router-dom";
 import { LoaderToType } from "./commonPlumbing";
 import { peerStateLoader } from "./PeerStatePlumbing";
-import { hashCert } from "./hash";
+
+interface TKnownPeerInfoToWithHash extends TKnownPeerInfoTo {
+    certHash: string;
+}
 
 export interface TPeerKnownCardProps {
-    peerInfo: TKnownPeerInfoTo;
+    peerInfo: TKnownPeerInfoToWithHash;
 }
 
 export function PeerKnownCard({ peerInfo }: TPeerKnownCardProps) {
@@ -34,7 +37,7 @@ export function PeerKnownCard({ peerInfo }: TPeerKnownCardProps) {
                         </span>
                     </div>
                     <div>
-                        <span>Cert: {hashCert(peerInfo.cert)}</span>
+                        <span>Cert: {peerInfo.certHash}</span>
                     </div>
                 </div>
                 <div>

webui/src/PeerState.tsx

@@ -4,7 +4,6 @@ import { LoaderToType } from "./commonPlumbing";
 import { peerStateLoader } from "./PeerStatePlumbing";
 import { PeerAvailableCard } from "./PeerAvailableCard";
 import { PeerKnownCard } from "./PeerKnownCard";
-import { hashCert } from "./hash";
 
 export function PeerState() {
     const loaderData = useLoaderData() as LoaderToType<typeof peerStateLoader>;
@@ -20,7 +19,7 @@ export function PeerState() {
     return (
         <div id={"PeerState"}>
             <div>UUID: {loaderData.selfInfo.selfUuid}</div>
-            <div>Certificate: {hashCert(loaderData.selfInfo.cert)} </div>
+            <div>Certificate: {loaderData.selfInfo.certHash} </div>
             <div>
                 <div>Known peers</div>
                 <div>{knownPeers}</div>

webui/src/PeerStatePlumbing.ts

@@ -8,13 +8,38 @@ import {
     removeKnownPeer,
 } from "./api/PeerState";
 import { ActionFunctionArgs } from "react-router-dom";
+import { hashCert } from "./hash";
 
 export async function peerStateLoader() {
+    const selfInfoApi = await getSelfInfo();
+    const selfInfo = {
+        ...selfInfoApi,
+        certHash: await hashCert(selfInfoApi.cert),
+    };
+    const availablePeersApi = await getAvailablePeers();
+    const availablePeers = await Promise.all(
+        availablePeersApi.map(async (peerInfo) => {
+            return {
+                ...peerInfo,
+                certHash: await hashCert(peerInfo.cert),
+            };
+        }),
+    );
+    const knownPeersApi = await getKnownPeers();
+    const knownPeers = await Promise.all(
+        knownPeersApi.map(async (peerInfo) => {
+            return {
+                ...peerInfo,
+                certHash: await hashCert(peerInfo.cert),
+            };
+        }),
+    );
+    const peerAddresses = await getPeerAddresses();
     return {
-        selfInfo: await getSelfInfo(),
-        availablePeers: await getAvailablePeers(),
-        knownPeers: await getKnownPeers(),
-        peerAddresses: await getPeerAddresses(),
+        selfInfo,
+        availablePeers,
+        knownPeers,
+        peerAddresses,
     };
 }