Migrate FAQ page into the Typesense backend

@types/typesense-instantsearch-adapter/index.d.ts

@@ -0,0 +1,31 @@
+declare module "typesense-instantsearch-adapter" {
+  type SearchClient = object;
+
+  export interface TypesenseNode {
+    host: string;
+    port: string;
+    protocol: string;
+  }
+
+  export interface TypesenseSearchParameters {
+    queryBy: string;
+    sortBy?: string;
+    highlightFullFields?: string;
+  }
+
+  export interface TypesenseServer {
+    apiKey: string;
+    nodes: TypesenseNode[];
+  }
+
+  export interface TypesenseInstantsearchAdapterOptions {
+    server?: TypesenseServer;
+    additionalSearchParameters: TypesenseSearchParameters;
+  }
+
+  export default class TypesenseInstantsearchAdapter {
+    readonly searchClient: SearchClient;
+
+    constructor(options: TypesenseInstantsearchAdapterOptions);
+  }
+}

__tests__/pages/faq.test.tsx

@@ -1,19 +1,15 @@
 import React from "react";
 
-import { faqBuilder } from "~/lib/__mocks__/builders/faq";
-import faqSheets from "~/lib/faqs";
+// import { faqBuilder } from "~/lib/__mocks__/builders/faq";
+// import faqSheets from "~/lib/faqs";
+import FaqPage from "../../pages/faq";
 
-import FaqPage, { getStaticProps } from "../../pages/faq";
-
-import { perBuild } from "@jackfranklin/test-data-bot";
+// import { perBuild } from "@jackfranklin/test-data-bot";
 import { render, screen } from "@testing-library/react";
 
 describe("FaqPage", () => {
-  const faq = faqBuilder();
-  const faqs = [faq];
-
   it("renders the title correctly", () => {
-    render(<FaqPage faqSheets={faqs} />);
+    render(<FaqPage />);
 
     expect(screen.getByText(/pertanyaan yang sering ditanyakan/i))
       .toMatchInlineSnapshot(`
@@ -25,15 +21,16 @@ describe("FaqPage", () => {
     `);
   });
 
+  /*
   it("renders the questions and answers correctly", () => {
-    render(<FaqPage faqSheets={faqs} />);
+    render(<FaqPage />);
 
     expect(screen.getByText(faq.pertanyaan)).toBeVisible();
     expect(screen.getByText(faq.jawaban)).toBeVisible();
   });
 
   it("renders the links correctly", () => {
-    render(<FaqPage faqSheets={faqs} />);
+    render(<FaqPage />);
 
     const link = screen.getByText(faq.sumber as string);
 
@@ -49,18 +46,11 @@ describe("FaqPage", () => {
       },
     });
 
-    render(<FaqPage faqSheets={[faqWithoutSourceLink]} />);
+    render(<FaqPage />);
 
     expect(
       screen.getByText(`Sumber: ${faqWithoutSourceLink.sumber}`),
     ).toBeVisible();
   });
-});
-
-describe("getStaticProps", () => {
-  it("returns the props from the faq-sheets correctly", () => {
-    expect(getStaticProps({})).toEqual({
-      props: { faqSheets },
-    });
-  });
+  */
 });

components/faq-list.tsx

@@ -0,0 +1,82 @@
+import { Faq } from "~/lib/faqs";
+
+import htmr from "htmr";
+
+type FaqListProps = {
+  data: Faq[];
+};
+
+function groupBy<T, U>(data: T[], key: U) {
+  return data.reduce((acc: any, currentValue: any) => {
+    const groupKey = currentValue[key];
+    if (!acc[groupKey]) {
+      acc[groupKey] = [];
+    }
+    acc[groupKey].push(currentValue);
+    return acc;
+  }, {});
+}
+
+export function FAQList(props: FaqListProps) {
+  const listFaqs = groupBy(props.data, "kategori_pertanyaan");
+  return (
+    <div className="space-y-4">
+      {Object.keys(listFaqs as Record<string, unknown>).map(
+        (category: string) => (
+          <div
+            key={category}
+            className="p-4 bg-white shadow overflow-hidden rounded-md"
+          >
+            <div className="relative">
+              <div
+                aria-hidden="true"
+                className="absolute inset-0 flex items-center"
+              >
+                <div className="w-full border-t border-gray-300" />
+              </div>
+              <div className="relative flex flex-row items-center justify-start">
+                <span className="pr-3 bg-white text-lg font-medium text-gray-900">
+                  {category}
+                </span>
+              </div>
+            </div>
+            <dl className="divide-y divide-gray-200">
+              {listFaqs[category].map((question: Faq) => (
+                <div
+                  key={question.pertanyaan}
+                  className="pt-6 pb-8 md:grid md:grid-cols-12 md:gap-8"
+                >
+                  <dt className="text-base font-semibold text-gray-900 md:col-span-5">
+                    {question.pertanyaan}
+                  </dt>
+                  <dd className="mt-2 md:mt-0 md:col-span-7">
+                    <p className="text-base text-gray-500">
+                      {htmr(
+                        question.jawaban.replace(/(?:\r\n|\r|\n)/g, "<br>"),
+                      )}
+                    </p>
+                    <small>
+                      Sumber:{" "}
+                      {question.link ? (
+                        <a
+                          className="underline text-blue-800"
+                          href={question.link}
+                          rel="noreferrer"
+                          target="_blank"
+                        >
+                          {question.sumber}
+                        </a>
+                      ) : (
+                        question.sumber
+                      )}
+                    </small>
+                  </dd>
+                </div>
+              ))}
+            </dl>
+          </div>
+        ),
+      )}
+    </div>
+  );
+}

components/search/custom-hits.tsx

@@ -0,0 +1,19 @@
+import { FAQList } from "~/components/faq-list";
+import { Faq } from "~/lib/faqs";
+
+import { StateResultsProvided } from "react-instantsearch-core";
+import { connectStateResults } from "react-instantsearch-dom";
+
+function Hits(stateResults: StateResultsProvided) {
+  const { searchResults } = stateResults;
+  let results: Faq[];
+
+  try {
+    results = searchResults.hits as unknown as Faq[];
+  } catch (e) {
+    results = [];
+  }
+  return <FAQList data={results} />;
+}
+
+export default connectStateResults(Hits);