️🫙🕍 ↝ [SGV2-16]: I think I've done all the basePlanets blocks/components

Signal-K · Apr 19, 2024 · 1b5564f · 1b5564f
1 parent 7a05fee
commit 1b5564f
Show file tree

Hide file tree

Showing 3 changed files with 87 additions and 5 deletions.
diff --git a/components/_Core/Section/BentoBox.tsx b/components/_Core/Section/BentoBox.tsx
@@ -4,7 +4,7 @@ import { RocketIcon } from "lucide-react";
 import { BentoGrid, BentoGridTest } from "../ui/bento-grid";
 import { InventoryOneList, InventoryTwoList, OwnedStructuresFullList } from "../../_Skeleton/InventoryBlocks";
 import { ClassificationForPlanetFormBlock } from "../../_Skeleton/ClassificationBlocks";
-import { ContentPlaceholderBlockTest, PlanetStatBlock } from "../../_Skeleton/PlanetDataBlocks";
+import { ContentPlaceholderBlockTest, PlanetStatBlock, SectorsInsidePlanetBlock } from "../../_Skeleton/PlanetDataBlocks";
 
 export default function BlockGrid() {
     return (
@@ -124,6 +124,17 @@ const items = [
         header: <ClassificationForPlanetFormBlock />,
         className: "md:col-span-2 row-span-1"
     },
+    {
+        title: "All sectors that you own",
+        description: (
+            <span className="text-sm">
+                No discriminator for a specific anomaly/planet
+            </span>
+        ),
+        icon: RocketIcon,
+        header: <SectorsInsidePlanetBlock />,
+        className: "md:col-span-2 row-span-1"
+    },
     {
         title: "Data/stat display for an anomaly ",
         description: (

diff --git a/components/_Skeleton/InventoryBlocks.tsx b/components/_Skeleton/InventoryBlocks.tsx
@@ -67,9 +67,9 @@ const SectorStructureOwnedAllSectorsOneUser: React.FC<{}> = () => {
                 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>
+                    {/* <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">On sector (id): {ownedItem?.sector}</p>
                 </li>

diff --git a/components/_Skeleton/PlanetDataBlocks.tsx b/components/_Skeleton/PlanetDataBlocks.tsx
@@ -1,6 +1,7 @@
-import { useSupabaseClient } from "@supabase/auth-helpers-react";
+import { useSession, useSupabaseClient } from "@supabase/auth-helpers-react";
 import ContentPlaceholder from "../Content/Planets/PlanetData/ContentPlaceholder"
 import { useEffect, useState } from "react";
+import Link from "next/link";
 
 export const ContentPlaceholderBlockTest = () => {
     return (
@@ -79,4 +80,74 @@ export const PlanetStatBlock = () => {
           </div>
         </div>
     );
+};
+
+export const SectorsInsidePlanetBlock = () => {
+    const supabase = useSupabaseClient();
+    const session = useSession();
+
+    const planetId = "2";
+    const userId = session?.user?.id;
+    const [sectors, setSectors] = useState([]);
+
+    useEffect(() => {
+        fetchSectorsForPlanet();
+    }, [planetId, session])
+
+    async function fetchSectorsForPlanet() {
+        try {
+            const { data, error } = await supabase
+                .from("basePlanetSectors")
+                .select('*')
+                // .eq('anomaly', planetId) // This will show all your sectors by default
+                .eq('owner', userId);
+
+            if (error) {
+                console.assert('Error fetching sectors data: ', error.message);
+                return;
+            };
+
+            setSectors(data);
+
+            } catch (error) {
+              console.error(error);
+            };
+        };
+
+    return (
+        <><div className="grid-container mb-24">
+              {sectors.map((sector) => (
+                <Link legacyBehavior key={sector.id} href={`/planets/sector/${sector.id}`}>
+                <a className="sector-link">
+                    <div className="sector-square">
+                    {/* {sector.coverUrl && (
+                        <img src={sector.coverUrl} alt="Sector Cover" className="sector-cover" />
+                    )} */}
+                    </div>
+                </a>
+                </Link>
+            ))}
+        </div>
+        <style jsx>{`
+        .grid-container {
+          display: grid;
+          grid-template-columns: repeat(5, 1fr);
+          grid-auto-rows: 1fr;
+          gap: 10px;
+          margin-top: 20px;
+          position: absolute;
+          bottom: 20px;
+          left: 50%;
+          transform: translateX(-50%);
+          z-index: 1;
+        }
+
+        .sector-square {
+          width: 100px;
+          height: 100px;
+          border: 1px solid white;
+        }
+      `}</style>
+        </>
+    );
 };