️️🌽🏍️ ↝ Items now created per-sector from API, correct schema, AND rendering on per-sector basis for already existing items [ GP-10 GP-11 GP-12 ]

Author: Gizmotronn

components/Content/Inventory/UserOwnedItems.tsx

@@ -79,4 +79,82 @@ const OwnedItemsList: React.FC = () => {
     )
 }
 
-export default OwnedItemsList;
+export default OwnedItemsList;
+
+export const SectorStructureOwned: React.FC<{ sectorid: string }> = ({ sectorid }) => {
+    const supabase = useSupabaseClient();
+    const session = useSession();
+    
+    const [ownedItems, setOwnedItems] = useState([]);
+    const [itemDetails, setItemDetails] = useState([]);
+    // Add support for moving items/entities between planets
+
+    useEffect(() => {
+        async function fetchOwnedItems() {
+            if (session) {
+                try {
+                const user = session.user.id;
+                const { data: ownedItemsData, error: ownedItemsError } = await supabase
+                    .from('inventoryUSERS')
+                    .select('*')
+                    .eq("sector", sectorid);
+        
+                if (ownedItemsError) {
+                    throw ownedItemsError;
+                }
+
+                if (ownedItemsData) {
+                    setOwnedItems(ownedItemsData);
+                }
+            } catch (error) {
+                    console.error('Error fetching owned items:', error);
+                }
+            }
+        }
+    
+        fetchOwnedItems();
+    }, [session]);
+    
+    useEffect(() => {
+        async function fetchItemDetails() {
+            if (ownedItems.length > 0) {
+                const itemIds = ownedItems.map(item => item.item);
+                const { data: itemDetailsData, error: itemDetailsError } = await supabase
+                    .from('inventoryITEMS')
+                    .select('*')
+                    .in('id', itemIds);
+            
+            if (itemDetailsError) {
+                console.error('Error fetching item details:', itemDetailsError);
+            }
+    
+            if (itemDetailsData) {
+                setItemDetails(itemDetailsData);
+            }
+          }
+        }
+    
+        fetchItemDetails();
+    }, [ownedItems]);
+
+    return (
+        <div className="bg-gray-100 p-4">
+            <h2 className="text-2xl font-semibold mb-4">Your Items</h2>
+            <ul className="grid gap-4 grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5">
+            {itemDetails.map(item => {
+                const ownedItem = ownedItems.find(ownedItem => ownedItem.item === item.id);
+                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>
+                    <p className="text-gray-600">Quantity: {ownedItem?.quantity}</p>
+                    <p className="text-gray-600">Location: {ownedItem?.location}</p>
+                </li>
+                );
+            })}
+        </ul>
+      </div>
+    )
+}

components/Content/Planets/Activities/StructureCreate.tsx

@@ -76,10 +76,11 @@ const StructureSelection: React.FC<StructureSelectionProps> = ({ onStructureSele
       try {
         const payload = JSON.stringify({
           user_id: session?.user?.id,
+          sector_id: planetSectorId,
           structure_id: structure.id,
         });
 
-        const response = await fetch('http://127.0.0.1:5000/craft_structure', {
+        const response = await fetch('https://papyrus-production.up.railway.app/craft_structure', {
           method: 'POST',
           headers: {
             'Content-Type': 'application/json'
@@ -90,9 +91,9 @@ const StructureSelection: React.FC<StructureSelectionProps> = ({ onStructureSele
         const data = await response.json();
         console.log('Response from Flask:', data);
 
-        if (data.status === 'proceed') { // If the status is 'proceed', call createInventoryUserEntry
-          createInventoryUserEntry(structure);
-        }
+        // if (data.status === 'proceed') { // If the status is 'proceed', call createInventoryUserEntry
+        //   createInventoryUserEntry(structure);
+        // }
       } catch (error) {
         console.error('Error:', error.message);
       }

components/Content/Planets/Base/BasePlanetSector.tsx

@@ -6,7 +6,9 @@ import RoverImageGallery, { RoverImage, RoverImageNoHandle } from "../PlanetData
 import axios from "axios";
 import { RoverContentPostForm } from "../../CreatePostForm";
 import StructureComponent, { PlacedStructures } from "../Activities/StructureCreate";
-import SectorStructures from "../Sectors/SectorStructures";
+import SectorItems from "../Sectors/SectorStructures";
+import { SectorStructureOwned } from "../../Inventory/UserOwnedItems";
+// import SectorStructures from "../Sectors/SectorStructures";
 
 const AddResourceToInventory = ({ resource }) => {
   const supabase = useSupabaseClient();
@@ -262,6 +264,8 @@ export default function BasePlanetSector({ sectorid }: { sectorid: string }) {
         <Card noPadding={false}>
           <PlacedStructures sectorId={Number(sectorid)} />
           <AddResourceToInventory resource={deposit} />
+          {/* <SectorItems planetSectorId={sectorid} /> */}
+          <SectorStructureOwned sectorid={sectorid} />
           <p>{deposit}</p>
           <RoverImageNoHandle date='853' rover='opportunity' sectorNo={id} />
           <StructureComponent sectorId={sectorid} />

components/Content/Planets/Sectors/SectorStructures.tsx

@@ -1,6 +1,61 @@
 import Link from "next/link"
+import React, { useState, useEffect } from 'react';
+import { useSupabaseClient } from "@supabase/auth-helpers-react";
 
-export default function SectorStructures() {
+const SectorItems: React.FC= ( planetSectorId ) => {
+
+  const supabase = useSupabaseClient();
+  const [items, setItems] = useState<any[]>([]); // Change the type as per your data structure
+
+  useEffect(() => {
+    const fetchSectorItems = async () => {
+      try {
+        // Fetch items belonging to the sector from your database
+        const { data, error } = await supabase
+          .from('inventoryUSERS')
+          .select('*')
+          .eq('sector', planetSectorId);
+
+        if (error) {
+          throw error;
+        }
+
+        if (data) {
+          setItems(data);
+        }
+      } catch (error) {
+        console.error('Error fetching sector items:', error.message);
+      }
+    };
+
+    fetchSectorItems();
+  }, [supabase, planetSectorId]);
+
+  return (
+    <div>
+      <h2>Sector Items</h2>
+      <ul>
+        {items.map((item) => (
+          <li key={item.id}><p>{item}</p></li>
+        ))}
+      </ul>
+    </div>
+  );
+};
+
+export default SectorItems;
+
+export function SectorItemStructures(planetAndSectorId) {
+  const supabase = useSupabaseClient();
+  // Add discriminator to prevent users who don't own that sector/perms
+  const [sectorItems, setSectorItems] = useState([]);
+
+  useEffect(() => {
+
+  })
+}
+
+export function SectorStructuresList() {
   return (
     <div className="flex flex-col min-h-screen items-center justify-center p-4 space-y-4 md:space-y-0 md:flex-row md:space-x-4">
       <div className="grid gap-4 w-full max-w-sm md:max-w-none md:grid-cols-3">