Make changes according to new version

Author: max-programming

src/app/(public)/repos/[language]/_components/pagination.tsx

@@ -1,12 +1,13 @@
 import { Button } from '@/app/(public)/_components/button';
 import { ArrowLeft, ArrowRight } from 'lucide-react';
 import Link from 'next/link';
+import type { SearchParams } from '@/types';
 
 const MAX_PER_PAGE = 21;
 interface PaginationProps {
   page: number;
   totalCount: number;
-  searchParams: Record<string, string | string[] | undefined>;
+  searchParams: SearchParams;
 }
 
 export function Pagination({

src/app/(public)/repos/[language]/page.tsx

@@ -8,25 +8,27 @@ import { RepoCard } from './_components/repo-card';
 import { Sorter } from './_components/sorter';
 import { StarsFilter } from './_components/stars-filter';
 import { Pagination } from './_components/pagination';
-import { Suspense } from 'react';
-import type { RepoData, RepoItem, RepoResponse } from '@/types';
+import type { RepoData, RepoItem, RepoResponse, SearchParams } from '@/types';
 import type { Metadata } from 'next';
 import { auth } from '@/auth';
 
 interface ReposPageProps {
-  params: { language: string };
-  searchParams: Record<string, string | string[] | undefined>;
+  params: Promise<{ language: string }>;
+  searchParams: Promise<SearchParams>;
 }
 
 export default async function ReposPage({
-  params: { language },
+  params,
   searchParams
 }: ReposPageProps) {
-  const key = JSON.stringify(searchParams);
-  const { repos, page } = await getRepos(language, searchParams);
+  const { language } = await params;
+  const sp = await searchParams;
+
+  const key = JSON.stringify(sp);
+  const { repos, page } = await getRepos(language, sp);
 
   return (
-    <Suspense fallback={<p>Loading...</p>} key={key}>
+    <>
       <Header />
       <ScrollToTop />
       <div className="container mx-auto">
@@ -36,10 +38,8 @@ export default async function ReposPage({
               <h1 className="mb-5 text-5xl font-medium uppercase text-hacktoberfest-light-green">
                 {repos.total_count} repositories for{' '}
                 <span className="font-mono font-bold text-hacktoberfest-pink">
-                  {searchParams.q
-                    ? searchParams.q +
-                      ' in ' +
-                      capitalize(decodeURIComponent(language))
+                  {sp.q
+                    ? sp.q + ' in ' + capitalize(decodeURIComponent(language))
                     : capitalize(decodeURIComponent(language))}
                 </span>
               </h1>
@@ -56,22 +56,25 @@ export default async function ReposPage({
         <Pagination
           page={page}
           totalCount={repos.total_count}
-          searchParams={searchParams}
+          searchParams={sp}
         />
       </div>
-    </Suspense>
+    </>
   );
 }
 
-export function generateMetadata({ params }: ReposPageProps): Metadata {
+export async function generateMetadata({
+  params
+}: ReposPageProps): Promise<Metadata> {
+  const { language } = await params;
   return {
-    title: `${capitalize(decodeURIComponent(params.language))} Repositories`
+    title: `${capitalize(decodeURIComponent(language))} Repositories`
   };
 }
 
 async function getRepos(
   language: string,
-  searchParams: ReposPageProps['searchParams']
+  searchParams: SearchParams
 ): Promise<RepoResponse> {
   const client = getXataClient();
   const session = await auth();
@@ -144,7 +147,7 @@ async function getRepos(
 
 async function getReportedRepos() {
   const client = getXataClient();
-  const reports = await client.db.reports 
+  const reports = await client.db.reports
     .select(['repoId'])
     .filter({ valid: false })
     .getMany();

src/app/actions.ts

@@ -3,6 +3,7 @@
 import { auth, signIn, signOut } from '@/auth';
 import { sendReportSchema, SendReportSchema } from './validation';
 import { getXataClient } from '@/xata';
+import { z } from 'zod';
 
 const client = getXataClient();
 
@@ -19,7 +20,7 @@ export async function sendReportAction(data: SendReportSchema) {
   if (!session || !session.user) throw new Error('You must be logged in.');
   const { success, data: body, error } = sendReportSchema.safeParse(data);
 
-  if (!success) return error.formErrors;
+  if (!success) return z.treeifyError(error);
 
   const user = await client.db.nextauth_users
     .filter({ email: session.user.email })

src/components/report-modal.tsx

@@ -42,7 +42,7 @@ export function ReportModal() {
         toast.success('Report sent successfully');
         setRepo(null);
       } else {
-        toast.error(response.formErrors.join(', '));
+        toast.error(response.errors.join(', '));
       }
     } catch (err: any) {
       toast.error(err.message);

src/types.ts

@@ -128,3 +128,5 @@ export interface RepoResponse {
   languageName: string;
   repos: RepoData;
 }
+
+export type SearchParams = Record<string, string | string[] | undefined>;