Finished Movie component and corrected errors

Author: FrancoisCoding

src/components/Movie/Movie.js

@@ -56,11 +56,33 @@ export default class Movie extends Component {
   render() {
     return (
       <div className="rmdb-movie">
-        <Navigation />
-        <MovieInfo />
-        <MovieInfoBar />
-        {/* <FourColGrid /> */}
-        <Spinner />
+        {this.state.movie ? (
+          <div>
+            <Navigation movie={this.props.location.movieName} />
+            <MovieInfo
+              movie={this.state.movie}
+              directors={this.state.directors}
+            />
+            <MovieInfoBar
+              time={this.state.movie.runtime}
+              budget={this.state.movie.budget}
+              revenue={this.state.movie.revenue}
+            />
+          </div>
+        ) : null}
+        {this.state.actors ? (
+          <div className="rmdb-movie-grid">
+            <FourColGrid header={"Actors"}>
+              {this.state.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}}
       </div>
     );
   }

src/components/elements/MovieInfo/MovieInfo.js

@@ -44,11 +44,15 @@ export default function MovieInfo(props) {
             <p className="rmdb-score">{props.movie.vote_average}</p>
           </div>
           {props.directors.length > 1 ? <h3>DIRECTORS</h3> : <h3>DIRECTOR</h3>}
-          {props.directors.map((element,1)=> {
-            return <p key={i} className="rmdb-director">{element.name}</p>
+          {props.directors.map((element, i) => {
+            return (
+              <p key={i} className="rmdb-director">
+                {element.name}
+              </p>
+            );
           })}
         </div>
-        <FontAwesome className='fa-film' name='file' size="5x" />
+        <FontAwesome className="fa-film" name="film" size="5x" />
       </div>
     </div>
   );

src/components/elements/MovieInfoBar/MovieInfoBar.js

@@ -7,19 +7,19 @@ export default function MovieInfoBar(props) {
   return (
     <div className="rmdb-movieinfobar">
       <div className="rmdb-movieinfobar-content">
-        <div className="rmdb-movieinfobar-col">
+        <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)}
           </span>
         </div>
-        <div className="rmdb-movieinfobar-col">
+        <div className="rmdb-movieinfobar-content-col">
           <FontAwesome className="fa-budget" name="money" size="2x" />
           <span className="rmdb-movieinfobar-info">
             Budget : {convertMoney(props.budget)}
           </span>
         </div>
-        <div className="rmdb-movieinfobar-col">
+        <div className="rmdb-movieinfobar-content-col">
           <FontAwesome className="fa-revenue" name="ticket" size="2x" />
           <span className="rmdb-movieinfobar-info">
             Revenue : {convertMoney(props.revenue)}

src/components/elements/Navigation/Navigation.js

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