🕙🌔 ↝ Some UI changes, then integrating new microservices

components/Content/Inventory/ArchivedInventory.tsx → components/Content/Archive/ArchivedInventory.tsx

@@ -1,9 +1,9 @@
 import React from "react";
 import { useSession, useSupabaseClient } from "@supabase/auth-helpers-react";
 import Layout from "../../Section/Layout";
-import OwnedPlanetsList from "../Archive/UserOwnedPlanets"; // Potentially this should be in a lists component dir
-import OwnedItemsList from "./UserOwnedItems";
-import MySpaceships from "./Vehicles/MySpaceships";
+import OwnedPlanetsList from "./UserOwnedPlanets"; // Potentially this should be in a lists component dir
+import OwnedItemsList from "../Inventory/UserOwnedItems";
+import MySpaceships from "../Inventory/Vehicles/MySpaceships";
 
 export default function V1Inventory() { // Inventory items for v1 of public schema, see notes below
     const supabase = useSupabaseClient();

components/Content/Planets/Activities/SectorSetup.tsx

@@ -4,127 +4,176 @@ import React, { useEffect, useState } from "react";
 
 export default function CreateBasePlanetSector() {
     const supabase = useSupabaseClient();
-    const session = useSession();
+  const session = useSession();
 
-    const [userPlanet, setUserPlanet] = useState(null);
+  const [userPlanet, setUserPlanet] = useState(null);
 
-    // Get the planet that the user owns
+  // Get the planet that the user owns
+  useEffect(() => {
     const fetchUserPlanet = async () => {
-        if (!session) {
-            return;
-        };
+      if (!session) return;
 
-        try { 
-            const { data, error } = await supabase
-                .from('profiles')
-                .select('*')
-                .eq('id', session?.user?.id)
-                .single();
+      try {
+        const { data, error } = await supabase
+          .from('profiles')
+          .select('*')
+          .eq('id', session?.user?.id)
+          .single();
 
-            if (data) {
-                setUserPlanet(data.location);
-            };
+        if (data) {
+          setUserPlanet(data.location);
+        }
 
-            if (error) {
-                throw error;
-            };
-        } catch (error: any) {
-            console.error(error.message);
-        };
+        if (error) {
+          throw error;
+        }
+      } catch (error) {
+        console.error(error.message);
+      }
     };
 
     fetchUserPlanet();
-
-    const createSector = async () => {
-        if (session) {
-            fetchUserPlanet();
-
-            // Map resource names to corresponding inventoryITEMS ids
-            const resourceToIdMap = {
-                "Silicates": 13,
-                "Alloy": 12,
-                "Iron": 11,
-                "Fuel": 10,
-                "Water": 9,
-                "Coal": 11,
-            };
-
-            // Choose between Silicates and Coal for testing
-            const depositResource = Math.random() < 0.5 ? "Silicates" : "Coal";
-
-            // Get the corresponding id from the map
-            const depositRowId = resourceToIdMap[depositResource];
-
-            const response = await supabase.from('basePlanetSectors').upsert([
-                {
-                    anomaly: userPlanet,
-                    owner: session?.user?.id,
-                    deposit: depositRowId, // Use the id instead of the resource name
-                    coverUrl: "https://mars.nasa.gov/mars2020-raw-images/pub/ods/surface/sol/00090/ids/edr/browse/edl/EBE_0090_0674952393_193ECM_N0040048EDLC00090_0030LUJ01_1200.jpg",
-                    explored: false,
-                },
-            ]);
-
-            if (response.error) {
-                console.error(response.error);
-            } else {
-                // Handle success
-            }
-        }
-    };       
-
-    return (
-        <div>
-            <pre>{userPlanet}</pre>
-            <button onClick={createSector}>Create sector</button>
-        </div>
-    );
+  }, [session, supabase]);
+
+  const createSector = async () => {
+    if (session) {
+      // Map resource names to corresponding inventoryITEMS ids
+      const resourceToIdMap = {
+        "Silicates": 13,
+        "Alloy": 12,
+        "Iron": 11,
+        "Fuel": 10,
+        "Water": 9,
+        "Coal": 11,
+      };
+
+      // Choose between Silicates and Coal for testing
+      const depositResource = Math.random() < 0.5 ? "Silicates" : "Coal";
+
+      // Get the corresponding id from the map
+      const depositRowId = resourceToIdMap[depositResource];
+
+      const response = await supabase.from('basePlanetSectors').upsert([
+        {
+          anomaly: userPlanet,
+          owner: session?.user?.id,
+          deposit: depositRowId, // Use the id instead of the resource name
+          coverUrl: "https://mars.nasa.gov/mars2020-raw-images/pub/ods/surface/sol/00090/ids/edr/browse/edl/EBE_0090_0674952393_193ECM_N0040048EDLC00090_0030LUJ01_1200.jpg",
+          explored: false,
+        },
+      ]);
+
+      if (response.error) {
+        console.error(response.error);
+      } else {
+        // Handle success
+      }
+    }
+  };
+
+  return (
+    <div className="mt-4">
+      <button
+        onClick={createSector}
+        className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
+      >
+        Create Sector
+      </button>
+    </div>
+  );
 };
 
 export function UserOwnedSectorGrid() {
     const supabase = useSupabaseClient();
     const session = useSession();
-
+  
     const [sectorData, setSectorData] = useState([]);
-
+  
     useEffect(() => {
-        const fetchUserSectorImages = async () => {
-            if (session) {
-                try {
-                    const { data, error } = await supabase
-                        .from("basePlanetSectors")
-                        .select('id, coverUrl')
-                        .eq('owner', session?.user?.id);
-
-                    if (data) {
-                        setSectorData(data);
-                    };
-
-                    if (error) {
-                        throw error;
-                    };
-                } catch (error) {
-                    console.error(error.message);
-                };
-            };
-        };
-
-        fetchUserSectorImages();
+      const fetchUserSectorImages = async () => {
+        if (session) {
+          try {
+            const { data, error } = await supabase
+              .from("basePlanetSectors")
+              .select('id, coverUrl')
+              .eq('owner', session?.user?.id);
+  
+            if (data) {
+              setSectorData(data);
+            }
+  
+            if (error) {
+              throw error;
+            }
+          } catch (error) {
+            console.error(error.message);
+          }
+        }
+      };
+  
+      fetchUserSectorImages();
     }, [session, supabase]);
-
+  
     return (
-        <div className="grid grid-cols-4 gap-2 p-4">
-            {sectorData.map((item) => (
-                <Link href={`/planets/sector/${item.id}`}><div
-                    key={item.id}
-                    className="relative overflow-hidden bg-center bg-cover"
-                    style={{
-                        backgroundImage: `url(${item.coverUrl})`,
-                        paddingBottom: '100%',
-                        // backgroundPosition: `-${(index % 4) * 25}% -${Math.floor(index / 4) * 25}%`,
-                    }}
-                ></div></Link>
-            ))}
-        </div>
+      <div className="grid grid-cols-4 gap-4">
+        {sectorData.map((item) => (
+          <Link legacyBehavior key={item.id} href={`/planets/sector/${item.id}`} passHref>
+            <a className="block aspect-w-3 aspect-h-2 bg-gray-200 hover:bg-gray-300">
+              <img
+                src={item.coverUrl}
+                alt="Sector"
+                className="object-cover w-full h-full"
+              />
+            </a>
+          </Link>
+        ))}
+      </div>
     );
+};
+
+export function AllSectors() {
+    const supabase = useSupabaseClient();
+  const session = useSession();
+
+  const [sectorData, setSectorData] = useState([]);
+
+  useEffect(() => {
+    const fetchSectorContent = async () => {
+      if (session) {
+        try {
+          const { data, error } = await supabase
+            .from("basePlanetSectors")
+            .select('id, coverUrl');
+
+          if (data) {
+            setSectorData(data);
+          }
+
+          if (error) {
+            throw error;
+          }
+        } catch (error) {
+          console.error(error.message);
+        }
+      }
+    };
+
+    fetchSectorContent();
+  }, [session, supabase]);
+
+  return (
+    <div className="grid grid-cols-4 gap-4">
+      {sectorData.map((item) => (
+        <Link legacyBehavior key={item.id} href={`/planets/sector/${item.id}`} passHref>
+          <a className="block aspect-w-3 aspect-h-2 bg-gray-200 hover:bg-gray-300">
+            <img
+              src={item.coverUrl}
+              alt="Sector"
+              className="object-cover w-full h-full"
+            />
+          </a>
+        </Link>
+      ))}
+    </div>
+  );
 };

components/Content/Planets/Activities/StructureCreate.tsx

@@ -5,7 +5,7 @@ interface Structure {
     id: number;
     name: string;
     description: string;
-    icon_url: string;
+    icon_url: string; 
 };
 
 interface StructureSelectionProps {

components/Content/Planets/Base/BasePlanetAllSectors.tsx

@@ -80,46 +80,46 @@ export default function BasePlanetSectors({ planetId }: { planetId: string }) {
     );
                     }
 
-                    return (
-                        <>
-                          <Card noPadding={false}>
-                            <div
-                              className="flex-col justify-center mt-[-80px] bg-cover bg-center rounded-15"
-                              style={{
-                                backgroundImage:
-                                'url("https://images.unsplash.com/photo-1578309756042-b445687e326c?q=80&w=2980&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D")',
-                              }}
-                            >
-                              <div className="h-[80vh] flex flex-col items-center justify-center relative">
-                                <h1 className="text-center text-slate-300 text-opacity-100 font-['Inter'] tracking-[3.48px] mt-[-50px] mb-4 text-4xl font-extrabold leading-none tracking-tight text-gray-900 md:text-5xl lg:text-6xl dark:text-white text-gray-400">
-                                  Test
-                                </h1>
-                                <div className="w-full flex items-center justify-center">
-                                </div>
-                                <div className="flex items-start gap-8 mt-20">
-                                  <div className="flex flex-col items-center justify-start gap-4">
-                                    <div className="text-center text-slate-300 text-opacity-70 text-[21.73px] font-medium font-['Inter'] tracking-[3.48px]">
-                                      Planet {planetId} sector list
-                                    </div>
-                                  </div>
-                                </div>
-                              </div>
-                              {/* {deposit && typeof deposit === "string" ? (
-                                    <div>{deposit}</div>
-                                ) : (
-                                    <div>{JSON.stringify(deposit)}</div>
-                                )} */}
-                            </div>
-                          </Card>
-                          <div>
-                            <Card noPadding={false}>
-                            {Object.keys(sectorsData).map((key) => (
-                        <div key={key}>
-                            <strong>{key}:</strong> {JSON.stringify(sectorsData[key])}
-                        </div>
-                    ))}
-                            </Card>
-                          </div>
-                        </>
-                      );
+  return (
+      <>
+        <Card noPadding={false}>
+          <div
+            className="flex-col justify-center mt-[-80px] bg-cover bg-center rounded-15"
+            style={{
+              backgroundImage:
+              'url("https://images.unsplash.com/photo-1578309756042-b445687e326c?q=80&w=2980&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D")',
+            }}
+          >
+            <div className="h-[80vh] flex flex-col items-center justify-center relative">
+              <h1 className="text-center text-slate-300 text-opacity-100 font-['Inter'] tracking-[3.48px] mt-[-50px] mb-4 text-4xl font-extrabold leading-none tracking-tight text-gray-900 md:text-5xl lg:text-6xl dark:text-white text-gray-400">
+                Test
+              </h1>
+              <div className="w-full flex items-center justify-center">
+              </div>
+              <div className="flex items-start gap-8 mt-20">
+                <div className="flex flex-col items-center justify-start gap-4">
+                  <div className="text-center text-slate-300 text-opacity-70 text-[21.73px] font-medium font-['Inter'] tracking-[3.48px]">
+                    Planet {planetId} sector list
+                  </div>
+                </div>
+              </div>
+            </div>
+            {/* {deposit && typeof deposit === "string" ? (
+                  <div>{deposit}</div>
+              ) : (
+                  <div>{JSON.stringify(deposit)}</div>
+              )} */}
+          </div>
+        </Card>
+        <div>
+          <Card noPadding={false}>
+          {Object.keys(sectorsData).map((key) => (
+      <div key={key}>
+          <strong>{key}:</strong> {JSON.stringify(sectorsData[key])}
+      </div>
+        ))}
+          </Card>
+        </div>
+      </>
+    );
 };