fix code smell issues

app/layout.tsx

@@ -35,7 +35,7 @@ export const metadata: Metadata = {
   },
   manifest: '/manifest.webmanifest',
   verification: {
-    google: process.env.NEXT_PUBLIC_GOOGLE_SITE_VERIFICATION || ''
+    google: process.env.NEXT_PUBLIC_GOOGLE_SITE_VERIFICATION ?? ''
   }
 }
 

app/r/[slug]/page.tsx

@@ -30,7 +30,7 @@ export async function generateMetadata({params}: PageProps): Promise<Metadata> {
 /**
  * The single subreddit route.
  */
-export default async function Page(props: PageProps) {
+export default async function Page(props: Readonly<PageProps>) {
   // Get the params.
   const slug = props.params.slug || config.redditApi.sub
 

components/HlsPlayer.tsx

@@ -9,7 +9,7 @@ import {LegacyRef, useEffect, useRef} from 'react'
  *
  * @see https://github.com/video-dev/hls.js/
  */
-export default function HlsPlayer(props: HlsPlayerProps) {
+export default function HlsPlayer(props: Readonly<HlsPlayerProps>) {
   // Create a ref to the video element.
   const videoRef = useRef<HTMLMediaElement>(null)
 

components/Media.tsx

@@ -5,7 +5,7 @@ import {RedditPost} from '@/lib/types'
 /**
  * The media component.
  */
-export default function Media(post: RedditPost) {
+export default function Media(post: Readonly<RedditPost>) {
   // No post? Bail.
   if (!post) {
     return null
@@ -27,7 +27,7 @@ export default function Media(post: RedditPost) {
 
   // Determine the media type and render the appropriate component.
   switch (post.post_hint) {
-    case 'image':
+    case 'image': {
       return (
         <a
           aria-label="view full image"
@@ -47,9 +47,10 @@ export default function Media(post: RedditPost) {
           />
         </a>
       )
+    }
 
     case 'hosted:video':
-    case 'rich:video':
+    case 'rich:video': {
       const videoPreview =
         post.preview?.reddit_video_preview || post.media?.reddit_video
       return (
@@ -64,8 +65,9 @@ export default function Media(post: RedditPost) {
           <source src={videoPreview?.fallback_url} type="video/mp4" />
         </HlsPlayer>
       )
+    }
 
-    case 'link':
+    case 'link': {
       const isGifv = post.url?.includes('gifv')
       const videoUrl = isGifv
         ? post.url?.replace('.gifv', '.mp4')
@@ -83,6 +85,7 @@ export default function Media(post: RedditPost) {
           <source src={videoUrl} type="video/mp4" />
         </HlsPlayer>
       )
+    }
 
     // Nothing matched.
     default:

components/Search.tsx

@@ -55,7 +55,7 @@ export default function Search() {
       let inputValue = e.target.value.trim()
 
       // Validate and sanitize the input value.
-      inputValue = inputValue && inputValue.replace(/[^a-zA-Z0-9_]/g, '')
+      inputValue = inputValue?.replace(/\W/g, '')
 
       // Set component state.
       setQuery(inputValue)
@@ -74,7 +74,7 @@ export default function Search() {
       let sortValue = e.target.value.trim()
 
       // Validate and sanitize the sort value.
-      sortValue = sortValue && sortValue.replace(/[^a-zA-Z0-9_]/g, '')
+      sortValue = sortValue?.replace(/\W/g, '')
 
       // Set component state.
       setSort(sortValue)
@@ -91,16 +91,21 @@ export default function Search() {
   /**
    * Setup the search query.
    */
-  const searchQuery = useCallback(async () => {
-    // If there's no query, return.
+  const searchQuery = useCallback(() => {
+    // No query? Bail.
     if (query.length < 2) return
 
-    // Fetch the search results.
-    const results = await fetchSearchResults(query)
+    // Fetch and set the search results.
+    const fetchAndSetResults = async () => {
+      const results = await fetchSearchResults(query)
+      setResults(results)
+    }
 
-    // Set component state.
-    setResults(results)
-  }, [query])
+    // Call the fetch and resolve the promise.
+    fetchAndSetResults().catch((error) => {
+      console.error('Failed to fetch search results:', error)
+    })
+  }, [query, setResults])
 
   // Debounce the search query.
   useDebounce(searchQuery, 500, [query])
@@ -125,7 +130,7 @@ export default function Search() {
       if (!isDrawerOpen) return
 
       // Setup the item count.
-      const itemCount = results?.data?.children?.length || 0
+      const itemCount = results?.data?.children?.length ?? 0
 
       // Handle the down arrow key event.
       if (e.key === 'ArrowDown') {

lib/actions.ts

@@ -74,7 +74,7 @@ export async function fetchSearchResults(
     }
 
     // Validate and sanitize the query.
-    query = query && query.replace(/[^a-zA-Z0-9_]/g, '')
+    query = query?.replace(/\W/g, '')
 
     // Attempt to fetch subreddits.
     const response = await fetch(
@@ -132,7 +132,7 @@ export async function fetchSubredditPosts(
     let {slug, sort, limit, after} = props
 
     // Validate and sanitize the slug param.
-    slug = slug && slug.replace(/[^a-zA-Z0-9_]/g, '')
+    slug = slug?.replace(/\W/g, '')
 
     // Validate the sort param.
     if (!['hot', 'new', 'top', 'rising'].includes(sort)) {
@@ -147,7 +147,7 @@ export async function fetchSubredditPosts(
     }
 
     // Validate the after param.
-    if (after && !after.match(/^[a-zA-Z0-9_]+$/)) {
+    if (RegExp(/w/).exec(after)) {
       throw new Error('Invalid after parameter. Must be alphanumeric.')
     }
 
@@ -218,7 +218,7 @@ export async function fetchSubredditAbout(
     }
 
     // Validate and sanitize the slug prop.
-    slug = slug && slug.replace(/[^a-zA-Z0-9_]/g, '')
+    slug = slug?.replace(/\W/g, '')
 
     // Fetch the subreddit about.
     const response = await fetch(

lib/functions.ts

@@ -13,7 +13,7 @@ export function getMediumImage(images: ImageAsset[]): ImageAsset | null {
   const mediumSize = images.find((res) => res.width === 640)
 
   // Return the medium size, or the last image if not found.
-  return mediumSize || images[images.length - 1]
+  return mediumSize ?? images[images.length - 1]
 }
 
 /**