Skip to content

add routing and page structure #39

Merged
merged 1 commit into from
Oct 12, 2026
+167 −81
Merged

add routing and page structure #39

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
60 changes: 59 additions & 1 deletion package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

7 changes: 4 additions & 3 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
80 changes: 7 additions & 73 deletions src/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 (
<main>
<section className="filter-box">
<label htmlFor="search"></label>
<input
id="search"
type="text"
placeholder="Search..."
/>

<div className="filters">
<label htmlFor="genre">Genre</label>
<select id="genre">
<option>All genres</option>
<option>Rock</option>
<option>Jazz</option>
<option>Pop</option>
<option>Country</option>
<option>HipHop</option>
<option>Tekno</option>
<option>Indie</option>
<option>RnB</option>
<option>Soul</option>
<option>Kpop</option>
<option>Funk</option>
<option>Blues</option>
<option>Classic</option>
<option>Metal</option>
</select>

<label htmlFor="year">Year</label>
<select id="year">
<option>All years</option>
<option>1920s</option>
<option>1930s</option>
<option>1940s</option>
<option>1950s</option>
<option>1960s</option>
<option>1970s</option>
<option>1980s</option>
<option>1990s</option>
<option>2000s</option>
<option>2010s</option>
<option>2020s</option>
</select>

<div className="rating">
<h3>Rating</h3>
<button type="button">1</button>
<button type="button">2</button>
<button type="button">3</button>
<button type="button">4</button>
<button type="button">5</button>
</div>
</div>
</section>

<section className="album-displayer">
{albums.map((album) => (
<div className="album-card" key={album.id}>
<div className="album-image">Image</div>

<h3>{album.title}</h3>
<p>{album.artist}</p>
<p>{album.releaseYear}</p>
</div>
))}
</section>
</main>
<Routes>
<Route path="/" element={<CataloguePage />} />
<Route path="/album/:id" element={<AlbumDetailPage />} />
</Routes>
)
}

Expand Down
5 changes: 4 additions & 1 deletion src/main.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,17 @@
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'

createRoot(document.getElementById('root')!).render(
<StrictMode>
<ApolloProvider client={client}>
<App />
<BrowserRouter>
<App />
</BrowserRouter>
</ApolloProvider>
</StrictMode>,
)
6 changes: 3 additions & 3 deletions src/mock/albums.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
"title": "In Rainbows",
"artist": "Radiohead",
"releaseYear": 2007,
"genre": "Rock",
"genre": ["Rock"],
"coverUrl": "link",
"audioUrl": "link",
"isFavorite": false,
Expand All @@ -19,7 +19,7 @@
"title": "Number Ones",
"artist": "Michael Jackson",
"releaseYear": 2002,
"genre": "Pop",
"genre": ["Pop"],
"coverUrl": "link",
"audioUrl": "link",
"isFavorite": false,
Expand All @@ -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,
Expand Down
10 changes: 10 additions & 0 deletions src/pages/AlbumDetailPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
import { useParams } from "react-router-dom"

function AlbumDetailPage() {
const { id } = useParams()
return (
<h1>Album ID: {id}</h1>
)
}

export default AlbumDetailPage
80 changes: 80 additions & 0 deletions src/pages/CataloguePage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 (
<main>
<section className="filter-box">
<label htmlFor="search"></label>
<input
id="search"
type="text"
placeholder="Search..."
/>

<div className="filters">
<label htmlFor="genre">Genre</label>
<select id="genre">
<option>All genres</option>
<option>Rock</option>
<option>Jazz</option>
<option>Pop</option>
<option>Country</option>
<option>HipHop</option>
<option>Tekno</option>
<option>Indie</option>
<option>RnB</option>
<option>Soul</option>
<option>Kpop</option>
<option>Funk</option>
<option>Blues</option>
<option>Classic</option>
<option>Metal</option>
</select>

<label htmlFor="year">Year</label>
<select id="year">
<option>All years</option>
<option>1920s</option>
<option>1930s</option>
<option>1940s</option>
<option>1950s</option>
<option>1960s</option>
<option>1970s</option>
<option>1980s</option>
<option>1990s</option>
<option>2000s</option>
<option>2010s</option>
<option>2020s</option>
</select>

<div className="rating">
<h3>Rating</h3>
<button type="button">1</button>
<button type="button">2</button>
<button type="button">3</button>
<button type="button">4</button>
<button type="button">5</button>
</div>
</div>
</section>

<section className="album-displayer">
{albums.map((album) => (
<div className="album-card" key={album.id}>
<div className="album-image">Image</div>

<h3>{album.title}</h3>
<p>{album.artist}</p>
<p>{album.releaseYear}</p>
</div>
))}
</section>
</main>
)
}

export default CataloguePage