🥼🦷 ↝ [SSM-16 SSM-21]: Feed now shows configuration & anomalies data w…

…/ comments for eventual surveyor implementation

app/starnet/feed/page.tsx

@@ -19,33 +19,33 @@ export default function Starnet() {
       setLoading(false);
       return;
     }
-  
+
     setLoading(true);
     setError(null);
     try {
       const { data, error } = await supabase
         .from("classifications")
-        .select("*, classificationConfiguration") 
+        .select("*, classificationConfiguration, classificationtype")
         .eq("author", session.user.id)
         .order("created_at", { ascending: false });
-  
+
       if (error) throw error;
-  
+
       const processedData = data.map((classification) => {
         const media = classification.media;
         let images: string[] = [];
-  
+
         if (Array.isArray(media) && media.length === 2 && typeof media[1] === "string") {
           images.push(media[1]);
         } else if (media && media.uploadUrl) {
           images.push(media.uploadUrl);
         }
-  
-        const votes = classification.classificationConfiguration?.votes || 0; // Fetch votes
-  
+
+        const votes = classification.classificationConfiguration?.votes || 0;
+
         return { ...classification, images, votes };
       });
-  
+
       setClassifications(processedData);
     } catch (error) {
       console.error("Error fetching classifications:", error);
@@ -62,17 +62,17 @@ export default function Starnet() {
   const handleVote = async (classificationId: number, currentConfig: any) => {
     try {
       const currentVotes = currentConfig?.votes || 0;
-  
+
       const updatedConfig = {
         ...currentConfig,
         votes: currentVotes + 1,
       };
-  
+
       const { error } = await supabase
         .from("classifications")
         .update({ classificationConfiguration: updatedConfig })
         .eq("id", classificationId);
-  
+
       if (error) {
         console.error("Error updating classificationConfiguration:", error);
       } else {
@@ -87,7 +87,7 @@ export default function Starnet() {
     } catch (error) {
       console.error("Error voting:", error);
     }
-  };  
+  };
 
   return (
     <StarnetLayout>
@@ -98,18 +98,21 @@ export default function Starnet() {
           <p>{error}</p>
         ) : (
           classifications.map((classification) => (
-<PostCardSingle
-  key={classification.id}
-  classificationId={classification.id}
-  title={classification.title}
-  author={classification.author}
-  content={classification.content}
-  votes={classification.votes || 0} 
-  category={classification.category}
-  tags={classification.tags || []}
-  images={classification.images || []}
-  onVote={() => handleVote(classification.id, classification.classificationConfiguration)}
-/>
+            <PostCardSingle
+              key={classification.id}
+              classificationId={classification.id}
+              title={classification.title}
+              author={classification.author}
+              content={classification.content}
+              votes={classification.votes || 0}
+              category={classification.category}
+              tags={classification.tags || []}
+              images={classification.images || []}
+              anomalyId={classification.anomaly}
+              classificationConfig={classification.classificationConfiguration}
+              classificationType={classification.classificationtype} // Pass classificationtype to child
+              onVote={() => handleVote(classification.id, classification.classificationConfiguration)}
+            />
           ))
         )}
       </div>

components/Projects/(classifications)/Collections/Classification.tsx

@@ -18,7 +18,6 @@ import { zoodexSouthCoastFaunaRecovery,
   diskDetectorClassificationOptions, 
   zoodexIguanasFromAboveClassificationOptions, 
   zoodexBurrowingOwlClassificationOptions, 
-  sunspotsConfigurationTemporary 
 } from '@/content/Classifications/Options';
 
 interface KeyStat {

components/Projects/(classifications)/PostForm.tsx

@@ -9,21 +9,14 @@ import { ClassificationOutput } from "./ClassificationResults";
 
 import {
   zoodexSouthCoastFaunaRecovery,
-  cloudClassificationOptions,
-  initialCloudClassificationOptions,
   roverImgClassificationOptions,
   lidarEarthCloudsReadClassificationOptions,
-  lidarEarthCloudsUploadClassificationOptions,
   planetClassificationOptions,
   planktonPortalClassificationOptions,
-  penguinWatchClassificationOptions,
   diskDetectorClassificationOptions,
   zoodexIguanasFromAboveClassificationOptions,
   zoodexBurrowingOwlClassificationOptions,
-  sunspotsConfigurationTemporary,
-  cloudClassificationOptionsThree,
-  cloudClassificationOptionsTwo,
-  cloudClassificationOptionsOne,
+  cloudClassificationOptionsOne, cloudClassificationOptionsTwo, cloudClassificationOptionsThree,
   automatonaiForMarsOptions,
   DailyMinorPlanetOptions,
   PlanetFourOptions,
@@ -124,7 +117,6 @@ const ClassificationForm: React.FC<ClassificationFormProps> = ({
       case "lidar-earthCloudRead":
         return [lidarEarthCloudsReadClassificationOptions];
       case "sunspot":
-        // return sunspotsConfigurationTemporary;
         return [];
       case "satellite-planetFour":
         return [PlanetFourOptions];

content/Classifications/Options.ts

@@ -460,19 +460,4 @@ export const zoodexIguanasFromAboveClassificationOptions: ClassificationOption[]
         id: 4,
         text: "Partial iguana",
     },
-];
-
-export const sunspotsConfigurationTemporary: ClassificationOption[] = [
-    {
-        id: 1,
-        text: "No sunspots",
-    },
-    {
-        id: 2,
-        text: "1 sunspot",
-    },
-    {
-        id: 3,
-        text: "Multiple sunspots",
-    },
-]; // text-only?
+];

content/Comments/CommentSingle.tsx

@@ -11,8 +11,8 @@ interface CommentCardProps {
   createdAt: string;
   replyCount: number;
   parentCommentId?: number | null;
-}
-
+};
+ 
 export function CommentCard({ author, content, createdAt, replyCount, parentCommentId }: CommentCardProps) {
   return (
     <Card className="w-full max-w-2xl mx-auto my-4 squiggly-connector bg-card text-card-foreground border-primary">

content/Posts/PostSingle.tsx

@@ -1,24 +1,37 @@
-"use client";
-
 import { useEffect, useState } from "react";
 import { Card, CardContent, CardFooter, CardHeader, CardTitle } from "@/components/ui/card";
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 import { Button } from "@/components/ui/button";
-import { ThumbsUp, MessageSquare, GitFork } from "lucide-react";
+import { ThumbsUp, MessageSquare } from "lucide-react";
 import { Badge } from "@/components/ui/badge";
 import { CommentCard } from "../Comments/CommentSingle";
 import { CommentForm } from "../Comments/CommentForm";
 import { useSupabaseClient } from "@supabase/auth-helpers-react";
 
+import { 
+  DailyMinorPlanetOptions,
+  PlanetFourOptions,
+  automatonaiForMarsOptions,
+  cloudClassificationOptionsOne, cloudClassificationOptionsTwo, cloudClassificationOptionsThree,
+  planetClassificationOptions,
+  diskDetectorClassificationOptions,
+  roverImgClassificationOptions,
+  zoodexBurrowingOwlClassificationOptions,
+  zoodexIguanasFromAboveClassificationOptions,
+} from "../Classifications/Options";
+
 interface PostCardSingleProps {
   classificationId: number;
   title: string;
+  anomalyId: string;
   author: string;
   content: string;
   votes: number;
   category: string;
   tags: string[];
+  classificationConfig: any;
   images: string[];
+  classificationType: string;
   onVote: () => void;
 }
 
@@ -30,12 +43,20 @@ export function PostCardSingle({
   votes,
   category,
   tags,
+  anomalyId,
+  classificationConfig,
   images,
+  classificationType,
   onVote,
 }: PostCardSingleProps) {
   const supabase = useSupabaseClient();
   const [comments, setComments] = useState<any[]>([]);
   const [loadingComments, setLoadingComments] = useState<boolean>(true);
+  const [voteCount, setVoteCount] = useState(votes);
+
+  useEffect(() => {
+    fetchComments();
+  }, [classificationId]);
 
   const fetchComments = async () => {
     setLoadingComments(true);
@@ -54,12 +75,6 @@ export function PostCardSingle({
     }
   };
 
-  useEffect(() => {
-    fetchComments();
-  }, [classificationId]);
-
-  const [voteCount, setVoteCount] = useState(votes);
-
   const handleVoteClick = () => {
     onVote();
     setVoteCount((prevCount) => prevCount + 1);
@@ -69,6 +84,59 @@ export function PostCardSingle({
     fetchComments();
   };
 
+  const getClassificationOptions = (classificationType: string) => {
+    switch (classificationType) {
+      case "planet":
+        return planetClassificationOptions;
+      case "roverImg":
+        return roverImgClassificationOptions;
+      case "cloud":
+        return [
+          ...cloudClassificationOptionsOne,
+          ...cloudClassificationOptionsTwo,
+          ...cloudClassificationOptionsThree,
+        ];
+      case "zoodex-burrowingOwl":
+        return zoodexBurrowingOwlClassificationOptions;
+      case "zoodex-iguanasFromAbove":
+        return zoodexIguanasFromAboveClassificationOptions;
+      case "DiskDetective":
+        return diskDetectorClassificationOptions;
+      case "telescope-minorPlanet":
+        return DailyMinorPlanetOptions;
+      case "automaton-aiForMars":
+        return automatonaiForMarsOptions;
+      default:
+        return [];
+    }
+  };
+
+  const renderClassificationOptions = () => {
+    if (!classificationConfig || !classificationConfig.classificationOptions) {
+      return null;
+    }
+
+    const selectedOptions = classificationConfig.classificationOptions[""] || {};
+    const options = getClassificationOptions(classificationType);
+
+    return (
+      <div className="mt-4 p-4 border border-secondary rounded">
+        <h3 className="text-lg font-bold">Classification Options</h3>
+        <ul className="list-none">
+          {options.map((option) => {
+            const isSelected = selectedOptions[option.id] || false;
+            const optionColor = isSelected ? "bg-green-200" : "bg-red-200";
+            return (
+              <li key={option.id} className={`p-2 rounded ${optionColor}`}>
+                {option.text}
+              </li>
+            );
+          })}
+        </ul>
+      </div>
+    );
+  };
+
   return (
     <Card className="w-full max-w-2xl mx-auto my-8 squiggly-connector bg-card text-card-foreground border-primary">
       <CardHeader>
@@ -96,41 +164,38 @@ export function PostCardSingle({
             <img key={index} src={image} alt={`Media ${index + 1}`} className="w-full h-auto max-w-xs object-cover" />
           ))}
         </div>
+
+        {classificationType && (
+          <div className="mt-4 p-4 border border-secondary rounded">
+            <h3 className="text-lg font-bold">Classification Type</h3>
+            <p>{classificationType}</p>
+          </div>
+        )}
+
+        {renderClassificationOptions()}
       </CardContent>
-      <CardFooter className="flex justify-between">
-        <Button variant="ghost" size="sm" onClick={handleVoteClick}>
-          <ThumbsUp className="mr-2 h-4 w-4" />
-          {voteCount}
+      <CardFooter className="flex items-center justify-between">
+        <Button onClick={handleVoteClick} size="sm">
+          <ThumbsUp className="mr-2" /> {voteCount}
         </Button>
-        <Button variant="ghost" size="sm">
-          <MessageSquare className="mr-2 h-4 w-4" />
-          {comments.length} Comments
-        </Button>
-        <Button variant="ghost" size="sm">
-          <GitFork className="mr-2 h-4 w-4" />
-          Fork
+        <Button size="sm">
+          <MessageSquare className="mr-2" /> {comments.length}
         </Button>
       </CardFooter>
-      <div className="mt-8">
+      <CardContent>
         {loadingComments ? (
           <p>Loading comments...</p>
-        ) : comments.length === 0 ? (
-          <p>No comments yet.</p>
-        ) : (
+        ) : comments.length > 0 ? (
           comments.map((comment) => (
-            <CommentCard
-              key={comment.id}
-              author={comment.author}
-              content={comment.content}
-              createdAt={comment.created_at}
-              replyCount={0}
-            />
+            <CommentCard key={comment.id} {...comment} />
           ))
+        ) : (
+          <p>No comments yet.</p>
         )}
-      </div>
-      <div className="mt-8">
+      </CardContent>
+      <CardFooter>
         <CommentForm classificationId={classificationId} onCommentAdded={handleCommentAdded} />
-      </div>
+      </CardFooter>
     </Card>
   );
 };