Merge branch 'main' into QueryParams
This commit is contained in:
SindreKjelsrud
commit
731a877c4f
36 changed files with 280 additions and 4 deletions
18
frontend/.eslintrc.cjs
Normal file
18
frontend/.eslintrc.cjs
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
module.exports = {
|
||||
root: true,
|
||||
env: { browser: true, es2020: true },
|
||||
extends: [
|
||||
'eslint:recommended',
|
||||
'plugin:@typescript-eslint/recommended',
|
||||
'plugin:react-hooks/recommended',
|
||||
],
|
||||
ignorePatterns: ['dist', '.eslintrc.cjs'],
|
||||
parser: '@typescript-eslint/parser',
|
||||
plugins: ['react-refresh'],
|
||||
rules: {
|
||||
'react-refresh/only-export-components': [
|
||||
'warn',
|
||||
{ allowConstantExport: true },
|
||||
],
|
||||
},
|
||||
}
|
||||
6
frontend/.prettierrc.json
Normal file
6
frontend/.prettierrc.json
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
{
|
||||
"trailingComma": "es5",
|
||||
"tabWidth": 2,
|
||||
"semi": false,
|
||||
"singleQuote": true
|
||||
}
|
||||
13
frontend/index.html
Normal file
13
frontend/index.html
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Vite + React + TS</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<script type="module" src="/src/main.tsx"></script>
|
||||
</body>
|
||||
</html>
|
||||
38
frontend/package.json
Normal file
38
frontend/package.json
Normal file
|
|
@ -0,0 +1,38 @@
|
|||
{
|
||||
"name": "wa-works-praksisoppgave",
|
||||
"private": true,
|
||||
"version": "0.0.0",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "tsc && vite build",
|
||||
"lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"@types/react-router-dom": "^5.3.3",
|
||||
"git-mob": "^2.4.0",
|
||||
"qjuul": "^1.0.7",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-modal": "^3.16.1",
|
||||
"react-router-dom": "^6.15.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/node": "^20.5.9",
|
||||
"@types/react": "^18.2.21",
|
||||
"@types/react-dom": "^18.2.7",
|
||||
"@types/react-modal": "^3.16.0",
|
||||
"@typescript-eslint/eslint-plugin": "^6.0.0",
|
||||
"@typescript-eslint/parser": "^6.0.0",
|
||||
"@vitejs/plugin-react": "^4.0.3",
|
||||
"autoprefixer": "^10.4.15",
|
||||
"eslint": "^8.45.0",
|
||||
"eslint-plugin-react-hooks": "^4.6.0",
|
||||
"eslint-plugin-react-refresh": "^0.4.3",
|
||||
"postcss": "^8.4.29",
|
||||
"tailwindcss": "^3.3.3",
|
||||
"typescript": "^5.0.2",
|
||||
"vite": "^4.4.5"
|
||||
}
|
||||
}
|
||||
6
frontend/postcss.config.js
Normal file
6
frontend/postcss.config.js
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
export default {
|
||||
plugins: {
|
||||
tailwindcss: {},
|
||||
autoprefixer: {},
|
||||
},
|
||||
}
|
||||
5
frontend/public/arrow-down-up-svgrepo-com.svg
Normal file
5
frontend/public/arrow-down-up-svgrepo-com.svg
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
|
||||
<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M5.70711 16.1359C5.31659 16.5264 5.31659 17.1596 5.70711 17.5501L10.5993 22.4375C11.3805 23.2179 12.6463 23.2176 13.4271 22.4369L18.3174 17.5465C18.708 17.156 18.708 16.5228 18.3174 16.1323C17.9269 15.7418 17.2937 15.7418 16.9032 16.1323L12.7176 20.3179C12.3271 20.7085 11.6939 20.7085 11.3034 20.3179L7.12132 16.1359C6.7308 15.7454 6.09763 15.7454 5.70711 16.1359Z" fill="#FFFFFF"/>
|
||||
<path d="M18.3174 7.88675C18.708 7.49623 18.708 6.86307 18.3174 6.47254L13.4252 1.58509C12.644 0.804698 11.3783 0.805008 10.5975 1.58579L5.70711 6.47615C5.31658 6.86667 5.31658 7.49984 5.70711 7.89036C6.09763 8.28089 6.7308 8.28089 7.12132 7.89036L11.307 3.70472C11.6975 3.31419 12.3307 3.31419 12.7212 3.70472L16.9032 7.88675C17.2937 8.27728 17.9269 8.27728 18.3174 7.88675Z" fill="#FFFFFF"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1,014 B |
1
frontend/public/vite.svg
Normal file
1
frontend/public/vite.svg
Normal file
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
|
||||
|
After Width: | Height: | Size: 1.5 KiB |
18
frontend/src/App.css
Normal file
18
frontend/src/App.css
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
:root {
|
||||
--bg: #27374d;
|
||||
--bg2: #1a2533;
|
||||
--text-1: #dde6ed;
|
||||
}
|
||||
|
||||
html {
|
||||
background-color: var(--bg);
|
||||
color: var(--text-1);
|
||||
}
|
||||
|
||||
.card {
|
||||
background-color: var(--bg2);
|
||||
}
|
||||
129
frontend/src/App.tsx
Normal file
129
frontend/src/App.tsx
Normal file
|
|
@ -0,0 +1,129 @@
|
|||
import { useEffect, useState } from 'react'
|
||||
import './App.css'
|
||||
import q from 'qjuul'
|
||||
import { MovieForm, Pagination, MovieTable, MovieModal } from './components'
|
||||
import type { movieObject } from './types/movie'
|
||||
import { fetchMovie } from './api/fetchMovie'
|
||||
import { useLocation } from 'react-router-dom'
|
||||
import { useNavigateToPage } from './util/navigate'
|
||||
|
||||
function App() {
|
||||
const [movies, setMovies] = useState<movieObject[]>([])
|
||||
const [loading, setLoading] = useState(true)
|
||||
const [currentPage, setCurrentPage] = useState(1)
|
||||
const [totalPages, setTotalPages] = useState(0)
|
||||
const [modalOpen, setModalOpen] = useState(false)
|
||||
const [modalMovie, setModalMovie] = useState<movieObject | null>(null)
|
||||
const navigateToPage = useNavigateToPage()
|
||||
const searchParams = new URLSearchParams(window.location.search)
|
||||
const [movieTitle, setMovieTitle] = useState(searchParams.get('title') || '')
|
||||
const [movieYear, setMovieYear] = useState(searchParams.get('year') || '')
|
||||
const [movieType, setMovieType] = useState(searchParams.get('type') || '')
|
||||
const [sortAscending, setSortAscending] = useState(true)
|
||||
const location = useLocation()
|
||||
|
||||
useEffect(() => {
|
||||
const handleFetchMovie = async () => {
|
||||
const response = await fetchMovie(title, page, type, year)
|
||||
console.log(year)
|
||||
if (response.Response == 'True') {
|
||||
setMovies(response.Search)
|
||||
setTotalPages(Number(response.totalResults))
|
||||
setCurrentPage(Number(page))
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
const searchParams = new URLSearchParams(location.search)
|
||||
const title = searchParams.get('title') || ''
|
||||
const page = searchParams.get('page') || ''
|
||||
const type = searchParams.get('type') || ''
|
||||
const year = searchParams.get('year') || ''
|
||||
|
||||
if (title) {
|
||||
handleFetchMovie()
|
||||
} else {
|
||||
setLoading(false)
|
||||
}
|
||||
}, [location.search])
|
||||
|
||||
const calculatePages = (totalResults: number): number => {
|
||||
return Math.round(totalResults / 10)
|
||||
}
|
||||
|
||||
const handlePageChange = (pageNumber: number) => {
|
||||
setCurrentPage(pageNumber)
|
||||
navigateToPage(movieTitle, movieType, movieYear, pageNumber.toString())
|
||||
}
|
||||
|
||||
const handleModalOpen = (movie: movieObject) => {
|
||||
setModalOpen(true)
|
||||
setModalMovie(movie)
|
||||
}
|
||||
|
||||
const sortHandler = (sortType: string) => {
|
||||
let sortedMovies: movieObject[] = []
|
||||
|
||||
if (sortType === 'title') {
|
||||
sortedMovies = [...movies].sort((m1, m2) =>
|
||||
sortAscending
|
||||
? m1.Title.localeCompare(m2.Title)
|
||||
: m2.Title.localeCompare(m1.Title)
|
||||
)
|
||||
}
|
||||
if (sortType === 'year') {
|
||||
sortedMovies = [...movies].sort((m1, m2) =>
|
||||
sortAscending
|
||||
? m1.Year.localeCompare(m2.Year)
|
||||
: m2.Year.localeCompare(m1.Year)
|
||||
)
|
||||
}
|
||||
|
||||
setSortAscending(!sortAscending)
|
||||
setMovies(sortedMovies)
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<q.div className="flex flex-col justify-center items-center mx-auto w-3/4 md:w-3/5 lg:w-2/4">
|
||||
<MovieModal {...{ setModalOpen, modalMovie, modalOpen }} />
|
||||
<q.div className="flex flex-col w-full items-center">
|
||||
<q.h1
|
||||
onClick={() => navigateToPage()}
|
||||
className="py-8 hover:cursor-pointer text-red-800 text-5xl font-bold"
|
||||
co="rgb(220 38 38)"
|
||||
>
|
||||
Cinemateket
|
||||
</q.h1>
|
||||
<MovieForm
|
||||
{...{
|
||||
movieTitle,
|
||||
movieType,
|
||||
movieYear,
|
||||
setMovieTitle,
|
||||
setMovieType,
|
||||
setMovieYear,
|
||||
}}
|
||||
/>
|
||||
<q.div className="flex pt-10">
|
||||
{!loading && movies.length > 0 && (
|
||||
<Pagination
|
||||
currentPage={currentPage}
|
||||
totalPages={calculatePages(totalPages)}
|
||||
handlePageChange={handlePageChange}
|
||||
/>
|
||||
)}
|
||||
</q.div>
|
||||
{loading ? (
|
||||
<q.h1>Loading...</q.h1>
|
||||
) : movies.length > 0 ? (
|
||||
<MovieTable {...{ handleModalOpen, sortHandler, movies }} />
|
||||
) : (
|
||||
<q.h2>Find a list of movies by searching above ☝️ </q.h2>
|
||||
)}
|
||||
</q.div>
|
||||
</q.div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default App
|
||||
25
frontend/src/api/fetchMovie.ts
Normal file
25
frontend/src/api/fetchMovie.ts
Normal file
|
|
@ -0,0 +1,25 @@
|
|||
import { movieResponse } from '../types/movie'
|
||||
|
||||
const API_MOVIE_KEY = import.meta.env.VITE_MOVIE_API_KEY
|
||||
|
||||
export const fetchMovie = async (
|
||||
title: string,
|
||||
page: string = '1',
|
||||
type?: string,
|
||||
year?: string
|
||||
): Promise<movieResponse> => {
|
||||
let query = `http://www.omdbapi.com/?apikey=${API_MOVIE_KEY}&s=${title}&page=${page}`
|
||||
|
||||
if (type) query += `&type=${type}`
|
||||
if (year) query += `&y=${year}`
|
||||
|
||||
const response = await fetch(query)
|
||||
.then((response) => response.json())
|
||||
.then((data) => {
|
||||
return data
|
||||
})
|
||||
.catch((error) => {
|
||||
console.log('Error:', error)
|
||||
})
|
||||
return response
|
||||
}
|
||||
1
frontend/src/assets/react.svg
Normal file
1
frontend/src/assets/react.svg
Normal file
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>
|
||||
|
After Width: | Height: | Size: 4 KiB |
75
frontend/src/components/MovieForm/index.tsx
Normal file
75
frontend/src/components/MovieForm/index.tsx
Normal file
|
|
@ -0,0 +1,75 @@
|
|||
import q from 'qjuul'
|
||||
import { useNavigateToPage } from '../../util/navigate'
|
||||
|
||||
interface MovieFormInterface {
|
||||
movieTitle: string
|
||||
movieType: string
|
||||
movieYear: string
|
||||
setMovieTitle: (title: string) => void
|
||||
setMovieType: (type: string) => void
|
||||
setMovieYear: (year: string) => void
|
||||
}
|
||||
|
||||
const MovieForm: React.FC<MovieFormInterface> = ({
|
||||
movieTitle,
|
||||
movieType,
|
||||
movieYear,
|
||||
setMovieTitle,
|
||||
setMovieType,
|
||||
setMovieYear,
|
||||
}) => {
|
||||
const navigateToPage = useNavigateToPage()
|
||||
|
||||
return (
|
||||
<q.form
|
||||
className="flex flex-col gap-3 card p-4 rounded-lg w-full lg:px-14"
|
||||
onSubmit={(e) => {
|
||||
e.preventDefault()
|
||||
navigateToPage(movieTitle, movieType, movieYear)
|
||||
}}
|
||||
>
|
||||
<q.label>Choose a movie title:</q.label>
|
||||
<q.input
|
||||
type="text"
|
||||
id="movieTitle"
|
||||
placeholder="Movie title"
|
||||
value={movieTitle.charAt(0).toUpperCase() + movieTitle.slice(1)}
|
||||
onChange={(e) => setMovieTitle(e.target.value)}
|
||||
className="border text-black border-gray-300 rounded-md p-2 focus:outline-none focus:ring-2 focus:ring-blue-600 focus:border-transparent"
|
||||
/>
|
||||
<q.label>Choose year movie was made: (OPTIONAL)</q.label>
|
||||
<q.select
|
||||
className="p-2 rounded-md border text-black border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-600 focus:border-transparent"
|
||||
onChange={(e) => setMovieYear(e.target.value)}
|
||||
value={movieYear}
|
||||
>
|
||||
{/* Option for year 1923-2023 */}
|
||||
<q.option value="">All years</q.option>
|
||||
{Array.from(Array(100), (e, i) => {
|
||||
const year = 2023 - i
|
||||
return (
|
||||
<q.option key={i} value={year}>
|
||||
{year}
|
||||
</q.option>
|
||||
)
|
||||
})}
|
||||
</q.select>
|
||||
<q.label>Choose type: (OPTIONAL)</q.label>
|
||||
<q.select
|
||||
className="p-2 rounded-md border text-black border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-600 focus:border-transparent"
|
||||
onChange={(e) => setMovieType(e.target.value)}
|
||||
value={movieType}
|
||||
>
|
||||
<q.option value="">All types</q.option>
|
||||
<q.option value="movie">Movies</q.option>
|
||||
<q.option value="series">Series</q.option>
|
||||
<q.option value="episode">Episodes</q.option>
|
||||
</q.select>
|
||||
<q.button className="bg-white p-3 my-2 rounded-md w-3/5 md:w-2/5 mx-auto text-red-900 font-semibold">
|
||||
Find movies
|
||||
</q.button>
|
||||
</q.form>
|
||||
)
|
||||
}
|
||||
|
||||
export default MovieForm
|
||||
45
frontend/src/components/MovieModal/index.tsx
Normal file
45
frontend/src/components/MovieModal/index.tsx
Normal file
|
|
@ -0,0 +1,45 @@
|
|||
import type { modalMovieType } from '../../types/movie'
|
||||
import q from 'qjuul'
|
||||
import Modal from 'react-modal'
|
||||
|
||||
interface MovieModalProps {
|
||||
setModalOpen: (status: boolean) => void
|
||||
modalMovie: modalMovieType
|
||||
modalOpen: boolean
|
||||
}
|
||||
|
||||
const MovieModal: React.FC<MovieModalProps> = ({
|
||||
setModalOpen,
|
||||
modalMovie,
|
||||
modalOpen,
|
||||
}) => {
|
||||
return (
|
||||
<Modal
|
||||
className="p-6 bg-black rounded-lg outline-none" // styles for the modal container
|
||||
overlayClassName="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center" // styles for the overlay
|
||||
isOpen={modalOpen}
|
||||
onRequestClose={() => setModalOpen(false)}
|
||||
>
|
||||
<q.div className="flex">
|
||||
<q.img
|
||||
className="h-44 max-w-sm mx-auto mb-4 rounded-md shadow"
|
||||
src={modalMovie?.Poster}
|
||||
alt={modalMovie?.Title}
|
||||
/>
|
||||
<q.div className="flex flex-col px-10 pt-5">
|
||||
<q.h1 className="text-xl font-bold mb-4">{modalMovie?.Title}</q.h1>
|
||||
<q.p>Year: {modalMovie?.Year}</q.p>
|
||||
<q.p>Type: {modalMovie?.Type}</q.p>
|
||||
<q.a
|
||||
className='"underline text-blue-500 hover:text-blue-700"'
|
||||
href={`https://www.imdb.com/title/${modalMovie?.imdbID}`}
|
||||
>
|
||||
{`https://www.imdb.com/title/${modalMovie?.imdbID}`}
|
||||
</q.a>
|
||||
</q.div>
|
||||
</q.div>
|
||||
</Modal>
|
||||
)
|
||||
}
|
||||
|
||||
export default MovieModal
|
||||
57
frontend/src/components/MovieTable/index.tsx
Normal file
57
frontend/src/components/MovieTable/index.tsx
Normal file
|
|
@ -0,0 +1,57 @@
|
|||
import type { movieObject } from '../../types/movie'
|
||||
import q from 'qjuul'
|
||||
import MovieTableRow from '../MovieTableRow'
|
||||
import arrow from '../../../public/arrow-down-up-svgrepo-com.svg'
|
||||
|
||||
interface MovieTableProps {
|
||||
handleModalOpen: (movie: movieObject) => void
|
||||
sortHandler: (sortType: string) => void
|
||||
movies: movieObject[]
|
||||
}
|
||||
|
||||
const MovieTable: React.FC<MovieTableProps> = ({
|
||||
handleModalOpen,
|
||||
sortHandler,
|
||||
movies,
|
||||
}) => {
|
||||
return (
|
||||
<q.div className="w-full">
|
||||
<q.table className="border-separate border-spacing-y-5 w-full">
|
||||
<q.thead className="">
|
||||
<q.tr>
|
||||
<q.th className="text-left"></q.th>
|
||||
<q.th
|
||||
className=" text-left hover:cursor-pointer"
|
||||
onClick={() => sortHandler('title')}
|
||||
>
|
||||
<q.div className="flex font-bold">
|
||||
Title
|
||||
<q.img src={arrow} className="w-3 ml-1 " />
|
||||
</q.div>
|
||||
</q.th>
|
||||
<q.th
|
||||
className="text-left hover:cursor-pointer"
|
||||
onClick={() => sortHandler('year')}
|
||||
>
|
||||
<q.div className="flex">
|
||||
Year
|
||||
<q.img src={arrow} className="w-3 ml-1" />
|
||||
</q.div>
|
||||
</q.th>
|
||||
</q.tr>
|
||||
</q.thead>
|
||||
<q.tbody>
|
||||
{movies.map((movie: movieObject) => (
|
||||
<MovieTableRow
|
||||
movie={movie}
|
||||
key={movie.imdbID}
|
||||
onClick={() => handleModalOpen(movie)}
|
||||
/>
|
||||
))}
|
||||
</q.tbody>
|
||||
</q.table>
|
||||
</q.div>
|
||||
)
|
||||
}
|
||||
|
||||
export default MovieTable
|
||||
27
frontend/src/components/MovieTableRow/index.tsx
Normal file
27
frontend/src/components/MovieTableRow/index.tsx
Normal file
|
|
@ -0,0 +1,27 @@
|
|||
import type { movieObject } from '../../types/movie'
|
||||
import Modal from 'react-modal'
|
||||
import q from 'qjuul'
|
||||
import { useState } from 'react'
|
||||
|
||||
interface MovieTableRowProps {
|
||||
movie: movieObject
|
||||
onClick: () => void
|
||||
}
|
||||
|
||||
const mainAppElement = document.getElementById('root')
|
||||
|
||||
Modal.setAppElement(mainAppElement as HTMLElement)
|
||||
|
||||
const MovieTableRow: React.FC<MovieTableRowProps> = ({ movie, onClick }) => {
|
||||
return (
|
||||
<q.tr onClick={onClick} className="card rounded-md hover:cursor-pointer">
|
||||
<q.td className="p-2">
|
||||
<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>
|
||||
)
|
||||
}
|
||||
|
||||
export default MovieTableRow
|
||||
85
frontend/src/components/Pagination/index.tsx
Normal file
85
frontend/src/components/Pagination/index.tsx
Normal file
|
|
@ -0,0 +1,85 @@
|
|||
import q from 'qjuul'
|
||||
import PaginationButton from '../PaginationButton'
|
||||
import { useEffect, useState } from 'react'
|
||||
|
||||
interface PaginationProps {
|
||||
currentPage: number
|
||||
totalPages: number
|
||||
handlePageChange: (pageNumber: number) => void
|
||||
}
|
||||
|
||||
const Pagination: React.FC<PaginationProps> = ({
|
||||
currentPage,
|
||||
totalPages,
|
||||
handlePageChange,
|
||||
}) => {
|
||||
const [showLeftDots, setShowLeftDots] = useState(false)
|
||||
const [showRightDots, setShowRightDots] = useState(false)
|
||||
const [showingNumbers, setShowingNumbers] = useState([0])
|
||||
|
||||
useEffect(() => {
|
||||
if (totalPages > 5) {
|
||||
setShowLeftDots(currentPage > 4 ? true : false)
|
||||
setShowRightDots(currentPage < totalPages - 3 ? true : false)
|
||||
}
|
||||
if (!showLeftDots && !showRightDots) {
|
||||
setShowingNumbers(Array.from(Array(totalPages).keys()).map((n) => n + 1))
|
||||
}
|
||||
if (!showLeftDots && showRightDots) {
|
||||
setShowingNumbers([1, 2, 3, 4, 5])
|
||||
}
|
||||
|
||||
if (showLeftDots && !showRightDots) {
|
||||
setShowingNumbers([
|
||||
totalPages - 4,
|
||||
totalPages - 3,
|
||||
totalPages - 2,
|
||||
totalPages - 1,
|
||||
totalPages,
|
||||
])
|
||||
}
|
||||
|
||||
if (showLeftDots && showRightDots) {
|
||||
setShowingNumbers([currentPage - 1, currentPage, currentPage + 1])
|
||||
}
|
||||
}, [totalPages, currentPage, showLeftDots, showRightDots])
|
||||
|
||||
return (
|
||||
<q.div>
|
||||
{totalPages > 0 && (
|
||||
<q.div className="flex gap-4">
|
||||
{showLeftDots && (
|
||||
<q.div className="flex">
|
||||
<PaginationButton
|
||||
pageNumber={1}
|
||||
handlePageChange={handlePageChange}
|
||||
/>
|
||||
...
|
||||
</q.div>
|
||||
)}
|
||||
|
||||
{showingNumbers.map((page) => (
|
||||
<q.div key={page}>
|
||||
<PaginationButton
|
||||
pageNumber={page}
|
||||
handlePageChange={handlePageChange}
|
||||
isCurrentPage={page === currentPage}
|
||||
/>
|
||||
</q.div>
|
||||
))}
|
||||
{showRightDots && (
|
||||
<q.div className="flex">
|
||||
...
|
||||
<PaginationButton
|
||||
pageNumber={totalPages}
|
||||
handlePageChange={handlePageChange}
|
||||
/>{' '}
|
||||
</q.div>
|
||||
)}
|
||||
</q.div>
|
||||
)}
|
||||
</q.div>
|
||||
)
|
||||
}
|
||||
|
||||
export default Pagination
|
||||
0
frontend/src/components/Pagination/styles.css
Normal file
0
frontend/src/components/Pagination/styles.css
Normal file
28
frontend/src/components/PaginationButton/index.tsx
Normal file
28
frontend/src/components/PaginationButton/index.tsx
Normal file
|
|
@ -0,0 +1,28 @@
|
|||
import q from 'qjuul'
|
||||
|
||||
interface PaginationButtonProps {
|
||||
pageNumber: number
|
||||
isCurrentPage?: boolean
|
||||
handlePageChange: (pageNumber: number) => void
|
||||
}
|
||||
|
||||
const PaginationButton: React.FC<PaginationButtonProps> = ({
|
||||
pageNumber,
|
||||
handlePageChange,
|
||||
isCurrentPage,
|
||||
}) => {
|
||||
return (
|
||||
<q.div
|
||||
onClick={() => handlePageChange(pageNumber)}
|
||||
className={
|
||||
isCurrentPage
|
||||
? 'bg-red-600 p-2 rounded-md hover:cursor-pointer'
|
||||
: 'bg-red-400 p-2 rounded-md hover:cursor-pointer'
|
||||
}
|
||||
>
|
||||
<p>{pageNumber}</p>
|
||||
</q.div>
|
||||
)
|
||||
}
|
||||
|
||||
export default PaginationButton
|
||||
0
frontend/src/components/PaginationButton/styles.css
Normal file
0
frontend/src/components/PaginationButton/styles.css
Normal file
5
frontend/src/components/index.ts
Normal file
5
frontend/src/components/index.ts
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
export { default as Pagination } from './Pagination'
|
||||
export { default as MovieTableRow } from './MovieTableRow'
|
||||
export { default as MovieForm } from './MovieForm'
|
||||
export { default as MovieTable } from './MovieTable'
|
||||
export { default as MovieModal } from './MovieModal'
|
||||
12
frontend/src/main.tsx
Normal file
12
frontend/src/main.tsx
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
import React from 'react'
|
||||
import ReactDOM from 'react-dom/client'
|
||||
import App from './App.tsx'
|
||||
import { BrowserRouter as Router } from 'react-router-dom'
|
||||
|
||||
ReactDOM.createRoot(document.getElementById('root')!).render(
|
||||
<React.StrictMode>
|
||||
<Router>
|
||||
<App />
|
||||
</Router>
|
||||
</React.StrictMode>
|
||||
)
|
||||
15
frontend/src/types/movie.ts
Normal file
15
frontend/src/types/movie.ts
Normal file
|
|
@ -0,0 +1,15 @@
|
|||
export type movieObject = {
|
||||
Poster: string
|
||||
Title: string
|
||||
Type: string
|
||||
Year: string
|
||||
imdbID: string
|
||||
}
|
||||
|
||||
export type modalMovieType = movieObject | null
|
||||
|
||||
export type movieResponse = {
|
||||
Response: string
|
||||
totalResults: string
|
||||
Search: movieObject[]
|
||||
}
|
||||
19
frontend/src/util/navigate.ts
Normal file
19
frontend/src/util/navigate.ts
Normal file
|
|
@ -0,0 +1,19 @@
|
|||
import { useNavigate } from 'react-router'
|
||||
|
||||
export const useNavigateToPage = () => {
|
||||
const navigate = useNavigate()
|
||||
|
||||
return (title?: string, type?: string, year?: string, page: string = '1') => {
|
||||
if (!title) {
|
||||
navigate('')
|
||||
window.location.reload()
|
||||
} else {
|
||||
let query = `?title=${title}&page=${page}`
|
||||
|
||||
if (type) query += `&type=${type}`
|
||||
if (year) query += `&year=${year}`
|
||||
|
||||
navigate(query)
|
||||
}
|
||||
}
|
||||
}
|
||||
10
frontend/src/vite-env.d.ts
vendored
Normal file
10
frontend/src/vite-env.d.ts
vendored
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
/// <reference types="vite/client" />
|
||||
|
||||
declare module '*.svg' {
|
||||
import React = require('react')
|
||||
export const ReactComponent: React.FunctionComponent<
|
||||
React.SVGProps<SVGSVGElement>
|
||||
>
|
||||
const src: string
|
||||
export default src
|
||||
}
|
||||
8
frontend/tailwind.config.js
Normal file
8
frontend/tailwind.config.js
Normal file
|
|
@ -0,0 +1,8 @@
|
|||
/** @type {import('tailwindcss').Config} */
|
||||
export default {
|
||||
content: ['./src/**/*.{html,js,ts,tsx}'],
|
||||
theme: {
|
||||
extend: {},
|
||||
},
|
||||
plugins: [],
|
||||
}
|
||||
25
frontend/tsconfig.json
Normal file
25
frontend/tsconfig.json
Normal file
|
|
@ -0,0 +1,25 @@
|
|||
{
|
||||
"compilerOptions": {
|
||||
"target": "ES2020",
|
||||
"useDefineForClassFields": true,
|
||||
"lib": ["ES2020", "DOM", "DOM.Iterable"],
|
||||
"module": "ESNext",
|
||||
"skipLibCheck": true,
|
||||
|
||||
/* Bundler mode */
|
||||
"moduleResolution": "bundler",
|
||||
"allowImportingTsExtensions": true,
|
||||
"resolveJsonModule": true,
|
||||
"isolatedModules": true,
|
||||
"noEmit": true,
|
||||
"jsx": "react-jsx",
|
||||
|
||||
/* Linting */
|
||||
"strict": true,
|
||||
"noUnusedLocals": true,
|
||||
"noUnusedParameters": true,
|
||||
"noFallthroughCasesInSwitch": true
|
||||
},
|
||||
"include": ["src", "src/vite-env.d.ts"],
|
||||
"references": [{ "path": "./tsconfig.node.json" }]
|
||||
}
|
||||
10
frontend/tsconfig.node.json
Normal file
10
frontend/tsconfig.node.json
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
{
|
||||
"compilerOptions": {
|
||||
"composite": true,
|
||||
"skipLibCheck": true,
|
||||
"module": "ESNext",
|
||||
"moduleResolution": "bundler",
|
||||
"allowSyntheticDefaultImports": true
|
||||
},
|
||||
"include": ["vite.config.ts"]
|
||||
}
|
||||
7
frontend/vite.config.ts
Normal file
7
frontend/vite.config.ts
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
import { defineConfig } from 'vite'
|
||||
import react from '@vitejs/plugin-react'
|
||||
|
||||
// https://vitejs.dev/config/
|
||||
export default defineConfig({
|
||||
plugins: [react()],
|
||||
})
|
||||
Reference in a new issue