feat: task6 (Redux)

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",

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<MovieCardArgs> = ({
     id,

src/Components/MovieDetail/movieDetail.tsx

@@ -1,13 +1,13 @@
 import React, { useContext } from 'react';
 
-import { MovieCardArgs } from '../MovieCard';
 import Brand from '../Brand';
 import SearchButton from '../SearchButton';
 
 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;

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 (
         <nav>
             <ul className={styles.nav}>
                 {navItems.map(item => {
                     return (
-                        <li key={item} className={styles.navItem} value={item}>
+                        <li key={item} className={styles.navItem} value={item} onClick={() => handleOnFilter(item)}>
                             <div>{item}</div>
                         </li>
                     );

src/Components/Search/search.tsx

@@ -1,13 +1,31 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 
 import styles from './search.module.scss';
+import useAppDispatch from '../../Hooks/useAppDispatch';
+import { searchMoviesByTitle } from '../../Containers/MovieList/movieListSlice';
 
 const Search: React.FunctionComponent = () => {
+    const [searchText, setSearchText] = useState('');
+    const dispatch = useAppDispatch();
+
+    const handleOnChange = e => setSearchText(e.target.value);
+
+    useEffect(() => {
+        if (searchText?.length > 2) {
+            dispatch(searchMoviesByTitle(searchText));
+        }
+    }, [searchText, dispatch]);
     return (
         <>
             <h2 className={styles.searchText}>find your movie</h2>
             <div className={styles.searchInputWrapper}>
-                <input className={styles.searchInput} type="search" placeholder="What do you want to watch?" />
+                <input
+                    className={styles.searchInput}
+                    type="search"
+                    value={searchText}
+                    onChange={handleOnChange}
+                    placeholder="What do you want to watch?"
+                />
                 <button className={styles.searchButton} type="button">
                     search
                 </button>

src/Components/Sorting/sorting.tsx

@@ -1,12 +1,25 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 
 import styles from './sorting.module.scss';
+import useAppDispatch from '../../Hooks/useAppDispatch';
+import { sortMovies } from '../../Containers/MovieList/movieListSlice';
 
 const Sorting: React.FunctionComponent = () => {
+    const [sortBy, setSortBy] = useState('all');
+    const dispatch = useAppDispatch();
+
+    const handleOnChange = e => setSortBy(e.target.value);
+
+    useEffect(() => {
+        dispatch(sortMovies(sortBy));
+    }, [sortBy, dispatch]);
+
     return (
         <div className={styles.wrapper}>
             <span className={styles.label}>sort by</span>
-            <select className={styles.select}>
+            <select className={styles.select} onChange={handleOnChange}>
+                <option value="genre">genre</option>
+                <option value="rating">rating</option>
                 <option value="releaseDate">release date</option>
             </select>
         </div>

src/Containers/App/app.module.scss

@@ -7,6 +7,6 @@
     align-items: center;
     margin: auto;
     width: 100%;
-    height: 100%;
+    height: 100vh;
     background: #424242;
 }