diff --git a/src/app/projects/page.js b/src/app/projects/page.js index 8d4aeb7..e0fd3a3 100644 --- a/src/app/projects/page.js +++ b/src/app/projects/page.js @@ -1,7 +1,7 @@ 'use client'; import { Grid, Column, Search, FilterableMultiSelect, Row } from "@carbon/react"; -import React, { useState, useEffect } from "react"; +import React, { useState } from "react"; import ProjectsTiles from "./ProjectsTiles"; import data from "../../../repoData.json"; @@ -17,8 +17,13 @@ repoData.forEach((node) => { }); const topicsArray = Array.from(topics); +// Parse URL parameters outside the component +const urlParams = new URLSearchParams(window.location.search); +const topic = urlParams.get('topic'); +const initialSelectedTopics = topic ? [topic] : []; + function ProjectsPage() { - const [selectedTopics, setSelectedTopics] = useState([]); + const [selectedTopics, setSelectedTopics] = useState(initialSelectedTopics); // Define the renderProjects function let renderProjects = () => { @@ -34,17 +39,13 @@ function ProjectsPage() { }; //this function calls renderProjects initially to reflect initial selection - useEffect(() => { - if (typeof window !== "undefined") { - const urlParams = new URLSearchParams(window.location.search); - const topic = urlParams.get('topic'); - if (topic) { - setSelectedTopics([topic]); - filterProjectsByTag(topic); - } + React.useEffect(() => { + if (topic) { + filterProjectsByTopic(topic); } }, []); + let searchProjects = (e) => { const inputText = e.target.value.toLowerCase(); repoData.forEach((node) => { @@ -86,8 +87,8 @@ function ProjectsPage() { renderProjects(); }; - // Define the filterProjectsByTag function - let filterProjectsByTag = (topic) => { + // Define the filterProjectsByTopic function + let filterProjectsByTopic = (topic) => { repoData.forEach((node) => { var nodeTopics = node.repositoryTopics.nodes.map((topic) => topic.topic.name); var inRepo = nodeTopics.includes(topic);