FAQList.jsx

import React, { useEffect } from 'react'
import JsxParser from 'react-jsx-parser'

import FaqItem from '@components/FaqItem'
import Link from '@docusaurus/Link'
import ApiLink from '@components/ApiLink'
import faqs from '../data/faq-parsed.json'
import TOCInline from '@theme/TOCInline'

let init = false

export default function FAQList() {

  // load groups, parse for table of content
  const { groups } = faqs
  const toc = faqs.groups.map((g) => {
    const c = g.subgroups.map((g) => {
      return { value: g.name, id: g.anchor, children: [], level: 2 }
    })
    return { value: g.name, id: g.anchor, children: c, level: 1 }
  })

  // need to only trigger this once on load and scroll to correct positin then
  useEffect(() => {
    if (!init && !!location.hash) {
      init = true
      const id = location.hash.replace('#', '')
      const el = document.getElementById(id)
      if (el) {
        const offsetTop = el.offsetTop
        document.body.scrollTo({
          top: offsetTop,
          left: 0,
          behavior: 'smooth',
        })
      }
    }
  })

  return (
    <section>
      <div className="max-w-6xl mx-auto px-4 sm:px-6">
        <div className="py-12 md:py-20 border-t border-gray-200">
          {/* Section header */}
          <div className="max-w-3xl mx-auto text-center pb-10">
            <h2 className="h2" id="FAQs">
              FAQs
            </h2>
          </div>

          <div className="toc-inline mb-10">
            <TOCInline toc={toc} minHeadingLevel={1} maxHeadingLevel={2} />
          </div>

          {groups.map((group, i) => (
            <div key={'g' + i}>
              <div className="max-w-3xl mx-auto text-center pb-5" key={i}>
                <a className="faq-anchor" id={group.anchor} />
                <h3 className="h3">{group.name}</h3>
              </div>

              {group.subgroups.map((subgroup, j) => (
                <div key={'sg' + j}>
                  <div className="max-w-3xl mx-auto text-center pb-5">
                    <a className="faq-anchor" id={subgroup.anchor} />
                    <h4 className="h4">{subgroup.name}</h4>
                  </div>

                  <ul className="mx-auto">
                    {subgroup.items.map((item, k) => (
                      <FaqItem title={item.title} key={'i' + k}>
                        <a className="faq-anchor" id={subgroup.anchor + k} />
                        <JsxParser
                          bindings={{
                            JSON: JSON,
                          }}
                          components={{ Link, ApiLink }}
                          jsx={item.content}
                        />
                      </FaqItem>
                    ))}
                    <span
                      className="block border-t border-gray-300 mb-10"
                      aria-hidden="true"
                    />
                  </ul>
                </div>
              ))}
            </div>
          ))}
        </div>
      </div>
    </section>
  )
}