select the created account in the dropdown

massalabs · Jun 6, 2023 · a603a40 · a603a40
1 parent ec9a8a3
commit a603a40
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 10 deletions.
diff --git a/web-frontend/src/custom/api/useResource.ts b/web-frontend/src/custom/api/useResource.ts
@@ -6,7 +6,10 @@ import { useQuery, UseQueryResult } from '@tanstack/react-query';
 
 // LOCALS
 
-export function useResource<T>(resource: string): UseQueryResult<T, undefined> {
+export function useResource<T>(
+  resource: string,
+  options: object = {},
+): UseQueryResult<T, undefined> {
   const url = `${import.meta.env.VITE_BASE_API}/${resource}`;
 
   return useQuery<T, undefined>({
@@ -16,5 +19,6 @@ export function useResource<T>(resource: string): UseQueryResult<T, undefined> {
 
       return data;
     },
+    ...options,
   });
 }
diff --git a/web-frontend/src/layouts/WalletLayout/WalletLayout.tsx b/web-frontend/src/layouts/WalletLayout/WalletLayout.tsx
@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import { ReactNode, useEffect, useState } from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
 import { useResource } from '../../custom/api';
 import { AccountObject } from '../../models/AccountModel';
@@ -42,12 +42,35 @@ function WalletLayout(props: WalletProps) {
   const navigate = useNavigate();
   const { nickname } = useParams();
 
-  const { data: accounts = [] } = useResource<AccountObject[]>('accounts');
+  const { data: accounts = [], refetch } = useResource<AccountObject[]>(
+    'accounts',
+    {
+      refetchOnWindowFocus: false,
+      enabled: false, // disable this query from automatically running
+      manual: true,
+    },
+  );
+
+  refetch();
+
+  const [selectedAccountKey, setSelectedAccountKey] = useState(0);
+
+  useEffect(() => {
+    const index = Object.keys(accounts).find((_, idx) => {
+      return accounts[idx].nickname === nickname;
+    });
+
+    if (index === undefined) {
+      setSelectedAccountKey(0);
+    } else {
+      setSelectedAccountKey(parseInt(index));
+    }
+  }, [accounts, refetch]);
 
   // If no account, redirect to welcome page
   if (!accounts.length) {
     navigate(routeFor('index'));
-    return <></>;
+    return null;
   }
 
   function isActive(item: MenuItem) {
@@ -125,12 +148,6 @@ function WalletLayout(props: WalletProps) {
     onClick: () => navigate(routeFor('account-create')),
   });
 
-  const selectedAccountKey: number = parseInt(
-    Object.keys(accounts).find(
-      (_, idx) => accounts[idx].nickname === nickname,
-    ) || '0',
-  );
-
   return (
     <div className="bg-primary min-h-screen">
       <div