"refactor: Use userData context for user information"

client/src/components/app-sidebar.tsx

@@ -1,22 +1,18 @@
 import * as React from "react"
 import {
   AudioWaveform,
-  BookOpen,
-  Bot,
   Command,
   Frame,
   GalleryVerticalEnd,
   Map,
   PieChart,
-  Settings2,
   SquareTerminal,
 } from "lucide-react"
 
 import { NavMain } from "@/components/nav-main"
 import { NavProjects } from "@/components/nav-projects"
 import { NavUser } from "@/components/nav-user"
 import { TeamSwitcher } from "@/components/team-switcher"
-import { useNavigate } from "react-router";
 import { useWebSocket } from "./WebSocketProvidor";
 import { useEffect, useState } from "react";
 import {
@@ -27,6 +23,7 @@ import {
   SidebarRail,
 } from "@/components/ui/sidebar"
 import { ThemeChanger } from "./ui/theme"
+import { useUserData } from "./context/userData"
 
 const data = {
    teams: [
@@ -76,31 +73,9 @@ const data = {
 }
 
 export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
-   const {socket, isReady}= useWebSocket();
 
-   const [userData, setUserData] = useState({
-       FirstName: "",
-      Email:"",
-   });
-
-
-  useEffect(()=>{
-
-         if(socket && isReady){
-               socket.send( "getUser" );
-
-        socket.onMessage((msg)=>{
-    const response =  JSON.parse(msg)
-    if (response.userData) {
-
-     setUserData(response.userData)
-    }
-    })}},[socket, isReady]) 
-useEffect(() => {
-}, [userData]);
-useEffect(() => {
-  console.log("Updated userData:", userData);
-}, [userData]);
+   const {userData }= useUserData();
+
   return (
     <Sidebar collapsible="icon" {...props}>
       <SidebarHeader>

client/src/components/context/userData.tsx

@@ -0,0 +1,57 @@
+
+import { createContext, useContext, useState, useEffect } from "react";
+import { useWebSocket } from "@/components/WebSocketProvidor";
+
+interface UserData {
+  ID: string;
+  FirstName: string;
+  LastName: string;
+  Email: string;
+  Country: string;
+}
+
+interface UserDataContextType {
+  userData: UserData;
+  setUserData: React.Dispatch<React.SetStateAction<UserData>>;
+}
+
+const UserDataContext = createContext<UserDataContextType | null>(null);
+
+export const useUserData = () => {
+  const context = useContext(UserDataContext);
+  if (!context) {
+    throw new Error("useUserData must be used within a UserDataProvider");
+  }
+  return context;
+};
+
+export const UserDataProvider = ({ children }: { children: React.ReactNode }) => {
+  const { socket, isReady } = useWebSocket();
+  const [userData, setUserData] = useState<UserData>({
+    ID: "",
+    FirstName: "",
+    LastName: "",
+    Email: "",
+    Country: "",
+  });
+  useEffect(()=>{
+
+         if(socket && isReady){
+               socket.send( "getUser" );
+
+        socket.onMessage((msg)=>{
+    const response =  JSON.parse(msg)
+    if (response.userData) {
+
+     setUserData(response.userData)
+    }
+    })}},[socket, isReady]) 
+useEffect(() => {
+  console.log("User data updated", userData);
+}, [userData]); // This will log whenever userData is updated
+  return (
+    <UserDataContext.Provider value={{ userData, setUserData }}>
+      {children}
+    </UserDataContext.Provider>
+  );
+};

client/src/components/nav-user.tsx

@@ -1,13 +1,9 @@
 "use client"
 
 import {
-  BadgeCheck,
-  Bell,
   ChevronsUpDown,
-  CreditCard,
   LogOut,
   Settings,
-  Sparkles,
 } from "lucide-react"
 
 import {
@@ -18,7 +14,6 @@ import {
 import {
   DropdownMenu,
   DropdownMenuContent,
-  DropdownMenuGroup,
   DropdownMenuItem,
   DropdownMenuLabel,
   DropdownMenuSeparator,
@@ -30,7 +25,7 @@ import {
   SidebarMenuItem,
   useSidebar,
 } from "@/components/ui/sidebar"
-import { Link, useNavigate, type Navigate } from "react-router"
+import { Link, useNavigate, } from "react-router"
 import { toast } from "react-toastify"
 
 export function NavUser({

client/src/lib/socket.ts

@@ -9,6 +9,7 @@ export class WebSocketClient {
     this.socket.onmessage = (event) => {
       this.messageHandlers.forEach((handler) => handler(event.data));
         const message = JSON.parse(event.data);
+        console.log(message)
       if (message === "ping") {
             if (this.socket.readyState === WebSocket.OPEN) {
         this.socket.send(JSON.stringify({ Action: "pong" }));
@@ -23,14 +24,17 @@ export class WebSocketClient {
     this.messageHandlers.push(handler);
   }
 
-  send(message: string) {
-    if (this.socket.readyState === WebSocket.OPEN) {
-      this.socket.send(JSON.stringify({ Action: message}));
-    } else {
-      console.error("WebSocket is not open.");
+  send(action: string, data: any = null) {
+  if (this.socket.readyState === WebSocket.OPEN) {
+    const message: { Action: string; Data?: any } = { Action: action };    if (data) {
+      message.Data = data;
     }
+    this.socket.send(JSON.stringify(message));
+    console.log(message)
+  } else {
+    console.error("WebSocket is not open.");
   }
-
+}
   close() {
     this.socket.close();
   }

client/src/pages/(secure)/layout.tsx

@@ -1,5 +1,6 @@
 import { WebSocketProvider } from "@/components/WebSocketProvidor";
 import { AppSidebar } from "@/components/app-sidebar";
+import { UserDataProvider } from "@/components/context/userData";
 import { SidebarProvider, SidebarTrigger } from "@/components/ui/sidebar";
 import CheckAuth from "@/lib/checkAuth";
 import type { JSX } from "react";
@@ -14,10 +15,13 @@ export function Layout({ children }: LayoutProps): JSX.Element {
     <main>
       <CheckAuth />
       <WebSocketProvider>
+       <UserDataProvider>
+
         <SidebarProvider>
           <AppSidebar />
           <Outlet />
         </SidebarProvider>
+       </UserDataProvider>
       </WebSocketProvider>
     </main>
   );

client/src/pages/(secure)/settings/index.tsx

@@ -42,41 +42,24 @@ import {
 } from "@/components/ui/password-input"
 import { toast } from "react-toastify"
 import { useWebSocket } from "@/components/WebSocketProvidor"
+import { useUserData } from "@/components/context/userData"
 
 const formSchema = z.object({
   FirstName: z.string(),
   LastName: z.string(),
   Email: z.string(),
   Country: z.string(),
-  OldPassword: z.string().min(8),
-  NewPassword: z.string().min(8),
-  ConfirmPassword: z.string().min(8)
+  OldPassword: z.string().min(8).optional(),
+  NewPassword: z.string().min(8).optional(),
+  ConfirmPassword: z.string().min(8).optional()
 });
 export default function Index() {
      const {socket, isReady}= useWebSocket();
 
-   const [userData, setUserData] = useState({
-       FirstName: "",
-       LastName:"",
-      Email:"",
-      Country: ""
-   });
-
-
-  useEffect(()=>{
-
-         if(socket && isReady){
-               socket.send( "getUser" );
+
 
-        socket.onMessage((msg)=>{
-    const response =  JSON.parse(msg)
-    if (response.userData) {
-
-     setUserData(response.userData)
-    }
-    })}},[socket, isReady]) 
-useEffect(() => {
-}, [userData]);
+  const { userData, setUserData } = useUserData();
+
 
   const form = useForm < z.infer < typeof formSchema >> ({
     resolver: zodResolver(formSchema),
@@ -85,11 +68,23 @@ useEffect(() => {
    function onSubmit(values: z.infer < typeof formSchema > ) {
     try {
       console.log(values);
-      toast(
-        <pre className="mt-2 w-[340px] rounded-md bg-slate-950 p-4">
-          <code className="text-white">{JSON.stringify(values, null, 2)}</code>
-        </pre>
-      );
+       if(socket && isReady){
+               socket.send( "updateUser", {
+                     FirstName: values.FirstName,
+        LastName: values.LastName,
+        Email: values.Email,
+        Country: values.Country,
+         ID: userData?.ID,
+               } );
+
+       }
+ setUserData({ 
+     ...userData,
+        FirstName: values.FirstName,
+        LastName: values.LastName,
+        Email: values.Email,
+        Country: values.Country,
+      });
     } catch (error) {
       console.error("Form submission error", error);
       toast.error("Failed to submit the form. Please try again.");