sidski/Cinemateket
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

🚧 working on pagination

Browse source 
Co-authored-by: haraldnilsen <harald_998@hotmail.com>
This commit is contained in:
Sindre Kjelsrud 2023-09-04 12:00:13 +02:00
parent e0733ddb75
commit 4aede77061
6 changed files with 51 additions and 23 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
index.html
View file

@ -1,4 +1,4 @@
<!doctype html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />

53
src/App.tsx
View file

@ -1,49 +1,62 @@
import { useEffect, useState } from 'react' import { useEffect, useState } from 'react'
import './App.css' import './App.css'
import q from 'qjuul' import q from 'qjuul'
import { PaginationButton } from './components'
function App() { function App() {
const API_MOVIE_KEY = 'd92949d8' const API_MOVIE_KEY = 'd92949d8'
const [movies, setMovies] = useState([]) const [movies, setMovies] = useState([])
const [loading, setLoading] = useState(true) const [loading, setLoading] = useState(true)
const [currentPage, setCurrentPage] = useState(1)
const [totalPages, setTotalPages] = useState(0)
useEffect(() => { useEffect(() => {
fetch(`http://www.omdbapi.com/?apikey=${API_MOVIE_KEY}&s=spider-man`) fetch(`http://www.omdbapi.com/?apikey=${API_MOVIE_KEY}&s=spider-man`)
.then((response) => response.json()) .then((response) => response.json())
.then((data) => { .then((data) => {
setMovies(data.Search) setMovies(data.Search)
setTotalPages(data.totalResults)
}) })
.then(() => setLoading(false)) .then(() => setLoading(false))
.catch((error) => console.log(error)) .catch((error) => console.log(error))
}, []) }, [])
const calculatePages = (totalResults: number): number => {
return Math.round(totalResults / 10)
}
return ( return (
<> <>
<q.div> <q.div>
<div> <q.div>
<h1>All movies</h1> <q.h1>All movies</q.h1>
</div> <q.h2>Pages</q.h2>
<q.p>{calculatePages(totalPages)}</q.p>
<q.div className="flex gap-4">
<PaginationButton pageNumber={currentPage} />
</q.div>
</q.div>
{!loading && movies ? ( {!loading && movies ? (
<div> <q.div>
<table> <q.table>
<tr> <q.tr>
<th>Poster</th> <q.th>Poster</q.th>
<th>Title</th> <q.th>Title</q.th>
<th>Year</th> <q.th>Year</q.th>
</tr> </q.tr>
{movies.map((movie: any) => ( {movies.map((movie: any) => (
<tr> <q.tr>
<td> <q.td>
<img src={movie.Poster} alt={movie.Title} width="100" /> <q.img src={movie.Poster} alt={movie.Title} width="100" />
</td> </q.td>
<td>{movie.Title}</td> <q.td>{movie.Title}</q.td>
<td>{movie.Year}</td> <q.td>{movie.Year}</q.td>
</tr> </q.tr>
))} ))}
</table> </q.table>
</div> </q.div>
) : ( ) : (
<h1>Loading...</h1> <q.h1>Loading...</q.h1>
)} )}
</q.div> </q.div>
</> </>

15
src/components/PaginationButton/index.tsx Normal file
View file

@ -0,0 +1,15 @@
import q from 'qjuul'
interface PaginationButtonProps {
pageNumber: number
}
const PaginationButton: React.FC<PaginationButtonProps> = ({ pageNumber }) => {
return (
<q.div className="">
<p>{pageNumber}</p>
</q.div>
)
}
export default PaginationButton

0
src/components/PaginationButton/styles.css Normal file
View file

1
src/components/index.ts Normal file
View file

@ -0,0 +1 @@
export { default as PaginationButton } from './PaginationButton'

3
src/main.tsx
View file

@ -1,10 +1,9 @@
import React from 'react' import React from 'react'
import ReactDOM from 'react-dom/client' import ReactDOM from 'react-dom/client'
import App from './App.tsx' import App from './App.tsx'
import './index.css'
ReactDOM.createRoot(document.getElementById('root')!).render( ReactDOM.createRoot(document.getElementById('root')!).render(
<React.StrictMode> <React.StrictMode>
<App /> <App />
</React.StrictMode>, </React.StrictMode>
) )