diff --git a/database.db b/database.db new file mode 100644 index 0000000..412457a Binary files /dev/null and b/database.db differ 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 +}