From 0439122f56fcfdc056a0e0c1bc66d9bd2c550b07 Mon Sep 17 00:00:00 2001 From: viktar_hushchyn Date: Sun, 27 Nov 2022 22:18:40 +0300 Subject: [PATCH] feat: task6 (Redux) --- package-lock.json | 104 ++++++++++++--- package.json | 4 +- src/Components/MovieCard/movieCard.tsx | 16 +-- src/Components/MovieDetail/movieDetail.tsx | 2 +- src/Components/Navigation/navigation.tsx | 22 +++- src/Components/Search/search.tsx | 22 +++- src/Components/Sorting/sorting.tsx | 17 ++- src/Containers/App/app.module.scss | 2 +- src/Containers/App/app.tsx | 23 ++-- src/Containers/MovieList/movieList.tsx | 143 +++++---------------- src/Containers/MovieList/movieListSlice.ts | 71 ++++++++++ src/Contexts/appContext.tsx | 2 +- src/Hooks/useAppDispatch.ts | 6 + src/Hooks/useAppSelector.ts | 7 + src/Models/index.ts | 14 ++ src/Store/store.ts | 14 ++ src/Utils/client.ts | 48 +++++++ tsconfig.json | 8 +- 18 files changed, 360 insertions(+), 165 deletions(-) create mode 100644 src/Containers/MovieList/movieListSlice.ts create mode 100644 src/Hooks/useAppDispatch.ts create mode 100644 src/Hooks/useAppSelector.ts create mode 100644 src/Models/index.ts create mode 100644 src/Store/store.ts create mode 100644 src/Utils/client.ts diff --git a/package-lock.json b/package-lock.json index b9a3bec..609045b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,7 +8,6 @@ "version": "7.19.4", "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.19.4.tgz", "integrity": "sha512-EXpLCrk55f+cYqmHsSR+yD/0gAIMxxA9QK9lnQWzhMCvt+YmoBN7Zx94s++Kv0+unHk39vxNO8t+CMA2WSS3wA==", - "dev": true, "requires": { "regenerator-runtime": "^0.13.4" }, @@ -16,8 +15,7 @@ "regenerator-runtime": { "version": "0.13.10", "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.10.tgz", - "integrity": "sha512-KepLsg4dU12hryUO7bp/axHAKvwGOCV0sGloQtpagJ12ai+ojVDqkeGSiRX1zlq+kjIMZ1t7gpze+26QqtdGqw==", - "dev": true + "integrity": "sha512-KepLsg4dU12hryUO7bp/axHAKvwGOCV0sGloQtpagJ12ai+ojVDqkeGSiRX1zlq+kjIMZ1t7gpze+26QqtdGqw==" } } }, @@ -209,6 +207,17 @@ "fastq": "^1.6.0" } }, + "@reduxjs/toolkit": { + "version": "1.9.0", + "resolved": "https://registry.npmjs.org/@reduxjs/toolkit/-/toolkit-1.9.0.tgz", + "integrity": "sha512-ak11IrjYcUXRqlhNPwnz6AcvA2ynJTu8PzDbbqQw4a3xR4KZtgiqbNblQD+10CRbfK4+5C79SOyxnT9dhBqFnA==", + "requires": { + "immer": "^9.0.16", + "redux": "^4.2.0", + "redux-thunk": "^2.4.2", + "reselect": "^4.1.7" + } + }, "@types/body-parser": { "version": "1.19.2", "resolved": "https://registry.npmjs.org/@types/body-parser/-/body-parser-1.19.2.tgz", @@ -306,6 +315,15 @@ "@types/node": "*" } }, + "@types/hoist-non-react-statics": { + "version": "3.3.1", + "resolved": "https://registry.npmjs.org/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz", + "integrity": "sha512-iMIqiko6ooLrTh1joXodJK5X9xeEALT1kM5G3ZLhD3hszxBdIEd5C75U834D9mLcINgD4OyZf5uQXjkuYydWvA==", + "requires": { + "@types/react": "*", + "hoist-non-react-statics": "^3.3.0" + } + }, "@types/html-minifier-terser": { "version": "6.1.0", "resolved": "https://registry.npmjs.org/@types/html-minifier-terser/-/html-minifier-terser-6.1.0.tgz", @@ -354,8 +372,7 @@ "@types/prop-types": { "version": "15.7.5", "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.5.tgz", - "integrity": "sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w==", - "dev": true + "integrity": "sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w==" }, "@types/qs": { "version": "6.9.7", @@ -373,7 +390,6 @@ "version": "18.0.21", "resolved": "https://registry.npmjs.org/@types/react/-/react-18.0.21.tgz", "integrity": "sha512-7QUCOxvFgnD5Jk8ZKlUAhVcRj7GuJRjnjjiY/IUBWKgOlnvDvTMLD4RTF7NPyVmbRhNrbomZiOepg7M/2Kj1mA==", - "dev": true, "requires": { "@types/prop-types": "*", "@types/scheduler": "*", @@ -398,8 +414,7 @@ "@types/scheduler": { "version": "0.16.2", "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.2.tgz", - "integrity": "sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew==", - "dev": true + "integrity": "sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew==" }, "@types/semver": { "version": "7.3.13", @@ -435,6 +450,11 @@ "@types/node": "*" } }, + "@types/use-sync-external-store": { + "version": "0.0.3", + "resolved": "https://registry.npmjs.org/@types/use-sync-external-store/-/use-sync-external-store-0.0.3.tgz", + "integrity": "sha512-EwmlvuaxPNej9+T4v5AuBPJa2x2UOJVdjCtDHgcDqitUeOtjnJKJ+apYjVcAoBEMjKW1VVFGZLUb5+qqa09XFA==" + }, "@types/ws": { "version": "8.5.3", "resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.5.3.tgz", @@ -1474,8 +1494,7 @@ "csstype": { "version": "3.1.1", "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.1.tgz", - "integrity": "sha512-DJR/VvkAvSZW9bTouZue2sSxDwdTN92uHjqeKVm+0dAqdfNykRzQ95tay8aXMBAAPpUiq4Qcug2L7neoRh2Egw==", - "dev": true + "integrity": "sha512-DJR/VvkAvSZW9bTouZue2sSxDwdTN92uHjqeKVm+0dAqdfNykRzQ95tay8aXMBAAPpUiq4Qcug2L7neoRh2Egw==" }, "damerau-levenshtein": { "version": "1.0.8", @@ -2768,6 +2787,14 @@ "integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==", "dev": true }, + "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==", + "requires": { + "react-is": "^16.7.0" + } + }, "hpack.js": { "version": "2.1.6", "resolved": "https://registry.npmjs.org/hpack.js/-/hpack.js-2.1.6.tgz", @@ -2939,6 +2966,11 @@ "integrity": "sha512-CmxgYGiEPCLhfLnpPp1MoRmifwEIOgjcHXxOBjv7mY96c+eWScsOP9c112ZyLdWHi0FxHjI+4uVhKYp/gcdRmQ==", "dev": true }, + "immer": { + "version": "9.0.16", + "resolved": "https://registry.npmjs.org/immer/-/immer-9.0.16.tgz", + "integrity": "sha512-qenGE7CstVm1NrHQbMh8YaSzTZTFNP3zPqr3YU0S0UY441j4bJTg4A2Hh5KAhwgaiU6ZZ1Ar6y/2f4TblnMReQ==" + }, "immutable": { "version": "4.1.0", "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.1.0.tgz", @@ -3561,9 +3593,9 @@ "dev": true }, "loader-utils": { - "version": "2.0.3", - "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.3.tgz", - "integrity": "sha512-THWqIsn8QRnvLl0shHYVBN9syumU8pYWEHPTmkiVGd+7K5eFNVSY6AJhRvgGF70gg1Dz+l/k8WicvFCxdEs60A==", + "version": "2.0.4", + "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.4.tgz", + "integrity": "sha512-xXqpXoINfFhgua9xiqD8fPFHgkoq1mmmpE92WlDbm9rNRd/EbRb+Gqf908T2DMfuHjjJlksiK2RbHVOdD/MqSw==", "dev": true, "requires": { "big.js": "^5.2.2", @@ -4456,8 +4488,27 @@ "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==", - "dev": true + "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" + }, + "react-redux": { + "version": "8.0.5", + "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-8.0.5.tgz", + "integrity": "sha512-Q2f6fCKxPFpkXt1qNRZdEDLlScsDWyrgSj0mliK59qU6W5gvBiKkdMEG2lJzhd1rCctf0hb6EtePPLZ2e0m1uw==", + "requires": { + "@babel/runtime": "^7.12.1", + "@types/hoist-non-react-statics": "^3.3.1", + "@types/use-sync-external-store": "^0.0.3", + "hoist-non-react-statics": "^3.3.2", + "react-is": "^18.0.0", + "use-sync-external-store": "^1.0.0" + }, + "dependencies": { + "react-is": { + "version": "18.2.0", + "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz", + "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==" + } + } }, "readable-stream": { "version": "3.6.0", @@ -4488,6 +4539,19 @@ "resolve": "^1.9.0" } }, + "redux": { + "version": "4.2.0", + "resolved": "https://registry.npmjs.org/redux/-/redux-4.2.0.tgz", + "integrity": "sha512-oSBmcKKIuIR4ME29/AeNUnl5L+hvBq7OaJWzaptTQJAntaPvxIJqfnjbaEiCzzaIz+XmVILfqAM3Ob0aXLPfjA==", + "requires": { + "@babel/runtime": "^7.9.2" + } + }, + "redux-thunk": { + "version": "2.4.2", + "resolved": "https://registry.npmjs.org/redux-thunk/-/redux-thunk-2.4.2.tgz", + "integrity": "sha512-+P3TjtnP0k/FEjcBL5FZpoovtvrTNT/UXd4/sluaSyrURlSlhLSzEdfsTBW7WsKB6yPvgd7q/iZPICFjW4o57Q==" + }, "regexp.prototype.flags": { "version": "1.4.3", "resolved": "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.4.3.tgz", @@ -4553,6 +4617,11 @@ "integrity": "sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==", "dev": true }, + "reselect": { + "version": "4.1.7", + "resolved": "https://registry.npmjs.org/reselect/-/reselect-4.1.7.tgz", + "integrity": "sha512-Zu1xbUt3/OPwsXL46hvOOoQrap2azE7ZQbokq61BQfiXvhewsKDwhMeZjTX9sX0nvw1t/U5Audyn1I9P/m9z0A==" + }, "resolve": { "version": "1.22.1", "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.1.tgz", @@ -5343,6 +5412,11 @@ "punycode": "^2.1.0" } }, + "use-sync-external-store": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz", + "integrity": "sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==" + }, "util-deprecate": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz", diff --git a/package.json b/package.json index 63384d3..cd7a936 100644 --- a/package.json +++ b/package.json @@ -14,10 +14,12 @@ "keywords": [], "author": "Viktar Hushchyn", "dependencies": { + "@reduxjs/toolkit": "^1.9.0", "normalize.css": "^8.0.1", "react": "^18.2.0", "react-dom": "^18.2.0", - "react-hook-form": "^7.39.1" + "react-hook-form": "^7.39.1", + "react-redux": "^8.0.5" }, "devDependencies": { "@types/node": "18.11.4", diff --git a/src/Components/MovieCard/movieCard.tsx b/src/Components/MovieCard/movieCard.tsx index f39c7f9..8cde7b3 100644 --- a/src/Components/MovieCard/movieCard.tsx +++ b/src/Components/MovieCard/movieCard.tsx @@ -4,21 +4,7 @@ import styles from './movieCard.module.scss'; import MovieCardMenuButton from './MovieCardMenuButton'; import { AppContext } from '../../Contexts/appContext'; import getReleaseYear from '../../Utils/getReleaseYear'; - -export type MovieCardArgs = { - id: number; - title?: string; - tagline?: string; - vote_average?: number; - vote_count?: number; - poster_path?: string; - overview?: string; - release_date?: string; - budget?: number; - revenue?: number; - runtime?: number; - genres?: string[]; -}; +import { MovieCardArgs } from '../../Models'; const MovieCard: React.FunctionComponent = ({ id, diff --git a/src/Components/MovieDetail/movieDetail.tsx b/src/Components/MovieDetail/movieDetail.tsx index b06a6f0..c4e1ba8 100644 --- a/src/Components/MovieDetail/movieDetail.tsx +++ b/src/Components/MovieDetail/movieDetail.tsx @@ -1,6 +1,5 @@ import React, { useContext } from 'react'; -import { MovieCardArgs } from '../MovieCard'; import Brand from '../Brand'; import SearchButton from '../SearchButton'; @@ -8,6 +7,7 @@ import styles from './movieDetail.module.scss'; import { AppContext } from '../../Contexts/appContext'; import getReleaseYear from '../../Utils/getReleaseYear'; import getMovieLength from '../../Utils/getMovieLength'; +import { MovieCardArgs } from '../../Models'; type MovieDetailType = { activeMovie: MovieCardArgs; diff --git a/src/Components/Navigation/navigation.tsx b/src/Components/Navigation/navigation.tsx index 5322f30..532c0d7 100644 --- a/src/Components/Navigation/navigation.tsx +++ b/src/Components/Navigation/navigation.tsx @@ -1,15 +1,31 @@ -import React from 'react'; +import React, { useEffect, useMemo, useState } from 'react'; import styles from './navigation.module.scss'; +import useAppDispatch from '../../Hooks/useAppDispatch'; +import { filterMoviesByGenre, loadMovies } from '../../Containers/MovieList/movieListSlice'; const Navigation: React.FunctionComponent = () => { - const navItems: string[] = ['all', 'documentary', 'comedy', 'horror', 'crime']; + const [filter, setFilter] = useState('all'); + const dispatch = useAppDispatch(); + + const navItems: string[] = useMemo(() => ['all', 'documentary', 'comedy', 'horror', 'crime'], []); + + const handleOnFilter = item => setFilter(item); + + useEffect(() => { + if (filter === navItems[0]) { + dispatch(loadMovies()); + } else { + dispatch(filterMoviesByGenre(filter)); + } + }, [filter, dispatch, navItems]); + return (