feat: implement search functionality for news articles with query parameter

app/apis/common/get-news.ts

@@ -41,10 +41,11 @@ type TParameters = {
   active?: boolean
   limit?: number
   page?: number
+  query?: string
 } & THttpServer
 
 export const getNews = async (parameters?: TParameters) => {
-  const { categories, tags, active, limit, page, ...restParameters } =
+  const { categories, tags, active, limit, page, query, ...restParameters } =
     parameters || {}
   try {
     const { data } = await HttpServer(restParameters).get(`/api/news`, {
@@ -54,6 +55,7 @@ export const getNews = async (parameters?: TParameters) => {
         ...(active && { active }),
         ...(limit && { limit }),
         ...(page && { page }),
+        ...(query && { q: query }),
       },
     })
     return dataResponseSchema.parse(data)

app/layouts/news/header-search.tsx

@@ -3,11 +3,16 @@ import { Button } from '~/components/ui/button'
 
 export const HeaderSearch = () => {
   return (
-    <form className="flex flex-1 justify-between gap-[15px] px-[35px]">
+    <form
+      className="flex flex-1 justify-between gap-[15px] px-[35px]"
+      method="get"
+      action="/search"
+    >
       <input
         placeholder="Cari..."
         className="flex-1 text-xl placeholder:text-white focus:ring-0 focus:outline-none"
         size={1}
+        name="q"
       />
       <Button
         type="submit"

app/pages/news-search/index.tsx

@@ -0,0 +1,22 @@
+import { useRouteLoaderData } from 'react-router'
+
+import { Card } from '~/components/ui/card'
+import { CategorySection } from '~/components/ui/category-section'
+import type { loader } from '~/routes/_news.search'
+
+export const NewsSearchPage = () => {
+  const loaderData = useRouteLoaderData<typeof loader>('routes/_news.search')
+  const { newsData, query } = loaderData || {}
+
+  return (
+    <div className="relative">
+      <Card>
+        <CategorySection
+          title="Hasil pencarian:"
+          description={query || ''}
+          items={newsData || Promise.resolve({ data: [] })}
+        />
+      </Card>
+    </div>
+  )
+}

app/routes/_news.search.tsx

@@ -0,0 +1,59 @@
+import { isRouteErrorResponse } from 'react-router'
+
+import { getNews } from '~/apis/common/get-news'
+import { APP } from '~/configs/meta'
+import { NewsSearchPage } from '~/pages/news-search'
+
+import type { Route } from './+types/_news.search'
+
+export const loader = async ({ request }: Route.LoaderArgs) => {
+  const url = new URL(request.url)
+  const query = url.searchParams.get('q') || ''
+  const newsData = getNews({ query, active: true })
+  return { query, newsData }
+}
+
+export const meta = ({ data }: Route.MetaArgs) => {
+  const { query } = data
+  const metaTitle = APP.title
+  const title = `Pencarian: ${query} - ${metaTitle}`
+
+  return [
+    {
+      title,
+    },
+  ]
+}
+
+export const ErrorBoundary = ({ error }: Route.ErrorBoundaryProps) => {
+  let message = 'Oops!'
+  let details = 'An unexpected error occurred.'
+  let stack: string | undefined
+
+  if (isRouteErrorResponse(error)) {
+    message = error.status === 404 ? '404' : 'Error'
+    details =
+      error.status === 404
+        ? 'The requested page could not be found.'
+        : error.statusText || details
+  } else if (import.meta.env.DEV && error && error instanceof Error) {
+    details = error.message
+    stack = error.stack
+  }
+
+  return (
+    <div className="container mx-auto p-4">
+      <h1>{message}</h1>
+      <p>{details}</p>
+      {stack && (
+        <pre className="w-full p-4 whitespace-pre-wrap">
+          <code>{stack}</code>
+        </pre>
+      )}
+    </div>
+  )
+}
+
+const NewsSearchLayout = () => <NewsSearchPage />
+
+export default NewsSearchLayout