Code cleanup and fix linting/formatting

This commit is contained in:
thomas.ekstrand 2024-02-13 10:20:24 -06:00
parent d299f3bdd5
commit 401364d746

View file

@ -1,5 +1,4 @@
import React, { useEffect, useState } from 'react'; import BrowserOnly from "@docusaurus/BrowserOnly";
import BrowserOnly from '@docusaurus/BrowserOnly';
import { import {
Accordion, Accordion,
AccordionItem, AccordionItem,
@ -21,7 +20,7 @@ export interface Faq {
* @type {Function} * @type {Function}
*/ */
const getOpenFaqItemsFromUrl = (slug: string): string[] => { const getOpenFaqItemsFromUrl = (slug: string): string[] => {
if (typeof window !== 'undefined') { if (typeof window !== "undefined") {
// Use URLSearchParams to parse the query parameters from the current URL // Use URLSearchParams to parse the query parameters from the current URL
const searchParams = new URLSearchParams(window.location.search); const searchParams = new URLSearchParams(window.location.search);
@ -29,24 +28,22 @@ const getOpenFaqItemsFromUrl = (slug: string): string[] => {
const openFaqItemsString = searchParams.get(`openFaqItems-${slug}`); const openFaqItemsString = searchParams.get(`openFaqItems-${slug}`);
// If the parameter exists, split it by commas into an array; otherwise, return an empty array // If the parameter exists, split it by commas into an array; otherwise, return an empty array
console.log(slug, openFaqItemsString ? openFaqItemsString.split(",") : []);
return openFaqItemsString ? openFaqItemsString.split(",") : []; return openFaqItemsString ? openFaqItemsString.split(",") : [];
} }
}; };
/** /**
* Updates query parameters in the url when items are opened * Updates query parameters in the url when items are opened
* so that a link can be shared with the faq item already opened * so that a link can be shared with the faq item already opened
*/ */
const handleChange = ( const handleChange = (
openFaqItems: (string | number)[], openFaqItems: (string | number)[],
slug: string slug: string,
): void => { ): void => {
// Get current url params
const searchParams = new URLSearchParams(window.location.search); const searchParams = new URLSearchParams(window.location.search);
if (openFaqItems.length > 0) { if (openFaqItems.length > 0) {
// Convert openFaqItems to a comma-separated string and update/add the parameter // Create comma-separated string and update/add the parameter
searchParams.set( searchParams.set(
`openFaqItems-${slug}`, `openFaqItems-${slug}`,
openFaqItems.map(String).join(","), openFaqItems.map(String).join(","),
@ -61,20 +58,10 @@ const handleChange = (
window.location.pathname window.location.pathname
}?${searchParams.toString()}`; }?${searchParams.toString()}`;
// Use history.pushState to change the URL without reloading the page // Change the URL without reloading the page
window.history.pushState({ path: newUrl }, "", newUrl); window.history.pushState({ path: newUrl }, "", newUrl);
}; };
/**
* We need to get the query params using docusaurus' router
* because `window` isn't available server side
* @return {[type]} [description]
*/
const useQuery = () => {
const { search } = useLocation();
return React.useMemo(() => new URLSearchParams(search), [search]);
};
export const FaqAccordion = ({ export const FaqAccordion = ({
rows, rows,
slug, slug,
@ -101,17 +88,20 @@ export const FaqAccordion = ({
<script <script
type="application/ld+json" type="application/ld+json"
// biome-ignore lint: we need dangerouslySetInnerHTML here, and since we're the ones setting the content it's should be safe // biome-ignore lint: we need dangerouslySetInnerHTML here, and since we're the ones setting the content it's should be safe
dangerouslySetInnerHTML={{ __html: JSON.stringify(faqStructuredData) }} dangerouslySetInnerHTML={{
__html: JSON.stringify(faqStructuredData),
}}
/> />
<Accordion <Accordion
allowMultipleExpanded={true} allowMultipleExpanded={true}
allowZeroExpanded={true} allowZeroExpanded={true}
onChange={(itemUuids) => { onChange={(itemUuids) => {
handleChange(itemUuids, slug) handleChange(itemUuids, slug);
}} }}
preExpanded={getOpenFaqItemsFromUrl(slug)} preExpanded={getOpenFaqItemsFromUrl(slug)}
> >
{rows.map((row, index) => ( {rows.map((row, index) => (
// biome-ignore lint/suspicious/noArrayIndexKey: React complains if there is no key
<AccordionItem key={index}> <AccordionItem key={index}>
<AccordionItemHeading aria-level="2"> <AccordionItemHeading aria-level="2">
<AccordionItemButton>{row.title}</AccordionItemButton> <AccordionItemButton>{row.title}</AccordionItemButton>