Technigo · EmmaEngvall · Mar 28, 2023 · Mar 28, 2023 · Mar 28, 2023 · Mar 28, 2023
diff --git a/README.md b/README.md
@@ -1,13 +1,12 @@
 # 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.
+This week we created our very own movies site. We built our first multi-page React application and used a new API. The project was done in pairs.
+The app should have at least two pages - one showing a list of movies and one showing details about selected movie.
 
 ## 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?
 
 ## 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://movie-project-by-vio-and-emma.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,17 @@
   "private": true,
   "dependencies": {
     "@babel/eslint-parser": "^7.18.9",
+    "dom": "^0.0.3",
     "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": "^6.9.0",
+    "react-router-dom": "^6.9.0"
   },
   "scripts": {
     "start": "react-scripts start",

diff --git a/code/public/img/movie_website.jpg b/code/public/img/movie_website.jpg
diff --git a/code/public/index.html b/code/public/index.html
@@ -4,16 +4,11 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <!--
-      Notice the use of %PUBLIC_URL% in the tags above.
-      It will be replaced with the URL of the `public` folder during the build.
-      Only files inside the `public` folder can be referenced from the HTML.
-
-      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
-      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>
+    <link href="https://fonts.googleapis.com/css2?family=Bangers&family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Permanent+Marker&family=Special+Elite&display=swap" rel="stylesheet">
+    <meta property ="og:title" content="Technigo React Movie App by Vio and Emma"/>
+    <meta property ="og:description" content="A website displaying information about upcoming movies."/>
+    <meta property ="og:image" content="./img/movie_website.jpg"/>
+    <title> 🎥 Movie App by Vio & Emma</title>
   </head>
 
   <body>

diff --git a/code/public/tmdb-logo.svg b/code/public/tmdb-logo.svg
diff --git a/code/src/App.js b/code/src/App.js
@@ -1,9 +1,21 @@
-import React from 'react';
+import { React } from 'react';
+import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom'
+import { List } from 'components/List'
+import NotFound from 'components/NotFound';
+import { Details } from 'components/Details';
+
+import Footer from 'components/Footer';
 
 export const App = () => {
   return (
-    <div>
-      Find me in src/app.js!
-    </div>
+    <BrowserRouter>
+      <Routes>
+        <Route path="/" element={<List />} />
+        <Route path="/details/:movieId" element={<Details />} />
+        <Route path="/404" element={<NotFound />} />
+        <Route path="*" element={<Navigate to="/404" replace />} />
+      </Routes>
+      <Footer />
+    </BrowserRouter>
   );
-}
+}
diff --git a/code/src/components/Details.js b/code/src/components/Details.js
@@ -0,0 +1,38 @@
+import React, { useEffect, useState } from 'react';
+import { useNavigate, useParams } from 'react-router-dom';
+import { DETAILS_URL } from 'utils/urls';
+
+export const Details = () => {
+  const [movie, setMovie] = useState([])
+  const { movieId } = useParams();
+  const navigate = useNavigate()
+
+  useEffect(() => {
+    fetch(DETAILS_URL(movieId))
+      .then((res) => res.json())
+      .then((data) => setMovie(data))
+  }, [movieId])
+  console.log(movie)
+  const onGoBackButtonClick = () => {
+    navigate(-1);
+  }
+
+  return (
+    <div className="background">
+      <img className="background-img" src={`https://image.tmdb.org/t/p/w1280/${movie.backdrop_path}`} alt={movie.original_title} />
+      <button className="backButton" type="button" onClick={onGoBackButtonClick}>
+        Back to movies
+      </button>
+      <div className="details-container">
+        <img className="poster" src={`https://image.tmdb.org/t/p/w342${movie.poster_path}`} alt={movie.title} />
+        <div className="movie-text">
+          <h2>{movie.title}</h2>
+          <p><strong>Release date:</strong> {movie.release_date}</p>
+          <p><strong>Rating:</strong> ⭐ {Math.round(movie.vote_average * 10) / 10}</p>
+          <p><strong>About:</strong> {movie.overview}</p>
+          <p><strong>Budget:</strong> {new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(movie.budget)}</p>
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/code/src/components/Footer.js b/code/src/components/Footer.js
@@ -0,0 +1,12 @@
+import React from 'react';
+
+const Footer = () => {
+  return (
+    <footer>
+      <img className="logo" src="/tmdb-logo.svg" alt="TMDB logo" />
+      <p>This product uses the TMDB API but is not endorsed or certified by TMDB.</p>
+    </footer>
+  )
+}
+
+export default Footer
diff --git a/code/src/components/List.js b/code/src/components/List.js
@@ -0,0 +1,29 @@
+import { React, useState, useEffect } from 'react';
+import { Link } from 'react-router-dom';
+import { BASE_URL } from 'utils/urls';
+
+export const List = () => {
+  const [movies, setMovies] = useState([]);
+  useEffect(() => {
+    fetch(BASE_URL)
+      .then((response) => response.json())
+      .then((data) => setMovies(data.results))
+  }, [])
+  return (
+    <section className="main-container">
+      {movies.map((movie) => (
+        <div className="movie-card" key={movie.id}>
+          <Link
+            to={`/details/${movie.id}`}
+            alt={movie.title}>
+            <img className="main-poster" src={`https://image.tmdb.org/t/p/w342${movie.poster_path}`} alt={movie.title} />
+            <div className="movie-card-info">
+              <h1>{movie.title}</h1>
+              <h2>Release date: {movie.release_date}</h2>
+            </div>
+          </Link>
+        </div>
+      ))}
+    </section>
+  )
+}
diff --git a/code/src/components/NotFound.js b/code/src/components/NotFound.js
@@ -0,0 +1,23 @@
+import React from 'react';
+import { useNavigate } from 'react-router-dom';
+
+const NotFound = () => {
+  const navigate = useNavigate()
+  const onGoToHomeButtonClick = () => {
+    navigate('/');
+  }
+
+  const onGoBackButtonClick = () => {
+    navigate(-1)
+  }
+
+  return (
+    <div className="error">
+      <h2 className="error-msg">No movies here!</h2>
+      <button className="homeButton" type="button" onClick={onGoToHomeButtonClick}>Go Home</button>
+      <button className="backButton" type="button" onClick={onGoBackButtonClick}>Go Back</button>
+    </div>
+  )
+}
+
+export default NotFound