️🪞🥞 ↝ [SGV2-17]: that remain untold...

components/Content/[id]/BasePlanetAllSectors.tsx

@@ -3,14 +3,18 @@ import { useRouter } from "next/router";
 import { useSupabaseClient, useSession } from "@supabase/auth-helpers-react";
 import Card from "../../_Core/ui/Content/Card";
 
+interface Sector {
+  // Define the properties of a sector
+};
+
 export default function BasePlanetSectors({ planetId }: { planetId: string }) {
     const router = useRouter();
     const { id: planetid } = router?.query;
 
     const supabase = useSupabaseClient();
     const session = useSession();
 
-    const [sectorsData, setSectorsData] = useState(null);
+    const [sectorsData, setSectorsData] = useState<Sector[] | null>(null);
 
     const getPlanetSectors = async () => {
         if (!planetId) {

components/Content/[id]/BasePlanetSector.tsx

@@ -6,6 +6,10 @@ import StructureComponent, { PlacedStructures } from "../Populate/StructureCreat
 import { SectorStructureOwned } from "../Inventory/UserOwnedItems";
 // import { CreateMenuBar, SectorCircularMenu } from "../../../Core/BottomBar";
 
+interface PlanetData {
+  content?: string; // Define the properties of planetData
+};
+
 const AddResourceToInventory = ({ resource, sectorId }) => {
   const supabase = useSupabaseClient();
   const session = useSession();
@@ -74,8 +78,8 @@ export default function BasePlanetSector({ sectorid }: { sectorid: string }) {
 
   const supabase = useSupabaseClient();
 
-  const [planetData, setPlanetData] = useState(null);
-  const [sectorData, setSectorData] = useState(null);
+  const [planetData, setPlanetData] = useState<PlanetData | null>(null);
+  const [sectorData, setSectorData] = useState<{ anomaly?: string, id: string, created_at: string, owner: string, deposit: string, coverUrl: string, exploration_start_data: string, explored: boolean } | null>(null);
   const [depositItem, setDepositItem] = useState(null);
 
   const fetchDepositItem = async (depositId) => {

components/_Skeleton/PlanetDataBlocks.tsx

@@ -22,6 +22,11 @@ interface PlanetData {
     mass: number;
 };
 
+interface Sector {
+    id: string;
+    // Add other properties according to the actual structure of your 'basePlanetSectors' table
+};
+
 export const PlanetStatBlock = () => {
     const supabase = useSupabaseClient();
 
@@ -88,7 +93,7 @@ export const SectorsInsidePlanetBlock = () => {
 
     const planetId = "2";
     const userId = session?.user?.id;
-    const [sectors, setSectors] = useState([]);
+    const [sectors, setSectors] = useState<Sector[]>([]); // Define the type as Sector[]
 
     useEffect(() => {
         fetchSectorsForPlanet();
@@ -117,7 +122,7 @@ export const SectorsInsidePlanetBlock = () => {
     return (
         <><div className="grid-container mb-24">
               {sectors.map((sector) => (
-                <Link legacyBehavior key={sector.id} href={`/planets/sector/${sector.id}`}>
+                <Link key={sector.id} href={`/planets/sector/${sector.id}`}>
                 <a className="sector-link">
                     <div className="sector-square">
                     {/* {sector.coverUrl && (