🦑🕺🏾 ↝ [SSM-21 SSM-61 SSM-41]: Combining classifications & post/anomaly cards

Author: Gizmotronn

app/tests/page.tsx

@@ -7,11 +7,14 @@ import InventoryPage from "@/components/Inventory/Grid/Grid";
 import TelescopeComponent from "@/constants/Structures/Telescope";
 import ZoodexComponent from "@/constants/Structures/Zoodex";
 import { CreateStructure } from "@/components/Structures/Build/CreateDedicatedStructure";
+import AllClassifications from "@/content/Starnet/YourClassifications";
 
 export default function TestPage() {
     return (
         <StarnetLayout>
-          <></>
+          <>
+            <AllClassifications />
+          </>
         </StarnetLayout>
     );
 };

components/Projects/(classifications)/Collections/All.tsx

@@ -15,10 +15,10 @@ export function DiscoveryCards() {
   useEffect(() => {
     const fetchClassifications = async () => {
       if (!session?.user) {
-        setError('User session not found.');
+        setError('User session not found.'); 
         setLoading(false);
         return;
-      }
+      };
 
       setLoading(true);
       setError(null);
@@ -36,7 +36,7 @@ export function DiscoveryCards() {
         setError('Failed to load classifications.');
       } finally {
         setLoading(false);
-      }
+      };
     };
 
     fetchClassifications();
@@ -53,4 +53,4 @@ export function DiscoveryCards() {
       ))}
     </div>
   );
-}
+};

components/Projects/(classifications)/Collections/ByActivePlanet.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useState } from 'react'; 
 import { useSupabaseClient } from '@supabase/auth-helpers-react';
 import { DiscoveryCardSingle } from './Classification';
 

components/Projects/(classifications)/Collections/ByClassType.tsx

@@ -4,13 +4,13 @@ import React, { useEffect, useState } from 'react';
 import { useSession, useSupabaseClient } from '@supabase/auth-helpers-react';
 import { DiscoveryCardSingle } from './Classification';
 
-interface DiscoveryCardsByClassificationTypeProps {
+interface DiscoveryCardsByClassificationTypeProps { 
   classificationtype: string;
 };
 
 export function DiscoveryCardsByClassificationType({ classificationtype }: DiscoveryCardsByClassificationTypeProps) {
   const supabase = useSupabaseClient();
-const session = useSession();
+  const session = useSession();
 
   const [classifications, setClassifications] = useState<any[]>([]);
   const [loading, setLoading] = useState<boolean>(true);
@@ -23,9 +23,8 @@ const session = useSession();
       try {
         const { data, error } = await supabase
           .from('classifications')
-          .select('id')
-          .eq('author', session?.user.id)
-          .eq('anomaly', classificationtype); 
+          .select('*')
+          .eq('classificationtype', classificationtype); 
 
         if (error) throw error;
 
@@ -38,12 +37,14 @@ const session = useSession();
       }
     };
 
-    fetchClassifications();
+    if (classificationtype) { 
+      fetchClassifications();
+    }
   }, [classificationtype, supabase]);
 
   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>;
+  if (classifications.length === 0) return <p>No classifications found for this classification type</p>;
 
   return (
     <div className="flex flex-col space-y-4">

components/Projects/(classifications)/Collections/Classification.tsx

@@ -44,10 +44,6 @@ const generateImagePlaceholder = (name: string) => {
   return canvas.toDataURL();
 };
 
-interface DiscoveryCardSingleProps {
-  classificationId: number;
-};
-
 const extractImageUrls = (media: any): string[] => {
   let imageUrls: string[] = [];
 
@@ -75,21 +71,33 @@ const extractImageUrls = (media: any): string[] => {
 export function DiscoveryCardSingle({ classificationId }: DiscoveryCardSingleProps) {
   const supabase = useSupabaseClient();
   const [classification, setClassification] = useState<any>(null);
+  const [anomaly, setAnomaly] = useState<any>(null);  // For anomaly data
   const [loading, setLoading] = useState<boolean>(true);
 
   useEffect(() => {
     const fetchClassification = async () => {
       setLoading(true);
       try {
+        // Fetch classification data along with anomaly data (join anomalies table)
         const { data, error } = await supabase
           .from('classifications')
-          .select('id, content, classificationtype, created_at, media, anomaly, classificationConfiguration')
+          .select('id, content, classificationtype, created_at, media, anomaly, classificationConfiguration, anomalies(avatar_url)')
           .eq('id', classificationId)
           .single();
 
         if (error) throw error;
 
         setClassification(data);
+        if (data.anomaly) {
+          // Fetch anomaly data separately if needed
+          const { data: anomalyData } = await supabase
+            .from('anomalies')
+            .select('avatar_url')
+            .eq('id', data.anomaly)
+            .single();
+          
+          setAnomaly(anomalyData);  // Store the anomaly's avatar_url
+        }
       } catch (error) {
         console.error('Error fetching classification:', error);
       } finally {
@@ -103,9 +111,9 @@ export function DiscoveryCardSingle({ classificationId }: DiscoveryCardSinglePro
   if (loading) return <p>Loading...</p>;
   if (!classification) return <p>No classification found.</p>;
 
-  const { content, classificationtype, created_at, media, anomaly, classificationConfiguration } = classification;
+  const { content, classificationtype, created_at, media, classificationConfiguration } = classification;
   const discoveredOn = new Date(created_at).toLocaleDateString();
-  const parentAnomaly = anomaly ? `Anomaly ID: ${anomaly}` : 'Earth';
+  const parentAnomaly = classification.anomaly ? `Anomaly ID: ${classification.anomaly}` : 'Earth';
 
   // Extract URLs from the media column
   const imageUrls = extractImageUrls(media);
@@ -137,6 +145,19 @@ export function DiscoveryCardSingle({ classificationId }: DiscoveryCardSinglePro
               <Globe className="w-4 h-4 text-slate-600" />
               <span className="text-sm">Parent Anomaly: {parentAnomaly}</span>
             </div>
+            
+            {/* Display Anomaly Avatar if available */}
+            {anomaly?.avatar_url && (
+              <div className="mt-4">
+                <h3 className="font-semibold">Anomaly Avatar:</h3>
+                <img 
+                  src={anomaly.avatar_url} 
+                  alt="Anomaly Avatar" 
+                  className="w-16 h-16 rounded-full object-cover shadow-md" 
+                />
+              </div>
+            )}
+
             <div className="mt-4">
               <h3 className="font-semibold">Classification Configuration:</h3>
               <pre>{JSON.stringify(classificationConfiguration, null, 2)}</pre>
@@ -158,9 +179,4 @@ export function DiscoveryCardSingle({ classificationId }: DiscoveryCardSinglePro
       </CardContent>
     </Card>
   );
-};
-
-
-interface ClassificationConfiguration {
-  [key: string]: string | number | boolean; 
-}
+};

content/Starnet/YourClassifications.tsx

@@ -1,11 +1,15 @@
-"use client";
+'use client';
 
-import React, { useState } from "react";
-import { DiscoveryCards } from "@/components/Projects/(classifications)/Collections/All";
-import { DiscoveryCardsByActivePlanet } from "@/components/Projects/(classifications)/Collections/ByActivePlanet";
-import { DiscoveryCardsByUserAndAnomaly } from "@/components/Projects/(classifications)/Collections/ByAnomaly";
+import React, { useState, useEffect } from 'react';
+import { useSupabaseClient } from '@supabase/auth-helpers-react';
+import { DiscoveryCardsByClassificationType } from '@/components/Projects/(classifications)/Collections/ByClassType';
+import { DiscoveryCardsByUserAndAnomaly } from '@/components/Projects/(classifications)/Collections/ByAnomaly';
 
 export default function AllClassifications() {
+  const supabase = useSupabaseClient();
+  const [classificationTypes, setClassificationTypes] = useState<string[]>([]);
+  const [selectedType, setSelectedType] = useState<string>('');
+
   const [activePlanet, setActivePlanet] = useState<number | null>(null);
   const [anomalyId, setAnomalyId] = useState<number | null>(null);
 
@@ -17,27 +21,55 @@ export default function AllClassifications() {
     setAnomalyId(Number(e.target.value));
   };
 
+  useEffect(() => {
+    const fetchClassificationTypes = async () => {
+      try {
+        const { data, error } = await supabase
+          .from('classifications')
+          .select('classificationtype')  // Select classificationtype column
+          .neq('classificationtype', null);  // Exclude null values
+
+        if (error) throw error;
+
+        // Remove duplicates manually by using Set
+        const uniqueTypes = Array.from(new Set(data.map((row: { classificationtype: string }) => row.classificationtype)));
+        setClassificationTypes(uniqueTypes);
+      } catch (error) {
+        console.error('Error fetching classification types:', error);
+      }
+    };
+
+    fetchClassificationTypes();
+  }, [supabase]);
+
+  const handleTypeChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
+    setSelectedType(e.target.value);
+  };
+
   return (
     <div className="py-2 space-y-8">
-      <DiscoveryCards />
-
       <div>
-        <h3>Select Active Planet</h3>
+        <h3>Select Classification Type</h3>
         <form className="space-y-4">
-          <input
-            type="number"
-            placeholder="Enter Active Planet ID"
-            value={activePlanet || ""}
-            onChange={handleActivePlanetChange}
+          <select
+            value={selectedType}
+            onChange={handleTypeChange}
             className="border rounded p-2"
-          />
+          >
+            <option value="">Select Classification Type</option>
+            {classificationTypes.map((type, idx) => (
+              <option key={idx} value={type}>
+                {type}
+              </option>
+            ))}
+          </select>
         </form>
-        {activePlanet !== null && (
-          <DiscoveryCardsByActivePlanet activePlanet={activePlanet} />
+        {selectedType && (
+          <DiscoveryCardsByClassificationType classificationtype={selectedType} />
         )}
       </div>
 
-      <div>
+      {/* <div>
         <h3>Select Anomaly</h3>
         <form className="space-y-4">
           <input
@@ -51,7 +83,7 @@ export default function AllClassifications() {
         {anomalyId !== null && (
           <DiscoveryCardsByUserAndAnomaly anomalyId={anomalyId} />
         )}
-      </div>
+      </div> */}
     </div>
   );
-}
+};