Fix default sorting

switz · switz · commit c04c40468143 · 2025-06-30T14:25:33.000-04:00
diff --git a/src/components/ArtistsColumn.tsx b/src/components/ArtistsColumn.tsx
@@ -5,7 +5,7 @@ import ArtistsColumnWithControls from './ArtistsColumnWithControls';
 const ArtistsColumn = async () => {
   const [artists, initialFilters] = await Promise.all([
     RelistenAPI.fetchArtists(),
-    getServerFilters('/'),
+    getServerFilters('root', true),
   ]);
 
   return <ArtistsColumnWithControls artists={artists} initialFilters={initialFilters} />;
diff --git a/src/components/ArtistsColumnWithControls.tsx b/src/components/ArtistsColumnWithControls.tsx
@@ -19,14 +19,14 @@ type ArtistsColumnWithControlsProps = {
 };
 
 const ArtistsColumnWithControls = ({ artists, initialFilters }: ArtistsColumnWithControlsProps) => {
-  const { alphaDesc, toggleFilter, clearFilters } = useFilterState(initialFilters);
+  const { alphaAsc, toggleFilter, clearFilters } = useFilterState(initialFilters, 'root');
 
   const toggles = [
     {
       type: 'sort' as const,
-      isActive: alphaDesc, // Show as active when Z-A
+      isActive: alphaAsc, // Show as active when Z-A (ascending)
       onToggle: () => toggleFilter('alpha'),
-      title: alphaDesc ? 'A-Z' : 'Z-A',
+      title: alphaAsc ? 'Z-A' : 'A-Z',
     },
   ];
 
@@ -37,16 +37,18 @@ const ArtistsColumnWithControls = ({ artists, initialFilters }: ArtistsColumnWit
     return sortedGroups.map(([type, groupArtists]) => {
       const sorted = [...groupArtists];
 
-      // Apply alphabetical sorting (default is asc/A-Z, desc is Z-A)
-      if (alphaDesc) {
+      // Apply alphabetical sorting (default is desc/A-Z when no filter set)
+      if (alphaAsc) {
+        // Z-A (ascending)
         sorted.sort((a, b) => (b.name || '').localeCompare(a.name || ''));
       } else {
+        // Default: A-Z (descending)
         sorted.sort((a, b) => (a.name || '').localeCompare(b.name || ''));
       }
 
       return [type, sorted] as [string, Artist[]];
     });
-  }, [artists, alphaDesc]);
+  }, [artists, alphaAsc]);
 
   const totalArtistCount = artists.length;
   const filteredArtistCount = processedArtists.reduce(
diff --git a/src/components/ColumnWithToggleControls.tsx b/src/components/ColumnWithToggleControls.tsx
@@ -62,9 +62,9 @@ const ColumnWithToggleControls = ({
                   toggle.icon
                 ) : toggle.type === 'sort' ? (
                   toggle.isActive ? (
-                    <ChevronDown className="w-3 h-3" />
-                  ) : (
                     <ChevronUp className="w-3 h-3" />
+                  ) : (
+                    <ChevronDown className="w-3 h-3" />
                   )
                 ) : null}
                 {toggle.label && <span>{toggle.label}</span>}
diff --git a/src/components/RecentTapesColumn.tsx b/src/components/RecentTapesColumn.tsx
@@ -8,7 +8,7 @@ import RecentTapesColumnWithControls from './RecentTapesColumnWithControls';
 const RecentTapesColumn = async ({ artistSlug, year }: Pick<RawParams, 'artistSlug' | 'year'>) => {
   const [shows, initialFilters] = await Promise.all([
     RelistenAPI.fetchRecentlyAdded(artistSlug),
-    getServerFilters(`/${artistSlug}`),
+    getServerFilters(`${artistSlug}:shows`, true),
   ]).catch(() => {
     notFound();
   });
diff --git a/src/components/RecentTapesColumnWithControls.tsx b/src/components/RecentTapesColumnWithControls.tsx
@@ -25,18 +25,21 @@ const RecentTapesColumnWithControls = ({
   shows,
   initialFilters,
 }: RecentTapesColumnWithControlsProps) => {
-  const { dateDesc, sbdOnly, toggleFilter, clearFilters } = useFilterState(initialFilters);
+  const { dateAsc, sbdOnly, toggleFilter, clearFilters } = useFilterState(
+    initialFilters,
+    `${artistSlug}:shows`
+  );
 
   const toggles = [
     {
       type: 'sort' as const,
-      isActive: !dateDesc, // Show as active when reversed (oldest first)
+      isActive: dateAsc, // Show as active when oldest first (ascending)
       onToggle: () => toggleFilter('date'),
-      title: !dateDesc ? 'Newest First' : 'Oldest First',
+      title: !dateAsc ? 'Newest First' : 'Oldest First',
     },
     {
       type: 'filter' as const,
-      isActive: sbdOnly,
+      isActive: !!sbdOnly,
       onToggle: () => toggleFilter('sbd'),
       title: sbdOnly ? 'All Shows' : 'SBD Only',
       label: 'SBD',
@@ -56,13 +59,13 @@ const RecentTapesColumnWithControls = ({
       processedShows = sortActiveBands(artistSlug, processedShows);
     }
 
-    // Reverse if needed (default is newest first/desc, so reverse when date is asc)
-    if (!dateDesc) {
-      processedShows.reverse();
+    // Reverse if needed (default is desc/newest first when no filter set)
+    if (!dateAsc) {
+      processedShows.reverse(); // Change to oldest first
     }
 
     return processedShows;
-  }, [shows, artistSlug, dateDesc, sbdOnly]);
+  }, [shows, artistSlug, dateAsc, sbdOnly]);
 
   const tours = {};
 
diff --git a/src/components/ShowsColumn.tsx b/src/components/ShowsColumn.tsx
@@ -13,7 +13,7 @@ const ShowsColumn = async ({ artistSlug, year }: Pick<RawParams, 'artistSlug' |
 
   const [artistShows, initialFilters] = await Promise.all([
     RelistenAPI.fetchShows(artistSlug, year),
-    getServerFilters(`/${artistSlug}`),
+    getServerFilters(`${artistSlug}:shows`, true),
   ]).catch(() => {
     notFound();
   });
diff --git a/src/components/ShowsColumnWithControls.tsx b/src/components/ShowsColumnWithControls.tsx
@@ -25,18 +25,21 @@ const ShowsColumnWithControls = ({
   shows,
   initialFilters,
 }: ShowsColumnWithControlsProps) => {
-  const { dateDesc, sbdOnly, toggleFilter, clearFilters } = useFilterState(initialFilters);
+  const { dateAsc, sbdOnly, toggleFilter, clearFilters } = useFilterState(
+    initialFilters,
+    `${artistSlug}:shows`
+  );
 
   const toggles = [
     {
       type: 'sort' as const,
-      isActive: !dateDesc, // Show as active when reversed (oldest first)
+      isActive: dateAsc, // Show as active when oldest first (ascending)
       onToggle: () => toggleFilter('date'),
-      title: !dateDesc ? 'Newest First' : 'Oldest First',
+      title: !dateAsc ? 'Newest First' : 'Oldest First',
     },
     {
       type: 'filter' as const,
-      isActive: sbdOnly,
+      isActive: !!sbdOnly,
       onToggle: () => toggleFilter('sbd'),
       title: sbdOnly ? 'All Shows' : 'SBD Only',
       label: 'SBD',
@@ -56,13 +59,13 @@ const ShowsColumnWithControls = ({
       processedShows = sortActiveBands(artistSlug, processedShows);
     }
 
-    // Reverse if needed (default is newest first/desc, so reverse when date is asc)
-    if (!dateDesc) {
-      processedShows.reverse();
+    // Reverse if needed (default is desc/newest first when no filter set)
+    if (!dateAsc) {
+      processedShows.reverse(); // Change to oldest first
     }
 
     return processedShows;
-  }, [shows, artistSlug, dateDesc, sbdOnly]);
+  }, [shows, artistSlug, dateAsc, sbdOnly]);
 
   const tours = {};
 
diff --git a/src/components/TodayInHistoryColumn.tsx b/src/components/TodayInHistoryColumn.tsx
@@ -11,7 +11,7 @@ const TodayInHistoryColumn = async ({
 }: Pick<RawParams, 'artistSlug' | 'year'>) => {
   const [shows, initialFilters] = await Promise.all([
     RelistenAPI.fetchTodayInHistory(artistSlug),
-    getServerFilters(`/${artistSlug}`),
+    getServerFilters(`${artistSlug}:shows`, true),
   ]).catch(() => {
     notFound();
   });
diff --git a/src/components/TodayInHistoryColumnWithControls.tsx b/src/components/TodayInHistoryColumnWithControls.tsx
@@ -25,18 +25,21 @@ const TodayInHistoryColumnWithControls = ({
   shows,
   initialFilters,
 }: TodayInHistoryColumnWithControlsProps) => {
-  const { dateDesc, sbdOnly, toggleFilter, clearFilters } = useFilterState(initialFilters);
+  const { dateAsc, sbdOnly, toggleFilter, clearFilters } = useFilterState(
+    initialFilters,
+    `${artistSlug}:shows`
+  );
 
   const toggles = [
     {
       type: 'sort' as const,
-      isActive: !dateDesc, // Show as active when reversed (oldest first)
+      isActive: dateAsc, // Show as active when oldest first (ascending)
       onToggle: () => toggleFilter('date'),
-      title: !dateDesc ? 'Newest First' : 'Oldest First',
+      title: !dateAsc ? 'Newest First' : 'Oldest First',
     },
     {
       type: 'filter' as const,
-      isActive: sbdOnly,
+      isActive: !!sbdOnly,
       onToggle: () => toggleFilter('sbd'),
       title: sbdOnly ? 'All Shows' : 'SBD Only',
       label: 'SBD',
@@ -56,13 +59,13 @@ const TodayInHistoryColumnWithControls = ({
       processedShows = sortActiveBands(artistSlug, processedShows);
     }
 
-    // Reverse if needed (default is newest first/desc, so reverse when date is asc)
-    if (!dateDesc) {
-      processedShows.reverse();
+    // Reverse if needed (default is desc/newest first when no filter set)
+    if (!dateAsc) {
+      processedShows.reverse(); // Change to oldest first
     }
 
     return processedShows;
-  }, [shows, artistSlug, dateDesc, sbdOnly]);
+  }, [shows, artistSlug, dateAsc, sbdOnly]);
 
   const tours = {};
 
diff --git a/src/components/YearsColumn.tsx b/src/components/YearsColumn.tsx
@@ -10,7 +10,7 @@ const YearsColumn = async ({ artistSlug }: Pick<RawParams, 'artistSlug'>) => {
   const [artists, artistYears, initialFilters] = await Promise.all([
     RelistenAPI.fetchArtists(),
     RelistenAPI.fetchYears(artistSlug),
-    getServerFilters(`/${artistSlug}`),
+    getServerFilters(artistSlug || '', true),
   ]).catch(() => {
     notFound();
   });
diff --git a/src/components/YearsColumnWithControls.tsx b/src/components/YearsColumnWithControls.tsx
@@ -23,14 +23,17 @@ const YearsColumnWithControls = ({
   children,
   initialFilters,
 }: YearsColumnWithControlsProps) => {
-  const { dateDesc, sbdOnly, toggleFilter, clearFilters } = useFilterState(initialFilters);
+  const { dateAsc, sbdOnly, toggleFilter, clearFilters } = useFilterState(
+    initialFilters,
+    artistSlug
+  );
 
   const toggles = [
     {
       type: 'sort' as const,
-      isActive: !dateDesc, // Show as active when reversed (oldest first)
+      isActive: dateAsc, // Show as active when oldest first (ascending)
       onToggle: () => toggleFilter('date'),
-      title: !dateDesc ? 'Newest First' : 'Oldest First',
+      title: !dateAsc ? 'Newest First' : 'Oldest First',
     },
   ];
 
@@ -42,13 +45,13 @@ const YearsColumnWithControls = ({
       years = sortActiveBands(artistSlug, years);
     }
 
-    // Reverse if needed (default is newest first/desc, so reverse when date is asc)
-    if (!dateDesc) {
-      years.reverse();
+    // Reverse if needed (default is desc/newest first when no filter set)
+    if (!dateAsc) {
+      years.reverse(); // Change to oldest first
     }
 
     return years;
-  }, [artistYears, artistSlug, dateDesc, sbdOnly]);
+  }, [artistYears, artistSlug, dateAsc, sbdOnly]);
 
   return (
     <ColumnWithToggleControls
diff --git a/src/hooks/useFilterState.ts b/src/hooks/useFilterState.ts
@@ -5,14 +5,34 @@ import { useCallback, useMemo } from 'react';
 import useCookie from 'react-use-cookie';
 import { FilterState, getFilterKey } from '@/lib/filterCookies';
 
-export function useFilterState(initialFilters?: FilterState) {
+export enum SORT_DIRECTION {
+  desc = 'desc',
+  asc = 'asc',
+}
+
+export const DEFAULT_FILTERS = {
+  date: SORT_DIRECTION.desc,
+  alpha: SORT_DIRECTION.desc,
+  sbd: undefined,
+};
+
+const getInverse = (key: string, sort?: SORT_DIRECTION) => {
+  if (sort === undefined) return getInverse(key, DEFAULT_FILTERS[key]);
+
+  if (sort === SORT_DIRECTION.asc) return SORT_DIRECTION.desc;
+  if (sort === SORT_DIRECTION.desc) return SORT_DIRECTION.asc;
+
+  return undefined;
+};
+
+export function useFilterState(initialFilters?: FilterState, filterKey?: string) {
   const pathname = usePathname();
 
-  // Generate cookie name based on pathname
+  // Generate cookie name based on custom key or pathname
   const cookieName = useMemo(() => {
-    const key = getFilterKey(pathname);
+    const key = filterKey || getFilterKey(pathname);
     return `relisten_filters_${key.replace(/[^a-zA-Z0-9_-]/g, '_')}`;
-  }, [pathname]);
+  }, [pathname, filterKey]);
 
   // Use the cookie hook with initial value from server
   const defaultValue = initialFilters ? JSON.stringify(initialFilters) : '{}';
@@ -32,7 +52,14 @@ export function useFilterState(initialFilters?: FilterState) {
       const newFilters = { ...filters, [filterName]: value };
 
       // Remove the filter if it's set to default value
-      if (value === undefined || value === false || value === 'asc') {
+      if (value === undefined || value === false) {
+        delete newFilters[filterName];
+      }
+      // For both date and alpha, default is desc (newest first for dates, A-Z for alpha)
+      if (
+        (filterName === 'date' && value === DEFAULT_FILTERS[filterName]) ||
+        (filterName === 'alpha' && value === DEFAULT_FILTERS[filterName])
+      ) {
         delete newFilters[filterName];
       }
 
@@ -47,7 +74,8 @@ export function useFilterState(initialFilters?: FilterState) {
         setFilter('sbd', !filters.sbd);
       } else if (filterName === 'date' || filterName === 'alpha') {
         const currentValue = filters[filterName];
-        const newValue = currentValue === 'desc' ? 'asc' : 'desc';
+        const newValue = getInverse(filterName, currentValue);
+        console.log(filterName, newValue, currentValue);
         setFilter(filterName, newValue);
       }
     },
@@ -64,8 +92,8 @@ export function useFilterState(initialFilters?: FilterState) {
     toggleFilter,
     clearFilters,
     // Computed values for easier use
-    dateDesc: filters.date === 'desc',
+    alphaAsc: filters.alpha === SORT_DIRECTION.asc,
+    dateAsc: filters.date === SORT_DIRECTION.asc,
     sbdOnly: filters.sbd === true,
-    alphaDesc: filters.alpha === 'desc',
   };
 }
diff --git a/src/lib/filterCookies.ts b/src/lib/filterCookies.ts
@@ -1,7 +1,9 @@
+import { SORT_DIRECTION } from '@/hooks/useFilterState';
+
 export type FilterState = {
-  date?: 'asc' | 'desc';
+  date?: SORT_DIRECTION;
   sbd?: boolean;
-  alpha?: 'asc' | 'desc';
+  alpha?: SORT_DIRECTION;
 };
 
 export type FilterKey = string; // e.g., "/grateful-dead:filters" or "/grateful-dead/1977:filters"
diff --git a/src/lib/serverFilterCookies.ts b/src/lib/serverFilterCookies.ts
@@ -4,9 +4,9 @@ import { FilterState, getFilterKey } from './filterCookies';
 const COOKIE_PREFIX = 'relisten_filters_';
 
 // Server-side function to read filter cookies
-export async function getServerFilters(pathname: string): Promise<FilterState> {
+export async function getServerFilters(pathOrKey: string, useAsKey = false): Promise<FilterState> {
   const cookieStore = await cookies();
-  const key = getFilterKey(pathname);
+  const key = useAsKey ? pathOrKey : getFilterKey(pathOrKey);
   const cookieName = `${COOKIE_PREFIX}${key.replace(/[^a-zA-Z0-9_-]/g, '_')}`;
 
   try {
