refactor: remove dep on BrowserOnly

nl-design-system · Dec 17, 2024 · b2de5cd · b2de5cd
1 parent a9c6175
commit b2de5cd
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 14 deletions.
diff --git a/docs/componenten/README.mdx b/docs/componenten/README.mdx
@@ -15,10 +15,9 @@ keywords:
 ---
 
 import { ComponentOverview } from "@site/src/components/ComponentOverview";
-import BrowserOnly from "@docusaurus/BrowserOnly";
 
 # Componenten
 
 De componenten van NL Design System worden met een [estafette aanpak](/handboek/estafettemodel) gemaakt en kunnen dus verschillende statussen hebben.
 
-<BrowserOnly>{() => <ComponentOverview headingLevel={2} />}</BrowserOnly>
+<ComponentOverview headingLevel={2} />
diff --git a/src/components/ComponentOverview.tsx b/src/components/ComponentOverview.tsx
@@ -21,10 +21,7 @@ export const ComponentOverview = () => {
     HALL_OF_FAME: 'hallOfFame',
     ONLY_IMPLEMENTED: 'geenImplementatie',
   };
-
   const category = useCurrentSidebarCategory();
-  const { location } = window;
-  const params = new URLSearchParams(location.search);
 
   const getComponent = (item: PropSidebarItemLink) =>
     item['title'] &&
@@ -41,16 +38,25 @@ export const ComponentOverview = () => {
     .map((item) => ({ ...item, ...getComponent(item) }));
 
   const [filteredComponents, setFilteredComponents] = useState(components);
-  const [showTodo, setShowTodo] = useState(!params.has(SEARCH_PARAM, SEARCH_VALUES.TODO));
-  const [showHelpWanted, setShowHelpWanted] = useState(!params.has(SEARCH_PARAM, SEARCH_VALUES.HELP_WANTED));
-  const [showCommunity, setShowCommunity] = useState(!params.has(SEARCH_PARAM, SEARCH_VALUES.COMMUNITY));
-  const [showCandidate, setShowCandidate] = useState(!params.has(SEARCH_PARAM, SEARCH_VALUES.CANDIDATE));
-  const [showHallOfFame, setShowHallOfFame] = useState(!params.has(SEARCH_PARAM, SEARCH_VALUES.HALL_OF_FAME));
-  const [showOnlyImplemented, setshowOnlyImplemented] = useState(
-    params.has(SEARCH_PARAM, SEARCH_VALUES.ONLY_IMPLEMENTED),
-  );
+  const [showTodo, setShowTodo] = useState(true);
+  const [showHelpWanted, setShowHelpWanted] = useState(true);
+  const [showCommunity, setShowCommunity] = useState(true);
+  const [showCandidate, setShowCandidate] = useState(true);
+  const [showHallOfFame, setShowHallOfFame] = useState(true);
+  const [showOnlyImplemented, setshowOnlyImplemented] = useState(true);
 
   useEffect(() => {
+    const { location } = window || { search: '' };
+    const params = new URLSearchParams(location.search);
+
+    /* set initial state only inside effect, as they rely on window information */
+    setShowTodo(!params.has(SEARCH_PARAM, SEARCH_VALUES.TODO));
+    setShowHelpWanted(!params.has(SEARCH_PARAM, SEARCH_VALUES.HELP_WANTED));
+    setShowCommunity(!params.has(SEARCH_PARAM, SEARCH_VALUES.COMMUNITY));
+    setShowCandidate(!params.has(SEARCH_PARAM, SEARCH_VALUES.CANDIDATE));
+    setShowHallOfFame(!params.has(SEARCH_PARAM, SEARCH_VALUES.HALL_OF_FAME));
+    setshowOnlyImplemented(params.has(SEARCH_PARAM, SEARCH_VALUES.ONLY_IMPLEMENTED));
+
     setFilteredComponents(() =>
       components
         .filter((c) => {
@@ -131,7 +137,6 @@ export const ComponentOverview = () => {
           {
             className: 'utrecht-accordion--nlds-subtle',
             headingLevel: 2,
-            expanded: params.size > 0,
 
             // TODO: Make Pull Request for Utrecht Accordion to allow `ReactNode`
             // eslint-disable-next-line @typescript-eslint/no-explicit-any