wip: stakingSources, startStake

src/app/Components/InventoryItem.tsx

@@ -1,14 +1,23 @@
 import React from "react";
-import { IInventoryItem } from "typings";
+import { IInventoryItem, IStake } from "typings";
 import CardLayout from "../Layouts/CardLayout";
 
 const InventoryItem = (props: {
   inventoryItem: IInventoryItem;
+  stakes: IStake[] | null;
   upgradeInventoryItem: (itemId: number) => void;
 }) => {
   const getCurrentTier = (index: number) => {
     return props.inventoryItem.storeItem.upgrades[index].tier;
   };
+
+  const isInUse = () => {
+    if (!props.stakes) return false;
+    return props.stakes.some((stake) => {
+      stake.inventoryItemId === props.inventoryItem.id;
+    });
+  };
+
   return (
     <CardLayout>
       <h3 className="text-xl font-bold mb-2">
@@ -28,9 +37,9 @@ const InventoryItem = (props: {
         <div className="flex-1">
           <div className="flex">
             {/* { Check if the item is in use } */}
-            {false ? (
+            {isInUse() ? (
               <button className="bg-slate-400 text-slate-600 px-4 py-2 rounded-lg font-bold w-28 text-center cursor-not-allowed">
-                Upgrade
+                In Use
               </button>
             ) : (
               <button

src/app/Components/InventoryItemView.tsx

@@ -1,9 +1,9 @@
 import React from "react";
-import { IInventoryItem, IStakingSource } from "typings";
+import { IInventoryItem, IStakingSource, IStake } from "typings";
 import InventoryItem from "./InventoryItem";
 
 const InventoryItemView = (props: {
-  stakingSources: IStakingSource[] | null;
+  stakes: IStake[] | null;
   inventoryItems: IInventoryItem[] | null | undefined;
   upgradeInventoryItem: (itemId: number) => void;
 }) => {
@@ -16,6 +16,7 @@ const InventoryItemView = (props: {
             key={id}
             inventoryItem={inventoryItem}
             upgradeInventoryItem={props.upgradeInventoryItem}
+            stakes={props.stakes}
           />
         ))}
     </div>

src/app/Components/StakingSource.tsx

@@ -60,6 +60,7 @@ const StakingSource = (props: {
   };
 
   const RenderButtonOrCountdown = (props: { stake: IStake }) => {
+    console.log(props.stake);
     if (!props.stake.remainingTime) return <p>Error</p>;
     if (!props.stake.unclaimed)
       return <p className="text-red-400 font-bold">Claimed</p>;
@@ -88,7 +89,8 @@ const StakingSource = (props: {
   const isActive = (item: IInventoryItem): boolean => {
     return props.stakingSource.activeStakes.some((obj) => obj.id === item.id);
   };
-
+  console.log(activeStakes);
+  console.log(props.stakingSource);
   return (
     <CardLayout>
       <h3 className="text-xl font-bold mb-2">{props.stakingSource.name}</h3>

src/app/Components/StakingSourcesView.tsx

@@ -1,6 +1,6 @@
 "use client";
 import React from "react";
-import { IInventoryItem, IStakingSource, IStake, IGameConfig } from "typings";
+import { IInventoryItem, IStakingSource } from "typings";
 import StakingSource from "./StakingSource";
 
 const StakingSourcesView = (props: {

src/app/page.tsx

@@ -267,7 +267,6 @@ export default function Home() {
   };
 
   if (!userId) return <p>Please login</p>;
-
   return (
     <>
       {notification && (
@@ -294,7 +293,7 @@ export default function Home() {
           startStake={startStake}
         />
         <InventoryItemView
-          stakingSources={stakingSources}
+          stakes={userStakes}
           inventoryItems={inventoryItems}
           upgradeInventoryItem={upgradeInventoryItem}
         />

src/pages/api/user/[userId]/stakes/index.ts

@@ -1,6 +1,7 @@
 import { dbConnection } from "db";
 import type { NextApiRequest, NextApiResponse } from "next";
 import { IInventoryItem } from "typings";
+import { updateAllToCamelCase } from "@/utils/helpers";
 
 export default async function handler(
   req: NextApiRequest,
@@ -20,7 +21,11 @@ export default async function handler(
           LEFT JOIN claim_event ON staking_event.id = claim_event.staking_event_id
           WHERE staking_event.user_id = ?`;
       const inventoryItems = await db.all(inventorySql, [userId]);
-      return res.status(200).json(inventoryItems);
+
+      // Change all keys to camelCase
+      const updatedInventoryItems = updateAllToCamelCase(inventoryItems)
+
+      return res.status(200).json(updatedInventoryItems);
     }
   } catch (error) {
     res.status(500).json(error);

src/pages/api/user/[userId]/staking-sources.ts

@@ -2,6 +2,7 @@ import { dbConnection } from "db";
 import type { NextApiRequest, NextApiResponse } from "next";
 import { IStakingSource } from "typings";
 import { gameConfig } from "@/utils/gameLogic";
+import { updateAllToCamelCase } from "@/utils/helpers";
 import {
   generateRandomBase64String,
 } from "../../../../utils/helpers";
@@ -36,18 +37,8 @@ export default async function handler(
         const activeStakes = await db.all(stakesSql, [source.id]);
         source.activeStakes = activeStakes;
       }
-      const typedStakingSources: IStakingSource[] = stakingSources.map(source => ({
-        ...source,
-        // Emil: The variable names are messed up so i'm renaming them
-        activeStakes: source.activeStakes.map((stake) => ({
-          ...stake,
-          inventoryItemId: stake.inventory_item_id,
-          durationInMins: stake.duration_in_mins,
-          stakeAmount: stake.stake_amount
-        }))
-      }))
 
-      return res.status(200).json(typedStakingSources);
+      return res.status(200).json(stakingSources);
     }
     if (req.method === "POST") {
       const { userId } = req.query;

src/utils/helpers.ts

@@ -78,3 +78,25 @@ export const generateRandomBase64String = (length: number) => {
 
   return base64String;
 }
+
+export function toSnakeCase(str: string) {
+  return str.replace(/[A-Z]/g, (letter) => `_${letter.toLowerCase()}`);
+}
+
+export function toCamelCase(str: string) {
+  return str.replace(/([-_][a-z])/g, (group) =>
+    group.toUpperCase().replace("-", "").replace("_", "")
+  );
+}
+
+export const updateAllToCamelCase = (array) => {
+  const updatedArray = array.map(obj => {
+    const newObj = {}
+    Object.keys(obj).forEach(key => {
+      const camelCaseKey = toCamelCase(key);
+      newObj[camelCaseKey] = obj[key];
+    });
+    return newObj;
+  })
+  return updatedArray
+}