create reducer basket

package.json

@@ -6,7 +6,9 @@
     "@emotion/react": "^11.4.1",
     "@emotion/styled": "^11.3.0",
     "@mui/icons-material": "^5.0.3",
-    "@mui/material": "^5.0.3",
+    "@mui/lab": "*",
+    "@mui/material": "^5.0.4",
+    "@mui/styled-engine-sc": "^5.0.3",
     "@mui/styles": "^5.0.1",
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "^11.2.7",
@@ -25,6 +27,7 @@
     "redux": "^4.1.1",
     "redux-devtools-extension": "^2.13.9",
     "redux-thunk": "^2.3.0",
+    "styled-components": "^5.3.1",
     "typescript": "^4.4.3",
     "web-vitals": "^1.1.2"
   },

src/App.tsx

@@ -1,25 +1,14 @@
-import React, {FC, useEffect} from "react";
+import React, {FC} from "react";
 import './index.scss'
 import {Route, Switch} from "react-router-dom"
 import Main from "./pages/Main";
 import Basket from "./pages/Basket";
 import ErrorPage from "./pages/ErrorPage";
 import Header from "./components/Header";
 import {Container} from "@mui/material";
-import {useDispatch, useSelector} from "react-redux";
 
-import {fetchProducts} from "./redux/actionCreators/fetchProducts";
-import {IStateProducts} from "./redux/reducers/fetchProductsReducer";
 
 const App: FC = () => {
-    const dispatch = useDispatch()
-    const {isLoading} = useSelector((state:any) => state.products)
-
-    useEffect(() => {
-    dispatch(fetchProducts())
-    }, [])
-
-
     return (
         <main>
             <Header/>

src/components/CardList.tsx

@@ -1,14 +1,14 @@
 import React, {FC} from "react";
 import {Grid} from "@mui/material";
-import Card from './CardSneaker'
+import CardSneaker from './CardSneaker'
 import {useSelector} from "react-redux";
-import {IProduct} from "../redux/reducers/fetchProductsReducer";
+import {IProduct} from "../types/IProduct";
 
 const CardList: FC = () => {
-    const {products} = useSelector((state:any) => state.products)
+    const {products} = useSelector((state:any) => state.items)
     return (
-        <Grid container spacing={3}  sx={{mt: "2rem"}}>
-            {products.map((product: IProduct) => <Card key={product.id} {...product}/>)}
+        <Grid container spacing={3}  sx={{mt: "2rem"}} >
+            {products && products.map((product: IProduct, index: number) => <CardSneaker key={product.id} sneaker={product} index={index}/>)}
         </Grid>
     )
 }

src/components/CardSneaker.tsx

@@ -6,15 +6,28 @@ import CardContent from '@mui/material/CardContent';
 import CardMedia from '@mui/material/CardMedia';
 import Button from '@mui/material/Button';
 import Typography from '@mui/material/Typography';
-import {IProduct} from "../redux/reducers/fetchProductsReducer";
+import {IProduct} from "../types/IProduct";
+import {useDispatch} from "react-redux";
+import {addToBasket} from "../redux/reducers/basketReducer";
 
-const CardSneaker: FC<IProduct> = ({title, src, subTitle, price}) => {
+interface IPropsCardSneaker{
+    sneaker: IProduct
+    index: number
+}
+
+const CardSneaker: FC<IPropsCardSneaker> = ({sneaker,index}) => {
+    const dispatch = useDispatch()
+    const {subTitle,src,title,price,id} = sneaker;
+
+    const changeBasket = () => {
+        dispatch(addToBasket(sneaker))
+    }
     return (
         <Grid item>
             <Card sx={{ maxWidth: 345, minHeight: 650 }}>
                 <CardMedia
                     component="img"
-                    alt="green iguana"
+                    alt="sneaker img"
                     height="450"
                     image={src}
                 />
@@ -30,7 +43,7 @@ const CardSneaker: FC<IProduct> = ({title, src, subTitle, price}) => {
                     </Typography>
                 </CardContent>
                 <CardActions>
-                    <Button size="small">Buy</Button>
+                    <Button variant="contained" onClick={() => changeBasket()}>Buy</Button>
                 </CardActions>
             </Card>
         </Grid>

src/index.scss

@@ -11,3 +11,10 @@ body{
   text-decoration: none;
   color: white;
 }
+
+//Main
+.wrapper__main{
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}

src/pages/Main.tsx

@@ -1,9 +1,25 @@
-import React, {FC} from 'react';
+import React, {FC, useEffect} from 'react';
+import '../index.scss'
 import CardList from "../components/CardList";
+import {useDispatch, useSelector} from "react-redux";
+import {fetchProducts} from "../redux/actionCreators/fetchProducts";
+import LoadingButton from '@mui/lab/LoadingButton'
+
+const Main: FC = () => {
+    const {isLoading} = useSelector((state: any) => state.items)
+    const dispatch = useDispatch()
+
+    useEffect(() => {
+        dispatch(fetchProducts())
+    }, [])
 
-const Main:FC = () => {
     return (
-    <CardList />
+        <main className="wrapper__main">
+            {isLoading ? <LoadingButton loading sx={{padding: "50px"}}>
+                Submit
+            </LoadingButton> :
+                <CardList/>}
+        </main>
     );
 }
 

src/redux/reducers/basketReducer.ts

@@ -0,0 +1,34 @@
+import {IProduct} from "../../types/IProduct";
+import {enumBasketItems} from '../../types/enumBasketItems'
+
+interface IActionBasket {
+    type: string,
+    payload: IProduct
+
+}
+
+interface IStateBasket{
+    basketSneakers: IProduct[]
+}
+
+
+const initialState: IStateBasket = {
+    basketSneakers: []
+}
+
+
+
+export const basketReducer = (state = initialState, action: IActionBasket) => {
+    switch (action.type){
+        case enumBasketItems.ADD_ITEM:
+            return {...state, basketSneakers: [...state.basketSneakers, action.payload]}
+        default: return state
+    }
+}
+
+
+
+export const addToBasket = (sneaker: IProduct) :IActionBasket => ({
+    type: enumBasketItems.ADD_ITEM,
+    payload: sneaker
+})

src/redux/reducers/fetchProductsReducer.ts

@@ -1,12 +1,6 @@
 import {FetchProducts} from "../../types/enumFetchProducts";
+import {IProduct} from "../../types/IProduct";
 
-export interface IProduct{
-    title: string
-    subTitle: string,
-    price: string
-    src: string
-    id: number
-}
 
 export interface IStateProducts{
     isLoading: boolean

src/redux/reducers/rootReducer.ts

@@ -1,7 +1,10 @@
 import {combineReducers} from "redux";
 import {fetchProductsReducer} from "./fetchProductsReducer";
+import {basketReducer} from "./basketReducer";
+
 
 export const rootReducer = combineReducers({
-    products: fetchProductsReducer
+    items: fetchProductsReducer,
+    basketItems: basketReducer
     }
 )

src/types/IProduct.ts

@@ -0,0 +1,7 @@
+export interface IProduct{
+    title: string
+    subTitle: string,
+    price: string
+    src: string
+    id: number
+}

src/types/enumBasketItems.ts

@@ -0,0 +1,4 @@
+export enum enumBasketItems {
+    ADD_ITEM = 'ADD_ITEM',
+    DELETE_ITEM = 'DELETE_ITEM'
+}