Quick and dirty nav sorting

brianc · Jul 18, 2019 · 007e018 · 007e018
1 parent 3a8d325
commit 007e018
Show file tree

Hide file tree

Showing 4 changed files with 61 additions and 169 deletions.
diff --git a/src/components/sidebar.js b/src/components/sidebar.js
@@ -5,9 +5,7 @@ import { ExternalLink } from 'react-feather'
 import Link from './link'
 import './styles.css'
 import config from '../../config'
-import { DH_NOT_SUITABLE_GENERATOR } from 'constants'
-
-const forcedNavOrder = config.sidebar.forcedNavOrder
+import getSortedNavItems from '../sortNavItems'
 
 const Sidebar = styled('aside')`
   width: 100%;
@@ -143,41 +141,11 @@ const SidebarLayout = ({ location }) => (
       }
     `}
     render={({ allMdx }) => {
-      const navItems = allMdx.edges
-        .map(({ node }) => node.fields)
-        .reduce(
-          (acc, fields) => {
-            const { slug: cur } = fields
-            const newItem = { slug: cur, filename: fields.filename.name }
-            if (forcedNavOrder.find(url => url === cur)) {
-              return { ...acc, [cur]: [newItem] }
-            }
-
-            const prefix = cur.split('/')[1]
-
-            if (prefix && forcedNavOrder.find(url => url === `/${prefix}`)) {
-              return { ...acc, [`/${prefix}`]: [...acc[`/${prefix}`], newItem] }
-            } else {
-              return { ...acc, items: [...acc.items, newItem] }
-            }
-          },
-          { items: [] }
-        )
-
-      const allFields = allMdx.edges.map(({ node }) => node.fields || {})
-      const sortedTree = forcedNavOrder
-        .reduce((acc, cur) => {
-          return acc.concat(navItems[cur])
-        }, [])
-        .concat(navItems.items)
+      const sortedTree = getSortedNavItems(allMdx)
 
-      const nav = sortedTree.map(({ slug }) => {
+      const nav = sortedTree.map(({ slug, hasChildren }) => {
         const { node } = allMdx.edges.find(({ node }) => node.fields.slug === slug)
-        const containingSlug = allFields.find(({ slug: otherSlug }) => {
-          // is this slug contained within another one (e.g. is this a 'header' slug?)
-          return slug !== '/' && slug !== otherSlug && otherSlug.indexOf(slug) === 0
-        })
-        if (containingSlug) {
+        if (hasChildren) {
           // nested path
           return <ListSection key={node.fields.slug}>{node.fields.title}</ListSection>
         }

diff --git a/src/nav.js b/src/nav.js
diff --git a/src/sortNavItems.js b/src/sortNavItems.js
@@ -0,0 +1,52 @@
+import config from '../config'
+const forcedNavOrder = config.sidebar.forcedNavOrder
+
+// TODO(bmc) this entire file makes me sad - need to refactor this when I have more time
+// most of this was forked from the open source repo I cloned and quickly banged into shape
+export default function getSortedNavItems(allMdx) {
+  const allFields = allMdx.edges.map(({ node }) => node.fields || {})
+  const navItems = allMdx.edges
+    .map(({ node }) => node.fields)
+    .reduce(
+      (acc, fields) => {
+        const { slug: cur, title } = fields
+
+        const containingSlug = allFields.find(({ slug: otherSlug }) => {
+          // is this slug contained within another one (e.g. is this a 'header' slug?)
+          return cur !== '/' && cur !== otherSlug && otherSlug.indexOf(cur) === 0
+        })
+
+        const newItem = {
+          title,
+          hasChildren: Boolean(containingSlug),
+          url: cur,
+          slug: cur,
+          filename: fields.filename.name,
+        }
+        if (forcedNavOrder.find(url => url === cur)) {
+          return { ...acc, [cur]: [newItem] }
+        }
+
+        const prefix = cur.split('/')[1]
+
+        if (prefix && forcedNavOrder.find(url => url === `/${prefix}`)) {
+          return { ...acc, [`/${prefix}`]: [...acc[`/${prefix}`], { ...newItem }] }
+        } else {
+          return { ...acc, items: [...acc.items, newItem] }
+        }
+      },
+      { items: [] }
+    )
+
+  const sortedTree = forcedNavOrder
+    .reduce((acc, cur) => {
+      const things = navItems[cur].sort((a, b) => {
+        if (!a.hasChildren && !b.hasChildren) {
+          return a.filename.localeCompare(b.filename)
+        }
+      })
+      return acc.concat(things)
+    }, [])
+    .concat(navItems.items)
+  return sortedTree
+}
diff --git a/src/templates/docs.js b/src/templates/docs.js
@@ -8,8 +8,7 @@ import { Layout, Link } from '$components'
 import NextPrevious from '../components/NextPrevious'
 import '../components/styles.css'
 import config from '../../config'
-
-const forcedNavOrder = config.sidebar.forcedNavOrder
+import getSortedNavItems from '../sortNavItems'
 
 injectGlobal`
   * {
@@ -82,37 +81,7 @@ export default class MDXRuntimeTest extends Component {
     } = data
     const gitHub = require('../components/images/github.svg')
 
-    const navItems = allMdx.edges
-      .map(({ node }) => node.fields.slug)
-      //.filter(slug => slug !== '/')
-      .sort()
-      .reduce(
-        (acc, cur) => {
-          if (forcedNavOrder.find(url => url === cur)) {
-            return { ...acc, [cur]: [cur] }
-          }
-
-          const prefix = cur.split('/')[1]
-
-          if (prefix && forcedNavOrder.find(url => url === `/${prefix}`)) {
-            return { ...acc, [`/${prefix}`]: [...acc[`/${prefix}`], cur] }
-          } else {
-            return { ...acc, items: [...acc.items, cur] }
-          }
-        },
-        { items: [] }
-      )
-
-    const nav = forcedNavOrder
-      .reduce((acc, cur) => {
-        return acc.concat(navItems[cur])
-      }, [])
-      .concat(navItems.items)
-      .map(slug => {
-        const { node } = allMdx.edges.find(({ node }) => node.fields.slug === slug)
-
-        return { title: node.fields.title, url: node.fields.slug }
-      })
+    const nav = getSortedNavItems(allMdx).filter(x => !x.hasChildren)
 
     // meta tags
     const metaTitle = mdx.frontmatter.metaTitle
@@ -186,6 +155,9 @@ export const pageQuery = graphql`
           fields {
             slug
             title
+            filename {
+              name
+            }
           }
         }
       }