Oscar and Regina's Project Movies

code/README.md

@@ -1,5 +1,7 @@
 # Technigo React Starter App
 
+You can find the project on: https://oscarreginaprojectmovies.netlify.app
+
 This app has been generated using `create-react-app`, then cleaned up a little so we have a project with just the elements we need to get started.
 
 Add components in the `src` folder and use them in `src/app.js` to get started.
@@ -16,4 +18,4 @@ Alternatively, if you don't want a new git repo on your account;
 1. Download & extract the [latest release](https://github.com/Technigo/react-starter/releases/latest) from GitHub
 1. Open the directory in the terminal: `cd /path/to/react-starter`
 1. Install required dependencies with npm: `npm install`
-1. Start the project: `npm start`
+1. Start the project: `npm start`

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.9.0"
   },
   "scripts": {
     "start": "react-scripts start",

code/src/App.js

@@ -1,9 +1,29 @@
-import React from 'react';
+/* eslint-disable linebreak-style */
+import React, { useEffect, useState } from 'react';
+import { BrowserRouter, Routes, Route } from 'react-router-dom';
+import { PopularList } from './components/PopularList.js'
+import { ShowMovie } from './components/ShowMovie'
 
 export const App = () => {
+  const [list, setList] = useState([]);
+
+  useEffect(() => {
+    fetch('https://api.themoviedb.org/3/movie/popular?api_key=5b17ba21606be74c35e11124051ec659&language=en-US&page=1')
+      .then((response) => response.json())
+      .then((data) => setList(data.results))
+      .catch((error) => console.error(error))
+      .finally(() => console.log('movie list'))
+  }, []);
+
   return (
-    <div>
-      Find me in src/app.js!
-    </div>
+    <BrowserRouter>
+      <main>
+        <Routes>
+          <Route path="/" element={<PopularList movies={list} />} />
+          <Route path="/showmovie/:id" element={<ShowMovie />} />
+        </Routes>
+      </main>
+    </BrowserRouter>
   );
 }
+

code/src/components/PopularList.js

@@ -0,0 +1,27 @@
+/* eslint-disable linebreak-style */
+import React from 'react'
+import { Link } from 'react-router-dom'
+
+export const PopularList = ({ movies }) => {
+  return (
+    <section className="all-movies">
+      {movies.map((movie) => {
+        return (
+          <div className="movie-container">
+            <Link
+              key={movie.id}
+              to={`/showmovie/${movie.id}`}
+              className="movie">
+              <div className="img-overlay" />
+              <img className="all-movie-posters" src={`https://image.tmdb.org/t/p/w342/${movie.poster_path}`} alt="poster" />
+              <div className="movie-info">
+                <h1>{movie.title}</h1>
+                <p>Release date: {movie.release_date}</p>
+              </div>
+            </Link>
+          </div>
+        )
+      })}
+    </section>
+  )
+};

code/src/components/ShowMovie.js

@@ -0,0 +1,32 @@
+/* eslint-disable linebreak-style */
+import React, { useState, useEffect } from 'react'
+import { useNavigate, useParams } from 'react-router-dom'
+
+export const ShowMovie = () => {
+  const [details, setDetails] = useState([])
+  const navigate = useNavigate()
+  const { id } = useParams()
+
+  useEffect(() => {
+    fetch(`https://api.themoviedb.org/3/movie/${id}?api_key=5b17ba21606be74c35e11124051ec659`)
+      .then((res) => res.json())
+      .then((json) => { setDetails(json) })
+      .catch((error) => alert(error, 'error'))
+      .finally(() => console.log('movie-details'))
+  }, [id])
+
+  const goBack = () => {
+    navigate(-1)
+  }
+
+  return (
+    <section className="details-page">
+      <button type="button" className="back-link" onClick={goBack}> Back to movie list </button>
+      <img className="solo-movie-poster" src={`https://image.tmdb.org/t/p/w342/${details.poster_path}`} alt="poster" />
+      <h2>{details.title}</h2>
+      <p>{details.overview}</p>
+
+    </section>
+  )
+}
+

code/src/index.css

@@ -5,9 +5,130 @@ body {
     sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+  background-color: black;
+
 }
 
 code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
     monospace;
+
 }
+
+
+
+/*PopularList*/
+.all-movies {
+  display: flex;
+  flex-direction: column;
+  align-content: center;
+  flex-wrap: wrap;
+  width: 100%;
+  box-sizing: border-box;
+
+}
+
+.movie-container {
+  word-wrap: break-word;
+  text-align: center;
+  position: relative;
+}
+
+a.movie {
+  display: flex;
+
+}
+
+.all-movies .movie-info {
+  position: absolute;
+  height: 100%;
+  color: #f9f9f9;
+  text-align: center;
+  background: rgba(0,0,0,0.75);
+  display: none;
+  margin-top: auto;
+  margin-bottom: 0;
+}
+
+.all-movies a:hover .movie-info {
+  display: none;
+  flex-wrap: wrap;
+  flex-direction: column;
+  justify-content: flex-end;
+  max-width: 100%;
+}
+
+
+
+.all-movie-posters {
+  width: 100%;
+  height: 100%;
+}
+
+/*ShowMovie*/
+.back-link {
+  font-size: 10px;
+  right: 75%;
+  top: 35%;
+  width: 30vh;
+}
+
+.details-page {
+  display: flex;
+  flex-direction: column;
+  padding: 20px;
+  color: white;
+  font-size: 16px;
+}
+
+
+.solo-movie-poster {
+  width: 30vh;
+}
+
+
+@media (min-width: 670px) and (max-width: 1024px) {
+  .all-movies {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 2rem;
+  justify-content: space-evenly;
+}
+}
+
+@media (min-width: 1024px) {
+  .all-movies {
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr 1fr;
+  }
+
+  .all-movies a:hover .movie-info {
+    display: flex;
+    flex-wrap: wrap;
+    flex-direction: column;
+    justify-content: flex-end;
+    width: 100%;
+  }
+
+  .details-page {
+    display: flex;
+    flex-direction: column;
+    padding: 20px;
+    color: white;
+    font-size: 16px;
+    text-align: center;
+  }
+
+  .solo-movie-poster {
+    width: 30vh;
+    align-self: center;
+  }
+
+  .back-link {
+    font-size: 10px;
+    right: 75%;
+    top: 35%;
+    width: 30vh;
+    align-self: center
+  }
+}

code/src/index.js

@@ -1,3 +1,4 @@
+/* eslint-disable linebreak-style */
 import React from 'react';
 import { createRoot } from 'react-dom/client';
 import './index.css';