fix infinit loop

celestiaorg · Aug 7, 2024 · 5305b96 · 5305b96
1 parent b1a09f9
commit 5305b96
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 26 deletions.
diff --git 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
@@ -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 (
 		<Layout footerBoxes={FooterBoxes}>