fix(app-store): incorrect breadcrumbs displayed in app store nested routes

src/client/modules/Apps/pages/AppDetailsPage/AppDetailsPage.tsx

@@ -7,14 +7,16 @@ import { AppDetailsContainer } from '../../containers/AppDetailsContainer/AppDet
 
 interface IProps {
   appId: string;
+  refSlug: string;
+  refTitle: string;
 }
 
-export const AppDetailsPage: NextPage<IProps> = ({ appId }) => {
+export const AppDetailsPage: NextPage<IProps> = ({ appId, refSlug, refTitle }) => {
   const { data, error } = trpc.app.getApp.useQuery({ id: appId });
 
   const breadcrumb = [
-    { name: 'Apps', href: '/apps' },
-    { name: data?.info?.name || '', href: `/apps/${data?.id}`, current: true },
+    { name: refTitle, href: `/${refSlug}` },
+    { name: data?.info?.name || '', href: `/${refSlug}/${data?.id}`, current: true },
   ];
 
   // TODO: add loading state
@@ -25,11 +27,3 @@ export const AppDetailsPage: NextPage<IProps> = ({ appId }) => {
     </Layout>
   );
 };
-
-AppDetailsPage.getInitialProps = (ctx) => {
-  const { query } = ctx;
-
-  const appId = String(query.id);
-
-  return { appId };
-};

src/pages/app-store/[id].tsx

@@ -1 +1,13 @@
-export { AppDetailsPage as default } from '../../client/modules/Apps/pages/AppDetailsPage';
+import { AppDetailsPage } from '../../client/modules/Apps/pages/AppDetailsPage';
+
+const Page = AppDetailsPage;
+
+Page.getInitialProps = (ctx) => {
+  const { query } = ctx;
+
+  const appId = String(query.id);
+
+  return { appId, refSlug: 'app-store', refTitle: 'App Store' };
+};
+
+export default Page;

src/pages/apps/[id].tsx

@@ -1 +1,13 @@
-export { AppDetailsPage as default } from '../../client/modules/Apps/pages/AppDetailsPage';
+import { AppDetailsPage } from '../../client/modules/Apps/pages/AppDetailsPage';
+
+const Page = AppDetailsPage;
+
+Page.getInitialProps = (ctx) => {
+  const { query } = ctx;
+
+  const appId = String(query.id);
+
+  return { appId, refSlug: 'apps', refTitle: 'Apps' };
+};
+
+export default Page;