From a5c2ebb0ea1a09c731e0a761611f54b8ff5cfc72 Mon Sep 17 00:00:00 2001 From: Emil Nielsen Date: Wed, 22 Mar 2023 14:44:59 +0700 Subject: [PATCH] Show staking countdown, refetch data --- src/app/Components/StakingSource.tsx | 73 ++++++++++++------- src/app/Components/StakingSourcesView.tsx | 2 + src/app/page.tsx | 32 +++++--- src/pages/api/user/[userId]/stakes/index.ts | 5 +- .../api/user/[userId]/staking-sources.ts | 3 +- src/utils/helpers.ts | 2 +- 6 files changed, 77 insertions(+), 40 deletions(-) diff --git a/src/app/Components/StakingSource.tsx b/src/app/Components/StakingSource.tsx index a3f14d3..fa137ec 100644 --- a/src/app/Components/StakingSource.tsx +++ b/src/app/Components/StakingSource.tsx @@ -20,23 +20,24 @@ const StakingSource = (props: { // Check if claimable every second useEffect(() => { - const handleIsClaimable = props.stakingSource.activeStakes.map((stake) => { - const remainingTime = calculateRemainingTime( - stake.startTime, - stake.durationInMins - ); + const updatedActiveStakes = props.stakingSource.activeStakes.map( + (stake) => { + const remainingTime = calculateRemainingTime( + stake.startTime, + stake.durationInMins + ); - const obj = { - ...stake, - remainingTime: remainingTime, - isClaimable: remainingTime <= 0, - }; + const obj = { + ...stake, + remainingTime: remainingTime, + }; - return obj; - }); + return obj; + } + ); const intervalId = setInterval(() => { - setActiveStakes(handleIsClaimable); + setActiveStakes(updatedActiveStakes); }, 1000); return () => { @@ -50,8 +51,8 @@ const StakingSource = (props: { } }; - const handleClaim = (e: React.MouseEvent) => { - console.log("Start claiming.."); + const handleClaim = (stakingEventId: number) => { + props.claimStake(stakingEventId); }; const handleSelectChange = (wellId: string, itemId: number) => { @@ -60,37 +61,55 @@ const StakingSource = (props: { }; const RenderButtonOrCountdown = (props: { stake: IStake }) => { - console.log(props.stake); if (!props.stake.remainingTime) return

Error

; - if (!props.stake.unclaimed) - return

Claimed

; if (props.stake.remainingTime <= 0) { return ( ); - } - if (true) { + } else { return ( + // I'll fix it
-

{prettifyTime(props.stake.remainingTime).hours} hrs.

-

{prettifyTime(props.stake.remainingTime).minutes} mins.

-

{prettifyTime(props.stake.remainingTime).seconds} sec.

+
+ + {prettifyTime(props.stake.remainingTime).hours == 0 + ? "00" + : prettifyTime(props.stake.remainingTime).hours} + + : + + {prettifyTime(props.stake.remainingTime).minutes.toString() + .length > 0 + ? prettifyTime(props.stake.remainingTime).minutes + : "0" + + prettifyTime(props.stake.remainingTime).minutes.toString()} + + : + + {prettifyTime(props.stake.remainingTime).minutes.toString() + .length > 0 + ? prettifyTime(props.stake.remainingTime).seconds + : "0" + + prettifyTime(props.stake.remainingTime).seconds.toString()} + +
); } }; const isActive = (item: IInventoryItem): boolean => { - return props.stakingSource.activeStakes.some((obj) => obj.id === item.id); + return props.stakingSource.activeStakes.some( + (obj) => obj.inventoryItemId === item.id + ); }; - console.log(activeStakes); - console.log(props.stakingSource); + return (

{props.stakingSource.name}

diff --git a/src/app/Components/StakingSourcesView.tsx b/src/app/Components/StakingSourcesView.tsx index 30b4dad..268878a 100644 --- a/src/app/Components/StakingSourcesView.tsx +++ b/src/app/Components/StakingSourcesView.tsx @@ -9,6 +9,8 @@ const StakingSourcesView = (props: { claimStake: (stakingEventId: number) => void; startStake: (inventoryItemId: number, wellId: number) => void; }) => { + console.log(props.inventoryItems); + console.log(props.stakingSources); return (

Your Moons

diff --git a/src/app/page.tsx b/src/app/page.tsx index dfbad34..72ede60 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -69,6 +69,12 @@ export default function Home() { ); }; + const fetchBankAccount = async () => { + const response = await fetch(`/api/user/${userId}/bank-account`); + const bankAccount = await response.json(); + setBankAccount(bankAccount); + }; + useEffect(() => { const fetchUser = async (wallet: string) => { const response = await fetch(`/api/user/login`, { @@ -85,12 +91,6 @@ export default function Home() { } }; - const fetchBankAccount = async () => { - const response = await fetch(`/api/user/${userId}/bank-account`); - const bankAccount = await response.json(); - setBankAccount(bankAccount); - }; - fetchUser("abcdefg"); // Public key goes here // Nico is there a better way of checking if a user is logged in? if (userId) { @@ -136,7 +136,22 @@ export default function Home() { headers: { "Content-Type": "application/json" }, body: JSON.stringify({ stakingEventId: stakingEventId }), }); - 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 claimed`, + type: "Success", + }); + + fetchStakes(); + fetchStakingSources(); + fetchInventoryItems(); + fetchBankAccount(); + } }; const startStake = async (inventoryItemId: number, wellId: number) => { @@ -195,7 +210,6 @@ export default function Home() { if (response.status == 200) { // Return success message - console.log(data.message); setNotification({ message: "Item has been purchased", type: "Success", @@ -231,7 +245,6 @@ export default function Home() { if (response.status == 200) { // Return success message - console.log(data); setNotification({ message: "Item has been upgraded", type: "Success" }); fetchInventoryItems(); } @@ -267,6 +280,7 @@ export default function Home() { }; if (!userId) return

Please login

; + //console.log(stakingSources); return ( <> {notification && ( diff --git a/src/pages/api/user/[userId]/stakes/index.ts b/src/pages/api/user/[userId]/stakes/index.ts index beeb204..2a3a4ca 100644 --- a/src/pages/api/user/[userId]/stakes/index.ts +++ b/src/pages/api/user/[userId]/stakes/index.ts @@ -11,6 +11,7 @@ export default async function handler( if (req.method === "GET") { const { userId } = req.query; const db = await dbConnection; + // This is supposed to be activeStakes? const inventorySql = ` SELECT staking_event.id, staking_source.id as sourceId, resname as resourceType, inventory_item_id, duration_in_mins, stake_amount, staking_event.created_at, @@ -23,9 +24,9 @@ export default async function handler( const inventoryItems = await db.all(inventorySql, [userId]); // Change all keys to camelCase - const updatedInventoryItems = updateAllToCamelCase(inventoryItems) + // const updatedInventoryItems = updateAllToCamelCase(inventoryItems) - return res.status(200).json(updatedInventoryItems); + return res.status(200).json(inventoryItems); } } catch (error) { res.status(500).json(error); diff --git a/src/pages/api/user/[userId]/staking-sources.ts b/src/pages/api/user/[userId]/staking-sources.ts index a55e568..b3a3ee2 100644 --- a/src/pages/api/user/[userId]/staking-sources.ts +++ b/src/pages/api/user/[userId]/staking-sources.ts @@ -35,9 +35,10 @@ export default async function handler( LEFT JOIN claim_event ON staking_event.id = claim_event.staking_event_id WHERE staking_source.id = ? AND claim_event.staking_event_id IS NULL;`; const activeStakes = await db.all(stakesSql, [source.id]); + source.activeStakes = activeStakes; } - + return res.status(200).json(stakingSources); } if (req.method === "POST") { diff --git a/src/utils/helpers.ts b/src/utils/helpers.ts index 29aa4c6..847e802 100644 --- a/src/utils/helpers.ts +++ b/src/utils/helpers.ts @@ -65,7 +65,7 @@ export const prettifyTime = (remainingTime: number) => { const hours = Math.floor((remainingTime / (1000 * 60 * 60)) % 24); const minutes = Math.floor((remainingTime / (1000 * 60)) % 60); const seconds = Math.floor((remainingTime / 1000) % 60); - return { hours, minutes, seconds }; + return { hours, minutes, seconds } } export const generateRandomBase64String = (length: number) => {