From 7098346b5184a535e4225f1a137764c3d6300816 Mon Sep 17 00:00:00 2001
From: Emil Nielsen <hej@emilnielsen.com>
Date: Sun, 19 Mar 2023 09:23:59 +0700
Subject: [PATCH] Fix some legacy issues in the resourceStore

---
 database.db                              | Bin 57344 -> 49152 bytes
 src/app/Components/BankAccountsView.tsx  |   4 +-
 src/app/Components/ResourceAccount.tsx   |  32 ++++++++
 src/app/Components/ResourceStore.tsx     |  98 ++++++++++-------------
 src/app/Components/ResourceStoreItem.tsx |  24 +++---
 src/app/page.tsx                         |   8 +-
 typings.d.ts                             |  11 ++-
 7 files changed, 102 insertions(+), 75 deletions(-)
 create mode 100644 src/app/Components/ResourceAccount.tsx

diff --git a/database.db b/database.db
index 412457aa18c4f0ee59acee2e7cab33659e63d938..1b7db45805c2f8e73dbf5a968d07d73d100d377e 100644
GIT binary patch
delta 1453
zcmZuwO>7%Q6rR~1@6LKR6Q^pnRYX0hn;O%kwev>_>VZQM1(QTnJ+xBgZtRJ@%6d21
zpQMQ@HL-%!8&t!MAi@Q43yN<Ps`SR80&?I`2~?_ZKteqf2_YdNF>5EnEg5O0H#^^a
z?|t8Uv$`X$u8JS_rBVO@oqq=l-5ne`nF43az|e1ir1&|&^Z11EnO@WG=^1oKxgbB2
zo`}uV=76X*&L<UfXb7%nSV|axI=kC-lof>u#ixO5)hYYf7-2iY?S!G_8ivL;#8WWI
z9*Do4Zd^i&naRNQtD!aH(6VFM^%7mAZrBlOEKt8u$gNu>do9cQyL#E1sHm;Kr7C7N
z3-3&^4U~q6eT|Atm-?8hH9Npl>?gU0?P{NDjl9yju%2dTlr&V?JIZDUu$MvgT|{NY
z%;n(wGHXixFu{J5YEo!ZpPiM=!9hbKd<CKB(~=$1ddaSkMawVOET6buNZiPANaWfJ
z5oNy{;~nhNiPsYeb1KImK31^ZSfS@Hw@F^uE4&A4+=s@v)Gqi8TS=y&+_H5m`RcKK
zTmP4uJx-otC-s-vhJFLBh;1e3m~8YziDiwyJL_Si_&sgSfQo6FaBZ1=fUk5dS&l=)
z16sD*Mc6+W=??+^3qQqs_z`~COih1<i%D4mpzq3j)we2CmH6i9v=dcTF^(qfIZqYh
z=wjV=6v(3^Z+p~;W#I*Y|HQxI@9;hR1^x)H;e}>@_f>qoOBFMyqvt6_%)%hF=4`jx
z9tfc)A?D!o)(I(@!?+z@<d<n_i8_v)lEfT3xY<5nyXSgOV?i81GnPA7vdU#Iazg|~
z6Gj2`139h@;!%J{c{Q)#+iRDg3I-Y%P<re#b*M|T0lBzLJ7Z!8#3GL6S1GaF3aKv#
zA@yx93P|1a+(8l#eud0>KC#1qRO}$M-EwFza`^l_wS3DhQ!>OkW_-I^3kONn@s_w+
zLYGUFgf%N90j2eTgdU$b%csPPLNe=nb$&?6qQ_^?n<c@#Ri^oyh2fFWvGMc6`QeeF
z{K!z@HIgq(jE+y_hp)xrWV{9NGyF6D9`E2SF7gw69m_IEBRENCA}20JGb9=G@gLrz
z#mhdfi}6-{V<qzKsNN&UAcKU<HLKz+@fYAyuw_6Q9OwT$$BAx&Z{tJ)z7OzYe4o$B
zHl9oi34l~{EPgA)ht-yb{{aez0kjt9)7AuX&L{W?;$3U;394wKI4W#UOWkTK^Dq0E
zi$qWXf_#mMf_!M|6THO;am?7^=k1x;19*?;eS}}?<6=2jIFxLAC(*5a3Gg3W`w#d*
kvzu(<=@$*IJa2HtXc-Lm4X&hG4#N(ID|*Xd*fzNGF9K17wEzGB

delta 1326
zcmZ8fU2NM_6u#Hj_Kh7oCmpn=L|GGcRaaOU3<i(TpKOA4O=-6W;K551ueIjbsS|J2
zUTDa=XWIM36O)jT5CS^#!duG&5}LG1)ubWNcmoCx{7U?YY7*B@ytY`n@^?NTf9E^r
z+?5rwvPIs`^rR6&DSqN7xpwT?;WT=xjC44Lbb%tc4$q~QQoGu2vZkyj&eFX6y!Zim
zN1!*?npkatPL0t~y!tBJAVWCC?vf&#6f=Tvu?Jd~nc|ylUF^;JR^1EyvXwhkoGrY3
zdOCNe@Y>OsWNF%eC=QO=l@VPXc}v&Wcj6JOGe!DQZK+9WjEvybBKtzkV~yQc7xj9>
z^DWbESXI-mur+ytt%*hURpQX$dPv%p1I6~TdAUp>{<T}Kxu{YjpU16CqcrbWd&zq!
zIWb!pJ6Fh^8ylZ0<RYFuP+wq=r!>||^-4A0E?aC#K6%Qk)*P#0d#>5AtCm@{-FnV;
z8#&kGCvcpwy%B{P!^8MmPgF0cE%>F1Wm=alx6ut)T7HymDvWp4$2|3{GM=Eu;2^$s
zhV4ojc9Evo5qTr}`nx=(w%(wT;`M-?rUN*^7U&e)rtK)<r^LHYv=VZZuv&~t#`89>
zSdMcbpln^63b)r;V&O6Wf1`}E!@VWrfDbY%HLhP!>QZN0dG?{6$1=OE|I5G4oNQ7;
zjcgV-O9w2(65@dg$1H2o6VZ@=1AQVFxb{+D@d+LmWn&_Xk?mHj<@%DtS8kSqh8M+V
z{ImH?j3j=?6X88)hhbJ(#?&wj+$^%IaK5YFr|ls42Y!Vg;9J;f_gvV77gdR%%=ylC
zs7O%nj1w$S!ojqC$)f@Xg{tkyn4m{q@hqL|OR$0954aCIu+>g)+<<&aB6+-bkt7hw
zkTPF#FPWus*$dnT+dkg+q#_Ul2X)J@OByCw{LpwubQ8g!@I8DDw_&s0GxHJ5Y24eu
zv^5_%CAVy;++AkcyIi{H`6@S<8M_+zc2G@mkAriIrHXfjTW~FfTkW6o94A;-Bez=!
zzJV>+=57DQoBkMH(#ZgRs4FE&26uJE5O;M6kU_jpS5Qd5($W32CZ^vLYX^=l!TSh)
zfqQTZK7*UhA<}+2UDIAqOESt}j3<5DadL(J6GB?t&rF64+0RUbjIf^>4;j3l8RJao
zqAlJK(%Kyaf5Xpwc=zBA@9=XNrILgcj3t$d5fJ-j5`qLt2;o~0&?gjgqzLHC{{WCi
Bc3l7f

diff --git a/src/app/Components/BankAccountsView.tsx b/src/app/Components/BankAccountsView.tsx
index 642832d..556bcb0 100644
--- a/src/app/Components/BankAccountsView.tsx
+++ b/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="bg-green-800 rounded-lg p-3">
+      <div className="flex gap-8">
+        <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>
diff --git a/src/app/Components/ResourceAccount.tsx b/src/app/Components/ResourceAccount.tsx
new file mode 100644
index 0000000..00d6260
--- /dev/null
+++ b/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;
diff --git a/src/app/Components/ResourceStore.tsx b/src/app/Components/ResourceStore.tsx
index d662c37..31d5ac4 100644
--- a/src/app/Components/ResourceStore.tsx
+++ b/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 {
-  IBankAccount,
-  IConversionPair,
-  IClaimableResource,
-  IResourceType,
-} from "typings";
+import { IBankAccount, IConversionPair } 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) => ({
-      resourceType: n.resourceType,
-      resourceAmount: n.balance,
-      moneyAmount: n.balance * conversionRate.valueOf(),
-    }));
-    setConversionPairs(pairs);
-  }, [amount]);
+    if (props.bankAccount) {
+      const pairs = props.bankAccount.resourceAccounts.map((resource) => ({
+        resourceType: resource.resourceType,
+        resourceAmount: 0,
+        moneyAmount: 0,
+      }));
+      setConversionPairs(pairs);
+    }
+  }, []);
 
   const handleAmountChange = (
     e: React.ChangeEvent<HTMLInputElement>,
-    resourceType: IResourceType
+    resourceType: string
   ) => {
-    const existingObj = amount.find(
-      (obj) => obj.resourceType.name === resourceType.name
+    if (!conversionPairs) return;
+
+    const existingObj = conversionPairs.find(
+      (obj) => obj.resourceType === resourceType
     );
 
-    if (existingObj) {
-      setAmount(
-        amount.map((obj) =>
-          obj.resourceType.name === resourceType.name
-            ? { resourceType: resourceType, balance: Number(e.target.value) }
-            : obj
-        )
-      );
-    } else {
-      setAmount([
-        ...amount,
-        { resourceType: resourceType, balance: Number(e.target.value) },
-      ]);
-    }
+    const updatedPairs = conversionPairs.map((pair) => {
+      if (pair.resourceType === existingObj?.resourceType) {
+        return {
+          ...pair,
+          resourceAmount: Number(e.target.value),
+          moneyAmount: Number(e.target.value) * conversionRate.valueOf(),
+        };
+      } else {
+        return pair;
+      }
+    });
+    setConversionPairs(updatedPairs);
   };
 
-  const getConversionPair = (name: string) => {
-    return conversionPairs?.find((obj) => obj.resourceType.name === name);
+  const getConversionPair = (resourceType: string) => {
+    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) => (
-            <div className="flex mb-4 gap-4">
-              <div className="flex-1">
-                <ResourceStoreItem
-                  bankAccount={bankAccount}
-                  conversionPair={getConversionPair(
-                    bankAccount.resourceType.name
-                  )}
-                  handleAmountChange={handleAmountChange}
-                />
+          {props.bankAccount &&
+            props.bankAccount.resourceAccounts.map((resourceAccount) => (
+              <div className="flex mb-4 gap-4">
+                <div className="flex-1">
+                  <ResourceStoreItem
+                    resourceAccount={resourceAccount}
+                    conversionPair={getConversionPair(
+                      resourceAccount.resourceType
+                    )}
+                    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>
diff --git a/src/app/Components/ResourceStoreItem.tsx b/src/app/Components/ResourceStoreItem.tsx
index 946ac05..dbdebe5 100644
--- a/src/app/Components/ResourceStoreItem.tsx
+++ b/src/app/Components/ResourceStoreItem.tsx
@@ -1,33 +1,33 @@
 "use client";
 import React, { useEffect, useState } from "react";
-import { IBankAccount, IConversionPair } from "typings";
-import { IResourceType } from "typings";
+import { IResourceAccount, IConversionPair } 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>
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 2a5c0be..07060b0 100644
--- a/src/app/page.tsx
+++ b/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}
         />
       )}
diff --git a/typings.d.ts b/typings.d.ts
index 672ba0e..19f13fd 100644
--- a/typings.d.ts
+++ b/typings.d.ts
@@ -3,11 +3,10 @@ export type User = {
   inventoryItems: IInventoryItem[];
 };
 
-export interface IResourceType {
-  id: number;
-  name: string;
-  fontColorClass: string;
-  bgColorClass: string;
+export interface TimeDuration {
+  hours: number;
+  minutes: number;
+  seconds: number;
 }
 
 export interface IResourceWell {
@@ -54,7 +53,7 @@ export interface IClaimableResource {
 }
 
 export interface IConversionPair {
-  resourceType: IResourceType;
+  resourceType: string;
   resourceAmount: number;
   moneyAmount: number
 }