Merge pull request #196 from TouK/NU-1086/fix-breadcrumbs

Nu-1086/breadcrumbs
TouK · Oct 4, 2023 · 2e8ab7b · 2e8ab7b
2 parents fb808e0 + 77743fd
commit 2e8ab7b
Show file tree

Hide file tree

Showing 5 changed files with 25 additions and 11 deletions.
diff --git a/src/components/deleteSubscriptionDialog.tsx b/src/components/deleteSubscriptionDialog.tsx
@@ -22,7 +22,7 @@ export const DeleteSubscriptionDialog = observer(() => {
             confirmText={"Delete subscription"}
             onSubmitSuccess={async () => {
                 await topic.fetchSubscriptionsTask();
-                navigate(`/${topic.name}`);
+                navigate(topic.name);
             }}
         />
     );

diff --git a/src/components/deleteTopicDialog.tsx b/src/components/deleteTopicDialog.tsx
@@ -1,11 +1,12 @@
 import { observer } from "mobx-react-lite";
 import React from "react";
-import { useNavigate } from "react-router-dom";
+import { useLocation, useNavigate } from "react-router-dom";
 import { useStore } from "../store/storeProvider";
 import { ConfirmDialog } from "./confirmDialog";
 
 export const DeleteTopicDialog = observer(() => {
     const { dialogs, topics } = useStore();
+    const { pathname } = useLocation();
     const navigate = useNavigate();
     const dialog = dialogs.deleteTopicDialog;
     const { topic } = dialog.params;
@@ -22,7 +23,7 @@ export const DeleteTopicDialog = observer(() => {
             confirmText={"Remove topic"}
             onSubmitSuccess={async () => {
                 await topics.fetchTask();
-                navigate("/");
+                navigate(pathname.replace(topic.name, ""));
             }}
         />
     );

diff --git a/src/components/navigationBar.tsx b/src/components/navigationBar.tsx
@@ -28,7 +28,13 @@ export const NavigationBar = observer(() => {
     const { pathname } = useLocation();
     const rootPath = useContext(RootPath);
     const normalizedPathname = pathname.indexOf(rootPath) === 0 ? pathname.substring(rootPath.length) : pathname;
-    const pathnames = normalizedPathname.split("/").filter(Boolean);
+
+    const pathnames = pathname.includes("topics")
+        ? normalizedPathname
+              .replace(/^\/topics[^/]*\//, "/")
+              .split("/")
+              .filter(Boolean)
+        : normalizedPathname.split("/").filter(Boolean);
 
     const homeText = groups.areGroupsHidden ? "Topics list" : "Groups and topics";
 
@@ -37,7 +43,6 @@ export const NavigationBar = observer(() => {
             topics.getTopicDisplayName?.(match?.params.topic) || <LinePlaceholder dark length={match?.params.topic.length} />,
         "/:topic/:subscription": (match) => match?.params.subscription,
     });
-
     return (
         <LayoutRow justifyContent="space-between" alignItems="baseline">
             <Breadcrumbs
@@ -49,14 +54,15 @@ export const NavigationBar = observer(() => {
 
                 {pathnames.map((value, index) => {
                     const last = index === pathnames.length - 1;
-                    const to = `/${pathnames.slice(0, index + 1).join("/")}`;
+                    const to = `${pathnames.slice(0, index + 1).join("/")}`;
+
                     return last ? (
                         <Typography key={to} fontWeight="bold">
-                            {nameGetter(to)}
+                            {nameGetter(`/${to}`)}
                         </Typography>
                     ) : (
                         <LinkRouter to={to} key={to}>
-                            {nameGetter(to)}
+                            {nameGetter(`/${to}`)}
                         </LinkRouter>
                     );
                 })}

diff --git a/src/components/subscriptionDialog.tsx b/src/components/subscriptionDialog.tsx
@@ -3,7 +3,7 @@ import { Field, FormikErrors } from "formik";
 import { CheckboxWithLabel, RadioGroup, TextField } from "formik-mui";
 import { observer, useObserver } from "mobx-react-lite";
 import React from "react";
-import { useNavigate } from "react-router-dom";
+import { useLocation, useNavigate } from "react-router-dom";
 import { getSubscriptionData } from "../devData";
 import { AdvancedSubscriptionFormikValues, SubscriptionFormikValues } from "../models";
 import { Dialog } from "../store/dialog";
@@ -194,6 +194,7 @@ export const AddSubscriptionDialog = observer(() => {
 export const AddClonedSubscriptionDialog = observer(() => {
     const { dialogs } = useStore();
     const dialog = dialogs.addClonedSubscription;
+    const { pathname } = useLocation();
     const { topic, subscription } = dialog.params;
 
     const initialValues = (): SubscriptionFormikValues =>
@@ -211,7 +212,13 @@ export const AddClonedSubscriptionDialog = observer(() => {
         sub.assignValuesFromForm(values);
         await topic.postSubscriptionTask(sub);
         await topic.fetchSubscriptionsTask();
-        navigate(`/${topic.name}/${values.name}`);
+        const path = getFirstPartOfPath(pathname);
+        navigate(`${path}/${topic.name}/${values.name}`);
+    };
+
+    const getFirstPartOfPath = (path: string) => {
+        const parts = path.split("/");
+        return parts.slice(0, 2).join("/");
     };
 
     return (

diff --git a/src/components/topicDialog.tsx b/src/components/topicDialog.tsx
@@ -26,7 +26,7 @@ export const TopicDialog = observer(
             await groups.fetchTask();
             await topics.fetchTask();
             const topicName = Topic.joinName(group, topic);
-            navigate(`/${topicName}`);
+            navigate(topicName);
         };
 
         const basicFields = (errors: FormikErrors<TopicFormikValues>): JSX.Element[] => [