From 8a0f3538aced322f8f69ec56d582efa0fd9b7a43 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?G=C3=A1bor=20Tam=C3=A1s?= <t.gabor880312@gmail.com>
Date: Wed, 7 Aug 2024 20:37:34 +0200
Subject: [PATCH] fix

---
 .gitignore                       |  3 ++-
 src/components/framework-tabs.js | 27 +++++++++++++++++++--------
 2 files changed, 21 insertions(+), 9 deletions(-)

diff --git a/.gitignore b/.gitignore
index d0e9d480..5f47e70e 100644
--- a/.gitignore
+++ b/.gitignore
@@ -6,4 +6,5 @@ node_modules/
 package-lock.json
 .idea/
 .env.development
-.env.production
\ No newline at end of file
+.env.production
+.vercel
diff --git a/src/components/framework-tabs.js b/src/components/framework-tabs.js
index ca5361d1..2530edcd 100644
--- a/src/components/framework-tabs.js
+++ b/src/components/framework-tabs.js
@@ -6,17 +6,27 @@ import queryString from "query-string";
 const FrameworkTabs = ({ content, categories, anchorId, section }) => {
 	const [selectedTab, setSelectedTab] = useState("All");
 
-	const allUniqueCategories = [...new Set(categories.items.flatMap((item) => item.category))];
-
 	useEffect(() => {
-		const params = queryString.parse(window.location.search);
-		const categoryParam = params[`${section.toLowerCase()}_category`] || params.framework_category;
-		if (categoryParam && allUniqueCategories.includes(categoryParam)) {
-			setSelectedTab(categoryParam);
+		// 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, " "));
+			}
+			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, allUniqueCategories]);
+	}, [section, categories.items]);
 
-	console.log(allUniqueCategories);
+	const allUniqueCategories = ["All", ...new Set(categories.items.flatMap((item) => item.category))];
 
 	return (
 		<section className='frameworks' id={`${content.items[anchorId].title.replace(/\s+/g, "-").toLowerCase()}`}>
@@ -29,6 +39,7 @@ const FrameworkTabs = ({ content, categories, anchorId, section }) => {
 					{allUniqueCategories.map(function (category) {
 						return (
 							<div
+								key={category}
 								className={`col-auto tab-item ${selectedTab === category && "active"} plausible-event-name=${category.replace(
 									/\s+/g,
 									"-"