From e820f1c45bf0d737448ccda94920fa694629837d Mon Sep 17 00:00:00 2001 From: Emil Nielsen Date: Sun, 19 Mar 2023 10:04:50 +0700 Subject: [PATCH] Merge feature/resource_store * Add two views to resource store * Add the endpoints (#4) * add handleAmountChange * add template changes * add components to resourceAccounts * refactor the storeview layout a bit * clean up some stuff, change grand total --- database.db | Bin 0 -> 57344 bytes src/app/Components/InventoryItem.tsx | 2 +- src/app/Components/LightBox.tsx | 12 --- src/app/Components/ResourceItem.tsx | 35 +++++++ src/app/Components/ResourceStore.tsx | 113 +++++++++++++++++++++++ src/app/Components/ResourceStoreItem.tsx | 106 +++++++++++++++++++++ src/app/page.tsx | 13 ++- src/utils/helpers.ts | 4 + typings.d.ts | 6 ++ 9 files changed, 273 insertions(+), 18 deletions(-) create mode 100644 database.db delete mode 100644 src/app/Components/LightBox.tsx create mode 100644 src/app/Components/ResourceItem.tsx create mode 100644 src/app/Components/ResourceStore.tsx create mode 100644 src/app/Components/ResourceStoreItem.tsx diff --git a/database.db b/database.db new file mode 100644 index 0000000000000000000000000000000000000000..412457aa18c4f0ee59acee2e7cab33659e63d938 GIT binary patch literal 57344 zcmeI)?Qh#e90zb;9LGu8^ojsQRaNb(YFeUgum^;A10qX37%S=4b}uG`A~*3mtB#Y| z@wW1=blV@mJN^MAUa^6hkfyx?!OOubhJ<*Sv^Sie5?_{r3WaXXH`>~>?{e{d zes^cz>}>h`g4s3LrMA=3yX>SiDG?&Q$(SVZq$Ex7zwv8~C(`i-|4kC0Y;O z+6~8O8Fu$bSk!Y3ryiDPcDu`L&$6PdUgg8HS9MFb8;1W$y?3&vaY^^AE<47mZ)?@F ztQ41e<8^kd993LhtSzrBRnF8_*roNle+2CG;*xgetr|P4T`Wb1R1Oc&Z_ko;T3ga; zRc)F1nQqB!4zDXdWTC!zCvWEPI^zO_hs|rJD;E}4SgGMT4sS%gmo>aQ{ll&qc3iQSy8%{H=$JwyhIh?= zk*ITSUe2q<*;%qR9R#DF-%pJRLFn(_c>rv^Ww5Kd)3~fVrQ;`FEB6L^G?Mx3GB5)~ z84XJ}TXntVPhr9g5$CsC9n0vNZ99lTo%bVGDCdvEa!xHCIz(9Sv#k^ zW?0rXf?}w*Db(~FJs3!){p2u;hMRwg{E}k(;kX;2xHb@osA0qX<8yA^FBSUxXL@nc zG3TU99ob?t;cIS*w-hYGq#YXLeT!uPA1Pffl}9tSlo0 zL(JQGG?FK@!E;&Da2t-<@rP1;&KoQeU6~Gxh~8{+b~k?K(6i;*{_{5vg3$9w;sap~lV{xt*hZ1aj|@c6%+&J?RNL^AEBaoxRQ@oS@cxH#e4_4uRf z$K#a3muOjknRYIfDIPvdE{5GEe4}gdO8G)0swdu*h2{)omi&%zgcmJeCu*@+B%9&2 zZLqosex!uA2fNrVT5yB{Z;wLnN%Rr@nf^e(=SjRE009U<00Izz00bZa0SG_<0uXrG z1@ek4Oty`|AYVOZv?E+LXe$ID009U<00Izz00bZa z0SJt$fWQ7%=qD0=NWY_B($9GkF9<*Y0uX=z1Rwwb2tWV=5P$##_C#P($w!Q$SS|DMyHsSJOcvJ(ZFDL{`qG{NJgR N^qER{DwmSJ_!F)Q@qPdR literal 0 HcmV?d00001 diff --git a/src/app/Components/InventoryItem.tsx b/src/app/Components/InventoryItem.tsx index 5652334..f290028 100644 --- a/src/app/Components/InventoryItem.tsx +++ b/src/app/Components/InventoryItem.tsx @@ -1,5 +1,5 @@ import React from "react"; -import { IInventoryItem, IStoreItem } from "typings"; +import { IInventoryItem } from "typings"; import CardLayout from "../Layouts/CardLayout"; const InventoryItem = (props: { diff --git a/src/app/Components/LightBox.tsx b/src/app/Components/LightBox.tsx deleted file mode 100644 index 14b87ca..0000000 --- a/src/app/Components/LightBox.tsx +++ /dev/null @@ -1,12 +0,0 @@ -import React from "react"; -import { IBankAccount } from "typings"; - -const LightBox = (props: { bankAccounts: IBankAccount[] }) => { - return ( -
-

Sell Your Resources

-
- ); -}; - -export default LightBox; diff --git a/src/app/Components/ResourceItem.tsx b/src/app/Components/ResourceItem.tsx new file mode 100644 index 0000000..a2a261a --- /dev/null +++ b/src/app/Components/ResourceItem.tsx @@ -0,0 +1,35 @@ +import React from "react"; + +const ResourceItem = (props: { + name: string; + bgColor: string; + fontColor: string; + amount: number; + unit: string; +}) => { + return ( +
+
+
+ + {props.name} +

+ {props.amount.toLocaleString("en-US", { + minimumFractionDigits: 2, + maximumFractionDigits: 2, + })}{" "} + {props.unit} +

+ +
+
+
+ ); +}; + +export default ResourceItem; diff --git a/src/app/Components/ResourceStore.tsx b/src/app/Components/ResourceStore.tsx new file mode 100644 index 0000000..d662c37 --- /dev/null +++ b/src/app/Components/ResourceStore.tsx @@ -0,0 +1,113 @@ +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"; + +const ResourceStore = (props: { + bankAccounts: IBankAccount[]; + setLightBoxIsActive: () => void; +}) => { + const [conversionRate, setConversionRate] = useState(0.1); + const [amount, setAmount] = useState([]); + 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]); + + const handleAmountChange = ( + e: React.ChangeEvent, + resourceType: IResourceType + ) => { + const existingObj = amount.find( + (obj) => obj.resourceType.name === resourceType.name + ); + + 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 getConversionPair = (name: string) => { + return conversionPairs?.find((obj) => obj.resourceType.name === name); + }; + + return ( +
+

+ Sell Your Resources +

+
+
+ {props.bankAccounts.map((bankAccount) => ( +
+
+ +
+
+ ))} + + {conversionPairs && ( +
+

+ Grand total +

+

+ ${" "} + {sumValues(conversionPairs, "moneyAmount").toLocaleString( + "en-US", + { + minimumFractionDigits: 2, + maximumFractionDigits: 2, + } + )} +

+ {/* */} + +
+ )} +
+
+
+ ); +}; + +export default ResourceStore; diff --git a/src/app/Components/ResourceStoreItem.tsx b/src/app/Components/ResourceStoreItem.tsx new file mode 100644 index 0000000..946ac05 --- /dev/null +++ b/src/app/Components/ResourceStoreItem.tsx @@ -0,0 +1,106 @@ +"use client"; +import React, { useEffect, useState } from "react"; +import { IBankAccount, IConversionPair } from "typings"; +import { IResourceType } from "typings"; + +const ResourceStoreItem = (props: { + bankAccount: IBankAccount; + conversionPair: IConversionPair | undefined; + handleAmountChange: ( + e: React.ChangeEvent, + resourceType: IResourceType + ) => void; +}) => { + return ( +
+
+ + {props.bankAccount.resourceType.name} + +

+ {props.bankAccount.balance.toLocaleString("en-US", { + minimumFractionDigits: 2, + maximumFractionDigits: 2, + })}{" "} + kg +

+
+ {props.conversionPair ? ( +
+
+ + + {props.conversionPair.resourceType.name} + +

+ {props.conversionPair.resourceAmount.toLocaleString("en-US", { + minimumFractionDigits: 2, + maximumFractionDigits: 2, + })}{" "} + kg. +

+ + + + + + + + Moonbucks + +

+ $ + {props.conversionPair.moneyAmount.toLocaleString("en-US", { + minimumFractionDigits: 2, + maximumFractionDigits: 2, + })} +

+ +
+
+ ) : ( +
+ )} + + props.handleAmountChange(e, props.bankAccount.resourceType) + } + /> +
+ ); +}; + +export default ResourceStoreItem; diff --git a/src/app/page.tsx b/src/app/page.tsx index b8fa1ec..2a5c0be 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -5,7 +5,7 @@ import InventoryItemView from "./Components/InventoryItemView"; import StakingSourcesView from "./Components/StakingSourcesView"; import BankAccountsView from "./Components/BankAccountsView"; import StoreItemView from "./Components/StoreItemView"; -import LightBox from "./Components/LightBox"; +import ResourceStore from "./Components/ResourceStore"; import { IStoreItem, IInventoryItem, @@ -194,19 +194,22 @@ export default function Home() { }; const handleSetLightBox = () => { + console.log("Tester"); setLightBoxIsActive(!lightBoxIsActive); }; - const renderLightBox = () => { - if (lightBoxIsActive) return ; - }; - return ( <> + {lightBoxIsActive && ( + + )}
(array: T[], element: T): T[] { const newArray = [...array]; // create a new array newArray.push(element); // add the new element to the array return newArray; // return the new array + } + +export function sumValues, K extends keyof T>(array: T[], key: K): number { + return array.reduce((acc, obj) => acc + obj[key], 0); } \ No newline at end of file diff --git a/typings.d.ts b/typings.d.ts index e607270..672ba0e 100644 --- a/typings.d.ts +++ b/typings.d.ts @@ -52,3 +52,9 @@ export interface IClaimableResource { resourceType: IResourceType; balance: number; } + +export interface IConversionPair { + resourceType: IResourceType; + resourceAmount: number; + moneyAmount: number +}