Skip to content

Commit 264a12d

Browse files
rachmarirachmari
authored
remove and rename old site tree components (github#19478)
1 parent 8b0ba71 commit 264a12d

File tree

3 files changed

+174
-375
lines changed

3 files changed

+174
-375
lines changed

‎components/SidebarNav.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import Link from 'next/link'
33
import { LinkExternalIcon, MarkGithubIcon } from '@primer/octicons-react'
44
import { useTranslation } from './hooks/useTranslation'
55
import { useMainContext } from './context/MainContext'
6-
import { ProductSiteTreeNew } from './product/ProductSiteTreeNew'
6+
import { ProductSiteTree } from './product/ProductSiteTree'
77
import { AllProductsLink } from './product/AllProductsLink'
88
import { useVersion } from './hooks/useVersion'
99

@@ -41,7 +41,7 @@ export const SidebarNav = (props: Props) => {
4141
</ul>
4242
) : (
4343
<ul className="sidebar-products">
44-
<ProductSiteTreeNew />
44+
<ProductSiteTree />
4545
</ul>
4646
)}
4747
</nav>

‎components/product/ProductSiteTree.tsx

+172-181
Original file line numberDiff line numberDiff line change
@@ -1,201 +1,192 @@
1-
import cx from 'classnames'
1+
import { useRouter } from 'next/router'
22
import Link from 'next/link'
3+
import cx from 'classnames'
34

45
import { useMainContext } from 'components/context/MainContext'
5-
import { AllProductsLink } from './AllProductsLink'
6-
import { useRouter } from 'next/router'
6+
import { AllProductsLink } from 'components/product/AllProductsLink'
7+
// <!--
8+
// Styling note:
79

8-
/* Styling note:
9-
10-
Categories, Maptopics, and Articles list items get a class of `active` when they correspond to content
11-
hierarchy of the current page. If an item's URL is also the same as the current URL, the item
12-
also gets an `is-current-page` class.
13-
*/
10+
// Categories, Maptopics, and Articles list items get a class of `active` when they correspond to content
11+
// hierarchy of the current page. If an item's URL is also the same as the current URL, the item
12+
// also gets an `is-current-page` class.
13+
// -->
1414
export const ProductSiteTree = () => {
1515
const router = useRouter()
16-
const { productSiteTree: product, page, breadcrumbs } = useMainContext()
17-
if (!product) {
16+
const { currentProductTree: currentProductTree } = useMainContext()
17+
18+
if (!currentProductTree) {
1819
return null
1920
}
2021

22+
const productTitle = currentProductTree.renderedShortTitle || currentProductTree.renderedFullTitle
2123
return (
2224
<>
2325
<AllProductsLink />
26+
{!currentProductTree.page.hidden && (
27+
<>
28+
<li title="" className="sidebar-product mb-2">
29+
<Link href={currentProductTree.href}>
30+
<a className="pl-4 pr-5 pb-1 f4">{productTitle}</a>
31+
</Link>
32+
</li>
2433

25-
<li title={product.title} className="sidebar-product mb-2">
26-
{!page.hidden && (
27-
<Link href={product.href}>
28-
<a className="pl-4 pr-5 pb-1 f4 color-text-primary">{product.title}</a>
29-
</Link>
30-
)}
31-
</li>
32-
<li>
33-
<ul className="sidebar-categories list-style-none">
34-
{Object.entries(product.categories || {}).map(([key, category], i) => {
35-
const isActive = breadcrumbs.category?.href === category.href
36-
const isCurrent = isActive && router.asPath === category.href
37-
const title = category.shortTitle || category.title
38-
return (
39-
<li
40-
key={key}
41-
className={cx(
42-
'sidebar-category py-1',
43-
isActive && 'active',
44-
isCurrent && 'is-current-page',
45-
category.standalone && 'standalone-category'
46-
)}
47-
>
48-
{category.standalone ? (
49-
<a
50-
href={category.href}
51-
className="pl-4 pr-2 py-2 f6 text-uppercase d-block flex-auto mr-3 color-text-primary"
52-
>
53-
{title}
54-
</a>
55-
) : (
56-
<details
57-
className="dropdown-withArrow details details-reset"
58-
open={breadcrumbs.category?.href === category.href || i < 3}
34+
<li>
35+
<ul className="sidebar-categories list-style-none">
36+
{currentProductTree.childPages.map((childPage, i) => {
37+
const isStandaloneCategory = childPage.page.documentType === 'article'
38+
39+
const childTitle = childPage.renderedShortTitle || childPage.renderedFullTitle
40+
const isActive = router.asPath.includes(childPage.href)
41+
const isCurrent = router.asPath === childPage.href
42+
return (
43+
<li
44+
className={cx(
45+
'sidebar-category py-1',
46+
isActive && 'active',
47+
isCurrent && 'is-current-page',
48+
isStandaloneCategory && 'standalone-category'
49+
)}
5950
>
60-
<summary>
61-
<div className="d-flex flex-justify-between">
62-
<a
63-
href={category.href}
64-
className="pl-4 pr-2 py-2 f6 text-uppercase d-block flex-auto mr-3 color-text-primary"
65-
>
66-
{title}
51+
{isStandaloneCategory ? (
52+
<Link href={childPage.href}>
53+
<a className="pl-4 pr-2 py-2 f6 text-uppercase d-block flex-auto mr-3">
54+
{childTitle}
6755
</a>
68-
{(isActive || i < 3) && (
69-
<svg
70-
xmlns="http://www.w3.org/2000/svg"
71-
className="octicon flex-shrink-0 arrow mr-3"
72-
style={{ marginTop: 7 }}
73-
viewBox="0 0 16 16"
74-
width="16"
75-
height="16"
76-
>
77-
{' '}
78-
<path
79-
fillRule="evenodd"
80-
clipRule="evenodd"
81-
d="M12.7803 6.21967C13.0732 6.51256 13.0732 6.98744 12.7803 7.28033L8.53033 11.5303C8.23744 11.8232 7.76256 11.8232 7.46967 11.5303L3.21967 7.28033C2.92678 6.98744 2.92678 6.51256 3.21967 6.21967C3.51256 5.92678 3.98744 5.92678 4.28033 6.21967L8 9.93934L11.7197 6.21967C12.0126 5.92678 12.4874 5.92678 12.7803 6.21967Z"
82-
></path>
83-
</svg>
56+
</Link>
57+
) : (
58+
<details
59+
className={cx(
60+
'dropdown-withArrow details details-reset',
61+
router.asPath.includes(childPage.href) || i < 3 ? 'open' : ''
8462
)}
85-
</div>
86-
</summary>
87-
88-
{(isActive || i < 4) &&
89-
(category.maptopics ? (
90-
// <!-- some categories have maptopics with child articles -->
91-
<ul className="sidebar-topics list-style-none position-relative">
92-
{Object.entries(category.maptopics).map(([key, maptopic]) => {
93-
if (!maptopic || maptopic.hidden) {
94-
return null
95-
}
96-
97-
const title = maptopic.shortTitle || maptopic.title
98-
const isActiveMapTopic = breadcrumbs.maptopic?.href == maptopic.href
99-
const isCurrentMapTopic =
100-
isActiveMapTopic && router.asPath === maptopic.href
101-
return (
102-
<li
103-
key={key}
104-
className={cx(
105-
'sidebar-maptopic',
106-
isActiveMapTopic && 'active',
107-
isCurrentMapTopic && 'is-current-page'
108-
)}
109-
>
110-
<a
111-
href={maptopic.href}
112-
className="pl-4 pr-5 py-2 color-text-primary"
113-
>
114-
{title}
115-
</a>
116-
<ul className="sidebar-articles my-2">
117-
{Object.entries(maptopic.articles || {}).map(
118-
([key, article], i, arr) => {
119-
if (!article || article.hidden) {
120-
return null
121-
}
122-
123-
const isLast = i === arr.length - 1
124-
125-
const title = article.shortTitle || article.title
126-
const isActiveArticle =
127-
breadcrumbs.article?.href === article.href
128-
const isCurrentArticle =
129-
isActiveArticle && router.asPath === article.href
130-
return (
131-
<li
132-
key={key}
133-
className={cx(
134-
'sidebar-article',
135-
isActiveArticle && 'active',
136-
isCurrentArticle && 'is-current-page'
137-
)}
138-
>
139-
<a
140-
href={article.href}
141-
className={cx(
142-
'pl-6 pr-5 py-1 color-text-primary',
143-
isLast && 'pb-2'
144-
)}
145-
>
146-
{title}
147-
</a>
148-
</li>
149-
)
150-
}
151-
)}
152-
</ul>
153-
</li>
154-
)
155-
})}
156-
</ul>
157-
) : (
158-
// <!-- some categories have no maptopics, only articles -->
159-
<ul className="sidebar-articles list-style-none">
160-
{Object.entries(category.articles || {}).map(([key, article], i, arr) => {
161-
if (!article || article.hidden) {
162-
return null
163-
}
164-
165-
const isLast = i === arr.length - 1
166-
const isActive = breadcrumbs.article?.href === article.href
167-
const isCurrent = isActive && router.asPath === article.href
168-
169-
return (
170-
<li
171-
key={key}
172-
className={cx(
173-
'sidebar-article',
174-
isActive && 'active',
175-
isCurrent && 'is-current-page'
176-
)}
63+
>
64+
<summary>
65+
<div className="d-flex flex-justify-between">
66+
<Link href={childPage.href}>
67+
<a className="pl-4 pr-2 py-2 f6 text-uppercase d-block flex-auto mr-3">
68+
{childTitle}
69+
</a>
70+
</Link>
71+
{i < 3 && (
72+
<svg
73+
xmlns="http://www.w3.org/2000/svg"
74+
className="octicon flex-shrink-0 arrow mr-3"
75+
style={{ marginTop: 7 }}
76+
viewBox="0 0 16 16"
77+
width="16"
78+
height="16"
17779
>
178-
<a
179-
href={article.href}
180-
className={cx(
181-
'pl-6 pr-5 py-1 color-text-primary',
182-
isLast && 'pb-2'
183-
)}
184-
>
185-
{article.shortTitle || article.title}
186-
</a>
187-
</li>
188-
)
189-
})}
190-
</ul>
191-
))}
192-
</details>
193-
)}
194-
</li>
195-
)
196-
})}
197-
</ul>
198-
</li>
80+
{' '}
81+
<path
82+
fillRule="evenodd"
83+
clipRule="evenodd"
84+
d="M12.7803 6.21967C13.0732 6.51256 13.0732 6.98744 12.7803 7.28033L8.53033 11.5303C8.23744 11.8232 7.76256 11.8232 7.46967 11.5303L3.21967 7.28033C2.92678 6.98744 2.92678 6.51256 3.21967 6.21967C3.51256 5.92678 3.98744 5.92678 4.28033 6.21967L8 9.93934L11.7197 6.21967C12.0126 5.92678 12.4874 5.92678 12.7803 6.21967Z"
85+
></path>
86+
</svg>
87+
)}
88+
</div>
89+
</summary>
90+
{router.asPath.includes(childPage.href) || i < 3 ? (
91+
<>
92+
{/* <!-- some categories have maptopics with child articles --> */}
93+
{childPage.childPages[0].page.documentType === 'mapTopic' ? (
94+
<ul className="sidebar-topics list-style-none position-relative">
95+
{childPage.childPages.map((grandchildPage) => {
96+
const grandchildTitle =
97+
grandchildPage.renderedShortTitle ||
98+
grandchildPage.renderedFullTitle
99+
const isActive = router.asPath.includes(grandchildPage.href)
100+
const isCurrent = router.asPath === grandchildPage.href
101+
return (
102+
<li
103+
className={cx(
104+
'sidebar-maptopic',
105+
isActive && 'active',
106+
isCurrent && 'is-current-page'
107+
)}
108+
>
109+
<Link href={grandchildPage.href}>
110+
<a className="pl-4 pr-5 py-2">{grandchildTitle}</a>
111+
</Link>
112+
<ul className="sidebar-articles my-2">
113+
{grandchildPage.childPages.map(
114+
(greatgrandchildPage, i, arr) => {
115+
const greatgrandchildTitle =
116+
greatgrandchildPage.renderedShortTitle ||
117+
greatgrandchildPage.renderedFullTitle
118+
const isLast = i === arr.length - 1
119+
const isActive = router.asPath.includes(
120+
greatgrandchildPage.href
121+
)
122+
const isCurrent =
123+
router.asPath === greatgrandchildPage.href
124+
return (
125+
<li
126+
className={cx(
127+
'sidebar-article',
128+
isActive && 'active',
129+
isCurrent && 'is-current-page'
130+
)}
131+
>
132+
<Link href={greatgrandchildPage.href}>
133+
<a
134+
className={cx(
135+
'pl-6 pr-5 py-1',
136+
isLast && 'pb-2'
137+
)}
138+
>
139+
{greatgrandchildTitle}
140+
</a>
141+
</Link>
142+
</li>
143+
)
144+
}
145+
)}
146+
</ul>
147+
</li>
148+
)
149+
})}
150+
</ul>
151+
) : childPage.childPages[0].page.documentType == 'article' ? (
152+
<ul className="sidebar-articles list-style-none">
153+
{/* <!-- some categories have no maptopics, only articles --> */}
154+
{childPage.childPages.map((grandchildPage, i, arr) => {
155+
const grandchildTitle =
156+
grandchildPage.renderedShortTitle ||
157+
grandchildPage.renderedFullTitle
158+
const isLast = i === arr.length - 1
159+
const isActive = router.asPath.includes(grandchildPage.href)
160+
const isCurrent = router.asPath === grandchildPage.href
161+
return (
162+
<li
163+
className={cx(
164+
'sidebar-article',
165+
isActive && 'active',
166+
isCurrent && 'is-current-page'
167+
)}
168+
>
169+
<Link href={grandchildPage.href}>
170+
<a className={cx('pl-6 pr-5 py-1', isLast && 'pb-2')}>
171+
{grandchildTitle}
172+
</a>
173+
</Link>
174+
</li>
175+
)
176+
})}
177+
</ul>
178+
) : null}
179+
</>
180+
) : null}
181+
</details>
182+
)}
183+
</li>
184+
)
185+
})}
186+
</ul>
187+
</li>
188+
</>
189+
)}
199190
</>
200191
)
201192
}

0 commit comments

Comments
 (0)