🙆🏻‍♀️🧑🏻‍🎨 ↝ Merge pull request #90 from Signal-K/FCDB-22

⚽︎🙆🏻‍♀️ ↝ New planets schema & table setup

components/Content/ClassificationFeed.tsx

@@ -80,6 +80,78 @@ export function ClassificationFeedForIndividualPlanet(planetId) {
       }
   }, []);
 
+  async function fetchPosts() {
+    try {
+      const postsResponse = await supabase
+        .from("classifications")
+        .select("*")
+        .eq('anomaly', planetId.planetId.id)
+        .order('created_at', { ascending: false });
+
+      if (postsResponse.error || !postsResponse.data) {
+        console.error("Error fetching posts:", postsResponse.error);
+        return;
+      }
+
+      const postIds = postsResponse.data.map((post) => post.id);
+
+      const commentsResponse = await supabase
+        .from("comments")
+        .select("id, content, created_at, profiles(id, avatar_url, username), post_id")
+        .in("post_id", postIds)
+        .order("created_at", { ascending: true });
+
+      const commentsByPostId = commentsResponse.data.reduce((acc, comment) => {
+        const postId = comment.post_id;
+        if (!acc[postId]) {
+          acc[postId] = [];
+        }
+        acc[postId].push(comment);
+        return acc;
+      }, {});
+
+      const postsWithComments = postsResponse.data.map((post) => ({
+        ...post,
+        comments: commentsByPostId[post.id] || [],
+      }));
+
+      setPosts(postsWithComments);
+      // console.log(posts);
+    } catch (error) {
+      console.error("Error fetching posts:", error.message);
+    }
+  }  
+
+  return (
+      <div className="flex flex-col items-center gap-4 py-2" style={{ maxWidth: '100%', margin: 'auto' }}>
+          {posts.map((post) => (
+              <>
+                <CardForum key={post.id} {...post} />
+                <p>{post.planetId}</p>
+              </>
+          ))}
+      </div>
+  );
+};
+
+export function ClassificationFeedForIndividualPlanetDuplicates(planetId) {
+  const supabase: SupabaseClient = useSupabaseClient();
+  const session = useSession();
+
+  const [posts, setPosts] = useState([]);
+  // const [profile, setProfile] = useState(null);
+  const [planetPosts, setPlanetPosts] = useState([]);
+
+  useEffect(() => {
+      fetchPosts();
+    }, []);  
+
+  useEffect(() => {
+      if (planetPosts.length > 0) {
+        console.log("Comments: ", planetPosts.flatMap((post) => post.comments));
+      }
+  }, []);
+
   async function fetchPosts() {
     try {
       const postsResponse = await supabase

components/Content/Classify/AnomalyPostFormCard.tsx

@@ -19,6 +19,83 @@ export default function PostFormCardAnomalyTag({ onPost, planetId }) {
 
     // Check if user has items to make post -> not required functionality yet
 
+    // Create the publication
+    async function createPost() {
+        // Will add an identifier to determine the number of posts mentioning the planet, as that will affect the classification rating
+
+        supabase
+            .from("classifications")
+            .insert({
+                author: profile,
+                content,
+                // media: uploads
+                // planets2: planetId,   
+                anomaly: planetId, // Set this to multiple anomaly types/foreign key options            
+            }).then(response => {
+                if (!response.error) {
+                  alert(`Post ${content} created`);
+                  setContent('');
+                //   setUploads([]);
+                  if ( onPost ) {
+                    onPost();
+                  }
+                }
+            });
+
+            // .then (update user experience/currency)
+    }
+
+    /* Get user avatar & other data
+    useEffect(() => {
+        supabase
+            .from('profiles')
+            .select(`avatatar_url`)
+            .eq("id", profile)
+            .then((result) => {
+                setAvatarUrl(result?.data[0]?.avatatar_url);
+            });
+    }, [session]); */
+
+    // Function to add media to the publication
+
+    // Frontend output
+    return (
+        <>
+            <div className="flex gap-2 mx-5 mt-5">
+                {/* <div>
+                    <img src={avatar_url} width='60px' height='60px' />
+                </div> */}
+                <textarea
+                    value={content}
+                    onChange={(e) => setContent(e.target.value)}
+                    className="grow p-3 h-24 rounded-xl"
+                    placeholder={`What do you think about this planet candidate, ${profile}?`}
+                />
+                <div className="text-center">
+                    <button onClick={createPost} className="text-black px-2 py-1 rounded-md">Share</button>
+                </div>
+            </div>
+        </>
+    )
+}
+
+export function PostFormCardAnomalyTagOldSchema({ onPost, planetId }) {
+    const supabase = useSupabaseClient();
+    const session = useSession();
+
+    const [content, setContent] = useState('');
+    const profile = session?.user?.id;
+    const [avatar_url, setAvatarUrl] = useState(null);
+    /* const [uploads, setUploads] = useState([]);
+    const [isUploading, setIsUploading] = useState(false);
+    const [userExperience, setUserExperience] = useState();
+    const [hasRequiredItem, setHasRequiredItem] = useState(false); */
+
+    const router = useRouter();
+    const anomalytId = router.query.id;
+
+    // Check if user has items to make post -> not required functionality yet
+
     // Create the publication
     async function createPost() {
         // Will add an identifier to determine the number of posts mentioning the planet, as that will affect the classification rating

components/Content/Planets/Base/IndividualBasePlanet.tsx

@@ -530,7 +530,10 @@ export function BasePlanetData ({ planetId }) { // Repurpose/rename syntax for g
       <p>ID: {basePlanetData.id}</p>
       <p>Temperature: {basePlanetData.temperature}</p>
       {/* <ActivateButton planetIdDeepnote={basePlanetData.deepnote} /> */}
-      {/* <ContentPlaceholder planetIdDeepnote='https://embed.deepnote.com/f8de697b-ba49-4014-b2b2-fe5f4cc3c026/3c7a3d159d33438fae3b08ca3e5aa88e/9a872bcf31674fcf8f46c75daf205168?height=564.1875' /> */}
+      {/* <ContentPlaceholder planetIdDeepnote='https://embed.deepnote.com/f8de697b-ba49-4014-b2b2-fe5f4cc3c026/3c7a3d159d33438fae3b08ca3e5aa88e/9a872bcf31674fcf8f46c75daf205168?height=564.1875' /> 
+      <iframe src="https://observablehq.com/d/464f8a61b073bb4d" width='100%' height='100%' />
+        <iframe src="https://deepnote.com/@star-sailors/Step-by-step-50ad3984-69a9-496e-a121-efb59231e7e9" width='100%' height='100%' />
+      */}
       <center><iframe src={basePlanetData.deepnote} height='659' width='80%' /></center>
     </div>
   )

components/Section/Layout.tsx

@@ -24,6 +24,41 @@ const Layout: React.FC<DashboardLayoutProps> = ({ children }) => {
     }
   }, []);
 
+  return (
+    <>
+        <main className="h-max pb-10 grow pt-6">
+          {/* <Navbar /> */}
+          {children}
+        </main>
+      {isMobile && (
+        <div className="md:hidden overflow-y-auto h-screen p-4">
+          <main className="h-max pb-10 grow">{children}</main>
+          <Bottombar />
+        </div>
+      )}
+    </>
+  );
+};
+
+export default Layout;
+
+export const LayoutWithSidebar: React.FC<DashboardLayoutProps> = ({ children }) => {
+  const [isMobile, setIsMobile] = useState(false);
+
+  useEffect(() => {
+    // Check if window is defined before accessing it
+    if (typeof window !== "undefined") {
+      const checkIsMobile = () => {
+        setIsMobile(window.innerWidth <= 768);
+      };
+      checkIsMobile();
+      window.addEventListener("resize", checkIsMobile);
+      return () => {
+        window.removeEventListener("resize", checkIsMobile);
+      };
+    }
+  }, []);
+
   return (
     <>
       <div className="hidden md:flex relative items-start">
@@ -43,8 +78,6 @@ const Layout: React.FC<DashboardLayoutProps> = ({ children }) => {
   );
 };
 
-export default Layout;
-
 export const LayoutNoNav: React.FC<DashboardLayoutProps> = ({ children }) => {
   const [isMobile, setIsMobile] = useState(false);
 

pages/planets/[id].tsx

@@ -39,21 +39,40 @@ export default function PlanetIdPage () {
         );
     };
 
+    // For testing/archiving of old layout
+    if (isMobile && !id && !router) {
+        return (
+            <div className="flex h-screen">
+                <div className="w-1/6 bg-gray-50">
+                    <DesktopSidebar />
+                </div>
+                <div className="w-3/6 overflow-y-auto mr-30 z-40">
+                    {/* <br /><ActivateButton /> */}
+                    <IndividualBasePlanetDesktop id={id as string} />
+                </div>
+                <div className="w-2/6 bg-gray-50 overflow-y-auto z-">
+                    <BasePlanetData planetId={{ id: id as string }} />
+                    <EditableBasePlanetData planetId={{ id: id as string }} />
+                    <PostFormCardAnomalyTag planetId={id} onPost={null} />
+                    <ClassificationFeedForIndividualPlanet planetId={{ id: id as string }} />
+                </div>
+            </div>
+        );
+    }
+
     return (
+        // <Layout>
         <div className="flex h-screen">
-            <div className="w-1/6 bg-gray-50">
-                <DesktopSidebar />
-            </div>
             <div className="w-3/6 overflow-y-auto mr-30 z-40">
-                {/* <br /><ActivateButton /> */}
-                <IndividualBasePlanetDesktop id={id as string} />
-            </div>
-            <div className="w-2/6 bg-gray-50 overflow-y-auto z-">
-                <BasePlanetData planetId={{ id: id as string }} />
-                {/* <EditableBasePlanetData planetId={{ id: id as string }} /> */}
-                <PostFormCardAnomalyTag planetId={id} onPost={null} />
-                <ClassificationFeedForIndividualPlanet planetId={id} />
+                    {/* <br /><ActivateButton /> */}
+                    <IndividualBasePlanetDesktop id={id as string} />
+                </div>
+                <div className="w-3/6 bg-gray-50 overflow-y-auto z-">
+                    <BasePlanetData planetId={{ id: id as string }} />
+                    <EditableBasePlanetData planetId={{ id: id as string }} />
+                    <PostFormCardAnomalyTag planetId={id} onPost={null} />
+                    <ClassificationFeedForIndividualPlanet planetId={{ id: id as string }} />
             </div>
         </div>
-      );
+      );                    
 };