forked from GreenPioneer/nx_firebase_template
-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #25 from VSchool/assets
removed update assets component, removed asset from being saved in lo…
- Loading branch information
Showing
6 changed files
with
169 additions
and
208 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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<React.SetStateAction<Asset[]>>; | ||
|
|
||
|
|
||
| } | ||
| addNewAsset: (newAsset: Asset) => void; | ||
| saveAssets: (assets: Asset[]) => void; | ||
| removeAsset: (asset: Asset) => void; | ||
| getAllAssets: () => void; | ||
| } | ||
|
|
||
| export const AssetContext = createContext<AssetContextType | undefined>(undefined) | ||
|
|
||
|
|
||
| export const AssetProvider: React.FC < { children: React.ReactNode }> = ({ children }) => { | ||
| const [assets, setAssets] = useState<Asset[]>([]) | ||
|
|
||
| export const AssetProvider: React.FC<{ children: React.ReactNode }> = ({ | ||
| children, | ||
| }) => { | ||
| 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; | ||
| }); | ||
| }; | ||
|
|
||
|
|
||
| // 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 ( | ||
| <AssetContext.Provider value={{ assets, setAssets }}> | ||
| {children} | ||
| </AssetContext.Provider> | ||
| ) | ||
| } | ||
|
|
||
| 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 ( | ||
| // <AssetContext.Provider > | ||
| // {children} | ||
| // </AssetContext.Provider> | ||
|
|
||
| <div> | ||
| <h1>test</h1> | ||
| </div> | ||
| ) | ||
| } | ||
| return context | ||
| } | ||
|
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 ( | ||
| <ul> | ||
| {props.asset.map((asset: any) => ( | ||
| <UpdateAssets key={props.asset.id} asset={props.asset.asset} /> | ||
| ))} | ||
| </ul> | ||
| ); | ||
| // <ul> | ||
| // {props.asset.map((asset: any) => ( | ||
| // // <UpdateAssets key={props.asset.id} asset={props.asset.asset} /> | ||
| // ))} | ||
| // </ul> | ||
| // ); | ||
|
|
||
| <div> | ||
| <p>assets</p> | ||
| </div> | ||
| ) | ||
| }; | ||
|
|
||
| export default AssetList; |
Oops, something went wrong.