🛣️🍞 ↝ [SGV2-10]: Will I find the orchid?

components/Content/Populate/StructureCreate.tsx

@@ -31,7 +31,7 @@ interface StructureSelectionProps {
     planetSectorId: number;
 };
 
-const StructureSelection: React.FC<StructureSelectionProps> = ({ onStructureSelected, planetSectorId }) => {
+export const StructureSelection: React.FC<StructureSelectionProps> = ({ onStructureSelected, planetSectorId }) => {
     const supabase = useSupabaseClient();
     const session = useSession();
 

components/_Core/Section/BentoBox.tsx

@@ -7,6 +7,8 @@ import { ClassificationForPlanetFormBlock } from "../../_Skeleton/Classification
 import { ContentPlaceholderBlockTest, PlanetStatBlock, SectorsInsidePlanetBlock, StructuresOnPlanetBlock } from "../../_Skeleton/PlanetDataBlocks";
 import { AddResourceToInventoryBlock, SectorRoverImageClassificationBlock } from "../../_Skeleton/SectorDataBlocks";
 import { LightcurveBaseGraph } from "../../_Skeleton/ClassificationDataBlocks";
+import { ItemListFromFlaskBlock } from "../../_Skeleton/ItemBlocks";
+import { CreateStructureBlock } from "../../_Skeleton/StructureBlocks";
 
 export default function BlockGrid() {
     return (
@@ -183,6 +185,28 @@ const items = [
         header: <LightcurveBaseGraph />,
         className: "md:col-span-1 row-span-1"
     },
+    {
+        title: "Get a list of all items in the database/crafting recipes via the API (not currently functional)",
+        description: (
+            <span className="text-sm">
+                Currently not working as it is assuming flask is running locally
+            </span>
+        ),
+        icon: RocketIcon,
+        header: <ItemListFromFlaskBlock />,
+        className: "md:col-span-1 row-span-1"
+    },
+    {
+        title: "Create a structure via flask on a specific sector, which checks the crafting & other requirements/performs specific [population] actions (not currently functional)",
+        description: (
+            <span className="text-sm">
+                Currently not working as the flask link has become deprecated
+            </span>
+        ),
+        icon: RocketIcon,
+        header: <CreateStructureBlock />,
+        className: "md:col-span-1 row-span-1"
+    },
     {
         title: "Data/stat display for an anomaly ",
         description: (

components/_Skeleton/ItemBlocks.tsx

@@ -0,0 +1,23 @@
+import { useEffect } from "react";
+import axios from "axios";
+
+export const ItemListFromFlaskBlock = () => {
+    useEffect(() => {
+        const fetchItems = async () => {
+          try {
+            const response = await axios.get('http://127.0.0.1:5000/items');
+            console.log('Items:', response.data);
+          } catch (error) {
+            console.error('Error fetching items:', error.message);
+          }
+        };
+
+        fetchItems();
+      }, []);
+
+      return (
+        <div>
+          Fetching items...
+        </div>
+      );
+};

components/_Skeleton/StructureBlocks.tsx

@@ -0,0 +1,131 @@
+import { useSession, useSupabaseClient } from "@supabase/auth-helpers-react";
+import { useEffect, useState } from "react";
+import StructureComponent from "../Content/Populate/StructureCreate";
+
+interface Structure {
+    id: number;
+    name: string;
+    description: string;
+    icon_url: string;
+  };
+
+  interface PlacedStructure extends Structure {
+    present: boolean;
+  };
+
+  interface PlanetData {
+    anomaly: any[]; // Update the type of 'anomaly' as needed
+    lightkurve: any;
+  };
+
+  interface CraftStructurePayload {
+    user_id: string;
+    sector_id: number;
+    structure_id: number;
+  };
+
+  interface StructureSelectionProps {
+      onStructureSelected: (structure: Structure) => void;
+      planetSectorId: number;
+  };
+
+const CreateStructureBlockBackbone = () => {
+    const supabase = useSupabaseClient();
+    const session = useSession();
+
+    const [structures, setStructures] = useState<Structure[]>([]);
+    const [isCalloutOpen, setIsCalloutOpen] = useState(false);
+    const planetSectorId = 18;
+
+    const fetchStructures = async () => {
+        try {
+            const { data, error } = await supabase
+                .from('inventoryITEMS')
+                .select('id, name, description, icon_url')
+                .eq('ItemCategory', 'Structure');
+
+            if (data) {
+                setStructures(data);
+            }
+
+            if (error) {
+                console.error(error.message);
+            }
+        } catch (error) {
+            console.error(error.message);
+        }
+    };
+
+    useEffect(() => {
+        fetchStructures();
+    }, [supabase]);
+
+    const handleStructureClick = async (structure: Structure) => {
+        try {
+          const payload = JSON.stringify({
+            user_id: session?.user?.id,
+            sector_id: planetSectorId,
+            structure_id: structure.id,
+          });
+
+          const response = await fetch('https://papyrus-production.up.railway.app/craft_structure', {
+            method: 'POST',
+            headers: {
+              'Content-Type': 'application/json'
+            },
+            body: payload
+          });
+
+          const data = await response.json();
+          console.log('Response from Flask:', data);
+
+          // if (data.status === 'proceed') { // If the status is 'proceed', call createInventoryUserEntry
+          //   createInventoryUserEntry(structure);
+          // }
+        } catch (error) {
+          console.error('Error:', error.message);
+        }
+
+        // onStructureSelected(structure);
+        // createInventoryUserEntry(structure)
+        setIsCalloutOpen(false);
+      };
+
+    return (
+        <center><div className="relative inline-block text-center pl-10">
+          <button
+            type="button"
+            className="px-4 py-2 text-white bg-blue-500 rounded-md focus:outline-none hover:bg-blue-600"
+            onClick={() => setIsCalloutOpen(!isCalloutOpen)}
+          >
+            Build
+          </button>
+
+          {isCalloutOpen && (
+            <div className="origin-top-right absolute right-0 mt-2 w-72 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5">
+              <div className="py-1">
+                {structures.map((structure) => (
+                  <div
+                    key={structure.id}
+                    className="flex items-center justify-between px-4 py-2 hover:bg-gray-100 cursor-pointer"
+                    onClick={() => handleStructureClick(structure)}
+                  >
+                    <div className="flex items-center space-x-2 pl-8">
+                      <img src={structure.icon_url} alt={structure.name} className="w-8 h-8" />
+                      <span className="font-bold">{structure.name}</span>
+                    </div>
+                    <span className="text-gray-500">{structure.description}</span>
+                  </div>
+                ))}
+              </div>
+            </div>
+          )}
+        </div></center>
+    );
+};
+
+export const CreateStructureBlock = () => {
+    return (
+        <StructureComponent sectorId={18} />
+    );
+};