diff --git a/app/globals.css b/app/globals.css index 8fad8c6..23b0f3d 100644 --- 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 index c7f67f9..66fa2b2 100644 --- 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 index d120617..6da7ceb 100644 --- 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(null) const [query, setQuery] = useState(initialSubreddit || '') + const [searchFilter, setSearchFilter] = useState(config.redditApi.sort) const [results, setResults] = useState({}) 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) => { + 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,7 +118,7 @@ export default function Search() { {query.length > 0 && ( )} +
+ +
+ {isDrawerOpen && results && (
    {results?.data?.children?.map( @@ -126,7 +147,10 @@ export default function Search() {
  • diff --git a/lib/actions.ts b/lib/actions.ts index 0f7cf61..13e16eb 100644 --- a/lib/actions.ts +++ b/lib/actions.ts @@ -109,14 +109,14 @@ export async function fetchSubredditPosts( ): Promise { 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 index 6efa146..872cf62 100644 --- 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 index e81744f..b349704 100644 --- 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