diff --git a/package-lock.json b/package-lock.json index c3232dd..8fd7410 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11,10 +11,16 @@ "@testing-library/jest-dom": "^5.16.5", "@testing-library/react": "^13.4.0", "@testing-library/user-event": "^13.5.0", + "axios": "^1.3.4", "react": "^18.2.0", "react-dom": "^18.2.0", + "react-loader-spinner": "^5.3.4", + "react-router-dom": "^6.8.2", "react-scripts": "5.0.1", "web-vitals": "^2.1.4" + }, + "devDependencies": { + "tailwindcss": "^3.2.7" } }, "node_modules/@adobe/css-tools": { @@ -2130,6 +2136,29 @@ "postcss-selector-parser": "^6.0.10" } }, + "node_modules/@emotion/is-prop-valid": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.2.0.tgz", + "integrity": "sha512-3aDpDprjM0AwaxGE09bOPkNxHpBd+kA6jty3RnaEXdweX1DF1U3VQpPYb0g1IStAuK7SVQ1cy+bNBBKp4W3Fjg==", + "dependencies": { + "@emotion/memoize": "^0.8.0" + } + }, + "node_modules/@emotion/memoize": { + "version": "0.8.0", + "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.8.0.tgz", + "integrity": "sha512-G/YwXTkv7Den9mXDO7AhLWkE3q+I92B+VqAE+dYG4NGPaHZGvt3G8Q0p9vmE+sq7rTGphUbAvmQ9YpbfMQGGlA==" + }, + "node_modules/@emotion/stylis": { + "version": "0.8.5", + "resolved": "https://registry.npmjs.org/@emotion/stylis/-/stylis-0.8.5.tgz", + "integrity": "sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ==" + }, + "node_modules/@emotion/unitless": { + "version": "0.7.5", + "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.7.5.tgz", + "integrity": "sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg==" + }, "node_modules/@eslint/eslintrc": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-2.0.0.tgz", @@ -3091,6 +3120,14 @@ } } }, + "node_modules/@remix-run/router": { + "version": "1.3.3", + "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.3.3.tgz", + "integrity": "sha512-YRHie1yQEj0kqqCTCJEfHqYSSNlZQ696QJG+MMiW4mxSl9I0ojz/eRhJS4fs88Z5i6D1SmoF9d3K99/QOhI8/w==", + "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", @@ -5056,6 +5093,29 @@ "node": ">=4" } }, + "node_modules/axios": { + "version": "1.3.4", + "resolved": "https://registry.npmjs.org/axios/-/axios-1.3.4.tgz", + "integrity": "sha512-toYm+Bsyl6VC5wSkfkbbNB6ROv7KY93PEBBL6xyDczaIHasAiv4wPqQ/c4RjoQzipxRD2W5g21cOqQulZ7rHwQ==", + "dependencies": { + "follow-redirects": "^1.15.0", + "form-data": "^4.0.0", + "proxy-from-env": "^1.1.0" + } + }, + "node_modules/axios/node_modules/form-data": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz", + "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==", + "dependencies": { + "asynckit": "^0.4.0", + "combined-stream": "^1.0.8", + "mime-types": "^2.1.12" + }, + "engines": { + "node": ">= 6" + } + }, "node_modules/axobject-query": { "version": "3.1.1", "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-3.1.1.tgz", @@ -5279,6 +5339,26 @@ "@babel/core": "^7.0.0-0" } }, + "node_modules/babel-plugin-styled-components": { + "version": "2.0.7", + "resolved": "https://registry.npmjs.org/babel-plugin-styled-components/-/babel-plugin-styled-components-2.0.7.tgz", + "integrity": "sha512-i7YhvPgVqRKfoQ66toiZ06jPNA3p6ierpfUuEWxNF+fV27Uv5gxBkf8KZLHUCc1nFA9j6+80pYoIpqCeyW3/bA==", + "dependencies": { + "@babel/helper-annotate-as-pure": "^7.16.0", + "@babel/helper-module-imports": "^7.16.0", + "babel-plugin-syntax-jsx": "^6.18.0", + "lodash": "^4.17.11", + "picomatch": "^2.3.0" + }, + "peerDependencies": { + "styled-components": ">= 2" + } + }, + "node_modules/babel-plugin-syntax-jsx": { + "version": "6.18.0", + "resolved": "https://registry.npmjs.org/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz", + "integrity": "sha512-qrPaCSo9c8RHNRHIotaufGbuOBN8rtdC4QrrFFc43vyWCCz7Kl7GL1PGaXtMGQZUXrkCjNEgxDfmAuAabr/rlw==" + }, "node_modules/babel-plugin-transform-react-remove-prop-types": { "version": "0.4.24", "resolved": "https://registry.npmjs.org/babel-plugin-transform-react-remove-prop-types/-/babel-plugin-transform-react-remove-prop-types-0.4.24.tgz", @@ -5592,6 +5672,14 @@ "node": ">= 6" } }, + "node_modules/camelize": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/camelize/-/camelize-1.0.1.tgz", + "integrity": "sha512-dU+Tx2fsypxTgtLoE36npi3UqcjSSMNYfkqgmoEhtZrraP5VWq0K7FkWVTYa8eMPtnU/G2txVsfdCJTn9uzpuQ==", + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, "node_modules/caniuse-api": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/caniuse-api/-/caniuse-api-3.0.0.tgz", @@ -6023,6 +6111,14 @@ "postcss": "^8.4" } }, + "node_modules/css-color-keywords": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/css-color-keywords/-/css-color-keywords-1.0.0.tgz", + "integrity": "sha512-FyyrDHZKEjXDpNJYvVsV960FiqQyXc/LlYmsxl2BcdMb2WPx0OGRVgTg55rPSyLSNMqP52R9r8geSp7apN3Ofg==", + "engines": { + "node": ">=4" + } + }, "node_modules/css-declaration-sorter": { "version": "6.3.1", "resolved": "https://registry.npmjs.org/css-declaration-sorter/-/css-declaration-sorter-6.3.1.tgz", @@ -6204,6 +6300,16 @@ "resolved": "https://registry.npmjs.org/css-select-base-adapter/-/css-select-base-adapter-0.1.1.tgz", "integrity": "sha512-jQVeeRG70QI08vSTwf1jHxp74JoZsr2XSgETae8/xC8ovSnL2WF87GTLO86Sbwdt2lK4Umg4HnnwMO4YF3Ce7w==" }, + "node_modules/css-to-react-native": { + "version": "3.2.0", + "resolved": "https://registry.npmjs.org/css-to-react-native/-/css-to-react-native-3.2.0.tgz", + "integrity": "sha512-e8RKaLXMOFii+02mOlqwjbD00KSEKqblnpO9e++1aXS1fPQOpS1YoqdVHBqPjHNoxeF2mimzVqawm2KCbEdtHQ==", + "dependencies": { + "camelize": "^1.0.0", + "css-color-keywords": "^1.0.0", + "postcss-value-parser": "^4.0.2" + } + }, "node_modules/css-tree": { "version": "1.0.0-alpha.37", "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.0.0-alpha.37.tgz", @@ -8699,6 +8805,19 @@ "he": "bin/he" } }, + "node_modules/hoist-non-react-statics": { + "version": "3.3.2", + "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz", + "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==", + "dependencies": { + "react-is": "^16.7.0" + } + }, + "node_modules/hoist-non-react-statics/node_modules/react-is": { + "version": "16.13.1", + "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", + "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" + }, "node_modules/hoopy": { "version": "0.1.4", "resolved": "https://registry.npmjs.org/hoopy/-/hoopy-0.1.4.tgz", @@ -14029,6 +14148,11 @@ "node": ">= 0.10" } }, + "node_modules/proxy-from-env": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz", + "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==" + }, "node_modules/psl": { "version": "1.9.0", "resolved": "https://registry.npmjs.org/psl/-/psl-1.9.0.tgz", @@ -14323,6 +14447,25 @@ "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz", "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==" }, + "node_modules/react-loader-spinner": { + "version": "5.3.4", + "resolved": "https://registry.npmjs.org/react-loader-spinner/-/react-loader-spinner-5.3.4.tgz", + "integrity": "sha512-G2vw4ssX+RDZ/vfaeva06yfNqyFViv/u+tVZ3kFLy5TKNlNx2DbuwreBSpRtPespQA+VxinxUJsigwLwG9erOg==", + "dependencies": { + "react-is": "^18.2.0", + "styled-components": "^5.3.5", + "styled-tools": "^1.7.2" + }, + "peerDependencies": { + "react": "^16.0.0 || ^17.0.0 || ^18.0.0", + "react-dom": "^16.0.0 || ^17.0.0 || ^18.0.0" + } + }, + "node_modules/react-loader-spinner/node_modules/react-is": { + "version": "18.2.0", + "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz", + "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==" + }, "node_modules/react-refresh": { "version": "0.11.0", "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz", @@ -14331,6 +14474,36 @@ "node": ">=0.10.0" } }, + "node_modules/react-router": { + "version": "6.8.2", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.8.2.tgz", + "integrity": "sha512-lF7S0UmXI5Pd8bmHvMdPKI4u4S5McxmHnzJhrYi9ZQ6wE+DA8JN5BzVC5EEBuduWWDaiJ8u6YhVOCmThBli+rw==", + "dependencies": { + "@remix-run/router": "1.3.3" + }, + "engines": { + "node": ">=14" + }, + "peerDependencies": { + "react": ">=16.8" + } + }, + "node_modules/react-router-dom": { + "version": "6.8.2", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.8.2.tgz", + "integrity": "sha512-N/oAF1Shd7g4tWy+75IIufCGsHBqT74tnzHQhbiUTYILYF0Blk65cg+HPZqwC+6SqEyx033nKqU7by38v3lBZg==", + "dependencies": { + "@remix-run/router": "1.3.3", + "react-router": "6.8.2" + }, + "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", @@ -15120,6 +15293,11 @@ "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.2.0.tgz", "integrity": "sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw==" }, + "node_modules/shallowequal": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/shallowequal/-/shallowequal-1.1.0.tgz", + "integrity": "sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ==" + }, "node_modules/shebang-command": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz", @@ -15506,6 +15684,40 @@ "webpack": "^5.0.0" } }, + "node_modules/styled-components": { + "version": "5.3.8", + "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-5.3.8.tgz", + "integrity": "sha512-6jQrlvaJQ16uWVVO0rBfApaTPItkqaG32l3746enNZzpMDxMvzmHzj8rHUg39bvVtom0Y8o8ZzWuchEXKGjVsg==", + "dependencies": { + "@babel/helper-module-imports": "^7.0.0", + "@babel/traverse": "^7.4.5", + "@emotion/is-prop-valid": "^1.1.0", + "@emotion/stylis": "^0.8.4", + "@emotion/unitless": "^0.7.4", + "babel-plugin-styled-components": ">= 1.12.0", + "css-to-react-native": "^3.0.0", + "hoist-non-react-statics": "^3.0.0", + "shallowequal": "^1.1.0", + "supports-color": "^5.5.0" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/styled-components" + }, + "peerDependencies": { + "react": ">= 16.8.0", + "react-dom": ">= 16.8.0", + "react-is": ">= 16.8.0" + } + }, + "node_modules/styled-tools": { + "version": "1.7.2", + "resolved": "https://registry.npmjs.org/styled-tools/-/styled-tools-1.7.2.tgz", + "integrity": "sha512-IjLxzM20RMwAsx8M1QoRlCG/Kmq8lKzCGyospjtSXt/BTIIcvgTonaxQAsKnBrsZNwhpHzO9ADx5te0h76ILVg==" + }, "node_modules/stylehacks": { "version": "5.1.1", "resolved": "https://registry.npmjs.org/stylehacks/-/stylehacks-5.1.1.tgz", diff --git a/package.json b/package.json index aeed9ad..800a92e 100644 --- a/package.json +++ b/package.json @@ -6,8 +6,11 @@ "@testing-library/jest-dom": "^5.16.5", "@testing-library/react": "^13.4.0", "@testing-library/user-event": "^13.5.0", + "axios": "^1.3.4", "react": "^18.2.0", "react-dom": "^18.2.0", + "react-loader-spinner": "^5.3.4", + "react-router-dom": "^6.8.2", "react-scripts": "5.0.1", "web-vitals": "^2.1.4" }, @@ -34,5 +37,8 @@ "last 1 firefox version", "last 1 safari version" ] + }, + "devDependencies": { + "tailwindcss": "^3.2.7" } } diff --git a/src/App.js b/src/App.js index 3784575..78f87d6 100644 --- a/src/App.js +++ b/src/App.js @@ -1,24 +1,46 @@ import logo from './logo.svg'; import './App.css'; - +import NavBar from './components/NavBar'; +import Banner from './components/Banner'; +import Movies from './components/Movies'; +import Pagination from './components/Pagination'; +import {BrowserRouter,Routes,Route} from "react-router-dom" +import Favourites from './components/Favourites'; +import Pagenotfound from './components/Pagenotfound'; function App() { return ( -
-
- logo -

- Edit src/App.js and save to reload. -

- - Learn React - -
-
+ <> + + {/*

Hello react

*/} + + + + + + + + + } > + + + } > + + + + } > + + + + + + + + + + ); } diff --git a/src/components/Banner.css b/src/components/Banner.css new file mode 100644 index 0000000..b658aca --- /dev/null +++ b/src/components/Banner.css @@ -0,0 +1,6 @@ +.banner-head{ + position: relative; + /* left:20rem; */ + bottom:7rem; + /* height:10rem; */ +} \ No newline at end of file diff --git a/src/components/Banner.jsx b/src/components/Banner.jsx new file mode 100644 index 0000000..d4d8938 --- /dev/null +++ b/src/components/Banner.jsx @@ -0,0 +1,55 @@ +import React, { useEffect, useState } from 'react' +import axios from "axios"; +import { Oval } from "react-loader-spinner"; +function Banner() { + let [bannerMovie, setBanner] = useState(""); + + useEffect(function () { + (function () { + axios + .get + ("https://api.themoviedb.org/3/trending/all/week?api_key=565dda78aae2b75fafddbc4320a33b38") + .then((res) => { + console.table(res.data.results); + setBanner(res.data.results[0]); + }) + })() + }, []) + return ( + <> + { + bannerMovie == "" ? +
+ : +
+
{bannerMovie.name||bannerMovie.title}
+
+ } + + + + ) +} + +export default Banner; \ No newline at end of file diff --git a/src/components/Favourites.jsx b/src/components/Favourites.jsx new file mode 100644 index 0000000..33e6435 --- /dev/null +++ b/src/components/Favourites.jsx @@ -0,0 +1,210 @@ +import React, { useEffect,useState } from 'react'; +import Pagination from "./Pagination"; + + +function Favourites() { + let [genres, setGenres] = useState([]); + let genreids = { + 28: 'Action', + 12: 'Adventure', + 16: 'Animation', 35: 'Comedy', + 80: 'Crime', 99: 'Documentary', + 18: 'Drama', 10751: 'Family', + 14: 'Fantasy', 36: 'History', + 27: 'Horror', + 10402: 'Music', 9648: 'Mystery', 10749: 'Romance', 878: 'Sci-Fi', 10770: 'TV', 53: 'Thriller', + 10752: 'War', + 37: 'Western' + } + let movies = [ + { + "adult": false, + "backdrop_path": "/ogFIG0fNXEYRQKrpnoRJcXQNX9n.jpg", + "id": 619930, + "title": "Narvik", + "original_language": "no", + "original_title": "Kampen om Narvik", + "overview": "April, 1940. The eyes of the world are on Narvik, a small town in northern Norway, a source of the iron ore needed for Hitler's war machine. Through two months of fierce winter warfare, the German leader is dealt with his first defeat.", + "poster_path": "/gU4mmINWUF294Wzi8mqRvi6peMe.jpg", + "media_type": "movie", + "genre_ids": [ + 10752, + 18, + 36, + 28 + ], + "popularity": 321.063, + "release_date": "2022-12-25", + "video": true, + "vote_average": 7.406, + "vote_count": 53 + }, + { + "adult": false, + "backdrop_path": "/6RCf9jzKxyjblYV4CseayK6bcJo.jpg", + "id": 804095, + "title": "The Fabelmans", + "original_language": "en", + "original_title": "The Fabelmans", + "overview": "Growing up in post-World War II era Arizona, young Sammy Fabelman aspires to become a filmmaker as he reaches adolescence, but soon discovers a shattering family secret and explores how the power of films can help him see the truth.", + "poster_path": "/d2IywyOPS78vEnJvwVqkVRTiNC1.jpg", + "media_type": "movie", + "genre_ids": [ + 18 + ], + "popularity": 163.3, + "release_date": "2022-11-11", + "video": false, + "vote_average": 8.02, + "vote_count": 561 + }, + { + "adult": false, + "backdrop_path": "/fTLMsF3IVLMcpNqIqJRweGvVwtX.jpg", + "id": 1035806, + "title": "Detective Knight: Independence", + "original_language": "en", + "original_title": "Detective Knight: Independence", + "overview": "Detective James Knight 's last-minute assignment to the Independence Day shift turns into a race to stop an unbalanced ambulance EMT from imperiling the city's festivities. The misguided vigilante, playing cop with a stolen gun and uniform, has a bank vault full of reasons to put on his own fireworks show... one that will strike dangerously close to Knight's home.", + "poster_path": "/jrPKVQGjc3YZXm07OYMriIB47HM.jpg", + "media_type": "movie", + "genre_ids": [ + 28, + 53, + 80 + ], + "popularity": 119.407, + "release_date": "2023-01-20", + "video": false, + "vote_average": 6.6, + "vote_count": 10 + }, + { + "adult": false, + "backdrop_path": "/e782pDRAlu4BG0ahd777n8zfPzZ.jpg", + "id": 555604, + "title": "Guillermo del Toro's Pinocchio", + "original_language": "en", + "original_title": "Guillermo del Toro's Pinocchio", + "overview": "During the rise of fascism in Mussolini's Italy, a wooden boy brought magically to life struggles to live up to his father's expectations.", + "poster_path": "/vx1u0uwxdlhV2MUzj4VlcMB0N6m.jpg", + "media_type": "movie", + "genre_ids": [ + 16, + 14, + 18 + ], + "popularity": 754.642, + "release_date": "2022-11-18", + "video": false, + "vote_average": 8.354, + "vote_count": 1694 + } + ] + + useEffect(() => { + let temp = movies.map((movie) => genreids[movie.genre_ids[0]]) + // console.log(temp) + temp = new Set(temp) + setGenres(["All Genres", ...temp]); + }, []) + + + + + return ( + <> +
+ + {genres.map((genre => { + return ( + + ) + }))} + +
+
+ + +
+
+ + + + + + + + + + + + {movies.map((movie) => { + { console.log(movie) }; + return + + + + + + + })} + + + + + +
Name +
+ +
Rating
+ +
+ + 		+
+ +
Popularity
+ +
+ 		GenreRemove
+ +
{movie.title || movie.name}
+ + 		+ {movie.vote_average.toFixed(2)} + {movie.popularity.toFixed(2)} +
+ + {genreids[movie.genre_ids[0]]} + + +
+ 		+ + Delete + +
+
+ + + ) +} + +export default Favourites; \ No newline at end of file diff --git a/src/components/Movies.jsx b/src/components/Movies.jsx new file mode 100644 index 0000000..d333156 --- /dev/null +++ b/src/components/Movies.jsx @@ -0,0 +1,318 @@ +import React, { useEffect, useState } from 'react'; +// import Image from "./image.jpg"; +import axios from "axios"; +import Pagination from './Pagination'; +import { Oval } from "react-loader-spinner"; + +function Movies() { + + // axios.get("https://api.themoviedb.org/3/trending/all/week?api_key=57809852304910d4194f33adc8e13c5b").then((res) => { + // console.table(res.data); + // }) + + // emoji show and hide + let [movies, setMovies] = useState([]); + let [pageNum,setPage] = useState(1); + let [hovered,sethovered] =useState(""); + let [favourites,setFavourites] = useState([]); + + + // making api request + useEffect(function () { + console.log("useEffect again"); + (function () { + axios + .get + ("https://api.themoviedb.org/3/trending/all/week?api_key=565dda78aae2b75fafddbc4320a33b38&page="+pageNum) + .then((res) => { + // console.table(res.data.results); + setMovies(res.data.results); + }) + })() + },[pageNum]) + + + //pagination handelers + + const onPrev = () => { + if(pageNum > 1 ){ + setPage(pageNum-1); + } + } + const onNext = () => { + setPage(pageNum+1); +} + +const showEmoji = (id) =>{ + sethovered(id); +} +const hideEmoji = () =>{ + sethovered(); +} + +const addEmoji = (id) => { + const newFav = [...favourites,id]; + setFavourites(newFav); +} +const removeEmoji =(id) => { + const filteredFav = favourites.filter(elem =>{ + return elem != id ; + }) + setFavourites(filteredFav); +} + + + return ( +
+
Trending Movies
+
+ + + { + movies.length === 0 ? : + movies.map((movie) => { + //console.log(movie); + return
{showEmoji(movie.id)} + } + onMouseLeave={ + () => {hideEmoji(movie.id)} + } + key = {movie.id} + className= "bg-center bg-cover w-[160px] h-[30vh] md:h-[40vh] md:w-[180px] m-4 rounded-xl hover:scale-110 duration-300 border-4 flex items-end" + style={{ + backgroundImage: + `url( + https://image.tmdb.org/t/p/original/t/p/w500/${movie.poster_path})` + }} + > + +
+ + {favourites.includes(movie.id) == false ?
{addEmoji(movie.id)}} + > + 😍 +
:
{removeEmoji(movie.id)}} + > + ❌ +
+ } + + + +
+ + + +
+ {movie.title|| movie.name} +
+
+ }) + + } +
+ + +
+ ) +} + +export default Movies + + + + + + + + + + + + + + + + +// import React, { useEffect, useState } from 'react'; +// // import Image from "./image.jpg"; +// import axios from "axios"; +// import Pagination from './Pagination'; +// import { Oval } from "react-loader-spinner"; +// function Movies() { +// let [movies, setMovies] = useState([]); +// let [pageNum, setPage] = useState(1); +// let [hovered, setHovered] = useState(""); +// let [favourites, setFavorites] = useState([]); +// /* making api request */ +// useEffect(function () { +// console.log("useEffect again"); +// (function () { +// axios +// .get +// ("https://api.themoviedb.org/3/trending/all/week?api_key=565dda78aae2b75fafddbc4320a33b38&page=" + pageNum) +// .then((res) => { +// // console.table(res.data.results); +// setMovies(res.data.results); +// }) +// })() +// }, [pageNum]) +// /* Pagination handlers*/ +// const onPrev = () => { +// if (pageNum > 1) { +// setPage(pageNum - 1); +// } +// } +// const onNext = () => { +// setPage(pageNum + 1); + +// } +// /*emoji show and hide on hover*/ +// const showEmoji = (id) => { +// setHovered(id); +// } +// const hideEmoji = () => { +// setHovered(""); +// } +// /*adding / removeing emojis to fav*/ + +// const addEmoji = (id) => { +// const newFav = [...favourites, id]; +// setFavorites(newFav); +// } +// const removeEmoji = (id) => { +// // whichever elem -> not equal to my id +// const filteredFav = favourites.filter(elem => { +// return elem != id; +// }) +// setFavorites(filteredFav); +// } + + +// return ( +//
+//
Trending Movies
+//
+// { +// movies.length == 0 ? : movies.map((movie) => { + +// return
{ showEmoji(movie.id) } +// } +// onMouseLeave={ +// () => { hideEmoji(movie.id) } +// } + +// key={movie.id} +// className=" +// bg-center bg-cover +// w-[160px] +// h-[30vh] +// md: h-[40vh] +// md:w-[180px] +// m-4 +// rounded-xl +// hover:scale-110 +// duration-300 +// flex items-end +// relative +// " +// style={{ +// backgroundImage: +// `url( +// https://image.tmdb.org/t/p/original/t/p/w500/${movie.poster_path})` +// }} +// > +//
+// {favourites.includes(movie.id) == false ?
{ addEmoji(movie.id) }} +// > +// 😍 +//
:
{ removeEmoji(movie.id) }} + +// > +// ❌ +//
+ +// } + +//
+//
{movie.title || movie.name}
+//
+// }) +// } +//
+// +//
+// ) +// } + +// export default Movies; diff --git a/src/components/NavBar.jsx b/src/components/NavBar.jsx new file mode 100644 index 0000000..bfc22d8 --- /dev/null +++ b/src/components/NavBar.jsx @@ -0,0 +1,23 @@ +import React from 'react' +import Logo from "../download.png"; +import {Link} from "react-router-dom"; +function NavBar() { + return ( +
+ + Movies + Favourites +
+ + ) +} + +export default NavBar diff --git a/src/components/Pagenotfound.jsx b/src/components/Pagenotfound.jsx new file mode 100644 index 0000000..665ba26 --- /dev/null +++ b/src/components/Pagenotfound.jsx @@ -0,0 +1,11 @@ +import React from 'react' + +function Pagenotfound() { + return ( +
+ You have entered a wrong page. +
+ ) +} + +export default Pagenotfound; diff --git a/src/components/Pagination.jsx b/src/components/Pagination.jsx new file mode 100644 index 0000000..f701657 --- /dev/null +++ b/src/components/Pagination.jsx @@ -0,0 +1,26 @@ +import React,{useState} from 'react' + + +function Pagination(props) { + + let {pageNum,onPrev,onNext} = props; + + + return ( +
+
Previous
+
{pageNum}
+
Next
+
+ ) +} + +export default Pagination diff --git a/src/components/image.jpg b/src/components/image.jpg new file mode 100644 index 0000000..7fb1b99 Binary files /dev/null and b/src/components/image.jpg differ diff --git a/src/download.png b/src/download.png new file mode 100644 index 0000000..97310d1 Binary files /dev/null and b/src/download.png differ diff --git a/src/index.css b/src/index.css index ec2585e..651ed53 100644 --- a/src/index.css +++ b/src/index.css @@ -1,3 +1,6 @@ +@tailwind base; +@tailwind components; +@tailwind utilities; body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', diff --git a/tailwind.config.js b/tailwind.config.js new file mode 100644 index 0000000..2f2484d --- /dev/null +++ b/tailwind.config.js @@ -0,0 +1,12 @@ +/** @type {import('tailwindcss').Config} */ +module.exports = { + content: ["./src/**/*.{js,jsx,ts,tsx}"], + theme: { + extend: { + backgroundImage:{ + "banner":"url(./components/image.jpg)" + } + }, + }, + plugins: [], +}