From 7f509dc2142381d0b4afeb6df04bd751baa24270 Mon Sep 17 00:00:00 2001 From: Jirachal Date: Mon, 12 Oct 2026 02:21:57 +0200 Subject: [PATCH] add routing and page structure (Closes #37) --- package-lock.json | 60 +++++++++++++++++++++++++- package.json | 7 +-- src/App.tsx | 80 +++-------------------------------- src/main.tsx | 5 ++- src/mock/albums.json | 6 +-- src/pages/AlbumDetailPage.tsx | 10 +++++ src/pages/CataloguePage.tsx | 80 +++++++++++++++++++++++++++++++++++ 7 files changed, 167 insertions(+), 81 deletions(-) create mode 100644 src/pages/AlbumDetailPage.tsx create mode 100644 src/pages/CataloguePage.tsx diff --git a/package-lock.json b/package-lock.json index 293d437..feb798e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -13,7 +13,8 @@ "graphql": "^17.0.2", "pg": "^8.23.1", "react": "^19.2.8", - "react-dom": "^19.2.8" + "react-dom": "^19.2.8", + "react-router-dom": "^7.18.4" }, "devDependencies": { "@eslint/js": "^10.0.1", @@ -1860,6 +1861,19 @@ "dev": true, "license": "MIT" }, + "node_modules/cookie": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/cookie/-/cookie-1.1.1.tgz", + "integrity": "sha512-ei8Aos7ja0weRpFzJnEA9UHJ/7XQmqglbRwnf2ATjcB9Wq874VKH9kfjjirM6UhU2/E5fFYadylyhFldcqSidQ==", + "license": "MIT", + "engines": { + "node": ">=18" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/express" + } + }, "node_modules/cross-spawn": { "version": "7.0.6", "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz", @@ -3173,6 +3187,44 @@ "react": "^19.3.0" } }, + "node_modules/react-router": { + "version": "7.18.4", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-7.18.4.tgz", + "integrity": "sha512-PUPQcMhMGRAslLcvtlPz/kmzBEWPhLdgLFrL7pLNepBL6dX0lWj4WD2cUYVgYCuT3jxvghYFg81cDTj44DhetQ==", + "license": "MIT", + "dependencies": { + "cookie": "^1.0.1", + "set-cookie-parser": "^2.6.0" + }, + "engines": { + "node": ">=20.0.0" + }, + "peerDependencies": { + "react": ">=18", + "react-dom": ">=18" + }, + "peerDependenciesMeta": { + "react-dom": { + "optional": true + } + } + }, + "node_modules/react-router-dom": { + "version": "7.18.4", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-7.18.4.tgz", + "integrity": "sha512-yrfmJHIpDG7taCpqKjT1G5B6q3O2K+RN8/fgNf0lTjCwiPbQ0ei6vXX9ZjQR+7ld8Tr7Z5xmyMnZ8YJrphWQUw==", + "license": "MIT", + "dependencies": { + "react-router": "7.18.4" + }, + "engines": { + "node": ">=20.0.0" + }, + "peerDependencies": { + "react": ">=18", + "react-dom": ">=18" + } + }, "node_modules/rolldown": { "version": "1.2.12", "resolved": "https://registry.npmjs.org/rolldown/-/rolldown-1.2.12.tgz", @@ -3233,6 +3285,12 @@ "semver": "bin/semver.js" } }, + "node_modules/set-cookie-parser": { + "version": "2.7.2", + "resolved": "https://registry.npmjs.org/set-cookie-parser/-/set-cookie-parser-2.7.2.tgz", + "integrity": "sha512-oeM1lpU/UvhTxw+g3cIfxXHyJRc/uidd3yK1P242gzHds0udQBYzs3y8j4gCCW+ZJ7ad0yctld8RYO+bdurlvw==", + "license": "MIT" + }, "node_modules/shebang-command": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz", diff --git a/package.json b/package.json index c8d4b3a..0d846ec 100644 --- a/package.json +++ b/package.json @@ -10,12 +10,13 @@ "preview": "vite preview" }, "dependencies": { - "dotenv": "^18.0.6", - "pg": "^8.23.1", "@apollo/client": "^4.3.2", + "dotenv": "^18.0.6", "graphql": "^17.0.2", + "pg": "^8.23.1", "react": "^19.2.8", - "react-dom": "^19.2.8" + "react-dom": "^19.2.8", + "react-router-dom": "^7.18.4" }, "devDependencies": { "@eslint/js": "^10.0.1", diff --git a/src/App.tsx b/src/App.tsx index c57c43e..c69cdfd 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,79 +1,13 @@ -import './App.css' -import albumData from './mock/albums.json' -import type { Album } from './types/album' +import { Routes, Route } from 'react-router-dom' +import CataloguePage from './pages/CataloguePage' +import AlbumDetailPage from './pages/AlbumDetailPage' function App() { - const albums: Album[] = albumData as Album[] - return ( -
-
- - - -
- - - - - - -
-

Rating

- - - - - -
-
-
- -
- {albums.map((album) => ( -
-
Image
- -

{album.title}

-

{album.artist}

-

{album.releaseYear}

-
- ))} -
-
+ + } /> + } /> + ) } diff --git a/src/main.tsx b/src/main.tsx index 6471d0f..ac6be66 100644 --- a/src/main.tsx +++ b/src/main.tsx @@ -1,6 +1,7 @@ import { StrictMode } from 'react' import { createRoot } from 'react-dom/client' import { ApolloProvider } from '@apollo/client/react' +import { BrowserRouter } from 'react-router-dom' import './index.css' import App from './App.tsx' import client from './lib/apollo' @@ -8,7 +9,9 @@ import client from './lib/apollo' createRoot(document.getElementById('root')!).render( - + + + , ) diff --git a/src/mock/albums.json b/src/mock/albums.json index c5e1ee6..84a41ce 100644 --- a/src/mock/albums.json +++ b/src/mock/albums.json @@ -4,7 +4,7 @@ "title": "In Rainbows", "artist": "Radiohead", "releaseYear": 2007, - "genre": "Rock", + "genre": ["Rock"], "coverUrl": "link", "audioUrl": "link", "isFavorite": false, @@ -19,7 +19,7 @@ "title": "Number Ones", "artist": "Michael Jackson", "releaseYear": 2002, - "genre": "Pop", + "genre": ["Pop"], "coverUrl": "link", "audioUrl": "link", "isFavorite": false, @@ -33,7 +33,7 @@ "title": "9 To 5 And Odd Jobs", "artist": "Dolly Parton", "releaseYear": 1980, - "genre": "Country", + "genre": ["Country"], "coverUrl": "link", "audioUrl": "link", "isFavorite": false, diff --git a/src/pages/AlbumDetailPage.tsx b/src/pages/AlbumDetailPage.tsx new file mode 100644 index 0000000..67d6dcd --- /dev/null +++ b/src/pages/AlbumDetailPage.tsx @@ -0,0 +1,10 @@ +import { useParams } from "react-router-dom" + +function AlbumDetailPage() { + const { id } = useParams() + return ( +

Album ID: {id}

+ ) +} + +export default AlbumDetailPage \ No newline at end of file diff --git a/src/pages/CataloguePage.tsx b/src/pages/CataloguePage.tsx new file mode 100644 index 0000000..00c1597 --- /dev/null +++ b/src/pages/CataloguePage.tsx @@ -0,0 +1,80 @@ +import '../App.css' +import albumData from '../mock/albums.json' +import type { Album } from '../types/album' + +function CataloguePage() { +const albums: Album[] = albumData as Album[] + + return ( +
+
+ + + +
+ + + + + + +
+

Rating

+ + + + + +
+
+
+ +
+ {albums.map((album) => ( +
+
Image
+ +

{album.title}

+

{album.artist}

+

{album.releaseYear}

+
+ ))} +
+
+ ) +} + +export default CataloguePage \ No newline at end of file