From d48108429b7024c3c13978b98905a56b59cd9954 Mon Sep 17 00:00:00 2001
From: zramsay <zach@bluecollarcoding.ca>
Date: Sat, 11 Jan 2025 18:21:38 -0500
Subject: [PATCH] reverse image display and use env var to omit certain records

---
 src/app/animals/page.tsx | 143 ++++++++++++++++++++++-----------------
 1 file changed, 81 insertions(+), 62 deletions(-)

diff --git a/src/app/animals/page.tsx b/src/app/animals/page.tsx
index fdce8bd..2b54c45 100644
--- a/src/app/animals/page.tsx
+++ b/src/app/animals/page.tsx
@@ -6,6 +6,7 @@ import { fetchAnimalRecords } from '../../services/laconicQueryService'
 import { MapPin } from 'lucide-react'
 
 interface AnimalRecord {
+  id: string
   species: string
   location: {
     latitude: number
@@ -13,8 +14,13 @@ interface AnimalRecord {
   }
   description: string
   imageUrl: string
+  createTime: string
 }
 
+const hiddenIndices = (process.env.NEXT_PUBLIC_HIDDEN_INDICES?.split(',') || [])
+  .map(num => parseInt(num))
+  .filter(num => !isNaN(num))
+
 export default function AnimalsPage() {
   const [records, setRecords] = useState<AnimalRecord[]>([])
   const [loading, setLoading] = useState(true)
@@ -29,7 +35,19 @@ export default function AnimalsPage() {
       setLoading(true)
       setError(null)
       const data = await fetchAnimalRecords()
-      setRecords(data)
+
+      // Sort by creation time, oldest first
+      const sortedRecords = [...data].sort((a, b) => 
+        new Date(a.createTime).getTime() - new Date(b.createTime).getTime()
+      )
+
+      // Filter out records by their chronological index (1-based)
+      const filteredRecords = sortedRecords.filter((_, index) => 
+        !hiddenIndices.includes(index + 1)
+      )
+
+      // Reverse to show newest first
+      setRecords(filteredRecords.reverse())
     } catch (error) {
       setError('Failed to load animal records')
     } finally {
@@ -37,80 +55,81 @@ export default function AnimalsPage() {
     }
   }
 
+  const renderContent = () => {
+    if (loading) {
+      return (
+        <div className="text-emerald-200 text-center">
+          Loading animal records...
+        </div>
+      )
+    }
+
+    if (error) {
+      return (
+        <div className="text-red-400 text-center p-4 bg-red-900/20 rounded-xl">
+          {error}
+        </div>
+      )
+    }
+
+    if (records.length === 0) {
+      return (
+        <div className="text-emerald-200 text-center p-8 bg-emerald-900/20 rounded-xl">
+          No animal records found yet. Be the first to contribute!
+        </div>
+      )
+    }
+
+    return (
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+        {records.map((record, index) => (
+          <div
+            key={`${record.id}-${index}`}
+            className="bg-emerald-900/20 rounded-xl p-6 border border-emerald-800/50 hover:border-emerald-700/50 transition-colors"
+          >
+            <div className="aspect-video rounded-lg overflow-hidden mb-4 bg-emerald-900/50">
+              <img
+                src={record.imageUrl}
+                alt={`${record.species} sighting`}
+                className="w-full h-full object-cover"
+              />
+            </div>
+
+            <h3 className="text-xl font-semibold text-emerald-300 capitalize mb-2">
+              {record.species}
+            </h3>
+
+            <div className="flex items-center text-emerald-200/80 text-sm mb-3">
+              <MapPin className="w-4 h-4 mr-1" />
+              <span>
+                {record.location.latitude}°, {record.location.longitude}°
+              </span>
+            </div>
+
+            <p className="text-emerald-200 text-sm">
+              {record.description}
+            </p>
+          </div>
+        ))}
+      </div>
+    )
+  }
+
   return (
     <div className="min-h-screen w-full flex flex-col items-center bg-gradient-to-b from-emerald-950 via-green-900 to-emerald-950">
       <div className="container max-w-7xl mx-auto px-4 py-8">
         <Navigation />
         
-        {/* Header */}
         <div className="text-center mb-8">
           <h1 className="text-4xl sm:text-5xl font-bold mb-4 text-transparent bg-clip-text bg-gradient-to-r from-emerald-400 to-teal-300">
             Animal Registry
           </h1>
           <p className="text-emerald-200 text-lg mb-8">
-            Discover wildlife sightings from around the world
+            Discover wildlife sightings from our community
           </p>
         </div>
 
-        {/* Loading State */}
-        {loading && (
-          <div className="text-emerald-200 text-center">
-            Loading animal records...
-          </div>
-        )}
-
-        {/* Error State */}
-        {error && (
-          <div className="text-red-400 text-center p-4 bg-red-900/20 rounded-xl">
-            {error}
-          </div>
-        )}
-
-        {/* Records Grid */}
-        {!loading && !error && (
-          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
-            {records.map((record, index) => (
-              <div
-                key={index}
-                className="bg-emerald-900/20 rounded-xl p-6 border border-emerald-800/50 hover:border-emerald-700/50 transition-colors"
-              >
-                {/* Image */}
-                <div className="aspect-video rounded-lg overflow-hidden mb-4 bg-emerald-900/50">
-                  <img
-                    src={record.imageUrl}
-                    alt={`${record.species} sighting`}
-                    className="w-full h-full object-cover"
-                  />
-                </div>
-
-                {/* Species */}
-                <h3 className="text-xl font-semibold text-emerald-300 capitalize mb-2">
-                  {record.species}
-                </h3>
-
-                {/* Location */}
-                <div className="flex items-center text-emerald-200/80 text-sm mb-3">
-                  <MapPin className="w-4 h-4 mr-1" />
-                  <span>
-                    {record.location.latitude}°, {record.location.longitude}°
-                  </span>
-                </div>
-
-                {/* Description */}
-                <p className="text-emerald-200 text-sm">
-                  {record.description}
-                </p>
-              </div>
-            ))}
-          </div>
-        )}
-
-        {/* Empty State */}
-        {!loading && !error && records.length === 0 && (
-          <div className="text-emerald-200 text-center p-8 bg-emerald-900/20 rounded-xl">
-            No animal records found yet. Be the first to contribute!
-          </div>
-        )}
+        {renderContent()}
       </div>
     </div>
   )