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 {
Accordion,
AccordionItem,
@ -21,7 +20,7 @@ export interface Faq {
* @type {Function}
*/
const getOpenFaqItemsFromUrl = (slug: string): string[] => {
if (typeof window !== 'undefined') {
if (typeof window !== "undefined") {
// Use URLSearchParams to parse the query parameters from the current URL
const searchParams = new URLSearchParams(window.location.search);
@ -29,24 +28,22 @@ const getOpenFaqItemsFromUrl = (slug: string): string[] => {
const openFaqItemsString = searchParams.get(`openFaqItems-${slug}`);
// 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(",") : [];
}
};
/**
* Updates query parameters in the url when items are opened
* so that a link can be shared with the faq item already opened
*/
* Updates query parameters in the url when items are opened
* so that a link can be shared with the faq item already opened
*/
const handleChange = (
openFaqItems: (string | number)[],
slug: string
slug: string,
): void => {
// Get current url params
const searchParams = new URLSearchParams(window.location.search);
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(
`openFaqItems-${slug}`,
openFaqItems.map(String).join(","),
@ -61,20 +58,10 @@ const handleChange = (
window.location.pathname
}?${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);
};
/**
* 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 = ({
rows,
slug,
@ -101,17 +88,20 @@ export const FaqAccordion = ({
<script
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
dangerouslySetInnerHTML={{ __html: JSON.stringify(faqStructuredData) }}
dangerouslySetInnerHTML={{
__html: JSON.stringify(faqStructuredData),
}}
/>
<Accordion
allowMultipleExpanded={true}
allowZeroExpanded={true}
onChange={(itemUuids) => {
handleChange(itemUuids, slug)
handleChange(itemUuids, slug);
}}
preExpanded={getOpenFaqItemsFromUrl(slug)}
>
{rows.map((row, index) => (
// biome-ignore lint/suspicious/noArrayIndexKey: React complains if there is no key
<AccordionItem key={index}>
<AccordionItemHeading aria-level="2">
<AccordionItemButton>{row.title}</AccordionItemButton>