Adding solution

OrkunSA · Jan 5, 2021 · e90fc15 · e90fc15
1 parent a97167e
commit e90fc15
Show file tree

Hide file tree

Showing 8 changed files with 120 additions and 57 deletions.
diff --git a/react-components-as-routes-lab-onl01-seng-pt-041320/package-lock.json b/react-components-as-routes-lab-onl01-seng-pt-041320/package-lock.json
diff --git a/react-components-as-routes-lab-onl01-seng-pt-041320/package.json b/react-components-as-routes-lab-onl01-seng-pt-041320/package.json
@@ -30,7 +30,7 @@
     "mocha-multi": "^1.0.1",
     "react": "^16.0.0 ",
     "react-dom": "^16.4.2",
-    "react-router-dom": "^4.2.2",
+    "react-router-dom": "^4.3.1",
     "react-test-renderer": "^16.0.0",
     "sinon": "^1.17.7",
     "superagent": "^3.3.2"

diff --git a/react-components-as-routes-lab-onl01-seng-pt-041320/src/components/Actors.js b/react-components-as-routes-lab-onl01-seng-pt-041320/src/components/Actors.js
@@ -1,10 +1,21 @@
-import React from 'react';
-import { actors } from '../data';
+import React from "react";
+import { actors } from "../data";
 
 const Actors = () => {
   return (
     <div>
-      {/*{code here}*/}
+      <h1>Actors Page</h1>
+      {actors.map((actor, index) => (
+        <div key={index}>
+          <h3>Name: {actor.name}</h3>
+          <p>
+            Movies:
+            {actor.movies.map((movie, index) => (
+              <li key={index}>{movie}</li>
+            ))}
+          </p>
+        </div>
+      ))}
     </div>
   );
 };

diff --git a/react-components-as-routes-lab-onl01-seng-pt-041320/src/components/Directors.js b/react-components-as-routes-lab-onl01-seng-pt-041320/src/components/Directors.js
@@ -1,12 +1,23 @@
-import React from 'react';
-import { directors } from '../data';
+import React from "react";
+import { directors } from "../data";
 
 const Directors = () => {
   return (
     <div>
-      {/*{code here}*/}
+      <h1>Directors Page</h1>
+      {directors.map((director, index) => (
+        <div key={index}>
+          <h3>Name: {director.name}</h3>
+          <p>
+            Movies:
+            {director.movies.map((movie, index) => (
+              <li key={index}>{movie}</li>
+            ))}
+          </p>
+        </div>
+      ))}
     </div>
   );
-}
+};
 
-export default Directors
+export default Directors;
diff --git a/react-components-as-routes-lab-onl01-seng-pt-041320/src/components/Home.js b/react-components-as-routes-lab-onl01-seng-pt-041320/src/components/Home.js
@@ -1,9 +1,9 @@
-import React from 'react';
+import React from "react";
 
 const Home = () => {
   return (
     <div>
-      {/*{code here}*/}
+      <h1>Home Page</h1>
     </div>
   );
 };

diff --git a/react-components-as-routes-lab-onl01-seng-pt-041320/src/components/Movies.js b/react-components-as-routes-lab-onl01-seng-pt-041320/src/components/Movies.js
@@ -1,10 +1,22 @@
-import React from 'react';
-import { movies } from '../data';
+import React from "react";
+import { movies } from "../data";
 
 const Movies = () => {
   return (
     <div>
-        {/*{code here}*/}
+      <h1>Movies Page</h1>
+      {movies.map((movie, index) => (
+        <div key={index}>
+          <h3>Movies: {movie.title}</h3>
+          <p>Time: {movie.time}</p>
+          <p>
+            Genres:
+            {movie.genres.map((genre, index) => (
+              <li key={index}>{genre}</li>
+            ))}
+          </p>
+        </div>
+      ))}
     </div>
   );
 };

diff --git a/react-components-as-routes-lab-onl01-seng-pt-041320/src/components/NavBar.js b/react-components-as-routes-lab-onl01-seng-pt-041320/src/components/NavBar.js
@@ -1,10 +1,21 @@
-import React from 'react';
-import { NavLink } from 'react-router-dom';
+import React from "react";
+import { NavLink } from "react-router-dom";
 
 const NavBar = () => {
   return (
-    <div>
-      {/*{code here}*/}
+    <div className="navbar">
+      <NavLink to="/" exact>
+        Home
+      </NavLink>
+      <NavLink to="/movies" exact>
+        Movies
+      </NavLink>
+      <NavLink to="/directors" exact>
+        Directors
+      </NavLink>
+      <NavLink to="/actors" exact>
+        Actors
+      </NavLink>
     </div>
   );
 };

diff --git a/react-components-as-routes-lab-onl01-seng-pt-041320/src/containers/App.js b/react-components-as-routes-lab-onl01-seng-pt-041320/src/containers/App.js
@@ -1,21 +1,23 @@
-import React from 'react';
-import {
-  BrowserRouter as Router,
-  Route
-} from 'react-router-dom';
-import NavBar from '../components/NavBar';
-import Home from '../components/Home';
-import Actors from '../components/Actors';
-import Directors from '../components/Directors';
-import Movies from '../components/Movies';
-
+import React from "react";
+import { BrowserRouter as Router, Route } from "react-router-dom";
+import NavBar from "../components/NavBar";
+import Home from "../components/Home";
+import Actors from "../components/Actors";
+import Directors from "../components/Directors";
+import Movies from "../components/Movies";
 
 const App = (props) => {
   return (
     <Router>
-      {/*{code here}*/}
+      <div className="app">
+        <NavBar />
+        <Route exact path="/" component={Home} />
+        <Route exact path="/actors" component={Actors} />
+        <Route exact path="/directors" component={Directors} />
+        <Route exact path="/movies" component={Movies} />
+      </div>
     </Router>
   );
 };
 
-export default App
+export default App;