Merge pull request #1022 from ita-social-projects/1011-Implement-Foot…

…er-Link-Filtering-Mechanism #1011 implement footer link filtering mechanism
ita-social-projects · Dec 18, 2024 · 8501cfb · 8501cfb
2 parents 4d76089 + 67c376a
commit 8501cfb
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 41 deletions.
diff --git a/FrontEnd/src/components/Footer/FooterComponents/FooterNavigation.jsx b/FrontEnd/src/components/Footer/FooterComponents/FooterNavigation.jsx
@@ -1,77 +1,76 @@
-import { HashLink } from 'react-router-hash-link';
 import { Link } from 'react-router-dom';
-
 import css from './FooterNavigation.module.css';
 
-
 const PAGE_NAVIGATION_LINKS = [
   {
     title: 'Компанії',
-    link: '/profiles/companies',
+    params: { companyType: 'companies' },
   },
   {
     title: 'Стартапи',
-    link: '/profiles/startups',
+    params: { companyType: 'startups' },
   },
 ];
+
 const SERVICES_LINKS = [
   {
     title: 'Виробники',
-    link: '/profiles/producers',
+    params: { activity: 'producers' },
   },
   {
     title: 'Імпортери',
-    link: '/profiles/importers',
+    params: { activity: 'importers' },
   },
   {
     title: 'Роздрібні мережі',
-    link: '/profiles/retailers',
+    params: { activity: 'retailers' },
   },
   {
     title: 'HORECA',
-    link: '/profiles/horeca',
+    params: { activity: 'horeca' },
   },
   {
     title: 'Інші послуги',
-    link: '/profiles/other-services',
+    params: { activity: 'other-services' },
   },
 ];
 
 function FooterNavigation() {
-
+  const generateQueryString = (params) =>
+    new URLSearchParams(params).toString();
 
   return (
     <div className={css['navigation-content']}>
       <div className={css['navigation-content__company']}>
         <h3 className={css['navigation-content-company__header']}>Підприємства</h3>
         <div className={css['navigation-content-company__text-block']}>
-        {PAGE_NAVIGATION_LINKS.map((element) => (
-          <HashLink
-            key={element.link}
-            className={css['navigation-content-company__text']}
-            to={element.link}
-          >
-            {element.title}
-          </HashLink>
-        ))}
+          {PAGE_NAVIGATION_LINKS.map((element) => (
+            <Link
+              key={element.params.companyType}
+              className={css['navigation-content-company__text']}
+              to={`/profiles?${generateQueryString(element.params)}`}
+            >
+              {element.title}
+            </Link>
+          ))}
         </div>
       </div>
       <div className={css['navigation-content__section']}>
         <h3 className={css['navigation-content-section__header']}>Сектори</h3>
-        <div  className={css['navigation-content-section__text-block']}>
-        {SERVICES_LINKS.map((element) => (
-          <Link
-            className={css['navigation-content-section__text']}
-            key={element.link}
-            to={element.link}
-          >
-            {element.title}
-          </Link>
-        ))}
+        <div className={css['navigation-content-section__text-block']}>
+          {SERVICES_LINKS.map((element) => (
+            <Link
+              key={element.params.activity}
+              className={css['navigation-content-section__text']}
+              to={`/profiles?${generateQueryString(element.params)}`}
+            >
+              {element.title}
+            </Link>
+          ))}
         </div>
       </div>
     </div>
   );
 }
 
-export default FooterNavigation;
+export default FooterNavigation;
diff --git a/FrontEnd/src/pages/ProfileList/ProfileListPage.jsx b/FrontEnd/src/pages/ProfileList/ProfileListPage.jsx
@@ -126,6 +126,11 @@ export default function ProfileListPage({ isAuthorized, isSaved }) {
     }
   }, [fetchedProfiles, pageSize, currentPage, isSaved]);
 
+  useEffect(() => {
+    setActiveTab(searchParams.get('companyType') || 'all');
+    setActiveBtn(searchParams.get('activity') || 'all');
+  }, [searchParams]);
+
   const changeCompanies = (companyId, saved) => {
     setProfiles((prevProfiles) =>
         prevProfiles.map((profile) =>
@@ -160,14 +165,6 @@ export default function ProfileListPage({ isAuthorized, isSaved }) {
     updateQueryParams(page);
   };
 
-  const handleActiveTab = (activeTab) => {
-    setActiveTab(activeTab);
-  };
-
-  const handleActiveBtn = (activeBtn) => {
-    setActiveBtn(activeBtn);
-  };
-
   return (
     <div className={css.page}>
       {error && error.response.status !==401 ? (
@@ -188,7 +185,7 @@ export default function ProfileListPage({ isAuthorized, isSaved }) {
                           className={activeTab === item.key ?
                             css['company-list__tabs--element--active'] :
                             css['company-list__tabs--element']}
-                          onClick={() => (handleFilters(item.value, activity), handleActiveTab(item.key))}
+                          onClick={() => (handleFilters(item.value, activity))}
                         >
                           {item.title === 'Усі підприємства' ? linkText : item.title}
                         </span>
@@ -208,7 +205,7 @@ export default function ProfileListPage({ isAuthorized, isSaved }) {
                     className={activeBtn === item.key ?
                       css['company-list__btns--element--active'] :
                       css['company-list__btns--element']}
-                    onClick={() => (handleFilters(companyType, item.value), handleActiveBtn(item.key))}
+                    onClick={() => (handleFilters(companyType, item.value))}
                   >
                     {item.title}
                   </button>