Merge pull request #20 from tirzah-dev/assets

finished update assets component

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 }}>

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;

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));
 
 

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>

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>
   );
 };
-
-
-

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;

apps/frontend/src/app/views/assets/uuid.d.ts

@@ -0,0 +1 @@
+declare module 'uuid';