From 8bcbc5276b1cf88e9b169b45baf48da6ee6df275 Mon Sep 17 00:00:00 2001
From: Liam Arbuckle <liam@skinetics.tech>
Date: Mon, 8 Apr 2024 13:21:34 +0800
Subject: [PATCH] =?UTF-8?q?=EF=B8=8F=F0=9F=8C=88=F0=9F=99=8E=F0=9F=8F=BB?=
 =?UTF-8?q?=E2=80=8D=E2=99=82=EF=B8=8F=20=E2=86=9D=20[SGV2-17]:=20yarn=20s?=
 =?UTF-8?q?ux?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Content/Inventory/UserOwnedItems.tsx      | 61 +++++++++++--------
 package.json                                  |  2 +-
 2 files changed, 36 insertions(+), 27 deletions(-)

diff --git a/components/Content/Inventory/UserOwnedItems.tsx b/components/Content/Inventory/UserOwnedItems.tsx
index 03f06da7..befaa638 100644
--- a/components/Content/Inventory/UserOwnedItems.tsx
+++ b/components/Content/Inventory/UserOwnedItems.tsx
@@ -2,12 +2,19 @@ import React, { useState, useEffect } from "react";
 import { useSupabaseClient, useSession } from "@supabase/auth-helpers-react";
 import Link from "next/link";
 
+interface InventoryItem {
+  id: number;
+  name: string;
+  icon_url: string;
+  quantity: number;
+}
+
 const OwnedItemsList: React.FC = () => { 
     const supabase = useSupabaseClient();
     const session = useSession();
   
-    const [itemDetails, setItemDetails] = useState([]);
-  
+    const [itemDetails, setItemDetails] = useState<InventoryItem[]>([]); // Provide type InventoryItem[]
+
     useEffect(() => {
       const fetchOwnedItems = async () => {
         try {
@@ -95,9 +102,10 @@ interface InventoryItem {
 export const ItemsVerticalList: React.FC = () => {
   const session = useSession();
   const supabase = useSupabaseClient();
-  const [ownedItems, setOwnedItems] = useState([]);
-  const [itemDetails, setItemDetails] = useState([]);
+  const [ownedItems, setOwnedItems] = useState<InventoryItem[]>([]);
+  const [itemDetails, setItemDetails] = useState<InventoryItem[]>([]);  
   const [isLoading, setIsLoading] = useState(true); // Loading state
+  const userId = session?.user?.id;
 
   useEffect(() => {
     if (!session || !supabase) {
@@ -111,35 +119,36 @@ export const ItemsVerticalList: React.FC = () => {
 
         // Fetch owned items from the database
         const { data: ownedItemsData, error: ownedItemsError } = await supabase
-          .from("inventoryUSERS")
-          .select("*")
-          .eq("owner", userId)
-          .gt("id", 20)
-          .limit(6)
-          .order("id", { ascending: false });
+            .from("inventoryUSERS")
+            .select("*")
+            .eq("owner", userId)
+            .gt("id", 20)
+            .limit(6)
+            .order("id", { ascending: false });
 
         if (ownedItemsError) {
-          throw ownedItemsError;
+            throw ownedItemsError;
         }
 
         if (ownedItemsData) {
-          setOwnedItems(ownedItemsData);
+            setOwnedItems(ownedItemsData);
 
-          // Extract item IDs from owned items
-          const itemIds = ownedItemsData.map(item => item.item);
+            // Extract item IDs from owned items
+            const itemIds = ownedItemsData.map(item => item.item);
 
-          // Fetch details of owned items based on item IDs
-          const { data: itemDetailsData, error: itemDetailsError } = await supabase
-            .from("inventoryITEMS")
-            .select("*")
-            .in("id", itemIds);
+            // Fetch details of owned items based on item IDs
+            const { data: itemDetailsData, error: itemDetailsError } = await supabase
+                .from("inventoryITEMS")
+                .select("*")
+                .in("id", itemIds);
 
-          if (itemDetailsError) {
-            throw itemDetailsError;
-          }
+            if (itemDetailsError) {
+                throw itemDetailsError;
+            }
 
-          setItemDetails(itemDetailsData);
-        }
+            if (itemDetailsData) {
+                setItemDetails(itemDetailsData);
+            }}
       } catch (error) {
         console.error("Error fetching owned items and details:", error);
       } finally {
@@ -186,8 +195,8 @@ export const SectorStructureOwned: React.FC<{ sectorid: string }> = ({ sectorid
     const supabase = useSupabaseClient();
     const session = useSession();
     
-    const [ownedItems, setOwnedItems] = useState([]);
-    const [itemDetails, setItemDetails] = useState([]);
+    const [ownedItems, setOwnedItems] = useState<InventoryItem[]>([]);
+    const [itemDetails, setItemDetails] = useState<InventoryItem[]>([]);
     // Add support for moving items/entities between planets
 
     useEffect(() => {
diff --git a/package.json b/package.json
index c23092a0..279fcb9d 100644
--- a/package.json
+++ b/package.json
@@ -56,7 +56,7 @@
     "daisyui": "^4.7.2",
     "framer-motion": "^11.1.2",
     "lucide-react": "^0.293.0",
-    "next": "^14.2.1",
+    "next": "13.0.2",
     "next-pwa": "^5.6.0",
     "package.json": "^2.0.1",
     "postcss": "^8.4.21",