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">
<head>
<meta charset="UTF-8" />

53
src/App.tsx
View file

@ -1,49 +1,62 @@
import { useEffect, useState } from 'react'
import './App.css'
import q from 'qjuul'
import { PaginationButton } from './components'
function App() {
const API_MOVIE_KEY = 'd92949d8'
const [movies, setMovies] = useState([])
const [loading, setLoading] = useState(true)
const [currentPage, setCurrentPage] = useState(1)
const [totalPages, setTotalPages] = useState(0)
useEffect(() => {
fetch(`http://www.omdbapi.com/?apikey=${API_MOVIE_KEY}&s=spider-man`)
.then((response) => response.json())
.then((data) => {
setMovies(data.Search)
setTotalPages(data.totalResults)
})
.then(() => setLoading(false))
.catch((error) => console.log(error))
}, [])
const calculatePages = (totalResults: number): number => {
return Math.round(totalResults / 10)
}
return (
<>
<q.div>
<div>
<h1>All movies</h1>
</div>
<q.div>
<q.h1>All movies</q.h1>
<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 ? (
<div>
<table>
<tr>
<th>Poster</th>
<th>Title</th>
<th>Year</th>
</tr>
<q.div>
<q.table>
<q.tr>
<q.th>Poster</q.th>
<q.th>Title</q.th>
<q.th>Year</q.th>
</q.tr>
{movies.map((movie: any) => (
<tr>
<td>
<img src={movie.Poster} alt={movie.Title} width="100" />
</td>
<td>{movie.Title}</td>
<td>{movie.Year}</td>
</tr>
<q.tr>
<q.td>
<q.img src={movie.Poster} alt={movie.Title} width="100" />
</q.td>
<q.td>{movie.Title}</q.td>
<q.td>{movie.Year}</q.td>
</q.tr>
))}
</table>
</div>
</q.table>
</q.div>
) : (
<h1>Loading...</h1>
<q.h1>Loading...</q.h1>
)}
</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 ReactDOM from 'react-dom/client'
import App from './App.tsx'
import './index.css'
ReactDOM.createRoot(document.getElementById('root')!).render(
<React.StrictMode>
<App />
</React.StrictMode>,
</React.StrictMode>
)