fix: docs by type sorted

ccontrols · Jul 25, 2020 · b4465c3 · b4465c3
1 parent 5f454dc
commit b4465c3
Show file tree

Hide file tree

Showing 4 changed files with 59 additions and 18 deletions.
diff --git a/core/store/src/hooks/document.ts b/core/store/src/hooks/document.ts
@@ -106,27 +106,68 @@ export const useDocSort = (type: DocType) =>
 const docsByTypeSelector = selectorFamily<Pages, DocType>({
   key: 'docs_by_type',
   get: type => ({ get }) => {
-    const docs = get(docsSelector);
-    const sort = get(docSortByTypeAtom(type));
-    return Object.keys(docs)
-      .reduce((acc: Pages, key: string) => {
-        const doc: Document | undefined = docs[key];
-        if (doc) {
-          const { type: docType = defDocType } = doc;
-          if (docType === type) {
-            return [...acc, doc];
-          }
+    const store = get(storeAtom);
+    const docs = store.docs;
+    const { storySort } = get(configSelector) || {};
+    let resultDocs = Object.keys(docs).reduce((acc: Pages, key: string) => {
+      const doc: Document | undefined = docs[key];
+      if (doc) {
+        const { type: docType = defDocType } = doc;
+        if (docType === type) {
+          return [...acc, doc];
+        }
+      }
+      return acc;
+    }, []);
+
+    if (storySort) {
+      resultDocs = resultDocs.sort((a: Document, b: Document) => {
+        //@ts-ignore
+        const sort = storySort(a.title, b.title);
+        if (sort !== 0) {
+          return sort;
+        }
+        return resultDocs.indexOf(a) - resultDocs.indexOf(b);
+      });
+    }
+    //split documents by their common 'parent'
+    resultDocs = resultDocs
+      .map(doc => {
+        const levels = doc.title.split('/');
+        const parent = levels.slice(0, -1).join('/');
+        return { id: doc, parent };
+      })
+      .sort((a, b) => {
+        if (a.parent === b.parent) {
+          return (
+            (store.docs[a.id.title].order || 0) -
+            (store.docs[b.id.title].order || 0)
+          );
         }
-        return acc;
-      }, [])
-      .sort(docSortFn(sort));
+        return 0;
+      })
+      .map(item => item.id);
+    return resultDocs;
   },
 });
 
 export const useDocByType = (type: DocType): Pages => {
   return useRecoilValue(docsByTypeSelector(type));
 };
 
+const docsSortedSelector = selectorFamily<Pages, DocType>({
+  key: 'docs_sorted_by_type',
+  get: type => ({ get }) => {
+    const docs = get(docsByTypeSelector(type));
+    const sort = get(docSortByTypeAtom(type));
+    return [...docs].sort(docSortFn(sort));
+  },
+});
+
+export const useSortedDocByType = (type: DocType): Pages => {
+  return useRecoilValue(docsSortedSelector(type));
+};
+
 export type DocCountType = Record<DocType, number>;
 
 const docTypeCountSelector = selector<DocCountType>({

diff --git a/ui/app/src/AppContext/AppContext.tsx b/ui/app/src/AppContext/AppContext.tsx
@@ -31,7 +31,6 @@ export const AppContext: FC<AppContextProps> = ({
   linkClass,
   activeTab,
 }) => {
-  console.log(docId, storyId);
   const { pages } = store.config || {};
   const page = pages?.[type];
   const documentId = docId

diff --git a/ui/app/src/DocumentHomePage/DocumentHomePage.tsx b/ui/app/src/DocumentHomePage/DocumentHomePage.tsx
@@ -3,7 +3,7 @@ import { FC } from 'react';
 import { jsx } from 'theme-ui';
 import { DocType } from '@component-controls/core';
 import { Title } from '@component-controls/components';
-import { useConfig, useDocByType } from '@component-controls/store';
+import { useConfig, useSortedDocByType } from '@component-controls/store';
 import { PageContainer } from '../PageContainer';
 import { DocumentsList } from '../DocumentsList';
 import { DocPage } from '../DocPage';
@@ -24,7 +24,7 @@ export const DocumentHomePage: FC<DocumentHomePageProps> = ({ type }) => {
   if (isCategory) {
     return <CategoryList type={type} />;
   }
-  const pages = useDocByType(type);
+  const pages = useSortedDocByType(type);
   const page = config?.pages?.[type] || {};
   return page.indexHome ? (
     <PageContainer variant="pagelist.container" type={type} id="content">

diff --git a/ui/app/src/DocumentsList/DocumentsList.stories.tsx b/ui/app/src/DocumentsList/DocumentsList.stories.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import { ThemeProvider } from '@component-controls/components';
-import { MockContext, useDocByType } from '@component-controls/blocks';
+import { MockContext } from '@component-controls/blocks';
+import { useDocByType } from '@component-controls/store';
 import { DocumentsList } from './DocumentsList';
 
 export default {
@@ -10,7 +11,7 @@ export default {
 
 const MockList = () => {
   const pages = useDocByType('story');
-  return <DocumentsList pages={pages} />;
+  return <DocumentsList pages={pages} type="story" />;
 };
 
 export const overview = () => (