v6 done

bawan-shna-abdulrahman/package.json

@@ -17,16 +17,20 @@
     "react": "^16.13.1",
     "react-bootstrap": "^1.0.1",
     "react-dom": "^16.13.1",
+    "react-player": "^2.4.0",
+    "react-redux": "^7.2.0",
+    "react-router-dom": "^5.2.0",
     "react-scripts": "3.4.1",
-    "react-simple-flex-grid": "^1.3.21"
+    "react-simple-flex-grid": "^1.3.21",
+    "redux": "^4.0.5"
   },
   "scripts": {
     "predeploy": "npm run build",
-    "deploy": "gh-pages -d build",
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject"
+    "deploy": "npx gh-pages -d build",
+    "start": "npx react-scripts start",
+    "build": "npx react-scripts build",
+    "test": "npx react-scripts test",
+    "eject": "npx react-scripts eject"
   },
   "eslintConfig": {
     "extends": "react-app"

bawan-shna-abdulrahman/src/App.js

@@ -1,42 +1,31 @@
-import React, { useState } from "react";
+import React, { useState, useContext } from "react";
 import "./App.css";
 import "bootstrap/dist/css/bootstrap.css";
 import Header from "./Components/Header";
 import Main from "./Components/Main";
 import Footer from "./Components/Footer";
+import MoviePage from "./Components/MoviePage";
+import Info from "./Components/info";
+import { BrowserRouter as Router, Route, Redirect } from "react-router-dom";
+import { StateProvider } from "./Components/StateProvider";
 
-function App() {
-  const [isLoading, setIsLoading] = useState(true);
-  const [query, setQuery] = useState("");
-  const [movies, setMovies] = useState([]);
-
-  const handleQuery = (query) => {
-    setQuery(query);
-  };
-
-  const handleMovies = (movies) => {
-    setMovies(movies);
-    setIsLoading(false);
-  };
-
+export default function App() {
   return (
-    <div className="page-container">
-      <div className="content-wrap">
-        <Header
-          handleQuery={handleQuery}
-          handleMovies={handleMovies}
-          isLoading={isLoading}
-          setIsLoading={setIsLoading}
-        />
-        <Main
-          isLoading={isLoading}
-          setIsLoading={setIsLoading}
-          movies={movies}
-          query={query}
-        />
+    <Router>
+      <div className="page-container">
+        <div className="content-wrap">
+          <StateProvider>
+            <Header />
+            <Route path="/iraq-bc-movies-project-students">
+              <Redirect to="/"> </Redirect>
+            </Route>
+            <Route path="/movie/:id" component={MoviePage} />
+            <Route path="/person/:id" component={Info} />
+            <Route exact path="/" component={Main} />
+          </StateProvider>
+        </div>
+        <Footer />
       </div>
-      <Footer />
-    </div>
+    </Router>
   );
 }
-export default App;

bawan-shna-abdulrahman/src/Components/BoxShadow.css

@@ -0,0 +1,3 @@
+.shadow-box:hover {
+  box-shadow: 0px 1px 21px -6px;
+}

bawan-shna-abdulrahman/src/Components/DropdownCategories.js

@@ -10,7 +10,7 @@ export default function DropdownCategories(props) {
     fetch(SEARCH_URL_CATEGORIES)
       .then((res) => res.json())
       .then((data) => {
-        if (Boolean(data.genres))
+        if (data.genres !== undefined)
           setCategories([{ id: 0, name: "All" }, ...data.genres]);
       })
       .catch((err) => console.log(err));

bawan-shna-abdulrahman/src/Components/Footer.css

@@ -1,5 +1,4 @@
 .main-footer {
-  margin-top: 50px;
   color: white;
   background-color: #343a40;
   position: relative;

bawan-shna-abdulrahman/src/Components/Footer.js

@@ -6,9 +6,7 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 export default function Footer() {
   return (
     <div className="main-footer">
-      <small style={{ marginRight: "20px" }}>
-        Developed with ❤ by bawan-shna-abdulrahman
-      </small>
+      <small style={{ marginRight: "20px" }}>Developed with ❤ by shna</small>
       <a href="https://github.com/shna-rafeeq" style={{ color: "white" }}>
         <FontAwesomeIcon icon={faGithub} />
       </a>