Fix some legacy issues in the resourceStore

src/app/Components/BankAccountsView.tsx

@@ -9,8 +9,8 @@ const BankAccountsView = (props: {
 }) => {
   return (
     <div className="p-4">
-      <div className="grid grid-cols-5 gap-8">
+      <div className="flex gap-8">
-        <div className="bg-green-800 rounded-lg p-3">
+        <div className="flex-1 bg-green-800 rounded-lg p-3">
           <div className="text-white">
             <span className="text-green-400">Moonbucks</span>
             <h3 className="text-2xl font-bold">$5,342.23</h3>

src/app/Components/ResourceAccount.tsx

@@ -0,0 +1,32 @@
+"use client";
+import React from "react";
+import { IResourceAccount } from "typings";
+import { resourceToBg, resourceToFc } from "../../utils/helpers";
+
+const ResourceAccount = (props: { account: IResourceAccount }) => {
+  return (
+    <div
+      className={
+        resourceToBg(props.account.resourceType) +
+        " bg-gradient-to-br hover:bg-gradient-to-tr rounded-lg p-3 flex-1"
+      }
+    >
+      <div className="text-white">
+        <span
+          className={resourceToFc(props.account.resourceType) + " font-bold"}
+        >
+          {props.account.resourceType}
+        </span>
+        <h3 className="text-2xl font-bold">
+          {props.account.balance.toLocaleString("en-US", {
+            minimumFractionDigits: 2,
+            maximumFractionDigits: 2,
+          })}{" "}
+          kg
+        </h3>
+      </div>
+    </div>
+  );
+};
+
+export default ResourceAccount;

src/app/Components/ResourceStore.tsx

@@ -1,61 +1,57 @@
 import React, { useState, useEffect } from "react";
-import ResourceItem from "./ResourceItem";
 import ResourceStoreItem from "./ResourceStoreItem";
 import { sumValues } from "../../utils/helpers";
-import {
+import { IBankAccount, IConversionPair } from "typings";
-  IBankAccount,
-  IConversionPair,
-  IClaimableResource,
-  IResourceType,
-} from "typings";
 
 const ResourceStore = (props: {
-  bankAccounts: IBankAccount[];
+  bankAccount: IBankAccount | undefined;
   setLightBoxIsActive: () => void;
 }) => {
   const [conversionRate, setConversionRate] = useState<Number>(0.1);
-  const [amount, setAmount] = useState<IClaimableResource[]>([]);
   const [conversionPairs, setConversionPairs] = useState<
     IConversionPair[] | null
   >(null);
 
   useEffect(() => {
-    const pairs = amount.map((n) => ({
+    if (props.bankAccount) {
-      resourceType: n.resourceType,
+      const pairs = props.bankAccount.resourceAccounts.map((resource) => ({
-      resourceAmount: n.balance,
+        resourceType: resource.resourceType,
-      moneyAmount: n.balance * conversionRate.valueOf(),
+        resourceAmount: 0,
-    }));
+        moneyAmount: 0,
-    setConversionPairs(pairs);
+      }));
-  }, [amount]);
+      setConversionPairs(pairs);
+    }
+  }, []);
 
   const handleAmountChange = (
     e: React.ChangeEvent<HTMLInputElement>,
-    resourceType: IResourceType
+    resourceType: string
   ) => {
-    const existingObj = amount.find(
+    if (!conversionPairs) return;
-      (obj) => obj.resourceType.name === resourceType.name
+
+    const existingObj = conversionPairs.find(
+      (obj) => obj.resourceType === resourceType
     );
 
-    if (existingObj) {
+    const updatedPairs = conversionPairs.map((pair) => {
-      setAmount(
+      if (pair.resourceType === existingObj?.resourceType) {
-        amount.map((obj) =>
+        return {
-          obj.resourceType.name === resourceType.name
+          ...pair,
-            ? { resourceType: resourceType, balance: Number(e.target.value) }
+          resourceAmount: Number(e.target.value),
-            : obj
+          moneyAmount: Number(e.target.value) * conversionRate.valueOf(),
-        )
+        };
-      );
+      } else {
-    } else {
+        return pair;
-      setAmount([
+      }
-        ...amount,
+    });
-        { resourceType: resourceType, balance: Number(e.target.value) },
+    setConversionPairs(updatedPairs);
-      ]);
-    }
   };
 
-  const getConversionPair = (name: string) => {
+  const getConversionPair = (resourceType: string) => {
-    return conversionPairs?.find((obj) => obj.resourceType.name === name);
+    return conversionPairs?.find((obj) => obj.resourceType === resourceType);
   };
 
+  console.log(conversionPairs);
   return (
     <div className="p-4 max-w-5xl">
       <h1 className="text-white text-4xl font-extrabold">
@@ -63,19 +59,20 @@ const ResourceStore = (props: {
       </h1>
       <div className="flex gap-4 mt-4">
         <div className="flex-1">
-          {props.bankAccounts.map((bankAccount) => (
+          {props.bankAccount &&
-            <div className="flex mb-4 gap-4">
+            props.bankAccount.resourceAccounts.map((resourceAccount) => (
-              <div className="flex-1">
+              <div className="flex mb-4 gap-4">
-                <ResourceStoreItem
+                <div className="flex-1">
-                  bankAccount={bankAccount}
+                  <ResourceStoreItem
-                  conversionPair={getConversionPair(
+                    resourceAccount={resourceAccount}
-                    bankAccount.resourceType.name
+                    conversionPair={getConversionPair(
-                  )}
+                      resourceAccount.resourceType
-                  handleAmountChange={handleAmountChange}
+                    )}
-                />
+                    handleAmountChange={handleAmountChange}
+                  />
+                </div>
               </div>
-            </div>
+            ))}
-          ))}
 
           {conversionPairs && (
             <div className="">
@@ -92,13 +89,6 @@ const ResourceStore = (props: {
                   }
                 )}
               </p>
-              {/* <ResourceItem
-                name="MoonBucks"
-                bgColor="bg-green-800"
-                fontColor="text-green-400"
-                amount={sumValues(conversionPairs, "moneyAmount")}
-                unit="$"
-              /> */}
               <button className="bg-slate-100 py-2 text-slate-900 rounded-lg font-bold w-28 text-center">
                 Sell Now
               </button>

src/app/Components/ResourceStoreItem.tsx

@@ -1,33 +1,33 @@
 "use client";
 import React, { useEffect, useState } from "react";
-import { IBankAccount, IConversionPair } from "typings";
+import { IResourceAccount, IConversionPair } from "typings";
-import { IResourceType } from "typings";
+import { resourceToBg, resourceToFc } from "../../utils/helpers";
 
 const ResourceStoreItem = (props: {
-  bankAccount: IBankAccount;
+  resourceAccount: IResourceAccount;
   conversionPair: IConversionPair | undefined;
   handleAmountChange: (
     e: React.ChangeEvent<HTMLInputElement>,
-    resourceType: IResourceType
+    resourceType: string
   ) => void;
 }) => {
   return (
     <div
       className={
-        props.bankAccount.resourceType.bgColorClass +
+        resourceToBg(props.resourceAccount.resourceType) +
         " bg-gradient-to-br hover:bg-gradient-to-tr rounded-lg p-3 flex flex-row"
       }
     >
       <div className="text-white mr-4 flex-none">
         <span
           className={
-            props.bankAccount.resourceType.fontColorClass + " font-bold"
+            resourceToFc(props.resourceAccount.resourceType) + " font-bold"
           }
         >
-          {props.bankAccount.resourceType.name}
+          {props.resourceAccount.resourceType}
         </span>
         <h3 className="text-2xl font-bold">
-          {props.bankAccount.balance.toLocaleString("en-US", {
+          {props.resourceAccount.balance.toLocaleString("en-US", {
             minimumFractionDigits: 2,
             maximumFractionDigits: 2,
           })}{" "}
@@ -40,11 +40,11 @@ const ResourceStoreItem = (props: {
             <span>
               <span
                 className={
-                  props.conversionPair.resourceType.fontColorClass +
+                  resourceToFc(props.resourceAccount.resourceType) +
                   " font-bold"
                 }
               >
-                {props.conversionPair.resourceType.name}
+                {props.conversionPair.resourceType}
               </span>
               <h3 className="text-2xl font-bold">
                 {props.conversionPair.resourceAmount.toLocaleString("en-US", {
@@ -72,7 +72,7 @@ const ResourceStoreItem = (props: {
             <span>
               <span
                 className={
-                  props.conversionPair.resourceType.fontColorClass +
+                  resourceToFc(props.resourceAccount.resourceType) +
                   " font-bold"
                 }
               >
@@ -96,7 +96,7 @@ const ResourceStoreItem = (props: {
         className="bg-white px-4 py-2 mr-4 rounded-lg flex-none"
         placeholder="0"
         onChange={(e) =>
-          props.handleAmountChange(e, props.bankAccount.resourceType)
+          props.handleAmountChange(e, props.resourceAccount.resourceType)
         }
       />
     </div>

src/app/page.tsx

@@ -198,6 +198,12 @@ export default function Home() {
     setLightBoxIsActive(!lightBoxIsActive);
   };
 
+  const handleCloseError = () => {
+    setError(null);
+  };
+
+  if (!userId) return <p>Please login</p>;
+
   return (
     <>
       <BankAccountsView
@@ -206,7 +212,7 @@ export default function Home() {
       />
       {lightBoxIsActive && (
         <ResourceStore
-          bankAccounts={bankAccounts}
+          bankAccount={bankAccount}
           setLightBoxIsActive={handleSetLightBox}
         />
       )}

typings.d.ts

@@ -3,11 +3,10 @@ export type User = {
   inventoryItems: IInventoryItem[];
 };
 
-export interface IResourceType {
+export interface TimeDuration {
-  id: number;
+  hours: number;
-  name: string;
+  minutes: number;
-  fontColorClass: string;
+  seconds: number;
-  bgColorClass: string;
 }
 
 export interface IResourceWell {
@@ -54,7 +53,7 @@ export interface IClaimableResource {
 }
 
 export interface IConversionPair {
-  resourceType: IResourceType;
+  resourceType: string;
   resourceAmount: number;
   moneyAmount: number
 }