🫚🚂 ↝ dynamic routing setup for individual sectors

components/Content/Planets/Activities/SectorSetup.tsx

@@ -92,4 +92,20 @@ export function UserOwnedSectorGrid() {
 
         fetchUserSectorImages();
     }, [session, supabase]);
-}
+
+    return (
+        <div className="grid grid-cols-4 gap-2 p-4">
+            {imageUrls.map((imageUrl, index) => (
+                <div
+                    key={index}
+                    className="relative overflow-hidden bg-center bg-cover"
+                    style={{
+                        backgroundImage: `url(${imageUrl})`,
+                        paddingBottom: '100%',
+                        backgroundPosition: `-${(index % 4) * 25}% -${Math.floor(index / 4) * 25}%`,
+                    }}
+                ></div>
+            ))}
+        </div>
+    );
+};

components/Content/Planets/Base/IndividualBasePlanet.tsx

@@ -299,14 +299,14 @@ export function IndividualBasePlanetDesktop({ id }: { id: string }) {
 
         if (data) {
           setPlanetData(data);
-        }
+        };
 
         if (error) {
           throw error;
-        }
+        };
       } catch (error: any) {
         console.error(error.message);
-      }
+      };
     };
 
     async function fetchPostsForPlanet(planetId) {

components/Content/Planets/Base/IndividualBasePlanetSector.tsx

@@ -0,0 +1,41 @@
+import { useSession, useSupabaseClient } from "@supabase/auth-helpers-react";
+import { useRouter } from "next/router";
+import React, { useState } from "react";
+
+export default function BasePlanetSector({ id }: { id: string }) {
+    const router = useRouter();
+    const { id: sectorId } = router.query;
+
+    const supabase = useSupabaseClient();
+    const session = useSession();
+
+    const [sectorData, setSectorData] = useState(null)
+
+    const getSectorData = async () => {
+        try {
+            const { data, error } = await supabase
+                .from('basePlanetSectors')
+                .select('*')
+                .eq('id', sectorId)
+                .single();
+
+            if (data) {
+                setSectorData(data);
+            };
+
+            if (error) {
+                throw error;
+            };
+        } catch (error: any) {
+            console.error(error.message);
+        };
+    };
+
+    // I think that sectors will have posts attributed to them via contentPLANETSECTORS -> following the IndividualBasePlanet.tsx fetch functions
+
+    if (!sectorData) {
+        return (
+            <div>Loading...</div>
+        );
+    };
+}

pages/gather/index.tsx

@@ -3,7 +3,7 @@ import { Auth, ThemeSupa } from "@supabase/auth-ui-react";
 import React from "react";
 import Layout from "../../components/Section/Layout";
 import { ImageGrid, ImagesGrid } from "../../components/Content/Planets/Base/SectorGrid";
-import CreateBasePlanetSector from "../../components/Content/Planets/Activities/SectorSetup";
+import CreateBasePlanetSector, { UserOwnedSectorGrid } from "../../components/Content/Planets/Activities/SectorSetup";
 
 export default function GatherResourcesPage() {
     const supabase = useSupabaseClient();
@@ -33,7 +33,9 @@ export default function GatherResourcesPage() {
                 <pre>You've currently got one planet in your inventory (as we're only exploring base planets for now). Here's the latest rover image set.</pre>
                 <h2 className="text-center text-slate-300 text-opacity-100 font-['Inter'] tracking-[3.48px] mt-2 mb-4 text-4xl font-extrabold leading-none tracking-tight text-gray-900 md:text-5xl lg:text-6xl dark:text-white text-gray-400">Your owned sectors (of planet)</h2>
                 <CreateBasePlanetSector />
+                <UserOwnedSectorGrid />
                 {/* <ImageGrid imageUrl='https://mars.nasa.gov/mars2020-raw-images/pub/ods/surface/sol/00116/ids/edr/browse/ncam/NLF_0116_0677245872_058ECM_N0041250NCAM02116_01_195J01_1200.jpg' /> */}
+                <h2 className="text-center text-slate-300 text-opacity-100 font-['Inter'] tracking-[3.48px] mt-2 mb-4 text-4xl font-extrabold leading-none tracking-tight text-gray-900 md:text-5xl lg:text-6xl dark:text-white text-gray-400">All sectors</h2>
                 <ImagesGrid imageUrls={sectorImageUrls} />
             </div>
         </Layout>

pages/planets/sectors/[id].tsx

@@ -0,0 +1,33 @@
+import React, { useEffect, useState } from "react";
+import { useRouter } from "next/router";
+import Layout from "../../../components/Section/Layout";
+
+export default function SectorPage () {
+    const router = useRouter();
+    const { id } = router.query;
+
+    const [isMobile, setIsMobile] = useState(false);
+
+    useEffect(() => {
+        if (typeof window !== "undefined") {
+            const checkIsMobile = () => {
+                setIsMobile(window.innerWidth <= 768);
+            };
+            checkIsMobile();
+            window.addEventListener("resize", checkIsMobile);
+            return () => {
+                window.removeEventListener("resize", checkIsMobile);
+            };
+        }
+    }, []);
+
+    if (!id) {
+        return null;
+    };
+
+    return (
+        <Layout>
+            <div></div>
+        </Layout>
+    );
+};