From 7e1927a6574c412f8d3448d70fe2a9504d13f1b9 Mon Sep 17 00:00:00 2001 From: Ashley McKellar Date: Tue, 19 Mar 2024 22:35:17 -0700 Subject: [PATCH] removed update assets component, removed asset from being saved in local storage in anticipation of backend route --- apps/frontend/src/app/app.tsx | 123 +++------------- .../src/app/views/assets/AssetContext.tsx | 136 ++++++++++++------ .../src/app/views/assets/AssetList.tsx | 19 ++- .../src/app/views/assets/AssetsInput.tsx | 40 +++--- .../src/app/views/assets/UpdateAssets.tsx | 55 ++++--- apps/frontend/src/app/views/router/router.tsx | 4 +- 6 files changed, 169 insertions(+), 208 deletions(-) diff --git a/apps/frontend/src/app/app.tsx b/apps/frontend/src/app/app.tsx index f781903..41c79ec 100644 --- a/apps/frontend/src/app/app.tsx +++ b/apps/frontend/src/app/app.tsx @@ -3,7 +3,10 @@ import { BrowserRouter } from 'react-router-dom'; import Footer from './components/footer/footer'; import Header from './components/header/header'; import Router from './views/router/router'; +import { AssetProvider } from './views/assets/AssetContext'; import './app.module.scss'; +// import { UpdateAssets } from './views/assets/UpdateAssets'; +import { AssetsInput } from './views/assets/AssetsInput'; // eslint-disable-next-line @typescript-eslint/no-empty-function, @typescript-eslint/no-explicit-any export const UserContext = React.createContext({ @@ -20,38 +23,10 @@ export const UserContext = React.createContext({ }, 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, @@ -64,69 +39,6 @@ export function App() { 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 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'); @@ -160,21 +72,22 @@ export function App() { }, []); return ( - - - - -
-
-
- -
- {/*
*/} -
- + // + // {/* */} + // {/* */} - - + +
+
+
+ + +
+ +
+ + // {/* */} + // ); } diff --git a/apps/frontend/src/app/views/assets/AssetContext.tsx b/apps/frontend/src/app/views/assets/AssetContext.tsx index 5aaee71..34a8527 100644 --- a/apps/frontend/src/app/views/assets/AssetContext.tsx +++ b/apps/frontend/src/app/views/assets/AssetContext.tsx @@ -1,55 +1,105 @@ -import { createContext, useState, useEffect, useContext } from "react" +import React, { createContext, useState, useEffect, useContext } from "react" import axios from "axios"; -interface Asset { - asset: string, - amount: number -} + +interface Asset { + id: string; + asset: string; + amount: number; + } interface AssetContextType { assets: Asset[]; setAssets: React.Dispatch>; - - -} + addNewAsset: (newAsset: Asset) => void; + saveAssets: (assets: Asset[]) => void; + removeAsset: (asset: Asset) => void; + getAllAssets: () => void; + } export const AssetContext = createContext(undefined) -export const AssetProvider: React.FC < { children: React.ReactNode }> = ({ children }) => { - const [assets, setAssets] = useState([]) - +export const AssetProvider: React.FC<{ children: React.ReactNode }> = ({ + children, + }) => { + 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; + }); + }; - -// 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() -// }, []) - - - - - - return ( - - {children} - - ) -} - -export const useAssetContext = () => { - const context = useContext(AssetContext) - if(!context) { - throw new Error('useAssetContext must be used within an asset provider') + 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); + } + }; + + + + + + + useEffect(() => { + getAllAssets(); + }, []); + + // type AssetContextType = { + // assets, + // setAssets, + // addNewAsset, + // saveAssets, + // removeAsset, + // getAllAssets, + // }; + + + + return ( + // + // {children} + // + +
+

test

+
+ ) } - return context -} \ No newline at end of file + diff --git a/apps/frontend/src/app/views/assets/AssetList.tsx b/apps/frontend/src/app/views/assets/AssetList.tsx index 7ed3f55..c3f9bb9 100644 --- a/apps/frontend/src/app/views/assets/AssetList.tsx +++ b/apps/frontend/src/app/views/assets/AssetList.tsx @@ -1,18 +1,23 @@ // import { useContext } from 'react'; // import { AssetContext } from './AssetContext'; // import { AssetContext } from './Index'; -import { UpdateAssets } from './UpdateAssets'; +// import { UpdateAssets } from './UpdateAssets'; const AssetList = (props: any) => { // const { assets } = useContext(AssetContext); return ( -
    - {props.asset.map((asset: any) => ( - - ))} -
- ); + //
    + // {props.asset.map((asset: any) => ( + // // + // ))} + //
+ // ); + +
+

assets

+
+ ) }; export default AssetList; diff --git a/apps/frontend/src/app/views/assets/AssetsInput.tsx b/apps/frontend/src/app/views/assets/AssetsInput.tsx index 190bf49..4d4bba4 100644 --- a/apps/frontend/src/app/views/assets/AssetsInput.tsx +++ b/apps/frontend/src/app/views/assets/AssetsInput.tsx @@ -10,12 +10,12 @@ import downArrow from '../../images/logos/downArrow.svg'; import circleI from '../../images/logos/circleI.svg'; import './assets.css'; import styles from '../../app.module.scss'; -// import { AssetModal } from './AssetModal'; + import { InfoTooltip } from './InfoTooltip'; import toast, { Toaster } from 'react-hot-toast'; import { v4 as uuidv4 } from 'uuid'; -import { AssetContext } from '../../app'; -// import { AssetContextType } from './AssetContextType'; +import { AssetContext, } from './AssetContext'; + interface Asset { id: string; @@ -23,39 +23,33 @@ interface Asset { amount: number; } -// interface AssetsInputProps { -// saveAssets: (assets: Asset[]) => void; // Adjust the type of saveAssets function -// } - - export const AssetsInput: React.FC = (props: any) => { const navigate = useNavigate(); - const { assets, addNewAsset } = useContext(AssetContext) - const assetContext = useContext(AssetContext); - // const [isOpen, setIsOpen] = useState(false); + // const { addNewAsset} = useContext(AssetContext) as AssetContextType; const [showInputForm, setShowInputForm] = useState(''); const [showCategoryDropdown, setShowCategoryDropdown] = useState(false); const [inputs, setInputs] = useState({ id: uuidv4(), asset: '', amount: 0 }) const [value, setValue] = useState(0); + + + // const assetContext = useContext(AssetContext); + // const [isOpen, setIsOpen] = useState(false); - if (!assetContext) { - // Handle case where context is undefined - return null; - } + // if (!assetContext) { + // // Handle case where context is undefined + // return null; + + // } // const { saveAssets } = assetContext as AssetContextType const saveAssets = (assets: Asset[]) => { - try { - localStorage.setItem('inputs', JSON.stringify(inputs)); - } catch (err) { - console.error("error saving to local storage", err); - } + console.log("asset saved! Or will be once we have the API route set up.") }; @@ -93,7 +87,7 @@ export const AssetsInput: React.FC = (props: any) => { setValue(value + amount); console.log(inputs) console.log(asset) - addNewAsset({id, asset, amount}) + // addNewAsset({id, asset, amount}) saveAssets([{ id, asset, amount}]) setInputs({ @@ -135,7 +129,7 @@ export const AssetsInput: React.FC = (props: any) => { console.log(showCategoryDropdown); console.log(inputs); - console.log(assets) + console.log(value); return ( @@ -323,7 +317,7 @@ Derivatives (futures or options contracts, swaps)" { - const { removeAsset, assets } = - useContext(AssetContext); - - +// export const UpdateAssets = (props: any) => { +// const { assets, removeAsset } = useContext(AssetContext); - console.log(assets); - - return ( -
- Slide to delete - {assets.map((asset) => ( -
-

Asset: {asset.asset}

-

Amount: {asset.amount}

-
- -
-

-
- ))} -
- ); -}; +// return ( +//
+// Slide to delete +// {assets.map((asset) => ( +//
+//

Asset: {asset.asset}

+//

Amount: {asset.amount}

+//
+// +//
+//

+//
+// ))} +//
+// ); +// }; diff --git a/apps/frontend/src/app/views/router/router.tsx b/apps/frontend/src/app/views/router/router.tsx index d7ce35d..1bdfa81 100644 --- a/apps/frontend/src/app/views/router/router.tsx +++ b/apps/frontend/src/app/views/router/router.tsx @@ -13,7 +13,7 @@ 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'; +// import { UpdateAssets } from '../assets/UpdateAssets'; export default function Router() { @@ -33,7 +33,7 @@ export default function Router() { } /> } /> } /> - } /> + {/* } /> */} ); } \ No newline at end of file