Technigo · AnnaElvine · Mar 29, 2023 · Mar 29, 2023 · Mar 29, 2023 · Mar 29, 2023
diff --git a/README.md b/README.md
@@ -1,13 +1,11 @@
-# Project Movies
+# 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.
+We did a movie page using react. 
 
 ## 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?
+We had some problem with the intro and to upload it on netlify!
 
 ## 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://annandreas-popular-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
@@ -11,7 +11,8 @@
     "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.10.0"
   },
   "scripts": {
     "start": "react-scripts start",

diff --git a/code/public/_redirects b/code/public/_redirects
@@ -0,0 +1 @@
+/*    /index.html   200
diff --git a/code/public/favicon.ico b/code/public/favicon.ico
diff --git a/code/public/favicoon.ico b/code/public/favicoon.ico
@@ -0,0 +1 @@
+<link rel="icon" type="image/png" href="%PUBLIC_URL%/favicoon.ico" />
diff --git a/code/public/index.html b/code/public/index.html
@@ -1,6 +1,5 @@
 <!DOCTYPE html>
 <html lang="en">
-
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
@@ -13,7 +12,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>Popular Movies</title>
   </head>
 
   <body>
@@ -30,5 +29,4 @@
       To create a production bundle, use `npm run build` or `yarn build`.
     -->
   </body>
-
 </html>
diff --git a/code/src/App.js b/code/src/App.js
@@ -1,9 +1,24 @@
-import React from 'react';
+import React from 'react'
+import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom'
+import MovieList from 'components/MovieList'
+import MovieDetails from 'components/MovieDetails'
+import NotFound from 'components/NotFound'
 
 export const App = () => {
   return (
-    <div>
-      Find me in src/app.js!
-    </div>
+    <BrowserRouter>
+      <Routes>
+        <Route path="/" element={<MovieList />} />
+        <Route path="/details/:id" element={<MovieDetails />} />
+        <Route path="/404" element={<NotFound />} />
+        <Route path="*" element={<Navigate to="404" replace />} />
+      </Routes>
+    </BrowserRouter>
+
   );
 }
+
+export default App;
+/* BrowserRouter= Wrapper for everything / main wrapper for the whole wrap */
+/* Route= Wrapper for every component */
+/* Route path= Path to a single component */
diff --git a/code/src/components/Header.js b/code/src/components/Header.js
@@ -0,0 +1,29 @@
+/* eslint-disable jsx-a11y/label-has-associated-control */
+/* import React from 'react';
+
+const Header = () => {
+/* const [category, setCategory] = useState('popular'); */
+
+/* return (
+    <div className="header-container">
+      <div className="dropdown">
+        <button type="button">Menu</button>
+        <div className="dropdown-content">
+          <a href="#">Latest</a>
+          <a href="#">Series</a>
+          <a href="#">Upcoming</a>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default Header;
+ */
+/*  <label htmlFor="category">Change category: </label>  <select id="category" onChange={(event) =>
+   setCategory(event.target.value)} value={category}>
+            <option value="popular">Popular</option>
+            <option value="now_playing">Now Playing</option>
+            <option value="upcoming">Upcoming</option>
+            <option value="top_rated">Top Rated</option>
+          </select> */
diff --git a/code/src/components/Intro.js b/code/src/components/Intro.js
@@ -0,0 +1,13 @@
+import React from 'react'
+
+const Popcorn = () => (
+  <div className="loading-movies">
+    <span className="loading-intro" role="img" aria-label="loading">
+
+      <img src="https://payload.cargocollective.com/1/1/44701/13320134/New-Yorker-Movies-GIFWEB.gif" alt="popcorngif" className="center" />
+      <h5>Get your snacks ready</h5>
+    </span>
+  </div>
+)
+
+export default Popcorn
diff --git a/code/src/components/MovieDetails.js b/code/src/components/MovieDetails.js
@@ -0,0 +1,67 @@
+/* eslint-disable jsx-a11y/click-events-have-key-events */
+/* eslint-disable jsx-a11y/no-static-element-interactions */
+import React, { useState, useEffect } from 'react'
+import { useParams, useNavigate } from 'react-router-dom'
+import NotFound from 'components/NotFound'
+
+/* PAGE 2 */
+const MovieDetails = () => {
+  const [details, setDetails] = useState([]);
+  const navigate = useNavigate();
+  const { id } = useParams()
+  const onBackButtonClick = () => {
+    navigate(-1);
+  }
+
+  const FetchDetails = () => {
+    fetch(`https://api.themoviedb.org/3/movie/${id}?api_key=e865fc7d6c1eaa875454193ac1851471&language=en-US`)
+      .then((response) => response.json())
+      .then((data) => setDetails(data))
+      .catch((error) => {
+        console.log(error)
+        if (error) {
+          return (<NotFound />
+          )
+        }
+      })
+  }
+  // eslint-disable-next-line no-unused-vars
+  const handleBackButton = (event) => {
+    if (event.KeyCode === 13) {
+      onBackButtonClick();
+    }
+  };
+  useEffect(() => {
+    FetchDetails()
+  })
+
+  return (
+    <section className="detail-page">
+      <div
+        className="background"
+        style={{
+          backgroundImage: `url(http://image.tmdb.org/t/p/original${details.backdrop_path})`
+        }}>
+        <div className="backbutton">
+          <div type="button" className="button" onClick={onBackButtonClick}>
+            <span />
+            <span />
+            <span />
+          </div>
+        </div>
+        <div className="movie-details">
+          <img src={`http://image.tmdb.org/t/p/w342${details.poster_path}`} alt={details.title} />
+        </div>
+        <div className="details-page-2">
+          <h3>{details.title}  <span className="rating">⭐️{Math.round(details.vote_average * 10) / 10}</span></h3>
+          <p>{details.overview}</p>
+        </div>
+      </div>
+    </section>
+  );
+}
+
+export default MovieDetails;
+
+/* To round rating number to one decimal */
+/* const roundedNumber = Math.round(movieDetails.vote_average * 10) / 10 */
diff --git a/code/src/components/MovieList.js b/code/src/components/MovieList.js
@@ -0,0 +1,51 @@
+/* eslint-disable no-shadow */
+import React, { useState, useEffect } from 'react';
+import { Link } from 'react-router-dom';
+import Popcorn from './Intro';
+/* import Header from './Header'; */
+/* STARTPAGE */
+const MovieList = () => {
+  const [list, setList] = useState([]);
+  const [loading, setLoading] = useState(false);
+
+  /* Fetch function that allows us to get the movie titles, images from API */
+  const FetchMovies = () => {
+    fetch('https://api.themoviedb.org/3/movie/popular?api_key=e865fc7d6c1eaa875454193ac1851471&language=en-US&page=1')
+      .then((response) => response.json())
+      .then((data) => {
+        setList(data.results)
+      })
+  }
+  /* A call back function - this useEffect hook awakens the FetchMovies function above */
+  useEffect(() => {
+    FetchMovies()
+    setLoading(true);
+    setTimeout(() => setLoading(false), 2000)
+  }, [])
+
+  /* This return shows the img, titles, rdate & the id on our HTML page */
+  return (
+    <section className="startPage">
+      {loading ? (<Popcorn />) : (
+        <>
+          {/* <Header setList={setList} /> */}
+          <div className="movie-container">
+            {list.map((movie) => (
+              <article className="movie-wrapper" key={movie.id}>
+                <Link key={movie.id} to={`/details/${movie.id}`}>
+                  <img src={`https://image.tmdb.org/t/p/w342${movie.poster_path}`} alt={movie.title} />
+                  <div className="details">
+                    <h1>{movie.title}</h1>
+                    <p>Released {movie.release_date}</p>
+                  </div>
+                </Link>
+              </article>
+            ))}
+          </div>
+        </>
+      )}
+    </section>
+  )
+}
+
+export default MovieList;
diff --git a/code/src/components/NotFound.js b/code/src/components/NotFound.js
@@ -0,0 +1,15 @@
+import React from 'react';
+import { useNavigate } from 'react-router-dom';
+
+const NotFound = () => {
+  const navigate = useNavigate();
+  const onHomeButtonClick = () => {
+    navigate('/');
+  }
+  return (
+    <div>
+      <p>Page not found</p>
+      <button type="button" onClick={onHomeButtonClick}>Return to homepage</button>
+    </div>);
+}
+export default NotFound;