Add decks sort by (#852)

Author: greg19

frontend/src/components/Filters.tsx

@@ -45,7 +45,7 @@ interface PropsDropdown<T> extends Props<T> {
 
 export function DropdownFilter<T extends string | number>({ label, options, value, onChange, className, show = (x) => String(x) }: PropsDropdown<T>) {
   return (
-    <label className={cn(commonClassName, 'flex items-baseline justify-between gap-5 px-3 py-1 my-auto text-neutral-400', className)}>
+    <label className={cn(commonClassName, 'flex items-baseline justify-between gap-5 px-3 py-1 text-neutral-400', className)}>
       {label && <span className="text-sm">{label}</span>}
       <select value={value} onChange={(e) => onChange(e.target.value as T)} className="min-h-[27px] text-sm text-right cursor-pointer">
         {options.map((x) => (

frontend/src/lib/utils.ts

@@ -18,6 +18,10 @@ export function chunk<T>(arr: T[], size: number): T[][] {
   return res
 }
 
+export function capitalize(str: string) {
+  return str.charAt(0).toUpperCase() + str.slice(1)
+}
+
 export function formatFriendId(friendId: string): string {
   if (!friendId || friendId.length !== 16) {
     return friendId

frontend/src/pages/decks/Decks.tsx

@@ -2,21 +2,22 @@ import { ChevronFirst, ChevronLeft, ChevronRight } from 'lucide-react'
 import { useState } from 'react'
 import { Link, useNavigate, useParams } from 'react-router'
 import ErrorAlert from '@/components/ErrorAlert'
-import { TabsFilter, ToggleFilter } from '@/components/Filters'
+import { DropdownFilter, TabsFilter, ToggleFilter } from '@/components/Filters'
 import { Spinner } from '@/components/Spinner'
 import { Button } from '@/components/ui/button'
 import { showCardType } from '@/components/utils'
-import { type DeckFilters, deckKinds } from '@/services/decks/deckService'
+import { capitalize } from '@/lib/utils'
+import { type DeckFilters, deckKinds, deckOrder } from '@/services/decks/deckService'
 import { useDecksSearch } from '@/services/decks/useDeck'
 import { energies } from '@/types'
 import { DeckItem } from './DeckItem'
 
 export default function Decks() {
   const navigate = useNavigate()
   const { kind } = useParams<{ kind: DeckFilters['kind'] }>()
-  const validKind = kind && deckKinds.includes(kind) ? kind : 'popular'
+  const validKind = kind && deckKinds.includes(kind) ? kind : 'community'
 
-  const [filters, setFilters] = useState<DeckFilters>({ kind: validKind, page: 0, energy: [] })
+  const [filters, setFilters] = useState<DeckFilters>({ kind: validKind, orderby: 'popular', page: 0, energy: [] })
   const { data, isLoading, isError, error } = useDecksSearch(filters)
 
   const handleKindChange = (newKind: DeckFilters['kind']) => {
@@ -33,13 +34,16 @@ export default function Decks() {
             <ChevronRight />
           </Button>
         </Link>
-        <TabsFilter
-          className="w-full"
-          options={deckKinds}
-          value={filters.kind}
-          onChange={handleKindChange}
-          show={(kind) => `${kind.charAt(0).toUpperCase() + kind.slice(1)} decks`}
-        />
+        <TabsFilter className="w-full" options={deckKinds} value={filters.kind} onChange={handleKindChange} show={(kind) => `${capitalize(kind)} decks`} />
+        {filters.kind === 'community' && (
+          <DropdownFilter
+            options={deckOrder}
+            value={filters.orderby}
+            onChange={(orderby) => setFilters((prev) => ({ ...prev, orderby }))}
+            label="Sort by"
+            show={capitalize}
+          />
+        )}
         <ToggleFilter options={energies} value={filters.energy} onChange={(energy) => setFilters((prev) => ({ ...prev, energy }))} show={showCardType} />
       </div>
       <div className="flex flex-col gap-2 sm:w-xl">

frontend/src/services/decks/deckService.ts

@@ -1,10 +1,12 @@
 import { supabase } from '@/lib/supabase'
 import type { Deck, Energy } from '@/types'
 
-export const deckKinds = ['popular', 'liked', 'my'] as const
+export const deckKinds = ['community', 'liked', 'my'] as const
+export const deckOrder = ['popular', 'new'] as const
 
 export interface DeckFilters {
   kind: (typeof deckKinds)[number]
+  orderby: (typeof deckOrder)[number]
   page: number
   energy: Energy[]
 }
@@ -43,8 +45,13 @@ export async function getDecks(filters: DeckFilters) {
     tbl = tbl.from('decks').select('*', { count: 'exact' })
   } else if (filters.kind === 'liked') {
     tbl = tbl.from('deck_likes').select('*, public_decks!id(*)', { count: 'exact' })
-  } else if (filters.kind === 'popular') {
-    tbl = tbl.from('public_decks').select('*', { count: 'exact' }).order('likes', { ascending: false })
+  } else if (filters.kind === 'community') {
+    tbl = tbl.from('public_decks').select('*', { count: 'exact' })
+    if (filters.orderby === 'popular') {
+      tbl = tbl.order('likes', { ascending: false })
+    } else if (filters.orderby === 'new') {
+      tbl = tbl.order('created_at', { ascending: false })
+    }
   }
 
   const col_prefix = filters.kind === 'liked' ? 'public_decks.' : ''