Updates to StoreItemView

config/game-config.json

@@ -51,6 +51,51 @@
           { "tier": 4, "price": 500, "claimBoost": 40 },
           { "tier": 5, "price": 600, "claimBoost": 50 }
         ]
-    }
+    },
+    {
+      "id": "item4",
+      "name": "Drill D",
+      "description": "This is drill D",
+      "price": 250,
+      "claimAmount": 50,
+      "completionTimeInMins": 5,
+      "upgrades": [
+        { "tier": 1, "price": 200, "claimBoost": 10 },
+        { "tier": 2, "price": 300, "claimBoost": 20 },
+        { "tier": 3, "price": 400, "claimBoost": 30 },
+        { "tier": 4, "price": 500, "claimBoost": 40 },
+        { "tier": 5, "price": 600, "claimBoost": 50 }
+      ]
+  },
+  {
+    "id": "item5",
+    "name": "Drill E",
+    "description": "This is drill E",
+    "price": 250,
+    "claimAmount": 50,
+    "completionTimeInMins": 5,
+    "upgrades": [
+      { "tier": 1, "price": 200, "claimBoost": 10 },
+      { "tier": 2, "price": 300, "claimBoost": 20 },
+      { "tier": 3, "price": 400, "claimBoost": 30 },
+      { "tier": 4, "price": 500, "claimBoost": 40 },
+      { "tier": 5, "price": 600, "claimBoost": 50 }
+    ]
+},
+{
+  "id": "item6",
+  "name": "Drill F",
+  "description": "This is drill F",
+  "price": 250,
+  "claimAmount": 50,
+  "completionTimeInMins": 5,
+  "upgrades": [
+    { "tier": 1, "price": 200, "claimBoost": 10 },
+    { "tier": 2, "price": 300, "claimBoost": 20 },
+    { "tier": 3, "price": 400, "claimBoost": 30 },
+    { "tier": 4, "price": 500, "claimBoost": 40 },
+    { "tier": 5, "price": 600, "claimBoost": 50 }
+  ]
+}
   ]
 }

src/app/Components/StoreItem.tsx

@@ -6,13 +6,12 @@ import CommonCardLayout from "../Layouts/CommonCardLayout";
 const StoreItem = (props: {
   storeItem: IStoreItem;
   buyStoreItem: (itemId: string) => void;
-  owned: boolean | undefined;
 }) => {
   return (
     <CommonCardLayout>
       <div className="flex gap-4">
         <div className="flex-1">
-          {props.owned ? (
+          {props.storeItem.isOwned ? (
             <span className="text-green-600 font-bold">Owned</span>
           ) : (
             ""
@@ -41,7 +40,7 @@ const StoreItem = (props: {
           </table>
         </div>
         <div className="flex items-center h-100">
-          {props.owned ? (
+          {props.storeItem.isOwned ? (
             <button className="bg-slate-400 text-slate-600 px-4 py-2 rounded-lg font-bold w-28 text-center cursor-not-allowed">
               Owned
             </button>

src/app/Components/StoreItemView.tsx

@@ -3,34 +3,21 @@ import { IInventoryItem, IStoreItem } from "typings";
 import StoreItem from "./StoreItem";
 
 const StoreItemView = (props: {
-  storeItems: IStoreItem[] | null;
   inventoryItems: IInventoryItem[] | null | undefined;
+  storeItems: IStoreItem[];
   buyStoreItem: (itemId: string) => void;
 }) => {
-  const isOwned = (storeItemId: string) => {
-    return props.inventoryItems?.some(
-      (item) => item.storeItem.id == storeItemId
-    );
-  };
-
-  const storeItemsToRender = props.storeItems?.map((storeItem) => {
-    return {
-      ...storeItem,
-      owned: isOwned(storeItem.id),
-    };
-  });
   return (
     <div className="bg-slate-800 p-4 rounded-lg">
       <h2 className="text-2xl font-bold mb-4 text-white">Store</h2>
-      {storeItemsToRender &&
+      {props.storeItems &&
-        storeItemsToRender
+        props.storeItems
-          .sort((a, b) => (a.owned === b.owned ? 0 : a.owned ? 1 : -1))
+          .sort((a, b) => (a.isOwned === b.isOwned ? 0 : a.isOwned ? 1 : -1))
           .map((storeItem, id) => (
             <StoreItem
               key={id}
               storeItem={storeItem}
               buyStoreItem={props.buyStoreItem}
-              owned={storeItem.owned}
             />
           ))}
     </div>

src/app/page.tsx

@@ -8,13 +8,7 @@ import StoreItemView from "./Components/StoreItemView";
 import ResourceStore from "./Components/ResourceStore";
 import ErrorPopover from "./Components/ErrorPopover";
 import { gameConfig } from "@/utils/gameLogic";
-import {
+import { IInventoryItem, IStakingSource, IBankAccount, IStake } from "typings";
-  IStoreItem,
-  IInventoryItem,
-  IStakingSource,
-  IBankAccount,
-  IStake,
-} from "typings";
 
 export default function Home() {
   const [inventoryItems, setInventoryItems] = useState<
@@ -24,30 +18,21 @@ export default function Home() {
     []
   );
   const [bankAccount, setBankAccount] = useState<IBankAccount>();
-  const [storeItems, setStoreItems] = useState<IStoreItem[]>([]);
   const [userStakes, setUserStakes] = useState<IStake[]>([]);
   const [lightBoxIsActive, setLightBoxIsActive] = useState(false);
   const [userId, setUserId] = useState<number | null>(null);
   const [error, setError] = useState<Error | null>(null);
   const [errorTime, setErrorTime] = useState(3);
+  const [storeItems, setStoreItems] = useState(gameConfig.store);
+  const [isLoading, setIsLoading] = useState(false);
 
-  // EMIL
+  const isOwned = (storeItemId: string) => {
-  // It should be possible to add infinite drills on each resource (however many the user has)
+    if (inventoryItems) {
-
+      return inventoryItems?.some((item) => item.storeItem.id == storeItemId);
-  // JOE
+    } else {
-  // Transaction table
+      return false;
-  // Add dev buttons to prototype
+    }
-
+  };
-  // DONE POST /user/login check if user exists
-  // DONE GET /user/USER_ID/stakes get stake event
-  // DONE POST /user/USER_ID/stakes/claim claim stake
-  // DONE POST /user/USER_ID/stakes/start start stake
-  // DONE GET /user/USER_ID/bank-account get balance
-  // DONE PUT /user/USER_ID/bank-account sell resource
-  // DONE GET /user/USER_ID/inventory-items get inventory items
-  // DONE POST /user/USER_ID/inventory-items buy item
-  // DONE GET /user/USER_ID/staking-sources get staking sources
-  // DONE POST /user/USER_ID/staking-sources create staking source
 
   useEffect(() => {
     const fetchUser = async (wallet: string) => {
@@ -104,14 +89,26 @@ export default function Home() {
     fetchUser("abcdefg"); // Public key goes here
     // Nico is there a better way of checking if a user is logged in?
     if (userId) {
-      setStoreItems(gameConfig.store);
       fetchBankAccount();
       fetchStakingSources();
       fetchInventoryItems();
       fetchStakes();
     }
+
+    setIsLoading(!isLoading);
   }, [userId]);
 
+  // Update data
+  useEffect(() => {
+    const updatedStoreItems = storeItems.map((storeItem) => {
+      return {
+        ...storeItem,
+        isOwned: isOwned(storeItem.id),
+      };
+    });
+    updatedStoreItems && setStoreItems(updatedStoreItems);
+  }, [inventoryItems]);
+
   // Hide error automatically
   useEffect(() => {
     if (error) {
@@ -214,7 +211,7 @@ export default function Home() {
 
       if (response.status == 200) {
         // Return success message
-        console.log(data.message);
+        console.log(data);
       }
 
       if (response.status == 400) {
@@ -249,7 +246,7 @@ export default function Home() {
   };
 
   if (!userId) return <p>Please login</p>;
-
+  console.log(inventoryItems);
   return (
     <>
       {error && (
@@ -277,8 +274,8 @@ export default function Home() {
           upgradeInventoryItem={upgradeInventoryItem}
         />
         <StoreItemView
-          storeItems={storeItems}
           inventoryItems={inventoryItems}
+          storeItems={storeItems}
           buyStoreItem={buyStoreItem}
         />
       </div>

typings.d.ts

@@ -54,6 +54,7 @@ export interface IStoreItem {
     price: number;
     claimBoost: number;
   }[];
+  isOwned: boolean;
 }
 
 export interface IResourceAccount {