Update inventoryItems when buying and upgrading

config/game-config.json

@@ -96,6 +96,21 @@
     { "tier": 4, "price": 500, "claimBoost": 40 },
     { "tier": 5, "price": 600, "claimBoost": 50 }
   ]
+},
+{
+  "id": "item7",
+  "name": "Drill G",
+  "description": "This is drill G",
+  "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/ErrorPopover.tsx

@@ -1,45 +0,0 @@
-import React from "react";
-
-interface ErrorPopoverProps {
-  message: string;
-  onClose: () => void;
-}
-
-const ErrorPopover: React.FC<ErrorPopoverProps> = ({ message, onClose }) => {
-  return (
-    <div className="fixed bottom-2 right-2 flex items-center justify-center z-50">
-      <div className="bg-white border border-red-500 rounded shadow-lg p-6 max-w-md mx-auto">
-        <div className="flex items-center">
-          <div className="flex-shrink-0 text-red-500">
-            <i className="fas fa-exclamation-triangle"></i>
-          </div>
-          <div className="ml-3">
-            <h3 className="text-sm font-medium text-red-600">Error</h3>
-            <div className="mt-2 text-sm text-gray-700">{message}</div>
-          </div>
-          <button
-            onClick={onClose}
-            className="ml-auto bg-transparent border-none text-red-600 p-1 focus:outline-none"
-          >
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              fill="none"
-              viewBox="0 0 24 24"
-              strokeWidth={1.5}
-              stroke="currentColor"
-              className="w-6 h-6"
-            >
-              <path
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                d="M6 18L18 6M6 6l12 12"
-              />
-            </svg>
-          </button>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default ErrorPopover;

src/app/Components/InventoryItem.tsx

@@ -9,13 +9,12 @@ const InventoryItem = (props: {
   const getCurrentTier = (index: number) => {
     return props.inventoryItem.storeItem.upgrades[index].tier;
   };
-
   return (
     <CardLayout>
       <h3 className="text-xl font-bold mb-2">
         {props.inventoryItem.storeItem.name}{" "}
         <span className="bg-green-600 rounded-full px-2">
-          {props.inventoryItem.currentTierIndex}
+          {getCurrentTier(props.inventoryItem.currentTierIndex)}
         </span>
       </h3>
       <p className="text-sm">{props.inventoryItem.storeItem.description}</p>

src/app/Components/NotificationPopover.tsx

@@ -0,0 +1,45 @@
+import React from "react";
+
+import { NotificationPopoverProps } from "typings";
+import { notificationTypeToBg } from "@/utils/helpers";
+
+const NotificationPopover: React.FC<NotificationPopoverProps> = ({
+  notification,
+  onClose,
+}) => {
+  return (
+    <div
+      className={
+        "fixed bottom-2 right-2 flex items-start z-50 p-4 " +
+        notificationTypeToBg(notification.type)
+      }
+    >
+      <div className="flex">
+        <div className="ml-3">
+          <h3 className="text-2xl font-bold text-white">{notification.type}</h3>
+          <div className="mt-2 font-medium text-lg text-white">
+            {notification.message}
+          </div>
+        </div>
+        <button onClick={onClose} className="text-white h-0 mt-2">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            fill="none"
+            viewBox="0 0 24 24"
+            strokeWidth={2}
+            stroke="currentColor"
+            className="w-6 h-6"
+          >
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              d="M6 18L18 6M6 6l12 12"
+            />
+          </svg>
+        </button>
+      </div>
+    </div>
+  );
+};
+
+export default NotificationPopover;

src/app/page.tsx

@@ -6,9 +6,15 @@ import StakingSourcesView from "./Components/StakingSourcesView";
 import BankAccountsView from "./Components/BankAccountsView";
 import StoreItemView from "./Components/StoreItemView";
 import ResourceStore from "./Components/ResourceStore";
-import ErrorPopover from "./Components/ErrorPopover";
+import NotificationPopover from "./Components/NotificationPopover";
 import { gameConfig } from "@/utils/gameLogic";
-import { IInventoryItem, IStakingSource, IBankAccount, IStake } from "typings";
+import {
+  IInventoryItem,
+  IStakingSource,
+  IBankAccount,
+  IStake,
+  Notification,
+} from "typings";
 
 export default function Home() {
   const [inventoryItems, setInventoryItems] = useState<
@@ -21,10 +27,9 @@ export default function Home() {
   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 [notification, setNotification] = useState<Notification | null>(null);
+  const [notificationTime, setNotificationTime] = useState(3);
   const [storeItems, setStoreItems] = useState(gameConfig.store);
-  const [isLoading, setIsLoading] = useState(false);
 
   const isOwned = (storeItemId: string) => {
     if (inventoryItems) {
@@ -34,6 +39,19 @@ export default function Home() {
     }
   };
 
+  const fetchInventoryItems = async () => {
+    const response = await fetch(`/api/user/${userId}/inventory-items`);
+    const DBInventoryItems = await response.json();
+
+    for (const invItem of DBInventoryItems) {
+      invItem.storeItem = gameConfig.store.find(
+        (item) => item.id === invItem.storeItemId
+      );
+    }
+
+    setInventoryItems(DBInventoryItems);
+  };
+
   useEffect(() => {
     const fetchUser = async (wallet: string) => {
       const response = await fetch(`/api/user/login`, {
@@ -62,19 +80,6 @@ export default function Home() {
       setStakingSources(sources);
     };
 
-    const fetchInventoryItems = async () => {
-      const response = await fetch(`/api/user/${userId}/inventory-items`);
-      const DBInventoryItems = await response.json();
-
-      for (const invItem of DBInventoryItems) {
-        invItem.storeItem = gameConfig.store.find(
-          (item) => item.id === invItem.storeItemId
-        );
-      }
-
-      setInventoryItems(DBInventoryItems);
-    };
-
     const fetchStakes = async () => {
       const response = await fetch(`/api/user/${userId}/stakes`);
       const stakes = await response.json();
@@ -94,8 +99,6 @@ export default function Home() {
       fetchInventoryItems();
       fetchStakes();
     }
-
-    setIsLoading(!isLoading);
   }, [userId]);
 
   // Update data
@@ -111,21 +114,21 @@ export default function Home() {
 
   // Hide error automatically
   useEffect(() => {
-    if (error) {
+    if (notification) {
       const intervalId = setInterval(() => {
-        setErrorTime((prev) => prev - 1);
+        setNotificationTime((prev) => prev - 1);
       }, 1000);
-      if (errorTime === 0) {
-        setError(null);
+      if (notificationTime === 0) {
+        setNotification(null);
         clearInterval(intervalId);
-        setErrorTime(3);
+        setNotificationTime(3);
       }
 
       return () => {
         clearInterval(intervalId);
       };
     }
-  }, [error, errorTime]);
+  }, [notification, notificationTime]);
 
   const claimStake = async (stakingEventId: number) => {
     const response = await fetch(`/api/user/${userId}/stakes/claim`, {
@@ -172,7 +175,7 @@ export default function Home() {
 
       if (!response.ok) {
         const error = await response.text();
-        setError(new Error(error));
+        setNotification({ message: error, type: "Error" });
         return;
       }
 
@@ -181,12 +184,17 @@ export default function Home() {
       if (response.status == 200) {
         // Return success message
         console.log(data.message);
+        setNotification({
+          message: "Item has been purchased",
+          type: "Success",
+        });
+        fetchInventoryItems();
       }
     } catch (error) {
       if (error instanceof Error) {
-        setError(error);
+        setNotification({ message: error.message, type: "Error" });
       } else {
-        setError(new Error("An unknown error occurred."));
+        setNotification({ message: "An unknown error occured", type: "Error" });
       }
     }
   };
@@ -203,7 +211,7 @@ export default function Home() {
 
       if (!response.ok) {
         const error = await response.text();
-        setError(new Error(error));
+        setNotification({ message: error, type: "Error" });
         return;
       }
 
@@ -212,17 +220,19 @@ export default function Home() {
       if (response.status == 200) {
         // Return success message
         console.log(data);
+        setNotification({ message: "Item has been upgraded", type: "Success" });
+        fetchInventoryItems();
       }
 
       if (response.status == 400) {
         // return error message
-        setError(data.error);
+        setNotification({ message: data.error, type: "Error" });
       }
     } catch (error) {
       if (error instanceof Error) {
-        setError(error);
+        setNotification({ message: error.message, type: "Error" });
       } else {
-        setError(new Error("An unknown error occurred."));
+        setNotification({ message: "An unknown error occured", type: "Error" });
       }
     }
   };
@@ -237,20 +247,22 @@ export default function Home() {
   };
 
   const handleSetLightBox = () => {
-    console.log("Tester");
     setLightBoxIsActive(!lightBoxIsActive);
   };
 
-  const handleCloseError = () => {
-    setError(null);
+  const handleCloseNotification = () => {
+    setNotification(null);
   };
 
   if (!userId) return <p>Please login</p>;
-  console.log(inventoryItems);
+
   return (
     <>
-      {error && (
-        <ErrorPopover message={error.message} onClose={handleCloseError} />
+      {notification && (
+        <NotificationPopover
+          notification={notification}
+          onClose={handleCloseNotification}
+        />
       )}
       <BankAccountsView
         bankAccount={bankAccount}
@@ -282,3 +294,6 @@ export default function Home() {
     </>
   );
 }
+
+// Pass data from storeComponent to parentComponent
+// re-fetch data of inventory

src/utils/helpers.ts

@@ -44,6 +44,16 @@ export function resourceToFc(resourceName: string): string {
   return mapping[resourceName]
 }
 
+export function notificationTypeToBg(type: string): string {
+  
+  const mapping: IMapping = {
+    "Error": "bg-red-600",
+    "Success": "bg-green-600",
+  }
+
+  return mapping[type]
+}
+
 export const calculateRemainingTime = (startTime: string, durationInMins: number) => {
   const start = new Date(startTime);
   const end = new Date(start.getTime() + durationInMins * 60000);

typings.d.ts

@@ -81,6 +81,16 @@ export interface IConversionPair {
   moneyAmount: number
 }
 
+interface Notification {
+  message: string;
+  type: string;
+}
+
+interface NotificationPopoverProps {
+  notification: Notification;
+  onClose: () => void;
+}
+
 // Phantom
 export interface PhantomProvider {
   publicKey: PublicKey | null;