Merge pull request #3121 from LiteFarmOrg/LF-4091-show-animals-page-t…

…itles-in-top-menu

Lf 4091 show animals page titles in top menu

packages/webapp/package.json

@@ -97,6 +97,7 @@
     "@types/react": "^18.0.25",
     "@types/react-dom": "^18.0.9",
     "@types/react-redux": "^7.1.25",
+    "@types/react-router-dom": "4.3.1",
     "@typescript-eslint/parser": "^5.45.0",
     "@vitejs/plugin-react": "^4.1.0",
     "babel-loader": "^8.3.0",

packages/webapp/public/locales/en/translation.json

@@ -1574,6 +1574,11 @@
     "NO_RESULTS_FOR": "Sorry, we couldn't find any results for your search term <1>'{{searchTerm}}'</1>",
     "ZERO": "0 results"
   },
+  "SECTION_HEADER": {
+    "ANIMALS_GROUPS": "Animal groups",
+    "ANIMALS_INVENTORY": "Animal inventory",
+    "ANIMALS_LOCATION": "Animal locations"
+  },
   "SENSOR": {
     "BRAND": "Brand",
     "BRAND_HELPTEXT": "Brands that LiteFarm can integrate with are shown below. If you would no longer like to use this sensor brand, try retiring this sensor instead.",

packages/webapp/public/locales/es/translation.json

@@ -1575,6 +1575,11 @@
     "NO_RESULTS_FOR": "Disculpe, no hemos podido encontrar resultados para su búsqueda <1>'{{searchTerm}}'</1>",
     "ZERO": "0 resultados"
   },
+  "SECTION_HEADER": {
+    "ANIMALS_GROUPS": "MISSING",
+    "ANIMALS_INVENTORY": "MISSING",
+    "ANIMALS_LOCATION": "MISSING"
+  },
   "SENSOR": {
     "BRAND": "Marca",
     "BRAND_HELPTEXT": "A continuación se muestran las marcas con las que LiteFarm puede integrarse. Si ya no desea utilizar esta marca de sensores, retire este sensor.",

packages/webapp/public/locales/fr/translation.json

@@ -1576,6 +1576,11 @@
     "NO_RESULTS_FOR": "Aucun résultat pour <1>'{{searchTerm}}'",
     "ZERO": "Aucun résultat"
   },
+  "SECTION_HEADER": {
+    "ANIMALS_GROUPS": "MISSING",
+    "ANIMALS_INVENTORY": "MISSING",
+    "ANIMALS_LOCATION": "MISSING"
+  },
   "SENSOR": {
     "BRAND": "Marque",
     "BRAND_HELPTEXT": "Les marques avec lesquelles LiteFarm peut s’intégrer sont indiquées ci-dessous. Si vous ne souhaitez plus utiliser cette marque de capteur, essayez de retirer ce capteur.",

packages/webapp/public/locales/pt/translation.json

@@ -1575,6 +1575,11 @@
     "NO_RESULTS_FOR": "Desculpe, não encontramos nenhum resultado para seu termo de pesquisa <1>'{{searchTerm}}'</1>",
     "ZERO": "0 resultados"
   },
+  "SECTION_HEADER": {
+    "ANIMALS_GROUPS": "MISSING",
+    "ANIMALS_INVENTORY": "MISSING",
+    "ANIMALS_LOCATION": "MISSING"
+  },
   "SENSOR": {
     "BRAND": "Marca",
     "BRAND_HELPTEXT": "As marcas com as quais o LiteFarm pode se integrar são mostradas abaixo. Se você não quiser mais usar esta marca de sensor, tente removê-lo.",

packages/webapp/src/components/Navigation/TopMenu/TopMenu.jsx

@@ -33,13 +33,15 @@ import {
 } from '@mui/material';
 import Alert from '../../../containers/Navigation/Alert';
 import { useTranslation } from 'react-i18next';
+import { useSectionHeader } from '../useSectionHeaders';
 import clsx from 'clsx';
 import styles from './styles.module.scss';
 
 const TopMenu = ({ history, isMobile, showNavActions, onClickBurger, showNav }) => {
   const { t } = useTranslation(['translation']);
   const profileIconRef = useRef(null);
   const selectedLanguage = getLanguageFromLocalStorage();
+  const sectionHeader = useSectionHeader(history.location.pathname);
 
   const [openMenu, setOpenMenu] = useState(false);
   const toggleMenu = () => {
@@ -208,7 +210,9 @@ const TopMenu = ({ history, isMobile, showNavActions, onClickBurger, showNav })
   const showMainNavigation = (
     <>
       {isMobile && burgerMenuIcon}
-      <Typography sx={{ flexGrow: 1 }} />
+      <Typography sx={{ flexGrow: 1 }} className={styles.sectionHeader}>
+        {!isMobile && sectionHeader}
+      </Typography>
       <IconButton
         data-cy="home-notificationButton"
         edge="end"

packages/webapp/src/components/Navigation/TopMenu/styles.module.scss

@@ -100,3 +100,7 @@
 .floaterMenuPosition {
   margin-top: 8px;
 }
+
+.sectionHeader {
+  margin-left: 16px;
+}

packages/webapp/src/components/Navigation/useSectionHeaders.tsx

@@ -0,0 +1,51 @@
+/*
+ *  Copyright 2024 LiteFarm.org
+ *  This file is part of LiteFarm.
+ *
+ *  LiteFarm is free software: you can redistribute it and/or modify
+ *  it under the terms of the GNU General Public License as published by
+ *  the Free Software Foundation, either version 3 of the License, or
+ *  (at your option) any later version.
+ *
+ *  LiteFarm is distributed in the hope that it will be useful,
+ *  but WITHOUT ANY WARRANTY; without even the implied warranty of
+ *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ *  GNU General Public License for more details, see <https://www.gnu.org/licenses/>.
+ */
+
+import {
+  ANIMALS_GROUPS_URL,
+  ANIMALS_INVENTORY_URL,
+  ANIMALS_LOCATION_URL,
+} from '../../util/siteMapConstants';
+import { useTranslation } from 'react-i18next';
+import type { Pathname } from 'history';
+
+// Key value pair for path and its header
+interface PathHeaderKVP {
+  [key: string]: string;
+}
+
+/**
+ * Retrieves the translated section header based on the provided path.
+ *
+ * @param {Pathname} path - The pathname to match against specific sections.
+ * @returns {string | null} Returns the translated section header if the path matches a known section, otherwise returns null.
+ *
+ * @example
+ * const currentPath = '/animals';
+ * const sectionHeader = useSectionHeader(currentPath);
+ * console.log(sectionHeader); // Output: 'Translated Animals Section Header'
+ */
+
+export function useSectionHeader(path: Pathname): string | null {
+  const { t } = useTranslation(['translation']);
+
+  const HEADERS_BY_PATH: PathHeaderKVP = {
+    [ANIMALS_GROUPS_URL]: t('SECTION_HEADER.ANIMALS_GROUPS'),
+    [ANIMALS_INVENTORY_URL]: t('SECTION_HEADER.ANIMALS_INVENTORY'),
+    [ANIMALS_LOCATION_URL]: t('SECTION_HEADER.ANIMALS_LOCATION'),
+  };
+
+  return HEADERS_BY_PATH[path] ?? null;
+}

packages/webapp/src/routes/AnimalsRoutes.jsx

@@ -1,5 +1,5 @@
 /*
- *  Copyright 2023 LiteFarm.org
+ *  Copyright 2024 LiteFarm.org
  *  This file is part of LiteFarm.
  *
  *  LiteFarm is free software: you can redistribute it and/or modify