@lidofinance/ui-faq v0.43.0

@lidofinance/ui-faq

FAQ UI components and parse utils.

Installation

• React 17 || 18

yarn add @lidofinance/faq

# and additional
yarn add styled-components@^5.3.5

# and warehouse packages
yarn add @lidofinance/analytics-matomo@^0.39.0 @lidofinance/next-ui-primitives@^0.39.0

Using

There is SSR example (using getStaticProps), but also you can use parseFAQ on client side inside any client component

import { FC } from 'react';
import { GetStaticProps } from 'next';
import Head from 'next/head';

import { parseFAQ, PageFAQ, isPageFAQ } from '@lidofinance/ui-faq';
// Your implementation
import { fetchFAQ } from '../utilsApi/get-faq';

// 15 minutes
const FAQ_REVALIDATE_SECS = 900;

type IndexPageProps = {
  pageFAQ: PageFAQ | null;
}

const IndexPage: FC<ExampleProps> = ({ pageFAQ }) => {
  if (!pageFAQ || !isPageFAQ(pageFAQ)) {
    return null;
  }

  return (
    <>
      <FaqAccordion
        faqList={pageFAQ.faq}
      />
    </>
  );
};

export default IndexPage;

export const getStaticProps: GetStaticProps<IndexPageProps> = async () => {
  // FAQ
  let pageFAQ: PageFAQ | null = null;

  try {
    // Your implementation
    const rawFaqData = await fetchFAQ();
    if (rawFaqData) {
      pageFAQ = await parseFAQ(rawFaqData);
    }
  } catch {
    console.warn('FAQ not available on index page!');
  }

  return {
    props: {
      // We can't use `undefined` with `pageFAQ`.
      // Reason: `undefined` cannot be serialized as JSON. Please use `null` or omit this value.
      pageFAQ: pageFAQ || null,
    },
    revalidate: FAQ_REVALIDATE_SECS,
  };
};

Matomo analytics

Let's make with matomo analytics!

// See: @lidofinance/analytics-matomo
import { trackEvent } from '@lidofinance/analytics-matomo';
import { FAQAccordionOnLinkClickProps } from '@lidofinance/ui-faq';

type FaqAccordionOnLinkClickFactoryProps = FAQAccordionOnLinkClickProps & { pageId: string };

// It is just example - you are not limited by your imagination!
const faqAccordionOnLinkClick = ({
  pageId,
  questionId,
  question,
  linkContent,
}: FaqAccordionOnLinkClickFactoryProps) => {
  const actionEvent = `Push «${linkContent}» in FAQ ${question}`;
  // Make event like `<project_name>_faq_<page_id>_<question_id>_<link_content>`
  // The `link_content` may be with ' ' - space
  const nameEvent =
    `eth_widget_faq_${pageId}_${questionId}_${linkContent}`.replace(' ', '_');
  trackEvent('Project_Name', actionEvent, nameEvent);
};

// See above...
const IndexPage: FC<ExampleProps> = ({ pageFAQ }) => (
  <FaqAccordion
    faqList={pageFAQ.faq}
    onLinkClick={(props) => {
      faqAccordionOnLinkClick({
        pageId: pageFAQ.pageIdentification,
        ...props,
      });
    }}
  />
);
// See above...