Polish

src/components/Home/Home.js

@@ -84,7 +84,7 @@ class Home extends Component {
             totalPages: result.total_pages
           },
           () => {
-            if (this.state.searchTerm === "") {
+            if (searchTerm === "") {
               localStorage.setItem("HomeState", JSON.stringify(this.state));
             }
           }

src/components/Movie/Movie.js

@@ -17,16 +17,15 @@ export default class Movie extends Component {
   };
 
   componentDidMount() {
-    if (localStorage.getItem(`${this.props.match.paramas.movieId}`)) {
-      const state = JSON.parse(
-        localStorage.getItem(`${this.props.match.paramas.movieId}`)
-      );
+    const { match } = this.props;
+    if (localStorage.getItem(`${match.params.movieId}`)) {
+      const state = JSON.parse(localStorage.getItem(`${match.params.movieId}`));
       this.setState({ ...state });
     } else {
       this.setState({ loading: true });
       // Movie Data
       const endpoint = `${API_URL}movie/${
-        this.props.match.params.movieId
+        match.params.movieId
       }?api_key=${API_KEY}&language=en-US`;
       this.fetchItems(endpoint);
     }
@@ -36,7 +35,6 @@ export default class Movie extends Component {
     fetch(endpoint)
       .then(res => res.json())
       .then(res => {
-        console.log(res);
         if (res.status_code) {
           this.setState({ loading: false });
         } else {
@@ -68,35 +66,31 @@ export default class Movie extends Component {
   };
 
   render() {
+    const { movie, directors, actors, loading } = this.state;
     return (
       <div className="rmdb-movie">
-        {this.state.movie ? (
+        {movie ? (
           <div>
             <Navigation movie={this.props.location.movieName} />
-            <MovieInfo
-              movie={this.state.movie}
-              directors={this.state.directors}
-            />
+            <MovieInfo movie={movie} directors={directors} />
             <MovieInfoBar
-              time={this.state.movie.runtime}
-              budget={this.state.movie.budget}
-              revenue={this.state.movie.revenue}
+              time={movie.runtime}
+              budget={movie.budget}
+              revenue={movie.revenue}
             />
           </div>
         ) : null}
-        {this.state.actors ? (
+        {actors ? (
           <div className="rmdb-movie-grid">
             <FourColGrid header={"Actors"}>
-              {this.state.actors.map((element, i) => {
+              {actors.map((element, i) => {
                 return <Actor key={i} actor={element} />;
               })}
             </FourColGrid>
           </div>
         ) : null}
-        {!this.state.actors && !this.state.loading ? (
-          <h1>No Movie Found</h1>
-        ) : null}
-        {this.state.loading ? <Spinner /> : null}}
+        {!actors && !loading ? <h1>No Movie Found</h1> : null}
+        {loading ? <Spinner /> : null}
       </div>
     );
   }

src/components/elements/Actor/Actor.js

@@ -2,20 +2,20 @@ import React from "react";
 import { IMAGE_BASE_URL } from "../../../config";
 import "./Actor.css";
 
-export default function Actor(props) {
+export default function Actor({ actor }) {
   const POSTER_SIZE = "w154";
   return (
     <div className="rmdb-actor">
       <img
         src={
-          props.actor.profile_path
-            ? `${IMAGE_BASE_URL}${POSTER_SIZE}${props.actor.profile_path}`
+          actor.profile_path
+            ? `${IMAGE_BASE_URL}${POSTER_SIZE}${actor.profile_path}`
             : "./images/no_image.jpg}"
         }
         alt="Actor Thumbnail"
       />
-      <span className="rmdb-actor-name">{props.actor.name}</span>
-      <span className="rmdb-actor-character">{props.actor.character}</span>
+      <span className="rmdb-actor-name">{actor.name}</span>
+      <span className="rmdb-actor-character">{actor.character}</span>
     </div>
   );
 }

src/components/elements/FourColGrid/FourColGrid.js

@@ -2,9 +2,9 @@ import React from "react";
 import PropTypes from "prop-types";
 import "./FourColGrid.css";
 
-function FourColGrid(props) {
+function FourColGrid({ children, loading, header }) {
   const renderElements = () => {
-    const gridElements = props.children.map((element, i) => {
+    const gridElements = children.map((element, i) => {
       return (
         <div key={i} className="rmdb-grid-element">
           {element}
@@ -15,7 +15,7 @@ function FourColGrid(props) {
   };
   return (
     <div className="rmdb-grid">
-      {props.header && !props.loading ? <h1>{props.header}</h1> : null}
+      {header && !loading ? <h1>{header}</h1> : null}
       <div className="rmdb-grid-content">{renderElements()}</div>
     </div>
   );

src/components/elements/HeroImage/HeroImage.js

@@ -1,7 +1,7 @@
 import React from "react";
 import "./HeroImage.css";
 
-export default function HeroImage(props) {
+export default function HeroImage({ image, title, text }) {
   return (
     <div
       className="rmdb-heroimage"
@@ -10,13 +10,13 @@ export default function HeroImage(props) {
       39%, rgba(0,0,0,0)
       41%, rgba(0,0,0,0.65)
       100%),
-      url('${props.image}'), #1c1c1c`
+      url('${image}'), #1c1c1c`
       }}
     >
       <div className="rmdb-heroimage-content">
         <div className="rmdb-heroimage-text">
-          <h1>{props.title}</h1>
-          <p>{props.text}</p>
+          <h1>{title}</h1>
+          <p>{text}</p>
         </div>
       </div>
     </div>

src/components/elements/LoadMoreBtn/LoadMoreBtn.js

@@ -1,10 +1,10 @@
 import React from "react";
 import "./LoadMoreBtn.css";
 
-export default function LoadMoreBtn(props) {
+export default function LoadMoreBtn({ onClick, text }) {
   return (
-    <div className="rmdb-loadmorebtn" onClick={props.onClick}>
-      <p>{props.text}</p>
+    <div className="rmdb-loadmorebtn" onClick={onClick}>
+      <p>{text}</p>
     </div>
   );
 }

src/components/elements/MovieInfo/MovieInfo.js

@@ -4,33 +4,31 @@ import FontAwesome from "react-fontawesome";
 import MovieThumb from "../MovieThumb/MovieThumb";
 import "./MovieInfo.css";
 
-export default function MovieInfo(props) {
+export default function MovieInfo({ movie, directors }) {
   return (
     <div
       className="rmdb-movieinfo"
       style={{
-        background: props.movie.backdrop_path
-          ? `url('${IMAGE_BASE_URL}${BACKDROP_SIZE}${
-              props.movie.backdrop_path
-            }')`
+        background: movie.backdrop_path
+          ? `url('${IMAGE_BASE_URL}${BACKDROP_SIZE}${movie.backdrop_path}')`
           : "#000"
       }}
     >
       <div className="rmdb-movieinfo-content">
         <div className="rmdb-movieinfo-thumb">
           <MovieThumb
             image={
-              props.movie.poster_path
-                ? `${IMAGE_BASE_URL}${POSTER_SIZE}${props.movie.poster_path}`
+              movie.poster_path
+                ? `${IMAGE_BASE_URL}${POSTER_SIZE}${movie.poster_path}`
                 : "./images/no_image.jpg"
             }
             clickable={false}
           />
         </div>
         <div className="rmdb-movieinfo-text">
-          <h1>{props.movie.title}</h1>
+          <h1>{movie.title}</h1>
           <h3>PLOT</h3>
-          <p>{props.movie.overview}</p>
+          <p>{movie.overview}</p>
           <h3>IMDB RATING</h3>
           <div className="rmdb-rating">
             <meter
@@ -39,12 +37,12 @@ export default function MovieInfo(props) {
               optimum="100"
               low="40"
               high="70"
-              value={props.movie.vote_average * 10}
+              value={movie.vote_average * 10}
             />
-            <p className="rmdb-score">{props.movie.vote_average}</p>
+            <p className="rmdb-score">{movie.vote_average}</p>
           </div>
-          {props.directors.length > 1 ? <h3>DIRECTORS</h3> : <h3>DIRECTOR</h3>}
-          {props.directors.map((element, i) => {
+          {directors.length > 1 ? <h3>DIRECTORS</h3> : <h3>DIRECTOR</h3>}
+          {directors.map((element, i) => {
             return (
               <p key={i} className="rmdb-director">
                 {element.name}

src/components/elements/MovieInfoBar/MovieInfoBar.js

@@ -3,26 +3,26 @@ import FontAwesome from "react-fontawesome";
 import { calcTime, convertMoney } from "../../../helpers";
 import "./MovieInfoBar.css";
 
-export default function MovieInfoBar(props) {
+export default function MovieInfoBar({ time, budget, revenue }) {
   return (
     <div className="rmdb-movieinfobar">
       <div className="rmdb-movieinfobar-content">
         <div className="rmdb-movieinfobar-content-col">
           <FontAwesome className="fa-time" name="clock-o" size="2x" />
           <span className="rmdb-movieinfobar-info">
-            Running time: {calcTime(props.time)}
+            Running time: {calcTime(time)}
           </span>
         </div>
         <div className="rmdb-movieinfobar-content-col">
           <FontAwesome className="fa-budget" name="money" size="2x" />
           <span className="rmdb-movieinfobar-info">
-            Budget : {convertMoney(props.budget)}
+            Budget : {convertMoney(budget)}
           </span>
         </div>
         <div className="rmdb-movieinfobar-content-col">
           <FontAwesome className="fa-revenue" name="ticket" size="2x" />
           <span className="rmdb-movieinfobar-info">
-            Revenue : {convertMoney(props.revenue)}
+            Revenue : {convertMoney(revenue)}
           </span>
         </div>
       </div>

src/components/elements/MovieThumb/MovieThumb.js

@@ -3,20 +3,20 @@ import { Link } from "react-router-dom";
 import PropTypes from "prop-types";
 import "./MovieThumb.css";
 
-function MovieThumb(props) {
+function MovieThumb({ movieId, movieName, image, clickable }) {
   return (
     <div className="rmdb-moviethumb">
-      {props.clickable ? (
+      {clickable ? (
         <Link
           to={{
-            pathname: `/${props.movieId}`,
-            movieName: `${props.movieName}`
+            pathname: `/${movieId}`,
+            movieName: `${movieName}`
           }}
         >
-          <img src={props.image} alt="Movie Thumbnail" />
+          <img src={image} alt="Movie Thumbnail" />
         </Link>
       ) : (
-        <img src={props.image} alt="Movie Thumbnail" />
+        <img src={image} alt="Movie Thumbnail" />
       )}
     </div>
   );

src/components/elements/Navigation/Navigation.js

@@ -2,14 +2,14 @@ import React from "react";
 import { Link } from "react-router-dom";
 import "./Navigation.css";
 
-export default function Navigation(props) {
+export default function Navigation({ movie }) {
   return (
     <div className="rmdb-navigation">
       <div className="rmdb-navigation-content">
         <Link to="/">
           <p>Home</p>
           <p>/</p>
-          <p>{props.movie}</p>
+          <p>{movie}</p>
         </Link>
       </div>
     </div>

src/components/elements/SearchBar/SearchBar.js

@@ -1,5 +1,4 @@
 import React, { Component } from "react";
-import PropTypes from "prop-types";
 import FontAwesome from "react-fontawesome";
 import "./SearchBar.css";