From df2787406bcc736d9b06f48dc0b65309688738cf Mon Sep 17 00:00:00 2001
From: haraldnilsen <harald_998@hotmail.com>
Date: Mon, 28 Aug 2023 16:29:48 +0200
Subject: [PATCH] :sparkles: fetches movie from api

Co-authored-by: Sindre Kjelsrud <kjelsrudsindre@gmail.com>
---
 package.json       |  1 +
 src/App.tsx        | 42 ++++++++++++++++++++++--------------------
 src/types/movie.ts |  0
 3 files changed, 23 insertions(+), 20 deletions(-)
 create mode 100644 src/types/movie.ts

diff --git a/package.json b/package.json
index c53a8ef..83097bf 100644
--- a/package.json
+++ b/package.json
@@ -10,6 +10,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "git-mob": "^2.4.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
diff --git a/src/App.tsx b/src/App.tsx
index afe48ac..d611f3a 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,33 +1,35 @@
-import { useState } from 'react'
+import { useEffect, useState } from 'react'
 import reactLogo from './assets/react.svg'
 import viteLogo from '/vite.svg'
 import './App.css'
 
 function App() {
-  const [count, setCount] = useState(0)
+
+  const API_MOVIE_KEY = import.meta.env.VITE_MOVIE_API_KEY;
+  const [movie, setMovie] = useState(null)
+  const [loading, setLoading] = useState(true)
+
+  useEffect(() => {
+    fetch(`http://www.omdbapi.com/?apikey=${API_MOVIE_KEY}&t=batman`)
+      .then((response) => response.json())
+      .then((data) => {
+        setMovie(data)
+      }
+      )
+      .then(() => setLoading(false))
+      .catch((error) => console.log(error))
+  }, [])
 
   return (
     <>
       <div>
-        <a href="https://vitejs.dev" target="_blank">
-          <img src={viteLogo} className="logo" alt="Vite logo" />
-        </a>
-        <a href="https://react.dev" target="_blank">
-          <img src={reactLogo} className="logo react" alt="React logo" />
-        </a>
+        {!loading && movie ? (
+          <div>
+            <h1>{movie.Title}</h1>
+            <img src={movie.Poster} alt={movie.Title} />
+            </div>
+        ):(<h1>Loading...</h1>)}
       </div>
-      <h1>Vite + React</h1>
-      <div className="card">
-        <button onClick={() => setCount((count) => count + 1)}>
-          count is {count}
-        </button>
-        <p>
-          Edit <code>src/App.tsx</code> and save to test HMR
-        </p>
-      </div>
-      <p className="read-the-docs">
-        Click on the Vite and React logos to learn more
-      </p>
     </>
   )
 }
diff --git a/src/types/movie.ts b/src/types/movie.ts
new file mode 100644
index 0000000..e69de29