From 6b7cf87fcf76a65e812fbc12f73e312de27b4657 Mon Sep 17 00:00:00 2001 From: Emil Nielsen Date: Wed, 22 Mar 2023 08:55:00 +0700 Subject: [PATCH] Add startStake to stakingOverview --- database.db | Bin 49152 -> 49152 bytes src/app/Components/SelectDropdown.tsx | 34 +++++++------ src/app/Components/StakingSource.tsx | 52 +++++++++++++------ src/app/Components/StakingSourcesView.tsx | 2 + src/app/page.tsx | 53 ++++++++++++-------- src/pages/api/user/[userId]/stakes/start.ts | 4 +- typings.d.ts | 3 +- 7 files changed, 95 insertions(+), 53 deletions(-) diff --git a/database.db b/database.db index 5d6e5f5ab2a027bb7a32ac62fe0a206e797c8948..189797dd9a160fbc707f8aa77f47828286608198 100644 GIT binary patch delta 242 zcmZo@U~Xt&o*>OAI8nx#QE+3z5_u60{z3-+ul!H=&++f(U%@|xzmdOiv!XyG|Kvh_ zGe)M(EA)K@xQrAG46RI!t&Ge!|F>rq;9%n4$H0G|f8S=o37h!+}Ip-ywy8y3mrBV$HBpInM@|TH;sj2=e5EVr-DH&&hz9Hu1XFp zg;UnfLhuh9*r@4TYy=w%tt_k#(Z=FRwR3%8H;`mmNb$n=d*93ZW|Aakl9&%q8;g(5 zoHrKVTz%19aA1SLZ}ZNvzyPi}sP*SF&bM^Kq8|De@!h3iE5-!6b%%jae8h7mmahe@@b0^yD`JOLU zJh9?qcc=m%AMIKQ7#&&5h@eb}zVd{2>tn*q2suRrNEihVUL@klM{3tBn1~{RM5s8L z)W(FBjqxi)wy5qlkeKWe7J>0DT(<}zHVg^;g(LU@-{6Y{A7O||yoABgR&%*$J7&ko z284~glJ&d_th^E?;vJXLbpqev13ZWO5Wz)Qf+qb%Khan80o|nQXuM2gMlCW9xDsC$ zu&3FH*|O+sc089W(PFpgX?AReEY_4n^OhA)hL<7>73w0?%$e2RSCVVi%;nONV0Wne zHO=f?E*&areZ>RK8krnVofqm{c~Y}_-d=I%LP=jUYqp#PW9D*YIQLY5=Cz3|r!I?B s9&T>r?WJJwwxKNa+vF=0exkwQ{zBn39qs=q%IWCo2x@chp1p4W2Pc5sPyhe` diff --git a/src/app/Components/SelectDropdown.tsx b/src/app/Components/SelectDropdown.tsx index 6a4b419..1b25992 100644 --- a/src/app/Components/SelectDropdown.tsx +++ b/src/app/Components/SelectDropdown.tsx @@ -1,9 +1,15 @@ -import React, { useState, ChangeEvent } from "react"; +import React, { useState, useEffect, ChangeEvent } from "react"; import { ISelectDropdownProps } from "typings"; const SelectDropdown: React.FC = (props) => { const [selectedValue, setSelectedValue] = useState(""); + useEffect(() => { + if (!props.isActive) { + setSelectedValue(""); + } + }, [props.isActive]); + const handleChange = (event: ChangeEvent) => { setSelectedValue(event.target.value); if (props.onChange) { @@ -12,20 +18,18 @@ const SelectDropdown: React.FC = (props) => { }; return ( -
- -
+ ); }; diff --git a/src/app/Components/StakingSource.tsx b/src/app/Components/StakingSource.tsx index d94eec8..4350fd1 100644 --- a/src/app/Components/StakingSource.tsx +++ b/src/app/Components/StakingSource.tsx @@ -12,8 +12,11 @@ const StakingSource = (props: { stakingSource: IStakingSource; inventoryItems: IInventoryItem[] | null | undefined; claimStake: (stakingEventId: number) => void; + startStake: (inventoryItemId: number, wellId: number) => void; }) => { const [activeStakes, setActiveStakes] = useState([]); + const [selectedItemId, setSelectedItemId] = useState(null); + const [selectedWellId, setSelectedWellId] = useState(null); // Check if claimable every second useEffect(() => { @@ -42,16 +45,18 @@ const StakingSource = (props: { }); const handleStartMining = () => { - console.log("Start mining.."); + if (selectedItemId && selectedWellId) { + props.startStake(selectedItemId, selectedWellId); + } }; const handleClaim = (e: React.MouseEvent) => { console.log("Start claiming.."); }; - const handleSelectChange = (selectedValue: string) => { - console.log(selectedValue); - // Render a staking button + const handleSelectChange = (wellId: string, itemId: number) => { + setSelectedWellId(Number(wellId)); + setSelectedItemId(itemId); }; const RenderButtonOrCountdown = (props: { stake: IStake }) => { @@ -80,7 +85,7 @@ const StakingSource = (props: { } }; - const isChecked = (item: IInventoryItem): boolean => { + const isActive = (item: IInventoryItem): boolean => { return props.stakingSource.activeStakes.some((obj) => obj.id === item.id); }; @@ -121,18 +126,33 @@ const StakingSource = (props: { {props.inventoryItems && props.inventoryItems.map( (item, id) => - !isChecked(item) && ( -
-

{item.storeItem.name}

- ({ - value: well.resourceType, - label: well.resourceType, - }) + !isActive(item) && ( +
+

+ {item.storeItem.name} ID{item.storeItem.id} +

+
+ ({ + value: well.id, + label: `${well.resourceType} - ID# ${well.id}`, + }) + )} + onChange={(value) => handleSelectChange(value, item.id)} + isActive={selectedItemId === item.id} + /> + {selectedItemId === item.id ? ( + + ) : ( + <> )} - onChange={handleSelectChange} - /> +
) )} diff --git a/src/app/Components/StakingSourcesView.tsx b/src/app/Components/StakingSourcesView.tsx index 9da2240..e00f425 100644 --- a/src/app/Components/StakingSourcesView.tsx +++ b/src/app/Components/StakingSourcesView.tsx @@ -7,6 +7,7 @@ const StakingSourcesView = (props: { stakingSources: IStakingSource[] | null; inventoryItems: IInventoryItem[] | null | undefined; claimStake: (stakingEventId: number) => void; + startStake: (inventoryItemId: number, wellId: number) => void; }) => { return (
@@ -18,6 +19,7 @@ const StakingSourcesView = (props: { stakingSource={stakingSource} inventoryItems={props.inventoryItems} claimStake={props.claimStake} + startStake={props.startStake} /> ))}
diff --git a/src/app/page.tsx b/src/app/page.tsx index fe06971..d5af349 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -28,7 +28,7 @@ export default function Home() { const [lightBoxIsActive, setLightBoxIsActive] = useState(false); const [userId, setUserId] = useState(null); const [notification, setNotification] = useState(null); - const [notificationTime, setNotificationTime] = useState(3); + const [notificationTime, setNotificationTime] = useState(30); const [storeItems, setStoreItems] = useState(gameConfig.store); const isOwned = (storeItemId: string) => { @@ -52,6 +52,23 @@ export default function Home() { setInventoryItems(DBInventoryItems); }; + const fetchStakingSources = async () => { + const response = await fetch(`/api/user/${userId}/staking-sources`); + const sources = await response.json(); + setStakingSources(sources); + }; + + const fetchStakes = async () => { + const response = await fetch(`/api/user/${userId}/stakes`); + const stakes = await response.json(); + setUserStakes( + stakes.map((stake: IStake) => ({ + ...stake, + unclaimed: stake.unclaimed == 1, + })) + ); + }; + useEffect(() => { const fetchUser = async (wallet: string) => { const response = await fetch(`/api/user/login`, { @@ -74,23 +91,6 @@ export default function Home() { setBankAccount(bankAccount); }; - const fetchStakingSources = async () => { - const response = await fetch(`/api/user/${userId}/staking-sources`); - const sources = await response.json(); - setStakingSources(sources); - }; - - const fetchStakes = async () => { - const response = await fetch(`/api/user/${userId}/stakes`); - const stakes = await response.json(); - setUserStakes( - stakes.map((stake: IStake) => ({ - ...stake, - unclaimed: stake.unclaimed == 1, - })) - ); - }; - fetchUser("abcdefg"); // Public key goes here // Nico is there a better way of checking if a user is logged in? if (userId) { @@ -121,7 +121,7 @@ export default function Home() { if (notificationTime === 0) { setNotification(null); clearInterval(intervalId); - setNotificationTime(3); + setNotificationTime(30); } return () => { @@ -148,7 +148,19 @@ export default function Home() { wellId: wellId, }), }); - return await response.json(); + if (!response.ok) { + const error = await response.text(); + setNotification({ message: error, type: "Error" }); + } + if (response.status == 200) { + const data = await response.json(); + setNotification({ + message: `You've successfully staked`, + type: "Success", + }); + fetchStakes(); + fetchStakingSources(); + } }; // Which object is it? @@ -279,6 +291,7 @@ export default function Home() { stakingSources={stakingSources} inventoryItems={inventoryItems} claimStake={claimStake} + startStake={startStake} /> void; + isActive: boolean }