Merge pull request #344 from jeafreezy/fix/go-back-in-history

Fix/go back in history
hotosm · Feb 27, 2025 · 51459df · 51459df
2 parents 6c98bd3 + bf5468d
commit 51459df
Show file tree

Hide file tree

Showing 6 changed files with 36 additions and 11 deletions.
diff --git a/frontend/src/app/router.tsx b/frontend/src/app/router.tsx
@@ -322,7 +322,7 @@ const router = createBrowserRouter([
        */
 
       /**
-       * Auth route
+       * Auth route starts.
        */
       {
         path: APPLICATION_ROUTES.AUTH_CALLBACK,
@@ -333,7 +333,11 @@ const router = createBrowserRouter([
           return { Component: AuthenticationCallbackPage };
         },
       },
-
+
+      /**
+       * Auth route ends.
+       */
+
       /**
        * 404 route
        */

diff --git a/frontend/src/app/routes/models/model-details-card.tsx b/frontend/src/app/routes/models/model-details-card.tsx
@@ -106,8 +106,7 @@ export const ModelDetailsPage = () => {
         trainingId={data?.published_training as number}
         datasetId={data?.dataset as number}
       />
-
-      <BackButton className="mt-6" />
+      <BackButton className="mt-6" route={APPLICATION_ROUTES.MODELS} />
       <div className="my-12 flex flex-col gap-y-20">
         <ModelDetailsInfo
           data={data as TModelDetails}

diff --git a/frontend/src/app/routes/start-mapping.tsx b/frontend/src/app/routes/start-mapping.tsx
@@ -362,6 +362,7 @@ export const StartMappingPage = () => {
                 onClose={onDropdownHide}
                 onShow={onDropdownShow}
                 isOpened={dropdownIsOpened}
+                modelId={modelInfo?.id}
               />
             </div>
             <div className="absolute top-[10vh] right-4 z-[2] flex flex-col gap-y-4 items-end">

diff --git a/frontend/src/components/ui/button/back-button.tsx b/frontend/src/components/ui/button/back-button.tsx
@@ -1,12 +1,24 @@
 import { ArrowBackIcon } from "@/components/ui/icons";
 import { useNavigate } from "react-router-dom";
 
-const BackButton = ({ className }: { className?: string }) => {
+const BackButton = ({
+  className,
+  route,
+}: {
+  className?: string;
+  route?: string;
+}) => {
   const navigate = useNavigate();
   return (
     <button
       className={`flex items-center gap-x-2 ${className}`}
-      onClick={() => navigate(-1)}
+      onClick={() => {
+        if (route) {
+          navigate(route);
+        } else {
+          navigate(-1);
+        }
+      }}
       title="Go back"
     >
       <ArrowBackIcon className="icon md:icon-lg" />

diff --git a/frontend/src/features/start-mapping/components/header.tsx b/frontend/src/features/start-mapping/components/header.tsx
@@ -74,6 +74,7 @@ const StartMappingHeader = ({
             onClose={onFAIRLogoDropdownHide}
             onShow={onFAIRLogoDropdownShow}
             isOpened={FAIRLogoDropdownIsOpened}
+            modelId={modelInfo?.id}
           />
           <div className="flex flex-col md:flex-row md:items-center gap-x-4 z-10">
             <p

diff --git a/frontend/src/features/start-mapping/components/logo-with-dropdown.tsx b/frontend/src/features/start-mapping/components/logo-with-dropdown.tsx
@@ -6,18 +6,22 @@ import { Link } from "@/components/ui/link";
 import { navLinks } from "@/constants/general";
 import { NavLogo } from "@/components/layout";
 import { useNavigate } from "react-router-dom";
+import { APPLICATION_ROUTES } from "@/constants";
 
 type BrandLogoWithDropDownProps = {
   isOpened: boolean;
   onClose: () => void;
   onShow: () => void;
+  modelId?: string;
 };
 
-export const BrandLogoWithDropDown = function BrandLogoWithDropDown({
+export const BrandLogoWithDropDown = ({
   isOpened,
   onClose,
   onShow,
-}: BrandLogoWithDropDownProps) {
+  modelId,
+}: BrandLogoWithDropDownProps) => {
+  const navigate = useNavigate();
   const navItems = navLinks.map((link, id) => (
     <li key={`${link.title}-${id}`}>
       <Link
@@ -31,8 +35,6 @@ export const BrandLogoWithDropDown = function BrandLogoWithDropDown({
       </Link>
     </li>
   ));
-
-  const navigate = useNavigate();
   return (
     <DropDown
       placement={DropdownPlacement.BOTTOM_START}
@@ -48,7 +50,13 @@ export const BrandLogoWithDropDown = function BrandLogoWithDropDown({
         <Divider />
         <button
           className="text-body-3  block w-full px-4 py-2 text-start hover:bg-off-white hover:rounded-b-xl text-primary"
-          onClick={() => navigate(-1)}
+          onClick={() => {
+            /**
+             * Since this is on the start-mapping page, when they click on stop mapping, regardless of how they got here,
+             * they will be redirected to the model card/details page.
+             */
+            navigate(`${APPLICATION_ROUTES.MODELS}/${modelId}`);
+          }}
         >
           Stop Mapping
         </button>