From a65ac11429009c6582d802c4e2cabc6b82c2aa71 Mon Sep 17 00:00:00 2001
From: haraldnilsen <harald_998@hotmail.com>
Date: Mon, 4 Sep 2023 10:04:23 +0200
Subject: [PATCH] :sparkles: showing list of movie items

Co-authored-by: Sindre Kjelsrud <kjelsrudsindre@gmail.com>
---
 .prettierrc.json |  6 ++++++
 src/App.tsx      | 30 ++++++++++++++++--------------
 2 files changed, 22 insertions(+), 14 deletions(-)
 create mode 100644 .prettierrc.json

diff --git a/.prettierrc.json b/.prettierrc.json
new file mode 100644
index 0000000..fbe0e55
--- /dev/null
+++ b/.prettierrc.json
@@ -0,0 +1,6 @@
+{
+    "trailingComma": "es5",
+    "tabWidth": 2,
+    "semi": false,
+    "singleQuote": true
+}
\ No newline at end of file
diff --git a/src/App.tsx b/src/App.tsx
index d611f3a..e1723b0 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,21 +1,17 @@
 import { useEffect, useState } from 'react'
-import reactLogo from './assets/react.svg'
-import viteLogo from '/vite.svg'
 import './App.css'
 
 function App() {
-
-  const API_MOVIE_KEY = import.meta.env.VITE_MOVIE_API_KEY;
-  const [movie, setMovie] = useState(null)
+  const API_MOVIE_KEY = import.meta.env.VITE_MOVIE_API_KEY
+  const [movies, setMovies] = useState([])
   const [loading, setLoading] = useState(true)
 
   useEffect(() => {
-    fetch(`http://www.omdbapi.com/?apikey=${API_MOVIE_KEY}&t=batman`)
+    fetch(`http://www.omdbapi.com/?apikey=${API_MOVIE_KEY}&s=batman`)
       .then((response) => response.json())
       .then((data) => {
-        setMovie(data)
-      }
-      )
+        setMovies(data.Search)
+      })
       .then(() => setLoading(false))
       .catch((error) => console.log(error))
   }, [])
@@ -23,12 +19,18 @@ function App() {
   return (
     <>
       <div>
-        {!loading && movie ? (
+        {!loading && movies ? (
           <div>
-            <h1>{movie.Title}</h1>
-            <img src={movie.Poster} alt={movie.Title} />
-            </div>
-        ):(<h1>Loading...</h1>)}
+            {movies.map((movie: any) => (
+              <div>
+                <h1>{movie.Title}</h1>
+                <img src={movie.Poster} alt={movie.Title} />
+              </div>
+            ))}
+          </div>
+        ) : (
+          <h1>Loading...</h1>
+        )}
       </div>
     </>
   )