From 6e5c59d71bb9c61f50a19d36eb95c660d731b579 Mon Sep 17 00:00:00 2001 From: Ashley McKellar Date: Wed, 13 Mar 2024 11:12:48 -0700 Subject: [PATCH 1/4] updated assets context --- apps/frontend/src/app/app.tsx | 174 +++++++++++++++--- apps/frontend/src/app/views/router/router.tsx | 3 + package-lock.json | 71 ++++--- package.json | 4 +- 4 files changed, 198 insertions(+), 54 deletions(-) diff --git a/apps/frontend/src/app/app.tsx b/apps/frontend/src/app/app.tsx index 7540873..1c387d9 100644 --- a/apps/frontend/src/app/app.tsx +++ b/apps/frontend/src/app/app.tsx @@ -1,4 +1,4 @@ -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'; @@ -6,51 +6,177 @@ 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>; + addNewAsset: (newAsset: Asset) => void; + saveAssets: (assets: Asset[]) => void; + removeAsset: (asset: Asset) => void; + getAllAssets: () => void; +} +export const AssetContext = React.createContext({ + 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({ + firstName: null, + lastName: null, + id: null, + joinDate: null, + email: null, + userType: 'Reader', + picture: null, + name: null, + roles: ['None'], + }); + const [assets, setAssets] = useState([]); + + 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({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 ( - - - -
-
-
- + + + + +
+
+
+ +
+ {/*
*/}
- {/*
*/} -
- - + + + ); } -export default App; \ No newline at end of file +export default App; diff --git a/apps/frontend/src/app/views/router/router.tsx b/apps/frontend/src/app/views/router/router.tsx index 7d87066..d7ce35d 100644 --- a/apps/frontend/src/app/views/router/router.tsx +++ b/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() { } /> } /> } /> + } /> ); } \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index 97794a8..959bc18 100644 --- a/package-lock.json +++ b/package-lock.json @@ -40,7 +40,8 @@ "react-tooltip": "^5.26.3", "reflect-metadata": "^0.1.13", "rxjs": "^7.8.0", - "tslib": "^2.3.0" + "tslib": "^2.3.0", + "uuid": "^9.0.1" }, "devDependencies": { "@babel/preset-react": "^7.14.5", @@ -65,6 +66,7 @@ "@types/react": "18.0.28", "@types/react-dom": "18.0.11", "@types/react-modal": "^3.16.3", + "@types/uuid": "^9.0.8", "@typescript-eslint/eslint-plugin": "^5.58.0", "@typescript-eslint/parser": "^5.58.0", "autoprefixer": "^10.4.14", @@ -2033,6 +2035,15 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/@cypress/request/node_modules/uuid": { + "version": "8.3.2", + "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz", + "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==", + "dev": true, + "bin": { + "uuid": "dist/bin/uuid" + } + }, "node_modules/@cypress/webpack-dev-server": { "version": "3.6.1", "resolved": "https://registry.npmjs.org/@cypress/webpack-dev-server/-/webpack-dev-server-3.6.1.tgz", @@ -2970,6 +2981,15 @@ "node": ">=12" } }, + "node_modules/@google-cloud/storage/node_modules/uuid": { + "version": "8.3.2", + "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz", + "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==", + "optional": true, + "bin": { + "uuid": "dist/bin/uuid" + } + }, "node_modules/@grpc/grpc-js": { "version": "1.7.3", "resolved": "https://registry.npmjs.org/@grpc/grpc-js/-/grpc-js-1.7.3.tgz", @@ -7558,6 +7578,12 @@ "node": ">=0.10.0" } }, + "node_modules/@types/uuid": { + "version": "9.0.8", + "resolved": "https://registry.npmjs.org/@types/uuid/-/uuid-9.0.8.tgz", + "integrity": "sha512-jg+97EGIcY9AGHJJRaaPVgetKDsrTgbRjQ5Msgjh/DQKEFl0DtyRr/VCOyD1T2R1MNeWPK/u7JoGhlDZnKBAfA==", + "dev": true + }, "node_modules/@types/webpack": { "version": "4.41.35", "resolved": "https://registry.npmjs.org/@types/webpack/-/webpack-4.41.35.tgz", @@ -13258,18 +13284,6 @@ "@firebase/util": "1.9.3" } }, - "node_modules/firebase-admin/node_modules/uuid": { - "version": "9.0.1", - "resolved": "https://registry.npmjs.org/uuid/-/uuid-9.0.1.tgz", - "integrity": "sha512-b+1eJOlsR9K8HJpow9Ok3fiWOWSIcIzXodvv0rQjVoOVNpWMpxf1wZNpt4y9h10odCNrqnYp1OBzRktckBe3sA==", - "funding": [ - "https://github.com/sponsors/broofa", - "https://github.com/sponsors/ctavan" - ], - "bin": { - "uuid": "dist/bin/uuid" - } - }, "node_modules/firebase-functions": { "version": "4.4.1", "resolved": "https://registry.npmjs.org/firebase-functions/-/firebase-functions-4.4.1.tgz", @@ -22777,6 +22791,14 @@ "websocket-driver": "^0.7.4" } }, + "node_modules/sockjs/node_modules/uuid": { + "version": "8.3.2", + "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz", + "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==", + "bin": { + "uuid": "dist/bin/uuid" + } + }, "node_modules/sort-keys": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/sort-keys/-/sort-keys-1.1.2.tgz", @@ -23673,19 +23695,6 @@ "node": ">=12" } }, - "node_modules/teeny-request/node_modules/uuid": { - "version": "9.0.1", - "resolved": "https://registry.npmjs.org/uuid/-/uuid-9.0.1.tgz", - "integrity": "sha512-b+1eJOlsR9K8HJpow9Ok3fiWOWSIcIzXodvv0rQjVoOVNpWMpxf1wZNpt4y9h10odCNrqnYp1OBzRktckBe3sA==", - "funding": [ - "https://github.com/sponsors/broofa", - "https://github.com/sponsors/ctavan" - ], - "optional": true, - "bin": { - "uuid": "dist/bin/uuid" - } - }, "node_modules/terser": { "version": "4.8.1", "resolved": "https://registry.npmjs.org/terser/-/terser-4.8.1.tgz", @@ -24789,9 +24798,13 @@ } }, "node_modules/uuid": { - "version": "8.3.2", - "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz", - "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==", + "version": "9.0.1", + "resolved": "https://registry.npmjs.org/uuid/-/uuid-9.0.1.tgz", + "integrity": "sha512-b+1eJOlsR9K8HJpow9Ok3fiWOWSIcIzXodvv0rQjVoOVNpWMpxf1wZNpt4y9h10odCNrqnYp1OBzRktckBe3sA==", + "funding": [ + "https://github.com/sponsors/broofa", + "https://github.com/sponsors/ctavan" + ], "bin": { "uuid": "dist/bin/uuid" } diff --git a/package.json b/package.json index 9845f7c..60fabf9 100644 --- a/package.json +++ b/package.json @@ -48,7 +48,8 @@ "react-tooltip": "^5.26.3", "reflect-metadata": "^0.1.13", "rxjs": "^7.8.0", - "tslib": "^2.3.0" + "tslib": "^2.3.0", + "uuid": "^9.0.1" }, "devDependencies": { "@babel/preset-react": "^7.14.5", @@ -73,6 +74,7 @@ "@types/react": "18.0.28", "@types/react-dom": "18.0.11", "@types/react-modal": "^3.16.3", + "@types/uuid": "^9.0.8", "@typescript-eslint/eslint-plugin": "^5.58.0", "@typescript-eslint/parser": "^5.58.0", "autoprefixer": "^10.4.14", From 48a4524214cac71fba179fd28f93d6ed1bce1ad7 Mon Sep 17 00:00:00 2001 From: Ashley McKellar Date: Wed, 13 Mar 2024 20:08:18 -0700 Subject: [PATCH 2/4] removed function from asset context --- .../src/app/views/assets/AssetContext.tsx | 26 ++++++++++--------- 1 file changed, 14 insertions(+), 12 deletions(-) diff --git a/apps/frontend/src/app/views/assets/AssetContext.tsx b/apps/frontend/src/app/views/assets/AssetContext.tsx index 3b0dce5..5aaee71 100644 --- a/apps/frontend/src/app/views/assets/AssetContext.tsx +++ b/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() +// }, []) + + From 80e7b0a599078f522908b2dd393f1149c5388252 Mon Sep 17 00:00:00 2001 From: Ashley McKellar Date: Wed, 13 Mar 2024 21:04:28 -0700 Subject: [PATCH 3/4] removed ui context provider --- apps/frontend/src/app/app.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/apps/frontend/src/app/app.tsx b/apps/frontend/src/app/app.tsx index 1c387d9..cef3d8e 100644 --- a/apps/frontend/src/app/app.tsx +++ b/apps/frontend/src/app/app.tsx @@ -1,6 +1,6 @@ import React, { useEffect, useState } from 'react'; import { BrowserRouter } from 'react-router-dom'; -import { UIProvider } from './UIContext'; +// import { UIProvider } from './UIContext'; import Footer from './components/footer/footer'; import Header from './components/header/header'; import Router from './views/router/router'; @@ -163,7 +163,7 @@ export function App() { return ( - +
@@ -173,7 +173,7 @@ export function App() { {/*
*/}
- + ); From 1a3caf80a62331a2aa3169423b9ce2424b3a10ab Mon Sep 17 00:00:00 2001 From: Ashley McKellar Date: Wed, 13 Mar 2024 21:38:53 -0700 Subject: [PATCH 4/4] removed ui context --- apps/frontend/src/app/UIContext.tsx | 25 ------------------- apps/frontend/src/app/app.tsx | 1 - .../components/hamburger-nav/HamburgerNav.tsx | 2 +- 3 files changed, 1 insertion(+), 27 deletions(-) delete mode 100644 apps/frontend/src/app/UIContext.tsx diff --git a/apps/frontend/src/app/UIContext.tsx b/apps/frontend/src/app/UIContext.tsx deleted file mode 100644 index 329182f..0000000 --- a/apps/frontend/src/app/UIContext.tsx +++ /dev/null @@ -1,25 +0,0 @@ -import React, { createContext, useState, ReactNode } from 'react'; - -interface UIContextType { - displaySideBar: boolean; - toggleSideBar: () => void; -} - -export const UIContext = createContext({ - displaySideBar: false, - toggleSideBar: () => {} -}); - - - -export const UIProvider = ({ children }: { children: ReactNode }) => { - const [displaySideBar, setDisplaySideBar] = useState(false); - - const toggleSideBar = () => setDisplaySideBar(prev => !prev); - - return ( - - {children} - - ); -}; diff --git a/apps/frontend/src/app/app.tsx b/apps/frontend/src/app/app.tsx index cef3d8e..f781903 100644 --- a/apps/frontend/src/app/app.tsx +++ b/apps/frontend/src/app/app.tsx @@ -1,6 +1,5 @@ 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'; diff --git a/apps/frontend/src/app/components/hamburger-nav/HamburgerNav.tsx b/apps/frontend/src/app/components/hamburger-nav/HamburgerNav.tsx index 0225c6e..63a9205 100644 --- a/apps/frontend/src/app/components/hamburger-nav/HamburgerNav.tsx +++ b/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 {