🎧👩‍👩‍👧 ↝ Individual components to show planet feed data now supported…

… in re-design

components/Content/Planets/GalleryList.tsx

@@ -1,9 +1,7 @@
 import React, { useEffect, useState } from "react";
 import Link from "next/link";
-import { Container } from "lucide-react";
 import { useSession, useSupabaseClient } from "@supabase/auth-helpers-react";
 import Login from "../../../pages/login";
-import Bottombar from "../../Core/BottomBar";
 
 interface Planet {
   id: string;
@@ -20,7 +18,7 @@ export function PlanetGalleryCard({ planet, position }: Props) {
   const { id, content, cover } = planet;
 
   return (
-    <Link legacyBehavior href={`https://starsailors.space/tests/planets/${planet.id}`}>
+    <Link legacyBehavior href={`/planets/${id}`}>
       <a style={{ position: "absolute", top: position.top, left: position.left }}>
         <img src={cover} className="w-1/2" />
       </a>

components/Content/Planets/IndividualPlanet.tsx

@@ -0,0 +1,109 @@
+import { useRouter } from "next/router";
+import React, { useState, useEffect, useRef } from "react";
+import { useSession, useSupabaseClient } from "@supabase/auth-helpers-react";
+import { UserContext } from "../../../context/UserContext";
+import Layout from "../../Section/Layout";
+import CardForum from "../DiscussCard";
+
+enum SidebarLink {
+    Feed,
+    Demo,
+    Data,
+    Visit,
+}
+
+export default function IndividualPlanet({ id }: { id: string }) {
+    const router = useRouter();
+
+    const supabase = useSupabaseClient();
+    const session = useSession();
+
+    const [planetData, setPlanetData] = useState(null);
+    const [planetPosts, setPlanetPosts] = useState([]);
+    const { id: planetId } = router.query;
+
+    const [activeLink, setActiveLink] = useState(SidebarLink.Data);
+    const [screenWidth, setScreenWidth] = useState<number>(0);
+    const [showSidebar, setShowSidebar] = useState<boolean>(true);
+
+    useEffect(() => {
+        const handleResize = () => {
+            setScreenWidth(window.innerWidth);
+        };
+        handleResize();
+        window.addEventListener("resize", handleResize);
+        return () => {
+            window.removeEventListener("resize", handleResize);
+        };
+    }, []);
+
+    useEffect(() => {
+        setShowSidebar(screenWidth >= 800);
+    }, [screenWidth]);
+
+    const planetCover = "https://qwbufbmxkjfaikoloudl.supabase.co/storage/v1/object/public/planets/" + id + "/download.png";
+
+    useEffect(() => {
+        if (planetId) {
+            getPlanetData();
+            fetchPostsForPlanet(id);
+        }
+    })
+
+    const getPlanetData = async () => {
+        try {
+            const { data, error } = await supabase
+                .from("planetsss")
+                .select("*")
+                .eq("id", planetId)
+                .single();
+
+            if (data) {
+                setPlanetData(data);
+            };
+
+            if (error) { throw error; };
+        } catch (error: any) {
+            console.error(error.message);
+        }
+    };
+
+    async function fetchPostsForPlanet(planetId) {
+        try {
+            const { data: postsData, error: postsError } = await supabase
+                .from("posts_duplicates")
+                .select("id, content, created_at, media, profiles(id, avatar_url, username)")
+                .eq("planets2", planetId)
+                .order("created_at", { ascending: false });
+
+            if (postsData) {
+                setPlanetPosts(postsData);
+            }
+
+            if (postsError) {
+                throw postsError;
+            }
+        } catch (error: any) {
+            console.error("Error fetching posts:", error.message);
+        }
+    }
+
+    if (!planetData) {
+        return <div>Loading...</div>;
+    };
+
+    const { content, avatar_url, cover } = planetData;
+
+    return (
+        <Layout>
+            <div className="mb-7"><center><img height="20%" width="20%" src={cover} /></center></div>
+            {planetPosts?.length > 0 && 
+                planetPosts.map((post) => (
+                    <>
+                        <CardForum key={post.id} {...post} />
+                    </>
+                ))
+            }
+        </Layout>
+    );
+};

components/Core/BottomBar.tsx

@@ -3,27 +3,27 @@ import { useRouter } from "next/router";
 
 const bottombarLinks = [
   {
-    imgURL: "home.svg",
+    imgURL: "/home.svg",
     route: "/feed",
     label: "Feed",
   },
   {
-    imgURL: "planet.svg",
+    imgURL: "/planet.svg",
     route: "/garden",
     label: "Garden",
   },
   {
-    imgURL: "eagle.svg",
-    route: "/saved",
+    imgURL: "/eagle.svg",
+    route: "/planets/68",
     label: "Explore",
   },
   {
-    imgURL: "rover.svg",
+    imgURL: "/rover.svg",
     route: "/create-post",
     label: "Gather",
   },
   {
-    imgURL: "satellite.svg",
+    imgURL: "/satellite.svg",
     route: "/create-post",
     label: "Missions",
   },

package.json

@@ -26,7 +26,6 @@
     "@radix-ui/react-icons": "^1.3.0",
     "@radix-ui/react-separator": "^1.0.3",
     "@radix-ui/react-toast": "^1.1.5",
-    "@supabase/auth-helpers-nextjs": "^0.5.4",
     "@supabase/auth-helpers-react": "^0.3.1",
     "@supabase/auth-ui-react": "^0.2.6",
     "@supabase/supabase-js": "^2.13.1",

pages/planets/[id].tsx

@@ -0,0 +1,14 @@
+import IndividualPlanet from "../../components/Content/Planets/IndividualPlanet";
+import React from "react";
+import { useRouter } from "next/router";
+
+export default function PlanetIdPage () {
+    const router = useRouter();
+    const { id } = router.query;
+
+    if (!id) {
+        return null;
+    };
+
+    return <IndividualPlanet id={id as string} />;
+}