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[] => [