fix: refactor nav-hierarchy component
Luke Karrys committed
Oct 15, 2023 at 17:41 UTC
72b26b6690bcbca7fe9dc7b0527ec38f7a459a94
6 files changed
+43
-42
src/components/nav-items.js
+10
-10
@@ -3,13 +3,13 @@ import {Link as GatsbyLink} from 'gatsby'
3
import {Box, StyledOcticon, Link, themeGet} from '@primer/react'
4
import {LinkExternalIcon} from '@primer/octicons-react'
5
import styled from 'styled-components'
6
-import NavHierarchy from '../util/nav-hierarchy'
6
+import getNav from '../util/get-nav'
7
import {useLocation, usePageContext} from '../layout'
8
9
const getActiveClass = props => {
10
- const location = NavHierarchy.getLocation(props.location.pathname)
11
- const href = NavHierarchy.getLocation(props.href)
12
- return NavHierarchy.isActiveUrl(location, href) ? 'active' : ''
10
+ const location = getNav.getLocation(props.location.pathname)
11
+ const href = getNav.getLocation(props.href)
12
+ return getNav.isActiveUrl(location, href) ? 'active' : ''
13
}
14
15
const ActiveLink = ({className, children, ...props}) => (
@@ -78,8 +78,8 @@ function topLevelItems(items, path) {
78
return (
79
<>
80
{items.map(item => {
81
- const children = NavHierarchy.isActiveUrl(path, item.url)
82
- ? NavHierarchy.getHierarchy(item, {path, hideVariants: true})
81
+ const children = getNav.isActiveUrl(path, item.url)
82
+ ? getNav.getHierarchy(item, {path, hideVariants: true})
83
: null
84
85
return (
@@ -115,8 +115,8 @@ function secondLevelItems(items, path) {
115
return (
116
<Box display="flex" flexDirection="column" mt={2} role="list">
117
{items.map(item => {
118
- const children = NavHierarchy.isActiveUrl(path, item.url)
119
- ? NavHierarchy.getHierarchy(item, {path, hideVariants: true})
118
+ const children = getNav.isActiveUrl(path, item.url)
119
+ ? getNav.getHierarchy(item, {path, hideVariants: true})
120
: null
121
return (
122
<Box key={item.title} role="listitem">
@@ -153,8 +153,8 @@ function thirdLevelItems(items) {
153
function NavItems() {
154
const location = useLocation()
155
const {repositoryUrl} = usePageContext()
156
- const path = NavHierarchy.getLocation(location.pathname)
157
- const items = NavHierarchy.getHierarchy(null, {path, hideVariants: true})
156
+ const path = getNav.getLocation(location.pathname)
157
+ const items = getNav.getHierarchy(null, {path, hideVariants: true})
158
159
return (
160
<>
src/components/search-results.js
+2
-2
@@ -1,7 +1,7 @@
1
import React from 'react'
2
import {Box, Text} from '@primer/react'
3
import useSiteMetadata from '../hooks/use-site-metadata'
4
-import NavHierarchy from '../util/nav-hierarchy'
4
+import getNav from '../util/get-nav'
5
6
function SearchResults({results, getItemProps, highlightedIndex}) {
7
const siteMetadata = useSiteMetadata()
@@ -38,7 +38,7 @@ function SearchResults({results, getItemProps, highlightedIndex}) {
38
}
39
40
function getBreadcrumbs(siteTitle, path) {
41
- const hierarchy = NavHierarchy.getItemHierarchy(path)
41
+ const hierarchy = getNav.getItemHierarchy(path)
42
43
if (hierarchy) {
44
hierarchy.pop()
src/components/variant-select.js
+5
-5
@@ -1,6 +1,6 @@
1
import React from 'react'
2
import {ActionList, ActionMenu, Box} from '@primer/react'
3
-import NavHierarchy from '../util/nav-hierarchy'
3
+import getNav from '../util/get-nav'
4
import {useLocation} from '../layout'
5
6
const VariantItem = ({match, active}) => {
@@ -69,10 +69,10 @@ const VariantMenu = ({variants, path}) => {
69
70
const VariantSelect = () => {
71
const location = useLocation()
72
- const root = NavHierarchy.getVariantRoot(location.pathname)
73
- const path = NavHierarchy.getPath(location.pathname)
74
- const vp = NavHierarchy.getVariantAndPage(root, path)
75
- const variants = vp ? NavHierarchy.getVariantsForPage(root, vp.page) : []
72
+ const root = getNav.getVariantRoot(location.pathname)
73
+ const path = getNav.getPath(location.pathname)
74
+ const vp = getNav.getVariantAndPage(root, path)
75
+ const variants = vp ? getNav.getVariantsForPage(root, vp.page) : []
76
77
if (!variants.length) {
78
return null
src/layout.js
+1
-4
@@ -13,10 +13,7 @@ const LocationContext = React.createContext(null)
13
export const useSlugger = () => React.useContext(SluggerContext)
14
export const usePageContext = () => React.useContext(PageContext)
15
export const useLocation = () => React.useContext(LocationContext)
16
-export const useFrontmatter = () => {
17
- const pageContext = usePageContext()
18
- return pageContext.frontmatter || {}
19
-}
16
+export const useFrontmatter = () => usePageContext().frontmatter
17
18
const withLayout = Component => {
19
const LayoutProvider = props => (
src/mdx/nav-hierarchy.js
+25
-21
@@ -1,48 +1,52 @@
1
import React from 'react'
2
import {Box, Link} from '@primer/react'
3
import {Link as GatsbyLink} from 'gatsby'
4
-import NavHierarchy from '../util/nav-hierarchy'
4
+import getNav from '../util/get-nav'
5
import {useLocation} from '../layout'
6
7
-function showHierarchy(items, props, depth = 1) {
8
- let hierarchy
7
+const HierarchyItem = ({item, currentDepth, ...props}) => {
8
+ const hierarchy = getNav.getHierarchy(item, props)
9
10
- if (props.depth && depth > props.depth) {
10
+ return (
11
+ <Box as="li" key={item.url}>
12
+ <Link as={GatsbyLink} key={item.title} to={item.url}>
13
+ {item.title}
14
+ </Link>
15
+ {item.description != null ? (
16
+ <Box style={{fontSize: '0.85em', marginBottom: '0.5em'}}>{item.description}</Box>
17
+ ) : null}
18
+ {hierarchy ? <Hierarchy items={hierarchy} currentDepth={currentDepth + 1} {...props} /> : null}
19
+ </Box>
20
+ )
21
+}
22
+
23
+const Hierarchy = ({items, currentDepth = 1, ...props}) => {
24
+ if (props.depth && currentDepth > props.depth) {
25
return null
26
}
27
28
return (
29
<Box as="ul">
30
{items.map(item => (
17
- <Box as="li" key={item.url}>
18
- <Link as={GatsbyLink} key={item.title} to={item.url}>
19
- {item.title}
20
- </Link>
21
- {item.description != null ? (
22
- <Box style={{fontSize: '0.85em', marginBottom: '0.5em'}}>{item.description}</Box>
23
- ) : null}
24
- {(hierarchy = NavHierarchy.getHierarchy(item, props)) != null
25
- ? showHierarchy(hierarchy, props, depth + 1)
26
- : null}
27
- </Box>
31
+ <HierarchyItem key={item.url} item={item} currentDepth={currentDepth} {...props} />
32
))}
33
</Box>
34
)
35
}
36
33
-function Index(props) {
37
+function NavHierarchy(props) {
38
const location = useLocation()
35
- const path = NavHierarchy.getLocation(location.pathname)
39
+ const path = getNav.getLocation(location.pathname)
40
const root = (props.root ? props.root : path).replace(/\/+$/g, '')
41
38
- const rootItem = NavHierarchy.getItem(root)
39
- const hierarchy = NavHierarchy.getHierarchy(rootItem, props)
42
+ const rootItem = getNav.getItem(root)
43
+ const hierarchy = getNav.getHierarchy(rootItem, props)
44
45
if (!hierarchy) {
46
throw new Error(`could not find entry for ${root}`)
47
}
48
45
- return showHierarchy(hierarchy, props)
49
+ return <Hierarchy items={hierarchy} {...props} />
50
}
51
48
-export default Index
52
+export default NavHierarchy