fix the reloading because of the breadcrumbs

kadena-community · Nov 4, 2024 · e0b7940 · e0b7940
1 parent 3e67689
commit e0b7940
Show file tree

Hide file tree

Showing 7 changed files with 96 additions and 80 deletions.
diff --git a/.changeset/many-gorillas-juggle.md b/.changeset/many-gorillas-juggle.md
@@ -0,0 +1,2 @@
+---
+---
diff --git a/packages/apps/dev-wallet/src/Components/Aside/Aside.tsx b/packages/apps/dev-wallet/src/Components/Aside/Aside.tsx
@@ -3,6 +3,10 @@ import { useLocation } from 'react-router-dom';
 
 const importView = async (key: string) => {
   switch (key) {
+    case 'AddNetwork':
+      return lazy(() =>
+        import(`./views/AddNetwork`).catch(() => import(`./views/Error`)),
+      );
     case 'AddContact':
       return lazy(() =>
         import(`./views/AddContact`).catch(() => import(`./views/Error`)),

diff --git a/packages/apps/dev-wallet/src/Components/Aside/views/AddNetwork.tsx b/packages/apps/dev-wallet/src/Components/Aside/views/AddNetwork.tsx
@@ -0,0 +1,52 @@
+import { networkRepository } from '@/modules/network/network.repository';
+import { useWallet } from '@/modules/wallet/wallet.hook';
+import {
+  INetworkWithOptionalUuid,
+  NetworkForm,
+} from '@/pages/networks/Components/network-form';
+import { useLayout } from '@kadena/kode-ui/patterns';
+import { useMemo } from 'react';
+
+const getNewNetwork = (): INetworkWithOptionalUuid => ({
+  uuid: undefined,
+  networkId: '',
+  name: '',
+  hosts: [
+    {
+      url: '',
+      submit: false,
+      read: false,
+      confirm: false,
+    },
+  ],
+});
+
+const AddNetwork = ({ networkUuid }: { networkUuid: string }) => {
+  const { handleSetAsideExpanded } = useLayout();
+  const { getNetwork } = useWallet();
+
+  const network = useMemo(() => {
+    return getNetwork(networkUuid) ?? getNewNetwork();
+  }, [networkUuid]);
+
+  return (
+    <>
+      <NetworkForm
+        onSave={async (updNetwork) => {
+          if (updNetwork.uuid) {
+            await networkRepository.updateNetwork(updNetwork);
+          } else {
+            await networkRepository.addNetwork({
+              ...updNetwork,
+              uuid: crypto.randomUUID(),
+            });
+          }
+          handleSetAsideExpanded(false);
+        }}
+        network={network}
+      />
+    </>
+  );
+};
+
+export default AddNetwork;
diff --git a/packages/apps/dev-wallet/src/modules/wallet/wallet.hook.tsx b/packages/apps/dev-wallet/src/modules/wallet/wallet.hook.tsx
@@ -296,9 +296,13 @@ export const useWallet = () => {
   const getContact = (id: string) => {
     return context.contacts.find((contact) => contact.uuid === id);
   };
+  const getNetwork = (id: string) => {
+    return context.networks.find((network) => network.uuid === id);
+  };
 
   return {
     getContact,
+    getNetwork,
     createProfile,
     unlockProfile,
     createKey,

diff --git a/packages/apps/dev-wallet/src/pages/networks/Components/network-form.tsx b/packages/apps/dev-wallet/src/pages/networks/Components/network-form.tsx
@@ -69,6 +69,8 @@ export function NetworkForm({
   const hosts = watch('hosts');
   const networkId = watch('networkId');
 
+  console.log({ hosts, networkId });
+
   const isNetworkIdValid =
     hosts.length > 0 &&
     networkId.length > 0 &&

diff --git a/packages/apps/dev-wallet/src/pages/networks/networks.tsx b/packages/apps/dev-wallet/src/pages/networks/networks.tsx
@@ -1,50 +1,18 @@
 import { ListItem } from '@/Components/ListItem/ListItem';
-import { networkRepository } from '@/modules/network/network.repository';
 import { useWallet } from '@/modules/wallet/wallet.hook';
 import { createAsideUrl } from '@/utils/createAsideUrl';
 import { MonoWifiTethering, MonoWorkspaces } from '@kadena/kode-icons/system';
-import {
-  Button,
-  Dialog,
-  DialogContent,
-  DialogHeader,
-  Heading,
-  Link,
-  Stack,
-  Text,
-} from '@kadena/kode-ui';
+import { Heading, Link, Link as LinkUI, Stack, Text } from '@kadena/kode-ui';
 import { useLayout } from '@kadena/kode-ui/patterns';
-import { useState } from 'react';
 import { panelClass } from '../home/style.css';
-import {
-  INetworkWithOptionalUuid,
-  NetworkForm,
-} from './Components/network-form';
-
-const getNewNetwork = (): INetworkWithOptionalUuid => ({
-  uuid: undefined,
-  networkId: '',
-  name: '',
-  hosts: [
-    {
-      url: '',
-      submit: false,
-      read: false,
-      confirm: false,
-    },
-  ],
-});
 
 export function Networks() {
   const { networks } = useWallet();
-  const [showNetworkModal, setShowNetworkModal] = useState(false);
-  const [selectedNetwork, setSelectedNetwork] =
-    useState<INetworkWithOptionalUuid>(() => getNewNetwork());
   useLayout({
     appContext: {
       visual: <MonoWorkspaces />,
       label: 'Add Network',
-      href: createAsideUrl('KeySource'),
+      href: createAsideUrl('AddNetwork'),
       component: Link,
     },
     breadCrumbs: [
@@ -55,29 +23,6 @@ export function Networks() {
   return (
     <>
       <Stack margin="md" flexDirection={'column'}>
-        <Dialog
-          isOpen={showNetworkModal}
-          onOpenChange={setShowNetworkModal}
-          size="sm"
-        >
-          <DialogHeader>Add Network</DialogHeader>
-          <DialogContent>
-            <NetworkForm
-              onSave={async (updNetwork) => {
-                if (updNetwork.uuid) {
-                  await networkRepository.updateNetwork(updNetwork);
-                } else {
-                  await networkRepository.addNetwork({
-                    ...updNetwork,
-                    uuid: crypto.randomUUID(),
-                  });
-                }
-                setShowNetworkModal(false);
-              }}
-              network={selectedNetwork}
-            />
-          </DialogContent>
-        </Dialog>
         <Stack
           className={panelClass}
           marginBlockStart="xl"
@@ -91,16 +36,14 @@ export function Networks() {
           >
             <Heading as="h4">Networks</Heading>
 
-            <Button
+            <LinkUI
+              component={Link}
+              href={createAsideUrl('AddNetwork')}
               variant="outlined"
               isCompact
-              onPress={() => {
-                setSelectedNetwork(getNewNetwork());
-                setShowNetworkModal(true);
-              }}
             >
               Add Network
-            </Button>
+            </LinkUI>
           </Stack>
           {networks.map((network) => (
             <ListItem key={network.uuid}>
@@ -121,16 +64,16 @@ export function Networks() {
                       ? ` +${network.hosts.length - 1}`
                       : ''}
                   </Text>
-                  <Button
+                  <LinkUI
+                    component={Link}
+                    href={createAsideUrl('AddNetwork', {
+                      networkUuid: network.uuid,
+                    })}
                     isCompact
                     variant="outlined"
-                    onPress={() => {
-                      setSelectedNetwork(network);
-                      setShowNetworkModal(true);
-                    }}
                   >
                     Edit
-                  </Button>
+                  </LinkUI>
                 </Stack>
               </Stack>
             </ListItem>

diff --git a/packages/libs/kode-ui/src/patterns/SideBarLayout/components/LayoutProvider.tsx b/packages/libs/kode-ui/src/patterns/SideBarLayout/components/LayoutProvider.tsx
@@ -52,9 +52,7 @@ export const LayoutContext = createContext<ILayoutContext>({
   isActiveUrl: () => {},
 });
 
-export interface IuseLayoutProps extends ILayoutContext {
-  initPage: (props: Pick<ILayoutContext, 'appContext' | 'breadCrumbs'>) => void;
-}
+export interface IuseLayoutProps extends ILayoutContext {}
 
 export const useLayout = (
   props?: Pick<ILayoutContext, 'appContext' | 'breadCrumbs'>,
@@ -64,14 +62,25 @@ export const useLayout = (
   useEffect(() => {
     if (!props) return;
 
-    context.setAppContext(props.appContext);
-  }, [props?.appContext]);
-
-  useEffect(() => {
-    if (!props) return;
-
-    context.setBreadCrumbs(props.breadCrumbs);
-  }, [props?.breadCrumbs]);
+    if (props.appContext?.href !== context.appContext?.href) {
+      context.setAppContext(props.appContext);
+    }
+
+    //check if the content of the breadcrumbs has changed
+    const breadCrumbsHasChanged = props.breadCrumbs.reduce((acc, val, idx) => {
+      const oldVal = context.breadCrumbs[idx];
+      if (val.url !== oldVal?.url) return true;
+
+      return acc;
+    }, false);
+
+    if (
+      props.breadCrumbs.length !== context.breadCrumbs.length ||
+      breadCrumbsHasChanged
+    ) {
+      context.setBreadCrumbs(props.breadCrumbs);
+    }
+  }, [props?.appContext, props?.breadCrumbs]);
 
   return { ...context };
 };