🕸️🪻 ↝ Can now view all created items on a sector

Author: Gizmotronn

components/Content/Planets/Activities/StructureCreate.tsx

@@ -119,4 +119,70 @@ export default function StructureComponent({ sectorId }) {
             <StructureSelection onStructureSelected={handleStructureSelected} planetSectorId={sectorId} />
         </div>
     );
+};
+
+interface PlacedStructuresProps {
+    sectorId: number;
+  }
+  
+  interface PlacedStructure {
+    id: number;
+    name: string;
+    description: string;
+    icon_url: string;
+  }
+  
+export const PlacedStructures: React.FC<PlacedStructuresProps> = ({ sectorId }) => {
+    const supabase = useSupabaseClient();
+    const [placedStructures, setPlacedStructures] = useState<PlacedStructure[]>([]);
+  
+    useEffect(() => {
+      const fetchPlacedStructures = async () => {
+        try {
+          const { data: userItems, error: userItemsError } = await supabase
+            .from('inventoryUSERS')
+            .select('item')
+            .eq('planetSector', sectorId);
+  
+          if (userItemsError) {
+            console.error(userItemsError.message);
+            return;
+          }
+  
+          const itemIds = userItems?.map((item) => item.item) || [];
+  
+          const { data: structureItems, error: structureItemsError } = await supabase
+            .from('inventoryITEMS')
+            .select('id, name, description, icon_url')
+            .in('id', itemIds)
+            .eq('ItemCategory', 'Structure');
+  
+          if (structureItemsError) {
+            console.error(structureItemsError.message);
+            return;
+          }
+  
+          setPlacedStructures(structureItems || []);
+        } catch (error) {
+          console.error(error.message);
+        }
+      };
+  
+      fetchPlacedStructures();
+    }, [supabase, sectorId]);
+  
+    return (
+      <div>
+        <h2>Structures Placed on Sector {sectorId}</h2>
+        <div>
+          {placedStructures.map((structure) => (
+            <div key={structure.id}>
+              <img src={structure.icon_url} alt={structure.name} />
+              <p>{structure.name}</p>
+              <p>{structure.description}</p>
+            </div>
+          ))}
+        </div>
+      </div>
+    );
 };

components/Content/Planets/Base/IndividualBasePlanetSector.tsx

@@ -5,7 +5,7 @@ import Card from "../../../Card";
 import RoverImageGallery, { RoverImage, RoverImageNoHandle } from "../PlanetData/RandomRoverImage";
 import axios from "axios";
 import { RoverContentPostForm } from "../../CreatePostForm";
-import StructureComponent from "../Activities/StructureCreate";
+import StructureComponent, { PlacedStructures } from "../Activities/StructureCreate";
 
 export default function BasePlanetSector({ sectorid }: { sectorid: string }) {
   const router = useRouter();
@@ -200,6 +200,7 @@ export default function BasePlanetSector({ sectorid }: { sectorid: string }) {
         <Card noPadding={false}>
           <RoverImageNoHandle date='853' rover='opportunity' sectorNo={id} />
           <StructureComponent sectorId={sectorid} />
+          <PlacedStructures sectorId={Number(sectorid)} />
           {/* {imageUrl ? (
             <>
                 <img src={imageUrl} alt="Rover image" />