├── README.md
├── final
    ├── .gitignore
    ├── README.md
    ├── package-lock.json
    ├── package.json
    ├── public
    │   ├── favicon.ico
    │   ├── index.html
    │   ├── logo192.png
    │   ├── logo512.png
    │   ├── manifest.json
    │   └── robots.txt
    └── src
    │   ├── App.js
    │   ├── cartItems.js
    │   ├── components
    │       ├── CartContainer.js
    │       ├── CartItem.js
    │       ├── Modal.js
    │       └── Navbar.js
    │   ├── features
    │       ├── cart
    │       │   └── cartSlice.js
    │       └── modal
    │       │   └── modalSlice.js
    │   ├── icons.js
    │   ├── index.css
    │   ├── index.js
    │   └── store.js
├── starter
    ├── .gitignore
    ├── README.md
    ├── package-lock.json
    ├── package.json
    ├── public
    │   ├── favicon.ico
    │   ├── index.html
    │   ├── logo192.png
    │   ├── logo512.png
    │   ├── manifest.json
    │   └── robots.txt
    └── src
    │   ├── App.js
    │   ├── cartItems.js
    │   ├── icons.js
    │   ├── index.css
    │   └── index.js
├── vite-final
    ├── .gitignore
    ├── index.html
    ├── package-lock.json
    ├── package.json
    ├── public
    │   └── vite.svg
    ├── src
    │   ├── App.jsx
    │   ├── assets
    │   │   └── react.svg
    │   ├── cartItems.js
    │   ├── components
    │   │   ├── CartContainer.jsx
    │   │   ├── CartItem.jsx
    │   │   ├── Modal.jsx
    │   │   └── Navbar.jsx
    │   ├── features
    │   │   ├── cart
    │   │   │   └── cartSlice.js
    │   │   └── modal
    │   │   │   └── modalSlice.js
    │   ├── icons.jsx
    │   ├── index.css
    │   ├── main.jsx
    │   └── store.js
    └── vite.config.js
└── vite-starter
    ├── .gitignore
    ├── index.html
    ├── package-lock.json
    ├── package.json
    ├── public
        └── vite.svg
    ├── src
        ├── App.jsx
        ├── assets
        │   └── react.svg
        ├── cartItems.js
        ├── icons.jsx
        ├── index.css
        └── main.jsx
    └── vite.config.js


/README.md:
--------------------------------------------------------------------------------
1 | ## Vite Option
2 | 
3 | I have added two folders called vite-starter and vite-final. If you prefer to work with Vite instead of CRA, simply use the Vite folders. The Redux Toolkit functionality is the same in both setups.
4 | 


--------------------------------------------------------------------------------
/final/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | /.pnp
 6 | .pnp.js
 7 | 
 8 | # testing
 9 | /coverage
10 | 
11 | # production
12 | /build
13 | 
14 | # misc
15 | .DS_Store
16 | .env.local
17 | .env.development.local
18 | .env.test.local
19 | .env.production.local
20 | 
21 | npm-debug.log*
22 | yarn-debug.log*
23 | yarn-error.log*
24 | 


--------------------------------------------------------------------------------
/final/README.md:
--------------------------------------------------------------------------------
  1 | # Redux Toolkit
  2 | 
  3 | #### React Course
  4 | 
  5 | [My React Course](https://www.udemy.com/course/react-tutorial-and-projects-course/?referralCode=FEE6A921AF07E2563CEF)
  6 | 
  7 | #### Support
  8 | 
  9 | Find the App Useful? [You can always buy me a coffee](https://www.buymeacoffee.com/johnsmilga)
 10 | 
 11 | #### Docs
 12 | 
 13 | [Redux Toolkit Docs](https://redux-toolkit.js.org/introduction/getting-started)
 14 | 
 15 | #### Install Template
 16 | 
 17 | ```sh
 18 | npx create-react-app my-app --template redux
 19 | ```
 20 | 
 21 | - @latest
 22 | 
 23 | ```sh
 24 | npx create-react-app@latest my-app --template redux
 25 | ```
 26 | 
 27 | #### Existing App
 28 | 
 29 | ```sh
 30 | npm install @reduxjs/toolkit react-redux
 31 | ```
 32 | 
 33 | #### @reduxjs/toolkit
 34 | 
 35 | consists of few libraries
 36 | 
 37 | - redux (core library, state management)
 38 | - immer (allows to mutate state)
 39 | - redux-thunk (handles async actions)
 40 | - reselect (simplifies reducer functions)
 41 | 
 42 | #### Extras
 43 | 
 44 | - redux devtools
 45 | - combine reducers
 46 | 
 47 | #### react-redux
 48 | 
 49 | connects our app to redux
 50 | 
 51 | #### Setup Store
 52 | 
 53 | - create store.js
 54 | 
 55 | ```js
 56 | import { configureStore } from '@reduxjs/toolkit';
 57 | 
 58 | export const store = configureStore({
 59 |   reducer: {},
 60 | });
 61 | ```
 62 | 
 63 | #### Setup Provider
 64 | 
 65 | - index.js
 66 | 
 67 | ```js
 68 | import React from 'react';
 69 | import ReactDOM from 'react-dom';
 70 | import './index.css';
 71 | import App from './App';
 72 | // import store and provider
 73 | import { store } from './store';
 74 | import { Provider } from 'react-redux';
 75 | 
 76 | ReactDOM.render(
 77 |   <React.StrictMode>
 78 |     <Provider store={store}>
 79 |       <App />
 80 |     </Provider>
 81 |   </React.StrictMode>,
 82 |   document.getElementById('root')
 83 | );
 84 | ```
 85 | 
 86 | #### Setup Cart Slice
 87 | 
 88 | - application feature
 89 | - create features folder/cart
 90 | - create cartSlice.js
 91 | 
 92 | ```js
 93 | import { createSlice } from '@reduxjs/toolkit';
 94 | 
 95 | const initialState = {
 96 |   cartItems: [],
 97 |   amount: 0,
 98 |   total: 0,
 99 |   isLoading: true,
100 | };
101 | 
102 | const cartSlice = createSlice({
103 |   name: 'cart',
104 |   initialState,
105 | });
106 | 
107 | console.log(cartSlice);
108 | 
109 | export default cartSlice.reducer;
110 | ```
111 | 
112 | - store.js
113 | 
114 | ```js
115 | import { configureStore } from '@reduxjs/toolkit';
116 | import cartReducer from './features/cart/cartSlice';
117 | 
118 | export const store = configureStore({
119 |   reducer: {
120 |     cart: cartReducer,
121 |   },
122 | });
123 | ```
124 | 
125 | #### Redux DevTools
126 | 
127 | - extension
128 | 
129 | #### Access store value
130 | 
131 | - create components/Navbar.js
132 | 
133 | ```js
134 | import { CartIcon } from '../icons';
135 | import { useSelector } from 'react-redux';
136 | 
137 | const Navbar = () => {
138 |   const { amount } = useSelector((state) => state.cart);
139 | 
140 |   return (
141 |     <nav>
142 |       <div className='nav-center'>
143 |         <h3>redux toolkit</h3>
144 |         <div className='nav-container'>
145 |           <CartIcon />
146 |           <div className='amount-container'>
147 |             <p className='total-amount'>{amount}</p>
148 |           </div>
149 |         </div>
150 |       </div>
151 |     </nav>
152 |   );
153 | };
154 | export default Navbar;
155 | ```
156 | 
157 | #### Hero Icons
158 | 
159 | - [Hero Icons](https://heroicons.com/)
160 | 
161 | ```css
162 | nav svg {
163 |   width: 40px;
164 |   color: var(--clr-white);
165 | }
166 | ```
167 | 
168 | #### Setup Cart
169 | 
170 | - cartSlice.js
171 | 
172 | ```js
173 | import cartItems from '../../cartItems';
174 | 
175 | const initialState = {
176 |   cartItems: cartItems,
177 |   amount: 0,
178 |   total: 0,
179 |   isLoading: true,
180 | };
181 | ```
182 | 
183 | - create CartContainer.js and CartItem.js
184 | - CartContainer.js
185 | 
186 | ```js
187 | import React from 'react';
188 | import CartItem from './CartItem';
189 | import { useSelector } from 'react-redux';
190 | 
191 | const CartContainer = () => {
192 |   const { cartItems, total, amount } = useSelector((state) => state.cart);
193 | 
194 |   if (amount < 1) {
195 |     return (
196 |       <section className='cart'>
197 |         {/* cart header */}
198 |         <header>
199 |           <h2>your bag</h2>
200 |           <h4 className='empty-cart'>is currently empty</h4>
201 |         </header>
202 |       </section>
203 |     );
204 |   }
205 |   return (
206 |     <section className='cart'>
207 |       {/* cart header */}
208 |       <header>
209 |         <h2>your bag</h2>
210 |       </header>
211 |       {/* cart items */}
212 |       <div>
213 |         {cartItems.map((item) => {
214 |           return <CartItem key={item.id} {...item} />;
215 |         })}
216 |       </div>
217 |       {/* cart footer */}
218 |       <footer>
219 |         <hr />
220 |         <div className='cart-total'>
221 |           <h4>
222 |             total <span>${total}</span>
223 |           </h4>
224 |         </div>
225 |         <button className='btn clear-btn'>clear cart</button>
226 |       </footer>
227 |     </section>
228 |   );
229 | };
230 | 
231 | export default CartContainer;
232 | ```
233 | 
234 | - CartItem.js
235 | 
236 | ```js
237 | import React from 'react';
238 | import { ChevronDown, ChevronUp } from '../icons';
239 | 
240 | const CartItem = ({ id, img, title, price, amount }) => {
241 |   return (
242 |     <article className='cart-item'>
243 |       <img src={img} alt={title} />
244 |       <div>
245 |         <h4>{title}</h4>
246 |         <h4 className='item-price'>${price}</h4>
247 |         {/* remove button */}
248 |         <button className='remove-btn'>remove</button>
249 |       </div>
250 |       <div>
251 |         {/* increase amount */}
252 |         <button className='amount-btn'>
253 |           <ChevronUp />
254 |         </button>
255 |         {/* amount */}
256 |         <p className='amount'>{amount}</p>
257 |         {/* decrease amount */}
258 |         <button className='amount-btn'>
259 |           <ChevronDown />
260 |         </button>
261 |       </div>
262 |     </article>
263 |   );
264 | };
265 | 
266 | export default CartItem;
267 | ```
268 | 
269 | #### First Reducer
270 | 
271 | - cartSlice.js
272 | - Immer library
273 | 
274 | ```js
275 | const cartSlice = createSlice({
276 |   name: 'cart',
277 |   initialState,
278 |   reducers: {
279 |     clearCart: (state) => {
280 |       state.cartItems = [];
281 |     },
282 |   },
283 | });
284 | 
285 | export const { clearCart } = cartSlice.actions;
286 | ```
287 | 
288 | - create action
289 | 
290 | ```js
291 | const ACTION_TYPE = 'ACTION_TYPE';
292 | 
293 | const actionCreator = (payload) => {
294 |   return { type: ACTION_TYPE, payload: payload };
295 | };
296 | ```
297 | 
298 | - CartContainer.js
299 | 
300 | ```js
301 | import React from 'react';
302 | import CartItem from './CartItem';
303 | import { useDispatch, useSelector } from 'react-redux';
304 | 
305 | const CartContainer = () => {
306 |   const dispatch = useDispatch();
307 | 
308 |   return (
309 |     <button
310 |       className='btn clear-btn'
311 |       onClick={() => {
312 |         dispatch(clearCart());
313 |       }}
314 |     >
315 |       clear cart
316 |     </button>
317 |   );
318 | };
319 | 
320 | export default CartContainer;
321 | ```
322 | 
323 | #### Remove, Increase, Decrease
324 | 
325 | - cartSlice.js
326 | 
327 | ```js
328 | import { createSlice } from '@reduxjs/toolkit';
329 | import cartItems from '../../cartItems';
330 | 
331 | const initialState = {
332 |   cartItems: [],
333 |   amount: 0,
334 |   total: 0,
335 |   isLoading: true,
336 | };
337 | 
338 | const cartSlice = createSlice({
339 |   name: 'cart',
340 |   initialState,
341 |   reducers: {
342 |     clearCart: (state) => {
343 |       state.cartItems = [];
344 |     },
345 |     removeItem: (state, action) => {
346 |       const itemId = action.payload;
347 |       state.cartItems = state.cartItems.filter((item) => item.id !== itemId);
348 |     },
349 |     increase: (state, { payload }) => {
350 |       const cartItem = state.cartItems.find((item) => item.id === payload.id);
351 |       cartItem.amount = cartItem.amount + 1;
352 |     },
353 |     decrease: (state, { payload }) => {
354 |       const cartItem = state.cartItems.find((item) => item.id === payload.id);
355 |       cartItem.amount = cartItem.amount - 1;
356 |     },
357 |     calculateTotals: (state) => {
358 |       let amount = 0;
359 |       let total = 0;
360 |       state.cartItems.forEach((item) => {
361 |         amount += item.amount;
362 |         total += item.amount * item.price;
363 |       });
364 |       state.amount = amount;
365 |       state.total = total;
366 |     },
367 |   },
368 | });
369 | 
370 | export const { clearCart, removeItem, increase, decrease, calculateTotals } =
371 |   cartSlice.actions;
372 | 
373 | export default cartSlice.reducer;
374 | ```
375 | 
376 | - CartItem.js
377 | 
378 | ```js
379 | import React from 'react';
380 | import { ChevronDown, ChevronUp } from '../icons';
381 | 
382 | import { useDispatch } from 'react-redux';
383 | import { removeItem, increase, decrease } from '../features/cart/cartSlice';
384 | 
385 | const CartItem = ({ id, img, title, price, amount }) => {
386 |   const dispatch = useDispatch();
387 | 
388 |   return (
389 |     <article className='cart-item'>
390 |       <img src={img} alt={title} />
391 |       <div>
392 |         <h4>{title}</h4>
393 |         <h4 className='item-price'>${price}</h4>
394 |         {/* remove button */}
395 |         <button
396 |           className='remove-btn'
397 |           onClick={() => {
398 |             dispatch(removeItem(id));
399 |           }}
400 |         >
401 |           remove
402 |         </button>
403 |       </div>
404 |       <div>
405 |         {/* increase amount */}
406 |         <button
407 |           className='amount-btn'
408 |           onClick={() => {
409 |             dispatch(increase({ id }));
410 |           }}
411 |         >
412 |           <ChevronUp />
413 |         </button>
414 |         {/* amount */}
415 |         <p className='amount'>{amount}</p>
416 |         {/* decrease amount */}
417 |         <button
418 |           className='amount-btn'
419 |           onClick={() => {
420 |             if (amount === 1) {
421 |               dispatch(removeItem(id));
422 |               return;
423 |             }
424 |             dispatch(decrease({ id }));
425 |           }}
426 |         >
427 |           <ChevronDown />
428 |         </button>
429 |       </div>
430 |     </article>
431 |   );
432 | };
433 | 
434 | export default CartItem;
435 | ```
436 | 
437 | - App.js
438 | 
439 | ```js
440 | import { useEffect } from 'react';
441 | import Navbar from './components/Navbar';
442 | import CartContainer from './components/CartContainer';
443 | import { useSelector, useDispatch } from 'react-redux';
444 | import { calculateTotals } from './features/cart/cartSlice';
445 | 
446 | function App() {
447 |   const { cartItems } = useSelector((state) => state.cart);
448 |   const dispatch = useDispatch();
449 |   useEffect(() => {
450 |     dispatch(calculateTotals());
451 |   }, [cartItems]);
452 | 
453 |   return (
454 |     <main>
455 |       <Navbar />
456 |       <CartContainer />
457 |     </main>
458 |   );
459 | }
460 | 
461 | export default App;
462 | ```
463 | 
464 | #### Modal
465 | 
466 | - create components/Modal.js
467 | 
468 | ```js
469 | const Modal = () => {
470 |   return (
471 |     <aside className='modal-container'>
472 |       <div className='modal'>
473 |         <h4>Remove all items from your shopping cart?</h4>
474 |         <div className='btn-container'>
475 |           <button type='button' className='btn confirm-btn'>
476 |             confirm
477 |           </button>
478 |           <button type='button' className='btn clear-btn'>
479 |             cancel
480 |           </button>
481 |         </div>
482 |       </div>
483 |     </aside>
484 |   );
485 | };
486 | export default Modal;
487 | ```
488 | 
489 | - App.js
490 | 
491 | ```js
492 | return (
493 |   <main>
494 |     <Modal />
495 |     <Navbar />
496 |     <CartContainer />
497 |   </main>
498 | );
499 | ```
500 | 
501 | #### modal slice
502 | 
503 | - create features/modal/modalSlice.js
504 | 
505 | ```js
506 | import { createSlice } from '@reduxjs/toolkit';
507 | const initialState = {
508 |   isOpen: false,
509 | };
510 | 
511 | const modalSlice = createSlice({
512 |   name: 'modal',
513 |   initialState,
514 |   reducers: {
515 |     openModal: (state, action) => {
516 |       state.isOpen = true;
517 |     },
518 |     closeModal: (state, action) => {
519 |       state.isOpen = false;
520 |     },
521 |   },
522 | });
523 | 
524 | export const { openModal, closeModal } = modalSlice.actions;
525 | export default modalSlice.reducer;
526 | ```
527 | 
528 | - App.js
529 | 
530 | ```js
531 | const { isOpen } = useSelector((state) => state.modal);
532 | 
533 | return (
534 |   <main>
535 |     {isOpen && <Modal />}
536 |     <Navbar />
537 |     <CartContainer />
538 |   </main>
539 | );
540 | ```
541 | 
542 | #### toggle modal
543 | 
544 | - CartContainer.js
545 | 
546 | ```js
547 | import { openModal } from '../features/modal/modalSlice';
548 | 
549 | return (
550 |   <button
551 |     className='btn clear-btn'
552 |     onClick={() => {
553 |       dispatch(openModal());
554 |     }}
555 |   >
556 |     clear cart
557 |   </button>
558 | );
559 | ```
560 | 
561 | - Modal.js
562 | 
563 | ```js
564 | import { closeModal } from '../features/modal/modalSlice';
565 | import { useDispatch } from 'react-redux';
566 | import { clearCart } from '../features/cart/cartSlice';
567 | 
568 | const Modal = () => {
569 |   const dispatch = useDispatch();
570 | 
571 |   return (
572 |     <aside className='modal-container'>
573 |       <div className='modal'>
574 |         <h4>Remove all items from your shopping cart?</h4>
575 |         <div className='btn-container'>
576 |           <button
577 |             type='button'
578 |             className='btn confirm-btn'
579 |             onClick={() => {
580 |               dispatch(clearCart());
581 |               dispatch(closeModal());
582 |             }}
583 |           >
584 |             confirm
585 |           </button>
586 |           <button
587 |             type='button'
588 |             className='btn clear-btn'
589 |             onClick={() => {
590 |               dispatch(closeModal());
591 |             }}
592 |           >
593 |             cancel
594 |           </button>
595 |         </div>
596 |       </div>
597 |     </aside>
598 |   );
599 | };
600 | export default Modal;
601 | ```
602 | 
603 | #### async functionality with createAsyncThunk
604 | 
605 | - [Course API](https://course-api.com/)
606 | - https://course-api.com/react-useReducer-cart-project
607 | - cartSlice.js
608 | 
609 | - action type
610 | - callback function
611 | - lifecycle actions
612 | 
613 | ```js
614 | import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';
615 | 
616 | const url = 'https://course-api.com/react-useReducer-cart-project';
617 | 
618 | export const getCartItems = createAsyncThunk('cart/getCartItems', () => {
619 |   return fetch(url)
620 |     .then((resp) => resp.json())
621 |     .catch((err) => console.log(error));
622 | });
623 | 
624 | const cartSlice = createSlice({
625 |   name: 'cart',
626 |   initialState,
627 |   extraReducers: {
628 |     [getCartItems.pending]: (state) => {
629 |       state.isLoading = true;
630 |     },
631 |     [getCartItems.fulfilled]: (state, action) => {
632 |       console.log(action);
633 |       state.isLoading = false;
634 |       state.cartItems = action.payload;
635 |     },
636 |     [getCartItems.rejected]: (state) => {
637 |       state.isLoading = false;
638 |     },
639 |   },
640 | });
641 | ```
642 | 
643 | - App.js
644 | 
645 | ```js
646 | import { calculateTotals, getCartItems } from './features/cart/cartSlice';
647 | 
648 | function App() {
649 |   const { cartItems, isLoading } = useSelector((state) => state.cart);
650 | 
651 |   useEffect(() => {
652 |     dispatch(getCartItems());
653 |   }, []);
654 | 
655 |   if (isLoading) {
656 |     return (
657 |       <div className='loading'>
658 |         <h1>Loading...</h1>
659 |       </div>
660 |     );
661 |   }
662 | 
663 |   return (
664 |     <main>
665 |       {isOpen && <Modal />}
666 |       <Navbar />
667 |       <CartContainer />
668 |     </main>
669 |   );
670 | }
671 | 
672 | export default App;
673 | ```
674 | 
675 | #### Options
676 | 
677 | ```sh
678 | npm install axios
679 | ```
680 | 
681 | - cartSlice.js
682 | 
683 | ```js
684 | export const getCartItems = createAsyncThunk(
685 |   'cart/getCartItems',
686 |   async (name, thunkAPI) => {
687 |     try {
688 |       // console.log(name);
689 |       // console.log(thunkAPI);
690 |       // console.log(thunkAPI.getState());
691 |       // thunkAPI.dispatch(openModal());
692 |       const resp = await axios(url);
693 | 
694 |       return resp.data;
695 |     } catch (error) {
696 |       return thunkAPI.rejectWithValue('something went wrong');
697 |     }
698 |   }
699 | );
700 | ```
701 | 
702 | #### The extraReducers "builder callback" notation
703 | 
704 | cart/cartSlice
705 | 
706 | ```js
707 | const cartSlice = createSlice({
708 |   name: 'cart',
709 |   initialState,
710 |   reducers: {
711 |     // reducers
712 |   },
713 |   extraReducers: (builder) => {
714 |     builder
715 |       .addCase(getCartItems.pending, (state) => {
716 |         state.isLoading = true;
717 |       })
718 |       .addCase(getCartItems.fulfilled, (state, action) => {
719 |         // console.log(action);
720 |         state.isLoading = false;
721 |         state.cartItems = action.payload;
722 |       })
723 |       .addCase(getCartItems.rejected, (state, action) => {
724 |         console.log(action);
725 |         state.isLoading = false;
726 |       });
727 |   },
728 | });
729 | ```
730 | 


--------------------------------------------------------------------------------
/final/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "redux-toolkit-tutorial",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "dependencies": {
 6 |     "@reduxjs/toolkit": "^1.9.0",
 7 |     "@testing-library/jest-dom": "^5.16.5",
 8 |     "@testing-library/react": "^13.4.0",
 9 |     "@testing-library/user-event": "^13.5.0",
10 |     "axios": "^1.1.3",
11 |     "react": "^18.2.0",
12 |     "react-dom": "^18.2.0",
13 |     "react-redux": "^8.0.5",
14 |     "react-scripts": "5.0.1",
15 |     "web-vitals": "^2.1.4"
16 |   },
17 |   "scripts": {
18 |     "start": "react-scripts start",
19 |     "build": "react-scripts build",
20 |     "test": "react-scripts test",
21 |     "eject": "react-scripts eject"
22 |   },
23 |   "eslintConfig": {
24 |     "extends": [
25 |       "react-app",
26 |       "react-app/jest"
27 |     ]
28 |   },
29 |   "browserslist": {
30 |     "production": [
31 |       ">0.2%",
32 |       "not dead",
33 |       "not op_mini all"
34 |     ],
35 |     "development": [
36 |       "last 1 chrome version",
37 |       "last 1 firefox version",
38 |       "last 1 safari version"
39 |     ]
40 |   }
41 | }
42 | 


--------------------------------------------------------------------------------
/final/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/john-smilga/redux-toolkit-tutorial/f4bae75974fb8d78c40397d9d0c95299cc4609e2/final/public/favicon.ico


--------------------------------------------------------------------------------
/final/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1" />
 7 |     <meta name="theme-color" content="#000000" />
 8 |     <meta
 9 |       name="description"
10 |       content="Web site created using create-react-app"
11 |     />
12 |     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
13 |     <!--
14 |       manifest.json provides metadata used when your web app is installed on a
15 |       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
16 |     -->
17 |     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
18 |     <!--
19 |       Notice the use of %PUBLIC_URL% in the tags above.
20 |       It will be replaced with the URL of the `public` folder during the build.
21 |       Only files inside the `public` folder can be referenced from the HTML.
22 | 
23 |       Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
24 |       work correctly both with client-side routing and a non-root public URL.
25 |       Learn how to configure a non-root public URL by running `npm run build`.
26 |     -->
27 |     <title>Redux Toolkit</title>
28 |   </head>
29 |   <body>
30 |     <noscript>You need to enable JavaScript to run this app.</noscript>
31 |     <div id="root"></div>
32 |     <!--
33 |       This HTML file is a template.
34 |       If you open it directly in the browser, you will see an empty page.
35 | 
36 |       You can add webfonts, meta tags, or analytics to this file.
37 |       The build step will place the bundled scripts into the <body> tag.
38 | 
39 |       To begin the development, run `npm start` or `yarn start`.
40 |       To create a production bundle, use `npm run build` or `yarn build`.
41 |     -->
42 |   </body>
43 | </html>
44 | 


--------------------------------------------------------------------------------
/final/public/logo192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/john-smilga/redux-toolkit-tutorial/f4bae75974fb8d78c40397d9d0c95299cc4609e2/final/public/logo192.png


--------------------------------------------------------------------------------
/final/public/logo512.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/john-smilga/redux-toolkit-tutorial/f4bae75974fb8d78c40397d9d0c95299cc4609e2/final/public/logo512.png


--------------------------------------------------------------------------------
/final/public/manifest.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "short_name": "React App",
 3 |   "name": "Create React App Sample",
 4 |   "icons": [
 5 |     {
 6 |       "src": "favicon.ico",
 7 |       "sizes": "64x64 32x32 24x24 16x16",
 8 |       "type": "image/x-icon"
 9 |     },
10 |     {
11 |       "src": "logo192.png",
12 |       "type": "image/png",
13 |       "sizes": "192x192"
14 |     },
15 |     {
16 |       "src": "logo512.png",
17 |       "type": "image/png",
18 |       "sizes": "512x512"
19 |     }
20 |   ],
21 |   "start_url": ".",
22 |   "display": "standalone",
23 |   "theme_color": "#000000",
24 |   "background_color": "#ffffff"
25 | }
26 | 


--------------------------------------------------------------------------------
/final/public/robots.txt:
--------------------------------------------------------------------------------
1 | # https://www.robotstxt.org/robotstxt.html
2 | User-agent: *
3 | Disallow:
4 | 


--------------------------------------------------------------------------------
/final/src/App.js:
--------------------------------------------------------------------------------
 1 | import Navbar from './components/Navbar';
 2 | import CartContainer from './components/CartContainer';
 3 | 
 4 | import { useDispatch, useSelector } from 'react-redux';
 5 | import { calculateTotals, getCartItems } from './features/cart/cartSlice';
 6 | import { useEffect } from 'react';
 7 | import Modal from './components/Modal';
 8 | function App() {
 9 |   const { cartItems, isLoading } = useSelector((store) => store.cart);
10 |   const { isOpen } = useSelector((store) => store.modal);
11 |   const dispatch = useDispatch();
12 | 
13 |   useEffect(() => {
14 |     dispatch(calculateTotals());
15 |   }, [cartItems]);
16 | 
17 |   useEffect(() => {
18 |     dispatch(getCartItems('random'));
19 |   }, []);
20 | 
21 |   if (isLoading) {
22 |     return (
23 |       <div className='loading'>
24 |         <h1>Loading...</h1>
25 |       </div>
26 |     );
27 |   }
28 | 
29 |   return (
30 |     <main>
31 |       {isOpen && <Modal />}
32 |       <Navbar />
33 |       <CartContainer />
34 |     </main>
35 |   );
36 | }
37 | export default App;
38 | 


--------------------------------------------------------------------------------
/final/src/cartItems.js:
--------------------------------------------------------------------------------
 1 | const cartItems = [
 2 |   {
 3 |     id: 'rec1JZlfCIBOPdcT2',
 4 |     title: 'Samsung Galaxy S8',
 5 |     price: '399.99',
 6 |     img: 'https://images2.imgbox.com/c2/14/zedmXgs6_o.png',
 7 |     amount: 1,
 8 |   },
 9 |   {
10 |     id: 'recB6qcHPxb62YJ75',
11 |     title: 'google pixel',
12 |     price: '499.99',
13 |     img: 'https://images2.imgbox.com/fb/3d/O4TPmhlt_o.png',
14 |     amount: 1,
15 |   },
16 |   {
17 |     id: 'recdRxBsE14Rr2VuJ',
18 |     title: 'Xiaomi Redmi Note 2',
19 |     price: '699.99',
20 |     img: 'https://images2.imgbox.com/4f/3d/WN3GvciF_o.png',
21 |     amount: 1,
22 |   },
23 |   {
24 |     id: 'recwTo160XST3PIoW',
25 |     title: 'Samsung Galaxy S7',
26 |     price: '599.99 ',
27 |     img: 'https://images2.imgbox.com/2e/7c/yFsJ4Zkb_o.png',
28 |     amount: 1,
29 |   },
30 | ];
31 | export default cartItems;
32 | 


--------------------------------------------------------------------------------
/final/src/components/CartContainer.js:
--------------------------------------------------------------------------------
 1 | import CartItem from './CartItem';
 2 | import { useDispatch, useSelector } from 'react-redux';
 3 | import { openModal } from '../features/modal/modalSlice';
 4 | 
 5 | const CartContainer = () => {
 6 |   const dispatch = useDispatch();
 7 |   const { cartItems, total, amount } = useSelector((store) => store.cart);
 8 | 
 9 |   if (amount < 1) {
10 |     return (
11 |       <section className='cart'>
12 |         <header>
13 |           <h2>your bag</h2>
14 |           <h4 className='empty-cart'>is currently empty</h4>
15 |         </header>
16 |       </section>
17 |     );
18 |   }
19 | 
20 |   return (
21 |     <section className='cart'>
22 |       <header>
23 |         <h2>your bag</h2>
24 |       </header>
25 |       <div>
26 |         {cartItems.map((item) => {
27 |           return <CartItem key={item.id} {...item} />;
28 |         })}
29 |       </div>
30 |       <footer>
31 |         <hr />
32 |         <div className='cart-total'>
33 |           <h4>
34 |             total <span>${total.toFixed(2)}</span>
35 |           </h4>
36 |         </div>
37 |         <button className='btn clear-btn' onClick={() => dispatch(openModal())}>
38 |           clear cart
39 |         </button>
40 |       </footer>
41 |     </section>
42 |   );
43 | };
44 | export default CartContainer;
45 | 


--------------------------------------------------------------------------------
/final/src/components/CartItem.js:
--------------------------------------------------------------------------------
 1 | import { ChevronDown, ChevronUp } from '../icons';
 2 | import { removeItem, increase, decrease } from '../features/cart/cartSlice';
 3 | import { useDispatch } from 'react-redux';
 4 | 
 5 | const CartItem = ({ id, img, title, price, amount }) => {
 6 |   const dispatch = useDispatch();
 7 |   return (
 8 |     <article className='cart-item'>
 9 |       <img src={img} alt={title} />
10 |       <div>
11 |         <h4>{title}</h4>
12 |         <h4 className='item-price'>${price}</h4>
13 |         <button
14 |           className='remove-btn'
15 |           onClick={() => {
16 |             dispatch(removeItem(id));
17 |           }}
18 |         >
19 |           remove
20 |         </button>
21 |       </div>
22 |       <div>
23 |         <button
24 |           className='amount-btn'
25 |           onClick={() => {
26 |             dispatch(increase({ id }));
27 |           }}
28 |         >
29 |           <ChevronUp />
30 |         </button>
31 |         <p className='amount'>{amount}</p>
32 |         <button
33 |           className='amount-btn'
34 |           onClick={() => {
35 |             if (amount === 1) {
36 |               dispatch(removeItem(id));
37 |               return;
38 |             }
39 |             dispatch(decrease({ id }));
40 |           }}
41 |         >
42 |           <ChevronDown />
43 |         </button>
44 |       </div>
45 |     </article>
46 |   );
47 | };
48 | export default CartItem;
49 | 


--------------------------------------------------------------------------------
/final/src/components/Modal.js:
--------------------------------------------------------------------------------
 1 | import { useDispatch } from 'react-redux';
 2 | import { clearCart } from '../features/cart/cartSlice';
 3 | import { closeModal } from '../features/modal/modalSlice';
 4 | 
 5 | const Modal = () => {
 6 |   const dispatch = useDispatch();
 7 |   return (
 8 |     <aside className='modal-container'>
 9 |       <div className='modal'>
10 |         <h4>remove all items from your shopping cart?</h4>
11 |         <div className='btn-container'>
12 |           <button
13 |             type='button'
14 |             className='btn confirm-btn'
15 |             onClick={() => {
16 |               dispatch(clearCart());
17 |               dispatch(closeModal());
18 |             }}
19 |           >
20 |             confirm
21 |           </button>
22 |           <button
23 |             type='button'
24 |             className='btn clear-btn'
25 |             onClick={() => {
26 |               dispatch(closeModal());
27 |             }}
28 |           >
29 |             cancel
30 |           </button>
31 |         </div>
32 |       </div>
33 |     </aside>
34 |   );
35 | };
36 | export default Modal;
37 | 


--------------------------------------------------------------------------------
/final/src/components/Navbar.js:
--------------------------------------------------------------------------------
 1 | import { CartIcon } from '../icons';
 2 | import { useSelector } from 'react-redux';
 3 | 
 4 | const Navbar = () => {
 5 |   const { amount } = useSelector((store) => store.cart);
 6 |   return (
 7 |     <>
 8 |       <nav>
 9 |         <div className='nav-center'>
10 |           <h3>redux toolkit</h3>
11 |           <div className='nav-container'>
12 |             <CartIcon />
13 |             <div className='amount-container'>
14 |               <p className='total-amount'>{amount}</p>
15 |             </div>
16 |           </div>
17 |         </div>
18 |       </nav>
19 |     </>
20 |   );
21 | };
22 | export default Navbar;
23 | 


--------------------------------------------------------------------------------
/final/src/features/cart/cartSlice.js:
--------------------------------------------------------------------------------
 1 | import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';
 2 | import axios from 'axios';
 3 | import { openModal } from '../modal/modalSlice';
 4 | 
 5 | const url = 'https://course-api.com/react-useReducer-cart-project';
 6 | 
 7 | const initialState = {
 8 |   cartItems: [],
 9 |   amount: 4,
10 |   total: 0,
11 |   isLoading: true,
12 | };
13 | 
14 | export const getCartItems = createAsyncThunk(
15 |   'cart/getCartItems',
16 |   async (name, thunkAPI) => {
17 |     try {
18 |       // console.log(name);
19 |       // console.log(thunkAPI);
20 |       // console.log(thunkAPI.getState());
21 |       // thunkAPI.dispatch(openModal());
22 |       const resp = await axios(url);
23 | 
24 |       return resp.data;
25 |     } catch (error) {
26 |       return thunkAPI.rejectWithValue('something went wrong');
27 |     }
28 |   }
29 | );
30 | 
31 | const cartSlice = createSlice({
32 |   name: 'cart',
33 |   initialState,
34 |   reducers: {
35 |     clearCart: (state) => {
36 |       state.cartItems = [];
37 |     },
38 |     removeItem: (state, action) => {
39 |       const itemId = action.payload;
40 |       state.cartItems = state.cartItems.filter((item) => item.id !== itemId);
41 |     },
42 |     increase: (state, { payload }) => {
43 |       const cartItem = state.cartItems.find((item) => item.id === payload.id);
44 |       cartItem.amount = cartItem.amount + 1;
45 |     },
46 |     decrease: (state, { payload }) => {
47 |       const cartItem = state.cartItems.find((item) => item.id === payload.id);
48 |       cartItem.amount = cartItem.amount - 1;
49 |     },
50 |     calculateTotals: (state) => {
51 |       let amount = 0;
52 |       let total = 0;
53 |       state.cartItems.forEach((item) => {
54 |         amount += item.amount;
55 |         total += item.amount * item.price;
56 |       });
57 |       state.amount = amount;
58 |       state.total = total;
59 |     },
60 |   },
61 |   extraReducers: (builder) => {
62 |     builder
63 |       .addCase(getCartItems.pending, (state) => {
64 |         state.isLoading = true;
65 |       })
66 |       .addCase(getCartItems.fulfilled, (state, action) => {
67 |         // console.log(action);
68 |         state.isLoading = false;
69 |         state.cartItems = action.payload;
70 |       })
71 |       .addCase(getCartItems.rejected, (state, action) => {
72 |         console.log(action);
73 |         state.isLoading = false;
74 |       });
75 |   },
76 | });
77 | 
78 | // console.log(cartSlice);
79 | export const { clearCart, removeItem, increase, decrease, calculateTotals } =
80 |   cartSlice.actions;
81 | 
82 | export default cartSlice.reducer;
83 | 


--------------------------------------------------------------------------------
/final/src/features/modal/modalSlice.js:
--------------------------------------------------------------------------------
 1 | import { createSlice } from '@reduxjs/toolkit';
 2 | 
 3 | const initialState = {
 4 |   isOpen: false,
 5 | };
 6 | 
 7 | const modalSlice = createSlice({
 8 |   name: 'modal',
 9 |   initialState,
10 |   reducers: {
11 |     openModal: (state, action) => {
12 |       state.isOpen = true;
13 |     },
14 |     closeModal: (state, action) => {
15 |       state.isOpen = false;
16 |     },
17 |   },
18 | });
19 | 
20 | export const { openModal, closeModal } = modalSlice.actions;
21 | 
22 | export default modalSlice.reducer;
23 | 


--------------------------------------------------------------------------------
/final/src/icons.js:
--------------------------------------------------------------------------------
 1 | export const CartIcon = () => {
 2 |   return (
 3 |     <svg
 4 |       xmlns='http://www.w3.org/2000/svg'
 5 |       className='h-6 w-6 '
 6 |       fill='none'
 7 |       viewBox='0 0 24 24'
 8 |       stroke='currentColor'
 9 |       strokeWidth={2}
10 |     >
11 |       <path
12 |         strokeLinecap='round'
13 |         strokeLinejoin='round'
14 |         d='M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z'
15 |       />
16 |     </svg>
17 |   );
18 | };
19 | 
20 | export const ChevronDown = () => {
21 |   return (
22 |     <svg
23 |       xmlns='http://www.w3.org/2000/svg'
24 |       className='h-6 w-6'
25 |       fill='none'
26 |       viewBox='0 0 24 24'
27 |       stroke='currentColor'
28 |       strokeWidth={2}
29 |     >
30 |       <path strokeLinecap='round' strokeLinejoin='round' d='M19 9l-7 7-7-7' />
31 |     </svg>
32 |   );
33 | };
34 | 
35 | export const ChevronUp = () => {
36 |   return (
37 |     <svg
38 |       xmlns='http://www.w3.org/2000/svg'
39 |       className='h-6 w-6'
40 |       fill='none'
41 |       viewBox='0 0 24 24'
42 |       stroke='currentColor'
43 |       strokeWidth={2}
44 |     >
45 |       <path strokeLinecap='round' strokeLinejoin='round' d='M5 15l7-7 7 7' />
46 |     </svg>
47 |   );
48 | };
49 | 


--------------------------------------------------------------------------------
/final/src/index.css:
--------------------------------------------------------------------------------
  1 | /*
  2 | =============== 
  3 | Variables
  4 | ===============
  5 | */
  6 | 
  7 | :root {
  8 |   --clr-primary: #645cff;
  9 |   --clr-primary-dark: #282566;
 10 |   --clr-primary-light: #a29dff;
 11 |   --clr-grey-1: #102a42;
 12 |   --clr-grey-5: #617d98;
 13 |   --clr-grey-10: #f1f5f8;
 14 |   --clr-white: #fff;
 15 |   --clr-red-dark: hsl(360, 67%, 44%);
 16 |   --clr-red-light: hsl(360, 71%, 66%);
 17 |   --transition: all 0.3s linear;
 18 |   --spacing: 0.25rem;
 19 |   --radius: 0.25rem;
 20 |   --large-screen-width: 1170px;
 21 |   --small-screen-width: 90vw;
 22 |   --fixed-width: 50rem;
 23 | }
 24 | * {
 25 |   margin: 0;
 26 |   padding: 0;
 27 |   box-sizing: border-box;
 28 | }
 29 | body {
 30 |   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
 31 |     Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
 32 |   background: var(--clr-grey-10);
 33 |   color: var(--clr-grey-1);
 34 |   line-height: 1.5;
 35 |   font-size: 0.875rem;
 36 | }
 37 | a {
 38 |   text-decoration: none;
 39 | }
 40 | img {
 41 |   width: 100%;
 42 |   display: block;
 43 | }
 44 | h1,
 45 | h2,
 46 | h3,
 47 | h4 {
 48 |   letter-spacing: var(--spacing);
 49 |   text-transform: capitalize;
 50 |   line-height: 1.25;
 51 |   margin-bottom: 0.75rem;
 52 | }
 53 | h1 {
 54 |   font-size: 3rem;
 55 | }
 56 | h2 {
 57 |   font-size: 2rem;
 58 | }
 59 | h3 {
 60 |   font-size: 1.5rem;
 61 | }
 62 | h4 {
 63 |   font-size: 0.875rem;
 64 | }
 65 | p {
 66 |   margin-bottom: 1.25rem;
 67 | }
 68 | @media screen and (min-width: 800px) {
 69 |   h1 {
 70 |     font-size: 4rem;
 71 |   }
 72 |   h2 {
 73 |     font-size: 2.5rem;
 74 |   }
 75 |   h3 {
 76 |     font-size: 2rem;
 77 |   }
 78 |   h4 {
 79 |     font-size: 1rem;
 80 |   }
 81 |   body {
 82 |     font-size: 1rem;
 83 |   }
 84 |   h1,
 85 |   h2,
 86 |   h3,
 87 |   h4 {
 88 |     line-height: 1;
 89 |   }
 90 | }
 91 | /* more global css */
 92 | 
 93 | .btn {
 94 |   text-transform: uppercase;
 95 |   background: var(--clr-primary);
 96 |   color: var(--clr-white);
 97 |   padding: 0.375rem 0.75rem;
 98 |   letter-spacing: var(--spacing);
 99 |   display: inline-block;
100 |   font-weight: 700;
101 |   transition: var(--transition);
102 |   font-size: 0.875rem;
103 |   border: none;
104 |   cursor: pointer;
105 |   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
106 | }
107 | .btn:hover {
108 |   color: var(--clr-primary);
109 |   background: var(--clr-primary-light);
110 | }
111 | 
112 | /*
113 | =============== 
114 | Navbar
115 | ===============
116 | */
117 | .loading {
118 |   text-align: center;
119 |   margin-top: 5rem;
120 | }
121 | nav {
122 |   background: var(--clr-primary);
123 |   padding: 1.25rem 2rem;
124 | }
125 | .nav-center {
126 |   max-width: var(--fixed-width);
127 |   width: 100%;
128 |   margin: 0 auto;
129 |   display: flex;
130 |   justify-content: space-between;
131 |   align-items: center;
132 | }
133 | nav h3 {
134 |   margin-bottom: 0;
135 |   letter-spacing: 1px;
136 |   color: var(--clr-white);
137 | }
138 | .nav-container {
139 |   display: block;
140 |   position: relative;
141 | }
142 | nav svg {
143 |   width: 40px;
144 |   color: var(--clr-white);
145 | }
146 | .amount-container {
147 |   position: absolute;
148 |   top: -0.6rem;
149 |   right: -0.6rem;
150 |   width: 1.75rem;
151 |   height: 1.75rem;
152 |   border-radius: 50%;
153 |   background: var(--clr-primary-light);
154 |   display: flex;
155 |   align-items: center;
156 |   justify-content: center;
157 | }
158 | .total-amount {
159 |   color: var(--clr-white);
160 |   margin-bottom: 0;
161 |   font-size: 1.25rem;
162 | }
163 | /*
164 | =============== 
165 | Cart
166 | ===============
167 | */
168 | .cart {
169 |   min-height: calc(100vh - 120px);
170 |   width: 90vw;
171 |   margin: 0 auto;
172 |   margin-top: 40px;
173 |   padding: 2.5rem 0;
174 |   max-width: var(--fixed-width);
175 | }
176 | .cart h2 {
177 |   text-transform: uppercase;
178 |   text-align: center;
179 |   margin-bottom: 3rem;
180 | }
181 | .empty-cart {
182 |   text-transform: lowercase;
183 |   color: var(--clr-grey-5);
184 |   margin-top: 1rem;
185 |   text-align: center;
186 | }
187 | .cart footer {
188 |   margin-top: 4rem;
189 |   text-align: center;
190 | }
191 | .cart-total h4 {
192 |   text-transform: capitalize;
193 |   display: flex;
194 |   justify-content: space-between;
195 |   margin-top: 1rem;
196 | }
197 | .clear-btn,
198 | .confirm-btn {
199 |   background: transparent;
200 |   padding: 0.5rem 1rem;
201 |   color: var(--clr-red-dark);
202 |   border: 1px solid var(--clr-red-dark);
203 |   margin-top: 2.25rem;
204 |   border-radius: var(--radius);
205 | }
206 | .clear-btn:hover {
207 |   background: var(--clr-red-light);
208 |   color: var(--clr-red-dark);
209 |   border-color: var(--clr-red-light);
210 | }
211 | .confirm-btn {
212 |   border-color: var(--clr-primary);
213 |   color: var(--clr-primary);
214 | }
215 | /*
216 | =============== 
217 | Cart Item
218 | ===============
219 | */
220 | .cart-item {
221 |   display: grid;
222 |   align-items: center;
223 |   grid-template-columns: auto 1fr auto;
224 |   grid-column-gap: 1.5rem;
225 |   margin: 1.5rem 0;
226 | }
227 | .cart-item img {
228 |   width: 5rem;
229 |   height: 5rem;
230 |   object-fit: cover;
231 | }
232 | .cart-item h4 {
233 |   margin-bottom: 0.5rem;
234 |   font-weight: 500;
235 |   letter-spacing: 2px;
236 | }
237 | .item-price {
238 |   color: var(--clr-grey-5);
239 | }
240 | .remove-btn {
241 |   color: var(--clr-primary);
242 |   letter-spacing: var(--spacing);
243 |   cursor: pointer;
244 |   font-size: 0.85rem;
245 |   background: transparent;
246 |   border: none;
247 |   margin-top: 0.375rem;
248 |   transition: var(--transition);
249 | }
250 | .remove-btn:hover {
251 |   color: var(--clr-primary-light);
252 | }
253 | .amount-btn {
254 |   width: 24px;
255 |   background: transparent;
256 |   border: none;
257 |   cursor: pointer;
258 | }
259 | .amount-btn svg {
260 |   color: var(--clr-primary);
261 | }
262 | .amount-btn:hover svg {
263 |   color: var(--clr-primary-light);
264 | }
265 | .amount {
266 |   text-align: center;
267 |   margin-bottom: 0;
268 |   font-size: 1.25rem;
269 |   line-height: 1;
270 | }
271 | hr {
272 |   background: var(--clr-grey-5);
273 |   border-color: transparent;
274 |   border-width: 0.25px;
275 | }
276 | 
277 | .modal-container {
278 |   position: fixed;
279 |   top: 0;
280 |   left: 0;
281 |   width: 100%;
282 |   height: 100%;
283 |   background: rgba(0, 0, 0, 0.7);
284 |   z-index: 10;
285 |   display: flex;
286 |   align-items: center;
287 |   justify-content: center;
288 | }
289 | 
290 | .modal {
291 |   background: var(--clr-white);
292 |   width: 80vw;
293 |   max-width: 400px;
294 |   border-radius: var(--radius);
295 |   padding: 2rem 1rem;
296 |   text-align: center;
297 | }
298 | .modal h4 {
299 |   margin-bottom: 0;
300 |   line-height: 1.5;
301 | }
302 | .modal .clear-btn,
303 | .modal .confirm-btn {
304 |   margin-top: 1rem;
305 | }
306 | .btn-container {
307 |   display: flex;
308 |   justify-content: space-around;
309 | }
310 | 


--------------------------------------------------------------------------------
/final/src/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { createRoot } from 'react-dom/client';
 3 | 
 4 | import './index.css';
 5 | import App from './App';
 6 | import { store } from './store';
 7 | import { Provider } from 'react-redux';
 8 | 
 9 | const container = document.getElementById('root');
10 | const root = createRoot(container);
11 | 
12 | root.render(
13 |   <React.StrictMode>
14 |     <Provider store={store}>
15 |       <App />
16 |     </Provider>
17 |   </React.StrictMode>
18 | );
19 | 


--------------------------------------------------------------------------------
/final/src/store.js:
--------------------------------------------------------------------------------
 1 | import { configureStore } from '@reduxjs/toolkit';
 2 | import cartReducer from './features/cart/cartSlice';
 3 | import modalReducer from './features/modal/modalSlice';
 4 | export const store = configureStore({
 5 |   reducer: {
 6 |     cart: cartReducer,
 7 |     modal: modalReducer,
 8 |   },
 9 | });
10 | 


--------------------------------------------------------------------------------
/starter/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | /.pnp
 6 | .pnp.js
 7 | 
 8 | # testing
 9 | /coverage
10 | 
11 | # production
12 | /build
13 | 
14 | # misc
15 | .DS_Store
16 | .env.local
17 | .env.development.local
18 | .env.test.local
19 | .env.production.local
20 | 
21 | npm-debug.log*
22 | yarn-debug.log*
23 | yarn-error.log*
24 | 


--------------------------------------------------------------------------------
/starter/README.md:
--------------------------------------------------------------------------------
  1 | # Redux Toolkit
  2 | 
  3 | #### React Course
  4 | 
  5 | [My React Course](https://www.udemy.com/course/react-tutorial-and-projects-course/?referralCode=FEE6A921AF07E2563CEF)
  6 | 
  7 | #### Support
  8 | 
  9 | Find the App Useful? [You can always buy me a coffee](https://www.buymeacoffee.com/johnsmilga)
 10 | 
 11 | #### Docs
 12 | 
 13 | [Redux Toolkit Docs](https://redux-toolkit.js.org/introduction/getting-started)
 14 | 
 15 | #### Install Template
 16 | 
 17 | ```sh
 18 | npx create-react-app my-app --template redux
 19 | ```
 20 | 
 21 | - @latest
 22 | 
 23 | ```sh
 24 | npx create-react-app@latest my-app --template redux
 25 | ```
 26 | 
 27 | #### Existing App
 28 | 
 29 | ```sh
 30 | npm install @reduxjs/toolkit react-redux
 31 | ```
 32 | 
 33 | #### @reduxjs/toolkit
 34 | 
 35 | consists of few libraries
 36 | 
 37 | - redux (core library, state management)
 38 | - immer (allows to mutate state)
 39 | - redux-thunk (handles async actions)
 40 | - reselect (simplifies reducer functions)
 41 | 
 42 | #### Extras
 43 | 
 44 | - redux devtools
 45 | - combine reducers
 46 | 
 47 | #### react-redux
 48 | 
 49 | connects our app to redux
 50 | 
 51 | #### Setup Store
 52 | 
 53 | - create store.js
 54 | 
 55 | ```js
 56 | import { configureStore } from '@reduxjs/toolkit';
 57 | 
 58 | export const store = configureStore({
 59 |   reducer: {},
 60 | });
 61 | ```
 62 | 
 63 | #### Setup Provider
 64 | 
 65 | - index.js
 66 | 
 67 | ```js
 68 | import React from 'react';
 69 | import ReactDOM from 'react-dom';
 70 | import './index.css';
 71 | import App from './App';
 72 | // import store and provider
 73 | import { store } from './store';
 74 | import { Provider } from 'react-redux';
 75 | 
 76 | ReactDOM.render(
 77 |   <React.StrictMode>
 78 |     <Provider store={store}>
 79 |       <App />
 80 |     </Provider>
 81 |   </React.StrictMode>,
 82 |   document.getElementById('root')
 83 | );
 84 | ```
 85 | 
 86 | #### Setup Cart Slice
 87 | 
 88 | - application feature
 89 | - create features folder/cart
 90 | - create cartSlice.js
 91 | 
 92 | ```js
 93 | import { createSlice } from '@reduxjs/toolkit';
 94 | 
 95 | const initialState = {
 96 |   cartItems: [],
 97 |   amount: 0,
 98 |   total: 0,
 99 |   isLoading: true,
100 | };
101 | 
102 | const cartSlice = createSlice({
103 |   name: 'cart',
104 |   initialState,
105 | });
106 | 
107 | console.log(cartSlice);
108 | 
109 | export default cartSlice.reducer;
110 | ```
111 | 
112 | - store.js
113 | 
114 | ```js
115 | import { configureStore } from '@reduxjs/toolkit';
116 | import cartReducer from './features/cart/cartSlice';
117 | 
118 | export const store = configureStore({
119 |   reducer: {
120 |     cart: cartReducer,
121 |   },
122 | });
123 | ```
124 | 
125 | #### Redux DevTools
126 | 
127 | - extension
128 | 
129 | #### Access store value
130 | 
131 | - create components/Navbar.js
132 | 
133 | ```js
134 | import { CartIcon } from '../icons';
135 | import { useSelector } from 'react-redux';
136 | 
137 | const Navbar = () => {
138 |   const { amount } = useSelector((state) => state.cart);
139 | 
140 |   return (
141 |     <nav>
142 |       <div className='nav-center'>
143 |         <h3>redux toolkit</h3>
144 |         <div className='nav-container'>
145 |           <CartIcon />
146 |           <div className='amount-container'>
147 |             <p className='total-amount'>{amount}</p>
148 |           </div>
149 |         </div>
150 |       </div>
151 |     </nav>
152 |   );
153 | };
154 | export default Navbar;
155 | ```
156 | 
157 | #### Hero Icons
158 | 
159 | - [Hero Icons](https://heroicons.com/)
160 | 
161 | ```css
162 | nav svg {
163 |   width: 40px;
164 |   color: var(--clr-white);
165 | }
166 | ```
167 | 
168 | #### Setup Cart
169 | 
170 | - cartSlice.js
171 | 
172 | ```js
173 | import cartItems from '../../cartItems';
174 | 
175 | const initialState = {
176 |   cartItems: cartItems,
177 |   amount: 0,
178 |   total: 0,
179 |   isLoading: true,
180 | };
181 | ```
182 | 
183 | - create CartContainer.js and CartItem.js
184 | - CartContainer.js
185 | 
186 | ```js
187 | import React from 'react';
188 | import CartItem from './CartItem';
189 | import { useSelector } from 'react-redux';
190 | 
191 | const CartContainer = () => {
192 |   const { cartItems, total, amount } = useSelector((state) => state.cart);
193 | 
194 |   if (amount < 1) {
195 |     return (
196 |       <section className='cart'>
197 |         {/* cart header */}
198 |         <header>
199 |           <h2>your bag</h2>
200 |           <h4 className='empty-cart'>is currently empty</h4>
201 |         </header>
202 |       </section>
203 |     );
204 |   }
205 |   return (
206 |     <section className='cart'>
207 |       {/* cart header */}
208 |       <header>
209 |         <h2>your bag</h2>
210 |       </header>
211 |       {/* cart items */}
212 |       <div>
213 |         {cartItems.map((item) => {
214 |           return <CartItem key={item.id} {...item} />;
215 |         })}
216 |       </div>
217 |       {/* cart footer */}
218 |       <footer>
219 |         <hr />
220 |         <div className='cart-total'>
221 |           <h4>
222 |             total <span>${total}</span>
223 |           </h4>
224 |         </div>
225 |         <button className='btn clear-btn'>clear cart</button>
226 |       </footer>
227 |     </section>
228 |   );
229 | };
230 | 
231 | export default CartContainer;
232 | ```
233 | 
234 | - CartItem.js
235 | 
236 | ```js
237 | import React from 'react';
238 | import { ChevronDown, ChevronUp } from '../icons';
239 | 
240 | const CartItem = ({ id, img, title, price, amount }) => {
241 |   return (
242 |     <article className='cart-item'>
243 |       <img src={img} alt={title} />
244 |       <div>
245 |         <h4>{title}</h4>
246 |         <h4 className='item-price'>${price}</h4>
247 |         {/* remove button */}
248 |         <button className='remove-btn'>remove</button>
249 |       </div>
250 |       <div>
251 |         {/* increase amount */}
252 |         <button className='amount-btn'>
253 |           <ChevronUp />
254 |         </button>
255 |         {/* amount */}
256 |         <p className='amount'>{amount}</p>
257 |         {/* decrease amount */}
258 |         <button className='amount-btn'>
259 |           <ChevronDown />
260 |         </button>
261 |       </div>
262 |     </article>
263 |   );
264 | };
265 | 
266 | export default CartItem;
267 | ```
268 | 
269 | #### First Reducer
270 | 
271 | - cartSlice.js
272 | - Immer library
273 | 
274 | ```js
275 | const cartSlice = createSlice({
276 |   name: 'cart',
277 |   initialState,
278 |   reducers: {
279 |     clearCart: (state) => {
280 |       state.cartItems = [];
281 |     },
282 |   },
283 | });
284 | 
285 | export const { clearCart } = cartSlice.actions;
286 | ```
287 | 
288 | - create action
289 | 
290 | ```js
291 | const ACTION_TYPE = 'ACTION_TYPE';
292 | 
293 | const actionCreator = (payload) => {
294 |   return { type: ACTION_TYPE, payload: payload };
295 | };
296 | ```
297 | 
298 | - CartContainer.js
299 | 
300 | ```js
301 | import React from 'react';
302 | import CartItem from './CartItem';
303 | import { useDispatch, useSelector } from 'react-redux';
304 | 
305 | const CartContainer = () => {
306 |   const dispatch = useDispatch();
307 | 
308 |   return (
309 |     <button
310 |       className='btn clear-btn'
311 |       onClick={() => {
312 |         dispatch(clearCart());
313 |       }}
314 |     >
315 |       clear cart
316 |     </button>
317 |   );
318 | };
319 | 
320 | export default CartContainer;
321 | ```
322 | 
323 | #### Remove, Increase, Decrease
324 | 
325 | - cartSlice.js
326 | 
327 | ```js
328 | import { createSlice } from '@reduxjs/toolkit';
329 | import cartItems from '../../cartItems';
330 | 
331 | const initialState = {
332 |   cartItems: [],
333 |   amount: 0,
334 |   total: 0,
335 |   isLoading: true,
336 | };
337 | 
338 | const cartSlice = createSlice({
339 |   name: 'cart',
340 |   initialState,
341 |   reducers: {
342 |     clearCart: (state) => {
343 |       state.cartItems = [];
344 |     },
345 |     removeItem: (state, action) => {
346 |       const itemId = action.payload;
347 |       state.cartItems = state.cartItems.filter((item) => item.id !== itemId);
348 |     },
349 |     increase: (state, { payload }) => {
350 |       const cartItem = state.cartItems.find((item) => item.id === payload.id);
351 |       cartItem.amount = cartItem.amount + 1;
352 |     },
353 |     decrease: (state, { payload }) => {
354 |       const cartItem = state.cartItems.find((item) => item.id === payload.id);
355 |       cartItem.amount = cartItem.amount - 1;
356 |     },
357 |     calculateTotals: (state) => {
358 |       let amount = 0;
359 |       let total = 0;
360 |       state.cartItems.forEach((item) => {
361 |         amount += item.amount;
362 |         total += item.amount * item.price;
363 |       });
364 |       state.amount = amount;
365 |       state.total = total;
366 |     },
367 |   },
368 | });
369 | 
370 | export const { clearCart, removeItem, increase, decrease, calculateTotals } =
371 |   cartSlice.actions;
372 | 
373 | export default cartSlice.reducer;
374 | ```
375 | 
376 | - CartItem.js
377 | 
378 | ```js
379 | import React from 'react';
380 | import { ChevronDown, ChevronUp } from '../icons';
381 | 
382 | import { useDispatch } from 'react-redux';
383 | import { removeItem, increase, decrease } from '../features/cart/cartSlice';
384 | 
385 | const CartItem = ({ id, img, title, price, amount }) => {
386 |   const dispatch = useDispatch();
387 | 
388 |   return (
389 |     <article className='cart-item'>
390 |       <img src={img} alt={title} />
391 |       <div>
392 |         <h4>{title}</h4>
393 |         <h4 className='item-price'>${price}</h4>
394 |         {/* remove button */}
395 |         <button
396 |           className='remove-btn'
397 |           onClick={() => {
398 |             dispatch(removeItem(id));
399 |           }}
400 |         >
401 |           remove
402 |         </button>
403 |       </div>
404 |       <div>
405 |         {/* increase amount */}
406 |         <button
407 |           className='amount-btn'
408 |           onClick={() => {
409 |             dispatch(increase({ id }));
410 |           }}
411 |         >
412 |           <ChevronUp />
413 |         </button>
414 |         {/* amount */}
415 |         <p className='amount'>{amount}</p>
416 |         {/* decrease amount */}
417 |         <button
418 |           className='amount-btn'
419 |           onClick={() => {
420 |             if (amount === 1) {
421 |               dispatch(removeItem(id));
422 |               return;
423 |             }
424 |             dispatch(decrease({ id }));
425 |           }}
426 |         >
427 |           <ChevronDown />
428 |         </button>
429 |       </div>
430 |     </article>
431 |   );
432 | };
433 | 
434 | export default CartItem;
435 | ```
436 | 
437 | - App.js
438 | 
439 | ```js
440 | import { useEffect } from 'react';
441 | import Navbar from './components/Navbar';
442 | import CartContainer from './components/CartContainer';
443 | import { useSelector, useDispatch } from 'react-redux';
444 | import { calculateTotals } from './features/cart/cartSlice';
445 | 
446 | function App() {
447 |   const { cartItems } = useSelector((state) => state.cart);
448 |   const dispatch = useDispatch();
449 |   useEffect(() => {
450 |     dispatch(calculateTotals());
451 |   }, [cartItems]);
452 | 
453 |   return (
454 |     <main>
455 |       <Navbar />
456 |       <CartContainer />
457 |     </main>
458 |   );
459 | }
460 | 
461 | export default App;
462 | ```
463 | 
464 | #### Modal
465 | 
466 | - create components/Modal.js
467 | 
468 | ```js
469 | const Modal = () => {
470 |   return (
471 |     <aside className='modal-container'>
472 |       <div className='modal'>
473 |         <h4>Remove all items from your shopping cart?</h4>
474 |         <div className='btn-container'>
475 |           <button type='button' className='btn confirm-btn'>
476 |             confirm
477 |           </button>
478 |           <button type='button' className='btn clear-btn'>
479 |             cancel
480 |           </button>
481 |         </div>
482 |       </div>
483 |     </aside>
484 |   );
485 | };
486 | export default Modal;
487 | ```
488 | 
489 | - App.js
490 | 
491 | ```js
492 | return (
493 |   <main>
494 |     <Modal />
495 |     <Navbar />
496 |     <CartContainer />
497 |   </main>
498 | );
499 | ```
500 | 
501 | #### modal slice
502 | 
503 | - create features/modal/modalSlice.js
504 | 
505 | ```js
506 | import { createSlice } from '@reduxjs/toolkit';
507 | const initialState = {
508 |   isOpen: false,
509 | };
510 | 
511 | const modalSlice = createSlice({
512 |   name: 'modal',
513 |   initialState,
514 |   reducers: {
515 |     openModal: (state, action) => {
516 |       state.isOpen = true;
517 |     },
518 |     closeModal: (state, action) => {
519 |       state.isOpen = false;
520 |     },
521 |   },
522 | });
523 | 
524 | export const { openModal, closeModal } = modalSlice.actions;
525 | export default modalSlice.reducer;
526 | ```
527 | 
528 | - App.js
529 | 
530 | ```js
531 | const { isOpen } = useSelector((state) => state.modal);
532 | 
533 | return (
534 |   <main>
535 |     {isOpen && <Modal />}
536 |     <Navbar />
537 |     <CartContainer />
538 |   </main>
539 | );
540 | ```
541 | 
542 | #### toggle modal
543 | 
544 | - CartContainer.js
545 | 
546 | ```js
547 | import { openModal } from '../features/modal/modalSlice';
548 | 
549 | return (
550 |   <button
551 |     className='btn clear-btn'
552 |     onClick={() => {
553 |       dispatch(openModal());
554 |     }}
555 |   >
556 |     clear cart
557 |   </button>
558 | );
559 | ```
560 | 
561 | - Modal.js
562 | 
563 | ```js
564 | import { closeModal } from '../features/modal/modalSlice';
565 | import { useDispatch } from 'react-redux';
566 | import { clearCart } from '../features/cart/cartSlice';
567 | 
568 | const Modal = () => {
569 |   const dispatch = useDispatch();
570 | 
571 |   return (
572 |     <aside className='modal-container'>
573 |       <div className='modal'>
574 |         <h4>Remove all items from your shopping cart?</h4>
575 |         <div className='btn-container'>
576 |           <button
577 |             type='button'
578 |             className='btn confirm-btn'
579 |             onClick={() => {
580 |               dispatch(clearCart());
581 |               dispatch(closeModal());
582 |             }}
583 |           >
584 |             confirm
585 |           </button>
586 |           <button
587 |             type='button'
588 |             className='btn clear-btn'
589 |             onClick={() => {
590 |               dispatch(closeModal());
591 |             }}
592 |           >
593 |             cancel
594 |           </button>
595 |         </div>
596 |       </div>
597 |     </aside>
598 |   );
599 | };
600 | export default Modal;
601 | ```
602 | 
603 | #### async functionality with createAsyncThunk
604 | 
605 | - [Course API](https://course-api.com/)
606 | - https://course-api.com/react-useReducer-cart-project
607 | - cartSlice.js
608 | 
609 | - action type
610 | - callback function
611 | - lifecycle actions
612 | 
613 | ```js
614 | import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';
615 | 
616 | const url = 'https://course-api.com/react-useReducer-cart-project';
617 | 
618 | export const getCartItems = createAsyncThunk('cart/getCartItems', () => {
619 |   return fetch(url)
620 |     .then((resp) => resp.json())
621 |     .catch((err) => console.log(error));
622 | });
623 | 
624 | const cartSlice = createSlice({
625 |   name: 'cart',
626 |   initialState,
627 |   extraReducers: {
628 |     [getCartItems.pending]: (state) => {
629 |       state.isLoading = true;
630 |     },
631 |     [getCartItems.fulfilled]: (state, action) => {
632 |       console.log(action);
633 |       state.isLoading = false;
634 |       state.cartItems = action.payload;
635 |     },
636 |     [getCartItems.rejected]: (state) => {
637 |       state.isLoading = false;
638 |     },
639 |   },
640 | });
641 | ```
642 | 
643 | - App.js
644 | 
645 | ```js
646 | import { calculateTotals, getCartItems } from './features/cart/cartSlice';
647 | 
648 | function App() {
649 |   const { cartItems, isLoading } = useSelector((state) => state.cart);
650 | 
651 |   useEffect(() => {
652 |     dispatch(getCartItems());
653 |   }, []);
654 | 
655 |   if (isLoading) {
656 |     return (
657 |       <div className='loading'>
658 |         <h1>Loading...</h1>
659 |       </div>
660 |     );
661 |   }
662 | 
663 |   return (
664 |     <main>
665 |       {isOpen && <Modal />}
666 |       <Navbar />
667 |       <CartContainer />
668 |     </main>
669 |   );
670 | }
671 | 
672 | export default App;
673 | ```
674 | 
675 | #### Options
676 | 
677 | ```sh
678 | npm install axios
679 | ```
680 | 
681 | - cartSlice.js
682 | 
683 | ```js
684 | export const getCartItems = createAsyncThunk(
685 |   'cart/getCartItems',
686 |   async (name, thunkAPI) => {
687 |     try {
688 |       // console.log(name);
689 |       // console.log(thunkAPI);
690 |       // console.log(thunkAPI.getState());
691 |       // thunkAPI.dispatch(openModal());
692 |       const resp = await axios(url);
693 | 
694 |       return resp.data;
695 |     } catch (error) {
696 |       return thunkAPI.rejectWithValue('something went wrong');
697 |     }
698 |   }
699 | );
700 | ```
701 | 
702 | #### The extraReducers "builder callback" notation
703 | 
704 | cart/cartSlice
705 | 
706 | ```js
707 | const cartSlice = createSlice({
708 |   name: 'cart',
709 |   initialState,
710 |   reducers: {
711 |     // reducers
712 |   },
713 |   extraReducers: (builder) => {
714 |     builder
715 |       .addCase(getCartItems.pending, (state) => {
716 |         state.isLoading = true;
717 |       })
718 |       .addCase(getCartItems.fulfilled, (state, action) => {
719 |         // console.log(action);
720 |         state.isLoading = false;
721 |         state.cartItems = action.payload;
722 |       })
723 |       .addCase(getCartItems.rejected, (state, action) => {
724 |         console.log(action);
725 |         state.isLoading = false;
726 |       });
727 |   },
728 | });
729 | ```
730 | 


--------------------------------------------------------------------------------
/starter/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "redux-toolkit-tutorial",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "dependencies": {
 6 |     "@reduxjs/toolkit": "^1.9.0",
 7 |     "@testing-library/jest-dom": "^5.16.5",
 8 |     "@testing-library/react": "^13.4.0",
 9 |     "@testing-library/user-event": "^13.5.0",
10 |     "axios": "^1.1.3",
11 |     "react": "^18.2.0",
12 |     "react-dom": "^18.2.0",
13 |     "react-redux": "^8.0.5",
14 |     "react-scripts": "5.0.1",
15 |     "web-vitals": "^2.1.4"
16 |   },
17 |   "scripts": {
18 |     "start": "react-scripts start",
19 |     "build": "react-scripts build",
20 |     "test": "react-scripts test",
21 |     "eject": "react-scripts eject"
22 |   },
23 |   "eslintConfig": {
24 |     "extends": [
25 |       "react-app",
26 |       "react-app/jest"
27 |     ]
28 |   },
29 |   "browserslist": {
30 |     "production": [
31 |       ">0.2%",
32 |       "not dead",
33 |       "not op_mini all"
34 |     ],
35 |     "development": [
36 |       "last 1 chrome version",
37 |       "last 1 firefox version",
38 |       "last 1 safari version"
39 |     ]
40 |   }
41 | }
42 | 


--------------------------------------------------------------------------------
/starter/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/john-smilga/redux-toolkit-tutorial/f4bae75974fb8d78c40397d9d0c95299cc4609e2/starter/public/favicon.ico


--------------------------------------------------------------------------------
/starter/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1" />
 7 |     <meta name="theme-color" content="#000000" />
 8 |     <meta
 9 |       name="description"
10 |       content="Web site created using create-react-app"
11 |     />
12 |     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
13 |     <!--
14 |       manifest.json provides metadata used when your web app is installed on a
15 |       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
16 |     -->
17 |     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
18 |     <!--
19 |       Notice the use of %PUBLIC_URL% in the tags above.
20 |       It will be replaced with the URL of the `public` folder during the build.
21 |       Only files inside the `public` folder can be referenced from the HTML.
22 | 
23 |       Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
24 |       work correctly both with client-side routing and a non-root public URL.
25 |       Learn how to configure a non-root public URL by running `npm run build`.
26 |     -->
27 |     <title>Redux Toolkit</title>
28 |   </head>
29 |   <body>
30 |     <noscript>You need to enable JavaScript to run this app.</noscript>
31 |     <div id="root"></div>
32 |     <!--
33 |       This HTML file is a template.
34 |       If you open it directly in the browser, you will see an empty page.
35 | 
36 |       You can add webfonts, meta tags, or analytics to this file.
37 |       The build step will place the bundled scripts into the <body> tag.
38 | 
39 |       To begin the development, run `npm start` or `yarn start`.
40 |       To create a production bundle, use `npm run build` or `yarn build`.
41 |     -->
42 |   </body>
43 | </html>
44 | 


--------------------------------------------------------------------------------
/starter/public/logo192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/john-smilga/redux-toolkit-tutorial/f4bae75974fb8d78c40397d9d0c95299cc4609e2/starter/public/logo192.png


--------------------------------------------------------------------------------
/starter/public/logo512.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/john-smilga/redux-toolkit-tutorial/f4bae75974fb8d78c40397d9d0c95299cc4609e2/starter/public/logo512.png


--------------------------------------------------------------------------------
/starter/public/manifest.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "short_name": "React App",
 3 |   "name": "Create React App Sample",
 4 |   "icons": [
 5 |     {
 6 |       "src": "favicon.ico",
 7 |       "sizes": "64x64 32x32 24x24 16x16",
 8 |       "type": "image/x-icon"
 9 |     },
10 |     {
11 |       "src": "logo192.png",
12 |       "type": "image/png",
13 |       "sizes": "192x192"
14 |     },
15 |     {
16 |       "src": "logo512.png",
17 |       "type": "image/png",
18 |       "sizes": "512x512"
19 |     }
20 |   ],
21 |   "start_url": ".",
22 |   "display": "standalone",
23 |   "theme_color": "#000000",
24 |   "background_color": "#ffffff"
25 | }
26 | 


--------------------------------------------------------------------------------
/starter/public/robots.txt:
--------------------------------------------------------------------------------
1 | # https://www.robotstxt.org/robotstxt.html
2 | User-agent: *
3 | Disallow:
4 | 


--------------------------------------------------------------------------------
/starter/src/App.js:
--------------------------------------------------------------------------------
1 | function App() {
2 |   return <h2>Redux Toolkit</h2>;
3 | }
4 | export default App;
5 | 


--------------------------------------------------------------------------------
/starter/src/cartItems.js:
--------------------------------------------------------------------------------
 1 | const cartItems = [
 2 |   {
 3 |     id: 'rec1JZlfCIBOPdcT2',
 4 |     title: 'Samsung Galaxy S8',
 5 |     price: '399.99',
 6 |     img: 'https://images2.imgbox.com/c2/14/zedmXgs6_o.png',
 7 |     amount: 1,
 8 |   },
 9 |   {
10 |     id: 'recB6qcHPxb62YJ75',
11 |     title: 'google pixel',
12 |     price: '499.99',
13 |     img: 'https://images2.imgbox.com/fb/3d/O4TPmhlt_o.png',
14 |     amount: 1,
15 |   },
16 |   {
17 |     id: 'recdRxBsE14Rr2VuJ',
18 |     title: 'Xiaomi Redmi Note 2',
19 |     price: '699.99',
20 |     img: 'https://images2.imgbox.com/4f/3d/WN3GvciF_o.png',
21 |     amount: 1,
22 |   },
23 |   {
24 |     id: 'recwTo160XST3PIoW',
25 |     title: 'Samsung Galaxy S7',
26 |     price: '599.99 ',
27 |     img: 'https://images2.imgbox.com/2e/7c/yFsJ4Zkb_o.png',
28 |     amount: 1,
29 |   },
30 | ];
31 | export default cartItems;
32 | 


--------------------------------------------------------------------------------
/starter/src/icons.js:
--------------------------------------------------------------------------------
 1 | export const CartIcon = () => {
 2 |   return (
 3 |     <svg
 4 |       xmlns='http://www.w3.org/2000/svg'
 5 |       className='h-6 w-6 '
 6 |       fill='none'
 7 |       viewBox='0 0 24 24'
 8 |       stroke='currentColor'
 9 |       strokeWidth={2}
10 |     >
11 |       <path
12 |         strokeLinecap='round'
13 |         strokeLinejoin='round'
14 |         d='M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z'
15 |       />
16 |     </svg>
17 |   );
18 | };
19 | 
20 | export const ChevronDown = () => {
21 |   return (
22 |     <svg
23 |       xmlns='http://www.w3.org/2000/svg'
24 |       className='h-6 w-6'
25 |       fill='none'
26 |       viewBox='0 0 24 24'
27 |       stroke='currentColor'
28 |       strokeWidth={2}
29 |     >
30 |       <path strokeLinecap='round' strokeLinejoin='round' d='M19 9l-7 7-7-7' />
31 |     </svg>
32 |   );
33 | };
34 | 
35 | export const ChevronUp = () => {
36 |   return (
37 |     <svg
38 |       xmlns='http://www.w3.org/2000/svg'
39 |       className='h-6 w-6'
40 |       fill='none'
41 |       viewBox='0 0 24 24'
42 |       stroke='currentColor'
43 |       strokeWidth={2}
44 |     >
45 |       <path strokeLinecap='round' strokeLinejoin='round' d='M5 15l7-7 7 7' />
46 |     </svg>
47 |   );
48 | };
49 | 


--------------------------------------------------------------------------------
/starter/src/index.css:
--------------------------------------------------------------------------------
  1 | /*
  2 | =============== 
  3 | Variables
  4 | ===============
  5 | */
  6 | 
  7 | :root {
  8 |   --clr-primary: #645cff;
  9 |   --clr-primary-dark: #282566;
 10 |   --clr-primary-light: #a29dff;
 11 |   --clr-grey-1: #102a42;
 12 |   --clr-grey-5: #617d98;
 13 |   --clr-grey-10: #f1f5f8;
 14 |   --clr-white: #fff;
 15 |   --clr-red-dark: hsl(360, 67%, 44%);
 16 |   --clr-red-light: hsl(360, 71%, 66%);
 17 |   --transition: all 0.3s linear;
 18 |   --spacing: 0.25rem;
 19 |   --radius: 0.25rem;
 20 |   --large-screen-width: 1170px;
 21 |   --small-screen-width: 90vw;
 22 |   --fixed-width: 50rem;
 23 | }
 24 | * {
 25 |   margin: 0;
 26 |   padding: 0;
 27 |   box-sizing: border-box;
 28 | }
 29 | body {
 30 |   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
 31 |     Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
 32 |   background: var(--clr-grey-10);
 33 |   color: var(--clr-grey-1);
 34 |   line-height: 1.5;
 35 |   font-size: 0.875rem;
 36 | }
 37 | a {
 38 |   text-decoration: none;
 39 | }
 40 | img {
 41 |   width: 100%;
 42 |   display: block;
 43 | }
 44 | h1,
 45 | h2,
 46 | h3,
 47 | h4 {
 48 |   letter-spacing: var(--spacing);
 49 |   text-transform: capitalize;
 50 |   line-height: 1.25;
 51 |   margin-bottom: 0.75rem;
 52 | }
 53 | h1 {
 54 |   font-size: 3rem;
 55 | }
 56 | h2 {
 57 |   font-size: 2rem;
 58 | }
 59 | h3 {
 60 |   font-size: 1.5rem;
 61 | }
 62 | h4 {
 63 |   font-size: 0.875rem;
 64 | }
 65 | p {
 66 |   margin-bottom: 1.25rem;
 67 | }
 68 | @media screen and (min-width: 800px) {
 69 |   h1 {
 70 |     font-size: 4rem;
 71 |   }
 72 |   h2 {
 73 |     font-size: 2.5rem;
 74 |   }
 75 |   h3 {
 76 |     font-size: 2rem;
 77 |   }
 78 |   h4 {
 79 |     font-size: 1rem;
 80 |   }
 81 |   body {
 82 |     font-size: 1rem;
 83 |   }
 84 |   h1,
 85 |   h2,
 86 |   h3,
 87 |   h4 {
 88 |     line-height: 1;
 89 |   }
 90 | }
 91 | /* more global css */
 92 | 
 93 | .btn {
 94 |   text-transform: uppercase;
 95 |   background: var(--clr-primary);
 96 |   color: var(--clr-white);
 97 |   padding: 0.375rem 0.75rem;
 98 |   letter-spacing: var(--spacing);
 99 |   display: inline-block;
100 |   font-weight: 700;
101 |   transition: var(--transition);
102 |   font-size: 0.875rem;
103 |   border: none;
104 |   cursor: pointer;
105 |   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
106 | }
107 | .btn:hover {
108 |   color: var(--clr-primary);
109 |   background: var(--clr-primary-light);
110 | }
111 | 
112 | /*
113 | =============== 
114 | Navbar
115 | ===============
116 | */
117 | .loading {
118 |   text-align: center;
119 |   margin-top: 5rem;
120 | }
121 | nav {
122 |   background: var(--clr-primary);
123 |   padding: 1.25rem 2rem;
124 | }
125 | .nav-center {
126 |   max-width: var(--fixed-width);
127 |   width: 100%;
128 |   margin: 0 auto;
129 |   display: flex;
130 |   justify-content: space-between;
131 |   align-items: center;
132 | }
133 | nav h3 {
134 |   margin-bottom: 0;
135 |   letter-spacing: 1px;
136 |   color: var(--clr-white);
137 | }
138 | .nav-container {
139 |   display: block;
140 |   position: relative;
141 | }
142 | nav svg {
143 |   width: 40px;
144 |   color: var(--clr-white);
145 | }
146 | .amount-container {
147 |   position: absolute;
148 |   top: -0.6rem;
149 |   right: -0.6rem;
150 |   width: 1.75rem;
151 |   height: 1.75rem;
152 |   border-radius: 50%;
153 |   background: var(--clr-primary-light);
154 |   display: flex;
155 |   align-items: center;
156 |   justify-content: center;
157 | }
158 | .total-amount {
159 |   color: var(--clr-white);
160 |   margin-bottom: 0;
161 |   font-size: 1.25rem;
162 | }
163 | /*
164 | =============== 
165 | Cart
166 | ===============
167 | */
168 | .cart {
169 |   min-height: calc(100vh - 120px);
170 |   width: 90vw;
171 |   margin: 0 auto;
172 |   margin-top: 40px;
173 |   padding: 2.5rem 0;
174 |   max-width: var(--fixed-width);
175 | }
176 | .cart h2 {
177 |   text-transform: uppercase;
178 |   text-align: center;
179 |   margin-bottom: 3rem;
180 | }
181 | .empty-cart {
182 |   text-transform: lowercase;
183 |   color: var(--clr-grey-5);
184 |   margin-top: 1rem;
185 |   text-align: center;
186 | }
187 | .cart footer {
188 |   margin-top: 4rem;
189 |   text-align: center;
190 | }
191 | .cart-total h4 {
192 |   text-transform: capitalize;
193 |   display: flex;
194 |   justify-content: space-between;
195 |   margin-top: 1rem;
196 | }
197 | .clear-btn,
198 | .confirm-btn {
199 |   background: transparent;
200 |   padding: 0.5rem 1rem;
201 |   color: var(--clr-red-dark);
202 |   border: 1px solid var(--clr-red-dark);
203 |   margin-top: 2.25rem;
204 |   border-radius: var(--radius);
205 | }
206 | .clear-btn:hover {
207 |   background: var(--clr-red-light);
208 |   color: var(--clr-red-dark);
209 |   border-color: var(--clr-red-light);
210 | }
211 | .confirm-btn {
212 |   border-color: var(--clr-primary);
213 |   color: var(--clr-primary);
214 | }
215 | /*
216 | =============== 
217 | Cart Item
218 | ===============
219 | */
220 | .cart-item {
221 |   display: grid;
222 |   align-items: center;
223 |   grid-template-columns: auto 1fr auto;
224 |   grid-column-gap: 1.5rem;
225 |   margin: 1.5rem 0;
226 | }
227 | .cart-item img {
228 |   width: 5rem;
229 |   height: 5rem;
230 |   object-fit: cover;
231 | }
232 | .cart-item h4 {
233 |   margin-bottom: 0.5rem;
234 |   font-weight: 500;
235 |   letter-spacing: 2px;
236 | }
237 | .item-price {
238 |   color: var(--clr-grey-5);
239 | }
240 | .remove-btn {
241 |   color: var(--clr-primary);
242 |   letter-spacing: var(--spacing);
243 |   cursor: pointer;
244 |   font-size: 0.85rem;
245 |   background: transparent;
246 |   border: none;
247 |   margin-top: 0.375rem;
248 |   transition: var(--transition);
249 | }
250 | .remove-btn:hover {
251 |   color: var(--clr-primary-light);
252 | }
253 | .amount-btn {
254 |   width: 24px;
255 |   background: transparent;
256 |   border: none;
257 |   cursor: pointer;
258 | }
259 | .amount-btn svg {
260 |   color: var(--clr-primary);
261 | }
262 | .amount-btn:hover svg {
263 |   color: var(--clr-primary-light);
264 | }
265 | .amount {
266 |   text-align: center;
267 |   margin-bottom: 0;
268 |   font-size: 1.25rem;
269 |   line-height: 1;
270 | }
271 | hr {
272 |   background: var(--clr-grey-5);
273 |   border-color: transparent;
274 |   border-width: 0.25px;
275 | }
276 | 
277 | .modal-container {
278 |   position: fixed;
279 |   top: 0;
280 |   left: 0;
281 |   width: 100%;
282 |   height: 100%;
283 |   background: rgba(0, 0, 0, 0.7);
284 |   z-index: 10;
285 |   display: flex;
286 |   align-items: center;
287 |   justify-content: center;
288 | }
289 | 
290 | .modal {
291 |   background: var(--clr-white);
292 |   width: 80vw;
293 |   max-width: 400px;
294 |   border-radius: var(--radius);
295 |   padding: 2rem 1rem;
296 |   text-align: center;
297 | }
298 | .modal h4 {
299 |   margin-bottom: 0;
300 |   line-height: 1.5;
301 | }
302 | .modal .clear-btn,
303 | .modal .confirm-btn {
304 |   margin-top: 1rem;
305 | }
306 | .btn-container {
307 |   display: flex;
308 |   justify-content: space-around;
309 | }
310 | 


--------------------------------------------------------------------------------
/starter/src/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { createRoot } from 'react-dom/client';
 3 | import './index.css';
 4 | import App from './App';
 5 | 
 6 | const container = document.getElementById('root');
 7 | const root = createRoot(container);
 8 | 
 9 | root.render(
10 |   <React.StrictMode>
11 |     <App />
12 |   </React.StrictMode>
13 | );
14 | 


--------------------------------------------------------------------------------
/vite-final/.gitignore:
--------------------------------------------------------------------------------
 1 | # Logs
 2 | logs
 3 | *.log
 4 | npm-debug.log*
 5 | yarn-debug.log*
 6 | yarn-error.log*
 7 | pnpm-debug.log*
 8 | lerna-debug.log*
 9 | 
10 | node_modules
11 | dist
12 | dist-ssr
13 | *.local
14 | 
15 | # Editor directories and files
16 | .vscode/*
17 | !.vscode/extensions.json
18 | .idea
19 | .DS_Store
20 | *.suo
21 | *.ntvs*
22 | *.njsproj
23 | *.sln
24 | *.sw?
25 | 


--------------------------------------------------------------------------------
/vite-final/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7 |     <title>Vite + React</title>
 8 |   </head>
 9 |   <body>
10 |     <div id="root"></div>
11 |     <script type="module" src="/src/main.jsx"></script>
12 |   </body>
13 | </html>
14 | 


--------------------------------------------------------------------------------
/vite-final/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vite-finalp",
 3 |   "private": true,
 4 |   "version": "0.0.0",
 5 |   "type": "module",
 6 |   "scripts": {
 7 |     "dev": "vite",
 8 |     "build": "vite build",
 9 |     "preview": "vite preview"
10 |   },
11 |   "dependencies": {
12 |     "@reduxjs/toolkit": "^1.9.3",
13 |     "axios": "^1.3.4",
14 |     "react": "^18.2.0",
15 |     "react-dom": "^18.2.0",
16 |     "react-redux": "^8.0.5"
17 |   },
18 |   "devDependencies": {
19 |     "@types/react": "^18.0.27",
20 |     "@types/react-dom": "^18.0.10",
21 |     "@vitejs/plugin-react": "^3.1.0",
22 |     "vite": "^4.1.0"
23 |   }
24 | }
25 | 


--------------------------------------------------------------------------------
/vite-final/public/vite.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>


--------------------------------------------------------------------------------
/vite-final/src/App.jsx:
--------------------------------------------------------------------------------
 1 | import Navbar from './components/Navbar';
 2 | import CartContainer from './components/CartContainer';
 3 | 
 4 | import { useDispatch, useSelector } from 'react-redux';
 5 | import { calculateTotals, getCartItems } from './features/cart/cartSlice';
 6 | import { useEffect } from 'react';
 7 | import Modal from './components/Modal';
 8 | function App() {
 9 |   const { cartItems, isLoading } = useSelector((store) => store.cart);
10 |   const { isOpen } = useSelector((store) => store.modal);
11 |   const dispatch = useDispatch();
12 | 
13 |   useEffect(() => {
14 |     dispatch(calculateTotals());
15 |   }, [cartItems]);
16 | 
17 |   useEffect(() => {
18 |     dispatch(getCartItems('random'));
19 |   }, []);
20 | 
21 |   if (isLoading) {
22 |     return (
23 |       <div className='loading'>
24 |         <h1>Loading...</h1>
25 |       </div>
26 |     );
27 |   }
28 | 
29 |   return (
30 |     <main>
31 |       {isOpen && <Modal />}
32 |       <Navbar />
33 |       <CartContainer />
34 |     </main>
35 |   );
36 | }
37 | export default App;
38 | 


--------------------------------------------------------------------------------
/vite-final/src/assets/react.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>


--------------------------------------------------------------------------------
/vite-final/src/cartItems.js:
--------------------------------------------------------------------------------
 1 | const cartItems = [
 2 |   {
 3 |     id: 'rec1JZlfCIBOPdcT2',
 4 |     title: 'Samsung Galaxy S8',
 5 |     price: '399.99',
 6 |     img: 'https://images2.imgbox.com/c2/14/zedmXgs6_o.png',
 7 |     amount: 1,
 8 |   },
 9 |   {
10 |     id: 'recB6qcHPxb62YJ75',
11 |     title: 'google pixel',
12 |     price: '499.99',
13 |     img: 'https://images2.imgbox.com/fb/3d/O4TPmhlt_o.png',
14 |     amount: 1,
15 |   },
16 |   {
17 |     id: 'recdRxBsE14Rr2VuJ',
18 |     title: 'Xiaomi Redmi Note 2',
19 |     price: '699.99',
20 |     img: 'https://images2.imgbox.com/4f/3d/WN3GvciF_o.png',
21 |     amount: 1,
22 |   },
23 |   {
24 |     id: 'recwTo160XST3PIoW',
25 |     title: 'Samsung Galaxy S7',
26 |     price: '599.99 ',
27 |     img: 'https://images2.imgbox.com/2e/7c/yFsJ4Zkb_o.png',
28 |     amount: 1,
29 |   },
30 | ];
31 | export default cartItems;
32 | 


--------------------------------------------------------------------------------
/vite-final/src/components/CartContainer.jsx:
--------------------------------------------------------------------------------
 1 | import CartItem from './CartItem';
 2 | import { useDispatch, useSelector } from 'react-redux';
 3 | import { openModal } from '../features/modal/modalSlice';
 4 | 
 5 | const CartContainer = () => {
 6 |   const dispatch = useDispatch();
 7 |   const { cartItems, total, amount } = useSelector((store) => store.cart);
 8 | 
 9 |   if (amount < 1) {
10 |     return (
11 |       <section className='cart'>
12 |         <header>
13 |           <h2>your bag</h2>
14 |           <h4 className='empty-cart'>is currently empty</h4>
15 |         </header>
16 |       </section>
17 |     );
18 |   }
19 | 
20 |   return (
21 |     <section className='cart'>
22 |       <header>
23 |         <h2>your bag</h2>
24 |       </header>
25 |       <div>
26 |         {cartItems.map((item) => {
27 |           return <CartItem key={item.id} {...item} />;
28 |         })}
29 |       </div>
30 |       <footer>
31 |         <hr />
32 |         <div className='cart-total'>
33 |           <h4>
34 |             total <span>${total.toFixed(2)}</span>
35 |           </h4>
36 |         </div>
37 |         <button className='btn clear-btn' onClick={() => dispatch(openModal())}>
38 |           clear cart
39 |         </button>
40 |       </footer>
41 |     </section>
42 |   );
43 | };
44 | export default CartContainer;
45 | 


--------------------------------------------------------------------------------
/vite-final/src/components/CartItem.jsx:
--------------------------------------------------------------------------------
 1 | import { ChevronDown, ChevronUp } from '../icons';
 2 | import { removeItem, increase, decrease } from '../features/cart/cartSlice';
 3 | import { useDispatch } from 'react-redux';
 4 | 
 5 | const CartItem = ({ id, img, title, price, amount }) => {
 6 |   const dispatch = useDispatch();
 7 |   return (
 8 |     <article className='cart-item'>
 9 |       <img src={img} alt={title} />
10 |       <div>
11 |         <h4>{title}</h4>
12 |         <h4 className='item-price'>${price}</h4>
13 |         <button
14 |           className='remove-btn'
15 |           onClick={() => {
16 |             dispatch(removeItem(id));
17 |           }}
18 |         >
19 |           remove
20 |         </button>
21 |       </div>
22 |       <div>
23 |         <button
24 |           className='amount-btn'
25 |           onClick={() => {
26 |             dispatch(increase({ id }));
27 |           }}
28 |         >
29 |           <ChevronUp />
30 |         </button>
31 |         <p className='amount'>{amount}</p>
32 |         <button
33 |           className='amount-btn'
34 |           onClick={() => {
35 |             if (amount === 1) {
36 |               dispatch(removeItem(id));
37 |               return;
38 |             }
39 |             dispatch(decrease({ id }));
40 |           }}
41 |         >
42 |           <ChevronDown />
43 |         </button>
44 |       </div>
45 |     </article>
46 |   );
47 | };
48 | export default CartItem;
49 | 


--------------------------------------------------------------------------------
/vite-final/src/components/Modal.jsx:
--------------------------------------------------------------------------------
 1 | import { useDispatch } from 'react-redux';
 2 | import { clearCart } from '../features/cart/cartSlice';
 3 | import { closeModal } from '../features/modal/modalSlice';
 4 | 
 5 | const Modal = () => {
 6 |   const dispatch = useDispatch();
 7 |   return (
 8 |     <aside className='modal-container'>
 9 |       <div className='modal'>
10 |         <h4>remove all items from your shopping cart?</h4>
11 |         <div className='btn-container'>
12 |           <button
13 |             type='button'
14 |             className='btn confirm-btn'
15 |             onClick={() => {
16 |               dispatch(clearCart());
17 |               dispatch(closeModal());
18 |             }}
19 |           >
20 |             confirm
21 |           </button>
22 |           <button
23 |             type='button'
24 |             className='btn clear-btn'
25 |             onClick={() => {
26 |               dispatch(closeModal());
27 |             }}
28 |           >
29 |             cancel
30 |           </button>
31 |         </div>
32 |       </div>
33 |     </aside>
34 |   );
35 | };
36 | export default Modal;
37 | 


--------------------------------------------------------------------------------
/vite-final/src/components/Navbar.jsx:
--------------------------------------------------------------------------------
 1 | import { CartIcon } from '../icons';
 2 | import { useSelector } from 'react-redux';
 3 | 
 4 | const Navbar = () => {
 5 |   const { amount } = useSelector((store) => store.cart);
 6 |   return (
 7 |     <>
 8 |       <nav>
 9 |         <div className='nav-center'>
10 |           <h3>redux toolkit</h3>
11 |           <div className='nav-container'>
12 |             <CartIcon />
13 |             <div className='amount-container'>
14 |               <p className='total-amount'>{amount}</p>
15 |             </div>
16 |           </div>
17 |         </div>
18 |       </nav>
19 |     </>
20 |   );
21 | };
22 | export default Navbar;
23 | 


--------------------------------------------------------------------------------
/vite-final/src/features/cart/cartSlice.js:
--------------------------------------------------------------------------------
 1 | import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';
 2 | import axios from 'axios';
 3 | import { openModal } from '../modal/modalSlice';
 4 | 
 5 | const url = 'https://course-api.com/react-useReducer-cart-project';
 6 | 
 7 | const initialState = {
 8 |   cartItems: [],
 9 |   amount: 4,
10 |   total: 0,
11 |   isLoading: true,
12 | };
13 | 
14 | export const getCartItems = createAsyncThunk(
15 |   'cart/getCartItems',
16 |   async (name, thunkAPI) => {
17 |     try {
18 |       // console.log(name);
19 |       // console.log(thunkAPI);
20 |       // console.log(thunkAPI.getState());
21 |       // thunkAPI.dispatch(openModal());
22 |       const resp = await axios(url);
23 | 
24 |       return resp.data;
25 |     } catch (error) {
26 |       return thunkAPI.rejectWithValue('something went wrong');
27 |     }
28 |   }
29 | );
30 | 
31 | const cartSlice = createSlice({
32 |   name: 'cart',
33 |   initialState,
34 |   reducers: {
35 |     clearCart: (state) => {
36 |       state.cartItems = [];
37 |     },
38 |     removeItem: (state, action) => {
39 |       const itemId = action.payload;
40 |       state.cartItems = state.cartItems.filter((item) => item.id !== itemId);
41 |     },
42 |     increase: (state, { payload }) => {
43 |       const cartItem = state.cartItems.find((item) => item.id === payload.id);
44 |       cartItem.amount = cartItem.amount + 1;
45 |     },
46 |     decrease: (state, { payload }) => {
47 |       const cartItem = state.cartItems.find((item) => item.id === payload.id);
48 |       cartItem.amount = cartItem.amount - 1;
49 |     },
50 |     calculateTotals: (state) => {
51 |       let amount = 0;
52 |       let total = 0;
53 |       state.cartItems.forEach((item) => {
54 |         amount += item.amount;
55 |         total += item.amount * item.price;
56 |       });
57 |       state.amount = amount;
58 |       state.total = total;
59 |     },
60 |   },
61 |   extraReducers: (builder) => {
62 |     builder
63 |       .addCase(getCartItems.pending, (state) => {
64 |         state.isLoading = true;
65 |       })
66 |       .addCase(getCartItems.fulfilled, (state, action) => {
67 |         // console.log(action);
68 |         state.isLoading = false;
69 |         state.cartItems = action.payload;
70 |       })
71 |       .addCase(getCartItems.rejected, (state, action) => {
72 |         console.log(action);
73 |         state.isLoading = false;
74 |       });
75 |   },
76 | });
77 | 
78 | // console.log(cartSlice);
79 | export const { clearCart, removeItem, increase, decrease, calculateTotals } =
80 |   cartSlice.actions;
81 | 
82 | export default cartSlice.reducer;
83 | 


--------------------------------------------------------------------------------
/vite-final/src/features/modal/modalSlice.js:
--------------------------------------------------------------------------------
 1 | import { createSlice } from '@reduxjs/toolkit';
 2 | 
 3 | const initialState = {
 4 |   isOpen: false,
 5 | };
 6 | 
 7 | const modalSlice = createSlice({
 8 |   name: 'modal',
 9 |   initialState,
10 |   reducers: {
11 |     openModal: (state, action) => {
12 |       state.isOpen = true;
13 |     },
14 |     closeModal: (state, action) => {
15 |       state.isOpen = false;
16 |     },
17 |   },
18 | });
19 | 
20 | export const { openModal, closeModal } = modalSlice.actions;
21 | 
22 | export default modalSlice.reducer;
23 | 


--------------------------------------------------------------------------------
/vite-final/src/icons.jsx:
--------------------------------------------------------------------------------
 1 | export const CartIcon = () => {
 2 |   return (
 3 |     <svg
 4 |       xmlns='http://www.w3.org/2000/svg'
 5 |       className='h-6 w-6 '
 6 |       fill='none'
 7 |       viewBox='0 0 24 24'
 8 |       stroke='currentColor'
 9 |       strokeWidth={2}
10 |     >
11 |       <path
12 |         strokeLinecap='round'
13 |         strokeLinejoin='round'
14 |         d='M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z'
15 |       />
16 |     </svg>
17 |   );
18 | };
19 | 
20 | export const ChevronDown = () => {
21 |   return (
22 |     <svg
23 |       xmlns='http://www.w3.org/2000/svg'
24 |       className='h-6 w-6'
25 |       fill='none'
26 |       viewBox='0 0 24 24'
27 |       stroke='currentColor'
28 |       strokeWidth={2}
29 |     >
30 |       <path strokeLinecap='round' strokeLinejoin='round' d='M19 9l-7 7-7-7' />
31 |     </svg>
32 |   );
33 | };
34 | 
35 | export const ChevronUp = () => {
36 |   return (
37 |     <svg
38 |       xmlns='http://www.w3.org/2000/svg'
39 |       className='h-6 w-6'
40 |       fill='none'
41 |       viewBox='0 0 24 24'
42 |       stroke='currentColor'
43 |       strokeWidth={2}
44 |     >
45 |       <path strokeLinecap='round' strokeLinejoin='round' d='M5 15l7-7 7 7' />
46 |     </svg>
47 |   );
48 | };
49 | 


--------------------------------------------------------------------------------
/vite-final/src/index.css:
--------------------------------------------------------------------------------
  1 | /*
  2 | =============== 
  3 | Variables
  4 | ===============
  5 | */
  6 | 
  7 | :root {
  8 |   --clr-primary: #645cff;
  9 |   --clr-primary-dark: #282566;
 10 |   --clr-primary-light: #a29dff;
 11 |   --clr-grey-1: #102a42;
 12 |   --clr-grey-5: #617d98;
 13 |   --clr-grey-10: #f1f5f8;
 14 |   --clr-white: #fff;
 15 |   --clr-red-dark: hsl(360, 67%, 44%);
 16 |   --clr-red-light: hsl(360, 71%, 66%);
 17 |   --transition: all 0.3s linear;
 18 |   --spacing: 0.25rem;
 19 |   --radius: 0.25rem;
 20 |   --large-screen-width: 1170px;
 21 |   --small-screen-width: 90vw;
 22 |   --fixed-width: 50rem;
 23 | }
 24 | * {
 25 |   margin: 0;
 26 |   padding: 0;
 27 |   box-sizing: border-box;
 28 | }
 29 | body {
 30 |   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
 31 |     Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
 32 |   background: var(--clr-grey-10);
 33 |   color: var(--clr-grey-1);
 34 |   line-height: 1.5;
 35 |   font-size: 0.875rem;
 36 | }
 37 | a {
 38 |   text-decoration: none;
 39 | }
 40 | img {
 41 |   width: 100%;
 42 |   display: block;
 43 | }
 44 | h1,
 45 | h2,
 46 | h3,
 47 | h4 {
 48 |   letter-spacing: var(--spacing);
 49 |   text-transform: capitalize;
 50 |   line-height: 1.25;
 51 |   margin-bottom: 0.75rem;
 52 | }
 53 | h1 {
 54 |   font-size: 3rem;
 55 | }
 56 | h2 {
 57 |   font-size: 2rem;
 58 | }
 59 | h3 {
 60 |   font-size: 1.5rem;
 61 | }
 62 | h4 {
 63 |   font-size: 0.875rem;
 64 | }
 65 | p {
 66 |   margin-bottom: 1.25rem;
 67 | }
 68 | @media screen and (min-width: 800px) {
 69 |   h1 {
 70 |     font-size: 4rem;
 71 |   }
 72 |   h2 {
 73 |     font-size: 2.5rem;
 74 |   }
 75 |   h3 {
 76 |     font-size: 2rem;
 77 |   }
 78 |   h4 {
 79 |     font-size: 1rem;
 80 |   }
 81 |   body {
 82 |     font-size: 1rem;
 83 |   }
 84 |   h1,
 85 |   h2,
 86 |   h3,
 87 |   h4 {
 88 |     line-height: 1;
 89 |   }
 90 | }
 91 | /* more global css */
 92 | 
 93 | .btn {
 94 |   text-transform: uppercase;
 95 |   background: var(--clr-primary);
 96 |   color: var(--clr-white);
 97 |   padding: 0.375rem 0.75rem;
 98 |   letter-spacing: var(--spacing);
 99 |   display: inline-block;
100 |   font-weight: 700;
101 |   transition: var(--transition);
102 |   font-size: 0.875rem;
103 |   border: none;
104 |   cursor: pointer;
105 |   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
106 | }
107 | .btn:hover {
108 |   color: var(--clr-primary);
109 |   background: var(--clr-primary-light);
110 | }
111 | 
112 | /*
113 | =============== 
114 | Navbar
115 | ===============
116 | */
117 | .loading {
118 |   text-align: center;
119 |   margin-top: 5rem;
120 | }
121 | nav {
122 |   background: var(--clr-primary);
123 |   padding: 1.25rem 2rem;
124 | }
125 | .nav-center {
126 |   max-width: var(--fixed-width);
127 |   width: 100%;
128 |   margin: 0 auto;
129 |   display: flex;
130 |   justify-content: space-between;
131 |   align-items: center;
132 | }
133 | nav h3 {
134 |   margin-bottom: 0;
135 |   letter-spacing: 1px;
136 |   color: var(--clr-white);
137 | }
138 | .nav-container {
139 |   display: block;
140 |   position: relative;
141 | }
142 | nav svg {
143 |   width: 40px;
144 |   color: var(--clr-white);
145 | }
146 | .amount-container {
147 |   position: absolute;
148 |   top: -0.6rem;
149 |   right: -0.6rem;
150 |   width: 1.75rem;
151 |   height: 1.75rem;
152 |   border-radius: 50%;
153 |   background: var(--clr-primary-light);
154 |   display: flex;
155 |   align-items: center;
156 |   justify-content: center;
157 | }
158 | .total-amount {
159 |   color: var(--clr-white);
160 |   margin-bottom: 0;
161 |   font-size: 1.25rem;
162 | }
163 | /*
164 | =============== 
165 | Cart
166 | ===============
167 | */
168 | .cart {
169 |   min-height: calc(100vh - 120px);
170 |   width: 90vw;
171 |   margin: 0 auto;
172 |   margin-top: 40px;
173 |   padding: 2.5rem 0;
174 |   max-width: var(--fixed-width);
175 | }
176 | .cart h2 {
177 |   text-transform: uppercase;
178 |   text-align: center;
179 |   margin-bottom: 3rem;
180 | }
181 | .empty-cart {
182 |   text-transform: lowercase;
183 |   color: var(--clr-grey-5);
184 |   margin-top: 1rem;
185 |   text-align: center;
186 | }
187 | .cart footer {
188 |   margin-top: 4rem;
189 |   text-align: center;
190 | }
191 | .cart-total h4 {
192 |   text-transform: capitalize;
193 |   display: flex;
194 |   justify-content: space-between;
195 |   margin-top: 1rem;
196 | }
197 | .clear-btn,
198 | .confirm-btn {
199 |   background: transparent;
200 |   padding: 0.5rem 1rem;
201 |   color: var(--clr-red-dark);
202 |   border: 1px solid var(--clr-red-dark);
203 |   margin-top: 2.25rem;
204 |   border-radius: var(--radius);
205 | }
206 | .clear-btn:hover {
207 |   background: var(--clr-red-light);
208 |   color: var(--clr-red-dark);
209 |   border-color: var(--clr-red-light);
210 | }
211 | .confirm-btn {
212 |   border-color: var(--clr-primary);
213 |   color: var(--clr-primary);
214 | }
215 | /*
216 | =============== 
217 | Cart Item
218 | ===============
219 | */
220 | .cart-item {
221 |   display: grid;
222 |   align-items: center;
223 |   grid-template-columns: auto 1fr auto;
224 |   grid-column-gap: 1.5rem;
225 |   margin: 1.5rem 0;
226 | }
227 | .cart-item img {
228 |   width: 5rem;
229 |   height: 5rem;
230 |   object-fit: cover;
231 | }
232 | .cart-item h4 {
233 |   margin-bottom: 0.5rem;
234 |   font-weight: 500;
235 |   letter-spacing: 2px;
236 | }
237 | .item-price {
238 |   color: var(--clr-grey-5);
239 | }
240 | .remove-btn {
241 |   color: var(--clr-primary);
242 |   letter-spacing: var(--spacing);
243 |   cursor: pointer;
244 |   font-size: 0.85rem;
245 |   background: transparent;
246 |   border: none;
247 |   margin-top: 0.375rem;
248 |   transition: var(--transition);
249 | }
250 | .remove-btn:hover {
251 |   color: var(--clr-primary-light);
252 | }
253 | .amount-btn {
254 |   width: 24px;
255 |   background: transparent;
256 |   border: none;
257 |   cursor: pointer;
258 | }
259 | .amount-btn svg {
260 |   color: var(--clr-primary);
261 | }
262 | .amount-btn:hover svg {
263 |   color: var(--clr-primary-light);
264 | }
265 | .amount {
266 |   text-align: center;
267 |   margin-bottom: 0;
268 |   font-size: 1.25rem;
269 |   line-height: 1;
270 | }
271 | hr {
272 |   background: var(--clr-grey-5);
273 |   border-color: transparent;
274 |   border-width: 0.25px;
275 | }
276 | 
277 | .modal-container {
278 |   position: fixed;
279 |   top: 0;
280 |   left: 0;
281 |   width: 100%;
282 |   height: 100%;
283 |   background: rgba(0, 0, 0, 0.7);
284 |   z-index: 10;
285 |   display: flex;
286 |   align-items: center;
287 |   justify-content: center;
288 | }
289 | 
290 | .modal {
291 |   background: var(--clr-white);
292 |   width: 80vw;
293 |   max-width: 400px;
294 |   border-radius: var(--radius);
295 |   padding: 2rem 1rem;
296 |   text-align: center;
297 | }
298 | .modal h4 {
299 |   margin-bottom: 0;
300 |   line-height: 1.5;
301 | }
302 | .modal .clear-btn,
303 | .modal .confirm-btn {
304 |   margin-top: 1rem;
305 | }
306 | .btn-container {
307 |   display: flex;
308 |   justify-content: space-around;
309 | }
310 | 


--------------------------------------------------------------------------------
/vite-final/src/main.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { createRoot } from 'react-dom/client';
 3 | 
 4 | import './index.css';
 5 | import App from './App';
 6 | import { store } from './store';
 7 | import { Provider } from 'react-redux';
 8 | 
 9 | const container = document.getElementById('root');
10 | const root = createRoot(container);
11 | 
12 | root.render(
13 |   <React.StrictMode>
14 |     <Provider store={store}>
15 |       <App />
16 |     </Provider>
17 |   </React.StrictMode>
18 | );
19 | 


--------------------------------------------------------------------------------
/vite-final/src/store.js:
--------------------------------------------------------------------------------
 1 | import { configureStore } from '@reduxjs/toolkit';
 2 | import cartReducer from './features/cart/cartSlice';
 3 | import modalReducer from './features/modal/modalSlice';
 4 | export const store = configureStore({
 5 |   reducer: {
 6 |     cart: cartReducer,
 7 |     modal: modalReducer,
 8 |   },
 9 | });
10 | 


--------------------------------------------------------------------------------
/vite-final/vite.config.js:
--------------------------------------------------------------------------------
1 | import { defineConfig } from 'vite'
2 | import react from '@vitejs/plugin-react'
3 | 
4 | // https://vitejs.dev/config/
5 | export default defineConfig({
6 |   plugins: [react()],
7 | })
8 | 


--------------------------------------------------------------------------------
/vite-starter/.gitignore:
--------------------------------------------------------------------------------
 1 | # Logs
 2 | logs
 3 | *.log
 4 | npm-debug.log*
 5 | yarn-debug.log*
 6 | yarn-error.log*
 7 | pnpm-debug.log*
 8 | lerna-debug.log*
 9 | 
10 | node_modules
11 | dist
12 | dist-ssr
13 | *.local
14 | 
15 | # Editor directories and files
16 | .vscode/*
17 | !.vscode/extensions.json
18 | .idea
19 | .DS_Store
20 | *.suo
21 | *.ntvs*
22 | *.njsproj
23 | *.sln
24 | *.sw?
25 | 


--------------------------------------------------------------------------------
/vite-starter/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7 |     <title>Vite + React</title>
 8 |   </head>
 9 |   <body>
10 |     <div id="root"></div>
11 |     <script type="module" src="/src/main.jsx"></script>
12 |   </body>
13 | </html>
14 | 


--------------------------------------------------------------------------------
/vite-starter/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vite-finalp",
 3 |   "private": true,
 4 |   "version": "0.0.0",
 5 |   "type": "module",
 6 |   "scripts": {
 7 |     "dev": "vite",
 8 |     "build": "vite build",
 9 |     "preview": "vite preview"
10 |   },
11 |   "dependencies": {
12 |     "@reduxjs/toolkit": "^1.9.3",
13 |     "axios": "^1.3.4",
14 |     "react": "^18.2.0",
15 |     "react-dom": "^18.2.0",
16 |     "react-redux": "^8.0.5"
17 |   },
18 |   "devDependencies": {
19 |     "@types/react": "^18.0.27",
20 |     "@types/react-dom": "^18.0.10",
21 |     "@vitejs/plugin-react": "^3.1.0",
22 |     "vite": "^4.1.0"
23 |   }
24 | }
25 | 


--------------------------------------------------------------------------------
/vite-starter/public/vite.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>


--------------------------------------------------------------------------------
/vite-starter/src/App.jsx:
--------------------------------------------------------------------------------
1 | function App() {
2 |   return <h2>Redux Toolkit</h2>;
3 | }
4 | export default App;
5 | 


--------------------------------------------------------------------------------
/vite-starter/src/assets/react.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>


--------------------------------------------------------------------------------
/vite-starter/src/cartItems.js:
--------------------------------------------------------------------------------
 1 | const cartItems = [
 2 |   {
 3 |     id: 'rec1JZlfCIBOPdcT2',
 4 |     title: 'Samsung Galaxy S8',
 5 |     price: '399.99',
 6 |     img: 'https://images2.imgbox.com/c2/14/zedmXgs6_o.png',
 7 |     amount: 1,
 8 |   },
 9 |   {
10 |     id: 'recB6qcHPxb62YJ75',
11 |     title: 'google pixel',
12 |     price: '499.99',
13 |     img: 'https://images2.imgbox.com/fb/3d/O4TPmhlt_o.png',
14 |     amount: 1,
15 |   },
16 |   {
17 |     id: 'recdRxBsE14Rr2VuJ',
18 |     title: 'Xiaomi Redmi Note 2',
19 |     price: '699.99',
20 |     img: 'https://images2.imgbox.com/4f/3d/WN3GvciF_o.png',
21 |     amount: 1,
22 |   },
23 |   {
24 |     id: 'recwTo160XST3PIoW',
25 |     title: 'Samsung Galaxy S7',
26 |     price: '599.99 ',
27 |     img: 'https://images2.imgbox.com/2e/7c/yFsJ4Zkb_o.png',
28 |     amount: 1,
29 |   },
30 | ];
31 | export default cartItems;
32 | 


--------------------------------------------------------------------------------
/vite-starter/src/icons.jsx:
--------------------------------------------------------------------------------
 1 | export const CartIcon = () => {
 2 |   return (
 3 |     <svg
 4 |       xmlns='http://www.w3.org/2000/svg'
 5 |       className='h-6 w-6 '
 6 |       fill='none'
 7 |       viewBox='0 0 24 24'
 8 |       stroke='currentColor'
 9 |       strokeWidth={2}
10 |     >
11 |       <path
12 |         strokeLinecap='round'
13 |         strokeLinejoin='round'
14 |         d='M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z'
15 |       />
16 |     </svg>
17 |   );
18 | };
19 | 
20 | export const ChevronDown = () => {
21 |   return (
22 |     <svg
23 |       xmlns='http://www.w3.org/2000/svg'
24 |       className='h-6 w-6'
25 |       fill='none'
26 |       viewBox='0 0 24 24'
27 |       stroke='currentColor'
28 |       strokeWidth={2}
29 |     >
30 |       <path strokeLinecap='round' strokeLinejoin='round' d='M19 9l-7 7-7-7' />
31 |     </svg>
32 |   );
33 | };
34 | 
35 | export const ChevronUp = () => {
36 |   return (
37 |     <svg
38 |       xmlns='http://www.w3.org/2000/svg'
39 |       className='h-6 w-6'
40 |       fill='none'
41 |       viewBox='0 0 24 24'
42 |       stroke='currentColor'
43 |       strokeWidth={2}
44 |     >
45 |       <path strokeLinecap='round' strokeLinejoin='round' d='M5 15l7-7 7 7' />
46 |     </svg>
47 |   );
48 | };
49 | 


--------------------------------------------------------------------------------
/vite-starter/src/index.css:
--------------------------------------------------------------------------------
  1 | /*
  2 | =============== 
  3 | Variables
  4 | ===============
  5 | */
  6 | 
  7 | :root {
  8 |   --clr-primary: #645cff;
  9 |   --clr-primary-dark: #282566;
 10 |   --clr-primary-light: #a29dff;
 11 |   --clr-grey-1: #102a42;
 12 |   --clr-grey-5: #617d98;
 13 |   --clr-grey-10: #f1f5f8;
 14 |   --clr-white: #fff;
 15 |   --clr-red-dark: hsl(360, 67%, 44%);
 16 |   --clr-red-light: hsl(360, 71%, 66%);
 17 |   --transition: all 0.3s linear;
 18 |   --spacing: 0.25rem;
 19 |   --radius: 0.25rem;
 20 |   --large-screen-width: 1170px;
 21 |   --small-screen-width: 90vw;
 22 |   --fixed-width: 50rem;
 23 | }
 24 | * {
 25 |   margin: 0;
 26 |   padding: 0;
 27 |   box-sizing: border-box;
 28 | }
 29 | body {
 30 |   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
 31 |     Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
 32 |   background: var(--clr-grey-10);
 33 |   color: var(--clr-grey-1);
 34 |   line-height: 1.5;
 35 |   font-size: 0.875rem;
 36 | }
 37 | a {
 38 |   text-decoration: none;
 39 | }
 40 | img {
 41 |   width: 100%;
 42 |   display: block;
 43 | }
 44 | h1,
 45 | h2,
 46 | h3,
 47 | h4 {
 48 |   letter-spacing: var(--spacing);
 49 |   text-transform: capitalize;
 50 |   line-height: 1.25;
 51 |   margin-bottom: 0.75rem;
 52 | }
 53 | h1 {
 54 |   font-size: 3rem;
 55 | }
 56 | h2 {
 57 |   font-size: 2rem;
 58 | }
 59 | h3 {
 60 |   font-size: 1.5rem;
 61 | }
 62 | h4 {
 63 |   font-size: 0.875rem;
 64 | }
 65 | p {
 66 |   margin-bottom: 1.25rem;
 67 | }
 68 | @media screen and (min-width: 800px) {
 69 |   h1 {
 70 |     font-size: 4rem;
 71 |   }
 72 |   h2 {
 73 |     font-size: 2.5rem;
 74 |   }
 75 |   h3 {
 76 |     font-size: 2rem;
 77 |   }
 78 |   h4 {
 79 |     font-size: 1rem;
 80 |   }
 81 |   body {
 82 |     font-size: 1rem;
 83 |   }
 84 |   h1,
 85 |   h2,
 86 |   h3,
 87 |   h4 {
 88 |     line-height: 1;
 89 |   }
 90 | }
 91 | /* more global css */
 92 | 
 93 | .btn {
 94 |   text-transform: uppercase;
 95 |   background: var(--clr-primary);
 96 |   color: var(--clr-white);
 97 |   padding: 0.375rem 0.75rem;
 98 |   letter-spacing: var(--spacing);
 99 |   display: inline-block;
100 |   font-weight: 700;
101 |   transition: var(--transition);
102 |   font-size: 0.875rem;
103 |   border: none;
104 |   cursor: pointer;
105 |   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
106 | }
107 | .btn:hover {
108 |   color: var(--clr-primary);
109 |   background: var(--clr-primary-light);
110 | }
111 | 
112 | /*
113 | =============== 
114 | Navbar
115 | ===============
116 | */
117 | .loading {
118 |   text-align: center;
119 |   margin-top: 5rem;
120 | }
121 | nav {
122 |   background: var(--clr-primary);
123 |   padding: 1.25rem 2rem;
124 | }
125 | .nav-center {
126 |   max-width: var(--fixed-width);
127 |   width: 100%;
128 |   margin: 0 auto;
129 |   display: flex;
130 |   justify-content: space-between;
131 |   align-items: center;
132 | }
133 | nav h3 {
134 |   margin-bottom: 0;
135 |   letter-spacing: 1px;
136 |   color: var(--clr-white);
137 | }
138 | .nav-container {
139 |   display: block;
140 |   position: relative;
141 | }
142 | nav svg {
143 |   width: 40px;
144 |   color: var(--clr-white);
145 | }
146 | .amount-container {
147 |   position: absolute;
148 |   top: -0.6rem;
149 |   right: -0.6rem;
150 |   width: 1.75rem;
151 |   height: 1.75rem;
152 |   border-radius: 50%;
153 |   background: var(--clr-primary-light);
154 |   display: flex;
155 |   align-items: center;
156 |   justify-content: center;
157 | }
158 | .total-amount {
159 |   color: var(--clr-white);
160 |   margin-bottom: 0;
161 |   font-size: 1.25rem;
162 | }
163 | /*
164 | =============== 
165 | Cart
166 | ===============
167 | */
168 | .cart {
169 |   min-height: calc(100vh - 120px);
170 |   width: 90vw;
171 |   margin: 0 auto;
172 |   margin-top: 40px;
173 |   padding: 2.5rem 0;
174 |   max-width: var(--fixed-width);
175 | }
176 | .cart h2 {
177 |   text-transform: uppercase;
178 |   text-align: center;
179 |   margin-bottom: 3rem;
180 | }
181 | .empty-cart {
182 |   text-transform: lowercase;
183 |   color: var(--clr-grey-5);
184 |   margin-top: 1rem;
185 |   text-align: center;
186 | }
187 | .cart footer {
188 |   margin-top: 4rem;
189 |   text-align: center;
190 | }
191 | .cart-total h4 {
192 |   text-transform: capitalize;
193 |   display: flex;
194 |   justify-content: space-between;
195 |   margin-top: 1rem;
196 | }
197 | .clear-btn,
198 | .confirm-btn {
199 |   background: transparent;
200 |   padding: 0.5rem 1rem;
201 |   color: var(--clr-red-dark);
202 |   border: 1px solid var(--clr-red-dark);
203 |   margin-top: 2.25rem;
204 |   border-radius: var(--radius);
205 | }
206 | .clear-btn:hover {
207 |   background: var(--clr-red-light);
208 |   color: var(--clr-red-dark);
209 |   border-color: var(--clr-red-light);
210 | }
211 | .confirm-btn {
212 |   border-color: var(--clr-primary);
213 |   color: var(--clr-primary);
214 | }
215 | /*
216 | =============== 
217 | Cart Item
218 | ===============
219 | */
220 | .cart-item {
221 |   display: grid;
222 |   align-items: center;
223 |   grid-template-columns: auto 1fr auto;
224 |   grid-column-gap: 1.5rem;
225 |   margin: 1.5rem 0;
226 | }
227 | .cart-item img {
228 |   width: 5rem;
229 |   height: 5rem;
230 |   object-fit: cover;
231 | }
232 | .cart-item h4 {
233 |   margin-bottom: 0.5rem;
234 |   font-weight: 500;
235 |   letter-spacing: 2px;
236 | }
237 | .item-price {
238 |   color: var(--clr-grey-5);
239 | }
240 | .remove-btn {
241 |   color: var(--clr-primary);
242 |   letter-spacing: var(--spacing);
243 |   cursor: pointer;
244 |   font-size: 0.85rem;
245 |   background: transparent;
246 |   border: none;
247 |   margin-top: 0.375rem;
248 |   transition: var(--transition);
249 | }
250 | .remove-btn:hover {
251 |   color: var(--clr-primary-light);
252 | }
253 | .amount-btn {
254 |   width: 24px;
255 |   background: transparent;
256 |   border: none;
257 |   cursor: pointer;
258 | }
259 | .amount-btn svg {
260 |   color: var(--clr-primary);
261 | }
262 | .amount-btn:hover svg {
263 |   color: var(--clr-primary-light);
264 | }
265 | .amount {
266 |   text-align: center;
267 |   margin-bottom: 0;
268 |   font-size: 1.25rem;
269 |   line-height: 1;
270 | }
271 | hr {
272 |   background: var(--clr-grey-5);
273 |   border-color: transparent;
274 |   border-width: 0.25px;
275 | }
276 | 
277 | .modal-container {
278 |   position: fixed;
279 |   top: 0;
280 |   left: 0;
281 |   width: 100%;
282 |   height: 100%;
283 |   background: rgba(0, 0, 0, 0.7);
284 |   z-index: 10;
285 |   display: flex;
286 |   align-items: center;
287 |   justify-content: center;
288 | }
289 | 
290 | .modal {
291 |   background: var(--clr-white);
292 |   width: 80vw;
293 |   max-width: 400px;
294 |   border-radius: var(--radius);
295 |   padding: 2rem 1rem;
296 |   text-align: center;
297 | }
298 | .modal h4 {
299 |   margin-bottom: 0;
300 |   line-height: 1.5;
301 | }
302 | .modal .clear-btn,
303 | .modal .confirm-btn {
304 |   margin-top: 1rem;
305 | }
306 | .btn-container {
307 |   display: flex;
308 |   justify-content: space-around;
309 | }
310 | 


--------------------------------------------------------------------------------
/vite-starter/src/main.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { createRoot } from 'react-dom/client';
 3 | 
 4 | import './index.css';
 5 | import App from './App';
 6 | 
 7 | const container = document.getElementById('root');
 8 | const root = createRoot(container);
 9 | 
10 | root.render(
11 |   <React.StrictMode>
12 |     <App />
13 |   </React.StrictMode>
14 | );
15 | 


--------------------------------------------------------------------------------
/vite-starter/vite.config.js:
--------------------------------------------------------------------------------
1 | import { defineConfig } from 'vite'
2 | import react from '@vitejs/plugin-react'
3 | 
4 | // https://vitejs.dev/config/
5 | export default defineConfig({
6 |   plugins: [react()],
7 | })
8 | 


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