Add the endpoints

src/app/Components/StakingSourcesView.tsx

@@ -1,5 +1,5 @@
 "use client";
-import React, { useEffect, useState } from "react";
+import React from "react";
 import { IInventoryItem, IStakingSource, IClaimableResource } from "typings";
 import StakingSource from "./StakingSource";
 

src/app/page.tsx

@@ -7,8 +7,6 @@ import BankAccountsView from "./Components/BankAccountsView";
 import StoreItemView from "./Components/StoreItemView";
 import LightBox from "./Components/LightBox";
 import {
-  IResourceWell,
-  IResourceType,
   IStoreItem,
   IInventoryItem,
   IStakingSource,
@@ -16,142 +14,6 @@ import {
   IClaimableResource,
 } from "typings";
 
-import { getObjectFromArray } from "../utils/helpers";
-
-const DBresourceTypes: IResourceType[] = [
-  {
-    id: 1,
-    name: "Moonstone",
-    fontColorClass: "text-teal-400",
-    bgColorClass: "from-teal-800 to-teal-900",
-  },
-  {
-    id: 2,
-    name: "Lunarite",
-    fontColorClass: "text-cyan-400",
-    bgColorClass: "from-cyan-800 to-cyan-900",
-  },
-  {
-    id: 3,
-    name: "Selenite",
-    fontColorClass: "text-purple-300",
-    bgColorClass: "from-purple-800 to-purple-900",
-  },
-  {
-    id: 4,
-    name: "Heliogem",
-    fontColorClass: "text-rose-300",
-    bgColorClass: "from-rose-800 to-rose-900",
-  },
-];
-
-const DBresourceWells: IResourceWell[] = [
-  {
-    id: 1,
-    resourceType: DBresourceTypes[0],
-    supply: 10000,
-  },
-];
-
-const DBstoreItems: IStoreItem[] = [
-  {
-    id: 1,
-    name: "Eclipse Drill",
-    description:
-      "A compact and lightweight drill designed for use in tight and narrow mining tunnels.",
-    price: 225,
-    timeToClaim: 3,
-    tiers: [
-      {
-        tier: 500,
-        price: 50,
-      },
-      {
-        tier: 600,
-        price: 75,
-      },
-      {
-        tier: 700,
-        price: 100,
-      },
-      {
-        tier: 800,
-        price: 150,
-      },
-      {
-        tier: 900,
-        price: 200,
-      },
-    ],
-  },
-  {
-    id: 2,
-    name: "Moon Saw 2000",
-    description:
-      "A compact and lightweight drill designed for use in tight and narrow mining tunnels.",
-    price: 100,
-    timeToClaim: 3,
-    tiers: [
-      {
-        tier: 500,
-        price: 50,
-      },
-      {
-        tier: 550,
-        price: 75,
-      },
-      {
-        tier: 600,
-        price: 100,
-      },
-      {
-        tier: 650,
-        price: 150,
-      },
-      {
-        tier: 700,
-        price: 200,
-      },
-    ],
-  },
-];
-
-const DBinventoryItems: IInventoryItem[] = [];
-
-const DBstakingSources: IStakingSource[] = [
-  {
-    id: 1,
-    name: "Selene's Eye",
-    description:
-      "Selene's Eye is a large and mysterious moon, named for its distinctive appearance - a bright, glowing eye that seems to stare out from the void of space",
-    resourceWells: DBresourceWells,
-    inventoryItem: null,
-  },
-];
-
-const DBbankAccounts: IBankAccount[] = [
-  {
-    id: 1,
-    resourceType: DBresourceTypes[0],
-    balance: 0,
-  },
-  {
-    id: 2,
-    resourceType: DBresourceTypes[1],
-    balance: 0,
-  },
-  {
-    id: 3,
-    resourceType: DBresourceTypes[2],
-    balance: 0,
-  },
-  {
-    id: 4,
-    resourceType: DBresourceTypes[3],
-    balance: 0,
-  },
-];
-
 export default function Home() {
   const [inventoryItems, setInventoryItems] = useState<
     IInventoryItem[] | null | undefined
@@ -169,39 +31,27 @@ export default function Home() {
     const loggedInUser = 1;
 
     const fetchInventoryItems = async () => {
-      // old
+      const response = await fetch(`/api/user/${loggedInUser}/inventory-items`);
-      setInventoryItems(DBinventoryItems);
+      const DBInventoryItems = await response.json();
-      // new
+      setInventoryItems(DBInventoryItems.message);
-      //   const response = await fetch(`/api/user/${loggedInUser}/inventory-items`);
-      //   const DBInventoryItems = await response.json();
-      //   setInventoryItems(DBInventoryItems.message);
     };
 
     const fetchStakingSources = async () => {
-      // old
+      const response = await fetch(`/api/user/${loggedInUser}/staking-sources`);
-      setStakingSources(DBstakingSources);
+      const DBStakingSources = await response.json();
-      // new
+      setStakingSources(DBStakingSources.message);
-      // const response = await fetch(`/api/user/${loggedInUser}/staking-sources`);
-      // const DBStakingSources = await response.json();
-      // setStakingSources(DBStakingSources);
     };
 
     const fetchBankAccounts = async () => {
-      // old
+      const response = await fetch(`/api/user/${loggedInUser}/bank-accounts`);
-      setBankAccounts(DBbankAccounts);
+      const DBBankAccounts = await response.json();
-      // new
+      setBankAccounts(DBBankAccounts.message);
-      // const response = await fetch(`/api/user/${loggedInUser}/bank-accounts`);
-      // const DBBankAccounts = await response.json();
-      // setStakingSources(DBBankAccounts.message);
     };
 
     const fetchStoreItems = async () => {
-      // old
+      const response = await fetch(`/api/store/items`);
-      setStoreItems(DBstoreItems);
+      const DBStoreItems = await response.json();
-      // new
+      setStoreItems(DBStoreItems.message);
-      // const response = await fetch(`/api/store/items`);
-      // const DBStoreItems = await response.json();
-      // setStoreItems(DBStoreItems.message);
     };
 
     fetchBankAccounts();
@@ -275,10 +125,11 @@ export default function Home() {
     stakingSource: IStakingSource,
     claimedResource: IClaimableResource
   ): boolean => {
-    // Known bug: If a Inventory is already selected, and then upgraded, claiming will be from old tier
+    const bankAccount = bankAccounts.find(
-    const bankAccount = getBankAccount(claimedResource.resourceType);
+      (obj) => obj["resourceType"]["name"] === claimedResource.resourceType.name
-    if (!bankAccount) return false;
+    );
 
+    if (!bankAccount) return false;
     decrementResourceWell(stakingSource, claimedResource);
     incrementBalance(bankAccount, claimedResource.balance);
 
@@ -323,10 +174,6 @@ export default function Home() {
 
   const getStoreItemConfiguration = () => {};
 
-  const getBankAccount = (resourceType: IResourceType) => {
-    return getObjectFromArray(bankAccounts, "resourceType", resourceType);
-  };
-
   const handleIncrementTier = (inventoryItem: IInventoryItem) => {
     console.log("Incrementing Tier");
     // Check user has balance

src/pages/api/user/[userId]/inventory-items.ts

@@ -12,13 +12,7 @@ export default function handler(req: NextApiRequest, res: NextApiResponse) {
       if (!user) return res.status(404).json({ message: "User not found" });
 
       // if user found query all inventory items attached to this user
-      const inventoryItems: IInventoryItem[] = [
+      const inventoryItems: IInventoryItem[] = [];
-        {
-          id: 123,
-          storeItem: "Example StoreItem",
-          currentTierIndex: 0,
-        },
-      ];
 
       //   if inventory items not found send empty array
       if (!inventoryItems) return res.status(200).json({ message: [] });

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

@@ -18,7 +18,18 @@ export default function handler(req: NextApiRequest, res: NextApiResponse) {
           name: "Selene's Eye",
           description:
             "Selene's Eye is a large and mysterious moon, named for its distinctive appearance - a bright, glowing eye that seems to stare out from the void of space",
-          resourceWells: "Example DBresourceWells",
+          resourceWells:[
+            {
+              id: 1,
+              resourceType: {
+                id: 1,
+                name: "Moonstone",
+                fontColorClass: "text-teal-400",
+                bgColorClass: "from-teal-800 to-teal-900",
+              },
+              supply: 10000,
+            }
+          ],
           inventoryItem: null,
         },
       ];