Merge pull request #32 from yougotwill/faq_page_improvements

FAQ Page Improvements

components/Accordion.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useRef } from 'react';
+import React, { useState, useRef, useEffect } from 'react';
 import { RichBody } from '../components/RichBody';
 import classNames from 'classnames';
 import TriangleOutlinedSVG from '../assets/svgs/triangle-outlined.svg';
@@ -6,11 +6,12 @@ import { useHoverDirty } from 'react-use';
 
 export function Accordion(props) {
   const { question, answer } = props;
-  const [isActive, setActiveState] = useState(false);
-  const [height, setHeight] = useState('0px');
-
   const content = useRef(null);
   const button = useRef(null);
+
+  const [isActive, setActiveState] = useState(false);
+  const [height, setHeight] = useState(`${content?.current?.scrollHeight}px`);
+  const [loaded, setLoaded] = useState(false);
   const isHovering = useHoverDirty(button);
   const isExcited = isActive || isHovering;
 
@@ -19,6 +20,14 @@ export function Accordion(props) {
     setHeight(isActive ? '0px' : `${content.current.scrollHeight}px`);
   }
 
+  useEffect(() => {
+    toggleAccordion();
+    setLoaded(true);
+  }, []);
+  useEffect(() => {
+    if (loaded) toggleAccordion();
+  }, [loaded]);
+
   return (
     <div className="mb-1 border border-current rounded-sm">
       <button
@@ -30,18 +39,20 @@ export function Accordion(props) {
         onClick={toggleAccordion}
       >
         <div style={{ maxWidth: '90%' }}>{question}</div>
-        <TriangleOutlinedSVG
+        {loaded && (
-          className={classNames(
+          <TriangleOutlinedSVG
-            'h-3 fill-current transform outline-none cursor-pointer duration-300',
+            className={classNames(
-            isActive ? 'rotate-90' : '',
+              'h-3 fill-current transform outline-none cursor-pointer duration-300',
-            isExcited ? 'text-primary' : 'text-transparent',
+              isActive ? 'rotate-90' : '',
-          )}
+              isExcited ? 'text-primary' : 'text-transparent',
-        />{' '}
+            )}
+          />
+        )}
       </button>
       <div
         ref={content}
         style={{
-          maxHeight: height,
+          height: height,
         }}
         className={classNames('accordion-content overflow-hidden')}
       >

pages/faq.tsx

@@ -1,7 +1,7 @@
 import Head from 'next/head';
 import React from 'react';
-import { GetServerSideProps } from 'next';
+import { GetStaticProps, GetStaticPropsContext } from 'next';
-import { NAVIGATION, METADATA } from '../constants';
+import { NAVIGATION, METADATA, CMS } from '../constants';
 import { SideMenuItem } from '../state/navigation';
 import { generateTitle, generateURL } from '../utils/metadata';
 import { CmsApi } from '../services/cms';
@@ -9,7 +9,9 @@ import { IFAQItem } from '../types/cms';
 import { Accordion } from '../components/Accordion';
 import { Contained } from '../components/Contained';
 
-export const getServerSideProps: GetServerSideProps = async () => {
+export const getStaticProps: GetStaticProps = async (
+  context: GetStaticPropsContext,
+) => {
   const cms = new CmsApi();
 
   const { entries: faqItems, total } = await cms.fetchFAQItems();
@@ -19,6 +21,7 @@ export const getServerSideProps: GetServerSideProps = async () => {
       faqItems,
       total,
     },
+    revalidate: CMS.CONTENT_REVALIDATE_RATE,
   };
 };