diff --git a/src/components/framework-tabs.js b/src/components/framework-tabs.js index 2530edcd..0c217103 100644 --- a/src/components/framework-tabs.js +++ b/src/components/framework-tabs.js @@ -1,28 +1,18 @@ import React, { useState, useEffect } from "react"; import IconCard from "./modules/icon-card"; import { AnchorLink } from "gatsby-plugin-anchor-links"; -import queryString from "query-string"; const FrameworkTabs = ({ content, categories, anchorId, section }) => { const [selectedTab, setSelectedTab] = useState("All"); useEffect(() => { - // Function to get URL parameters - const getUrlParameter = (name) => { - if (typeof window !== "undefined") { - name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]"); - var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"); - var results = regex.exec(window.location.search); - return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " ")); + if (typeof window !== "undefined") { + const urlParams = new URLSearchParams(window.location.search); + const paramName = section.toLowerCase() + "_category"; + const categoryFromUrl = urlParams.get(paramName); + if (categoryFromUrl && categories.items.some((item) => item.category.includes(categoryFromUrl))) { + setSelectedTab(categoryFromUrl); } - return ""; - }; - - // Set the selected tab based on URL parameter - const paramName = section.toLowerCase() + "_category"; - const categoryFromUrl = getUrlParameter(paramName); - if (categoryFromUrl && categories.items.some((item) => item.category.includes(categoryFromUrl))) { - setSelectedTab(categoryFromUrl); } }, [section, categories.items]); diff --git a/src/pages/build.js b/src/pages/build.js index d2256a62..4b00a1e4 100644 --- a/src/pages/build.js +++ b/src/pages/build.js @@ -1,4 +1,4 @@ -import React, { useEffect } from "react"; +import React, { useEffect, useState } from "react"; import { navigate } from "gatsby"; import queryString from "query-string"; @@ -20,19 +20,27 @@ import ContactSection from "../components/sections/contact-section"; import IntegrateSection from "../components/sections/integrate-section"; const Build = () => { + const [isInitialized, setIsInitialized] = useState(false); + useEffect(() => { - const params = queryString.parse(window.location.search); - const frameworkCategory = params.framework_category; - const rollupsCategory = params.rollups_category; + if (typeof window !== "undefined" && !isInitialized) { + const params = queryString.parse(window.location.search); + const frameworkCategory = params.framework_category; + const rollupsCategory = params.rollups_category; - if (frameworkCategory || rollupsCategory) { - const newParams = {}; - if (frameworkCategory) newParams.framework_category = frameworkCategory; - if (rollupsCategory) newParams.rollups_category = rollupsCategory; + if (frameworkCategory || rollupsCategory) { + const newParams = {}; + if (frameworkCategory) newParams.framework_category = frameworkCategory; + if (rollupsCategory) newParams.rollups_category = rollupsCategory; - navigate(`/build?${queryString.stringify(newParams)}`, { replace: true }); + const newSearch = queryString.stringify(newParams); + if (newSearch !== window.location.search.slice(1)) { + navigate(`/build?${newSearch}`, { replace: true }); + } + } + setIsInitialized(true); } - }, []); + }, [isInitialized]); return (