├── 01-pure-to-jsx
    ├── _start
    │   └── index.js
    └── finish
    │   └── index.js
├── 02-state-clicker
    ├── _start
    │   └── App.jsx
    └── finish
    │   └── App.jsx
├── 03-lifecicle-timer
    ├── _start
    │   └── App.jsx
    └── finish
    │   └── App.jsx
├── 04-fn-flow
    ├── _start
    │   ├── App.jsx
    │   ├── Post.jsx
    │   └── Posts.jsx
    └── finish
    │   ├── App.jsx
    │   ├── Post.jsx
    │   └── Posts.jsx
├── 05-form-subscription
    ├── _start
    │   └── SubscriptionForm.jsx
    └── finish
    │   └── SubscriptionForm.jsx
├── 06-movies-list
    ├── _start
    │   ├── Main.jsx
    │   ├── Movie.jsx
    │   └── Movies.jsx
    └── finish
    │   ├── Main.jsx
    │   ├── Movie.jsx
    │   └── Movies.jsx
├── 07-movies-search
    ├── _start
    │   ├── Main.jsx
    │   └── Search.jsx
    └── finish
    │   ├── Main.jsx
    │   └── Search.jsx
├── 08-movies-filter
    ├── _start
    │   ├── Main.jsx
    │   └── Search.jsx
    └── finish
    │   ├── Main.jsx
    │   └── Search.jsx
├── 09-clicker-fn
    ├── _start
    │   └── App.jsx
    └── finish
    │   └── App.jsx
├── 10-timer-fn
    ├── _start
    │   └── App.js
    └── finish
    │   └── App.js
├── 11-movies-refactor
    ├── _start
    │   └── Main.jsx
    └── finish
    │   └── Main.jsx
├── 12-shop-add-item
    ├── _start
    │   └── Shop.jsx
    └── finish
    │   └── Shop.jsx
├── 13-shop-change-quantity
    ├── _start
    │   └── Shop.jsx
    └── finish
    │   └── Shop.jsx
├── 14-reducer-practice
    ├── _start
    │   ├── context.js
    │   └── reducer.js
    └── finish
    │   ├── context.js
    │   └── reducer.js
└── README.md


/01-pure-to-jsx/_start/index.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import ReactDOM from "react-dom";
 3 | 
 4 | // tip: чтобы встроить переменную в JSX используйте фигурные скобки {name}
 5 | const Book = (props) => {
 6 |   return React.createElement("div", {}, [
 7 |     React.createElement("h2", {}, props.name),
 8 |     React.createElement("p", {}, props.year),
 9 |     React.createElement("p", {}, props.price)
10 |   ]);
11 | };
12 | 
13 | const App = () => {
14 |   return (
15 |     <div>
16 |       <Book name="JS for beginners" year="2018" price="1000" />
17 |       <Book name="React for beginners" year="2019" price="1200" />
18 |       <Book name="Vue for beginners" year="2021" price="1500" />
19 |     </div>
20 |   );
21 | 
22 |   // React.createElement("div", {}, [
23 |   //   React.createElement(
24 |   //     "h1",
25 |   //     { id: "hello", className: "class1" },
26 |   //     "Hello from React"
27 |   //   ),
28 |   //   React.createElement(Book, {
29 |   //     name: "JS for beginners",
30 |   //     year: 2018,
31 |   //     price: 1000
32 |   //   }),
33 |   //   React.createElement(Book, { name: "React", year: 2020, price: 1200 }),
34 |   //   React.createElement(Book, { name: "Vue JS", year: 2019, price: 1100 })
35 |   // ]);
36 | };
37 | 
38 | 
39 | const rootElement = document.getElementById("root");
40 | ReactDOM.render(
41 |   <React.StrictMode>
42 |     <App />
43 |   </React.StrictMode>,
44 | 
45 |   rootElement
46 | );
47 | 


--------------------------------------------------------------------------------
/01-pure-to-jsx/finish/index.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import ReactDOM from "react-dom";
 3 | 
 4 | 
 5 | const Book = (props) => {
 6 |   return <div>
 7 |      <h2>{props.name}</h2>
 8 |      <p>{props.year}</p>
 9 |      <p>{props.price}</p>
10 |   </div>
11 |   
12 | //   React.createElement("div", {}, [
13 | //     React.createElement("h2", {}, props.name),
14 | //     React.createElement("p", {}, props.year),
15 | //     React.createElement("p", {}, props.price)
16 | //   ]);
17 | };
18 | 
19 | const App = () => {
20 |   return (
21 |     <div>
22 |       <Book name="JS for beginners" year="2018" price="1000" />
23 |       <Book name="React for beginners" year="2019" price="1200" />
24 |       <Book name="Vue for beginners" year="2021" price="1500" />
25 |     </div>
26 |   );
27 | };
28 | 
29 | 
30 | const rootElement = document.getElementById("root");
31 | ReactDOM.render(
32 |   <React.StrictMode>
33 |     <App />
34 |   </React.StrictMode>,
35 | 
36 |   rootElement
37 | );
38 | 


--------------------------------------------------------------------------------
/02-state-clicker/_start/App.jsx:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react';
 2 | 
 3 | class App extends Component {
 4 |     state = {
 5 |         count: 0,
 6 |     };
 7 | 
 8 |     handleClick = () => {
 9 |         this.setState({ count: this.state.count + 1 });
10 |     };
11 | 
12 |     render() {
13 |         return (
14 |             <div className="App">
15 |                 <button onClick={this.handleClick}>{this.state.count}</button>
16 |             </div>
17 |         );
18 |     }
19 | }
20 | 
21 | export default App;
22 | 


--------------------------------------------------------------------------------
/02-state-clicker/finish/App.jsx:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react';
 2 | 
 3 | class App extends Component {
 4 |     state = {
 5 |         count: 0,
 6 |     };
 7 | 
 8 |     increment = () => {
 9 |         this.setState({ count: this.state.count + 1 });
10 |     };
11 | 
12 |     decrement = () => {
13 |         this.setState({ count: this.state.count - 1 });
14 |     };
15 | 
16 |     render() {
17 |         return (
18 |             <div className="App">
19 |                 <button onClick={this.decrement}>-</button>
20 |                 <span>{this.state.count}</span>
21 |                 <button onClick={this.increment}>+</button>
22 |             </div>
23 |         );
24 |     }
25 | }
26 | 
27 | export default App;
28 | 


--------------------------------------------------------------------------------
/03-lifecicle-timer/_start/App.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import './styles.css';
 3 | 
 4 | export default class App extends React.Component {
 5 |     state = {
 6 |         count: 0,
 7 |         isCounting: false,
 8 |     };
 9 | 
10 |     componentDidMount() {}
11 | 
12 |     componentDidUpdate() {}
13 | 
14 |     componentWillUnmount() {}
15 | 
16 |     render() {
17 |         return (
18 |             <div className="App">
19 |                 <h1>React Timer</h1>
20 |                 <h3>{this.state.count}</h3>
21 |                 {!this.state.isCounting ? (
22 |                     <button onClick={this.handleStart}>Start</button>
23 |                 ) : (
24 |                     <button onClick={this.handleStop}>Stop</button>
25 |                 )}
26 |                 <button onClick={this.handleReset}>Reset</button>
27 |             </div>
28 |         );
29 |     }
30 | }
31 | 


--------------------------------------------------------------------------------
/03-lifecicle-timer/finish/App.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import './styles.css';
 3 | 
 4 | export default class App extends React.Component {
 5 |     state = {
 6 |         count: 0,
 7 |         isCounting: false,
 8 |     };
 9 | 
10 |     componentDidMount() {
11 |         const userCount = localStorage.getItem('count');
12 |         if (userCount) this.setState({ count: +userCount });
13 |     }
14 | 
15 |     componentDidUpdate() {
16 |         localStorage.setItem('count', this.state.count);
17 |     }
18 | 
19 |     handleReset = () => {
20 |         this.setState({
21 |             count: 0,
22 |             isCounting: false,
23 |         });
24 |     };
25 | 
26 |     handleStart = () => {
27 |         this.setState({
28 |             isCounting: true,
29 |         });
30 |         this.counterId = setInterval(() => {
31 |             this.setState({ count: this.state.count + 1 });
32 |         }, 1000);
33 |     };
34 | 
35 |     handleStop = () => {
36 |         clearInterval(this.counterId);
37 |         this.setState({
38 |             isCounting: false,
39 |         });
40 |     };
41 | 
42 |     componentWillUnmount() {
43 |         clearInterval(this.counterId);
44 |         this.handleStop();
45 |     }
46 | 
47 |     render() {
48 |         return (
49 |             <div className="App">
50 |                 <h1>React Timer</h1>
51 |                 <h3>{this.state.count}</h3>
52 |                 {!this.state.isCounting ? (
53 |                     <button onClick={this.handleStart}>Start</button>
54 |                 ) : (
55 |                     <button onClick={this.handleStop}>Stop</button>
56 |                 )}
57 |                 <button onClick={this.handleReset}>Reset</button>
58 |             </div>
59 |         );
60 |     }
61 | }
62 | 


--------------------------------------------------------------------------------
/04-fn-flow/_start/App.jsx:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react';
 2 | import { Posts } from './components/Posts';
 3 | 
 4 | class App extends Component {
 5 |     state = {
 6 |         posts: [
 7 |             { id: 'abc1', name: 'JS Basics' },
 8 |             { id: 'abc2', name: 'JS Advanced' },
 9 |             { id: 'abc3', name: 'Recat JS' },
10 |         ],
11 |     };
12 | 
13 |     render() {
14 |         const { posts } = this.state;
15 | 
16 |         return (
17 |             <div className="App">
18 |                 <Posts posts={posts} />
19 |             </div>
20 |         );
21 |     }
22 | }
23 | 
24 | export default App;
25 | 


--------------------------------------------------------------------------------
/04-fn-flow/_start/Post.jsx:
--------------------------------------------------------------------------------
 1 | export function Post(props) {
 2 |     const { name } = props;
 3 | 
 4 |     return (
 5 |         <h2>
 6 |             {name} <button>delete</button>
 7 |         </h2>
 8 |     );
 9 | }
10 | 


--------------------------------------------------------------------------------
/04-fn-flow/_start/Posts.jsx:
--------------------------------------------------------------------------------
 1 | import { Post } from './Post';
 2 | 
 3 | export function Posts(props) {
 4 |     return (
 5 |         <div>
 6 |             {props.posts.map((post) => (
 7 |                 <Post key={post.id} name={post.name} />
 8 |             ))}
 9 |         </div>
10 |     );
11 | }
12 | 


--------------------------------------------------------------------------------
/04-fn-flow/finish/App.jsx:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react';
 2 | import { Posts } from './Posts';
 3 | 
 4 | class App extends Component {
 5 |     state = {
 6 |         posts: [
 7 |             { id: 'abc1', name: 'JS Basics' },
 8 |             { id: 'abc2', name: 'JS Advanced' },
 9 |             { id: 'abc3', name: 'Recat JS' },
10 |         ],
11 |     };
12 | 
13 |     removePost = (id) => {
14 |         this.setState({
15 |             posts: this.state.posts.filter((post) => post.id !== id),
16 |         });
17 |     };
18 | 
19 |     render() {
20 |         const { posts } = this.state;
21 | 
22 |         return (
23 |             <div className="App">
24 |                 <Posts posts={posts} removePost={this.removePost} />
25 |             </div>
26 |         );
27 |     }
28 | }
29 | 
30 | export default App;
31 | 


--------------------------------------------------------------------------------
/04-fn-flow/finish/Post.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | 
 3 | export function Post(props) {
 4 |     const { id, name, removePost } = props;
 5 | 
 6 |     return (
 7 |         <h2>
 8 |             {name} <button onClick={() => removePost(id)}>delete</button>
 9 |         </h2>
10 |     );
11 | }
12 | 


--------------------------------------------------------------------------------
/04-fn-flow/finish/Posts.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { Post } from './Post';
 3 | 
 4 | export function Posts(props) {
 5 |     return (
 6 |         <div>
 7 |             {props.posts.map((post) => (
 8 |                 <Post
 9 |                     key={post.id}
10 |                     id={post.id}
11 |                     name={post.name}
12 |                     removePost={props.removePost}
13 |                 />
14 |             ))}
15 |         </div>
16 |     );
17 | }
18 | 


--------------------------------------------------------------------------------
/05-form-subscription/_start/SubscriptionForm.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | 
 3 | class SubscriptionForm extends React.Component {
 4 |     state = {
 5 |         email: '',
 6 |         isAgreeWithTerms: false,
 7 |     };
 8 | 
 9 |     render() {
10 |         const { email, isAgreeWithTerms } = this.state;
11 | 
12 |         return (
13 |             <div>
14 |                 <input
15 |                     type="email"
16 |                     name="email"
17 |                     placeholder="email"
18 |                     value={email}
19 |                 />
20 |                 <br />
21 |                 <label>
22 |                     <input
23 |                         type="checkbox"
24 |                         name="isAgreeWithTerms"
25 |                         checked={isAgreeWithTerms}
26 |                     />
27 |                     I agree with terms and conditions
28 |                 </label>
29 |                 <br />
30 |                 <button>Send</button>
31 |             </div>
32 |         );
33 |     }
34 | }
35 | 
36 | export { SubscriptionForm };
37 | 


--------------------------------------------------------------------------------
/05-form-subscription/finish/SubscriptionForm.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | 
 3 | class SubscriptionForm extends React.Component {
 4 |     state = {
 5 |         email: '',
 6 |         isAgreeWithTerms: false,
 7 |     };
 8 | 
 9 |     handleEmail = (event) => {
10 |         this.setState({ email: event.target.value });
11 |     };
12 | 
13 |     handleCheckbox = (event) => {
14 |         this.setState({
15 |             isAgreeWithTerms: event.target.checked,
16 |         });
17 |     };
18 | 
19 |     handleSubmit = () => {
20 |         const isValidEmail = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(
21 |             this.state.email.toLocaleLowerCase()
22 |         );
23 |         const isValidCheckbox = this.state.isAgreeWithTerms;
24 | 
25 |         if (!isValidEmail) {
26 |             alert('Your email is not valid');
27 |             return;
28 |         }
29 | 
30 |         if (!isValidCheckbox) {
31 |             alert('You should accept all terms and conditions');
32 |             return;
33 |         }
34 | 
35 |         this.setState({
36 |             email: '',
37 |             isAgreeWithTerms: false,
38 |         });
39 |         alert('Thank you for subscription!');
40 |     };
41 | 
42 |     render() {
43 |         const { email, isAgreeWithTerms } = this.state;
44 | 
45 |         return (
46 |             <div>
47 |                 <input
48 |                     type="email"
49 |                     name="email"
50 |                     placeholder="email"
51 |                     value={email}
52 |                     onChange={this.handleEmail}
53 |                 />
54 |                 <br />
55 |                 <label>
56 |                     <input
57 |                         type="checkbox"
58 |                         name="isAgreeWithTerms"
59 |                         checked={isAgreeWithTerms}
60 |                         onChange={this.handleCheckbox}
61 |                     />
62 |                     I agree with terms and conditions
63 |                 </label>
64 |                 <br />
65 |                 <button onClick={this.handleSubmit}>Send</button>
66 |             </div>
67 |         );
68 |     }
69 | }
70 | 
71 | export { SubscriptionForm };
72 | 


--------------------------------------------------------------------------------
/06-movies-list/_start/Main.jsx:
--------------------------------------------------------------------------------
1 | function Main() {
2 |     return <main className="container content"></main>;
3 | }
4 | 
5 | export { Main };
6 | 


--------------------------------------------------------------------------------
/06-movies-list/_start/Movie.jsx:
--------------------------------------------------------------------------------
1 | function Movie() {
2 |     return <div className="movie card"></div>;
3 | }
4 | 
5 | export { Movie };
6 | 


--------------------------------------------------------------------------------
/06-movies-list/_start/Movies.jsx:
--------------------------------------------------------------------------------
1 | function Movies() {
2 |     return <div className="movies"></div>;
3 | }
4 | 
5 | export { Movies };
6 | 


--------------------------------------------------------------------------------
/06-movies-list/finish/Main.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { Movies } from '../components/Movies';
 3 | 
 4 | class Main extends React.Component {
 5 |     state = {
 6 |         movies: [],
 7 |     };
 8 | 
 9 |     componentDidMount() {
10 |         fetch('http://www.omdbapi.com/?apikey=78584b3c&s=matrix')
11 |             .then((response) => response.json())
12 |             .then((data) => this.setState({ movies: data.Search }));
13 |     }
14 | 
15 |     render() {
16 |         const { movies } = this.state;
17 | 
18 |         return (
19 |             <main className="container content">
20 |                 {movies.length ? (
21 |                     <Movies movies={this.state.movies} />
22 |                 ) : (
23 |                     <h3>Loading...</h3>
24 |                 )}
25 |             </main>
26 |         );
27 |     }
28 | }
29 | 
30 | export { Main };
31 | 


--------------------------------------------------------------------------------
/06-movies-list/finish/Movie.jsx:
--------------------------------------------------------------------------------
 1 | function Movie(props) {
 2 |     const {
 3 |         Title: title,
 4 |         Year: year,
 5 |         imdbID: id,
 6 |         Type: type,
 7 |         Poster: poster,
 8 |     } = props;
 9 | 
10 |     console.log('movie render');
11 | 
12 |     return (
13 |         <div id={id} className="card movie">
14 |             <div className="card-image waves-effect waves-block waves-light">
15 |                 {poster === 'N/A' ? (
16 |                     <img
17 |                         className="activator"
18 |                         src={`https://via.placeholder.com/300x400?text=${title}`}
19 |                     />
20 |                 ) : (
21 |                     <img className="activator" src={poster} />
22 |                 )}
23 |             </div>
24 |             <div className="card-content">
25 |                 <span className="card-title activator grey-text text-darken-4">
26 |                     {title}
27 |                 </span>
28 |                 <p>
29 |                     {year} <span className="right">{type}</span>
30 |                 </p>
31 |             </div>
32 |         </div>
33 |     );
34 | }
35 | export { Movie };
36 | 


--------------------------------------------------------------------------------
/06-movies-list/finish/Movies.jsx:
--------------------------------------------------------------------------------
 1 | import { Movie } from './Movie';
 2 | 
 3 | function Movies(props) {
 4 |     const { movies } = props;
 5 | 
 6 |     return (
 7 |         <div className="movies">
 8 |             {movies.map((movie) => (
 9 |                 <Movie key={movie.imdbID} {...movie} />
10 |             ))}
11 |         </div>
12 |     );
13 | }
14 | export { Movies };
15 | 


--------------------------------------------------------------------------------
/07-movies-search/_start/Main.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { Movies } from '../components/Movies';
 3 | import { Search } from '../components/Search';
 4 | import { Preloader } from '../components/Preloader';
 5 | 
 6 | class Main extends React.Component {
 7 |     state = {
 8 |         movies: [],
 9 |     };
10 | 
11 |     componentDidMount() {
12 |         fetch('http://www.omdbapi.com/?apikey=78584b3c&s=matrix')
13 |             .then((response) => response.json())
14 |             .then((data) => this.setState({ movies: data.Search }));
15 |     }
16 | 
17 |     render() {
18 |         const { movies } = this.state;
19 | 
20 |         return (
21 |             <main className="container content">
22 |                 <Search />
23 |                 {movies.length ? (
24 |                     <Movies movies={this.state.movies} />
25 |                 ) : (
26 |                     <Preloader />
27 |                 )}
28 |             </main>
29 |         );
30 |     }
31 | }
32 | 
33 | export { Main };
34 | 


--------------------------------------------------------------------------------
/07-movies-search/_start/Search.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | 
 3 | class Search extends React.Component {
 4 |     state = {
 5 |         search: '',
 6 |     };
 7 | 
 8 |     render() {
 9 |         return (
10 |             <div className="row">
11 |                 <div className="input-field">
12 |                     <input
13 |                         className="validate"
14 |                         placeholder="search"
15 |                         type="search"
16 |                         value={this.state.search}
17 |                         onChange={(e) =>
18 |                             this.setState({ search: e.target.value })
19 |                         }
20 |                     />
21 |                 </div>
22 |             </div>
23 |         );
24 |     }
25 | }
26 | 
27 | export { Search };
28 | 


--------------------------------------------------------------------------------
/07-movies-search/finish/Main.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { Movies } from '../components/Movies';
 3 | import { Search } from '../components/Search';
 4 | import { Preloader } from '../components/Preloader';
 5 | 
 6 | class Main extends React.Component {
 7 |     state = {
 8 |         movies: [],
 9 |     };
10 | 
11 |     searchMovies = (str) => {
12 |         fetch(`http://www.omdbapi.com/?apikey=78584b3c&s=${str}`)
13 |             .then((response) => response.json())
14 |             .then((data) => this.setState({ movies: data.Search }));
15 |     };
16 | 
17 |     componentDidMount() {
18 |         fetch('http://www.omdbapi.com/?apikey=78584b3c&s=matrix')
19 |             .then((response) => response.json())
20 |             .then((data) => this.setState({ movies: data.Search }));
21 |     }
22 | 
23 |     render() {
24 |         const { movies } = this.state;
25 | 
26 |         return (
27 |             <main className="container content">
28 |                 <Search searchMovies={this.searchMovies} />
29 |                 {movies.length ? (
30 |                     <Movies movies={this.state.movies} />
31 |                 ) : (
32 |                     <Preloader />
33 |                 )}
34 |             </main>
35 |         );
36 |     }
37 | }
38 | 
39 | export { Main };
40 | 


--------------------------------------------------------------------------------
/07-movies-search/finish/Search.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | 
 3 | class Search extends React.Component {
 4 |     state = {
 5 |         search: '',
 6 |     };
 7 | 
 8 |     handleKey = (event) => {
 9 |         if (event.key === 'Enter') {
10 |             this.props.searchMovies(this.state.search);
11 |         }
12 |     };
13 | 
14 |     render() {
15 |         return (
16 |             <div className="row">
17 |                 <div className="input-field">
18 |                     <input
19 |                         className="validate"
20 |                         placeholder="search"
21 |                         type="search"
22 |                         value={this.state.search}
23 |                         onChange={(e) =>
24 |                             this.setState({ search: e.target.value })
25 |                         }
26 |                         onKeyDown={this.handleKey}
27 |                     />
28 |                     <button
29 |                         className="btn search-btn"
30 |                         onClick={() =>
31 |                             this.props.searchMovies(this.state.search)
32 |                         }
33 |                     >
34 |                         Search
35 |                     </button>
36 |                 </div>
37 |             </div>
38 |         );
39 |     }
40 | }
41 | 
42 | export { Search };
43 | 


--------------------------------------------------------------------------------
/08-movies-filter/_start/Main.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { Movies } from '../components/Movies';
 3 | import { Search } from '../components/Search';
 4 | import { Preloader } from '../components/Preloader';
 5 | 
 6 | class Main extends React.Component {
 7 |     state = {
 8 |         movies: [],
 9 |     };
10 | 
11 |     componentDidMount() {
12 |         fetch('http://www.omdbapi.com/?apikey=78584b3c&s=matrix')
13 |             .then((response) => response.json())
14 |             .then((data) => this.setState({ movies: data.Search }));
15 |     }
16 | 
17 |     searchMovies = (str) => {
18 |         fetch(`http://www.omdbapi.com/?apikey=78584b3c&s=${str}`)
19 |             .then((response) => response.json())
20 |             .then((data) => this.setState({ movies: data.Search }));
21 |     };
22 | 
23 |     render() {
24 |         const { movies } = this.state;
25 | 
26 |         return (
27 |             <main className="container content">
28 |                 <Search searchMovies={this.searchMovies} />
29 |                 {movies.length ? (
30 |                     <Movies movies={this.state.movies} />
31 |                 ) : (
32 |                     <Preloader />
33 |                 )}
34 |             </main>
35 |         );
36 |     }
37 | }
38 | 
39 | export { Main };
40 | 


--------------------------------------------------------------------------------
/08-movies-filter/_start/Search.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | 
 3 | class Search extends React.Component {
 4 |     state = {
 5 |         search: '',
 6 |     };
 7 | 
 8 |     render() {
 9 |         return (
10 |             <div className="row">
11 |                 <div className="input-field">
12 |                     <input
13 |                         className="validate"
14 |                         placeholder="search"
15 |                         type="search"
16 |                         value={this.state.search}
17 |                         onChange={(e) =>
18 |                             this.setState({ search: e.target.value })
19 |                         }
20 |                     />
21 |                 </div>
22 |             </div>
23 |         );
24 |     }
25 | }
26 | 
27 | export { Search };
28 | 


--------------------------------------------------------------------------------
/08-movies-filter/finish/Main.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { Movies } from '../components/Movies';
 3 | import { Search } from '../components/Search';
 4 | import { Preloader } from '../components/Preloader';
 5 | 
 6 | class Main extends React.Component {
 7 |     state = {
 8 |         movies: [],
 9 |     };
10 | 
11 |     componentDidMount() {
12 |         fetch('http://www.omdbapi.com/?apikey=78584b3c&s=matrix')
13 |             .then((response) => response.json())
14 |             .then((data) => this.setState({ movies: data.Search }));
15 |     }
16 | 
17 |     searchMovies = (str, type = 'all') => {
18 |         fetch(
19 |             `http://www.omdbapi.com/?apikey=78584b3c&s=${str}${
20 |                 type !== 'all' ? `&type=${type}` : ''
21 |             }`
22 |         )
23 |             .then((response) => response.json())
24 |             .then((data) => this.setState({ movies: data.Search }));
25 |     };
26 | 
27 |     render() {
28 |         const { movies } = this.state;
29 | 
30 |         return (
31 |             <main className="container content">
32 |                 <Search searchMovies={this.searchMovies} />
33 |                 {!movies.length ? <Preloader /> : <Movies movies={movies} />}
34 |             </main>
35 |         );
36 |     }
37 | }
38 | 
39 | export { Main };
40 | 


--------------------------------------------------------------------------------
/08-movies-filter/finish/Search.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | 
 3 | class Search extends React.Component {
 4 |     state = {
 5 |         search: '',
 6 |         type: 'all',
 7 |     };
 8 | 
 9 |     handleKey = (event) => {
10 |         if (event.key === 'Enter') {
11 |             this.props.searchMovies(this.state.search, this.state.type);
12 |         }
13 |     };
14 | 
15 |     handleFilter = (event) => {
16 |         this.setState(
17 |             () => ({ type: event.target.dataset.type }),
18 |             () => {
19 |                 this.props.searchMovies(this.state.search, this.state.type);
20 |             }
21 |         );
22 |     };
23 | 
24 |     render() {
25 |         return (
26 |             <div className="row">
27 |                 <div className="input-field">
28 |                     <input
29 |                         className="validate"
30 |                         placeholder="search"
31 |                         type="search"
32 |                         value={this.state.search}
33 |                         onChange={(e) =>
34 |                             this.setState({ search: e.target.value })
35 |                         }
36 |                         onKeyDown={this.handleKey}
37 |                     />
38 |                     <button
39 |                         className="btn search-btn"
40 |                         onClick={() =>
41 |                             this.props.searchMovies(
42 |                                 this.state.search,
43 |                                 this.state.type
44 |                             )
45 |                         }
46 |                     >
47 |                         Search
48 |                     </button>
49 |                 </div>
50 |                 <div>
51 |                     <label>
52 |                         <input
53 |                             className="with-gap"
54 |                             name="type"
55 |                             type="radio"
56 |                             data-type="all"
57 |                             onChange={this.handleFilter}
58 |                             checked={this.state.type === 'all'}
59 |                         />
60 |                         <span>All</span>
61 |                     </label>
62 |                     <label>
63 |                         <input
64 |                             className="with-gap"
65 |                             name="type"
66 |                             type="radio"
67 |                             data-type="movie"
68 |                             onChange={this.handleFilter}
69 |                             checked={this.state.type === 'movie'}
70 |                         />
71 |                         <span>Movies only</span>
72 |                     </label>
73 |                     <label>
74 |                         <input
75 |                             className="with-gap"
76 |                             name="type"
77 |                             type="radio"
78 |                             data-type="series"
79 |                             onChange={this.handleFilter}
80 |                             checked={this.state.type === 'series'}
81 |                         />
82 |                         <span>Series Only</span>
83 |                     </label>
84 |                 </div>
85 |             </div>
86 |         );
87 |     }
88 | }
89 | 
90 | export { Search };
91 | 


--------------------------------------------------------------------------------
/09-clicker-fn/_start/App.jsx:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react';
 2 | 
 3 | class App extends Component {
 4 |     state = {
 5 |         count: 0,
 6 |     };
 7 | 
 8 |     increment = () => {
 9 |         this.setState({ count: this.state.count + 1 });
10 |     };
11 | 
12 |     decrement = () => {
13 |         this.setState({ count: this.state.count - 1 });
14 |     };
15 | 
16 |     render() {
17 |         return (
18 |             <div className="App">
19 |                 <button onClick={this.decrement}>-</button>
20 |                 <span>{this.state.count}</span>
21 |                 <button onClick={this.increment}>+</button>
22 |             </div>
23 |         );
24 |     }
25 | }
26 | 
27 | export default App;
28 | 


--------------------------------------------------------------------------------
/09-clicker-fn/finish/App.jsx:
--------------------------------------------------------------------------------
 1 | import React, { useState } from 'react';
 2 | 
 3 | function App() {
 4 |     const [count, setCount] = useState(0);
 5 | 
 6 |     const increment = () => {
 7 |         setCount(count + 1);
 8 |     };
 9 | 
10 |     const decrement = () => {
11 |         setCount(count - 1);
12 |     };
13 | 
14 |     return (
15 |         <div className="App">
16 |             <button onClick={decrement}>-</button>
17 |             <span style={{ display: 'inline-block', margin: '0 0.5rem' }}>
18 |                 {count}
19 |             </span>
20 |             <button onClick={increment}>+</button>
21 |         </div>
22 |     );
23 | }
24 | 
25 | export default App;
26 | 


--------------------------------------------------------------------------------
/10-timer-fn/_start/App.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | 
 3 | export default class App extends React.Component {
 4 |     state = {
 5 |         count: 0,
 6 |         isCounting: false,
 7 |     };
 8 | 
 9 |     componentDidMount() {
10 |         const userCount = localStorage.getItem('count');
11 |         if (userCount) this.setState({ count: +userCount });
12 |     }
13 | 
14 |     componentDidUpdate() {
15 |         localStorage.setItem('count', this.state.count);
16 |     }
17 | 
18 |     handleReset = () => {
19 |         this.setState({
20 |             count: 0,
21 |             isCounting: false,
22 |         });
23 |     };
24 | 
25 |     handleStart = () => {
26 |         this.setState({
27 |             isCounting: true,
28 |         });
29 |         this.counterId = setInterval(() => {
30 |             this.setState({ count: this.state.count + 1 });
31 |         }, 1000);
32 |     };
33 | 
34 |     handleStop = () => {
35 |         clearInterval(this.counterId);
36 |         this.setState({
37 |             isCounting: false,
38 |         });
39 |     };
40 | 
41 |     componentWillUnmount() {
42 |         clearInterval(this.counterId);
43 |         this.handleStop();
44 |     }
45 | 
46 |     render() {
47 |         return (
48 |             <div className="App">
49 |                 <h1>React Timer</h1>
50 |                 <h3>{this.state.count}</h3>
51 |                 {!this.state.isCounting ? (
52 |                     <button onClick={this.handleStart}>Start</button>
53 |                 ) : (
54 |                     <button onClick={this.handleStop}>Stop</button>
55 |                 )}
56 |                 <button onClick={this.handleReset}>Reset</button>
57 |             </div>
58 |         );
59 |     }
60 | }
61 | 


--------------------------------------------------------------------------------
/10-timer-fn/finish/App.js:
--------------------------------------------------------------------------------
 1 | import React, { useState, useEffect, useRef } from 'react';
 2 | 
 3 | function setDefaultValue() {
 4 |     const userCount = localStorage.getItem('count');
 5 |     return userCount ? +userCount : 0;
 6 | }
 7 | 
 8 | export default function Timer() {
 9 |     const [count, setCount] = useState(setDefaultValue());
10 |     const [isCounting, setIsCount] = useState(false);
11 |     const timerIdRef = useRef(null);
12 | 
13 |     const handleReset = () => {
14 |         setCount(0);
15 |         setIsCount(false);
16 |     };
17 | 
18 |     const handleStart = () => {
19 |         setIsCount(true);
20 |     };
21 | 
22 |     const handleStop = () => {
23 |         setIsCount(false);
24 |     };
25 | 
26 |     useEffect(() => {
27 |         localStorage.setItem('count', count);
28 |     }, [count]);
29 | 
30 |     useEffect(() => {
31 |         if (isCounting) {
32 |             timerIdRef.current = setInterval(() => {
33 |                 setCount((prevCount) => prevCount + 1);
34 |             }, 1000);
35 |         }
36 | 
37 |         return () => {
38 |             timerIdRef.current && clearInterval(timerIdRef.current);
39 |             timerIdRef.current = null;
40 |         };
41 |     }, [isCounting]);
42 | 
43 |     return (
44 |         <div className="timer">
45 |             <h1>React Timer</h1>
46 |             <h3>{count}</h3>
47 |             {!isCounting ? (
48 |                 <button onClick={handleStart}>Start</button>
49 |             ) : (
50 |                 <button onClick={handleStop}>Stop</button>
51 |             )}
52 |             <button onClick={handleReset}>Reset</button>
53 |         </div>
54 |     );
55 | }
56 | 


--------------------------------------------------------------------------------
/11-movies-refactor/_start/Main.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { Movies } from '../components/Movies';
 3 | import { Search } from '../components/Search';
 4 | import { Preloader } from '../components/Preloader';
 5 | 
 6 | const API_KEY = process.env.REACT_APP_API_KEY;
 7 | 
 8 | class Main extends React.Component {
 9 |     state = {
10 |         movies: [],
11 |         loading: true,
12 |     };
13 | 
14 |     componentDidMount() {
15 |         console.log(process.env);
16 |         fetch(`https://www.omdbapi.com/?apikey=${API_KEY}&s=matrix`)
17 |             .then((response) => response.json())
18 |             .then((data) =>
19 |                 this.setState({ movies: data.Search, loading: false })
20 |             )
21 |             .catch((err) => {
22 |                 console.error(err);
23 |                 this.setState({ loading: false });
24 |             });
25 |     }
26 | 
27 |     searchMovies = (str, type = 'all') => {
28 |         this.setState({ loading: true });
29 |         fetch(
30 |             `https://www.omdbapi.com/?apikey=${API_KEY}&s=${str}${
31 |                 type !== 'all' ? `&type=${type}` : ''
32 |             }`
33 |         )
34 |             .then((response) => response.json())
35 |             .then((data) =>
36 |                 this.setState({ movies: data.Search, loading: false })
37 |             )
38 |             .catch((err) => {
39 |                 console.error(err);
40 |                 this.setState({ loading: false });
41 |             });
42 |     };
43 | 
44 |     render() {
45 |         const { movies, loading } = this.state;
46 | 
47 |         return (
48 |             <main className="container content">
49 |                 <Search searchMovies={this.searchMovies} />
50 |                 {loading ? <Preloader /> : <Movies movies={movies} />}
51 |             </main>
52 |         );
53 |     }
54 | }
55 | 
56 | export { Main };
57 | 


--------------------------------------------------------------------------------
/11-movies-refactor/finish/Main.jsx:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/michey85/react-course-practice/355488a228b0d36e80f8857368662117491ebca6/11-movies-refactor/finish/Main.jsx


--------------------------------------------------------------------------------
/12-shop-add-item/_start/Shop.jsx:
--------------------------------------------------------------------------------
 1 | import { useState, useEffect } from 'react';
 2 | import { API_KEY, API_URL } from '../config';
 3 | 
 4 | import { Preloader } from './Preloader';
 5 | import { GoodsList } from './GoodsList';
 6 | import { Cart } from './Cart';
 7 | 
 8 | function Shop() {
 9 |     const [goods, setGoods] = useState([]);
10 |     const [loading, setLoading] = useState(true);
11 |     const [order, setOrder] = useState([]);
12 | 
13 |     const addToBasket = (item) => {};
14 | 
15 |     useEffect(function getGoods() {
16 |         fetch(API_URL, {
17 |             headers: {
18 |                 Authorization: API_KEY,
19 |             },
20 |         })
21 |             .then((response) => response.json())
22 |             .then((data) => {
23 |                 data.featured && setGoods(data.featured);
24 |                 setLoading(false);
25 |             });
26 |     }, []);
27 | 
28 |     return (
29 |         <main className="container content">
30 |             <Cart quantity={order.length} />
31 |             {loading ? (
32 |                 <Preloader />
33 |             ) : (
34 |                 <GoodsList goods={goods} addToBasket={addToBasket} />
35 |             )}
36 |         </main>
37 |     );
38 | }
39 | 
40 | export { Shop };
41 | 


--------------------------------------------------------------------------------
/12-shop-add-item/finish/Shop.jsx:
--------------------------------------------------------------------------------
 1 | import { useState, useEffect } from 'react';
 2 | import { API_KEY, API_URL } from '../config';
 3 | 
 4 | import { Preloader } from './Preloader';
 5 | import { GoodsList } from './GoodsList';
 6 | import { Cart } from './Cart';
 7 | 
 8 | function Shop() {
 9 |     const [goods, setGoods] = useState([]);
10 |     const [loading, setLoading] = useState(true);
11 |     const [order, setOrder] = useState([]);
12 | 
13 |     const addToBasket = (item) => {
14 |         const itemIndex = order.findIndex(
15 |             (orderItem) => orderItem.id === item.id
16 |         );
17 | 
18 |         if (itemIndex < 0) {
19 |             const newItem = {
20 |                 ...item,
21 |                 quantity: 1,
22 |             };
23 |             setOrder([...order, newItem]);
24 |         } else {
25 |             const newOrder = order.map((orderItem, index) => {
26 |                 if (index === itemIndex) {
27 |                     return {
28 |                         ...orderItem,
29 |                         quantity: orderItem.quantity + 1,
30 |                     };
31 |                 } else {
32 |                     return orderItem;
33 |                 }
34 |             });
35 | 
36 |             setOrder(newOrder);
37 |         }
38 |     };
39 | 
40 |     useEffect(function getGoods() {
41 |         fetch(API_URL, {
42 |             headers: {
43 |                 Authorization: API_KEY,
44 |             },
45 |         })
46 |             .then((response) => response.json())
47 |             .then((data) => {
48 |                 data.featured && setGoods(data.featured);
49 |                 setLoading(false);
50 |             });
51 |     }, []);
52 | 
53 |     return (
54 |         <main className="container content">
55 |             <Cart quantity={order.length} />
56 |             {loading ? (
57 |                 <Preloader />
58 |             ) : (
59 |                 <GoodsList goods={goods} addToBasket={addToBasket} />
60 |             )}
61 |         </main>
62 |     );
63 | }
64 | 
65 | export { Shop };
66 | 


--------------------------------------------------------------------------------
/13-shop-change-quantity/_start/Shop.jsx:
--------------------------------------------------------------------------------
 1 | import { useState, useEffect } from 'react';
 2 | import { API_KEY, API_URL } from '../config';
 3 | 
 4 | import { Preloader } from './Preloader';
 5 | import { GoodsList } from './GoodsList';
 6 | import { Cart } from './Cart';
 7 | import { BasketList } from './BasketList';
 8 | 
 9 | function Shop() {
10 |     const [goods, setGoods] = useState([]);
11 |     const [loading, setLoading] = useState(true);
12 |     const [order, setOrder] = useState([]);
13 |     const [isBasketShow, setBasketSow] = useState(false);
14 | 
15 |     const addToBasket = (item) => {
16 |         const itemIndex = order.findIndex(
17 |             (orderItem) => orderItem.id === item.id
18 |         );
19 | 
20 |         if (itemIndex < 0) {
21 |             const newItem = {
22 |                 ...item,
23 |                 quantity: 1,
24 |             };
25 |             setOrder([...order, newItem]);
26 |         } else {
27 |             const newOrder = order.map((orderItem, index) => {
28 |                 if (index === itemIndex) {
29 |                     return {
30 |                         ...orderItem,
31 |                         quantity: orderItem.quantity + 1,
32 |                     };
33 |                 } else {
34 |                     return orderItem;
35 |                 }
36 |             });
37 | 
38 |             setOrder(newOrder);
39 |         }
40 |         setAlertName(item.name);
41 |     };
42 | 
43 |     const removeFromBasket = (itemId) => {
44 |         const newOrder = order.filter((el) => el.id !== itemId);
45 |         setOrder(newOrder);
46 |     };
47 | 
48 |     const incQuantity = (itemId) => {};
49 |     const decQuantity = (itemId) => {};
50 | 
51 |     const handleBasketShow = () => {
52 |         setBasketSow(!isBasketShow);
53 |     };
54 | 
55 |     useEffect(function getGoods() {
56 |         fetch(API_URL, {
57 |             headers: {
58 |                 Authorization: API_KEY,
59 |             },
60 |         })
61 |             .then((response) => response.json())
62 |             .then((data) => {
63 |                 data.featured && setGoods(data.featured);
64 |                 setLoading(false);
65 |             });
66 |     }, []);
67 | 
68 |     return (
69 |         <main className="container content">
70 |             <Cart quantity={order.length} handleBasketShow={handleBasketShow} />
71 |             {loading ? (
72 |                 <Preloader />
73 |             ) : (
74 |                 <GoodsList goods={goods} addToBasket={addToBasket} />
75 |             )}
76 |             {isBasketShow && (
77 |                 <BasketList
78 |                     order={order}
79 |                     handleBasketShow={handleBasketShow}
80 |                     removeFromBasket={removeFromBasket}
81 |                 />
82 |             )}
83 |         </main>
84 |     );
85 | }
86 | 
87 | export { Shop };
88 | 


--------------------------------------------------------------------------------
/13-shop-change-quantity/finish/Shop.jsx:
--------------------------------------------------------------------------------
  1 | import { useState, useEffect } from 'react';
  2 | import { API_KEY, API_URL } from '../config';
  3 | 
  4 | import { Preloader } from './Preloader';
  5 | import { GoodsList } from './GoodsList';
  6 | import { Cart } from './Cart';
  7 | import { BasketList } from './BasketList';
  8 | 
  9 | function Shop() {
 10 |     const [goods, setGoods] = useState([]);
 11 |     const [loading, setLoading] = useState(true);
 12 |     const [order, setOrder] = useState([]);
 13 |     const [isBasketShow, setBasketSow] = useState(false);
 14 | 
 15 |     const addToBasket = (item) => {
 16 |         const itemIndex = order.findIndex(
 17 |             (orderItem) => orderItem.id === item.id
 18 |         );
 19 | 
 20 |         if (itemIndex < 0) {
 21 |             const newItem = {
 22 |                 ...item,
 23 |                 quantity: 1,
 24 |             };
 25 |             setOrder([...order, newItem]);
 26 |         } else {
 27 |             const newOrder = order.map((orderItem, index) => {
 28 |                 if (index === itemIndex) {
 29 |                     return {
 30 |                         ...orderItem,
 31 |                         quantity: orderItem.quantity + 1,
 32 |                     };
 33 |                 } else {
 34 |                     return orderItem;
 35 |                 }
 36 |             });
 37 | 
 38 |             setOrder(newOrder);
 39 |         }
 40 |         setAlertName(item.name);
 41 |     };
 42 | 
 43 |     const removeFromBasket = (itemId) => {
 44 |         const newOrder = order.filter((el) => el.id !== itemId);
 45 |         setOrder(newOrder);
 46 |     };
 47 | 
 48 |     const incQuantity = (itemId) => {
 49 |         const newOrder = order.map((el) => {
 50 |             if (el.id === itemId) {
 51 |                 const newQuantity = el.quantity + 1;
 52 |                 return {
 53 |                     ...el,
 54 |                     quantity: newQuantity,
 55 |                 };
 56 |             } else {
 57 |                 return el;
 58 |             }
 59 |         });
 60 |         setOrder(newOrder);
 61 |     };
 62 |     const decQuantity = (itemId) => {
 63 |         const newOrder = order.map((el) => {
 64 |             if (el.id === itemId) {
 65 |                 const newQuantity = el.quantity - 1;
 66 |                 return {
 67 |                     ...el,
 68 |                     quantity: newQuantity >= 0 ? newQuantity : 0,
 69 |                 };
 70 |             } else {
 71 |                 return el;
 72 |             }
 73 |         });
 74 |         setOrder(newOrder);
 75 |     };
 76 | 
 77 |     const handleBasketShow = () => {
 78 |         setBasketSow(!isBasketShow);
 79 |     };
 80 | 
 81 |     useEffect(function getGoods() {
 82 |         fetch(API_URL, {
 83 |             headers: {
 84 |                 Authorization: API_KEY,
 85 |             },
 86 |         })
 87 |             .then((response) => response.json())
 88 |             .then((data) => {
 89 |                 data.featured && setGoods(data.featured);
 90 |                 setLoading(false);
 91 |             });
 92 |     }, []);
 93 | 
 94 |     return (
 95 |         <main className="container content">
 96 |             <Cart quantity={order.length} handleBasketShow={handleBasketShow} />
 97 |             {loading ? (
 98 |                 <Preloader />
 99 |             ) : (
100 |                 <GoodsList goods={goods} addToBasket={addToBasket} />
101 |             )}
102 |             {isBasketShow && (
103 |                 <BasketList
104 |                     order={order}
105 |                     handleBasketShow={handleBasketShow}
106 |                     removeFromBasket={removeFromBasket}
107 |                     incQuantity={incQuantity}
108 |                     decQuantity={decQuantity}
109 |                 />
110 |             )}
111 |         </main>
112 |     );
113 | }
114 | 
115 | export { Shop };
116 | 


--------------------------------------------------------------------------------
/14-reducer-practice/_start/context.js:
--------------------------------------------------------------------------------
 1 | import { createContext, useReducer } from 'react';
 2 | import { reducer } from './reducer';
 3 | 
 4 | export const ShopContext = createContext();
 5 | 
 6 | const initialState = {
 7 |     goods: [],
 8 |     loading: true,
 9 |     order: [],
10 |     isBasketShow: false,
11 |     alertName: '',
12 | };
13 | 
14 | export const ContextProvider = ({ children }) => {
15 |     const [value, dispatch] = useReducer(reducer, initialState);
16 | 
17 |     value.closeAlert = () => {
18 |         dispatch({ type: 'CLOSE_ALERT' });
19 |     };
20 | 
21 |     value.removeFromBasket = (itemId) => {
22 |         dispatch({ type: 'REMOVE_FROM_BASKET', payload: { id: itemId } });
23 |     };
24 | 
25 |     return (
26 |         <ShopContext.Provider value={value}>{children}</ShopContext.Provider>
27 |     );
28 | };
29 | 


--------------------------------------------------------------------------------
/14-reducer-practice/_start/reducer.js:
--------------------------------------------------------------------------------
 1 | export function reducer(state, { type, payload }) {
 2 |     switch (type) {
 3 |         case 'REMOVE_FROM_BASKET':
 4 |             return {
 5 |                 ...state,
 6 |                 order: state.order.filter((el) => el.id !== payload.id),
 7 |             };
 8 |         case 'CLOSE_ALERT':
 9 |             return {
10 |                 ...state,
11 |                 alertName: '',
12 |             };
13 |         default:
14 |             return state;
15 |     }
16 | }
17 | 


--------------------------------------------------------------------------------
/14-reducer-practice/finish/context.js:
--------------------------------------------------------------------------------
 1 | import { createContext, useReducer } from 'react';
 2 | import { reducer } from './reducer';
 3 | 
 4 | export const ShopContext = createContext();
 5 | 
 6 | const initialState = {
 7 |     goods: [],
 8 |     loading: true,
 9 |     order: [],
10 |     isBasketShow: false,
11 |     alertName: '',
12 | };
13 | 
14 | export const ContextProvider = ({ children }) => {
15 |     const [value, dispatch] = useReducer(reducer, initialState);
16 | 
17 |     value.closeAlert = () => {
18 |         dispatch({ type: 'CLOSE_ALERT' });
19 |     };
20 | 
21 |     value.addToBasket = (item) => {
22 |         dispatch({ type: 'ADD_TO_BASKET', payload: item });
23 |     };
24 | 
25 |     value.incQuantity = (itemId) => {
26 |         dispatch({ type: 'INCREMENT_QUANTITY', payload: { id: itemId } });
27 |     };
28 | 
29 |     value.decQuantity = (itemId) => {
30 |         dispatch({ type: 'DECREMENT_QUANTITY', payload: { id: itemId } });
31 |     };
32 | 
33 |     value.removeFromBasket = (itemId) => {
34 |         dispatch({ type: 'REMOVE_FROM_BASKET', payload: { id: itemId } });
35 |     };
36 | 
37 |     value.handleBasketShow = () => {
38 |         dispatch({ type: 'TOGGLE_BASKET' });
39 |     };
40 | 
41 |     return (
42 |         <ShopContext.Provider value={value}>{children}</ShopContext.Provider>
43 |     );
44 | };
45 | 


--------------------------------------------------------------------------------
/14-reducer-practice/finish/reducer.js:
--------------------------------------------------------------------------------
 1 | export function reducer(state, { type, payload }) {
 2 |     switch (type) {
 3 |         case 'ADD_TO_BASKET': {
 4 |             const itemIndex = state.order.findIndex(
 5 |                 (orderItem) => orderItem.id === payload.id
 6 |             );
 7 | 
 8 |             let newOrder = null;
 9 |             if (itemIndex < 0) {
10 |                 const newItem = {
11 |                     ...payload,
12 |                     quantity: 1,
13 |                 };
14 |                 newOrder = [...state.order, newItem];
15 |             } else {
16 |                 newOrder = state.order.map((orderItem, index) => {
17 |                     if (index === itemIndex) {
18 |                         return {
19 |                             ...orderItem,
20 |                             quantity: orderItem.quantity + 1,
21 |                         };
22 |                     } else {
23 |                         return orderItem;
24 |                     }
25 |                 });
26 |             }
27 | 
28 |             return {
29 |                 ...state,
30 |                 order: newOrder,
31 |                 alertName: payload.name,
32 |             };
33 |         }
34 |         case 'REMOVE_FROM_BASKET':
35 |             return {
36 |                 ...state,
37 |                 order: state.order.filter((el) => el.id !== payload.id),
38 |             };
39 |         case 'INCREMENT_QUANTITY':
40 |             return {
41 |                 ...state,
42 |                 order: state.order.map((el) => {
43 |                     if (el.id === payload.id) {
44 |                         const newQuantity = el.quantity + 1;
45 |                         return {
46 |                             ...el,
47 |                             quantity: newQuantity,
48 |                         };
49 |                     } else {
50 |                         return el;
51 |                     }
52 |                 }),
53 |             };
54 |         case 'DECREMENT_QUANTITY':
55 |             return {
56 |                 ...state,
57 |                 order: state.order.map((el) => {
58 |                     if (el.id === payload.id) {
59 |                         const newQuantity = el.quantity - 1;
60 |                         return {
61 |                             ...el,
62 |                             quantity: newQuantity >= 0 ? newQuantity : 0,
63 |                         };
64 |                     } else {
65 |                         return el;
66 |                     }
67 |                 }),
68 |             };
69 |         case 'CLOSE_ALERT':
70 |             return {
71 |                 ...state,
72 |                 alertName: '',
73 |             };
74 |         case 'TOGGLE_BASKET':
75 |             return {
76 |                 ...state,
77 |                 isBasketShow: !state.isBasketShow,
78 |             };
79 |         default:
80 |             return state;
81 |     }
82 | }
83 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Практические задания к курсу "React с нуля для начинающих"
2 | 
3 | Практические задания разбиты по директориям с соответствующей нумерацией.
4 | 
5 | Внутри каждой практики есть две папки:
6 | - ***_start*** - содержит необходимые файлы для начала выполнения практического задания
7 | - ***finish*** - содержит один из возможных вариантов решения практического задания
8 | 


--------------------------------------------------------------------------------