fix: dynamic stories paths

ccontrols · Mar 6, 2021 · 4f3c73c · 4f3c73c
1 parent 5e41e48
commit 4f3c73c
Show file tree

Hide file tree

Showing 8 changed files with 44 additions and 32 deletions.
diff --git a/core/core/src/document-utils.ts b/core/core/src/document-utils.ts
@@ -47,7 +47,8 @@ export const getDocPath = (
   const { storyPaths } = sideNav;
   const activeTab = doc?.MDXPage ? undefined : tab;
   if (storyPaths && doc && doc.stories && doc.stories.length > 0 && store) {
-    return getStoryPath(doc.stories[0], doc, store, activeTab);
+    const { path } = getStoryPath(doc.stories[0], doc, store, activeTab);
+    return path;
   }
   const route = doc
     ? doc.route ||
@@ -65,15 +66,15 @@ export const getStoryPath = (
   doc?: Document,
   store?: Store,
   tab?: string,
-): string => {
+): { path: string; query?: string } => {
   const pagesConfig: PagesOnlyRoutes | undefined = store
     ? (store.config.pages as PagesOnlyRoutes)
     : undefined;
   const { siteRoot = '/' } = (store?.config as BuildConfiguration) || {};
   const docType = doc?.type || defDocType;
   const activeTab = doc?.MDXPage ? undefined : tab;
   if (!storyId) {
-    return getDocPath(docType, doc, store, undefined, activeTab);
+    return { path: getDocPath(docType, doc, store, undefined, activeTab) };
   }
   const { basePath = '' } = pagesConfig?.[docType] || {};
   const docRoute = removeTrailingSlash(doc?.route || basePath);
@@ -82,10 +83,17 @@ export const getStoryPath = (
   const id = dynamicId || storyId;
   const route = `${docRoute}${id ? ensureStartingSlash(id) : ''}${
     activeTab ? ensureStartingSlash(activeTab) : ''
-  }${dynamicId ? `?story=${name}` : ''}`;
-  return encodeURI(`${siteRoot}${route}`);
+  }`;
+  return {
+    path: encodeURI(`${siteRoot}${route}`),
+    query: dynamicId ? `story=${name}` : undefined,
+  };
 };
 
+export const formatStoryPath = (
+  storyPath: ReturnType<typeof getStoryPath>,
+): string => `${storyPath.path}${storyPath.query ? `?${storyPath.query}` : ''}`;
+
 export const getDocTypePath = (
   store: Store,
   basePath: string | undefined,

diff --git a/core/core/test/paths.test.ts b/core/core/test/paths.test.ts
@@ -107,7 +107,7 @@ describe('paths', () => {
         undefined,
         storeDefault,
         'test',
-      ),
+      ).path,
     ).toEqual('/docs/api-introducetion--story-mame/test');
   });
   it('story route with title with root "/root/"', () => {
@@ -117,17 +117,17 @@ describe('paths', () => {
         undefined,
         storeSiteRoot2,
         'test',
-      ),
+      ).path,
     ).toEqual('/root/docs/api-introducetion--story-mame/test');
   });
   it('story route with dynmic id with root "/root/"', () => {
-    expect(
-      getStoryPath(
-        'api-introducetion--dynamic',
-        undefined,
-        storeSiteRoot2,
-        'test',
-      ),
-    ).toEqual('/root/docs/api-introducetion--story-mame/test?story=Dynamic');
+    const { path, query } = getStoryPath(
+      'api-introducetion--dynamic',
+      undefined,
+      storeSiteRoot2,
+      'test',
+    );
+    expect(path).toEqual('/root/docs/api-introducetion--story-mame/test');
+    expect(query).toEqual('story=Dynamic');
   });
 });
diff --git a/core/routes/src/routes/docs-pages.ts b/core/routes/src/routes/docs-pages.ts
@@ -53,6 +53,7 @@ const getUniquesByField = (
 export interface DocPagesPath {
   type: DocType;
   path: string;
+  query?: string;
   lastModified?: string;
   docId?: string;
   storyId?: string;
@@ -90,13 +91,14 @@ export const getDocPages = (store: Store): DocPagesPath[] => {
                 ? doc.stories
                 : [undefined];
             stories.forEach((storyId?: string) => {
-              const path = getStoryPath(storyId, doc, store, route);
+              const { path, query } = getStoryPath(storyId, doc, store, route);
               if (!docPaths.find(p => p.path === path)) {
                 docPaths.push({
                   lastModified: doc.dateModified
                     ? new Date(doc.dateModified).toISOString()
                     : undefined,
                   path,
+                  query,
                   type: docType,
                   activeTab: route,
                   docId: doc.title,

diff --git a/core/store/src/state/context/story.tsx b/core/store/src/state/context/story.tsx
@@ -9,6 +9,7 @@ import React, {
 import {
   Story,
   getStoryPath,
+  formatStoryPath,
   CURRENT_STORY,
   docStoryToId,
   getComponentName,
@@ -196,7 +197,7 @@ export const useStoryPath = (storyId: string): string => {
     return '';
   }
   const doc = store.docs[story?.doc || ''];
-  return getStoryPath(story.id, doc, store, activeTab);
+  return formatStoryPath(getStoryPath(story.id, doc, store, activeTab));
 };
 
 export const useGetStoryPath = (): ((
@@ -207,6 +208,6 @@ export const useGetStoryPath = (): ((
   return (storyId: string, activeTab?: string): string => {
     const story = store.stories[storyId];
     const doc = story && story.doc ? store.docs[story.doc] : undefined;
-    return getStoryPath(storyId, doc, store, activeTab);
+    return formatStoryPath(getStoryPath(storyId, doc, store, activeTab));
   };
 };
diff --git a/ui/app/src/AppContext/AppContext.tsx b/ui/app/src/AppContext/AppContext.tsx
@@ -35,16 +35,14 @@ export const AppContext: FC<AppContextProps> = ({
       ? queryString.parse(window.location.search)
       : undefined;
   let dynStoryId: string | undefined;
-  if (query && docId && storyId && !store.stories[storyId]) {
-    if (typeof query.story === 'string') {
-      dynStoryId = docStoryToId(docId, query.story);
-    } else {
-      //if dynamic stories - the storyId could be wrong
-      if (store.docs[docId] && store.docs[docId].stories) {
-        const stories = store.docs[docId].stories as string[];
-        if (stories.length) {
-          dynStoryId = stories[0];
-        }
+  if (query && docId && storyId && typeof query.story === 'string') {
+    dynStoryId = docStoryToId(docId, query.story);
+  } else if (docId && storyId && !store.stories[storyId]) {
+    //if dynamic stories - the storyId could be wrong
+    if (store.docs[docId] && store.docs[docId].stories) {
+      const stories = store.docs[docId].stories as string[];
+      if (stories.length) {
+        dynStoryId = stories[0];
       }
     }
   } else {

diff --git a/ui/app/src/SEO/SEO.tsx b/ui/app/src/SEO/SEO.tsx
@@ -50,7 +50,7 @@ export const SEO: FC<SEOProps> = ({ Helmet, doc, config }) => {
     description) as string | undefined;
   const url =
     typeof window === 'undefined'
-      ? getStoryPath(story?.id, doc, store, tab)
+      ? getStoryPath(story?.id, doc, store, tab).path
       : window.location.href;
   const author = doc?.author || siteAuthor;
 

diff --git a/ui/app/src/Sidebar/Sidebar.tsx b/ui/app/src/Sidebar/Sidebar.tsx
@@ -27,6 +27,7 @@ import {
   defDocType,
   Store,
   getStoryPath,
+  formatStoryPath,
   getDocPath,
   PageConfiguration,
   StaticMenuItems,
@@ -64,7 +65,7 @@ const createMenuItem = (
       return '';
     }
     const doc = story.doc ? store.docs[story.doc] : undefined;
-    return getStoryPath(story.id, doc, store, activeTab);
+    return formatStoryPath(getStoryPath(story.id, doc, store, activeTab));
   };
 
   const documentPath = (

diff --git a/ui/blocks/src/PackageLink/LocalImport.tsx b/ui/blocks/src/PackageLink/LocalImport.tsx
@@ -2,7 +2,7 @@
 /** @jsx jsx */
 import { FC, useMemo } from 'react';
 import { jsx } from 'theme-ui';
-import { getStoryPath } from '@component-controls/core';
+import { getStoryPath, formatStoryPath } from '@component-controls/core';
 import { Tag, Link } from '@component-controls/components';
 import { useStore } from '@component-controls/store';
 
@@ -39,7 +39,9 @@ export const LocalImport: FC<LocalImportProps> = ({ componentHash, name }) => {
       if (doc?.stories?.length) {
         storyId = doc?.stories[0];
       }
-      return (storyId || doc) && getStoryPath(storyId, doc, store);
+      return (
+        (storyId || doc) && formatStoryPath(getStoryPath(storyId, doc, store))
+      );
     }
     return undefined;
   }, [store, componentHash, name]);