🏂🐦 ↝ [SSM-17 SSM-19 SSC-16]: Travel mechanism updated with new planet…

… generator in the works, same with post cards

app/tests/page.tsx

@@ -1,12 +1,15 @@
 "use client";
 
+import { DiscoveryCardsByUserAndAnomaly } from "@/components/(classifications)/Collections/ByAnomaly";
+import SwitchPlanet from "@/components/(scenes)/travel/SolarSystem";
 import AllClassifications from "@/content/Starnet/YourClassifications";
 import React from "react";
 
 export default function TestPage() {
     return (
         <div>
-            <AllClassifications />
+            <SwitchPlanet />
+            <DiscoveryCardsByUserAndAnomaly anomalyId={40} />
         </div>
     );
 };

components/(classifications)/Collections/ByAnomaly.tsx

@@ -6,28 +6,69 @@ import { DiscoveryCardSingle } from './Classification';
 
 interface DiscoveryCardsByUserAndAnomalyProps {
   anomalyId: number;
-};
+}
 
 export function DiscoveryCardsByUserAndAnomaly({ anomalyId }: DiscoveryCardsByUserAndAnomalyProps) {
   const supabase = useSupabaseClient();
-const session = useSession();
+  const session = useSession();
 
   const [classifications, setClassifications] = useState<any[]>([]);
+  const [totalClassifications, setTotalClassifications] = useState<number | null>(null);
+  const [userClassificationsCount, setUserClassificationsCount] = useState<number | null>(null);
   const [loading, setLoading] = useState<boolean>(true);
   const [error, setError] = useState<string | null>(null);
 
   useEffect(() => {
     const fetchClassifications = async () => {
       setLoading(true);
       setError(null);
+
+      // Check if session is available
+      if (!session?.user?.id) {
+        setError('No user session found.');
+        setLoading(false);
+        return;
+      }
+
       try {
-        const { data, error } = await supabase
+        // Fetch total classifications for this anomaly
+        const { count: totalCount, error: totalError } = await supabase
+          .from('classifications')
+          .select('id', { count: 'exact' })
+          .eq('anomaly', anomalyId);
+
+        if (totalError) {
+          console.error('Error fetching total classifications:', totalError);
+          throw totalError;
+        }
+
+        setTotalClassifications(totalCount);
+
+        // Fetch the number of classifications the user has made for this anomaly
+        const { count: userCount, error: userError } = await supabase
+          .from('classifications')
+          .select('id', { count: 'exact' })
+          .eq('author', session.user.id)
+          .eq('anomaly', anomalyId);
+
+        if (userError) {
+          console.error('Error fetching user classifications count:', userError);
+          throw userError;
+        }
+
+        setUserClassificationsCount(userCount);
+
+        // Fetch the actual classification data for the user
+        const { data, error: classificationsError } = await supabase
           .from('classifications')
           .select('id')
-          .eq('author', session?.user.id)
-          .eq('anomaly', anomalyId); 
+          .eq('author', session.user.id)
+          .eq('anomaly', anomalyId);
 
-        if (error) throw error;
+        if (classificationsError) {
+          console.error('Error fetching classifications data:', classificationsError);
+          throw classificationsError;
+        }
 
         setClassifications(data);
       } catch (error) {
@@ -39,17 +80,26 @@ const session = useSession();
     };
 
     fetchClassifications();
-  }, [anomalyId, supabase]);
+  }, [anomalyId, supabase, session?.user?.id]);
 
   if (loading) return <p>Loading...</p>;
   if (error) return <p>{error}</p>;
-  if (classifications.length === 0) return <p>No classifications found for this anomaly by user</p>;
 
   return (
     <div className="flex flex-col space-y-4">
-      {classifications.map((classification) => (
-        <DiscoveryCardSingle key={classification.id} classificationId={classification.id} />
-      ))}
+      {/* Display total classifications and user-specific count */}
+      <div className="mb-4">
+        <p>Total classifications for this anomaly: {totalClassifications ?? 'N/A'}</p>
+        <p>Your classifications for this anomaly: {userClassificationsCount ?? 'N/A'}</p>
+      </div>
+
+      {classifications.length === 0 ? (
+        <p>No classifications found for this anomaly by user</p>
+      ) : (
+        classifications.map((classification) => (
+          <DiscoveryCardSingle key={classification.id} classificationId={classification.id} />
+        ))
+      )}
     </div>
   );
 };

components/(classifications)/Collections/Classification.tsx

@@ -19,7 +19,7 @@ import { zoodexSouthCoastFaunaRecovery,
   zoodexIguanasFromAboveClassificationOptions, 
   zoodexBurrowingOwlClassificationOptions, 
   sunspotsConfigurationTemporary 
-} from '../PostForm';
+} from '@/content/Classifications/Options';
 
 interface KeyStat {
   label: string;
@@ -47,6 +47,34 @@ const generateImagePlaceholder = (name: string) => {
   return canvas.toDataURL();
 };
 
+interface DiscoveryCardSingleProps {
+  classificationId: number;
+};
+
+const extractImageUrls = (media: any): string[] => {
+  let imageUrls: string[] = [];
+
+  if (typeof media === 'string') {
+    try {
+      const mediaObj = JSON.parse(media);
+      if (mediaObj.uploadUrl) {
+        imageUrls.push(mediaObj.uploadUrl);
+      }
+    } catch {
+      // If it's not a valid JSON, do nothing
+    }
+  } else if (Array.isArray(media)) {
+    // Flatten the array and extract URLs
+    media.flat().forEach((item) => {
+      if (typeof item === 'string' && item.startsWith('http')) {
+        imageUrls.push(item);
+      }
+    });
+  }
+
+  return imageUrls;
+};
+
 export function DiscoveryCardSingle({ classificationId }: DiscoveryCardSingleProps) {
   const supabase = useSupabaseClient();
   const [classification, setClassification] = useState<any>(null);
@@ -79,16 +107,23 @@ export function DiscoveryCardSingle({ classificationId }: DiscoveryCardSinglePro
   if (!classification) return <p>No classification found.</p>;
 
   const { content, classificationtype, created_at, media, anomaly, classificationConfiguration } = classification;
-  const profileImage = media.length > 0 ? media[0] : undefined;
   const discoveredOn = new Date(created_at).toLocaleDateString();
   const parentAnomaly = anomaly ? `Anomaly ID: ${anomaly}` : 'Earth';
 
+  // Extract URLs from the media column
+  const imageUrls = extractImageUrls(media);
+
   return (
     <Card className="w-full max-w-2xl bg-gradient-to-br from-slate-100 to-slate-200 text-slate-900 overflow-hidden relative border-2 border-slate-300 rounded-xl shadow-lg">
       <CardContent className="p-6 flex">
         <div className="w-1/3 pr-4 border-r border-slate-300">
           <div className="aspect-square rounded-lg overflow-hidden mb-4 shadow-md">
-            <img src={profileImage || generateImagePlaceholder(content)} alt={content} className="w-full h-full object-cover" />
+            {/* Display first image or placeholder */}
+            {imageUrls.length > 0 ? (
+              <img src={imageUrls[0]} alt="Classification Media" className="w-full h-full object-cover" />
+            ) : (
+              <img src={generateImagePlaceholder(content)} alt={content} className="w-full h-full object-cover" />
+            )}
           </div>
           <h2 className="text-2xl font-bold mb-2">{content}</h2>
           <Badge variant="outline" className="bg-slate-800 text-white">
@@ -108,15 +143,27 @@ export function DiscoveryCardSingle({ classificationId }: DiscoveryCardSinglePro
             <div className="mt-4">
               <h3 className="font-semibold">Classification Configuration:</h3>
               <pre>{JSON.stringify(classificationConfiguration, null, 2)}</pre>
-              <ClassificationOptions classificationConfiguration={classificationConfiguration} />
             </div>
+
+            {/* Display all images from the media */}
+            {imageUrls.length > 1 && (
+              <div className="mt-4">
+                <h3 className="font-semibold">Additional Media:</h3>
+                <div className="grid grid-cols-2 gap-2">
+                  {imageUrls.slice(1).map((url, index) => (
+                    <img key={index} src={url} alt={`Media ${index + 1}`} className="w-full h-auto object-cover rounded-lg shadow-md" />
+                  ))}
+                </div>
+              </div>
+            )}
           </div>
         </div>
       </CardContent>
     </Card>
   );
 };
 
+
 interface ClassificationConfiguration {
   [key: string]: string | number | boolean; 
 }