fix: home page story id

ccontrols · Aug 7, 2020 · e5f389b · e5f389b
1 parent 6fc959c
commit e5f389b
Show file tree

Hide file tree

Showing 13 changed files with 60 additions and 28 deletions.
diff --git a/core/store/src/create-pages/pages-paths.ts b/core/store/src/create-pages/pages-paths.ts
@@ -24,8 +24,15 @@ export const getIndexPage = (store: Store): HomePageInfo => {
     : docs.length > 0
     ? store.docs[docs[0]]
     : undefined;
+  const docId = homePage?.title;
+  const docStories: string[] =
+    docId && store.docs[docId] ? store.docs[docId].stories || [] : [];
+  const storyId: string | undefined = docStories.length
+    ? docStories[0]
+    : undefined;
   return {
-    docId: homePage?.title,
+    storyId,
+    docId,
     type: homePage?.type || defDocType,
   };
 };

diff --git a/core/store/src/state/context/categories.tsx b/core/store/src/state/context/categories.tsx
@@ -10,16 +10,16 @@ export const useDocPropCount = (category: string): DocCountType => {
   const docs = useDocs();
   useEffect(() => {
     setState(
-      Object.keys(docs).reduce((acc: { [key: string]: number }, key) => {
+      Object.keys(docs).reduce((acc: DocCountType, key) => {
         const doc = docs[key];
         const value = (doc as any)[category];
         const values = Array.isArray(value) ? value : [value];
         values.forEach(v => {
           if (v !== undefined) {
             if (typeof acc[v] === 'undefined') {
-              acc[v] = 0;
+              acc[v].count = 0;
             }
-            acc[v] = acc[v] + 1;
+            acc[v].count = acc[v].count + 1;
           }
         });
         return acc;

diff --git a/core/store/src/state/context/document.tsx b/core/store/src/state/context/document.tsx
@@ -158,7 +158,7 @@ export const useSortedDocByType = (type: DocType): Pages => {
   return [...docs].sort(docSortFn(sort));
 };
 
-export type DocCountType = Record<DocType, number>;
+export type DocCountType = Record<DocType, { count: number; home?: Document }>;
 
 /**
  * Returns a global object of key/value pairs with counts of documents per doc type
@@ -169,7 +169,10 @@ export const useDocTypeCount = (): DocCountType => {
   const { pages = {} } = store?.config || {};
   return Object.keys(pages).reduce((acc: DocCountType, type: DocType) => {
     const docs = getByDocType(type);
-    return { ...acc, [type]: docs.length };
+    return {
+      ...acc,
+      [type]: { count: docs.length, home: docs.length ? docs[0] : undefined },
+    };
   }, {});
 };
 

diff --git a/core/store/src/state/recoil/categories.ts b/core/store/src/state/recoil/categories.ts
@@ -13,16 +13,16 @@ const docPropCountState = selectorFamily<DocCountType, string>({
   key: 'docs_prop_count',
   get: category => ({ get }) => {
     const docs = get(docsState);
-    return Object.keys(docs).reduce((acc: { [key: string]: number }, key) => {
+    return Object.keys(docs).reduce((acc: DocCountType, key) => {
       const doc = docs[key];
       const value = (doc as any)[category];
       const values = Array.isArray(value) ? value : [value];
       values.forEach(v => {
         if (v !== undefined) {
           if (typeof acc[v] === 'undefined') {
-            acc[v] = 0;
+            acc[v].count = 0;
           }
-          acc[v] = acc[v] + 1;
+          acc[v].count = acc[v].count + 1;
         }
       });
       return acc;

diff --git a/core/store/src/state/recoil/document.ts b/core/store/src/state/recoil/document.ts
@@ -175,7 +175,7 @@ export const useSortedDocByType = (type: DocType): Pages => {
   return useRecoilValue(docsSortedState(type));
 };
 
-export type DocCountType = Record<DocType, number>;
+export type DocCountType = Record<DocType, { count: number; home?: Document }>;
 
 const docTypeCountState = selector<DocCountType>({
   key: 'docs_type_count',
@@ -184,7 +184,10 @@ const docTypeCountState = selector<DocCountType>({
     const { pages = {} } = store?.config || {};
     return Object.keys(pages).reduce((acc: DocCountType, type: DocType) => {
       const docs = get(docsByTypeState(type));
-      return { ...acc, [type]: docs.length };
+      return {
+        ...acc,
+        [type]: { count: docs.length, home: docs.length ? docs[0] : undefined },
+      };
     }, {});
   },
 });

diff --git a/core/store/src/types.ts b/core/store/src/types.ts
@@ -18,6 +18,7 @@ export interface DocPageInfo {
 export interface HomePageInfo {
   type: string;
   docId?: string;
+  storyId?: string;
 }
 
 export interface StoryStore {

diff --git a/examples/nextjs/pages/index.tsx b/examples/nextjs/pages/index.tsx
@@ -7,20 +7,21 @@ import { Layout, store, getIndexPage } from '@component-controls/nextjs-plugin';
 interface PageListProps {
   type: DocType;
   docId?: string;
+  storyId?: string;
 }
 
-const HomePage: FC<PageListProps> = ({ type = defDocType, docId }) => {
+const HomePage: FC<PageListProps> = ({ type = defDocType, docId, storyId }) => {
   return (
-    <Layout docId={docId}>
+    <Layout docId={docId} storyId={storyId}>
       <DocPage type={type} />
     </Layout>
   );
 };
 
 export const getStaticProps: GetStaticProps = async () => {
   const homePage = getIndexPage(store);
-  const { docId = null, type = null } = homePage;
-  return { props: { docId, type } };
+  const { docId = null, type = null, storyId = null } = homePage;
+  return { props: { docId, type, storyId } };
 };
 
 export default HomePage;
diff --git a/examples/starter/pages/index.tsx b/examples/starter/pages/index.tsx
@@ -3,20 +3,25 @@ import { GetStaticProps } from 'next';
 import { DocType, defDocType } from '@component-controls/core';
 import { DocPage } from '@component-controls/app';
 import { Layout, store, getIndexPage } from '@component-controls/nextjs-plugin';
+
 interface PageListProps {
   type: DocType;
   docId?: string;
+  storyId?: string;
 }
-const HomePage: FC<PageListProps> = ({ type = defDocType, docId }) => {
+
+const HomePage: FC<PageListProps> = ({ type = defDocType, docId, storyId }) => {
   return (
-    <Layout docId={docId}>
+    <Layout docId={docId} storyId={storyId}>
       <DocPage type={type} />
     </Layout>
   );
 };
+
 export const getStaticProps: GetStaticProps = async () => {
   const homePage = getIndexPage(store);
-  const { docId = null, type = null } = homePage;
-  return { props: { docId, type } };
+  const { docId = null, type = null, storyId = null } = homePage;
+  return { props: { docId, type, storyId } };
 };
+
 export default HomePage;
diff --git a/examples/stories/src/tutorial/getting-started/ssg/nextjs.mdx b/examples/stories/src/tutorial/getting-started/ssg/nextjs.mdx
@@ -190,20 +190,21 @@ import { Layout, store, getIndexPage } from '@component-controls/nextjs-plugin';
 interface PageListProps {
   type: DocType;
   docId?: string;
+  storyId?: string;
 }
 
-const HomePage: FC<PageListProps> = ({ type = defDocType, docId }) => {
+const HomePage: FC<PageListProps> = ({ type = defDocType, docId, storyId }) => {
   return (
-    <Layout docId={docId}>
+    <Layout docId={docId} storyId={storyId}>
       <DocPage type={type} />
     </Layout>
   );
 };
 
 export const getStaticProps: GetStaticProps = async () => {
   const homePage = getIndexPage(store);
-  const { docId = null, type = null } = homePage;
-  return { props: { docId, type } };
+  const { docId = null, type = null, storyId = null } = homePage;
+  return { props: { docId, type, storyId } };
 };
 
 export default HomePage;

diff --git a/examples/stories/src/tutorial/reference/store.mdx b/examples/stories/src/tutorial/reference/store.mdx
@@ -221,13 +221,13 @@ import { useSortedDocByType } from '@component-controls/store';
 
 Returns a global object of key/value pairs with counts of documents per DocType
 
-> useDocTypeCount = (): Record<DocType, number>
+> useDocTypeCount = (): Record<DocType, { count: number; home?: Document }>
 
 ```
 import { useDocTypeCount } from '@component-controls/store';
 {
   const counts = useDocTypeCount('blogs');
-  console.log(counts['blogs']);  
+  console.log(counts['blogs'].count);  
 } 
 ```
 

diff --git a/integrations/gatsby-theme-stories/src/gatsby-node.ts b/integrations/gatsby-theme-stories/src/gatsby-node.ts
@@ -36,13 +36,15 @@ exports.createPages = async (
     const store: Store = loadStore(require(bundleName));
 
     //home page
-    const { docId = null, type = null } = getIndexPage(store) || {};
+    const { docId = null, type = null, storyId = null } =
+      getIndexPage(store) || {};
     createPage({
       path: `/`,
       component: require.resolve(`../src/templates/DocPage.tsx`),
       context: {
         docId,
         type,
+        storyId,
       },
     });
     const homePages = getHomePages(store);

diff --git a/ui/app/src/CategoryList/CategoryList.tsx b/ui/app/src/CategoryList/CategoryList.tsx
@@ -35,7 +35,7 @@ export const CategoryList: FC<CategoryListProps> = ({ type }) => {
               key={key}
               type={type}
               name={key}
-              count={categories[key]}
+              count={categories[key].count}
             />
           ))}
         </ul>

diff --git a/ui/app/src/Header/Header.tsx b/ui/app/src/Header/Header.tsx
@@ -13,6 +13,8 @@ import {
   useConfig,
   useDocTypeCount,
   useCurrentDocument,
+  getIndexPage,
+  useStore,
 } from '@component-controls/store';
 import { Search } from '@component-controls/blocks';
 
@@ -27,6 +29,8 @@ export interface HeaderProps {
  */
 export const Header: FC<HeaderProps> = ({ toolbar = {} }) => {
   const { SidebarToggle, collapsed, responsive } = useContext(SidebarContext);
+  const store = useStore();
+  const homePage = useMemo(() => getIndexPage(store), [store]);
   const docCounts = useDocTypeCount();
   const config = useConfig();
   const doc = useCurrentDocument();
@@ -44,7 +48,12 @@ export const Header: FC<HeaderProps> = ({ toolbar = {} }) => {
               return { page: pages[docType], docType };
             })
             .filter(({ page, docType }) => {
-              return page.topMenu && docCounts[docType];
+              const docInfo = docCounts[docType];
+              return (
+                page.topMenu &&
+                docInfo.count &&
+                homePage.docId !== docInfo.home?.title
+              );
             })
             .map(({ page }) => ({
               id: page.label?.toLowerCase(),