From 224472e6c1878b9e175b98a5c0cce79a5ce7f23d Mon Sep 17 00:00:00 2001 From: Nehar Tale Date: Sun, 19 Jan 2025 23:32:09 +0100 Subject: [PATCH] feat: Add new secure index page and account switcher functionality --- "\\" | 44 +++++++++++++++ ...team-switcher.tsx => account-switcher.tsx} | 46 ++++++---------- client/src/components/app-sidebar.tsx | 25 ++------- client/src/components/context/userData.tsx | 53 +++++++++++++++++-- client/src/pages/(secure)/index.tsx | 10 +--- handlers/Accounts.go | 3 +- handlers/Transactions.go | 2 +- 7 files changed, 117 insertions(+), 66 deletions(-) create mode 100644 "\\" rename client/src/components/{team-switcher.tsx => account-switcher.tsx} (62%) diff --git "a/\\" "b/\\" new file mode 100644 index 0000000..e475253 --- /dev/null +++ "b/\\" @@ -0,0 +1,44 @@ +import { + Breadcrumb, + BreadcrumbItem, + BreadcrumbLink, + BreadcrumbList, + BreadcrumbPage, + BreadcrumbSeparator, +} from "@/components/ui/breadcrumb" +import { Separator } from "@/components/ui/separator" +import { + SidebarInset, + SidebarTrigger, +} from "@/components/ui/sidebar" + +export default function Index() { + return ( + +
+
+ + + + + + + Building Your Application + + + + + +
+
+
+
+
+
+
+
+
+
+ + ) +} diff --git a/client/src/components/team-switcher.tsx b/client/src/components/account-switcher.tsx similarity index 62% rename from client/src/components/team-switcher.tsx rename to client/src/components/account-switcher.tsx index e3de66a..3ba9619 100644 --- a/client/src/components/team-switcher.tsx +++ b/client/src/components/account-switcher.tsx @@ -16,18 +16,11 @@ import { SidebarMenuItem, useSidebar, } from "@/components/ui/sidebar" - -export function TeamSwitcher({ - teams, -}: { - teams: { - name: string - logo: React.ElementType - plan: string - }[] -}) { - const { isMobile } = useSidebar() - const [activeTeam, setActiveTeam] = React.useState(teams[0]) +import { useUserData } from "./context/userData" +export function AccountSwitcher() { + const { accounts } = useUserData(); + const { isMobile } = useSidebar(); + const [activeAccount, setActiveAccount] = React.useState(accounts[0]); return ( @@ -38,15 +31,9 @@ export function TeamSwitcher({ size="lg" className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground" > -
- -
- - {activeTeam.name} - - {activeTeam.plan} -
+ {activeAccount?.AccountID} +
@@ -57,19 +44,16 @@ export function TeamSwitcher({ sideOffset={4} > - Teams + Accounts - {teams.map((team, index) => ( + {accounts.map((account) => ( setActiveTeam(team)} + key={account.AccountID} + onClick={() => setActiveAccount(account)} className="gap-2 p-2" > -
- -
- {team.name} - ⌘{index + 1} + {account.AccountID} + ⌘{accounts.indexOf(account) + 1} ))} @@ -77,11 +61,11 @@ export function TeamSwitcher({
-
Add team
+
Add account
- ) + ); } diff --git a/client/src/components/app-sidebar.tsx b/client/src/components/app-sidebar.tsx index 68c8252..8667e2d 100644 --- a/client/src/components/app-sidebar.tsx +++ b/client/src/components/app-sidebar.tsx @@ -12,7 +12,6 @@ import { 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 { Sidebar, SidebarContent, @@ -21,25 +20,10 @@ import { SidebarRail, } from "@/components/ui/sidebar" import { useUserData } from "./context/userData" +import { AccountSwitcher } from "./account-switcher" const data = { - teams: [ - { - name: "Acme Inc", - logo: GalleryVerticalEnd, - plan: "Enterprise", - }, - { - name: "Acme Corp.", - logo: AudioWaveform, - plan: "Startup", - }, - { - name: "Evil Corp.", - logo: Command, - plan: "Free", - }, - ], + navMain: [ { title: "dashboard", @@ -71,12 +55,13 @@ const data = { export function AppSidebar({ ...props }: React.ComponentProps) { - const {userData }= useUserData(); + const { userData } = useUserData(); return ( - + + diff --git a/client/src/components/context/userData.tsx b/client/src/components/context/userData.tsx index f7e20f6..939f8ce 100644 --- a/client/src/components/context/userData.tsx +++ b/client/src/components/context/userData.tsx @@ -5,14 +5,33 @@ import { useWebSocket } from "@/components/WebSocketProvidor"; interface UserData { ID: string; FirstName: string; - LastName: string; +LastName: string; Email: string; Country: string; } +interface Account { + ID: string, + UserID: string, + AccountID: string, + AccountBalance: number, +} +interface Transaction{ + ID: string, + UserID: string, + AccountID: string, + Amount: number, + IsRecurring: boolean, + + +} interface UserDataContextType { userData: UserData; + accounts: Account[]; + transactions: Transaction[]; setUserData: React.Dispatch>; + setAccounts: React.Dispatch>; + setTransactions: React.Dispatch>; } const UserDataContext = createContext(null); @@ -34,21 +53,47 @@ export const UserDataProvider = ({ children }: { children: React.ReactNode }) => Email: "", Country: "", }); + +const [accounts, setAccounts] = useState([]); + const [transactions, setTransactions] = useState([]); + + + useEffect(()=>{ if(socket && isReady){ - socket.send( "getUser" ); + + socket.send("getUser"); + socket.send("getAccounts") socket.onMessage((msg)=>{ + const response = JSON.parse(msg) + if (response.userData) { setUserData(response.userData) } + if (response.accounts){ + setAccounts(response.accounts) + socket.send("getTransactions") + + if (response.transactions){ + setTransactions(response.transactions) + } + } })}},[socket, isReady]) return ( - - {children} + {children} ); }; diff --git a/client/src/pages/(secure)/index.tsx b/client/src/pages/(secure)/index.tsx index 3ad8501..7f8f602 100644 --- a/client/src/pages/(secure)/index.tsx +++ b/client/src/pages/(secure)/index.tsx @@ -9,7 +9,6 @@ import { import { Separator } from "@/components/ui/separator" import { SidebarInset, - SidebarProvider, SidebarTrigger, } from "@/components/ui/sidebar" @@ -22,14 +21,9 @@ export default function Index() { - - - Building Your Application - - - + - Data Fetching + Dashboard diff --git a/handlers/Accounts.go b/handlers/Accounts.go index 0e0f72d..a6d4235 100644 --- a/handlers/Accounts.go +++ b/handlers/Accounts.go @@ -71,8 +71,7 @@ func GetAccounts(ws *websocket.Conn, data json.RawMessage, userID string) { // Package the response response := map[string]interface{}{ - "Success": "Fetched Accounts", - "Accounts": accountData, + "accounts": accountData, } responseData, _ := json.Marshal(response) diff --git a/handlers/Transactions.go b/handlers/Transactions.go index 5a3933b..eddaec4 100644 --- a/handlers/Transactions.go +++ b/handlers/Transactions.go @@ -247,7 +247,7 @@ func GetTransactions(ws *websocket.Conn, data json.RawMessage, userID string) { } response := map[string]interface{}{ - "Success": transactionData, + "transactions": transactionData, } responseData, _ := json.Marshal(response)