JNG-4444: breadcrumb back fix (#25)

BlackBeltTechnology · Mar 9, 2023 · 1cc178b · 1cc178b
1 parent 340cd4f
commit 1cc178b
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 38 deletions.
diff --git a/judo-ui-react/src/main/resources/actor/src/components/CustomBreadcrumb.tsx.hbs b/judo-ui-react/src/main/resources/actor/src/components/CustomBreadcrumb.tsx.hbs
@@ -5,7 +5,7 @@
 // Template name: {{ template.templateName }}
 
 import { Breadcrumbs, Typography } from '@mui/material';
-import { useState, useContext, createContext, useMemo, useEffect } from 'react';
+import { useState, useContext, createContext, useMemo, useEffect, useCallback } from 'react';
 import type { ReactNode } from 'react';
 import { useLocation, useNavigate } from 'react-router-dom';
 import type { To } from 'react-router-dom';
@@ -29,7 +29,7 @@ interface JudoNavigationProviderContext {
 interface BreadcrumbItem {
   key: string;
   path: To;
-  label: string | null;
+  label?: string | null;
 }
 
 // @ts-ignore
@@ -52,30 +52,60 @@ export const BreadcrumbProvider = ({ children }: BreadcrumbProviderProps) => {
   const location = useLocation();
 
   const [breadcrumbItems, setBreadcrumbItems] = useState<BreadcrumbItem[]>([]);
-  const [nextBreadcrumbItem, setNextBreadcrumbItem] = useState<BreadcrumbItem>({} as unknown as BreadcrumbItem);
+  const [nextBreadcrumbItem, setNextBreadcrumbItem] = useState<BreadcrumbItem>({
+    key: '0.' + location.pathname,
+    path: location.pathname,
+  });
 
   useEffect(() => {
-    setNextBreadcrumbItem((prevNextBreadcrumbItem) => {
-      return {
-        ...prevNextBreadcrumbItem,
-        key: '0.' + location.pathname,
-        path: location.pathname,
-      };
-    });
-  }, []);
+    const listener = (event: PopStateEvent) => {
+      breadCrumbBack();
+    };
+    window.addEventListener('popstate', listener);
+
+    return () => {
+      window.removeEventListener('popstate', listener);
+    };
+  }, [breadcrumbItems]);
 
   const isBackDisabled = useMemo(() => {
     return breadcrumbItems.length === 0;
   }, [breadcrumbItems]);
 
+  const breadCrumbBack = useCallback((triggerNavigation = false) => {
+    if (breadcrumbItems.length > 0) {
+      const lastItem = breadcrumbItems[breadcrumbItems.length - 1];
+
+      setNextBreadcrumbItem({
+        ...lastItem,
+      });
+      setBreadcrumbItems((prevBreadcrumbItems) => {
+        return [...prevBreadcrumbItems.slice(0, prevBreadcrumbItems.length - 1)];
+      });
+
+      if (triggerNavigation) {
+        navigate(lastItem.path);
+      }
+    } else {
+      setBreadcrumbItems([]);
+      setNextBreadcrumbItem({
+        key: '0.' + '/'.toString(),
+        path: '/',
+      });
+
+      if (triggerNavigation) {
+        navigate('/');
+      }
+    }
+  }, [breadcrumbItems, nextBreadcrumbItem]);
+
   const judoNavigationContext = {
     clearNavigate: (to: To, signedId?: string) => {
       const target = signedId ? to.toString().replace(':signedIdentifier', signedId) : to;
 
       setBreadcrumbItems([]);
       setNextBreadcrumbItem({
         key: '0.' + target.toString(),
-        label: null,
         path: target,
       });
 
@@ -85,40 +115,19 @@ export const BreadcrumbProvider = ({ children }: BreadcrumbProviderProps) => {
       const target = signedId ? to.toString().replace(':signedIdentifier', signedId) : to;
 
       if (nextBreadcrumbItem.label === null) {
-        throw Error('Page title has not been set!');
+        console.warn('Page title has not been set!');
       }
 
-      setBreadcrumbItems((prevBreadCrumbItems) => {
-        return [...prevBreadCrumbItems, nextBreadcrumbItem];
-      });
-
+      setBreadcrumbItems([...breadcrumbItems, nextBreadcrumbItem]);
       setNextBreadcrumbItem({
         key: breadcrumbItems.length + '.' + target.toString(),
-        label: null,
         path: target,
       });
 
       navigate(target);
     },
     back: () => {
-      if (breadcrumbItems.length !== 0) {
-        const lastItem = breadcrumbItems[breadcrumbItems.length - 1];
-        setNextBreadcrumbItem(lastItem);
-        setBreadcrumbItems((prevBreadcrumbItems) => {
-          return [...prevBreadcrumbItems.slice(0, prevBreadcrumbItems.length - 1)];
-        });
-        navigate(lastItem.path);
-        return;
-      }
-
-      setBreadcrumbItems([]);
-      setNextBreadcrumbItem({
-        key: '0.' + '/'.toString(),
-        label: null,
-        path: '/',
-      });
-
-      navigate('/');
+      breadCrumbBack(true);
     },
     isBackDisabled: isBackDisabled,
     setTitle: (pageTitle: string) => {
@@ -148,7 +157,7 @@ export const CustomBreadcrumb = () => {
       {breadcrumbItems.map(({ label, key }, index) => {
         return (
           <Typography color="text.primary" key={key}>
-            {label}
+            {label || ''}
           </Typography>
         );
       })}

diff --git a/pom.xml b/pom.xml
@@ -51,7 +51,7 @@
         <frontend-maven-plugin-version>1.12.1</frontend-maven-plugin-version>
 
         <node-version>18.14.2</node-version>
-        <pnpm-version>7.27.1</pnpm-version>
+        <pnpm-version>7.29.1</pnpm-version>
 
         <judo-meta-ui-version>1.1.0.20230301_040932_6f0a751c_develop</judo-meta-ui-version>
         <judo-generator-commons-version>1.0.0.20230228_150329_e38e1c45_develop</judo-generator-commons-version>