From a6bbbf59f268949c386054d7e973593d3aacfb52 Mon Sep 17 00:00:00 2001 From: Kristian Gjertsen Date: Mon, 9 Nov 2026 18:17:36 +0100 Subject: [PATCH 01/12] Renamed file NavBar to Header --- frontend/src/components/Header.tsx | 142 +++++++++++++++++++++++++++++ 1 file changed, 142 insertions(+) create mode 100644 frontend/src/components/Header.tsx diff --git a/frontend/src/components/Header.tsx b/frontend/src/components/Header.tsx new file mode 100644 index 0000000..012edd1 --- /dev/null +++ b/frontend/src/components/Header.tsx @@ -0,0 +1,142 @@ +import { useState } from "react"; +import { useBuild } from "@/context/BuildContext"; + +type NavBarProps = { + search?: string; + setSearch?: (value: string) => void; +}; + +export default function NavBar({ + search: externalSearch, + setSearch: setExternalSearch, +}: NavBarProps) { + const [localSearch, setLocalSearch] = useState( + () => new URLSearchParams(window.location.search).get("search") ?? "", + ); + const search = externalSearch ?? localSearch; + const setSearch = setExternalSearch ?? setLocalSearch; + const { parts } = useBuild(); + const selectedCount = Object.values(parts).length; + + const params = new URLSearchParams(window.location.search); + const currentPage = params.get("page") ?? "home"; + + return ( + + ); +} From 5535290d82295b14181cfcd7eb39acdb62b56751 Mon Sep 17 00:00:00 2001 From: Kristian Gjertsen Date: Mon, 9 Nov 2026 18:23:55 +0100 Subject: [PATCH 02/12] Implemented react-router for navigation instead og query- parametre --- frontend/package-lock.json | 45 +++++++- frontend/package.json | 1 + frontend/src/App.tsx | 38 +++---- frontend/src/components/Header.tsx | 164 ++++++++++------------------- frontend/src/components/NavBar.tsx | 142 ------------------------- frontend/src/main.tsx | 11 +- 6 files changed, 126 insertions(+), 275 deletions(-) delete mode 100644 frontend/src/components/NavBar.tsx diff --git a/frontend/package-lock.json b/frontend/package-lock.json index b260a60..981b214 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -12,6 +12,7 @@ "lucide-react": "^1.64.0", "react": "^19.2.8", "react-dom": "^19.2.8", + "react-router": "^8.5.1", "tailwind-merge": "^3.7.0", "tailwindcss": "^4.3.3" }, @@ -935,6 +936,12 @@ "url": "https://github.com/sponsors/oxc-project" } }, + "node_modules/@remix-run/route-pattern": { + "version": "0.22.1", + "resolved": "https://registry.npmjs.org/@remix-run/route-pattern/-/route-pattern-0.22.1.tgz", + "integrity": "sha512-czdGJWh09Lapvcqt7Vb09KlrU2PhRJ8xQaI+AItTuD9aDJ5MAgxnS38lnys6Ll+6RJEqPiaUqTwIQhVLwFvv+w==", + "license": "MIT" + }, "node_modules/@rolldown/binding-android-arm-eabi": { "version": "1.2.15", "resolved": "https://registry.npmjs.org/@rolldown/binding-android-arm-eabi/-/binding-android-arm-eabi-1.2.15.tgz", @@ -1892,7 +1899,7 @@ "version": "19.3.0", "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-19.3.0.tgz", "integrity": "sha512-ZI7bU42mZXXKHn/qNLEw2IrbiINU7X5+vfgdixBHkCNpYWXjKgfQ/P+uyGb5CjOLB9UcnTeg3rylQtV2hym44Q==", - "dev": true, + "devOptional": true, "license": "MIT", "peerDependencies": { "@types/react": "^19.3.0" @@ -2503,6 +2510,12 @@ "url": "https://opencollective.com/express" } }, + "node_modules/cookie-es": { + "version": "3.1.1", + "resolved": "https://registry.npmjs.org/cookie-es/-/cookie-es-3.1.1.tgz", + "integrity": "sha512-UaXxwISYJPTr9hwQxMFYZ7kNhSXboMXP+Z3TRX6f1/NyaGPfuNUZOWP1pUEb75B2HjfklIYLVRfWiFZJyC6Npg==", + "license": "MIT" + }, "node_modules/cross-spawn": { "version": "7.0.6", "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz", @@ -4025,6 +4038,36 @@ "license": "MIT", "peer": true }, + "node_modules/react-router": { + "version": "8.5.1", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-8.5.1.tgz", + "integrity": "sha512-5u1eQ46QjuXjNfEnLwzrnou1Bm5dquO3xjVYkkMYCudtkicD2AQHtx+fvXzPATtPJx8TW6DR1x1TDRqsfHyZBw==", + "license": "MIT", + "dependencies": { + "@remix-run/route-pattern": "^0.22.1", + "cookie-es": "^3.1.1" + }, + "engines": { + "node": ">=22.22.0" + }, + "peerDependencies": { + "@types/react": ">=19.2.0", + "@types/react-dom": ">=19.2.0", + "react": ">=19.2.7", + "react-dom": ">=19.2.7" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "@types/react-dom": { + "optional": true + }, + "react-dom": { + "optional": true + } + } + }, "node_modules/redent": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/redent/-/redent-3.0.0.tgz", diff --git a/frontend/package.json b/frontend/package.json index ac94c40..2bca6c4 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -15,6 +15,7 @@ "lucide-react": "^1.64.0", "react": "^19.2.8", "react-dom": "^19.2.8", + "react-router": "^8.5.1", "tailwind-merge": "^3.7.0", "tailwindcss": "^4.3.3" }, diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index 3e0db5d..e76f513 100644 --- a/frontend/src/App.tsx +++ b/frontend/src/App.tsx @@ -1,38 +1,34 @@ +import { useState } from "react"; import "./App.css"; import HomePage from "./pages/homePage/homePage"; import CategoryPage from "./pages/categoryPage/categoryPage"; import PcBuilderPage from "./pages/pcBuilderPage/pcBuilderPage"; import CommunityPage from "./pages/communityPage/communityPage"; -import NavBar from "./components/NavBar"; +import NavBar from "./components/Header"; import Footer from "./components/Footer"; import BackToTopButton from "./components/BackToTopButton"; +import { Routes, Route } from "react-router"; function App() { - const params = new URLSearchParams(window.location.search); - const page = params.get("page"); - const category = params.get("category"); - const search = (params.get("search") ?? "").trim(); - - let content = ; - - if (page === "builder") { - content = ; - } else if (page === "community") { - content = ; - } else if (category !== null) { - content = ; - } else if (page === "explore") { - content = ; - } + const [search, setSearch] = useState(""); return (
- +
- -
{content}
- +
+ + } /> + } + /> + } /> + } /> + 404 - Page not found

} /> + +
diff --git a/frontend/src/components/Header.tsx b/frontend/src/components/Header.tsx index 012edd1..15c7256 100644 --- a/frontend/src/components/Header.tsx +++ b/frontend/src/components/Header.tsx @@ -1,141 +1,89 @@ import { useState } from "react"; +import { Link, NavLink, useNavigate } from "react-router"; +import { Search, Computer } from "lucide-react"; import { useBuild } from "@/context/BuildContext"; +const navigation = [ + { to: "/", label: "Home" }, + { to: "/explore", label: "Explore components" }, + { to: "/builder", label: "PC Builder" }, + { to: "/community", label: "Community Page" }, +]; + type NavBarProps = { - search?: string; - setSearch?: (value: string) => void; + onSearch: (value: string) => void; }; -export default function NavBar({ - search: externalSearch, - setSearch: setExternalSearch, -}: NavBarProps) { - const [localSearch, setLocalSearch] = useState( - () => new URLSearchParams(window.location.search).get("search") ?? "", - ); - const search = externalSearch ?? localSearch; - const setSearch = setExternalSearch ?? setLocalSearch; +export default function NavBar({ onSearch }: NavBarProps) { + const [search, setSearch] = useState(""); + const navigate = useNavigate(); const { parts } = useBuild(); const selectedCount = Object.values(parts).length; - const params = new URLSearchParams(window.location.search); - const currentPage = params.get("page") ?? "home"; - return ( -