Merge branch 'feat/save-pagination-state' into 'develop'

update/save pagination state

See merge request !38

src/app/(main)/[...slug]/templates/ArticlePage.tsx

@@ -3,14 +3,14 @@
 import { GetNewsPageConfigResponseType } from "@/api/types/news-page-config";
 import { useGetNewsPageConfigGetHierarchical } from "@/api/endpoints/news-page-config";
 import ListCategory from "@/components/base/list-category";
-import { useParams } from "next/dist/client/components/navigation";
+import { useParams, useSearchParams, useRouter, usePathname } from "next/navigation";
 import { useGetNews } from "@/api/endpoints/news";
 import { GetNewsResponseType } from "@/api/types/news";
 import CardNews from "@/components/base/card-news";
 import { Pagination } from "@/components/base/pagination";
 import ListFilter from "@/components/base/list-filter";
 import EventCalendar from "@/components/base/event-calendar";
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import { Spinner } from "@/components/ui";
 
 export default function ArticlePage() {
@@ -19,11 +19,27 @@ export default function ArticlePage() {
   const slug = Array.isArray(params.slug) ? params.slug : [params.slug];
   const path = slug.join("/");
 
+  const searchParams = useSearchParams();
+  const router = useRouter();
+  const pathname = usePathname();
+
   // states
+  const initialPage = Number(searchParams.get("page") ?? "1");
   const [submitSearch, setSubmitSearch] = useState("");
-  const [page, setPage] = useState(1);
+  const [page, setPage] = useState(initialPage);
   const pageSize = 5;
 
+  useEffect(() => {
+    const params = new URLSearchParams(searchParams.toString());
+    if (page > 1) {
+      params.set("page", String(page));
+    } else {
+      params.delete("page");
+    }
+    const qs = params.toString();
+    router.replace(qs ? `${pathname}?${qs}` : pathname, { scroll: false });
+  }, [page]);
+
   // query
   const { data: categoriesPage } = useGetNewsPageConfigGetHierarchical<GetNewsPageConfigResponseType>({
     code: slug[0],

src/app/(main)/[...slug]/templates/EventPage.tsx

 'use client';
 
-import { useState } from "react";
-import { useParams } from "next/navigation";
+import { useEffect, useState } from "react";
+import { useParams, usePathname, useRouter, useSearchParams } from "next/navigation";
 
 import { useGetEvents } from "@/api/endpoints/event";
 import { EventApiResponse } from "@/api/types/event";
@@ -20,11 +20,27 @@ export default function EventPage() {
   const params = useParams();
   const slug = Array.isArray(params.slug) ? params.slug : [params.slug];
 
+  const searchParams = useSearchParams();
+  const router = useRouter();
+  const pathname = usePathname();
+
   // states
+  const initialPage = Number(searchParams.get("page") ?? "1");
   const [submitSearch, setSubmitSearch] = useState("");
-  const [page, setPage] = useState(1);
+  const [page, setPage] = useState(initialPage);
   const pageSize = 5;
 
+  useEffect(() => {
+    const params = new URLSearchParams(searchParams.toString());
+    if (page > 1) {
+      params.set("page", String(page));
+    } else {
+      params.delete("page");
+    }
+    const qs = params.toString();
+    router.replace(qs ? `${pathname}?${qs}` : pathname, { scroll: false });
+  }, [page]);
+
   // query
   const { data: categoriesPage } = useGetNewsPageConfigGetHierarchical<GetNewsPageConfigResponseType>({
     code: `${slug[0]}`,

src/app/(main)/_lib/layout/header.tsx

@@ -52,7 +52,7 @@ function Header() {
                   const value =
                     (e.currentTarget as HTMLInputElement).value || "";
                   const encoded = encodeURIComponent(value);
-                  router.push(`/search?q=${encoded}`);
+                  router.push(`/search?q=${encoded}&page=1`);
                 }
               }}
             />

src/app/(main)/search/page.tsx

 "use client";
 
-import React, { useState, Suspense } from "react";
+import React, { useState, Suspense, useEffect } from "react";
 import ListCategory from "@/components/base/list-category";
 import ListFilter from "@/components/base/list-filter";
 import CardNews from "@/components/base/card-news";
@@ -9,12 +9,15 @@ import Image from "next/image";
 import { useGetNews } from "@api/endpoints/news";
 import { GetNewsResponseType } from "@api/types/news";
 import { Spinner } from "@components/ui/spinner";
-import { useSearchParams } from 'next/navigation'
+import { useSearchParams, useRouter } from 'next/navigation'
 
 function SearchContent() {
-  const [page, setPage] = useState(1);
-  const searchParams = useSearchParams()
+  const router = useRouter();
+  const searchParams = useSearchParams();
   const query = searchParams.get('q') || '';
+  const pageFromUrl = searchParams.get('page');
+  const [page, setPage] = useState(pageFromUrl ? parseInt(pageFromUrl) : 1);
+
   const pageSize = 5;
   const { data: allData, isLoading } = useGetNews<GetNewsResponseType>({
     pageSize: String(pageSize),
@@ -22,6 +25,20 @@ function SearchContent() {
     filters: query ? `title @=${query}` : undefined,
   });
 
+  // Update URL when page changes
+  useEffect(() => {
+    const params = new URLSearchParams(searchParams.toString());
+    params.set('page', String(page));
+    router.push(`/search?${params.toString()}`, { scroll: false });
+  }, [page]);
+
+  // Sync state with URL on mount/change
+  useEffect(() => {
+    if (pageFromUrl) {
+      setPage(parseInt(pageFromUrl));
+    }
+  }, [pageFromUrl]);
+
   return (
     <div className="min-h-screen container mx-auto p-4">
       <div className="w-full flex flex-col gap-5">
@@ -29,7 +46,6 @@ function SearchContent() {
           <div className="w-full px-4 sm:px-6 lg:px-8">
             <div className="py-3">
               <h1 className="text-md md:text-lg font-semibold leading-6 text-gray-900">
-                {" "}
                 Search Results for: {query}
               </h1>
             </div>
@@ -37,7 +53,6 @@ function SearchContent() {
         </div>
 
         <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
-          {/* Main content */}
           <main className="lg:col-span-2 bg-background ">
             <div className="pb-5 overflow-hidden">
               {isLoading ? (
@@ -76,7 +91,6 @@ function SearchContent() {
             </div>
           </main>
 
-          {/* Sidebar */}
           <aside className="space-y-6 order-first lg:order-last">
             <div className="bg-white border rounded-md overflow-hidden hidden lg:block">
               <div className="w-full relative bg-gray-100">