add sort dropdown

gregrickaby · Feb 13, 2024 · 3c8bfe8 · 3c8bfe8
1 parent b78e194
commit 3c8bfe8
Show file tree

Hide file tree

Showing 6 changed files with 45 additions and 11 deletions.
diff --git a/app/globals.css b/app/globals.css
@@ -20,6 +20,16 @@
     @apply h-16 w-full text-xl outline-1 dark:outline-zinc-900;
   }
 
+  .select-wrapper {
+    @apply relative inline-block;
+  }
+
+  .select-wrapper::after {
+    @apply pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-sm;
+
+    content: '▼';
+  }
+
   button,
   .button {
     @apply leading-tight no-underline;

diff --git a/app/r/[slug]/page.tsx b/app/r/[slug]/page.tsx
@@ -35,11 +35,11 @@ export default async function Page(props: PageProps) {
 
   // Get the search parameters.
   const limit = props.searchParams.limit || config.redditApi.limit
-  const sortBy = props.searchParams.sortBy || config.redditApi.sortBy
+  const sort = props.searchParams.sort || config.redditApi.sort
   let after = props.searchParams.after || ''
 
   // Fetch the subreddit posts.
-  const posts = await fetchSubredditPosts({slug, sortBy, limit, after})
+  const posts = await fetchSubredditPosts({slug, sort, limit, after})
 
   // Error? Bail.
   if (posts.error || !posts.data) {

diff --git a/components/Search.tsx b/components/Search.tsx
@@ -6,6 +6,7 @@ import {IconX} from '@tabler/icons-react'
 import Link from 'next/link'
 import {usePathname, useRouter} from 'next/navigation'
 import {useCallback, useEffect, useRef, useState} from 'react'
+import config from '@/lib/config'
 
 /**
  * Debounce a callback.
@@ -30,6 +31,7 @@ export default function Search() {
   const inputRef = useRef<HTMLInputElement>(null)
 
   const [query, setQuery] = useState(initialSubreddit || '')
+  const [searchFilter, setSearchFilter] = useState(config.redditApi.sort)
   const [results, setResults] = useState<RedditSearchResponse>({})
   const [isDrawerOpen, setIsDrawerOpen] = useState(false)
   const [selectedIndex, setSelectedIndex] = useState(0)
@@ -41,6 +43,11 @@ export default function Search() {
     setIsDrawerOpen(!!inputQuery)
   }
 
+  const handleFilterChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
+    setSearchFilter(e.target.value)
+    router.push(`${pathname}?sort=${e.target.value}`)
+  }
+
   const performSearch = useCallback(async () => {
     if (query.length < 2) return
     const results = await fetchSearchResults(query)
@@ -54,6 +61,7 @@ export default function Search() {
     setResults({})
     setIsDrawerOpen(false)
     setSelectedIndex(0)
+    setSearchFilter(config.redditApi.sort)
   }
 
   useEffect(() => {
@@ -70,7 +78,7 @@ export default function Search() {
       } else if (e.key === 'Enter' && itemCount > 0) {
         const selectedResult = results?.data?.children[selectedIndex]
         if (selectedResult) {
-          router.push(selectedResult.data.url)
+          router.push(`${selectedResult.data.url}?sort=${searchFilter}`)
           resetSearch()
         }
         e.preventDefault()
@@ -79,7 +87,7 @@ export default function Search() {
 
     window.addEventListener('keydown', handleKeyDown)
     return () => window.removeEventListener('keydown', handleKeyDown)
-  }, [isDrawerOpen, results, selectedIndex, router])
+  }, [isDrawerOpen, results, selectedIndex, router, searchFilter])
 
   useEffect(() => {
     if (pathname === '/' || !initialSubreddit) {
@@ -110,14 +118,27 @@ export default function Search() {
       {query.length > 0 && (
         <button
           aria-label="clear search"
-          className="absolute right-2 z-10 rounded bg-zinc-400 p-1 font-mono text-xs text-zinc-200 transition-all duration-300 ease-in-out hover:bg-zinc-600 dark:bg-zinc-700 dark:text-zinc-400"
+          className="absolute right-28 z-10 rounded bg-zinc-400 p-1 font-mono text-xs text-zinc-200 transition-all duration-300 ease-in-out hover:bg-zinc-600 dark:bg-zinc-700 dark:text-zinc-400"
           onClick={resetSearch}
           type="reset"
         >
           <IconX />
         </button>
       )}
 
+      <div className="select-wrapper">
+        <select
+          className="ml-2 h-16 appearance-none rounded px-4 py-2 outline-none"
+          onChange={handleFilterChange}
+          value={searchFilter}
+        >
+          <option value="hot">Hot</option>
+          <option value="new">New</option>
+          <option value="top">Top</option>
+          <option value="rising">Rising</option>
+        </select>
+      </div>
+
       {isDrawerOpen && results && (
         <ul className="absolute left-0 top-16 z-50 m-0 w-full list-none rounded-b bg-zinc-200 p-0 dark:bg-zinc-700">
           {results?.data?.children?.map(
@@ -126,7 +147,10 @@ export default function Search() {
                 <li className="m-0 p-0" key={data.id}>
                   <Link
                     className={`m-0 flex items-center justify-start gap-2 p-1 hover:bg-zinc-300 hover:no-underline dark:hover:bg-zinc-800 ${selectedIndex === index ? 'bg-zinc-300 dark:bg-zinc-800' : ''}`}
-                    href={data.url || ''}
+                    href={{
+                      pathname: data.url,
+                      query: {sort: searchFilter}
+                    }}
                     onClick={resetSearch}
                     prefetch={false}
                   >

diff --git a/lib/actions.ts b/lib/actions.ts
@@ -109,14 +109,14 @@ export async function fetchSubredditPosts(
 ): Promise<RedditPostResponse> {
   try {
     // Destructure props.
-    const {slug, sortBy, limit, after} = props
+    const {slug, sort, limit, after} = props
 
     // Fetch the Reddit oAuth token.
     const {access_token} = await fetchToken()
 
     // Fetch the subreddit posts.
     const response = await fetch(
-      `https://oauth.reddit.com/r/${slug}/${sortBy}/.json?limit=${limit}&after=${after}&raw_json=1`,
+      `https://oauth.reddit.com/r/${slug}/${sort}/.json?limit=${limit}&after=${after}&raw_json=1`,
       {
         headers: {
           'User-Agent': config.userAgent,

diff --git a/lib/config.ts b/lib/config.ts
@@ -11,7 +11,7 @@ const config = {
   redditApi: {
     popularLimit: '5',
     limit: '50',
-    sortBy: 'hot',
+    sort: 'hot',
     sub: 'itookapicture'
   },
   cacheTtl: 3600

diff --git a/lib/types.d.ts b/lib/types.d.ts
@@ -127,14 +127,14 @@ export interface ImageAsset {
 
 export interface FetchSubredditProps {
   slug: string
-  sortBy: string
+  sort: string
   limit: number | string
   after: string
 }
 
 export interface PageProps {
   params: {slug: string}
-  searchParams: {before: string; after: string; limit: number; sortBy: string}
+  searchParams: {before: string; after: string; limit: number; sort: string}
 }
 
 export interface HlsPlayerProps