Refactor error handling and metadata generation logic (#23)

* Refactor error handling and metadata generation logic

Centralized metadata generation and improved error handling in the component. Added validation checks and fallback mechanisms for post data retrieval to enhance stability.

* Refactor searchParams handling in LearningHub components (#24)

Refactored `LearningHubNavbar` and `LearningHub` to properly handle `searchParams` as props and removed unused components like `Suspense`. This improves clarity and aligns with better prop management practices.

src/app/[locale]/learning-hub/[id]/page.tsx

@@ -1,39 +1,8 @@
-import { getTranslations } from 'next-intl/server'
-
 import LearningHubPost, {
-  getPostId,
   LearningHubPostPageProps,
-  resolvingPost,
 } from '@/components/LearningHubPost'
-import { config } from '@/config'
-
-export async function generateMetadata({ params }: LearningHubPostPageProps) {
-  const t = await getTranslations({ locale: params.locale, namespace: '' })
-
-  const post = await resolvingPost(params.id)
 
-  return {
-    metadataBase: new URL('https://rarimo.com/'),
-    title: post.attributes.title,
-    description: post.attributes.shortDescription,
-
-    openGraph: {
-      type: 'website',
-      siteName: t('metadata.openGraph.siteName'),
-      title: post.attributes.title,
-      description: post.attributes.shortDescription,
-      url: `${config.learningHubApiUrl}/posts/${getPostId(params.id)}`,
-      images: post.attributes.coverImage,
-    },
-
-    twitter: {
-      site: t('metadata.twitter.site'),
-      title: post.attributes.title,
-      description: post.attributes.shortDescription,
-      images: post.attributes.coverImage,
-    },
-  }
-}
+export { generateMetadata } from '@/app/learning-hub/[id]/page'
 
 export default async function LearningHubPostPage({
   params,

src/app/learning-hub/[id]/page.tsx

@@ -1,3 +1,4 @@
+import { Metadata, ResolvingMetadata } from 'next'
 import { NextIntlClientProvider } from 'next-intl'
 import { getTranslations, unstable_setRequestLocale } from 'next-intl/server'
 
@@ -9,31 +10,38 @@ import LearningHubPost, {
 import { config } from '@/config'
 import { locales } from '@/i18n'
 
-export async function generateMetadata({ params }: LearningHubPostPageProps) {
+export async function generateMetadata(
+  { params }: LearningHubPostPageProps,
+  parent: ResolvingMetadata,
+) {
   const t = await getTranslations({ locale: params.locale, namespace: '' })
 
-  const post = await resolvingPost(params.id)
+  try {
+    const post = await resolvingPost(params.id)
 
-  return {
-    metadataBase: new URL('https://rarimo.com/'),
-    title: post.attributes.title,
-    description: post.attributes.shortDescription,
-
-    openGraph: {
-      type: 'website',
-      siteName: t('metadata.openGraph.siteName'),
+    return {
+      metadataBase: new URL('https://rarimo.com/'),
       title: post.attributes.title,
       description: post.attributes.shortDescription,
-      url: `${config.learningHubApiUrl}/posts/${getPostId(params.id)}`,
-      images: post.attributes.coverImage,
-    },
 
-    twitter: {
-      site: t('metadata.twitter.site'),
-      title: post.attributes.title,
-      description: post.attributes.shortDescription,
-      images: post.attributes.coverImage,
-    },
+      openGraph: {
+        type: 'website',
+        siteName: t('metadata.openGraph.siteName'),
+        title: post.attributes.title,
+        description: post.attributes.shortDescription,
+        url: `${config.learningHubApiUrl}/posts/${getPostId(params.id)}`,
+        images: post.attributes.coverImage,
+      },
+
+      twitter: {
+        site: t('metadata.twitter.site'),
+        title: post.attributes.title,
+        description: post.attributes.shortDescription,
+        images: post.attributes.coverImage,
+      },
+    }
+  } catch (error) {
+    return (await parent) as Metadata
   }
 }
 

src/components/LearningHub/components/LearningHubNavbar.tsx

@@ -2,39 +2,38 @@
 
 import { Search } from 'lucide-react'
 import Link from 'next/link'
-import { useRouter, useSearchParams } from 'next/navigation'
-import { HTMLAttributes, useMemo, useRef, useState } from 'react'
+import { useRouter } from 'next/navigation'
+import { useMemo, useRef, useState } from 'react'
 
 import LogoIcon from '@/assets/icons/logo-icon.svg'
 import HomeHeader from '@/common/HomeHeader'
 import ThemeSwitcher from '@/common/ThemeSwitcher'
 import { QueryFilters } from '@/components/LearningHub/constants'
 import { cn } from '@/theme/utils'
 
-type Props = Omit<HTMLAttributes<HTMLDivElement>, 'children'>
-
-export default function LearningHubNavbar({ className, ...rest }: Props) {
-  const searchParams = useSearchParams()
+export default function LearningHubNavbar({
+  searchParams,
+}: {
+  searchParams?: { [key: string]: string | string[] | undefined }
+}) {
   const router = useRouter()
 
   const [searchQuery, setSearchQuery] = useState('')
 
   const searchInputRef = useRef<HTMLInputElement>(null)
 
   const sanitizedSearchParams = useMemo(() => {
-    const params = new URLSearchParams(searchParams)
+    const params = new URLSearchParams(searchParams as Record<string, string>)
     params.set(QueryFilters.Search, searchQuery)
     return params
   }, [searchParams, searchQuery])
 
   return (
     <div
-      {...rest}
       className={cn(
         'mx-auto w-full max-w-[1136px]',
         'flex items-center',
         'sm:px-6 sm:pt-8 lg:px-0',
-        className,
       )}
     >
       <Link href={'/'} className={cn('hidden', 'sm:flex')}>

src/components/LearningHub/index.tsx

@@ -1,5 +1,3 @@
-import { Suspense } from 'react'
-
 import LearningHubFooter from '@/components/LearningHub/components/LearningHubFooter'
 import { cn } from '@/theme/utils'
 import { UiHorizontalDivider } from '@/ui'
@@ -8,16 +6,16 @@ import HeroSection from './components/HeroSection'
 import LearningHubNavbar from './components/LearningHubNavbar'
 import LearningHubPosts from './components/LearningHubPosts'
 
-export default function LearningHub({
+export default async function LearningHub({
   searchParams,
 }: {
   searchParams: Promise<{ [key: string]: string | string[] | undefined }>
 }) {
+  const awaitedSearchParams = await searchParams
+
   return (
     <div className={cn('flex flex-col overflow-hidden bg-backgroundPrimary')}>
-      <Suspense>
-        <LearningHubNavbar />
-      </Suspense>
+      <LearningHubNavbar searchParams={awaitedSearchParams} />
 
       <div
         className={cn(
@@ -30,9 +28,7 @@ export default function LearningHub({
           data-aos='fade-in'
         />
 
-        <Suspense>
-          <LearningHubPosts searchParams={searchParams} />
-        </Suspense>
+        <LearningHubPosts searchParams={searchParams} />
 
         <UiHorizontalDivider className='mb-12 mt-14' />