diff --git a/FETCH_HEAD b/FETCH_HEAD new file mode 100644 index 000000000..291f81fdd --- /dev/null +++ b/FETCH_HEAD @@ -0,0 +1 @@ +Reading from stdin via: C:\Users\YLVAKA~1\AppData\Local\Temp\code-stdin-ZF4 diff --git a/README.md b/README.md index 4c8fd7876..cca696680 100644 --- a/README.md +++ b/README.md @@ -1,13 +1,16 @@ # Project Movies -Replace this readme with your own information about your project. +This weeks project is a pair-programming-project in collaboration with Sandra Olsson and Ylva Karlsson from Team Elephants of Technigos Web Dev Boot Camp Spring 2023. -Start by briefly describing the assignment in a sentence or two. Keep it short and to the point. +The project is to use themoviedb.org's API to fetch a list of movies, display them on a page, and then link to a movie detail page when you click on the movie cover image. ## 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 used the TMDB:s API to fetch information about the movies and build this application using React. On Monday 27th of March we started this week off with planning the project in a simple Trello-board, we've signed up for the TMDB and got access to our API-key for this project. + +Our goal for the week was to pair-programme as much as we can and in the end of the week we will edit this readme with more information. +If we had more time for this, we would add more pages and fetch more information from other endpoints in the API. And continue to improve the overall design. ## 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. +Link to Netlify: https://w8-movies-team-skenfrukt-ylva-sandra.netlify.app/ diff --git a/YlvasTestingBranch b/YlvasTestingBranch new file mode 100644 index 000000000..2eb190115 --- /dev/null +++ b/YlvasTestingBranch @@ -0,0 +1 @@ +Reading from stdin via: C:\Users\YLVAKA~1\AppData\Local\Temp\code-stdin-Cw7 diff --git a/code/package-lock.json b/code/package-lock.json index bb51e893e..5047607ca 100644 --- a/code/package-lock.json +++ b/code/package-lock.json @@ -9,14 +9,20 @@ "version": "1.0.0", "dependencies": { "@babel/eslint-parser": "^7.18.9", + "@fortawesome/fontawesome-free": "^6.4.0", + "@fortawesome/free-brands-svg-icons": "^6.4.0", + "@fortawesome/free-solid-svg-icons": "^6.4.0", + "@fortawesome/react-fontawesome": "^0.2.0", "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", + "moment": "^2.29.4", "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" @@ -2197,6 +2203,73 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/@fortawesome/fontawesome-common-types": { + "version": "6.4.0", + "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.4.0.tgz", + "integrity": "sha512-HNii132xfomg5QVZw0HwXXpN22s7VBHQBv9CeOu9tfJnhsWQNd2lmTNi8CSrnw5B+5YOmzu1UoPAyxaXsJ6RgQ==", + "hasInstallScript": true, + "engines": { + "node": ">=6" + } + }, + "node_modules/@fortawesome/fontawesome-free": { + "version": "6.4.0", + "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-free/-/fontawesome-free-6.4.0.tgz", + "integrity": "sha512-0NyytTlPJwB/BF5LtRV8rrABDbe3TdTXqNB3PdZ+UUUZAEIrdOJdmABqKjt4AXwIoJNaRVVZEXxpNrqvE1GAYQ==", + "hasInstallScript": true, + "engines": { + "node": ">=6" + } + }, + "node_modules/@fortawesome/fontawesome-svg-core": { + "version": "6.4.0", + "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.4.0.tgz", + "integrity": "sha512-Bertv8xOiVELz5raB2FlXDPKt+m94MQ3JgDfsVbrqNpLU9+UE2E18GKjLKw+d3XbeYPqg1pzyQKGsrzbw+pPaw==", + "hasInstallScript": true, + "peer": true, + "dependencies": { + "@fortawesome/fontawesome-common-types": "6.4.0" + }, + "engines": { + "node": ">=6" + } + }, + "node_modules/@fortawesome/free-brands-svg-icons": { + "version": "6.4.0", + "resolved": "https://registry.npmjs.org/@fortawesome/free-brands-svg-icons/-/free-brands-svg-icons-6.4.0.tgz", + "integrity": "sha512-qvxTCo0FQ5k2N+VCXb/PZQ+QMhqRVM4OORiO6MXdG6bKolIojGU/srQ1ptvKk0JTbRgaJOfL2qMqGvBEZG7Z6g==", + "hasInstallScript": true, + "dependencies": { + "@fortawesome/fontawesome-common-types": "6.4.0" + }, + "engines": { + "node": ">=6" + } + }, + "node_modules/@fortawesome/free-solid-svg-icons": { + "version": "6.4.0", + "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.4.0.tgz", + "integrity": "sha512-kutPeRGWm8V5dltFP1zGjQOEAzaLZj4StdQhWVZnfGFCvAPVvHh8qk5bRrU4KXnRRRNni5tKQI9PBAdI6MP8nQ==", + "hasInstallScript": true, + "dependencies": { + "@fortawesome/fontawesome-common-types": "6.4.0" + }, + "engines": { + "node": ">=6" + } + }, + "node_modules/@fortawesome/react-fontawesome": { + "version": "0.2.0", + "resolved": "https://registry.npmjs.org/@fortawesome/react-fontawesome/-/react-fontawesome-0.2.0.tgz", + "integrity": "sha512-uHg75Rb/XORTtVt7OS9WoK8uM276Ufi7gCzshVWkUJbHhh3svsUUeqXerrM96Wm7fRiDzfKRwSoahhMIkGAYHw==", + "dependencies": { + "prop-types": "^15.8.1" + }, + "peerDependencies": { + "@fortawesome/fontawesome-svg-core": "~1 || ~6", + "react": ">=16.3" + } + }, "node_modules/@humanwhocodes/config-array": { "version": "0.10.4", "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.10.4.tgz", @@ -3124,6 +3197,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", @@ -12008,6 +12089,14 @@ "mkdirp": "bin/cmd.js" } }, + "node_modules/moment": { + "version": "2.29.4", + "resolved": "https://registry.npmjs.org/moment/-/moment-2.29.4.tgz", + "integrity": "sha512-5LC9SOxjSc2HF6vO2CyuTDNivEdoz2IvyJJGj6X8DJ0eFyfszE0QiEd+iXmBvUP3WHxSjFH/vIsA0EN00cgr8w==", + "engines": { + "node": "*" + } + }, "node_modules/ms": { "version": "2.1.2", "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz", @@ -14384,6 +14473,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", @@ -18823,6 +18942,49 @@ } } }, + "@fortawesome/fontawesome-common-types": { + "version": "6.4.0", + "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.4.0.tgz", + "integrity": "sha512-HNii132xfomg5QVZw0HwXXpN22s7VBHQBv9CeOu9tfJnhsWQNd2lmTNi8CSrnw5B+5YOmzu1UoPAyxaXsJ6RgQ==" + }, + "@fortawesome/fontawesome-free": { + "version": "6.4.0", + "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-free/-/fontawesome-free-6.4.0.tgz", + "integrity": "sha512-0NyytTlPJwB/BF5LtRV8rrABDbe3TdTXqNB3PdZ+UUUZAEIrdOJdmABqKjt4AXwIoJNaRVVZEXxpNrqvE1GAYQ==" + }, + "@fortawesome/fontawesome-svg-core": { + "version": "6.4.0", + "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.4.0.tgz", + "integrity": "sha512-Bertv8xOiVELz5raB2FlXDPKt+m94MQ3JgDfsVbrqNpLU9+UE2E18GKjLKw+d3XbeYPqg1pzyQKGsrzbw+pPaw==", + "peer": true, + "requires": { + "@fortawesome/fontawesome-common-types": "6.4.0" + } + }, + "@fortawesome/free-brands-svg-icons": { + "version": "6.4.0", + "resolved": "https://registry.npmjs.org/@fortawesome/free-brands-svg-icons/-/free-brands-svg-icons-6.4.0.tgz", + "integrity": "sha512-qvxTCo0FQ5k2N+VCXb/PZQ+QMhqRVM4OORiO6MXdG6bKolIojGU/srQ1ptvKk0JTbRgaJOfL2qMqGvBEZG7Z6g==", + "requires": { + "@fortawesome/fontawesome-common-types": "6.4.0" + } + }, + "@fortawesome/free-solid-svg-icons": { + "version": "6.4.0", + "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.4.0.tgz", + "integrity": "sha512-kutPeRGWm8V5dltFP1zGjQOEAzaLZj4StdQhWVZnfGFCvAPVvHh8qk5bRrU4KXnRRRNni5tKQI9PBAdI6MP8nQ==", + "requires": { + "@fortawesome/fontawesome-common-types": "6.4.0" + } + }, + "@fortawesome/react-fontawesome": { + "version": "0.2.0", + "resolved": "https://registry.npmjs.org/@fortawesome/react-fontawesome/-/react-fontawesome-0.2.0.tgz", + "integrity": "sha512-uHg75Rb/XORTtVt7OS9WoK8uM276Ufi7gCzshVWkUJbHhh3svsUUeqXerrM96Wm7fRiDzfKRwSoahhMIkGAYHw==", + "requires": { + "prop-types": "^15.8.1" + } + }, "@humanwhocodes/config-array": { "version": "0.10.4", "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.10.4.tgz", @@ -19509,6 +19671,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", @@ -26117,6 +26284,11 @@ "minimist": "^1.2.6" } }, + "moment": { + "version": "2.29.4", + "resolved": "https://registry.npmjs.org/moment/-/moment-2.29.4.tgz", + "integrity": "sha512-5LC9SOxjSc2HF6vO2CyuTDNivEdoz2IvyJJGj6X8DJ0eFyfszE0QiEd+iXmBvUP3WHxSjFH/vIsA0EN00cgr8w==" + }, "ms": { "version": "2.1.2", "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz", @@ -27684,6 +27856,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..55108c3ef 100644 --- a/code/package.json +++ b/code/package.json @@ -4,14 +4,20 @@ "private": true, "dependencies": { "@babel/eslint-parser": "^7.18.9", + "@fortawesome/fontawesome-free": "^6.4.0", + "@fortawesome/free-brands-svg-icons": "^6.4.0", + "@fortawesome/free-solid-svg-icons": "^6.4.0", + "@fortawesome/react-fontawesome": "^0.2.0", "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", + "moment": "^2.29.4", "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/public/images/back_arrow.svg b/code/public/images/back_arrow.svg new file mode 100644 index 000000000..2ab3f2577 --- /dev/null +++ b/code/public/images/back_arrow.svg @@ -0,0 +1,3 @@ + + + diff --git a/code/public/index.html b/code/public/index.html index e6730aa66..264ae5cb3 100644 --- a/code/public/index.html +++ b/code/public/index.html @@ -4,19 +4,14 @@ - - Technigo React App - + Movie Releases by Sandra & Ylva - W8 Technigo Boot Camp + + + + +
- diff --git a/code/public/movie-projector.png b/code/public/movie-projector.png new file mode 100644 index 000000000..c1c781746 Binary files /dev/null and b/code/public/movie-projector.png differ diff --git a/code/src/App.js b/code/src/App.js index f2007d229..53558ea5f 100644 --- a/code/src/App.js +++ b/code/src/App.js @@ -1,9 +1,32 @@ -import React from 'react'; +/* eslint-disable no-trailing-spaces */ +import React, { useState, useEffect } from 'react'; +import { BrowserRouter, Route, Routes } from 'react-router-dom'; +import MovieList from 'components/MovieList'; +// import NotFound from 'components/NotFound'; +// We never used this but we keep it for future usage if necessary +import MovieDetails from 'components/MovieDetails'; +import { BASE_URL } from 'utils/urls'; export const App = () => { + const [movieList, setMovieList] = useState([]); + + useEffect(() => { + fetch(BASE_URL) + .then((data) => data.json()) + .then((configuredData) => setMovieList(configuredData.results)) + .catch((err) => { + console.log(err); + }); + }, []); return ( -
- Find me in src/app.js! -
+ + + } /> + } /> + {/* } /> + } /> I removed Navigate from the + import at the top since I commented this out */} + + ); -} +} \ No newline at end of file diff --git a/code/src/components/Footer.js b/code/src/components/Footer.js new file mode 100644 index 000000000..a18aded73 --- /dev/null +++ b/code/src/components/Footer.js @@ -0,0 +1,40 @@ +import React from 'react'; +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; +import { faGithub, faLinkedin } from '@fortawesome/free-brands-svg-icons'; +import { faEnvelope } from '@fortawesome/free-solid-svg-icons'; + +const Footer = () => { + return ( + + ) +} + +export default Footer; \ No newline at end of file diff --git a/code/src/components/Header.js b/code/src/components/Header.js new file mode 100644 index 000000000..0ca8d89a1 --- /dev/null +++ b/code/src/components/Header.js @@ -0,0 +1,11 @@ +import React from 'react'; + +const Header = () => { + return ( +
+

Movie releases

+
+ ) +} + +export default Header; \ No newline at end of file diff --git a/code/src/components/MovieDetails.js b/code/src/components/MovieDetails.js new file mode 100644 index 000000000..dc7c61cf9 --- /dev/null +++ b/code/src/components/MovieDetails.js @@ -0,0 +1,60 @@ +/* eslint-disable max-len */ +/* eslint-disable no-trailing-spaces */ +import React, { useEffect, useState } from 'react'; +import { useNavigate, useParams } from 'react-router-dom'; +// import { MOVIE_DETAILS } from 'utils/urls'; - keeping this for knowledge (if someone else solved it as a shortcut) + +const MovieDetails = () => { + const navigate = useNavigate() + const { id } = useParams() + const [details, setDetails] = useState({}) + + const onBackButtonClick = (e) => { + e.preventDefault(); + navigate(-1) + } + // const notFoundButtonClick = () => { + // navigate('/404') + // } + + // when replacing the MOVIE_DETAILS in the fetch with the actual link, it finally worked + useEffect(() => { + fetch(`https://api.themoviedb.org/3/movie/${id}?api_key=ef419ef4eccfeb47458eaa6d860708b3&language=en-US`) + .then((data) => data.json()) + .then((configuredData) => setDetails(configuredData)) + }, [id]); + + return ( +
+ + + + + + + movie-poster +
+
+

{details.title}

+

⭐️{Math.round(details.vote_average * 10) / 10}/10

+
+

{details.overview}

+
+
+ ) +} + +export default MovieDetails; \ No newline at end of file diff --git a/code/src/components/MovieList.js b/code/src/components/MovieList.js new file mode 100644 index 000000000..7ab570b1f --- /dev/null +++ b/code/src/components/MovieList.js @@ -0,0 +1,36 @@ +/* eslint-disable max-len */ +import React from 'react'; +import { Link } from 'react-router-dom'; +import Header from 'components/Header'; +import Footer from './Footer'; + +const MovieList = ({ movieList }) => { + return ( + <> +
+
+ {movieList.map((movie) => { + return ( +
+ +
+ movie-poster +
+

{movie.title}

+

Release date: {movie.release_date}

+
+ +
+ ) + })} +
+