🗽🌧️ ↝ [SSM-28 SSM-1 SSM-32]: Starting with the field guide UI for res…

…tarting/viewing the tutorial, and some new plans and tickets set up for cm.e stations
Signal-K · Oct 24, 2024 · 57216fa · 57216fa
1 parent 2c0b791
commit 57216fa
Show file tree

Hide file tree

Showing 3 changed files with 53 additions and 35 deletions.
diff --git a/app/auth/onlineUsers.tsx b/app/auth/onlineUsers.tsx
@@ -5,23 +5,24 @@ import { useSupabaseClient, useSession } from "@supabase/auth-helpers-react";
 
 export default function OnlineUserList() {
     const supabase = useSupabaseClient();
-    const session = useSession();
-
+    const session = useSession();  // Session must be loaded first
     const [onlineUsers, setOnlineUsers] = useState(0);
 
     useEffect(() => {
+        // Wait until session is ready
+        if (!session?.user?.id) return;
+
         const roomOne = supabase.channel('room_01', {
             config: {
                 presence: {
-                    key: session?.user.id || '',
+                    key: session.user.id,  // Ensure session user id is used correctly
                 },
             },
         });
 
         roomOne
             .on('presence', { event: 'sync' }, () => {
                 const currentPresenceState = roomOne.presenceState();
-                // Update the onlineUsers state with the number of currently online users
                 const onlineUsersCount = Object.keys(currentPresenceState).length;
                 setOnlineUsers(onlineUsersCount);
             })
@@ -37,7 +38,7 @@ export default function OnlineUserList() {
         return () => {
             roomOne.unsubscribe();
         };
-    }, [supabase]);
+    }, [session?.user?.id, supabase]);
 
     return (
         <div className="flex items-center gap-1">

diff --git a/app/tests/page.tsx b/app/tests/page.tsx
@@ -8,14 +8,12 @@ import ProfileCardModal from "@/components/profile/form";
 import { CommunityScienceStation } from "@/components/Structures/Community/StationModal";
 import { CreateCommunityStation } from "@/components/Structures/Build/MakeCommunityStation";
 import StationsOnPlanet from "@/components/Structures/Community/ViewAllStations";
-import OnlineUserList from "../auth/onlineUsers";
 
 export default function TestPage() {
     return (
         <StarnetLayout>
   <CreateCommunityStation />
   <StationsOnPlanet />
-  <OnlineUserList />
         </StarnetLayout>
     );
 };

diff --git a/components/Projects/Satellite/PlanetFour.tsx b/components/Projects/Satellite/PlanetFour.tsx
@@ -142,7 +142,9 @@ export function PlanetFourProject() {
     const [anomaly, setAnomaly] = useState<Anomaly | null>(null);
     const [imageUrl, setImageUrl] = useState<string | null>(null);
     const [loading, setLoading] = useState(true);
+    const [showTutorial, setShowTutorial] = useState(false);
     const [hasMission20000005, setHasMission20000005] = useState(false);
+
     const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL;
 
     useEffect(() => {
@@ -178,6 +180,10 @@ export function PlanetFourProject() {
             setLoading(false); 
         }
     }, [session, supabase]);
+
+    const handleShowTutorial = () => {
+        setShowTutorial(true);
+    };
 
     useEffect(() => {
         const fetchAnomaly = async () => {
@@ -221,34 +227,47 @@ export function PlanetFourProject() {
 
     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="p-4 rounded-md relative w-full">
-                {imageUrl && (
-                    <Card className="w-full max-w-3xl mx-auto">
-                        <CardHeader>
-                            <CardTitle>Image</CardTitle>
-                            <CardDescription>Annotate the image using marker.js</CardDescription>
-                        </CardHeader>
-                        <CardContent className="flex flex-col items-center py-10 space-y-4">
-                            <div className="border border-gray-300 rounded-lg overflow-hidden">
-                                <img
-                                    src={imageUrl}
-                                    alt="Annotation"
-                                    crossOrigin="anonymous"
-                                    className="max-w-full h-auto"
-                                />
-                            </div>
-                        </CardContent>
-                    </Card>
-                )}
-            </div>
-            {imageUrl && (
-                <ClassificationForm
-                    anomalyId={anomaly?.id.toString() || ""}
-                    anomalyType="satellite-planetFour"
-                    missionNumber={200000052}
-                    assetMentioned={imageUrl}
-                    structureItemId={3103}
-                />
+            {!showTutorial ? (
+                <>
+                    <div className="p-4 rounded-md relative w-full">
+                        {imageUrl && (
+                            <Card className="w-full max-w-3xl mx-auto">
+                                <CardHeader>
+                                    <CardTitle>Image</CardTitle>
+                                    <CardDescription>Annotate the image using marker.js</CardDescription>
+                                </CardHeader>
+                                <CardContent className="flex flex-col items-center py-10 space-y-4">
+                                    <div className="border border-gray-300 rounded-lg overflow-hidden">
+                                        <img
+                                            src={imageUrl}
+                                            alt="Annotation"
+                                            crossOrigin="anonymous"
+                                            className="max-w-full h-auto" />
+                                    </div>
+                                </CardContent>
+                            </Card>
+                        )}
+                    </div>
+                    <Button
+                        className="mb-4"
+                        onClick={handleShowTutorial}
+                    >
+                        Show Tutorial
+                    </Button>
+                    {imageUrl && (
+                        <ClassificationForm
+                            anomalyId={anomaly?.id.toString() || ""}
+                            anomalyType="satellite-planetFour"
+                            missionNumber={200000052}
+                            assetMentioned={imageUrl}
+                            structureItemId={3103}
+                        />
+                    )}
+                </>
+            ) : (
+                <div>
+                    <StarterPlanetFour anomalyid={anomaly?.id} />
+                </div>
             )}
         </div>
     );