Initial

src/hooks/useFilteredNetworks.tsx

@@ -0,0 +1,29 @@
+import React from "react";
+
+import { Showcase } from "../utils/apiTypes";
+import { useSelectedTags } from "./useSelectedTags";
+
+const filterNetworks = (
+	showcaseNetworks: Showcase[],
+	selectedTags: string[],
+) => {
+	if (selectedTags.length === 0) {
+		return showcaseNetworks;
+	}
+	return showcaseNetworks.filter((showcaseNetwork) => {
+		if (showcaseNetwork.tags.length === 0) {
+			return false;
+		}
+		return selectedTags.every((queryTag) =>
+			showcaseNetwork.tags.find((searchTag) => searchTag.label === queryTag),
+		);
+	});
+};
+
+export const useFilteredNetworks = (networks: Showcase[]) => {
+	const selectedTags = useSelectedTags();
+	return React.useMemo(
+		() => filterNetworks(networks, selectedTags),
+		[selectedTags],
+	);
+};

src/hooks/useSelectedTags.tsx

@@ -0,0 +1,16 @@
+import React from "react";
+
+import { useLocation } from "@docusaurus/router";
+
+import { readSearchTags } from "../pages/showcase/_components/TagSelect";
+
+export const useSelectedTags = () => {
+	const location = useLocation();
+	const [selectedTags, setSelectedTags] = React.useState<string[]>([]);
+	React.useEffect(() => {
+		const tags = readSearchTags(location.search);
+		setSelectedTags(tags);
+	}, [location]);
+
+	return selectedTags;
+};