mudhorn/meshtastic
1
0
Fork 0
mirror of https://github.com/meshtastic/meshtastic.git synced 2025-03-05 21:00:08 -08:00
Code Issues Actions Packages Projects Releases Wiki Activity

Use Docusaurus BrowserOnly for state

Browse source
This commit is contained in:
thomas.ekstrand 2024-02-13 10:07:03 -06:00
parent 88ce2a7a94
commit cfbcff14a7
1 changed files with 83 additions and 64 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

147
src/components/FaqAccordion.tsx
View file

@ -1,4 +1,5 @@
import React from "react"; import React, { useEffect, useState } from 'react';
import BrowserOnly from '@docusaurus/BrowserOnly';
import { import {
Accordion, Accordion,
AccordionItem, AccordionItem,
@ -20,14 +21,58 @@ export interface Faq {
* @type {Function} * @type {Function}
*/ */
const getOpenFaqItemsFromUrl = (slug: string): string[] => { const getOpenFaqItemsFromUrl = (slug: string): string[] => {
// Use URLSearchParams to parse the query parameters from the current URL if (typeof window !== 'undefined') {
// Use URLSearchParams to parse the query parameters from the current URL
const searchParams = new URLSearchParams(window.location.search);
// Get the 'openFaqItems' parameter as a comma-separated 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
*/
const handleChange = (
openFaqItems: (string | number)[],
slug: string
): void => {
// Get current url params
const searchParams = new URLSearchParams(window.location.search); const searchParams = new URLSearchParams(window.location.search);
// Get the 'openFaqItems' parameter as a comma-separated string if (openFaqItems.length > 0) {
const openFaqItemsString = searchParams.get(`openFaqItems-${slug}`); // Convert openFaqItems to a comma-separated string and update/add the parameter
searchParams.set(
`openFaqItems-${slug}`,
openFaqItems.map(String).join(","),
);
} else {
// If openFaqItems is empty, remove the parameter from the URL
searchParams.delete(`openFaqItems-${slug}`);
}
// If the parameter exists, split it by commas into an array; otherwise, return an empty array // Construct the new URL, preserve existing parameters
return openFaqItemsString ? openFaqItemsString.split(",") : []; const newUrl = `${window.location.protocol}//${window.location.host}${
window.location.pathname
}?${searchParams.toString()}`;
// Use history.pushState to 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 = ({ export const FaqAccordion = ({
@ -48,64 +93,38 @@ export const FaqAccordion = ({
})), })),
}; };
// Use the getOpenFaqItemsFromUrl function to set the
// initial state of preExpanded based on URL parameters
const [preExpanded, setPreExpanded] = React.useState<string[]>(
getOpenFaqItemsFromUrl(slug),
);
/**
* 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)[]): 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
searchParams.set(
`openFaqItems-${slug}`,
openFaqItems.map(String).join(","),
);
} else {
// If openFaqItems is empty, remove the parameter from the URL
searchParams.delete(`openFaqItems-${slug}`);
}
// Construct the new URL, preserve existing parameters
const newUrl = `${window.location.protocol}//${window.location.host}${
window.location.pathname
}?${searchParams.toString()}`;
// Use history.pushState to change the URL without reloading the page
window.history.pushState({ path: newUrl }, "", newUrl);
};
return ( return (
<> <BrowserOnly fallback={<div>Loading FAQ's...</div>}>
<script {() => {
type="application/ld+json" return (
// 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) }} <script
/> type="application/ld+json"
<Accordion // biome-ignore lint: we need dangerouslySetInnerHTML here, and since we're the ones setting the content it's should be safe
allowMultipleExpanded={true} dangerouslySetInnerHTML={{ __html: JSON.stringify(faqStructuredData) }}
allowZeroExpanded={true} />
onChange={handleChange} <Accordion
preExpanded={preExpanded} allowMultipleExpanded={true}
> allowZeroExpanded={true}
{rows.map((row, index) => ( onChange={(itemUuids) => {
<AccordionItem> handleChange(itemUuids, slug)
<AccordionItemHeading aria-level="2"> }}
<AccordionItemButton>{row.title}</AccordionItemButton> preExpanded={getOpenFaqItemsFromUrl(slug)}
</AccordionItemHeading> >
<AccordionItemPanel> {rows.map((row, index) => (
<ReactMarkdown>{row.content}</ReactMarkdown> <AccordionItem key={index}>
</AccordionItemPanel> <AccordionItemHeading aria-level="2">
</AccordionItem> <AccordionItemButton>{row.title}</AccordionItemButton>
))} </AccordionItemHeading>
</Accordion> <AccordionItemPanel>
</> <ReactMarkdown>{row.content}</ReactMarkdown>
</AccordionItemPanel>
</AccordionItem>
))}
</Accordion>
</>
);
}}
</BrowserOnly>
); );
}; };