🐇🎧 ↝ [SSC-88 SSC-92 SSC-91 SSC-90]: Beginning CAC integration for zoodex

app/planets/[id]/page.tsx

@@ -22,7 +22,7 @@ interface Classification {
   tags?: string[];
   images?: string[];
   relatedClassifications?: Classification[];
-}
+};
 
 type Anomaly = {
   id: number;

app/tests/page.tsx

@@ -3,11 +3,12 @@
 import { FullPlanetGenerator } from "@/components/Data/Generator/Astronomers/PlanetHunters/V2/full-planet-generator";
 import { SimplePlanetGenerator } from "@/components/Data/Generator/Astronomers/PlanetHunters/Simple/simple-planet-generator";
 import FileOrWebcamUpload from "@/components/Projects/Zoodex/Upload/GptClassification";
+import { ClickACoral } from "@/components/Projects/Zoodex/click-a-coral";
 
 export default function TestPage() {
   return (
     <div className="min-h-screen bg-black text-white p-4 space-y-8">
-      <FileOrWebcamUpload />
+      <ClickACoral />
     </div>
   );
 };

components/Projects/Zoodex/click-a-coral.tsx

@@ -0,0 +1,111 @@
+'use client';
+
+import React, { useEffect, useState } from "react";
+import { useSupabaseClient, useSession } from "@supabase/auth-helpers-react";
+import { useActivePlanet } from "@/context/ActivePlanet";
+import ClassificationForm from "../(classifications)/PostForm";
+import { Anomaly } from "../Telescopes/Transiting";
+
+interface ZoodexProps {
+    anomalyid: string;
+};
+
+export function ClickACoral() {
+    const supabase = useSupabaseClient();
+    const session = useSession();
+
+    const { activePlanet } = useActivePlanet();
+
+    const [anomaly, setAnomaly] = useState<Anomaly | null>(null);
+    const [imageUrl, setImageUrl] = useState<string | null>(null);
+    const [showTutorial, setShowTutorial] = useState<boolean>(false);
+
+    const [loading, setLoading] = useState(true);
+
+    useEffect(() => {
+        async function fetchAnomaly() {
+            if (!session) {
+                setLoading(false);
+                return;
+            };
+
+            try {
+                const { data: anomalyData, error: anomalyError } = await supabase
+                    .from("anomalies")
+                    .select("*")
+                    .eq("anomalySet", "zoodex-clickACoral")
+
+                if (anomalyError) {
+                    throw anomalyError;
+                };
+
+                if (!anomalyData) {
+                    setAnomaly(null);
+                    setLoading(false);
+                    return;
+                };
+
+                const randomAnomaly = anomalyData[Math.floor(Math.random() * anomalyData.length)];
+                setAnomaly(randomAnomaly);
+
+                const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL;
+                setImageUrl(`${supabaseUrl}/storage/v1/object/public/zoodex/zoodex-clickACoral/${randomAnomaly.id}.png`);
+            } catch (error: any) {
+                console.error(error);
+                setLoading(false);
+            } finally {
+                setLoading(false);
+            };
+        };
+
+        fetchAnomaly();
+    }, [session, supabase, activePlanet]);
+
+    if (loading) {
+        return (
+            <div>
+                <p>Loading...</p>
+            </div>
+        );
+    };
+
+    if (!anomaly) {
+        return (
+            <div>
+                <p>The owls are sleeping, try again later</p>
+            </div>
+        );
+    };
+
+    return (
+        <div className="flex flex-col items-start gap-4 pb-4 relative w-full max-w-lg overflow-y-auto max-h-[90vh] rounded-lg">
+            <div className="pb-4 rounded-md relative w-full">
+                <center>
+                    <button
+                        onClick={() => setShowTutorial((prev) => (!prev))}
+                        className="mb--4 px-4 py-2 bg=[#D689E3] text-white rounded"
+                    >
+                        {showTutorial ? "Hide" : "Show"} Tutorial
+                    </button>
+
+                    {/* {showTutorial && anomaly && <ClickACoralTutorial anomalyId={anomaly.id.toString()} />} */}
+
+                    {!showTutorial && (
+                        <>
+                            <img src={imageUrl || ''} alt={anomaly.content} className="w-full h-64 object-cover" />
+
+                            <p>{imageUrl}</p>
+                            <ClassificationForm
+                                anomalyId={anomaly.id.toString()}
+                                anomalyType="zoodex-clickACoral"
+                                missionNumber={100000039}
+                                assetMentioned={imageUrl || ""}
+                                structureItemId={3104}
+                            />
+                        </>
+                    )}
+                </center>
+            </div>
+        </div>
+    );
+};

types/Annotation.tsx

@@ -42,6 +42,8 @@ export const P4CATEGORIES: Record<P4Category, CategoryConfig> = {
   },
 };
 
+export type CACCategory = 'antipathes atlantica';
+
 export type PHCategory = 'Noise' | 'Clear dip' | 'Missing' | 'Custom';
 export const PHCATEGORIES: Record<PHCategory, CategoryConfig> = {
   Noise: {