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

✨ working connection between frontend and backend

Browse source 
Co-authored-by: Sindre Kjelsrud <kjelsrudsindre@gmail.com>
This commit is contained in:
haraldnilsen 2023-10-02 12:20:27 +02:00
parent f591abe341
commit 1c19ca4ee2
4 changed files with 17 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
frontend/src/App.tsx
View file

@ -26,8 +26,8 @@ function App() {
const handleFetchMovie = async () => { const handleFetchMovie = async () => {
const response = await fetchMovie(title, page, type, year) const response = await fetchMovie(title, page, type, year)
console.log(year) console.log(year)
if (response.Response == 'True') { if (response.response == 'OK') {
setMovies(response.Search) setMovies(response.search)
setTotalPages(Number(response.totalResults)) setTotalPages(Number(response.totalResults))
setCurrentPage(Number(page)) setCurrentPage(Number(page))
setLoading(false) setLoading(false)
@ -66,15 +66,15 @@ function App() {
if (sortType === 's') { if (sortType === 's') {
sortedMovies = [...movies].sort((m1, m2) => sortedMovies = [...movies].sort((m1, m2) =>
sortAscending sortAscending
? m1.Title.localeCompare(m2.Title) ? m1.title.localeCompare(m2.title)
: m2.Title.localeCompare(m1.Title) : m2.title.localeCompare(m1.title)
) )
} }
if (sortType === 'y') { if (sortType === 'y') {
sortedMovies = [...movies].sort((m1, m2) => sortedMovies = [...movies].sort((m1, m2) =>
sortAscending sortAscending
? m1.Year.localeCompare(m2.Year) ? m1.year.localeCompare(m2.year)
: m2.Year.localeCompare(m1.Year) : m2.year.localeCompare(m1.year)
) )
} }

3
frontend/src/api/fetchMovie.ts
View file

@ -1,4 +1,4 @@
import { movieResponse } from '../types/movie' import { movieObject, movieResponse } from '../types/movie'
//const API_MOVIE_KEY = import.meta.env.VITE_MOVIE_API_KEY //const API_MOVIE_KEY = import.meta.env.VITE_MOVIE_API_KEY
@ -16,6 +16,7 @@ export const fetchMovie = async (
const response = await fetch(query) const response = await fetch(query)
.then((response) => response.json()) .then((response) => response.json())
.then((data) => { .then((data) => {
console.log(data.search)
return data return data
}) })
.catch((error) => { .catch((error) => {

6
frontend/src/components/MovieTableRow/index.tsx
View file

@ -16,10 +16,10 @@ const MovieTableRow: React.FC<MovieTableRowProps> = ({ movie, onClick }) => {
return ( return (
<q.tr onClick={onClick} className="card rounded-md hover:cursor-pointer"> <q.tr onClick={onClick} className="card rounded-md hover:cursor-pointer">
<q.td className="p-2"> <q.td className="p-2">
<q.img src={movie.Poster} alt={movie.Title} width="100" /> <q.img src={movie.poster} alt={movie.title} width="100" />
</q.td> </q.td>
<q.td>{movie.Title}</q.td> <q.td>{movie.title}</q.td>
<q.td>{movie.Year}</q.td> <q.td>{movie.year}</q.td>
</q.tr> </q.tr>
) )
} }

12
frontend/src/types/movie.ts
View file

@ -1,15 +1,15 @@
export type movieObject = { export type movieObject = {
Poster: string poster: string
Title: string title: string
Type: string type: string
Year: string year: string
imdbID: string imdbID: string
} }
export type modalMovieType = movieObject | null export type modalMovieType = movieObject | null
export type movieResponse = { export type movieResponse = {
Response: string response: string
totalResults: string totalResults: string
Search: movieObject[] search: movieObject[]
} }