From 5a809be3dc22dbf2d669288dc94ec1473403f1dc Mon Sep 17 00:00:00 2001
From: Grace Park <gracepark@github.com>
Date: Wed, 17 Nov 2021 22:29:07 -0800
Subject: [PATCH] MiniTocItems: rerender tocs and fix bugs (#22948)

* add key to force rerender tocs

* move up platform specific to properly display none and go back to using contents

* remove i
---
 components/article/ArticlePage.tsx    | 19 ++++++++-----------
 components/context/ArticleContext.tsx |  3 +--
 lib/get-mini-toc-items.js             |  5 ++---
 tests/rendering/server.js             | 14 ++++++--------
 4 files changed, 17 insertions(+), 24 deletions(-)

diff --git a/components/article/ArticlePage.tsx b/components/article/ArticlePage.tsx
index 7b1f485789..312770863e 100644
--- a/components/article/ArticlePage.tsx
+++ b/components/article/ArticlePage.tsx
@@ -43,20 +43,16 @@ export const ArticlePage = () => {
   const { t } = useTranslation('pages')
   const currentPath = router.asPath.split('?')[0]
 
-  const RenderHTML = (props: { html: any }) => (
-    <div dangerouslySetInnerHTML={{ __html: props.html }}></div>
-  )
-
   const renderTocItem = (item: MiniTocItem) => {
     return (
       <ActionList.Item
-        as="a"
-        href={item.link}
-        key={item.title}
+        as="div"
+        key={item.contents}
+        className={item.platform}
         sx={{ listStyle: 'none', padding: '2px' }}
       >
-        <div className={cx('lh-condensed', item.platform)}>
-          <RenderHTML html={item.title} />
+        <div className={cx('lh-condensed')}>
+          <div dangerouslySetInnerHTML={{ __html: item.contents }} />
           {item.items && item.items.length > 0 ? (
             <ul className="ml-3">{item.items.map(renderTocItem)}</ul>
           ) : null}
@@ -126,9 +122,10 @@ export const ArticlePage = () => {
                   </Heading>
 
                   <ActionList
-                    items={miniTocItems.map((items, i) => {
+                    key={title}
+                    items={miniTocItems.map((items) => {
                       return {
-                        key: title + i,
+                        key: title,
                         text: title,
                         renderItem: () => <ul>{renderTocItem(items)}</ul>,
                       }
diff --git a/components/context/ArticleContext.tsx b/components/context/ArticleContext.tsx
index be8a245804..21160819ee 100644
--- a/components/context/ArticleContext.tsx
+++ b/components/context/ArticleContext.tsx
@@ -9,8 +9,7 @@ export type LearningTrack = {
 
 export type MiniTocItem = {
   platform: string
-  title: string
-  link: string
+  contents: string
   items?: MiniTocItem[]
 }
 
diff --git a/lib/get-mini-toc-items.js b/lib/get-mini-toc-items.js
index c2ce162575..c953f16f40 100644
--- a/lib/get-mini-toc-items.js
+++ b/lib/get-mini-toc-items.js
@@ -38,8 +38,7 @@ export default function getMiniTocItems(html, maxHeadingLevel = 2, headingScope
       // remove any <strong> tags but leave content
       $('strong', item).map((i, el) => $(el).replaceWith($(el).contents()))
 
-      const link = href
-      const title = $(item).html()
+      const contents = `<a href="${href}">${$(item).html()}</a>`
       const headingLevel = parseInt($(item)[0].name.match(/\d+/)[0], 10) || 0 // the `2` from `h2`
 
       const platform = $(item).parent('.extended-markdown').attr('class') || ''
@@ -49,7 +48,7 @@ export default function getMiniTocItems(html, maxHeadingLevel = 2, headingScope
         mostImportantHeadingLevel = headingLevel
       }
 
-      return { link, title, headingLevel, platform }
+      return { contents, headingLevel, platform }
     })
     .map((item) => {
       // set the indentation level for each item based on the most important
diff --git a/tests/rendering/server.js b/tests/rendering/server.js
index 8e63c21602..e6a5ba9b8b 100644
--- a/tests/rendering/server.js
+++ b/tests/rendering/server.js
@@ -337,7 +337,7 @@ describe('server', () => {
       )
       expect($('h2#in-this-article').length).toBe(1)
       expect($('h2#in-this-article + div div ul').length).toBeGreaterThan(0) // non-indented items
-      expect($('h2#in-this-article + div div ul a div div div ul.ml-3').length).toBeGreaterThan(0) // indented items
+      expect($('h2#in-this-article + div div ul div div div div ul.ml-3').length).toBeGreaterThan(0) // indented items
     })
 
     test('does not render mini TOC in articles with only one heading', async () => {
@@ -878,15 +878,13 @@ describe('extended Markdown', () => {
   test('renders expected mini TOC headings in platform-specific content', async () => {
     const $ = await getDOM('/en/github/using-git/associating-text-editors-with-git')
     expect($('h2#in-this-article').length).toBe(1)
+    expect($('h2#in-this-article + div div ul div.extended-markdown.mac').length).toBeGreaterThan(1)
     expect(
-      $('h2#in-this-article + div div ul a div div div.extended-markdown.mac').length
-    ).toBeGreaterThan(1)
-    expect(
-      $('h2#in-this-article + div div ul a div div div.extended-markdown.windows').length
-    ).toBeGreaterThan(1)
-    expect(
-      $('h2#in-this-article + div div ul a div div div.extended-markdown.linux').length
+      $('h2#in-this-article + div div ul div.extended-markdown.windows').length
     ).toBeGreaterThan(1)
+    expect($('h2#in-this-article + div div ul div.extended-markdown.linux').length).toBeGreaterThan(
+      1
+    )
   })
 })