Sort by time or weather

Cleanup to sorting as well

Author: Jacobdeanr

app/home-client.tsx

@@ -5,15 +5,15 @@ import { useState } from 'react';
 import Header from './ui/header';
 import SkyboxGrid from './ui/skyboxgrid';
 
-type SortOption = 'alpha' | 'alpha-desc' | 'published-date-desc' | 'published-date-asc';
+import { SortOption } from './ui/sort-types';
 
 interface HomeClientProps {
   slugs: string[];
   meta: Record<string, any>;
 }
 
 export default function HomeClient({ slugs, meta }: HomeClientProps) {
-  const [sort, setSort] = useState<SortOption>('published-date-desc');
+  const [sort, setSort] = useState<SortOption>('time-of-day');
   const [query, setQuery] = useState('');
 
   return (

app/ui/header.tsx

@@ -9,7 +9,7 @@ import { profileLinks } from './profile-links';
 
 import SortSelect from './sort-select';
 
-type SortOption = 'alpha' | 'alpha-desc' | 'published-date-desc' | 'published-date-asc';
+import { SortOption } from './sort-types';
 
 /* ------------------ main header ------------------ */
 interface HeaderProps {

app/ui/moremenu.tsx

@@ -4,10 +4,10 @@
 import type { Dispatch, SetStateAction } from 'react';
 import { useState } from 'react';
 import IconLink from './iconlink';
-import SortSelect from './sort-select'; // Import SortSelect
+import SortSelect from './sort-select';
 
 // Types matching those in Header/Page
-type SortOption = 'alpha' | 'alpha-desc' | 'published-date-desc' | 'published-date-asc';
+import { SortOption } from './sort-types';
 interface ProfileLink {
   href: string;
   label: string;

app/ui/skyboxgrid.tsx

@@ -3,70 +3,82 @@ import { useMemo } from 'react';
 import SkyboxCard from './skyboxcard';
 
 // Define the SortOption type matching the one in header.tsx / page.tsx
-type SortOption = 'alpha' | 'alpha-desc' | 'published-date-desc' | 'published-date-asc';
+import { SortOption } from './sort-types';
+
+const TIME_OF_DAY_ORDER = ['Morning', 'Afternoon', 'Evening', 'Night', 'Other'];
+const WEATHER_CONDITIONS_ORDER = ['Clear', 'Cloudy', 'Hazy', 'Overcast', 'Other'];
 
 export default function SkyboxGrid({
   slugs,
   meta,
-  sort,
+  sort = 'time-of-day',
   query,
 }: {
   slugs: string[];
   meta: Record<string, any>;
-  sort: SortOption;
+  sort?: SortOption;
   query: string;
 }) {
-
   const visible = useMemo(() => {
     let list = [...slugs];
     // Filter based on query prop
     if (query) {
       const q = query.toLowerCase();
       list = list.filter((s) => s.includes(q) || meta[s]?.title?.toLowerCase().includes(q));
     }
-    // Sort based on sort prop
-    switch (sort) {
-      case 'alpha-desc':
-        list.sort().reverse(); // Z-A
-        break;
-      case 'published-date-desc': // Newest to Oldest
-        list.sort((a, b) => {
-          const dateA = meta[a]?.publishDate ? new Date(meta[a].publishDate).getTime() : 0;
-          const dateB = meta[b]?.publishDate ? new Date(meta[b].publishDate).getTime() : 0;
-          return dateB - dateA; // Sorts undefined/null dates to the end (as oldest)
-        });
-        break;
-      case 'published-date-asc': // Oldest to Newest
-        list.sort((a, b) => {
-          const dateA = meta[a]?.publishDate ? new Date(meta[a].publishDate).getTime() : Number.MAX_SAFE_INTEGER;
-          const dateB = meta[b]?.publishDate ? new Date(meta[b].publishDate).getTime() : Number.MAX_SAFE_INTEGER;
-          return dateA - dateB; // Sorts undefined/null dates to the end (as newest)
-        });
-        break;
-      case 'alpha': // A-Z
-      default:
-        list.sort();
-        break;
-    }
+    return list;
+  }, [slugs, meta, query]);
+
+  // Group skyboxes by time of day or weather conditions
+  const groupedSkyboxes = useMemo(() => {
+    console.log(sort);
+    if (sort === 'time-of-day') {
+      const groups: Record<string, string[]> = {};
 
-    return list; // Add this line back
-  }, [slugs, meta, query, sort]); // Update dependencies
+      visible.forEach((slug) => {
+        const timeOfDay = meta[slug]?.timeOfDay || 'Other';
+        if (!groups[timeOfDay]) {
+          groups[timeOfDay] = [];
+        }
+        groups[timeOfDay].push(slug);
+      });
+
+      // Sort groups by predefined time of day order
+      return TIME_OF_DAY_ORDER
+        .filter(time => groups[time])
+        .map(time => ({ title: time, slugs: groups[time] }));
+    } else {
+      const groups: Record<string, string[]> = {};
+
+      visible.forEach((slug) => {
+        const weatherCondition = meta[slug]?.weatherCondition || 'Other';
+        if (!groups[weatherCondition]) {
+          groups[weatherCondition] = [];
+        }
+        groups[weatherCondition].push(slug);
+      });
+
+      // Sort groups by predefined weather conditions order
+      return WEATHER_CONDITIONS_ORDER
+        .filter(weather => groups[weather])
+        .map(weather => ({ title: weather, slugs: groups[weather] }));
+    }
+  }, [visible, meta, sort]);
 
   return (
-    // Correctly render only the grid section
-    <section
-      className="
-        grid gap-4 pt-6
-        grid-cols-[repeat(auto-fill,minmax(16rem,1fr))]
-        sm:grid-cols-[repeat(auto-fill,minmax(18rem,1fr))]
-        lg:grid-cols-[repeat(auto-fill,minmax(22rem,1fr))]
-        2xl:grid-cols-[repeat(auto-fill,minmax(26rem,1fr))]
-        px-4 sm:px-6 lg:px-8
-      "
-    >
-      {visible.map((slug) => (
-        <SkyboxCard key={slug} slug={slug} meta={meta[slug]} />
+    <div className="space-y-8 mx-auto px-4 py-8">
+      {groupedSkyboxes.map(({ title, slugs }) => (
+        <div key={title}>
+          <div className="flex items-center justify-between mb-4">
+            <h2 className="text-2xl font-bold text-neutral-200">{title} Skies</h2>
+          </div>
+          <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4">
+            {slugs.map((slug) => (
+              <SkyboxCard key={slug} slug={slug} meta={meta[slug]} />
+            ))}
+          </div>
+        </div>
       ))}
-    </section>
+    </div>
   );
 }

app/ui/sort-select.tsx

@@ -1,7 +1,6 @@
-/* app/ui/sort-select.tsx */
 'use client';
 
-type SortOption = 'alpha' | 'alpha-desc' | 'published-date-desc' | 'published-date-asc';
+import { SortOption } from './sort-types';
 
 interface SortSelectProps {
   value: SortOption;
@@ -19,10 +18,8 @@ export default function SortSelect({ value, onChange }: SortSelectProps) {
         focus:outline-none focus:ring-2 focus:ring-amber-500
       "
     >
-      <option value="published-date-desc">Newest</option>
-      <option value="alpha">Name A → Z</option>
-      <option value="alpha-desc">Name Z → A</option>
-      <option value="published-date-asc">Oldest</option>
+      <option value="time-of-day">Time of Day</option>
+      <option value="weather-conditions">Weather Conditions</option>
     </select>
   );
 }

app/ui/sort-types.ts

@@ -0,0 +1,2 @@
+// Centralized type definition for sort options
+export type SortOption = 'time-of-day' | 'weather-conditions';

public/data/sky_fracture01_hdr.json

@@ -6,6 +6,8 @@
   "categories": [
     "Misc"
   ],
+  "timeOfDay": "Unknown",
+  "weatherCondition": "Unknown",
   "sunParameters": {
     "sunAngle": "0 210 0",
     "pitch": "-40",

public/data/sky_lab_hdr.json

@@ -6,6 +6,8 @@
   "categories": [
     "Misc"
   ],
+  "timeOfDay": "Unknown",
+  "weatherCondition": "Unknown",
   "sunParameters": {
     "sunAngle": "0 61.5 0",
     "pitch": "-17",

public/data/sky_serene_glow_hdr.json

@@ -6,6 +6,8 @@
   "categories": [
     "Misc"
   ],
+  "timeOfDay": "Unknown",
+  "weatherCondition": "Unknown",
   "sunParameters": {
     "sunAngle": "0 128 0",
     "pitch": "-44",