✨ working connection between frontend and backend

Co-authored-by: Sindre Kjelsrud <kjelsrudsindre@gmail.com>

frontend/src/App.tsx

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

frontend/src/api/fetchMovie.ts

@@ -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
 
@@ -16,6 +16,7 @@ export const fetchMovie = async (
   const response = await fetch(query)
     .then((response) => response.json())
     .then((data) => {
+      console.log(data.search)
       return data
     })
     .catch((error) => {

frontend/src/components/MovieTableRow/index.tsx

@@ -16,10 +16,10 @@ 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.img src={movie.poster} alt={movie.title} width="100" />
       </q.td>
-      <q.td>{movie.Title}</q.td>
-      <q.td>{movie.Year}</q.td>
+      <q.td>{movie.title}</q.td>
+      <q.td>{movie.year}</q.td>
     </q.tr>
   )
 }

frontend/src/types/movie.ts

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