From 88396ca289a88e8e052534e981dc9848ac8b8ed6 Mon Sep 17 00:00:00 2001
From: Nehar Tale <nehartale8@gmail.com>
Date: Mon, 20 Jan 2025 01:23:31 +0100
Subject: [PATCH] feat: Add account creation form and functionality

---
 client/src/components/account-switcher.tsx | 114 +++++++++++++++++++--
 client/src/components/context/userData.tsx |   1 +
 client/src/components/ui/addAccount.tsx    |  29 ++++++
 client/src/components/ui/button.tsx        |   2 +-
 4 files changed, 134 insertions(+), 12 deletions(-)
 create mode 100644 client/src/components/ui/addAccount.tsx

diff --git a/client/src/components/account-switcher.tsx b/client/src/components/account-switcher.tsx
index 3ba9619..6f3aaaa 100644
--- a/client/src/components/account-switcher.tsx
+++ b/client/src/components/account-switcher.tsx
@@ -1,6 +1,5 @@
-import * as React from "react"
-import { ChevronsUpDown, Plus } from "lucide-react"
-
+import * as React from "react";
+import { ChevronsUpDown, Plus } from "lucide-react";
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -9,21 +8,81 @@ import {
   DropdownMenuSeparator,
   DropdownMenuShortcut,
   DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu"
+} from "@/components/ui/dropdown-menu";
 import {
   SidebarMenu,
   SidebarMenuButton,
   SidebarMenuItem,
   useSidebar,
-} from "@/components/ui/sidebar"
-import { useUserData } from "./context/userData"
+} from "@/components/ui/sidebar";
+import { useUserData } from "./context/userData";
+import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from "./ui/dialog";
+import { useWebSocket } from "./WebSocketProvidor";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import * as z from "zod";
+import { Button } from "@/components/ui/button";
+import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import { toast } from "react-toastify";
+
 export function AccountSwitcher() {
-  const { accounts } = useUserData(); 
+  const { accounts, setAccounts } = useUserData();
   const { isMobile } = useSidebar();
   const [activeAccount, setActiveAccount] = React.useState(accounts[0]);
+  const [open, setOpen] = React.useState(false);
+
+
+  const { socket, isReady } = useWebSocket();
+
+  const formSchema = z.object({
+    Type: z.string().min(1, "Account type is required"),
+  });
+
+  const form = useForm({
+    resolver: zodResolver(formSchema),
+    defaultValues: {
+      Type: "",
+    },
+  });
+
+  function onSubmit(values: z.infer<typeof formSchema>) {
+    try {
+      console.log(values);
+
+      if (socket && isReady) {
+        socket.send("createAccount", {
+          Type: values.Type,
+        });
+
+        socket.onMessage((msg) => {
+          const response = JSON.parse(msg);
+
+          if (response.account) {
+
+                          setOpen(false)
+            setAccounts((prevAccounts) => [
+              ...prevAccounts,
+              { ...response.account, Type: values.Type },
+
+            ]);
+
+          }
+
+          if (response.Error) {
+            toast.error(response.Error);
+          }
+        });
+      }
+    } catch (error) {
+      console.error("Form submission error", error);
+      toast.error("Failed to submit the form. Please try again.");
+    }
+  }
 
   return (
     <SidebarMenu>
+    <Dialog  open={open} onOpenChange={setOpen}>
       <SidebarMenuItem>
         <DropdownMenu>
           <DropdownMenuTrigger asChild>
@@ -32,8 +91,8 @@ export function AccountSwitcher() {
               className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
             >
               <div className="grid flex-1 text-left text-sm leading-tight">
-                <span className="truncate font-semibold">{activeAccount?.AccountID}</span>
-                            </div>
+                <span className="truncate font-semibold">{activeAccount?.Type}</span>
+              </div>
               <ChevronsUpDown className="ml-auto" />
             </SidebarMenuButton>
           </DropdownMenuTrigger>
@@ -52,7 +111,7 @@ export function AccountSwitcher() {
                 onClick={() => setActiveAccount(account)}
                 className="gap-2 p-2"
               >
-                {account.AccountID}
+                {account.Type}
                 <DropdownMenuShortcut>⌘{accounts.indexOf(account) + 1}</DropdownMenuShortcut>
               </DropdownMenuItem>
             ))}
@@ -61,11 +120,44 @@ export function AccountSwitcher() {
               <div className="flex size-6 items-center justify-center rounded-md border bg-background">
                 <Plus className="size-4" />
               </div>
-              <div className="font-medium text-muted-foreground">Add account</div>
+              <DialogTrigger>Add account</DialogTrigger>
             </DropdownMenuItem>
           </DropdownMenuContent>
         </DropdownMenu>
       </SidebarMenuItem>
+
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>Add New Account</DialogTitle>
+            <DialogDescription>
+              <Form {...form}>
+                <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
+                  <FormField
+                    control={form.control}
+                    name="Type"
+                    render={({ field }) => (
+                      <FormItem>
+                        <FormLabel>Account Type</FormLabel>
+                        <FormControl>
+                          <Input placeholder="Account Type" type="text" {...field} />
+                        </FormControl>
+                        <FormMessage />
+                      </FormItem>
+                    )}
+                  />
+                <DialogFooter>
+                  <Button variant="default" className="mt-5" type="submit">
+                    Add!
+                  </Button>
+
+                </DialogFooter>
+                  </form>
+              </Form>
+            </DialogDescription>
+          </DialogHeader>
+        </DialogContent>
+      </Dialog>
     </SidebarMenu>
   );
 }
+
diff --git a/client/src/components/context/userData.tsx b/client/src/components/context/userData.tsx
index f75b031..b06f932 100644
--- a/client/src/components/context/userData.tsx
+++ b/client/src/components/context/userData.tsx
@@ -14,6 +14,7 @@ interface Account {
 			UserID:         string,
 			AccountID:      string,
 			AccountBalance: number,
+            Type: string,
 
 }
 interface Transaction{
diff --git a/client/src/components/ui/addAccount.tsx b/client/src/components/ui/addAccount.tsx
new file mode 100644
index 0000000..4cc7a39
--- /dev/null
+++ b/client/src/components/ui/addAccount.tsx
@@ -0,0 +1,29 @@
+import { Button } from './button'
+import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger } from './dialog'
+
+export const addAccount = (props : {}) => {
+    return (
+        <div>
+ 
+<Dialog>
+
+  <DialogContent>
+    <DialogHeader>
+      <DialogTitle>Are you absolutely sure?</DialogTitle>
+      <DialogDescription>
+        This action cannot be undone. This will permanently delete your account
+        and remove your data from our servers. <br/>
+            <Button variant="destructive" className="mt-5" >
+            
+
+  Im Sure!
+  </Button>
+
+      </DialogDescription>
+    </DialogHeader>
+  </DialogContent>
+</Dialog>
+
+        </div>
+    )
+}
diff --git a/client/src/components/ui/button.tsx b/client/src/components/ui/button.tsx
index 65d4fcd..12fc496 100644
--- a/client/src/components/ui/button.tsx
+++ b/client/src/components/ui/button.tsx
@@ -13,7 +13,7 @@ const buttonVariants = cva(
           "bg-primary text-primary-foreground shadow hover:bg-primary/90",
         destructive:
           "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
-        outline:
+               outline:
           "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
         secondary:
           "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",