Merge pull request #1906 from airqo-platform/ft-cleanair

[website] Bug Fix on secondary Nav component

Author: Baalmart

website/frontend/src/components/CleanAir/SecondaryNav/index.js

@@ -5,46 +5,40 @@ import PropTypes from 'prop-types';
 import { useTranslation } from 'react-i18next';
 import { Link, useLocation } from 'react-router-dom';
 
-/**
- * @description Secondary navigation component for the CleanAir site
- * @param {Array} disabledTabs
- * @returns {JSX.Element}
- */
 const SecondaryNavComponent = ({ disabledTabs }) => {
   const { t } = useTranslation();
   const activeTab = useSelector((state) => state.cleanAirData.activeTab);
   const tabs = [
-    t('cleanAirSite.subNav.about'),
-    t('cleanAirSite.subNav.membership'),
-    t('cleanAirSite.subNav.events'),
-    t('cleanAirSite.subNav.resources')
+    { label: t('cleanAirSite.subNav.about'), linkName: 'about' },
+    { label: t('cleanAirSite.subNav.membership'), linkName: 'membership' },
+    { label: t('cleanAirSite.subNav.events'), linkName: 'events' },
+    { label: t('cleanAirSite.subNav.resources'), linkName: 'resources' }
   ];
+
   const dispatch = useDispatch();
   const location = useLocation();
-
   useEffect(() => {
-    dispatch(setActiveTab(tabs[0]));
-    const currentTab = tabs.findIndex((tab) => location.pathname.includes(tab.toLowerCase()));
+    const currentTab = tabs.findIndex((tab) => location.pathname.includes(tab.linkName));
     if (currentTab !== -1 && !disabledTabs.includes(currentTab)) {
       dispatch(setActiveTab(tabs[currentTab]));
     }
-  }, [location, dispatch, tabs, disabledTabs]);
+  }, [location]);
 
   return (
     <div className="header-subnav">
       <ul className="tabs">
         {tabs.map((tab, index) => (
-          <Link to={`/clean-air/${tab.toLowerCase()}`} key={index}>
+          <Link to={`/clean-air/${tab.linkName}`} key={index}>
             <li
               className={`${
-                location.pathname.includes(tab.toLowerCase()) || activeTab === tab ? 'active' : ''
+                location.pathname.includes(tab.linkName) || activeTab === index ? 'active' : ''
               } ${disabledTabs.includes(index) ? 'disabled' : ''}`}
               onClick={() => {
                 if (!disabledTabs.includes(index)) {
                   dispatch(setActiveTab(tab));
                 }
               }}>
-              <span>{tab}</span>
+              <span>{tab.label}</span>
             </li>
           </Link>
         ))}

website/frontend/src/pages/CleanAir/EventDetails.js

@@ -10,9 +10,11 @@ import PageMini from '../PageMini';
 import { useTranslation } from 'react-i18next';
 import LanguageSwitcher from 'src/components/LanguageSwitcher';
 import { Link } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom';
 
 const EventDetails = () => {
   useInitScrollTop();
+  const navigate = useNavigate();
   const { t } = useTranslation();
   const { uniqueTitle } = useParams();
 
@@ -43,11 +45,16 @@ const EventDetails = () => {
                     }}>
                     <div className="content">
                       <div className="breadcrumb">
-                        <span>
-                          <Link to="/clean-air">
-                            {t('cleanAirSite.eventsDetails.header.breadCrumb')}
-                          </Link>
-                        </span>
+                        <button
+                          onClick={() => navigate(-1)}
+                          style={{
+                            color: '#A8B2C7',
+                            background: 'none',
+                            border: 'none',
+                            cursor: 'pointer'
+                          }}>
+                          {t('cleanAirSite.eventsDetails.header.breadCrumb')}
+                        </button>
                         <span style={{ fontFamily: 'monospace' }}>{'>'}</span>
                         <span style={{ color: '#A8B2C7' }}>{event.title}</span>
                       </div>