From 2df561ea4035912a4bcec76cc8f602c46e840c4e Mon Sep 17 00:00:00 2001 From: Oscar Date: Fri, 31 Mar 2023 02:58:41 -0700 Subject: [PATCH 1/5] Combined mine and Regina's code, finally pushing, just need to figure out css! --- code/package-lock.json | 63 +++++++++++++++++++++++++++++- code/package.json | 3 +- code/src/App.js | 28 +++++++++++-- code/src/components/PopularList.js | 27 +++++++++++++ code/src/components/ShowMovie.js | 32 +++++++++++++++ code/src/index.css | 45 +++++++++++++++++++++ code/src/index.js | 1 + 7 files changed, 193 insertions(+), 6 deletions(-) create mode 100644 code/src/components/PopularList.js create mode 100644 code/src/components/ShowMovie.js 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..469f9bd14 100644 --- a/code/src/index.css +++ b/code/src/index.css @@ -5,9 +5,54 @@ 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-wrap: wrap; + width: 100%; + box-sizing: border-box; +} + +.movie-container { + word-wrap: break-word; + width: 25%; + height: 100%; + text-align: center; +} + + +.all-movie-posters { + width: 100%; + + height: 100%; + object-fit: cover; +} + +/*ShowMovie*/ +.back-link { + position: absolute; + font-size: 10px; + bottom: 48%; +} + +.details-page { + display: flex; + flex-direction: column; + padding: 20px; + color: white; + font-size: 16px; +} + +.solo-movie-poster { + width: 30vh; } 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'; From ce8fdc10af0c21d1ef8ecc38f06d4cfdf3237379 Mon Sep 17 00:00:00 2001 From: Oscar Date: Sat, 1 Apr 2023 00:51:18 -0700 Subject: [PATCH 2/5] finished css, edited readme --- code/README.md | 4 +++- code/src/index.css | 59 +++++++++++++++++++++++++++++++++++++++++++--- 2 files changed, 59 insertions(+), 4 deletions(-) diff --git a/code/README.md b/code/README.md index 6e1ac173a..f963d6f2b 100644 --- a/code/README.md +++ b/code/README.md @@ -1,5 +1,7 @@ # Technigo React Starter App +You can find the project on: + 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/src/index.css b/code/src/index.css index 469f9bd14..921d4e6ed 100644 --- a/code/src/index.css +++ b/code/src/index.css @@ -15,27 +15,56 @@ code { } +main { + max-width: 1200px; +} + /*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; - width: 25%; + 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%; - object-fit: cover; } /*ShowMovie*/ @@ -56,3 +85,27 @@ code { .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; + } +} \ No newline at end of file From d50b7e7635ac741b6b38ad6a7e12c7f35e4a70b0 Mon Sep 17 00:00:00 2001 From: Oscar Date: Sat, 1 Apr 2023 01:06:01 -0700 Subject: [PATCH 3/5] fixed layout on desktop --- code/README.md | 2 +- code/src/index.css | 1 + 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/code/README.md b/code/README.md index f963d6f2b..1e9e72839 100644 --- a/code/README.md +++ b/code/README.md @@ -1,6 +1,6 @@ # Technigo React Starter App -You can find the project on: +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. diff --git a/code/src/index.css b/code/src/index.css index 921d4e6ed..7002e4709 100644 --- a/code/src/index.css +++ b/code/src/index.css @@ -107,5 +107,6 @@ a.movie { flex-wrap: wrap; flex-direction: column; justify-content: flex-end; + width: 100%; } } \ No newline at end of file From 39b61626406b7ffb548fed247f462722ebbc636a Mon Sep 17 00:00:00 2001 From: Oscar Date: Sat, 1 Apr 2023 01:09:43 -0700 Subject: [PATCH 4/5] fixed another desktop issue --- code/src/index.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/code/src/index.css b/code/src/index.css index 7002e4709..d171429ed 100644 --- a/code/src/index.css +++ b/code/src/index.css @@ -16,7 +16,7 @@ code { } main { - max-width: 1200px; + max-width: 1440px; } /*PopularList*/ From 288afdf4c207134fd930aa092e288e34aa6bcfec Mon Sep 17 00:00:00 2001 From: Oscar Date: Sat, 1 Apr 2023 01:24:45 -0700 Subject: [PATCH 5/5] one more desktop change lol --- code/src/index.css | 32 +++++++++++++++++++++++++++----- 1 file changed, 27 insertions(+), 5 deletions(-) diff --git a/code/src/index.css b/code/src/index.css index d171429ed..100b1a592 100644 --- a/code/src/index.css +++ b/code/src/index.css @@ -15,9 +15,7 @@ code { } -main { - max-width: 1440px; -} + /*PopularList*/ .all-movies { @@ -69,9 +67,10 @@ a.movie { /*ShowMovie*/ .back-link { - position: absolute; font-size: 10px; - bottom: 48%; + right: 75%; + top: 35%; + width: 30vh; } .details-page { @@ -82,6 +81,7 @@ a.movie { font-size: 16px; } + .solo-movie-poster { width: 30vh; } @@ -109,4 +109,26 @@ a.movie { 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