🥓🧤 ↝ [SSP-9 SSP-29 SSP-30]: Working multiple content/files for DMP

Signal-K · Oct 15, 2024 · 14a56fa · 14a56fa
1 parent c5d4649
commit 14a56fa
Show file tree

Hide file tree

Showing 3 changed files with 72 additions and 50 deletions.
diff --git a/citizen b/citizen
diff --git a/components/Projects/(classifications)/PostForm.tsx b/components/Projects/(classifications)/PostForm.tsx
@@ -128,27 +128,27 @@ const ClassificationForm: React.FC<ClassificationFormProps> = ({
 
   const [hasClassified, setHasClassified] = useState<boolean>(false);
 
-  useEffect(() => {
-    const checkUserClassification = async () => {
-      if (!session?.user?.id || !anomalyId) return;
-
-      const { data, error } = await supabase
-        .from("classifications")
-        .select("id")
-        .eq("author", session.user.id)
-        .eq("anomaly", anomalyId)
-        .single();
-
-      if (data) {
-        setHasClassified(true);
-      }
-      if (error) {
-        console.error("Error checking classification:", error.message);
-      }
-    };
-
-    checkUserClassification();
-  }, [session?.user?.id, anomalyId, supabase]);
+//   useEffect(() => {
+//     const checkUserClassification = async () => {
+//       if (!session?.user?.id || !anomalyId) return;
+
+//       const { data, error } = await supabase
+//         .from("classifications")
+//         .select("id")
+//         .eq("author", session.user.id)
+//         .eq("anomaly", anomalyId)
+//         .single();
+
+//       if (data) {
+//         setHasClassified(true);
+//       }
+//       if (error) {
+//         console.error("Error checking classification:", error.message);
+//       }
+//     };
+
+//     checkUserClassification();
+//   }, [session?.user?.id, anomalyId, supabase]);
 
   useEffect(() => {
     const fetchUserProfile = async () => {

diff --git a/components/Projects/Telescopes/DailyMinorPlanet.tsx b/components/Projects/Telescopes/DailyMinorPlanet.tsx
@@ -131,11 +131,11 @@ export function DailyMinorPlanet() {
     const session = useSession();
 
     const [anomaly, setAnomaly] = useState<Anomaly | null>(null);
-    const [imageUrl, setImageUrl] = useState<string | null>(null);
+    const [imageUrls, setImageUrls] = useState<string[]>([]);
+    const [currentImageIndex, setCurrentImageIndex] = useState<number>(0);
 
     const [loading, setLoading] = useState<boolean>(true);
     const [missionLoading, setMissionLoading] = useState<boolean>(true);
-
     const [hasMission20000003, setHasMission20000003] = useState<boolean | null>(false);
 
     useEffect(() => {
@@ -144,34 +144,31 @@ export function DailyMinorPlanet() {
                 setLoading(false);
                 return;
             }
-    
+
             try {
                 const { data: missionData, error: missionError } = await supabase
                     .from("missions")
                     .select("*")
                     .eq("user", session.user.id)
                     .eq("mission", 20000003)
                     .single();
-
-                console.log("Mission Data:", missionData); 
-
+
                 if (missionError) {
                     throw missionError;
                 }
-    
+
                 setHasMission20000003(!!missionData);
             } catch (error: any) {
                 console.error("Mission error:", error);
                 setHasMission20000003(false);
             } finally {
                 setMissionLoading(false);
-            }
+            };
         };
-    
+
         checkTutorialMission();
     }, [session, supabase]);
 
-    // Fetch anomaly data
     useEffect(() => {
         if (!hasMission20000003 || missionLoading || !session) return;
 
@@ -181,14 +178,22 @@ export function DailyMinorPlanet() {
                     .from("anomalies")
                     .select("*")
                     .eq("anomalySet", "telescope-minorPlanet");
-    
+
                 if (anomalyError) {
                     throw anomalyError;
                 }
-    
+
                 const randomAnomaly = anomalyData[Math.floor(Math.random() * anomalyData.length)] as Anomaly;
                 setAnomaly(randomAnomaly);
-                setImageUrl(`${supabaseUrl}/storage/v1/object/public/telescope/telescope-dailyMinorPlanet/${randomAnomaly.id}.png`);
+
+                // Set URLs for carousel images
+                const imageUrls = [
+                    `${supabaseUrl}/storage/v1/object/public/telescope/telescope-dailyMinorPlanet/${randomAnomaly.id}/1.png`,
+                    `${supabaseUrl}/storage/v1/object/public/telescope/telescope-dailyMinorPlanet/${randomAnomaly.id}/2.png`,
+                    `${supabaseUrl}/storage/v1/object/public/telescope/telescope-dailyMinorPlanet/${randomAnomaly.id}/3.png`,
+                    `${supabaseUrl}/storage/v1/object/public/telescope/telescope-dailyMinorPlanet/${randomAnomaly.id}/4.png`
+                ];
+                setImageUrls(imageUrls);
             } catch (error: any) {
                 console.error("Error fetching anomaly", error.message);
                 setAnomaly(null);
@@ -200,42 +205,59 @@ export function DailyMinorPlanet() {
         fetchAnomaly();
     }, [hasMission20000003, missionLoading, session, supabase]);
 
-    // Handle loading states
+    const handlePrevious = () => {
+        setCurrentImageIndex((prevIndex) => (prevIndex === 0 ? imageUrls.length - 1 : prevIndex - 1));
+    };
+
+    const handleNext = () => {
+        setCurrentImageIndex((prevIndex) => (prevIndex === imageUrls.length - 1 ? 0 : prevIndex + 1));
+    };
+
     if (loading || missionLoading) {
         return <div>Loading...</div>;
     }
 
-    // Render conditionally based on mission
     if (!hasMission20000003) {
-        return <StarterDailyMinorPlanet anomalyid={anomaly?.id || 100879215} />;
-    }
+        return <StarterDailyMinorPlanet anomalyid={anomaly?.id || 90670192} />;
+    };
 
-    // Render anomaly or no anomaly found message
     if (!anomaly) {
         return (
             <div>
                 <p>No anomaly found.</p>
             </div>
         );
-    }
+    };
 
     return (
         <div className="flex flex-col items-start gap-4 pb-4 relative w-full max-w-lg">
             <div className="p-4 rounded-md relative w-full">
-                {imageUrl && (
-                    <img
-                        src={imageUrl}
-                        alt="Anomaly"
-                        className="w-full h-full object-contain"
-                    />
+                {imageUrls.length > 0 && (
+                    <div className="relative">
+                        <img
+                            src={imageUrls[currentImageIndex]}
+                            alt={`Anomaly ${currentImageIndex + 1}`}
+                            className="w-full h-full object-contain"
+                        />
+                        <button onClick={handlePrevious} className="absolute left-0 top-1/2 -translate-y-1/2 p-2 bg-gray-600 rounded-full">❮</button>
+                        <button onClick={handleNext} className="absolute right-0 top-1/2 -translate-y-1/2 p-2 bg-gray-600 rounded-full">❯</button>
+                        <div className="flex justify-center mt-2">
+                            {imageUrls.map((_, index) => (
+                                <span
+                                    key={index}
+                                    className={`h-2 w-2 rounded-full mx-1 ${index === currentImageIndex ? 'bg-blue-500' : 'bg-gray-300'}`}
+                                />
+                            ))}
+                        </div>
+                    </div>
                 )}
             </div>
-            {imageUrl && (
+            {imageUrls.length > 0 && (
                 <ClassificationForm
-                    anomalyId={anomaly?.id.toString() || ""}
+                    anomalyId={anomaly?.id.toString() || "90670192"}
                     anomalyType='telescope-minorPlanet'
                     missionNumber={20000003}
-                    assetMentioned={imageUrl}
+                    assetMentioned={imageUrls[currentImageIndex]}
                     structureItemId={3103}
                 />
             )}