adding movie details page

zbhavyai · Jul 1, 2022 · fa6df6c · fa6df6c
1 parent fc74c21
commit fa6df6c
Show file tree

Hide file tree

Showing 2 changed files with 95 additions and 0 deletions.
diff --git a/src/CustomColors.css b/src/CustomColors.css
@@ -103,3 +103,7 @@ input[type='number'] {
 .float-left {
   float: left;
 }
+
+.movie-details-text {
+  font-family: Arimo, Arial, Helvetica, 'Lucida Grande', sans-serif;
+}
diff --git a/src/MovieDetails.js b/src/MovieDetails.js
@@ -0,0 +1,91 @@
+import axios from 'axios';
+import React, { useEffect, useState } from 'react';
+import { useParams } from 'react-router-dom';
+import Footer from './Footer';
+import Header from './Header';
+
+const MovieDetails = () => {
+  // api key is defined in file .env.development
+  const apiKey = process.env.REACT_APP_OMDB_API_KEY;
+
+  const { id: imdbId } = useParams();
+
+  let url = `https://www.omdbapi.com/?apikey=${apiKey}&i=${imdbId}&plot=full`;
+
+  let brokenPoster = `${process.env.PUBLIC_URL + '/no-poster.jpg'}`;
+
+  // overwrite poster if 'N/A'
+
+  const [data, setData] = useState({});
+
+  useEffect(() => {
+    axios.get(url).then((response) => {
+      setData(response.data);
+    });
+  }, [url]);
+
+  return (
+    <React.Fragment>
+      <Header />
+
+      <div className='darker-background'>
+        <div className='container custom-padding pt-4'>
+          <div className='row'>
+            <div className='col-12'>
+              {data['Response'] !== 'True' ? (
+                <div className='card mt-4'>
+                  <div className='card-body bg-dark'>
+                    <div className='text-white'>{data['Error']}</div>
+                  </div>
+                </div>
+              ) : (
+                <div className='row' style={{ paddingBottom: '7rem' }}>
+                  <div className='col-md-4 pt-3'>
+                    <div className='card custom-card darker-background'>
+                      <img
+                        className='card-img-top img-stretch'
+                        src={data['Poster'].startsWith('http') ? data['Poster'] : brokenPoster}
+                        alt='Movie poster'
+                        onError={(e) => {
+                          e.target.src = brokenPoster;
+                        }}
+                      />
+                    </div>
+                  </div>
+                  <div className='col-md-8 text-white pt-3'>
+                    <h1 className='fw-bold movie-details-text' style={{ fontSize: '2.5em' }}>
+                      {data['Title']}
+                    </h1>
+                    <h2 className='fw-bold pt-3' style={{ fontSize: '1.25em' }}>
+                      {data['Year']}
+                    </h2>
+                    <h2 className='fw-bold' style={{ fontSize: '1.25em' }}>
+                      {data['Genre']}
+                    </h2>
+                    <h3 className='pt-3' style={{ fontSize: '1.25em' }}>
+                      {data['imdbRating']}
+                      <i className='bi bi-star-fill text-warning mx-3'></i>
+                    </h3>
+                    <h4 className='pt-3' style={{ fontSize: '1.2em' }}>
+                      Director:
+                      <span className='text-muted mx-3'>{data['Director']}</span>
+                    </h4>
+                    <h4 className='pt-2' style={{ fontSize: '1.2em' }}>
+                      Top Cast:
+                      <span className='text-muted mx-3'>{data['Actors']}</span>
+                    </h4>
+                    <p className='pt-4'>{data['Plot']}</p>
+                  </div>
+                </div>
+              )}
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <Footer />
+    </React.Fragment>
+  );
+};
+
+export default MovieDetails;