fix: doc paths for documents with stories - first

ccontrols · Jul 25, 2020 · 55e6189 · 55e6189
1 parent b3819fa
commit 55e6189
Show file tree

Hide file tree

Showing 5 changed files with 14 additions and 36 deletions.
diff --git a/core/core/src/document-utils.ts b/core/core/src/document-utils.ts
@@ -20,7 +20,10 @@ export const getDocPath = (
   name: string = '',
   activeTab?: string,
 ): string => {
-  const { basePath = '' } = pagesConfig?.[docType] || {};
+  const { basePath = '', storyPaths } = pagesConfig?.[docType] || {};
+  if (storyPaths && doc && doc.stories && doc.stories.length > 0) {
+    return getStoryPath(doc.stories[0], doc, pagesConfig, activeTab);
+  }
   const route = doc
     ? doc.route ||
       `${ensureStartingSlash(

diff --git a/core/store/src/hooks/document.ts b/core/store/src/hooks/document.ts
@@ -169,10 +169,12 @@ const navigationSelector = selector<NavigationResult>({
     const doc = get(currentDocumentSelector);
     const config = get(configSelector);
     const activeTab = get(activeTabAtom);
+
     const result: NavigationResult = {};
     if (doc) {
       const docId = doc.title;
-      const docs = get(docsByTypeSelector(doc.type || defDocType));
+      const type = doc.type || defDocType;
+      const docs = get(docsByTypeSelector(type));
       //next page
       const nextIndex = docs.findIndex(p => p.title === docId);
       if (nextIndex >= 0 && nextIndex < docs.length - 1) {
@@ -258,17 +260,10 @@ export const useDocumentPath: UseGetDocumentPath = (
 
 export const useGetDocumentPath = (): UseGetDocumentPath => {
   const getDoc = useGetDocument();
-  const currentActiveTab = useActiveTab();
   const config = useConfig();
   return (type = defDocType, name, activeTab) => {
     const doc = getDoc(name);
-    return getDocPath(
-      type,
-      doc,
-      config?.pages,
-      name,
-      activeTab || currentActiveTab,
-    );
+    return getDocPath(type, doc, config?.pages, name, activeTab);
   };
 };
 

diff --git a/core/store/src/hooks/story.ts b/core/store/src/hooks/story.ts
@@ -65,17 +65,11 @@ export const useStoryPath = (storyId: string): string => {
 
 export const useGetStoryPath = () => {
   const store = useStore();
-  const currentActiveTab = useActiveTab();
   const config = useConfig();
   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,
-      config?.pages,
-      activeTab || currentActiveTab,
-    );
+    return getStoryPath(storyId, doc, config?.pages, activeTab);
   };
 };
 

diff --git a/ui/app/src/Sidebar/Sidebar.tsx b/ui/app/src/Sidebar/Sidebar.tsx
@@ -7,6 +7,7 @@ import {
   useCurrentDocument,
   useDocByType,
   useConfig,
+  useActiveTab,
 } from '@component-controls/store';
 import {
   Sidebar as AppSidebar,
@@ -38,11 +39,6 @@ export interface SidebarProps {
    * document type
    */
   type?: DocType;
-
-  /**
-   * currently active tab. Use to creae the sidemenu links
-   */
-  activeTab?: string;
 }
 
 const createMenuItem = (
@@ -132,10 +128,10 @@ const createMenuItem = (
 export const Sidebar: FC<SidebarProps> = ({
   title: propsTitle,
   type = defDocType,
-  activeTab,
 }) => {
   const { SidebarClose, responsive } = useContext(SidebarContext);
   const store = useStore();
+  const activeTab = useActiveTab();
   const { title: docId } = useCurrentDocument() || {};
 
   const config = useConfig() || {};

diff --git a/ui/app/src/SidebarsPage/SidebarsStoryPage.tsx b/ui/app/src/SidebarsPage/SidebarsStoryPage.tsx
@@ -5,8 +5,6 @@ import { DocType, TabConfiguration, Document } from '@component-controls/core';
 import {
   useActiveTab,
   useGetDocumentPath,
-  useCurrentStory,
-  useGetStoryPath,
   useConfig,
 } from '@component-controls/store';
 import * as pages from '@component-controls/pages';
@@ -38,14 +36,11 @@ export interface DocPageProps {
  */
 export const SidebarsStoryPage: FC<DocPageProps> = ({ type, doc }) => {
   const docId = doc.title;
-  const story = useCurrentStory();
-  const storyId = story?.id;
   const config = useConfig();
-  const getStoryPath = useGetStoryPath();
   const getDocumentPath = useGetDocumentPath();
   const activeTab = useActiveTab();
   const pageConfig = config?.pages?.[type] || {};
-  const { tabs = [], storyPaths } = pageConfig;
+  const { tabs = [] } = pageConfig;
   const selectedTab = activeTab
     ? activeTab
     : tabs.length > 0
@@ -72,7 +67,7 @@ export const SidebarsStoryPage: FC<DocPageProps> = ({ type, doc }) => {
   const layout = doc.layout;
   return (
     <Box variant={docToVariant(doc)}>
-      {layout?.navSidebar && <Sidebar type={type} activeTab={activeTab} />}
+      {layout?.navSidebar && <Sidebar type={type} />}
       <Box sx={{ flexGrow: 1 }} id="content">
         <Tabs fontSize={2} defaultIndex={tabIndex}>
           {tabs && tabs.length > 1 && (
@@ -81,12 +76,7 @@ export const SidebarsStoryPage: FC<DocPageProps> = ({ type, doc }) => {
                 <Tab key={`tab_${tab.route}`}>
                   <Link
                     href={
-                      storyPaths && storyId
-                        ? getStoryPath(
-                            storyId,
-                            tabIndex > 0 ? tab.route : undefined,
-                          )
-                        : docId
+                      docId
                         ? getDocumentPath(
                             type,
                             docId,