Technigo · Alexander-Gabor · Mar 31, 2023 · Mar 31, 2023 · Mar 31, 2023 · Mar 31, 2023
diff --git a/README.md b/README.md
@@ -1,13 +1,11 @@
 # Project Movies
 
-Replace this readme with your own information about your project.
-
-Start by briefly describing the assignment in a sentence or two. Keep it short and to the point.
+Movies project - week 8
 
 ## The problem
 
-Describe how you approached to problem, and what tools and techniques you used to solve it. How did you plan? What technologies did you use? If you had more time, what would be next?
+Using moviedb.org API endpoints to create a website showing upcoming movies and popular movies. Additionally, getting familiar with BrowserRouter, Routes, & Link in React. 
 
 ## View it live
 
-Every project should be deployed somewhere. Be sure to include the link to the deployed project so that the viewer can click around and see what it's all about.
+https://alex-malin-movies.netlify.app/
diff --git a/code/package-lock.json b/code/package-lock.json
diff --git a/code/package.json b/code/package.json
@@ -4,14 +4,16 @@
   "private": true,
   "dependencies": {
     "@babel/eslint-parser": "^7.18.9",
+    "babel-plugin-macros": "^3.1.0",
     "eslint": "^8.21.0",
     "eslint-config-airbnb": "^19.0.4",
     "eslint-plugin-import": "^2.26.0",
     "eslint-plugin-jsx-a11y": "^6.6.1",
     "eslint-plugin-react": "^7.30.1",
     "eslint-plugin-react-hooks": "^4.6.0",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "react-router-dom": "^6.9.0"
   },
   "scripts": {
     "start": "react-scripts start",

diff --git a/code/public/index.html b/code/public/index.html
@@ -13,7 +13,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>Technigo React App</title>
+    <title>MalinAlexMovies</title>
   </head>
 
   <body>

diff --git a/code/src/App.js b/code/src/App.js
@@ -1,9 +1,47 @@
-import React from 'react';
+/* eslint-disable linebreak-style */
+import React, { useState, useEffect } from 'react';
+import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom';
+import Aboutus from 'components/Aboutus';
+import Moviedetails from './components/Moviedetails'
+import Movies from './components/Movies'
+import Notfound from './components/Notfound'
+import Loadingscreen from './components/Loadingscreen'
+import Header from './components/Header'
+import Popularmovies from './components/Popularmovies'
+
+const Upcomingmovies = ('https://api.themoviedb.org/3/movie/upcoming?api_key=b6486ef7752f2120246f9cab35f64ece&language=en-US&page=1')
 
 export const App = () => {
+  const [movieList, setMovielist] = useState([])
+  const [loading, setLoading] = useState(false)
+
+  useEffect(() => {
+    setLoading(true)
+    fetch(Upcomingmovies)
+      .then((response) => response.json())
+      .then((data) => setMovielist(data.results))
+      .catch((e) => { console.error(e) })
+      .finally(() => {
+        setTimeout(() => {
+          setLoading(false)
+        }, 3000);
+      })
+  }, [])
+  console.log(movieList)
+  if (loading) {
+    return <Loadingscreen />
+  }
   return (
-    <div>
-      Find me in src/app.js!
-    </div>
+    <BrowserRouter>
+      <Header />
+      <Routes>
+        <Route path="/" element={<Movies movieList={movieList} />} />
+        <Route path="/moviedetails/:movieId" element={<Moviedetails />} />
+        <Route path="/popularmovies" element={<Popularmovies />} />
+        <Route path="/404" element={<Notfound />} />
+        <Route path="/*" element={<Navigate to="/404" replace />} />
+        <Route path="/aboutus" element={<Aboutus />} />
+      </Routes>
+    </BrowserRouter>
   );
 }
diff --git a/code/src/components/Aboutus.js b/code/src/components/Aboutus.js
@@ -0,0 +1,31 @@
+/* eslint-disable linebreak-style */
+/* eslint-disable no-lone-blocks */
+import React from 'react';
+// import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+// import { faEnvelope } from '@fortawesome/free-solid-svg-icons'
+
+import Githubicon from '../images/github.svg'
+import Logoimage from '../images/moviesheader.PNG'
+
+const Aboutus = () => {
+  return (
+    <section>
+      <div className="aboutus"> <h2>About us!</h2>
+        <button className="githubbutton" type="button" onClick={() => { window.open('https://github.com/Alexander-Gabor', '_blank') }}>
+          <img src={Githubicon} alt="github icon" /><p> Go to Alexander&apos;s GitHub!</p>
+        </button>
+        <button className="githubbutton" type="button" onClick={() => { window.open('https://github.com/MalinSkill', '_blank') }}>
+          <img src={Githubicon} alt="github icon" /><p>Go to Malin&apos;s GitHub!</p>
+        </button>
+        <img className="logo-image-aboutus" src={Logoimage} alt="site logo" />
+      </div>
+    </section>
+  )
+}
+
+export default Aboutus;
+
+// Doing it this way did not open the link in a new window
+{ /* <button className="githubbutton" type="button" onClick={() => { window.location.href = 'https://github.com/MalinSkill' }}>
+          <img src={Githubicon} alt="github icon" /><p>Go to Malin&apos;s GitHub!</p>
+        </button> */ }