From 8648d58771dc02b9af32c7d9eb95b2103d58d40e Mon Sep 17 00:00:00 2001 From: haraldnilsen Date: Mon, 11 Sep 2023 09:48:05 +0200 Subject: [PATCH 1/4] :construction: working on working query params Co-authored-by: Sindre Kjelsrud --- package.json | 4 +++- src/App.tsx | 30 ++++++++++++++++++++++++------ src/main.tsx | 5 ++++- 3 files changed, 31 insertions(+), 8 deletions(-) diff --git a/package.json b/package.json index 81f4f79..9915f96 100644 --- a/package.json +++ b/package.json @@ -10,11 +10,13 @@ "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-modal": "^3.16.1", + "react-router-dom": "^6.15.0" }, "devDependencies": { "@types/node": "^20.5.9", diff --git a/src/App.tsx b/src/App.tsx index 65aa179..aa99692 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -3,6 +3,7 @@ import './App.css' import q from 'qjuul' import { MovieForm, Pagination, MovieTable, MovieModal } from './components' import type { movieObject } from './types/movie' +import { useLocation, useNavigate } from 'react-router-dom' function App() { const API_MOVIE_KEY = 'd92949d8' @@ -17,11 +18,18 @@ function App() { const [movieTitle, setMovieTitle] = useState('') const [sortAscending, setSortAscending] = useState(true) - console.log('App mounted') + const navigate = useNavigate() + const location = useLocation() + const searchParams = new URLSearchParams(location.search) + const title = searchParams.get('title') || '' + const type = searchParams.get('type') || '' + const year = searchParams.get('y') || '' + + // testing testing useEffect(() => { fetch( - `http://www.omdbapi.com/?apikey=${API_MOVIE_KEY}&s=${movieTitle}&page=${currentPage}` + `http://www.omdbapi.com/?apikey=${API_MOVIE_KEY}&s=${title}&type=${type}&y=${year}&page=${currentPage}` ) .then((response) => response.json()) .then((data) => { @@ -31,7 +39,7 @@ function App() { }) .then(() => setLoading(false)) .catch((error) => console.log(error)) - }, [currentPage]) + }, [title, type, year]) const calculatePages = (totalResults: number): number => { return Math.round(totalResults / 10) @@ -39,6 +47,7 @@ function App() { const handlePageChange = (pageNumber: number) => { setCurrentPage(pageNumber) + handleMovieSubmit() } const handleModalOpen = (movie: movieObject) => { @@ -46,10 +55,19 @@ function App() { setModalMovie(movie) } - const handleMovieSubmit = (event: any) => { - event.preventDefault() + const handleMovieSubmit = (event?: any) => { + if (event) event.preventDefault() + navigate( + movieYear && movieType + ? `?title=${movieTitle}&type=${movieType}&y=${movieYear}&page=${currentPage}` + : movieYear + ? `?title=${movieTitle}&y=${movieYear}&page=${currentPage}` + : movieYear && movieType + ? `?title=${movieTitle}&type=${movieType}&page=${currentPage}` + : `?title=${movieTitle}&page=${currentPage}` + ) fetch( - `http://www.omdbapi.com/?apikey=${API_MOVIE_KEY}&s=${movieTitle}&type=${movieType}&y=${movieYear}` + `http://www.omdbapi.com/?apikey=${API_MOVIE_KEY}&s=${title}&type=${type}&y=${year}&page=${currentPage}` ) .then((response) => response.json()) .then((data) => { diff --git a/src/main.tsx b/src/main.tsx index ed31931..fb67342 100644 --- a/src/main.tsx +++ b/src/main.tsx @@ -1,9 +1,12 @@ import React from 'react' import ReactDOM from 'react-dom/client' import App from './App.tsx' +import { BrowserRouter, BrowserRouter as Router } from 'react-router-dom' ReactDOM.createRoot(document.getElementById('root')!).render( - + + + ) From a87cfe4d7bf73efb7bc54c10ddb00262bd0786fd Mon Sep 17 00:00:00 2001 From: Sindre Kjelsrud Date: Mon, 11 Sep 2023 11:48:27 +0200 Subject: [PATCH 2/4] :construction: still WIP on query params Co-authored-by: haraldnilsen --- src/App.tsx | 68 +++++++++++++++++------------- src/components/MovieForm/index.tsx | 7 +-- 2 files changed, 42 insertions(+), 33 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index aa99692..177ebf5 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -24,22 +24,53 @@ function App() { const title = searchParams.get('title') || '' const type = searchParams.get('type') || '' const year = searchParams.get('y') || '' - - // testing testing + const page = searchParams.get('page') || '' useEffect(() => { + handleMovieSubmit() + }, [currentPage, title, type, year]) + + const handleMovieSubmit = ({ + event, + pageNumber, + }: { + event?: any + pageNumber?: number + } = {}) => { + if (event) event.preventDefault() + + let pageNum: number + if (pageNumber) { + pageNum = pageNumber + } else { + pageNum = Number(page) + } + + if (!movieTitle && !movieType && !movieYear) { + setLoading(false) + } + + // navigate( + // movieYear && movieType + // ? `?title=${movieTitle}&type=${movieType}&y=${movieYear}&page=${currentPage}` + // : movieYear + // ? `?title=${movieTitle}&y=${movieYear}&page=${currentPage}` + // : movieYear && movieType + // ? `?title=${movieTitle}&type=${movieType}&page=${currentPage}` + // : `?title=${movieTitle}&page=${currentPage}` + // ) + fetch( - `http://www.omdbapi.com/?apikey=${API_MOVIE_KEY}&s=${title}&type=${type}&y=${year}&page=${currentPage}` + `http://www.omdbapi.com/?apikey=${API_MOVIE_KEY}&s=${title}&type=${type}&y=${year}&page=${pageNum}` ) .then((response) => response.json()) .then((data) => { setMovies(data.Search) - console.log(data) setTotalPages(data.totalResults) }) .then(() => setLoading(false)) .catch((error) => console.log(error)) - }, [title, type, year]) + } const calculatePages = (totalResults: number): number => { return Math.round(totalResults / 10) @@ -47,7 +78,7 @@ function App() { const handlePageChange = (pageNumber: number) => { setCurrentPage(pageNumber) - handleMovieSubmit() + handleMovieSubmit({ pageNumber }) } const handleModalOpen = (movie: movieObject) => { @@ -55,30 +86,6 @@ function App() { setModalMovie(movie) } - const handleMovieSubmit = (event?: any) => { - if (event) event.preventDefault() - navigate( - movieYear && movieType - ? `?title=${movieTitle}&type=${movieType}&y=${movieYear}&page=${currentPage}` - : movieYear - ? `?title=${movieTitle}&y=${movieYear}&page=${currentPage}` - : movieYear && movieType - ? `?title=${movieTitle}&type=${movieType}&page=${currentPage}` - : `?title=${movieTitle}&page=${currentPage}` - ) - fetch( - `http://www.omdbapi.com/?apikey=${API_MOVIE_KEY}&s=${title}&type=${type}&y=${year}&page=${currentPage}` - ) - .then((response) => response.json()) - .then((data) => { - setMovies(data.Search) - console.log(data) - setTotalPages(data.totalResults) - }) - .then(() => setLoading(false)) - .catch((error) => console.log(error)) - } - const sortHandler = (sortType: string) => { let sortedMovies: movieObject[] = [] @@ -113,6 +120,7 @@ function App() { setMovieTitle, setMovieType, setMovieYear, + movieTitle, }} /> diff --git a/src/components/MovieForm/index.tsx b/src/components/MovieForm/index.tsx index eaa65ba..6273ea0 100644 --- a/src/components/MovieForm/index.tsx +++ b/src/components/MovieForm/index.tsx @@ -1,5 +1,3 @@ -import type { movieObject } from '../../types/movie' -import Modal from 'react-modal' import q from 'qjuul' interface MovieFormProps { @@ -7,6 +5,7 @@ interface MovieFormProps { setMovieTitle: (title: string) => void setMovieYear: (year: string) => void setMovieType: (type: string) => void + movieTitle: string } const MovieForm: React.FC = ({ @@ -14,17 +13,19 @@ const MovieForm: React.FC = ({ setMovieTitle, setMovieType, setMovieYear, + movieTitle, }) => { return ( handleMovieSubmit({ event: event })} > Choose a movie title: 0 ? movieTitle : ''} 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" /> From cc2979baceeb90fe67b7874bfa0b8da934cd093c Mon Sep 17 00:00:00 2001 From: haraldnilsen Date: Mon, 11 Sep 2023 13:26:43 +0200 Subject: [PATCH 3/4] :construction: still working on query params Co-authored-by: Sindre Kjelsrud --- src/App.tsx | 44 +++++++++++++---------------- src/api/fetchMovie.ts | 20 +++++++++++++ src/components/Pagination/index.tsx | 2 +- 3 files changed, 41 insertions(+), 25 deletions(-) create mode 100644 src/api/fetchMovie.ts diff --git a/src/App.tsx b/src/App.tsx index 177ebf5..a6c9932 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,12 +1,12 @@ -import { useEffect, useState } from 'react' +import { useEffect, useState, FormEvent } from 'react' import './App.css' import q from 'qjuul' import { MovieForm, Pagination, MovieTable, MovieModal } from './components' import type { movieObject } from './types/movie' import { useLocation, useNavigate } from 'react-router-dom' +import { fetchMovie } from './api/fetchMovie' function App() { - const API_MOVIE_KEY = 'd92949d8' const [movies, setMovies] = useState([]) const [loading, setLoading] = useState(true) const [currentPage, setCurrentPage] = useState(1) @@ -28,13 +28,13 @@ function App() { useEffect(() => { handleMovieSubmit() - }, [currentPage, title, type, year]) + }, [title, type, year]) - const handleMovieSubmit = ({ + const handleMovieSubmit = async ({ event, pageNumber, }: { - event?: any + event?: FormEvent pageNumber?: number } = {}) => { if (event) event.preventDefault() @@ -50,26 +50,22 @@ function App() { setLoading(false) } - // navigate( - // movieYear && movieType - // ? `?title=${movieTitle}&type=${movieType}&y=${movieYear}&page=${currentPage}` - // : movieYear - // ? `?title=${movieTitle}&y=${movieYear}&page=${currentPage}` - // : movieYear && movieType - // ? `?title=${movieTitle}&type=${movieType}&page=${currentPage}` - // : `?title=${movieTitle}&page=${currentPage}` - // ) - - fetch( - `http://www.omdbapi.com/?apikey=${API_MOVIE_KEY}&s=${title}&type=${type}&y=${year}&page=${pageNum}` + navigate( + movieYear && movieType + ? `?title=${movieTitle}&type=${movieType}&y=${movieYear}&page=${pageNum}` + : movieYear + ? `?title=${movieTitle}&y=${movieYear}&page=${pageNum}` + : movieYear && movieType + ? `?title=${movieTitle}&type=${movieType}&page=${pageNum}` + : `?title=${movieTitle}&page=${pageNum}` ) - .then((response) => response.json()) - .then((data) => { - setMovies(data.Search) - setTotalPages(data.totalResults) - }) - .then(() => setLoading(false)) - .catch((error) => console.log(error)) + + const response = await fetchMovie(title, type, year, pageNum) + if (response.Response === 'True') { + setMovies(response.Search) + setTotalPages(response.totalResults) + setLoading(false) + } } const calculatePages = (totalResults: number): number => { diff --git a/src/api/fetchMovie.ts b/src/api/fetchMovie.ts new file mode 100644 index 0000000..cb7f065 --- /dev/null +++ b/src/api/fetchMovie.ts @@ -0,0 +1,20 @@ +const API_MOVIE_KEY = import.meta.env.VITE_MOVIE_API_KEY + +export const fetchMovie = async ( + title: string, + type: string, + year: string, + pageNum: number +) => { + const response = await fetch( + `http://www.omdbapi.com/?apikey=${API_MOVIE_KEY}&s=${title}&type=${type}&y=${year}&page=${pageNum}` + ) + .then((response) => response.json()) + .then((data) => { + return data + }) + .catch((error) => { + console.error('Error:', error) + }) + return response +} diff --git a/src/components/Pagination/index.tsx b/src/components/Pagination/index.tsx index 42f1e41..8ba0549 100644 --- a/src/components/Pagination/index.tsx +++ b/src/components/Pagination/index.tsx @@ -23,7 +23,7 @@ const Pagination: React.FC = ({ setShowRightDots(currentPage < totalPages - 3 ? true : false) } if (!showLeftDots && !showRightDots) { - setShowingNumbers(Array.from(Array(totalPages).keys())) + setShowingNumbers(Array.from(Array(totalPages).keys()).map((n) => n + 1)) } if (!showLeftDots && showRightDots) { setShowingNumbers([1, 2, 3, 4, 5]) From b60f59a48e5a7c6cae328bdbe5b63ee6cb54ff25 Mon Sep 17 00:00:00 2001 From: haraldnilsen Date: Tue, 12 Sep 2023 09:39:11 +0200 Subject: [PATCH 4/4] :construction: WIP query params Co-authored-by: Sindre Kjelsrud --- src/App.tsx | 47 ++++++++++++++++++++++++----------------------- 1 file changed, 24 insertions(+), 23 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index a6c9932..dd3ef2d 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,10 +1,10 @@ -import { useEffect, useState, FormEvent } from 'react' -import './App.css' -import q from 'qjuul' import { MovieForm, Pagination, MovieTable, MovieModal } from './components' -import type { movieObject } from './types/movie' import { useLocation, useNavigate } from 'react-router-dom' +import { useEffect, useState, FormEvent } from 'react' +import type { movieObject } from './types/movie' import { fetchMovie } from './api/fetchMovie' +import q from 'qjuul' +import './App.css' function App() { const [movies, setMovies] = useState([]) @@ -46,25 +46,26 @@ function App() { pageNum = Number(page) } - if (!movieTitle && !movieType && !movieYear) { + if (!title && !type && !year) { + navigate('') setLoading(false) - } + } else { + navigate( + movieYear && movieType + ? `?title=${movieTitle}&type=${movieType}&y=${movieYear}&page=${pageNum}` + : movieYear + ? `?title=${movieTitle}&y=${movieYear}&page=${pageNum}` + : movieYear && movieType + ? `?title=${movieTitle}&type=${movieType}&page=${pageNum}` + : `?title=${movieTitle}&page=${pageNum}` + ) - navigate( - movieYear && movieType - ? `?title=${movieTitle}&type=${movieType}&y=${movieYear}&page=${pageNum}` - : movieYear - ? `?title=${movieTitle}&y=${movieYear}&page=${pageNum}` - : movieYear && movieType - ? `?title=${movieTitle}&type=${movieType}&page=${pageNum}` - : `?title=${movieTitle}&page=${pageNum}` - ) - - const response = await fetchMovie(title, type, year, pageNum) - if (response.Response === 'True') { - setMovies(response.Search) - setTotalPages(response.totalResults) - setLoading(false) + const response = await fetchMovie(title, type, year, pageNum) + if (response.Response === 'True') { + setMovies(response.Search) + setTotalPages(response.totalResults) + setLoading(false) + } } } @@ -120,7 +121,7 @@ function App() { }} /> - {!loading && totalPages && ( + {!loading && totalPages > 0 && ( {loading ? ( Loading... - ) : movies ? ( + ) : movies.length > 0 ? ( ) : ( Find a list of movies by searching above ☝️