Trang transaction

client/src/App.jsx

@@ -1,30 +1,35 @@
 import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
+import { navigation } from './router/navigation';
 import AppState from './context/app/state';
 import ThemeProvider from './context/theme-context/theme-context';
-import { navigation } from './router/navigation';
+import LayoutWrapper from '@/components/layout/wrapper/LayoutWrapper';
+import AuthRoute from '@/router/AuthRoute';
 import './App.css';
-import baseUrl from './api/baseUrl';
 function App() {
-  console.log(import.meta.env.VITE_BASE_URL)
-  const demo = async () => {
-    const response = await fetch(baseUrl + '/transaction');
-    const data = await response.json();
-    console.log(data);
-  }
-  demo(); 
   return (
     <ThemeProvider>
       <AppState>
         <Router>
           <Routes>
-            {navigation.map((item, index) => {
-              return (
-                <Route
-                  key={index}
-                  path={item.path}
-                  element={<>{item.component}</>}
-                />
+            {navigation.map((route, index) => {
+              const {
+                path,
+                component: Component,
+                isPrivate,
+                noLayoutWrap,
+              } = route;
+
+              const element = isPrivate ? (
+                <AuthRoute component={Component} noLayoutWrap={noLayoutWrap} />
+              ) : noLayoutWrap ? (
+                <Component />
+              ) : (
+                <LayoutWrapper>
+                  <Component />
+                </LayoutWrapper>
               );
+
+              return <Route key={index} path={path} element={element} />;
             })}
           </Routes>
         </Router>

client/src/components/general/TransactionAdd.jsx

@@ -21,6 +21,7 @@ import { formatTransactionList } from "../../utils/helper";
 import AppContext from "@/context/app/context";
 import { uploadImageToFirebase } from "../../utils/uploadImage";
 import { formatDateToDateObject } from "../../utils/formatDate";
+import { useAuthContext } from "../../hooks/useAuthContext";
 
 
 const transactionSchema = z.object({
@@ -33,8 +34,9 @@ const transactionSchema = z.object({
 });
 
 const TransactionAdd = ({ open, handleClose }) => {
-  const appContext = useContext(AppContext);
-  const [wallets, setWallets] = React.useState([]);
+  const { getWallets, addTransaction, wallets } = useContext(AppContext);
+  const { user } = useAuthContext();
+  const [walletData, setWallets] = React.useState([]);
   const [transaction, setTransaction] = React.useState([]);
   const [imageFile, setImageFile] = React.useState(null);
   const [selectedDate, setSelectedDate] = React.useState(null);
@@ -50,13 +52,18 @@ const TransactionAdd = ({ open, handleClose }) => {
     resolver: zodResolver(transactionSchema),
   });
 
-  //fetch wallets
+  //fetch walletData
   useEffect(() => {
     const fetchWallets = async () => {
-      const response = await getWallets();
-      setWallets(response);
+      await getWallets();
+      console.log("walletData", walletData);
+      console.log("wallets", wallets);
+      setWallets(wallets);
     };
-    fetchWallets();
+
+    if (user) {
+      fetchWallets();
+    }
   }, []);
 
   const onSubmit = async (data) => {
@@ -79,7 +86,7 @@ const TransactionAdd = ({ open, handleClose }) => {
     handleClose();
     try {
       if (createdAt != null) {
-        await appContext.addTransaction({
+        await addTransaction({
           amount: parseFloat(amount),
           type,
           walletId,
@@ -89,7 +96,7 @@ const TransactionAdd = ({ open, handleClose }) => {
         });
       }
       else {
-        await appContext.addTransaction({
+        await addTransaction({
         amount: parseFloat(amount),
         type,
         walletId,
@@ -162,7 +169,7 @@ const TransactionAdd = ({ open, handleClose }) => {
             >
               <InputLabel id="">Select Wallet</InputLabel>
               <Select {...register("walletId")} label="Select Wallet">
-                {Object.values(wallets).map((wallet) => (
+                {Object.values(walletData).map((wallet) => (
                   <MenuItem key={wallet.id} value={wallet.id}>
                     {wallet.name}
                   </MenuItem>

client/src/components/layout/AddWallet/AddWallet.jsx

@@ -19,10 +19,7 @@ import Typography from '@mui/material/Typography';
 
 //context
 import AppContext from '@/context/app/context';
-
-// api
-import { postWallets } from '@/utils/http-request';
-// import getWallets from '../../../utils/http-request';
+import { useAuthContext } from '../../../hooks/useAuthContext';
 
 const walletSchema = z.object({
   name: z.string(),
@@ -31,7 +28,9 @@ const walletSchema = z.object({
 
 const AddWallet = ({ open, handleClose }) => {
   const [wallets, setWallets] = useState([]);
-  // const appContext = useContext(AppContext);
+  const appContext = useContext(AppContext);
+  const { user } = useAuthContext();
+  const { addWallet } = appContext;
   const {
     register,
     handleSubmit,
@@ -40,21 +39,35 @@ const AddWallet = ({ open, handleClose }) => {
     resolver: zodResolver(walletSchema),
   });
 
-
+  // const onSubmit = async (data) => {
+  //   const { name, description } = data;
+  //   console.log('user in addwallte', user);
+  //   handleClose();
+
+  //   try {
+  //     const response = await addWallet(data);
 
-  // useEffect(() => {
-  //   setWallets(appContext.wallets);
-  // }, [appContext.wallets]);
+  //     setWallets([...wallets, response]);
+  //     prisma.wallets.push(response);
+  //     console.log(response);
+  //   } catch (error) {
+  //     console.error(error);
+  //   }
+  // };
 
   const onSubmit = async (data) => {
     const { name, description } = data;
     handleClose();
 
     try {
-      const response = await postWallets({
+      const userId = user ? user.id : '';
+      const response = await addWallet({
         name,
         description,
+        userId: userId,
       });
+
+      setWallets([...wallets, response]);
       console.log(response);
     } catch (error) {
       console.log(error);

client/src/components/layout/Navbar/Navbar.jsx

@@ -13,6 +13,7 @@ import 'reactjs-popup/dist/index.css';
 import { IconButton, Tooltip, Typography } from '@mui/material';
 import { IoIosNotifications } from 'react-icons/io';
 import { CgProfile } from 'react-icons/cg';
+import { Navigate } from 'react-router-dom';
 
 // logo
 
@@ -122,7 +123,7 @@ const Navbar = () => {
           />
         </Box>
 
-        <NavButton title='Profile' icon={<CgProfile size='1.2rem' />} />
+        <NavButton title='Profile' icon={<CgProfile size='1.2rem' />} onClick={() => navigate('/profile')} />
       </Stack>
     </Stack>
   );

client/src/components/layout/Sidebar/SidebarDesktop.jsx

@@ -1,43 +1,37 @@
-import React, { useEffect, useState } from 'react';
+import React from 'react';
 import Stack from '@mui/material/Stack';
-import { links } from '../../../constants/links';
 import Typography from '@mui/material/Typography';
+import { links } from '../../../constants/links';
 import { Divider, IconButton } from '@mui/material';
-import { AiOutlineCaretRight, AiOutlineMenu } from 'react-icons/ai';
+import { AiOutlineMenu } from 'react-icons/ai';
+import { CgLogOut } from 'react-icons/cg';
+
+//react hooks
+import { useLogout } from '../../../hooks/useLogout';
 
 const buckets = [
   {
-    name: 'About us',
+    name: 'Log Out',
     color: '#FDD652',
   },
 ];
 
-const Circle = ({ backgroundColor }) => {
-
-  return (
-    <span
-      style={{
-        display: 'inline-block',
-        width: '10px',
-        height: '10px',
-        borderRadius: '50%',
-        backgroundColor: backgroundColor,
-      }}
-    />
-  );
-};
-
 const Sidebar = ({
   activePage,
   handleActivePage,
   isMinimized,
   setIsMinimized,
 }) => {
+  const { logout } = useLogout();
 
   const toggleIsMinimized = () => {
     setIsMinimized(!isMinimized);
   };
 
+  const handleLogout = () => {
+    logout();
+  };
+
   return (
     <Stack
       direction='column'
@@ -131,6 +125,7 @@ const Sidebar = ({
             flexDirection='row'
             alignItems='center'
             rowGap={1}
+            onClick={handleLogout}
           >
             <button
               style={{
@@ -140,19 +135,15 @@ const Sidebar = ({
                 justifyContent: '',
                 border: 'none',
               }}
+              onClick={handleLogout}
             >
-              <Circle backgroundColor={bucket.color} />
+              <CgLogOut size='1rem' style={{ color: '#948B93' }} onClick={handleLogout}/>
               {!isMinimized && (
-                <Typography sx={{ ml: 1 }} color='subtitle.main' variant='h7'>
+                <Typography sx={{ ml: 1 }} color='subtitle.main' variant='h7' onClick={handleLogout} >
                   {bucket.name}
                 </Typography>
               )}
             </button>
-            {!isMinimized && (
-              <IconButton>
-                <AiOutlineCaretRight size='1rem' style={{ color: '#948B93' }} />
-              </IconButton>
-            )}
           </Stack>
         ))}
       </Stack>