From 3f67306eadcb484174c68371e05219384403cae6 Mon Sep 17 00:00:00 2001
From: Ashley McKellar <ashley.l.mckellar@gmail.com>
Date: Mon, 4 Mar 2024 22:08:34 -0800
Subject: [PATCH] finished update assets component

---
 .../src/app/views/assets/AssetContext.tsx     |  2 +-
 .../src/app/views/assets/AssetList.tsx        | 18 +++++
 .../frontend/src/app/views/assets/Assets.json |  8 ---
 apps/frontend/src/app/views/assets/Assets.tsx |  2 +-
 .../src/app/views/assets/AssetsInput.tsx      | 70 +++++++++++++++----
 .../views/assets/{Toast.tsx => Toaster.tsx}   |  0
 .../src/app/views/assets/UpdateAssets.tsx     | 36 +++++-----
 apps/frontend/src/app/views/assets/assets.css |  2 +-
 apps/frontend/src/app/views/assets/uuid.d.ts  |  1 +
 9 files changed, 99 insertions(+), 40 deletions(-)
 create mode 100644 apps/frontend/src/app/views/assets/AssetList.tsx
 delete mode 100644 apps/frontend/src/app/views/assets/Assets.json
 rename apps/frontend/src/app/views/assets/{Toast.tsx => Toaster.tsx} (100%)
 create mode 100644 apps/frontend/src/app/views/assets/uuid.d.ts

diff --git a/apps/frontend/src/app/views/assets/AssetContext.tsx b/apps/frontend/src/app/views/assets/AssetContext.tsx
index d45a439..3b0dce5 100644
--- a/apps/frontend/src/app/views/assets/AssetContext.tsx
+++ b/apps/frontend/src/app/views/assets/AssetContext.tsx
@@ -35,7 +35,7 @@ export const AssetProvider: React.FC < { children: React.ReactNode }> = ({ child
    getAssets()
 }, [])
 
-//this api endpoint works in Postman but not here
+
 
     return (
         <AssetContext.Provider value={{ assets, setAssets }}>
diff --git a/apps/frontend/src/app/views/assets/AssetList.tsx b/apps/frontend/src/app/views/assets/AssetList.tsx
new file mode 100644
index 0000000..7ed3f55
--- /dev/null
+++ b/apps/frontend/src/app/views/assets/AssetList.tsx
@@ -0,0 +1,18 @@
+// import { useContext } from 'react';
+// import { AssetContext } from './AssetContext';
+// import { AssetContext } from './Index';
+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>
+  );
+};
+
+export default AssetList;
diff --git a/apps/frontend/src/app/views/assets/Assets.json b/apps/frontend/src/app/views/assets/Assets.json
deleted file mode 100644
index 3b701bd..0000000
--- a/apps/frontend/src/app/views/assets/Assets.json
+++ /dev/null
@@ -1,8 +0,0 @@
-[
-  {
-    "asset": "Doge coin",
-    "amount": 300
-  },
-
-  { "asset": "Beanie baby", "amount": 1000000 }
-]
diff --git a/apps/frontend/src/app/views/assets/Assets.tsx b/apps/frontend/src/app/views/assets/Assets.tsx
index b8a1f81..7983d54 100644
--- a/apps/frontend/src/app/views/assets/Assets.tsx
+++ b/apps/frontend/src/app/views/assets/Assets.tsx
@@ -17,7 +17,7 @@ export const Assets = () => {
   };
 
   const [inputs, setInputs] = useState(initInputs);
-  const [isOpen, setIsOpen] = useState(false);
+  // const [isOpen, setIsOpen] = useState(false);
   const [isDisabled, setIsDisabled] = useState(!(initInputs.select_month && initInputs.select_year));
 
 
diff --git a/apps/frontend/src/app/views/assets/AssetsInput.tsx b/apps/frontend/src/app/views/assets/AssetsInput.tsx
index 8ba335d..190bf49 100644
--- a/apps/frontend/src/app/views/assets/AssetsInput.tsx
+++ b/apps/frontend/src/app/views/assets/AssetsInput.tsx
@@ -1,4 +1,4 @@
-import { useState, ChangeEvent } from 'react';
+import { useState, ChangeEvent, useContext } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { AuthLayout } from '../../components/authlayout/AuthLayout';
 import hamburger_menu from '../../images/dash/hamburger_menu.svg';
@@ -13,21 +13,57 @@ 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';
 
-export const AssetsInput = (props: any) => {
-  const navigate = useNavigate();
-  const [isOpen, setIsOpen] = useState<boolean>(false);
+interface Asset {
+  id: string;
+  asset: string;
+  amount: number;
+}
 
-  const [showInputForm, setShowInputForm] = useState<string>('');
+// interface AssetsInputProps {
+//   saveAssets: (assets: Asset[]) => void; // Adjust the type of saveAssets function
+// }
 
+
+export const AssetsInput: React.FC<object> = (props: any) => {
+  const navigate = useNavigate();
+  const {  assets, addNewAsset } = useContext(AssetContext)
+  const assetContext = useContext(AssetContext);
+  // const [isOpen, setIsOpen] = useState<boolean>(false);
+  const [showInputForm, setShowInputForm] = useState<string>('');
   const [showCategoryDropdown, setShowCategoryDropdown] =
-    useState<boolean>(false);
-  const [inputs, setInputs] = useState<{ asset: string; amount: number }>({
-    asset: '',
-    amount: 0,
-  });
+  useState<boolean>(false);
+  const [inputs, setInputs] = useState<Asset>({ id: uuidv4(), asset: '', amount: 0 })
   const [value, setValue] = useState<number>(0);
 
+
+
+  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(assets)
+//     interface AssetsInputProps {
+//   saveAssets: (assets: Asset[]) => void; // Adjust the type of saveAssets function
+// }
+  
   const navigateToNewPage = () => {
     // console.log('new page');
     navigate('/assets/update');
@@ -53,16 +89,25 @@ export const AssetsInput = (props: any) => {
   };
 
   const handleAddAssetClick = (sectionName: string) => {
-    const { asset, amount } = inputs;
+    const { id, asset, amount } = inputs;
     setValue(value + amount);
+    console.log(inputs)
+    console.log(asset)
+    addNewAsset({id, asset, amount})
+    
+    saveAssets([{ id, asset, amount}])
     setInputs({
+      id: uuidv4(),
       asset: '',
       amount: 0,
+      
     });
     assetToast();
-    console.log('modal opened');
+    
   };
 
+
+
   const handleSelectCategory = (e: any) => {
     e.preventDefault();
     //populates drop down menu specific to the sectionName selected
@@ -90,6 +135,7 @@ export const AssetsInput = (props: any) => {
 
   console.log(showCategoryDropdown);
   console.log(inputs);
+  console.log(assets)
   console.log(value);
   return (
     <AuthLayout>
diff --git a/apps/frontend/src/app/views/assets/Toast.tsx b/apps/frontend/src/app/views/assets/Toaster.tsx
similarity index 100%
rename from apps/frontend/src/app/views/assets/Toast.tsx
rename to apps/frontend/src/app/views/assets/Toaster.tsx
diff --git a/apps/frontend/src/app/views/assets/UpdateAssets.tsx b/apps/frontend/src/app/views/assets/UpdateAssets.tsx
index 0197a76..489ea26 100644
--- a/apps/frontend/src/app/views/assets/UpdateAssets.tsx
+++ b/apps/frontend/src/app/views/assets/UpdateAssets.tsx
@@ -1,30 +1,32 @@
-import { useContext } from 'react';
-import { AssetContext } from './AssetContext';
-
+import { useState, useContext } from 'react';
+// import { AssetContext } from './AssetContext';
+import { AssetContext } from '../../app';
 
+import './assets.css';
 
 export const UpdateAssets = (props: any) => {
-  const assetContext = useContext(AssetContext);
-  if (!assetContext) {
-    throw new Error('AssetContext is not provided');
-  }
-  const { assets } = assetContext;
-  console.log(assets)
-  if (!assets) { 
-    return <div>Loading...</div>
-  }
+  const { removeAsset, assets } =
+    useContext(AssetContext);
+ 
+  
+
+  console.log(assets);
 
   return (
     <div>
-      {assets.map(asset => (
-        <div key={asset.asset}>
+        Slide to delete
+      {assets.map((asset) => (
+        <div key={asset.id}>
           <p>Asset: {asset.asset}</p>
           <p>Amount: {asset.amount}</p>
+          <div>
+            <button type="button" className="asset_type_button" onClick={() => removeAsset(asset)}>
+              Delete
+            </button>
+          </div>
+          <br></br>
         </div>
       ))}
     </div>
   );
 };
-
-
-
diff --git a/apps/frontend/src/app/views/assets/assets.css b/apps/frontend/src/app/views/assets/assets.css
index a3cbfb9..7b39099 100644
--- a/apps/frontend/src/app/views/assets/assets.css
+++ b/apps/frontend/src/app/views/assets/assets.css
@@ -261,7 +261,7 @@ modal-btn {
     position: absolute;
     background:  #148CFB;
     width: 364px;
-    height: 160px;
+    height: 340px;
     border-radius: 32px;
     color: white;
     font: 16px Sofia Pro;
diff --git a/apps/frontend/src/app/views/assets/uuid.d.ts b/apps/frontend/src/app/views/assets/uuid.d.ts
new file mode 100644
index 0000000..f9d6a6d
--- /dev/null
+++ b/apps/frontend/src/app/views/assets/uuid.d.ts
@@ -0,0 +1 @@
+declare module 'uuid';