🚵🏻‍♀️🌈 ↝ [SSP-39 SSP-42]: Generators can now show in missions inside …

…alternate post card views
Signal-K · Dec 27, 2024 · 456666e · 456666e
1 parent 0f6b300
commit 456666e
Show file tree

Hide file tree

Showing 7 changed files with 373 additions and 9 deletions.
diff --git a/components/Structures/Missions/Astronomers/PlanetHunters/PlanetHunters.tsx b/components/Structures/Missions/Astronomers/PlanetHunters/PlanetHunters.tsx
@@ -1,9 +1,10 @@
 import { useEffect, useState } from "react";
 import { useSupabaseClient, useSession } from "@supabase/auth-helpers-react";
-import { TelescopeIcon, RadioIcon, SpeakerIcon, DiscAlbum, PersonStandingIcon } from "lucide-react";
+import { TelescopeIcon, RadioIcon, SpeakerIcon, DiscAlbum, PersonStandingIcon, Paintbrush2 } from "lucide-react";
 import PlanetTypeCommentForm from "./PlanetType";
 import { StarterTelescopeTess } from "@/components/Projects/Telescopes/Transiting";
 import VotePlanetClassifictions from "./PHVote";
+import PHClassificationGenerator from "./PlanetMaker";
 
 interface MissionStep {
   id: number;
@@ -155,9 +156,9 @@ const PlanetHuntersSteps = () => {
           },
           {
             id: 5,
-            title: "Demo Mission for Chapter 3",
-            description: "This is a demo mission to simulate progress in chapter 3.",
-            icon: PersonStandingIcon,
+            title: "Make your own planet design",
+            description: "You're now able to start creating visual representations of your discoveries. These will become more advanced and accurate the more data you discover",
+            icon: Paintbrush2,
             action: () => {},
             completedCount: 0,
             color: "text-yellow-500",
@@ -193,7 +194,7 @@ const PlanetHuntersSteps = () => {
               {selectedMission.id === 2 && <StarterTelescopeTess />}
               {selectedMission.id === 3 && <PlanetTypeCommentForm />}
               {selectedMission.id === 4 && <VotePlanetClassifictions />}
-              {selectedMission.id === 5 && <div>Demo Mission for Chapter 3</div>}
+              {selectedMission.id === 5 && <PHClassificationGenerator />}
             </center>
           </div>
         </div>

diff --git a/components/Structures/Missions/Astronomers/PlanetHunters/PlanetMaker.tsx b/components/Structures/Missions/Astronomers/PlanetHunters/PlanetMaker.tsx
@@ -0,0 +1,99 @@
+"use client";
+
+import React, { useEffect, useState } from "react";
+import { PostCardSingleWithGenerator } from "@/content/Posts/PostWithGen";
+import { useSession, useSupabaseClient } from "@supabase/auth-helpers-react";
+
+interface Classification {
+    id: number;
+    created_at: string;
+    content: string | null; 
+    author: string | null;
+    anomaly: number | null;
+    media: any | null; 
+    classificationtype: string | null;
+    classificationConfiguration: any | null; 
+};
+
+export default function PHClassificationGenerator() {
+    const supabase = useSupabaseClient();
+    const session = useSession();
+
+    const [classifications, setClassifications] = useState<any[]>([]);
+    const [loading, setLoading] = useState<boolean>(true);
+    const [error, setError] = useState<string | null>(null);
+
+    const fetchClassifications = async () => {
+        if (!session?.user) {
+          setError("User session not found.");
+          setLoading(false);
+          return;
+        };
+
+        setLoading(true);
+        setError(null);
+        try {
+          const { data, error } = await supabase
+            .from('classifications')
+            .select('*')
+            .eq("author", session.user.id)
+            .eq('classificationtype', 'planet')
+            .order('created_at', { ascending: false }) as { data: Classification[]; error: any };
+
+          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;
+
+            return { ...classification, images, votes };
+          });
+
+          setClassifications(processedData);
+        } catch (error) {
+          console.error("Error fetching classifications:", error);
+          setError("Failed to load classifications.");
+        } finally {
+          setLoading(false);
+        };
+    };  
+
+    useEffect(() => {
+        fetchClassifications();
+    }, [session]);
+
+    return (
+        <div className="space-y-8">
+            {loading ? (
+                <p>Loading classifications</p>
+            ) : error ? (
+                <p>{error}</p>
+            ) : (
+                classifications.map((classification) => (
+                    <PostCardSingleWithGenerator
+                    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}
+                    />
+                ))
+            )}
+        </div>
+    );
+};
diff --git a/components/Structures/Missions/Meteorologists/Cloudspotting/CloudMaker.tsx b/components/Structures/Missions/Meteorologists/Cloudspotting/CloudMaker.tsx
@@ -0,0 +1,99 @@
+"use client";
+
+import React, { useEffect, useState } from "react";
+import { PostCardSingleWithGenerator } from "@/content/Posts/PostWithGen";
+import { useSession, useSupabaseClient } from "@supabase/auth-helpers-react";
+
+interface Classification {
+    id: number;
+    created_at: string;
+    content: string | null; 
+    author: string | null;
+    anomaly: number | null;
+    media: any | null; 
+    classificationtype: string | null;
+    classificationConfiguration: any | null; 
+};
+
+export default function CloudClassificationGenerator() {
+    const supabase = useSupabaseClient();
+    const session = useSession();
+
+    const [classifications, setClassifications] = useState<any[]>([]);
+    const [loading, setLoading] = useState<boolean>(true);
+    const [error, setError] = useState<string | null>(null);
+
+    const fetchClassifications = async () => {
+        if (!session?.user) {
+          setError("User session not found.");
+          setLoading(false);
+          return;
+        };
+
+        setLoading(true);
+        setError(null);
+        try {
+          const { data, error } = await supabase
+            .from('classifications')
+            .select('*')
+            .eq("author", session.user.id)
+            .eq('classificationtype', 'cloud')
+            .order('created_at', { ascending: false }) as { data: Classification[]; error: any };
+
+          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;
+
+            return { ...classification, images, votes };
+          });
+
+          setClassifications(processedData);
+        } catch (error) {
+          console.error("Error fetching classifications:", error);
+          setError("Failed to load classifications.");
+        } finally {
+          setLoading(false);
+        };
+    };  
+
+    useEffect(() => {
+        fetchClassifications();
+    }, [session]);
+
+    return (
+        <div className="space-y-8">
+            {loading ? (
+                <p>Loading classifications</p>
+            ) : error ? (
+                <p>{error}</p>
+            ) : (
+                classifications.map((classification) => (
+                    <PostCardSingleWithGenerator
+                    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}
+                    />
+                ))
+            )}
+        </div>
+    );
+};
diff --git a/components/Structures/Missions/Meteorologists/Cloudspotting/CloudSignal.tsx b/components/Structures/Missions/Meteorologists/Cloudspotting/CloudSignal.tsx
@@ -322,7 +322,7 @@ export default function CloudSignal() {
                 onClick={() => removeCloud(cloud.id)}
               >
                 <Trash2 className="w-4 h-4" />
-              </Button>
+              </Button> 
             </div>
           ))}
         </div>

diff --git a/components/Structures/Missions/Meteorologists/Cloudspotting/CloudspottingOnMars.tsx b/components/Structures/Missions/Meteorologists/Cloudspotting/CloudspottingOnMars.tsx
@@ -1,9 +1,10 @@
 import { useEffect, useState } from "react";
 import { useSupabaseClient, useSession } from "@supabase/auth-helpers-react";
 import MissionShell from "../../BasePlate";
-import { CloudCogIcon, FolderCog, Vote } from "lucide-react";
+import { CloudCogIcon, FolderCog, PaintBucket, Vote } from "lucide-react";
 import { StarterLidar } from "@/components/Projects/Lidar/Clouds";
 import VoteCoMClassifications from "./CoMVote";
+import CloudClassificationGenerator from "./CloudMaker";
 
 interface Mission {
     id: number;
@@ -75,13 +76,27 @@ const CloudspottingOnMars = () => {
                 shadow: false,
                 action: () => [],
             },
+            {
+                id: 4,
+                chapter: 2,
+                title: "Create a cloud representation",
+                description:
+                    "You can now add a visual representation of the cloud to your original classification",
+                icon: PaintBucket,
+                points: 1,
+                completedCount: 0,
+                internalComponent: () => <CloudClassificationGenerator />,
+                color: 'text-green-300',
+                shadow: false,
+                action: () => [],
+            },
         ];
     };
 
     useEffect(() => {
         if (!session) {
             return;
-        }
+        };
 
         const fetchMissionPoints = async (
             session: any,

diff --git a/components/Structures/Missions/Meteorologists/Cloudspotting/CoMVote.tsx b/components/Structures/Missions/Meteorologists/Cloudspotting/CoMVote.tsx
@@ -68,7 +68,7 @@ export default function VotePlanetClassifictions() {
 
     useEffect(() => {
         fetchClassifications();
-    }, [session])
+    }, [session]);
 
     const handleVote = async (classificationId: number, currentConfig: any) => {
         try {