🤑👟 ↝ [SGV2-18 SGV2-16]: Block that will show sector/planet inventory collectively (prev commit SGV2-18)

Author: Gizmotronn

components/_Core/Section/BentoBox.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import { cn } from "../../../lib/uitls";
 import { RocketIcon } from "lucide-react";
 import { BentoGrid, BentoGridTest } from "../ui/bento-grid";
-import { InventoryOneList, InventoryTwoList, OwnedStructuresFullList } from "../../_Skeleton/InventoryBlocks";
+import { InventoryOneList, InventoryTwoList, OwnedStructuresFullList, StructuresAndItemsComponent } from "../../_Skeleton/InventoryBlocks";
 import { ClassificationForPlanetFormBlock } from "../../_Skeleton/ClassificationBlocks";
 import { ContentPlaceholderBlockTest, PlanetStatBlock, SectorsInsidePlanetBlock, StructuresOnPlanetBlock } from "../../_Skeleton/PlanetDataBlocks";
 import { AddResourceToInventoryBlock, SectorRoverImageClassificationBlock } from "../../_Skeleton/SectorDataBlocks";
@@ -207,6 +207,17 @@ const items = [
         header: <CreateStructureBlock />,
         className: "md:col-span-1 row-span-1"
     },
+    {
+        title: "Get a list of structures/items across a specific planet and all sectors relative",
+        description: (
+            <span className="text-sm">
+                It should result in a single react component that you input a planet id and a structure id, click a button, and it then responds with a text element with that context
+            </span>
+        ),
+        icon: RocketIcon,
+        header: <StructuresAndItemsComponent />,
+        className: "md:col-span-1 row-span-1"
+    },
     {
         title: "Data/stat display for an anomaly ",
         description: (

components/_Skeleton/InventoryBlocks.tsx

@@ -110,4 +110,105 @@ export const OwnedStructuresFullList = () => {
         // <SectorStructureOwned sectorid="18" />
         <SectorStructureOwnedAllSectorsOneUser />
     );
-};
+};
+
+interface StructureItem {
+    id: bigint;
+    name: string;
+    description: string;
+    // Add more properties as needed
+}
+
+interface SectorItem {
+    id: bigint;
+    // Add more properties as needed
+}
+
+interface PlanetData {
+    id: bigint;
+    // Add more properties as needed
+}
+
+interface PlanetStructuresAndItems {
+    planetStructures: StructureItem[];
+    planetItems: StructureItem[];
+    sectorStructures: StructureItem[];
+    sectorItems: StructureItem[];
+}
+
+export const StructuresAndItemsComponent: React.FC = () => {
+    const supabase = useSupabaseClient();
+    let [planetId, setPlanetId] = useState<string | null>(null);
+    let [sectorId, setSectorId] = useState<string | null>(null);
+    const [structuresAndItems, setStructuresAndItems] = useState<PlanetStructuresAndItems | null>(null);
+
+    const fetchStructuresAndItems = async () => {
+        try {
+            if (!planetId) {
+                throw new Error("Please provide a planetId");
+            }
+
+            const fetchedStructuresAndItems: PlanetStructuresAndItems = {
+                planetStructures: [],
+                planetItems: [],
+                sectorStructures: [],
+                sectorItems: [],
+            };
+
+            if (sectorId) {
+                const { data: sectorData, error: sectorError } = await supabase
+                    .from("basePlanetSectors")
+                    .select("anomaly")
+                    .eq("id", sectorId)
+                    .single();
+
+                if (sectorError || !sectorData) {
+                    throw new Error("Error fetching sector data");
+                }
+
+                planetId = sectorData.anomaly.toString();
+            }
+
+            const { data: planetData, error: planetError } = await supabase
+                .from("basePlanets")
+                .select("*")
+                .eq("id", Number(planetId))
+                .single();
+
+            if (planetError) {
+                throw new Error("Error fetching planet data");
+            }
+
+            setStructuresAndItems(fetchedStructuresAndItems);
+        } catch (error) {
+            console.error("Error fetching structures and items:", error);
+        }
+    };
+
+    const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
+        event.preventDefault();
+        fetchStructuresAndItems();
+    };
+
+    // Render the form to input planetId and sectorId
+    return (
+        <form onSubmit={handleSubmit}>
+            <label>
+                Planet ID:
+                <input type="number" value={planetId ?? ''} onChange={(e) => setPlanetId(e.target.value)} />
+            </label>
+            <label>
+                Sector ID:
+                <input type="number" value={sectorId ?? ''} onChange={(e) => setSectorId(e.target.value)} />
+            </label>
+            <button type="submit">Fetch Structures and Items</button>
+
+            {/* Render the structures and items data */}
+            {structuresAndItems && (
+                <div>
+                    {/* Render structures and items here */}
+                </div>
+            )}
+        </form>
+    );
+};