Merge pull request #317 from shawakash/account_ui

fix: account switcher not showing the new created account

apps/web/app/account/components/account-switcher.tsx

@@ -11,24 +11,22 @@ import {
     SelectValue,
 } from "@/components/ui/select"
 import { Wallet } from 'lucide-react';
+import { accountsAtom } from "@paybox/recoil";
+import { useRecoilValue } from "recoil";
 
 interface AccountSwitcherProps {
     isCollapsed: boolean
-    accounts: {
-        id: string,
-        name: string,
-    }[],
     selectedAccount: string,
     setSelectedAccount: (accountId: string) => void
 }
 
 export function AccountSwitcher({
     isCollapsed,
-    accounts,
     selectedAccount,
     setSelectedAccount
 }: AccountSwitcherProps) {
 
+    const accounts = useRecoilValue(accountsAtom);
 
     return (
         <Select defaultValue={selectedAccount} onValueChange={setSelectedAccount}>

apps/web/app/account/components/accountLayout.tsx

@@ -16,6 +16,8 @@ import { AccountSwitcher } from "@/app/account/components/account-switcher";
 import { AccountType } from "@paybox/common";
 import { usePathname, useRouter } from "next/navigation";
 import { commonNavLinks, getNavLinks } from "./navLinks";
+import {useSetRecoilState} from "recoil";
+import { accountsAtom } from "@paybox/recoil";
 
 interface AccountLayoutProps {
     defaultLayout: number[] | undefined;
@@ -40,6 +42,7 @@ export function AccountLayout({
     const [selectedAccount, setSelectedAccount] = React.useState<string>(
         accounts[0].id
     );
+    const setAccounts = useSetRecoilState(accountsAtom);
 
     const path = usePathname()
     const router = useRouter();
@@ -54,6 +57,8 @@ export function AccountLayout({
 
         window.addEventListener("resize", checkScreenWidth);
 
+        setAccounts(accounts);
+
         return () => {
             window.removeEventListener("resize", checkScreenWidth);
         };
@@ -125,7 +130,6 @@ export function AccountLayout({
                     >
                         <AccountSwitcher
                             isCollapsed={isCollapsed}
-                            accounts={accounts as { id: string, name: string }[]}
                             selectedAccount={selectedAccount}
                             setSelectedAccount={setSelectedAccount}
                         />

apps/web/app/account/create/components/account-create-form.tsx

@@ -57,25 +57,33 @@ import {
 import { Link } from "lucide-react";
 import { useRouter } from "next/navigation";
 import { AvatarUpload } from "./avatar-upload";
+import { accountsAtom, defaultAccountNumberAtom } from "@paybox/recoil";
+import {useSetRecoilState} from "recoil";
 
 interface AccountCreateProps extends React.HTMLAttributes<HTMLDivElement> {
-    defaultAccountName: string,
+    defaultAccountNumber: number,
     putUrl: string,
     jwt: string
 }
 
 export function AccountCreateForm({
-    defaultAccountName,
+    defaultAccountNumber,
     jwt,
     putUrl
 }: AccountCreateProps) {
     const [isLoading, setIsLoading] = useRecoilState(loadingAtom);
     const router = useRouter();
+    const [defaultNumber, setDefaultAccountNumber] = useRecoilState(defaultAccountNumberAtom);
+    const setAccounts = useSetRecoilState(accountsAtom);
+
+    React.useEffect(() => {
+        setDefaultAccountNumber(defaultAccountNumber);
+    }, [defaultAccountNumber])
 
     const form = useForm<z.infer<typeof AccountCreateQuery>>({
         resolver: zodResolver(AccountCreateQuery),
         defaultValues: {
-            name: defaultAccountName,
+            name: `Account ${defaultNumber}`,
             imgUrl: undefined
         },
     });
@@ -110,6 +118,12 @@ export function AccountCreateForm({
                         "Authorization": `Bearer ${jwt}`
                     },
                 }).then(res => res.json());
+                setAccounts((oldAccounts) => {
+                    return [...oldAccounts, response.account]
+                });
+                setDefaultAccountNumber((oldNumber) => {
+                    return oldNumber + 1;
+                });
                 return { account: response.account, status: response.status, msg: response.msg }
             } catch (error) {
                 throw new Error("Error creating Account");
@@ -130,6 +144,9 @@ export function AccountCreateForm({
         });
         router.push('/account/');
     }
+
+
+
     return (
         <div className="flex items-center justify-center">
             <Card className="w-[450px]">
@@ -153,7 +170,7 @@ export function AccountCreateForm({
                                                         <AvatarUpload
                                                             value={field.value}
                                                             onChange={field.onChange}
-                                                            fallbackName={defaultAccountName.split(" ")[0].charAt(0) + defaultAccountName.split(" ")[1].charAt(0)}
+                                                            fallbackName={`A${defaultNumber}`}
                                                         />
                                                     </FormControl>
                                                     <FormMessage />

apps/web/app/account/create/page.tsx

@@ -3,7 +3,7 @@ import { BACKEND_URL, responseStatus } from "@paybox/common";
 import { getServerSession } from "next-auth"
 import { AccountCreateForm } from "./components/account-create-form";
 
-const getDefaultMetadata = async (jwt: string): Promise<{name: string, putUrl: string} | null> => {
+const getDefaultMetadata = async (jwt: string): Promise<{number: number, putUrl: string} | null> => {
     try {
         const {status, putUrl, number}: {status: responseStatus, putUrl: string, number: number} = await fetch(`${BACKEND_URL}/account/defaultMetadata`, {
             method: "get",
@@ -16,7 +16,7 @@ const getDefaultMetadata = async (jwt: string): Promise<{name: string, putUrl: s
             return null;
         }
         return {
-            name: `Account ${number + 1}`,
+            number: number + 1,
             putUrl
         };
     } catch (error) {
@@ -29,11 +29,11 @@ export default async function AccountCreatePage(){
     const session = await getServerSession(authOptions);
 
     //@ts-ignore
-    const {name, putUrl} = await getDefaultMetadata(session?.user.jwt);
+    const {number, putUrl} = await getDefaultMetadata(session?.user.jwt);
   return (
     <>
         <AccountCreateForm 
-            defaultAccountName={name || ""}
+            defaultAccountNumber={number as number}
             putUrl={putUrl || ""}
             //@ts-ignore
             jwt={session?.user.jwt}

apps/web/package.json

@@ -74,25 +74,13 @@
     "react-hook-form": "^7.49.3",
     "react-icons": "^5.0.1",
     "react-qr-reader": "^3.0.0-beta-1",
-    "react-resizable-panels": "^2.0.16",
+    "react-resizable-panels": "^1.0.9",
+    "recoil": "^0.7.7",
     "sonner": "^1.3.1",
     "tailwind-merge": "^2.2.0",
     "tailwindcss": "3.4.1",
+    "tailwindcss-animate": "^1.0.7",
     "typescript": "5.4.3",
-    "zod": "^3.22.4",
-    "@emoji-mart/data": "^1.1.2",
-    "@emoji-mart/react": "^1.1.1",
-    "class-variance-authority": "^0.7.0",
-    "clsx": "^2.1.0",
-    "emoji-mart": "^5.5.2",
-    "framer-motion": "^10.18.0",
-    "geist": "^1.2.1",
-    "lucide-react": "^0.312.0",
-    "next": "14.1.4",
-    "react": "^18",
-    "react-dom": "^18",
-    "react-resizable-panels": "^1.0.9",
-    "tailwind-merge": "^2.2.0",
-    "tailwindcss-animate": "^1.0.7"
+    "zod": "^3.22.4"
   }
 }

packages/recoil/src/atoms/account.tsx

@@ -1,11 +1,18 @@
+import { AccountType } from "@paybox/common";
 import { atom } from "recoil";
 
 export const accountAtom = atom({
     default: null,
     key: "accountAtom",
 });
 
-export const accountsAtom = atom({
+export const accountsAtom = atom<AccountType[]>({
     default: [],
     key: "accountsAtom",
 });
+
+//TODO: set this to the default account number by
+export const defaultAccountNumberAtom = atom<number>({
+    default: 1,
+    key: "defaultAccountNumberAtom",
+});

yarn.lock

@@ -16900,7 +16900,7 @@ real-require@^0.1.0:
 
 recoil@^0.7.7:
   version "0.7.7"
-  resolved "https://registry.npmjs.org/recoil/-/recoil-0.7.7.tgz"
+  resolved "https://registry.yarnpkg.com/recoil/-/recoil-0.7.7.tgz#c5f2c843224384c9c09e4a62c060fb4c1454dc8e"
   integrity sha512-8Og5KPQW9LwC577Vc7Ug2P0vQshkv1y3zG3tSSkWMqkWSwHmE+by06L8JtnGocjW6gcCvfwB3YtrJG6/tWivNQ==
   dependencies:
     hamt_plus "1.0.2"