Merge pull request #21 from VSchool/assets

Assets

apps/frontend/src/app/app.tsx

@@ -1,56 +1,181 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, useState } from 'react';
 import { BrowserRouter } from 'react-router-dom';
-import { UIProvider } from './UIContext';
 import Footer from './components/footer/footer';
 import Header from './components/header/header';
 import Router from './views/router/router';
 import './app.module.scss';
 
-
 // eslint-disable-next-line @typescript-eslint/no-empty-function, @typescript-eslint/no-explicit-any
-export const UserContext = React.createContext({user: {firstName: null, lastName: null, id: null, joinDate: null, email: null, userType: 'Reader', picture: null, name: null, roles: ['None']}, setUser: (user: any) => {}});
+export const UserContext = React.createContext({
+  user: {
+    firstName: null,
+    lastName: null,
+    id: null,
+    joinDate: null,
+    email: null,
+    userType: 'Reader',
+    picture: null,
+    name: null,
+    roles: ['None'],
+  },
+  setUser: (user: any) => {},
+});
+interface Asset {
+  id: string;
+  asset: string;
+  amount: number;
+}
+
+//   interface AssetsInputProps {
+//     saveAssets: (assets: Asset[]) => void; // Adjust the type of saveAssets function
+//   }
+
+interface AssetContextType {
+  assets: Asset[];
+  setAssets: React.Dispatch<React.SetStateAction<Asset[]>>;
+  addNewAsset: (newAsset: Asset) => void;
+  saveAssets: (assets: Asset[]) => void;
+  removeAsset: (asset: Asset) => void;
+  getAllAssets: () => void;
+}
 
+export const AssetContext = React.createContext<AssetContextType>({
+  assets: [],
+  setAssets: () => {},
+  addNewAsset: () => {},
+  removeAsset: () => {},
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
+  saveAssets: () => {},
+  getAllAssets: () => {},
+});
+
+interface AssetProviderProps {
+  children: React.ReactNode; // Define children prop explicitly
+}
 export function App() {
+  const [user, setUser] = React.useState<any>({
+    firstName: null,
+    lastName: null,
+    id: null,
+    joinDate: null,
+    email: null,
+    userType: 'Reader',
+    picture: null,
+    name: null,
+    roles: ['None'],
+  });
+  const [assets, setAssets] = useState<Asset[]>([]);
+
+  const addNewAsset = (newAsset: Asset) => {
+    return setAssets((prev: Asset[]) => {
+      const newAssets: Asset[] = [...prev, newAsset];
+      setAssets(newAssets);
+      saveAssets(newAssets);
+      console.log(newAssets);
+      return newAssets;
+    });
+  };
+
+  console.log(assets);
 
-  const [user, setUser] = React.useState<any>({firstName: null, lastName: null, id: null, joinDate: null, email: null, userType: 'Reader', picture: null, name: null, roles: ['None']});
+  const saveAssets = (assets: Asset[]) => {
+    try {
+      localStorage.setItem('assets', JSON.stringify(assets));
+    } catch (err) {
+      console.error('error saving to local storage', err);
+    }
+  };
+
+  const removeAsset = (asset: Asset) =>
+    setAssets((prev) => {
+      const newAssets = prev.filter((as) => as.id !== asset.id);
+      saveAssets(newAssets);
+      console.log('deleted asset');
+      return newAssets;
+    });
+
+  const getAllAssets = () => {
+    try {
+      const storedAssetsString: string | null = localStorage.getItem('assets');
+
+      if (storedAssetsString !== null) {
+        const storedAssets: Asset[] | Asset = JSON.parse(storedAssetsString);
+
+        if (Array.isArray(storedAssets)) {
+          setAssets(storedAssets);
+        } else {
+          setAssets([storedAssets]);
+          console.log('not saved');
+        }
+      }
+    } catch (err) {
+      console.error(err);
+    }
+  };
+
+  console.log(assets);
+
+  useEffect(() => {
+    getAllAssets();
+  }, []);
 
+  const assetContextValue: AssetContextType = {
+    assets,
+    setAssets,
+    addNewAsset,
+    saveAssets,
+    removeAsset,
+    getAllAssets,
+  };
 
   useEffect(() => {
     const user = localStorage.getItem('user');
-    if(user){
+    if (user) {
       setUser(JSON.parse(user));
     }
-  }, [])
+  }, []);
 
   useEffect(() => {
-    console.log(user)
-  }, [user])
+    console.log(user);
+  }, [user]);
 
   // this is for cypress testing, to have a test user logged in
   useEffect(() => {
     // eslint-disable-next-line @typescript-eslint/ban-ts-comment
     // @ts-ignore
-    if(window.Cypress){
-      const user = {firstName: 'Test', lastName: 'User', id: 'test', joinDate: '05/05/2023', email: 'testUser@test.com', userType: 'Reader', picture: 'www.google.com', name: 'Test User', roles: ['None']}
-      setUser(user)
+    if (window.Cypress) {
+      const user = {
+        firstName: 'Test',
+        lastName: 'User',
+        id: 'test',
+        joinDate: '05/05/2023',
+        email: 'testUser@test.com',
+        userType: 'Reader',
+        picture: 'www.google.com',
+        name: 'Test User',
+        roles: ['None'],
+      };
+      setUser(user);
     }
-  }, [])
+  }, []);
 
   return (
-    <UserContext.Provider value={{user, setUser}}>
-      <UIProvider>
-        <BrowserRouter>
-          <div className="flex flex-col h-screen">
-            <div style={{ flex: '1 1 0' }}>
-              <Header></Header>
-              <Router></Router>
+    <UserContext.Provider value={{ user, setUser }}>
+      <AssetContext.Provider value={assetContextValue}>
+
+          <BrowserRouter>
+            <div className="flex flex-col h-screen">
+              <div style={{ flex: '1 1 0' }}>
+                <Header></Header>
+                <Router></Router>
+              </div>
+              {/* <Footer></Footer> */}
             </div>
-            {/* <Footer></Footer> */}
-          </div>
-        </BrowserRouter>
-      </UIProvider>
+          </BrowserRouter>
+
+      </AssetContext.Provider>
     </UserContext.Provider>
   );
 }
 
-export default App;
+export default App;

apps/frontend/src/app/components/hamburger-nav/HamburgerNav.tsx

@@ -2,7 +2,7 @@ import React, { useContext } from 'react';
 import crystalBall from '../../images/dash/crystal-ball.svg';
 import lineList from '../../images/dash/line-md_list-3-filled.svg';
 import { Link } from 'react-router-dom';
-import { UIContext } from '../../UIContext';
+
 import './hamburger.css';
 
 interface HamburgerNavProps {

apps/frontend/src/app/views/assets/AssetContext.tsx

@@ -21,19 +21,21 @@ export const AssetProvider: React.FC < { children: React.ReactNode }> = ({ child
 
 
 
-    useEffect(() => {
-    async function getAssets(){
-        try {
-            const response =  await axios.get<{results: Asset[] }>("https://mocki.io/v1/31ff50e8-8b81-400a-87d1-d7fc37c9005a")
-            setAssets(response.data.results)
-            console.log(response.data.results)
-        }   catch (error) {
-                console.log(error)
+//     useEffect(() => {
+//     async function getAssets(){
+//         try {
+//             const response =  await axios.get<{results: Asset[] }>("https://mocki.io/v1/31ff50e8-8b81-400a-87d1-d7fc37c9005a")
+//             setAssets(response.data.results)
+//             console.log(response.data.results)
+//         }   catch (error) {
+//                 console.log(error)
 
-        }
-    }
-   getAssets()
-}, [])
+//         }
+//     }
+//    getAssets()
+// }, [])
+
+
 
 
 

apps/frontend/src/app/views/router/router.tsx

@@ -13,6 +13,8 @@ import {SignUp} from "../signup/SignUp"
 import { Dashboard } from '../dashboard/Dashboard';
 import { Assets } from "../assets/Assets"
 import { AssetsInput } from '../assets/AssetsInput';
+import { UpdateAssets } from '../assets/UpdateAssets';
+
 
 export default function Router() {
 
@@ -31,6 +33,7 @@ export default function Router() {
         <Route path="/dashboard" element={<Dashboard />} />
         <Route path="/assets" element={<Assets />} />
         <Route path="/assets/input" element={<AssetsInput />} />
+        <Route path="/assets/update" element={<UpdateAssets />} />
       </Routes>
     );
 }