updated build page tabs with url parameters to access tabs by url

celestiaorg · May 24, 2024 · e36a782 · e36a782
1 parent f6ee1dd
commit e36a782
Show file tree

Hide file tree

Showing 4 changed files with 47 additions and 24 deletions.
diff --git a/src/components/framework-tabs.js b/src/components/framework-tabs.js
@@ -1,13 +1,38 @@
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
+import { useLocation } from "@reach/router";
 import IconCard from "./modules/icon-card";
 import { AnchorLink } from "gatsby-plugin-anchor-links";
 
-const FrameworkTabs = ({ content, categories, anchorId, section }) => {
-	const [selectedTab, setSelectedTab] = useState("All");
+const FrameworkTabs = ({ content, categories, anchorId, section, type }) => {
+	const location = useLocation();
+	const urlParams = new URLSearchParams(location.search);
+	const initialFrameworkCategory = urlParams.get("framework_category") || "All";
+	const initialRollupCategory = urlParams.get("rollup_category") || "All";
+	const [selectedFrameworkTab, setSelectedFrameworkTab] = useState(initialFrameworkCategory);
+	const [selectedRollupTab, setSelectedRollupTab] = useState(initialRollupCategory);
 
 	const allUniqueCategories = [...new Set(categories.items.flatMap((item) => item.category))];
 
-	console.log(allUniqueCategories);
+	useEffect(() => {
+		if (type === "framework" && initialFrameworkCategory !== selectedFrameworkTab) {
+			setSelectedFrameworkTab(initialFrameworkCategory);
+		}
+		if (type === "rollup" && initialRollupCategory !== selectedRollupTab) {
+			setSelectedRollupTab(initialRollupCategory);
+		}
+	}, [initialFrameworkCategory, initialRollupCategory, type]);
+
+	const handleTabClick = (category, tabType) => {
+		if (tabType === "framework") {
+			setSelectedFrameworkTab(category);
+		} else if (tabType === "rollup") {
+			setSelectedRollupTab(category);
+		}
+		const newUrl = `${location.pathname.replace(/\/$/, "")}?framework_category=${
+			tabType === "framework" ? category : selectedFrameworkTab
+		}&rollup_category=${tabType === "rollup" ? category : selectedRollupTab}`;
+		window.history.pushState({}, "", newUrl);
+	};
 
 	return (
 		<section className='frameworks' id={`${content.items[anchorId].title.replace(/\s+/g, "-").toLowerCase()}`}>
@@ -17,25 +42,23 @@ const FrameworkTabs = ({ content, categories, anchorId, section }) => {
 				{categories.description && <div className={"description text-center mx-auto mt-3"}>{categories.description}</div>}
 
 				<div className={"tabs row justify-content-center"}>
-					{allUniqueCategories.map(function (category) {
-						return (
-							<div
-								className={`col-auto tab-item ${selectedTab === category && "active"} plausible-event-name=${category.replace(
-									/\s+/g,
-									"-"
-								)}_Tab_Click--Developer_Portal-${section}_section`}
-								onClick={() => setSelectedTab(category)}
-							>
-								{category}
-							</div>
-						);
-					})}
+					{allUniqueCategories.map((category) => (
+						<div
+							key={category}
+							className={`col-auto tab-item ${type === "framework" && selectedFrameworkTab === category ? "active" : ""} ${
+								type === "rollup" && selectedRollupTab === category ? "active" : ""
+							} plausible-event-name=${category.replace(/\s+/g, "-")}_Tab_Click--Developer_Portal-${section}_section`}
+							onClick={() => handleTabClick(category, type)}
+						>
+							{category}
+						</div>
+					))}
 				</div>
 
 				<div className={""}>
 					<div className={"row row-cols-1 row-cols-md-2 row-cols-lg-3 gx-3 gy-5 gy-md-3 my-2 pt-0 pt-md-4 pb-3"}>
 						{categories.items
-							.filter((item) => item.category.includes(selectedTab))
+							.filter((item) => item.category.includes(type === "framework" ? selectedFrameworkTab : selectedRollupTab))
 							.map((item) => (
 								<IconCard
 									className='icon-card-wrapper col'

diff --git a/src/datas/celestia-underneath/hero-data.js b/src/datas/celestia-underneath/hero-data.js
@@ -18,7 +18,7 @@ export const heroData = {
 				class: "external",
 				type: "external",
 				text: "Simply deploy",
-				url: "#",
+				url: "/build#build",
 			},
 		},
 		{
@@ -28,7 +28,7 @@ export const heroData = {
 				class: "external",
 				type: "external",
 				text: "Build whatever",
-				url: "#",
+				url: "/build/?framework_category=Sovereign#build",
 			},
 		},
 	],

diff --git a/src/pages/build.js b/src/pages/build.js
@@ -52,9 +52,9 @@ const Build = () => {
 						</div>
 					</section>
 
-					<FrameworkTabs content={getStarted} categories={frameworks} anchorId={0} section={"Framework"} />
+					<FrameworkTabs content={getStarted} categories={frameworks} anchorId={0} section={"Framework"} type={"framework"} />
 
-					<section className='discover pt-5'>
+					<section className='discover pt-5' id='discover'>
 						<div className={"container"}>
 							<h2 className={"text-center"}>{discover.title}</h2>
 							{discover.description && <div className={"description"}>{discover.description}</div>}
@@ -79,7 +79,7 @@ const Build = () => {
 
 					<IntegrateSection content={getStarted} anchorId={1} />
 
-					<FrameworkTabs content={getStarted} categories={rollups} anchorId={2} section={"Rollups"} />
+					<FrameworkTabs content={getStarted} categories={rollups} anchorId={2} section={"Rollups"} type={"rollup"} />
 
 					<ContactSection />
 				</main>

diff --git a/src/pages/celestia-underneath.js b/src/pages/celestia-underneath.js
@@ -196,7 +196,7 @@ const CelestiaUnderneath = () => {
 															class={heroData.cards[1].button.class}
 															type={heroData.cards[1].button.type}
 															text={heroData.cards[1].button.text}
-															url={heroData.cards[0].button.url}
+															url={heroData.cards[1].button.url}
 														/>
 													</div>
 												</div>