diff --git a/src/components/deleteSubscriptionDialog.tsx b/src/components/deleteSubscriptionDialog.tsx index 24f1bf2..f7da91e 100644 --- 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 index 3659c0b..ae6f87e 100644 --- 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 index fb53b37..58b7554 100644 --- 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) || , "/:topic/:subscription": (match) => match?.params.subscription, }); - return ( { {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 ? ( - {nameGetter(to)} + {nameGetter(`/${to}`)} ) : ( - {nameGetter(to)} + {nameGetter(`/${to}`)} ); })} diff --git a/src/components/subscriptionDialog.tsx b/src/components/subscriptionDialog.tsx index 8d43e23..e499b0b 100644 --- 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 index 696de3a..2549d1e 100644 --- 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): JSX.Element[] => [