📒🏹 ↝ You can now view the list of planets that you own

components/Content/Inventory/UserOwnedItems.tsx

@@ -0,0 +1,82 @@
+import React, { useState, useEffect } from "react";
+import { useSupabaseClient, useSession } from "@supabase/auth-helpers-react";
+
+const OwnedItemsList: React.FC = () => {
+    const supabase = useSupabaseClient();
+    const session = useSession();
+
+    const [ownedItems, setOwnedItems] = useState([]);
+    const [itemDetails, setItemDetails] = useState([]);
+    // Add support for moving items/entities between planets
+
+    useEffect(() => {
+        async function fetchOwnedItems() {
+            if (session) {
+                try {
+                const user = session.user.id;
+                const { data: ownedItemsData, error: ownedItemsError } = await supabase
+                    .from('inventoryUSERS')
+                    .select('*')
+                    .eq('owner', user);
+
+                if (ownedItemsError) {
+                    throw ownedItemsError;
+                }
+
+                if (ownedItemsData) {
+                    setOwnedItems(ownedItemsData);
+                }
+            } catch (error) {
+                    console.error('Error fetching owned items:', error);
+                }
+            }
+        }
+
+        fetchOwnedItems();
+    }, [session]);
+
+    useEffect(() => {
+        async function fetchItemDetails() {
+            if (ownedItems.length > 0) {
+                const itemIds = ownedItems.map(item => item.item);
+                const { data: itemDetailsData, error: itemDetailsError } = await supabase
+                    .from('inventoryITEMS')
+                    .select('*')
+                    .in('id', itemIds);
+
+            if (itemDetailsError) {
+                console.error('Error fetching item details:', itemDetailsError);
+            }
+
+            if (itemDetailsData) {
+                setItemDetails(itemDetailsData);
+            }
+          }
+        }
+
+        fetchItemDetails();
+    }, [ownedItems]);
+
+    return (
+        <div className="bg-gray-100 p-4">
+            <h2 className="text-2xl font-semibold mb-4">Your Items</h2>
+            <ul className="grid gap-4 grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5">
+            {itemDetails.map(item => {
+                const ownedItem = ownedItems.find(ownedItem => ownedItem.item === item.id);
+                return (
+                <li key={item.id} className="bg-white shadow-md p-4 rounded-md">
+                    <h3 className="text-lg font-medium mb-2">{item.name}</h3>
+                    <div className="mb-2">
+                    <img src={item.icon_url} alt={item.name} className="w-full h-auto" />
+                    </div>
+                    <p className="text-gray-600">Quantity: {ownedItem?.quantity}</p>
+                    <p className="text-gray-600">Location: {ownedItem?.location}</p>
+                </li>
+                );
+            })}
+        </ul>
+      </div>
+    )
+}
+
+export default OwnedItemsList;

components/Content/Planets/UserOwnedPlanets.tsx

@@ -0,0 +1,93 @@
+import React, { useState, useEffect } from "react";
+import { useSupabaseClient, useSession } from "@supabase/auth-helpers-react";
+import Link from "next/link";
+
+interface OwnedPlanet {
+    id: number;
+    planet_id: number;
+};
+
+interface Planet {
+    id: number;
+    name: string;
+    avatar_url: string;
+};
+
+const OwnedPlanetsList: React.FC = () => {
+    const supabase = useSupabaseClient();
+    const session = useSession();
+
+    const [ownedPlanets, setOwnedPlanets] = useState([]);
+    const [planetDetails, setPlanetDetails] = useState([]);
+
+    useEffect(() => {
+        async function fetchOwnedPlanets() {
+            if (session) {
+                try {
+                    const user = session?.user?.id;
+                    const { data, error } = await supabase
+                        .from("inventoryPLANETS")
+                        .select("*")
+                        .eq("owner_id", user)
+
+                    if (error) {
+                        throw error;
+                    };
+
+                    if (data) {
+                        setOwnedPlanets(data);
+                    }
+                } catch (error) {
+                    console.error("Error fetching owned planets: ", error);
+                };
+            }
+        }
+
+        fetchOwnedPlanets();
+    }, [session]);
+
+    useEffect(() => {
+        async function fetchPlanetDetails() {
+            if (ownedPlanets.length > 0) {
+                const planetIds = ownedPlanets.map(planet => planet.planet_id);
+                const { data, error } = await supabase
+                    .from("planetsss")
+                    .select("*")
+                    .in("id", planetIds);
+
+                if (error) {
+                    console.error("Error fetching planet details: ", error);
+                }
+
+                if (data) {
+                    setPlanetDetails(data);
+                }
+            }
+        }
+
+        fetchPlanetDetails();
+    }, [ownedPlanets]);
+
+    return (
+        <>
+          <div className="bg-gray-100 p-4">
+            <h2 className="text-2xl font-semibold mb-4">Your Planets</h2>
+            <ul className="grid gap-4 grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5">
+              {planetDetails.map((planet, index) => (
+                <Link legacyBehavior href={`https://play.skinetics.tech/tests/planets/${planet.id}`}>
+                <li key={planet.id} className="bg-white shadow-md p-4 rounded-md">
+                  <h3 className="text-lg font-medium mb-2">{planet.content}</h3>
+                  <div className="mb-2">
+                    <img src={planet.cover} alt={planet.content} className="w-full h-auto" />
+                  </div>
+                  {/* Add additional planet details here */}
+                </li></Link>
+              ))}
+            </ul>
+          </div>
+          <br />
+        </>
+      );
+}
+
+export default OwnedPlanetsList;

components/Core/BottomBar.tsx

@@ -14,7 +14,7 @@ const bottombarLinks = [
   },
   {
     imgURL: "/eagle.svg",
-    route: "/planets/68",
+    route: "/explore",
     label: "Explore",
   },
   {

pages/explore.tsx

@@ -0,0 +1,17 @@
+import React from "react";
+import { useSession, useSupabaseClient } from "@supabase/auth-helpers-react";
+import Layout from "../components/Section/Layout";
+import OwnedPlanetsList from "../components/Content/Planets/UserOwnedPlanets";
+import OwnedItemsList from "../components/Content/Inventory/UserOwnedItems";
+
+export default function Explore() {
+    const supabase = useSupabaseClient();
+    const session = useSession();
+
+    return (
+        <Layout>
+            <OwnedPlanetsList />
+            <OwnedItemsList />
+        </Layout>
+    )
+}