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'
import '@site/src/css/additional/custom.css'

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 (
      <div>
        <div className="py-12 md:py-20 border-gray-200">
          <div className="flex">             
              <div className="faq mx-auto px-4 sm:px-6 fitko-newsletter">
                <div className="max-w-3xl mx-auto text-center pb-10">
                  <h2 className="h2" id="FAQs">
                    FAQ
                  </h2>
                </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 className="toc-inline flex-start pl-0 pr-12 fitko-newsletter-content" style={{position: 'fixed', width: '250px', top: '160px', right: '10px'}} >
                <TOCInline toc={toc} minHeadingLevel={1} maxHeadingLevel={2} />
              </div>

              {/* Section header */}
          </div>
        </div>
      </div>
  )
}