diff --git a/code/README.md b/code/README.md index 6e1ac173a..1e9e72839 100644 --- a/code/README.md +++ b/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` \ No newline at end of file diff --git a/code/package-lock.json b/code/package-lock.json index bb51e893e..3fa72176e 100644 --- a/code/package-lock.json +++ b/code/package-lock.json @@ -16,7 +16,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" }, "devDependencies": { "react-scripts": "5.0.1" @@ -3124,6 +3125,14 @@ } } }, + "node_modules/@remix-run/router": { + "version": "1.4.0", + "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.4.0.tgz", + "integrity": "sha512-BJ9SxXux8zAg991UmT8slpwpsd31K1dHHbD3Ba4VzD+liLQ4WAMSxQp2d2ZPRPfN0jN2NPRowcSSoM7lCaF08Q==", + "engines": { + "node": ">=14" + } + }, "node_modules/@rollup/plugin-babel": { "version": "5.3.1", "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz", @@ -14384,6 +14393,36 @@ "node": ">=0.10.0" } }, + "node_modules/react-router": { + "version": "6.9.0", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.9.0.tgz", + "integrity": "sha512-51lKevGNUHrt6kLuX3e/ihrXoXCa9ixY/nVWRLlob4r/l0f45x3SzBvYJe3ctleLUQQ5fVa4RGgJOTH7D9Umhw==", + "dependencies": { + "@remix-run/router": "1.4.0" + }, + "engines": { + "node": ">=14" + }, + "peerDependencies": { + "react": ">=16.8" + } + }, + "node_modules/react-router-dom": { + "version": "6.9.0", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.9.0.tgz", + "integrity": "sha512-/seUAPY01VAuwkGyVBPCn1OXfVbaWGGu4QN9uj0kCPcTyNYgL1ldZpxZUpRU7BLheKQI4Twtl/OW2nHRF1u26Q==", + "dependencies": { + "@remix-run/router": "1.4.0", + "react-router": "6.9.0" + }, + "engines": { + "node": ">=14" + }, + "peerDependencies": { + "react": ">=16.8", + "react-dom": ">=16.8" + } + }, "node_modules/react-scripts": { "version": "5.0.1", "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.1.tgz", @@ -19509,6 +19548,11 @@ "source-map": "^0.7.3" } }, + "@remix-run/router": { + "version": "1.4.0", + "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.4.0.tgz", + "integrity": "sha512-BJ9SxXux8zAg991UmT8slpwpsd31K1dHHbD3Ba4VzD+liLQ4WAMSxQp2d2ZPRPfN0jN2NPRowcSSoM7lCaF08Q==" + }, "@rollup/plugin-babel": { "version": "5.3.1", "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz", @@ -27684,6 +27728,23 @@ "integrity": "sha512-F27qZr8uUqwhWZboondsPx8tnC3Ct3SxZA3V5WyEvujRyyNv0VYPhoBg1gZ8/MV5tubQp76Trw8lTv9hzRBa+A==", "dev": true }, + "react-router": { + "version": "6.9.0", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.9.0.tgz", + "integrity": "sha512-51lKevGNUHrt6kLuX3e/ihrXoXCa9ixY/nVWRLlob4r/l0f45x3SzBvYJe3ctleLUQQ5fVa4RGgJOTH7D9Umhw==", + "requires": { + "@remix-run/router": "1.4.0" + } + }, + "react-router-dom": { + "version": "6.9.0", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.9.0.tgz", + "integrity": "sha512-/seUAPY01VAuwkGyVBPCn1OXfVbaWGGu4QN9uj0kCPcTyNYgL1ldZpxZUpRU7BLheKQI4Twtl/OW2nHRF1u26Q==", + "requires": { + "@remix-run/router": "1.4.0", + "react-router": "6.9.0" + } + }, "react-scripts": { "version": "5.0.1", "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.1.tgz", diff --git a/code/package.json b/code/package.json index 7aad26ebc..9736b71ad 100644 --- 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.9.0" }, "scripts": { "start": "react-scripts start", diff --git a/code/src/App.js b/code/src/App.js index f2007d229..c2f0c125e 100644 --- a/code/src/App.js +++ b/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 ( -
- Find me in src/app.js! -
+ +
+ + } /> + } /> + +
+ ); } + diff --git a/code/src/components/PopularList.js b/code/src/components/PopularList.js new file mode 100644 index 000000000..d3d5dacf1 --- /dev/null +++ b/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 ( +
+ {movies.map((movie) => { + return ( +
+ +
+ poster +
+

{movie.title}

+

Release date: {movie.release_date}

+
+ +
+ ) + })} +
+ ) +}; diff --git a/code/src/components/ShowMovie.js b/code/src/components/ShowMovie.js new file mode 100644 index 000000000..2ce8da952 --- /dev/null +++ b/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 ( +
+ + poster +

{details.title}

+

{details.overview}

+ +
+ ) +} + diff --git a/code/src/index.css b/code/src/index.css index 4a1df4db7..100b1a592 100644 --- a/code/src/index.css +++ b/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 + } +} \ No newline at end of file diff --git a/code/src/index.js b/code/src/index.js index ec9ad93c9..c9a11c1c4 100644 --- a/code/src/index.js +++ b/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';