Fixed preserve search query after navigating back from article (#411)

* Fixed preserve search query after navigating back from article

* Fix: preserve search query when navigating back from article

Author: kh-ub-ayb

src/pages/News/NewsDetailPage.tsx

@@ -1,7 +1,7 @@
 import React, { useState, useEffect, useCallback } from 'react';
 import ShareModal from '@/components/ShareModal';
 import { Share2 } from 'lucide-react';
-import { useParams, useNavigate } from 'react-router-dom';
+import { useParams, useNavigate, useLocation } from 'react-router-dom';
 import { getPostBySlug, Post } from '@/utils/posts-utils';
 import { motion } from 'framer-motion';
 import Header from '@/sections/Header';
@@ -13,6 +13,7 @@ const NewsDetailPage: React.FC = () => {
 
   const { slug, category } = useParams<{ slug?: string; category?: string }>();
   const navigate = useNavigate();
+  const location = useLocation();
   const [post, setPost] = useState<Post | null>(null);
   const [isLoading, setIsLoading] = useState<boolean>(true);
   const [error, setError] = useState<string | null>(null);
@@ -85,12 +86,13 @@ const NewsDetailPage: React.FC = () => {
   });
 
   const handleGoBack = useCallback(() => {
+    const search = location.search || '';
     if (category) {
-      navigate(`/news/${category}`);
+      navigate(`/news/${category}${search}`);
     } else {
-      navigate('/news/community-news');
+      navigate(`/news/community-news${search}`);
     }
-  }, [navigate, category]);
+  }, [navigate, category, location.search]);
 
   const closeImageModal = useCallback(() => {
     setModalImage(null);

src/pages/News/NewsPage.tsx

@@ -1,6 +1,6 @@
 import React, { useState, useEffect, useMemo } from 'react';
 import ShareModal from '@/components/ShareModal';
-import { useNavigate, useParams } from 'react-router-dom';
+import { useNavigate, useParams, useLocation } from 'react-router-dom';
 import { getAllPosts, groupPostsByCategory, Post } from '@/utils/posts-utils';
 import Header from '@/sections/Header';
 import Footer from '@/sections/Footer';
@@ -42,7 +42,11 @@ const NewsPage: React.FC = () => {
   const [viewMode, setViewMode] = useState<'grid' | 'list' | 'magazine'>(
     'grid',
   );
-  const [searchTerm, setSearchTerm] = useState<string>('');
+  const location = useLocation();
+  const [searchTerm, setSearchTerm] = useState<string>(() => {
+    const params = new URLSearchParams(location.search);
+    return params.get('q') || '';
+  });
 
   useEffect(() => {
     async function load() {
@@ -74,14 +78,22 @@ const NewsPage: React.FC = () => {
     setActiveCategory('All');
   }, [categoryParam, categories]);
 
+  // Keep searchTerm in sync with the URL (?q=)
+  useEffect(() => {
+    const params = new URLSearchParams(location.search);
+    const q = params.get('q') || '';
+    setSearchTerm(q);
+  }, [location.search]);
+
   useEffect(() => {
     const pathCat =
       activeCategory === 'All'
         ? 'all'
         : activeCategory.toLowerCase().replace(/\s+/g, '-');
-    navigate(`/news/${pathCat}`, { replace: true });
+    const query = searchTerm ? `?q=${encodeURIComponent(searchTerm)}` : '';
+    navigate(`/news/${pathCat}${query}`, { replace: true });
     setDisplayCount(6);
-  }, [activeCategory, navigate]);
+  }, [activeCategory, navigate, searchTerm]);
 
   const sortedCategories = useMemo(() => {
     const others = categories
@@ -124,7 +136,8 @@ const NewsPage: React.FC = () => {
       activeCategory === 'All'
         ? 'all'
         : activeCategory.toLowerCase().replace(/\s+/g, '-');
-    navigate(`/news/${catPath}/${slug}`);
+    const query = searchTerm ? `?q=${encodeURIComponent(searchTerm)}` : '';
+    navigate(`/news/${catPath}/${slug}${query}`);
   };
 
   const handleShareClick = (post: Post, e: React.MouseEvent) => {
@@ -278,7 +291,18 @@ const NewsPage: React.FC = () => {
                     type="text"
                     placeholder="Search articles, topics, or categories..."
                     value={searchTerm}
-                    onChange={(e) => setSearchTerm(e.target.value)}
+                    onChange={(e) => {
+                      const value = e.target.value;
+                      setSearchTerm(value);
+                      const catPath =
+                        activeCategory === 'All'
+                          ? 'all'
+                          : activeCategory.toLowerCase().replace(/\s+/g, '-');
+                      const query = value
+                        ? `?q=${encodeURIComponent(value)}`
+                        : '';
+                      navigate(`/news/${catPath}${query}`, { replace: true });
+                    }}
                     className="w-full pl-10 pr-4 py-3 border border-gray-200 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-300"
                   />
                 </div>
@@ -380,7 +404,14 @@ const NewsPage: React.FC = () => {
               <span>{filteredPosts.length} articles found</span>
               {searchTerm && (
                 <button
-                  onClick={() => setSearchTerm('')}
+                  onClick={() => {
+                    setSearchTerm('');
+                    const catPath =
+                      activeCategory === 'All'
+                        ? 'all'
+                        : activeCategory.toLowerCase().replace(/\s+/g, '-');
+                    navigate(`/news/${catPath}`, { replace: true });
+                  }}
                   className="text-blue-600 hover:text-blue-700 underline text-sm"
                 >
                   Clear search