├── public
    ├── robots.txt
    ├── favicon.ico
    ├── manifest.json
    └── index.html
├── README.md
├── .gitignore
├── src
    ├── features
    │   ├── apiSlice.js
    │   └── useCartSlice.js
    ├── App.js
    ├── index.js
    ├── App.css
    ├── app
    │   └── store.js
    ├── components
    │   ├── products
    │   │   └── Products.js
    │   ├── header
    │   │   └── Header.js
    │   └── cart
    │   │   └── Cart.js
    └── assets
    │   └── empty-cart.svg
└── package.json


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


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SinghDigamber/react-redux-shopping-cart/HEAD/public/favicon.ico


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # React Redux Persist Example
2 | 
3 | [React Redux Save Data in Local Storage with Persist Tutorial](https://www.positronx.io/react-redux-save-data-in-local-storage-with-persist-tutorial)


--------------------------------------------------------------------------------
/.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 | 


--------------------------------------------------------------------------------
/src/features/apiSlice.js:
--------------------------------------------------------------------------------
 1 | import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'
 2 | 
 3 | export const apiSlice = createApi({
 4 |   reducerPath: 'apiProductSlice',
 5 |   baseQuery: fetchBaseQuery({
 6 |     baseUrl: 'https://fakestoreapi.com',
 7 |   }),
 8 |   tagTypes: ['Product'],
 9 |   endpoints: (builder) => ({
10 |     getProducts: builder.query({
11 |       query: () => '/products',
12 |       providesTags: ['Product'],
13 |     }),
14 |   }),
15 | })
16 | 
17 | export const { useGetProductsQuery } = apiSlice
18 | 


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/src/App.js:
--------------------------------------------------------------------------------
 1 | import '../node_modules/bootstrap/dist/css/bootstrap.min.css'
 2 | import './App.css'
 3 | 
 4 | import { Routes, Route } from 'react-router-dom'
 5 | 
 6 | import Header from './components/header/Header'
 7 | import Products from './components/products/Products'
 8 | import Cart from './components/cart/Cart'
 9 | 
10 | function App() {
11 |   return (
12 |     <div className="container py-3">
13 |       <Header />
14 |       <Routes>
15 |         <Route path="/" element={<Products />} />
16 |         <Route path="/cart" element={<Cart />} />
17 |       </Routes>
18 |     </div>
19 |   )
20 | }
21 | 
22 | export default App
23 | 


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import ReactDOM from 'react-dom/client'
 3 | import App from './App'
 4 | 
 5 | import { BrowserRouter } from 'react-router-dom'
 6 | import { persistStore } from 'redux-persist'
 7 | import { PersistGate } from 'redux-persist/integration/react'
 8 | import { Provider } from 'react-redux'
 9 | 
10 | import store from './app/store'
11 | let persistor = persistStore(store)
12 | 
13 | const root = ReactDOM.createRoot(document.getElementById('root'))
14 | 
15 | root.render(
16 |   <BrowserRouter>
17 |     <Provider store={store}>
18 |       <PersistGate persistor={persistor}>
19 |         <App />
20 |       </PersistGate>
21 |     </Provider>
22 |   </BrowserRouter>,
23 | )


--------------------------------------------------------------------------------
/src/App.css:
--------------------------------------------------------------------------------
 1 | .container {
 2 |   max-width: 960px;
 3 | }
 4 | 
 5 | .navbar {
 6 |   background-color: #e3f2fd;
 7 | }
 8 | 
 9 | .cart svg {
10 |   width: 33px;
11 |   height: 30px;
12 | }
13 | 
14 | .cart .top-0 {
15 |   top: 8px !important;
16 | }
17 | 
18 | .cart {
19 |   cursor: pointer;
20 | }
21 | 
22 | .cart .thumbnail {
23 |   width: 72px;
24 |   height: 72px;
25 | }
26 | 
27 | .product-card .img-grid {
28 |   width: 200px;
29 |   margin: 0 auto;
30 |   height: 200px;
31 |   padding: 15px;
32 |   overflow: hidden;
33 | }
34 | 
35 | .product-card .img-grid img {
36 |   width: 100%;
37 | }
38 | 
39 | .cart-table .media-object {
40 |   width: 80px;
41 | }
42 | 
43 | .cart-quantity span {
44 |   width: 35px;
45 |   display: inline-block;
46 |   font-weight: bold;
47 | }
48 | 
49 | .empty-cart .img-thumbnail {
50 |   padding: 0.25rem;
51 |   border: none;
52 |   width: 380px;
53 |   height: auto;
54 | }
55 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "react-redux-shopping-cart",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "dependencies": {
 6 |     "@reduxjs/toolkit": "^1.8.3",
 7 |     "@testing-library/jest-dom": "^5.16.4",
 8 |     "@testing-library/react": "^13.3.0",
 9 |     "@testing-library/user-event": "^13.5.0",
10 |     "autoprefixer": "10.4.5",
11 |     "bootstrap": "^5.2.0-beta1",
12 |     "react": "^18.2.0",
13 |     "react-dom": "^18.2.0",
14 |     "react-redux": "^8.0.2",
15 |     "react-router-dom": "^6.3.0",
16 |     "react-scripts": "5.0.1",
17 |     "redux-persist": "^6.0.0",
18 |     "web-vitals": "^2.1.4"
19 |   },
20 |   "scripts": {
21 |     "start": "react-scripts start",
22 |     "build": "react-scripts build",
23 |     "test": "react-scripts test",
24 |     "eject": "react-scripts eject"
25 |   },
26 |   "eslintConfig": {
27 |     "extends": [
28 |       "react-app",
29 |       "react-app/jest"
30 |     ]
31 |   },
32 |   "browserslist": {
33 |     "production": [
34 |       ">0.2%",
35 |       "not dead",
36 |       "not op_mini all"
37 |     ],
38 |     "development": [
39 |       "last 1 chrome version",
40 |       "last 1 firefox version",
41 |       "last 1 safari version"
42 |     ]
43 |   }
44 | }
45 | 


--------------------------------------------------------------------------------
/src/app/store.js:
--------------------------------------------------------------------------------
 1 | import { configureStore } from '@reduxjs/toolkit'
 2 | import { setupListeners } from '@reduxjs/toolkit/query'
 3 | 
 4 | import { combineReducers } from '@reduxjs/toolkit'
 5 | import { apiSlice } from '../features/apiSlice'
 6 | import useCartReducer from '../features/useCartSlice'
 7 | 
 8 | import storage from 'redux-persist/lib/storage'
 9 | 
10 | import {
11 |   persistReducer,
12 |   FLUSH,
13 |   REHYDRATE,
14 |   PAUSE,
15 |   PERSIST,
16 |   PURGE,
17 |   REGISTER,
18 | } from 'redux-persist'
19 | 
20 | const persistConfig = {
21 |   key: 'root',
22 |   storage: storage,
23 |   blacklist: ['apiProductSlice'],
24 | }
25 | 
26 | export const rootReducers = combineReducers({
27 |   cart: useCartReducer,
28 |   [apiSlice.reducerPath]: apiSlice.reducer,
29 | })
30 | 
31 | const persistedReducer = persistReducer(persistConfig, rootReducers)
32 | 
33 | const store = configureStore({
34 |   reducer: persistedReducer,
35 |   middleware: (getDefaultMiddleware) =>
36 |     getDefaultMiddleware({
37 |       serializableCheck: {
38 |         ignoredActions: [FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER],
39 |       },
40 |     }).concat(apiSlice.middleware),
41 | })
42 | 
43 | setupListeners(store.dispatch)
44 | 
45 | export default store
46 | 


--------------------------------------------------------------------------------
/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>React App</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 | 


--------------------------------------------------------------------------------
/src/features/useCartSlice.js:
--------------------------------------------------------------------------------
 1 | import { createSlice } from '@reduxjs/toolkit'
 2 | 
 3 | const useCartSlice = createSlice({
 4 |   name: 'cart',
 5 |   initialState: {
 6 |     cartItems: [],
 7 |     totalCount: 0,
 8 |     tax: 0,
 9 |     subAmount: 0,
10 |     totalAmount: 0,
11 |   },
12 |   reducers: {
13 |     addCartProduct: {
14 |       reducer: (state, action) => {
15 |         let cartIndex = state.cartItems.findIndex(
16 |           (item) => item.id === action.payload.id,
17 |         )
18 |         if (cartIndex >= 0) {
19 |           state.cartItems[cartIndex].quantity += 1
20 |         } else {
21 |           let tempProduct = { ...action.payload, quantity: 1 }
22 |           state.cartItems.push(tempProduct)
23 |         }
24 |       },
25 |     },
26 |     getCartProducts: (state, action) => {
27 |       return {
28 |         ...state,
29 |       }
30 |     },
31 |     getCartCount: (state, action) => {
32 |       let cartCount = state.cartItems.reduce((total, item) => {
33 |         return item.quantity + total
34 |       }, 0)
35 |       state.totalCount = cartCount
36 |     },
37 |     getSubTotal: (state, action) => {
38 |       state.subAmount = state.cartItems.reduce((acc, item) => {
39 |         return acc + item.price * item.quantity
40 |       }, 0)
41 |     },
42 |     removeCartItem: (state, action) => {
43 |       let index = state.cartItems.findIndex(
44 |         (item) => item.id === action.payload,
45 |       )
46 |       if (index !== -1) {
47 |         state.cartItems.splice(index, 1)
48 |       }
49 |     },
50 |     increment: (state, action) => {
51 |       let index = state.cartItems.findIndex(
52 |         (item) => item.id === action.payload,
53 |       )
54 |       state.cartItems[index].quantity += 1
55 |     },
56 |     decrement: (state, action) => {
57 |       let index = state.cartItems.findIndex(
58 |         (item) => item.id === action.payload,
59 |       )
60 |       if (state.cartItems[index].quantity <= 0) {
61 |         state.cartItems[index].quantity = 0
62 |       } else {
63 |         state.cartItems[index].quantity -= 1
64 |       }
65 |     },
66 |     calculateTax: (state, action) => {
67 |       // GST value: 18% => action.payload
68 |       let totalTax = (18 / 100) * state.subAmount
69 |       state.tax = totalTax
70 |     },
71 |     getTotalAmount: (state, action) => {
72 |       state.totalAmount = state.tax + state.subAmount
73 |     },
74 |   },
75 | })
76 | 
77 | export const {
78 |   addCartProduct,
79 |   getCartProducts,
80 |   removeCartItem,
81 |   getCartCount,
82 |   getSubTotal,
83 |   increment,
84 |   decrement,
85 |   calculateTax,
86 |   getTotalAmount,
87 | } = useCartSlice.actions
88 | 
89 | export default useCartSlice.reducer
90 | 


--------------------------------------------------------------------------------
/src/components/products/Products.js:
--------------------------------------------------------------------------------
  1 | import React, { useEffect } from 'react'
  2 | import { useGetProductsQuery } from '../../features/apiSlice'
  3 | import {
  4 |   addCartProduct,
  5 |   getCartCount,
  6 |   getSubTotal,
  7 |   calculateTax,
  8 |   getTotalAmount,
  9 | } from '../../features/useCartSlice'
 10 | import { useDispatch } from 'react-redux'
 11 | 
 12 | function Products() {
 13 |   const dispatch = useDispatch()
 14 | 
 15 |   let productObj = {
 16 |     id: '',
 17 |     title: '',
 18 |     price: '',
 19 |     image: '',
 20 |   }
 21 | 
 22 |   const addToCart = (item) => {
 23 |     productObj = {
 24 |       id: item.id,
 25 |       title: item.title,
 26 |       price: item.price,
 27 |       image: item.image,
 28 |     }
 29 |     dispatch(addCartProduct(productObj))
 30 |     dispatch(getCartCount())
 31 |     dispatch(getSubTotal())
 32 |     dispatch(calculateTax())
 33 |     dispatch(getTotalAmount())
 34 |   }
 35 | 
 36 |   const {
 37 |     data: products,
 38 |     isLoading: isProductLoading,
 39 |     isSuccess: isProductSuccess,
 40 |     isError: isProductError,
 41 |     error: prouctError,
 42 |   } = useGetProductsQuery({ refetchOnMountOrArgChange: true })
 43 | 
 44 |   useEffect(() => {}, [dispatch])
 45 | 
 46 |   let getData
 47 | 
 48 |   if (isProductLoading) {
 49 |     getData = (
 50 |       <div className="d-flex justify-content-center w-100">
 51 |         <div className="spinner-border text-primary" role="status">
 52 |           <span className="visually-hidden">Loading...</span>
 53 |         </div>
 54 |       </div>
 55 |     )
 56 |   } else if (isProductSuccess) {
 57 |     getData = products.map((item) => {
 58 |       return (
 59 |         <div className="col" key={item.id}>
 60 |           <div className="card h-100 product-card">
 61 |             <div className="img-grid mb-3">
 62 |               <img src={item.image} className="card-img-top" alt={item.title} />
 63 |             </div>
 64 |             <div className="card-body">
 65 |               <h5 className="card-title">${item.price}</h5>
 66 |               <p className="card-text">
 67 |                 {item.description.substring(0, 50)}...
 68 |               </p>
 69 |               <button className="btn btn-outline-danger me-2">Buy now</button>
 70 |               <button
 71 |                 onClick={() => {
 72 |                   addToCart(item)
 73 |                 }}
 74 |                 className="btn btn-outline-primary"
 75 |               >
 76 |                 Add to cart
 77 |               </button>
 78 |             </div>
 79 |           </div>
 80 |         </div>
 81 |       )
 82 |     })
 83 |   } else if (isProductError) {
 84 |     getData = (
 85 |       <div className="alert alert-danger w-100 text-center" role="alert">
 86 |         {prouctError.status} {JSON.stringify(prouctError)}
 87 |       </div>
 88 |     )
 89 |   }
 90 | 
 91 |   return (
 92 |     <div>
 93 |       <div className="row row-cols-1 row-cols-md-3 row-cols-sm-2 g-4">
 94 |         {getData}
 95 |       </div>
 96 |     </div>
 97 |   )
 98 | }
 99 | 
100 | export default Products
101 | 


--------------------------------------------------------------------------------
/src/components/header/Header.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import { Link } from 'react-router-dom'
 3 | 
 4 | import { useSelector } from 'react-redux'
 5 | 
 6 | function Header() {
 7 |   const { totalCount } = useSelector((state) => state.cart)
 8 | 
 9 |   return (
10 |     <header>
11 |       <div className="d-flex flex-column flex-md-row align-items-center pb-3 mb-3 border-bottom">
12 |         <Link
13 |           to="/"
14 |           className="d-flex align-items-center text-dark text-decoration-none"
15 |         >
16 |           <svg
17 |             xmlns="http://www.w3.org/2000/svg"
18 |             width="40"
19 |             height="32"
20 |             className="me-2"
21 |             viewBox="0 0 118 94"
22 |             role="img"
23 |           >
24 |             <title>Bootstrap</title>
25 |             <path
26 |               fillRule="evenodd"
27 |               clipRule="evenodd"
28 |               d="M24.509 0c-6.733 0-11.715 5.893-11.492 12.284.214 6.14-.064 14.092-2.066 20.577C8.943 39.365 5.547 43.485 0 44.014v5.972c5.547.529 8.943 4.649 10.951 11.153 2.002 6.485 2.28 14.437 2.066 20.577C12.794 88.106 17.776 94 24.51 94H93.5c6.733 0 11.714-5.893 11.491-12.284-.214-6.14.064-14.092 2.066-20.577 2.009-6.504 5.396-10.624 10.943-11.153v-5.972c-5.547-.529-8.934-4.649-10.943-11.153-2.002-6.484-2.28-14.437-2.066-20.577C105.214 5.894 100.233 0 93.5 0H24.508zM80 57.863C80 66.663 73.436 72 62.543 72H44a2 2 0 01-2-2V24a2 2 0 012-2h18.437c9.083 0 15.044 4.92 15.044 12.474 0 5.302-4.01 10.049-9.119 10.88v.277C75.317 46.394 80 51.21 80 57.863zM60.521 28.34H49.948v14.934h8.905c6.884 0 10.68-2.772 10.68-7.727 0-4.643-3.264-7.207-9.012-7.207zM49.948 49.2v16.458H60.91c7.167 0 10.964-2.876 10.964-8.281 0-5.406-3.903-8.178-11.425-8.178H49.948z"
29 |               fill="currentColor"
30 |             ></path>
31 |           </svg>
32 |           <span className="fs-4">React cart example</span>
33 |         </Link>
34 | 
35 |         <nav className="d-inline-flex mt-2 mt-md-0 ms-md-auto">
36 |           <span className="cart py-2 text-dark text-decoration-none position-relative">
37 |             <Link to="/cart">
38 |               <svg
39 |                 xmlns="http://www.w3.org/2000/svg"
40 |                 width="16"
41 |                 height="16"
42 |                 fill="currentColor"
43 |                 className="bi bi-cart4"
44 |                 viewBox="0 0 16 16"
45 |               >
46 |                 <path d="M0 2.5A.5.5 0 0 1 .5 2H2a.5.5 0 0 1 .485.379L2.89 4H14.5a.5.5 0 0 1 .485.621l-1.5 6A.5.5 0 0 1 13 11H4a.5.5 0 0 1-.485-.379L1.61 3H.5a.5.5 0 0 1-.5-.5zM3.14 5l.5 2H5V5H3.14zM6 5v2h2V5H6zm3 0v2h2V5H9zm3 0v2h1.36l.5-2H12zm1.11 3H12v2h.61l.5-2zM11 8H9v2h2V8zM8 8H6v2h2V8zM5 8H3.89l.5 2H5V8zm0 5a1 1 0 1 0 0 2 1 1 0 0 0 0-2zm-2 1a2 2 0 1 1 4 0 2 2 0 0 1-4 0zm9-1a1 1 0 1 0 0 2 1 1 0 0 0 0-2zm-2 1a2 2 0 1 1 4 0 2 2 0 0 1-4 0z" />
47 |               </svg>
48 |               <span className="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">
49 |                 {totalCount}
50 |                 <span className="visually-hidden">unread messages</span>
51 |               </span>
52 |             </Link>
53 |           </span>
54 |         </nav>
55 |       </div>
56 |     </header>
57 |   )
58 | }
59 | 
60 | export default Header
61 | 


--------------------------------------------------------------------------------
/src/assets/empty-cart.svg:
--------------------------------------------------------------------------------
 1 | <svg width="479" height="450" viewBox="0 0 479 450" fill="none" xmlns="http://www.w3.org/2000/svg">
 2 | <path d="M205.193 42.8874C119.169 28.7909 64.2098 126.856 47.4832 177.651C2.79672 325.964 87.781 365.336 135.859 366.483C199.577 357.465 256.525 375.182 277.034 385.168C456.862 435.543 470.442 311.685 454.753 243.459C418.895 105.017 356.345 112.621 329.552 133.728C261.497 181.576 244.904 133.468 245.115 103.433C249.365 52.8489 220.271 41.9926 205.193 42.8874Z" fill="#EEEDFC" stroke="#EEEDFC"/>
 3 | <rect x="231" y="153" width="2.66667" height="2.66667" fill="#7B72F9"/>
 4 | <rect x="235" y="157" width="2.66667" height="2.66667" fill="#7B72F9"/>
 5 | <rect x="231" y="157" width="2.66667" height="2.66667" fill="#7B72F9"/>
 6 | <rect x="235" y="153" width="2.66667" height="2.66667" fill="#7B72F9"/>
 7 | <ellipse cx="269.886" cy="319.81" rx="73.5" ry="10.3433" transform="rotate(3.70988 269.886 319.81)" fill="#CECDDE"/>
 8 | <path d="M351.124 204.617L324.364 203.751C323.912 203.736 323.506 204.027 323.375 204.459L300.049 281.022C299.915 281.462 299.498 281.754 299.038 281.729L215.923 277.185C215.49 277.161 215.122 276.861 215.011 276.443L199.72 218.792C199.547 218.141 200.055 217.509 200.728 217.537L317.509 222.366" stroke="#4034E0" stroke-width="2"/>
 9 | <path d="M299.821 281.772C299.821 281.772 308.285 280.084 308.573 293.081C308.828 304.578 300.319 304.267 300.319 304.267L215.196 299.651" stroke="#4034E0" stroke-width="2"/>
10 | <ellipse cx="226.381" cy="307.905" rx="8" ry="8.5" transform="rotate(-1.26902 226.381 307.905)" fill="#4034E0"/>
11 | <ellipse cx="291.476" cy="311.464" rx="8" ry="8.5" transform="rotate(-1.26902 291.476 311.464)" fill="#4034E0"/>
12 | <line x1="222.4" y1="218.488" x2="222.707" y2="277.496" stroke="#4034E0" stroke-width="2"/>
13 | <line x1="240.487" y1="219.161" x2="238.655" y2="278.141" stroke="#4034E0" stroke-width="2"/>
14 | <path d="M209.328 256.773L306.476 262.706" stroke="#4034E0" stroke-width="2"/>
15 | <line x1="203.832" y1="234.889" x2="312.066" y2="240.393" stroke="#4034E0" stroke-width="2"/>
16 | <line x1="258.249" y1="220.84" x2="254.971" y2="279.758" stroke="#4034E0" stroke-width="2"/>
17 | <line x1="275.667" y1="220.505" x2="271.543" y2="279.369" stroke="#4034E0" stroke-width="2"/>
18 | <line x1="292.628" y1="222.26" x2="286.658" y2="280.966" stroke="#4034E0" stroke-width="2"/>
19 | <line x1="297.066" y1="160.602" x2="297.066" y2="148.038" stroke="#CECDDE" stroke-width="4"/>
20 | <line x1="296.934" y1="165.26" x2="296.941" y2="177.824" stroke="#CECDDE" stroke-width="4"/>
21 | <line x1="294.564" y1="162.879" x2="282" y2="162.879" stroke="#CECDDE" stroke-width="4"/>
22 | <line x1="299.435" y1="162.983" x2="311.999" y2="162.976" stroke="#CECDDE" stroke-width="4"/>
23 | <path d="M265.545 190.618L254.242 124.431C252.275 112.917 265.649 112.718 265.824 125.505L267.53 190.423C267.563 191.664 265.754 191.841 265.545 190.618Z" fill="#23A8F9"/>
24 | <path d="M223.606 199.471L190.828 166.862C184.681 160.747 192.681 154.868 198.293 162.524L225.11 198.161C225.857 199.153 224.486 200.347 223.606 199.471Z" fill="#23A8F9"/>
25 | <path d="M301.064 198.664L329.978 162.584C335.4 155.818 342.101 163.143 335.09 169.542L302.528 200.02C301.621 200.868 300.288 199.633 301.064 198.664Z" fill="#23A8F9"/>
26 | <line x1="164.39" y1="172.343" x2="164.39" y2="165" stroke="#6BCBDB" stroke-width="2"/>
27 | <line x1="164.56" y1="174.481" x2="164.563" y2="181.824" stroke="#6BCBDB" stroke-width="2"/>
28 | <line x1="163.343" y1="173.505" x2="156" y2="173.505" stroke="#6BCBDB" stroke-width="2"/>
29 | <line x1="165.606" y1="173.319" x2="172.949" y2="173.315" stroke="#6BCBDB" stroke-width="2"/>
30 | <line x1="213.535" y1="144.288" x2="213.535" y2="140" stroke="#CECDDE" stroke-width="2"/>
31 | <line x1="213.466" y1="146.536" x2="213.469" y2="150.824" stroke="#CECDDE" stroke-width="2"/>
32 | <line x1="212.34" y1="145.383" x2="208.052" y2="145.383" stroke="#CECDDE" stroke-width="2"/>
33 | <line x1="214.661" y1="145.442" x2="218.949" y2="145.44" stroke="#CECDDE" stroke-width="2"/>
34 | </svg>
35 | 


--------------------------------------------------------------------------------
/src/components/cart/Cart.js:
--------------------------------------------------------------------------------
  1 | import React, { useEffect } from 'react'
  2 | 
  3 | import { Link } from 'react-router-dom'
  4 | import noCart from '../../assets/empty-cart.svg'
  5 | 
  6 | import { useDispatch, useSelector } from 'react-redux'
  7 | import {
  8 |   getCartProducts,
  9 |   getSubTotal,
 10 |   removeCartItem,
 11 |   getCartCount,
 12 |   increment,
 13 |   decrement,
 14 |   calculateTax,
 15 |   getTotalAmount,
 16 | } from '../../features/useCartSlice'
 17 | 
 18 | function Cart() {
 19 |   const dispatch = useDispatch()
 20 |   const { cartItems, subAmount, tax, totalAmount } = useSelector(
 21 |     (state) => state.cart,
 22 |   )
 23 | 
 24 |   useEffect(() => {
 25 |     dispatch(getCartProducts())
 26 |     dispatch(getSubTotal())
 27 |     dispatch(getCartCount())
 28 |     dispatch(calculateTax())
 29 |     dispatch(getTotalAmount())
 30 |   }, [dispatch])
 31 | 
 32 |   let showCart
 33 | 
 34 |   if (cartItems !== undefined && cartItems.length > 0) {
 35 |     showCart = (
 36 |       <>
 37 |         <table className="table table-hover mb-3 cart-table">
 38 |           <thead>
 39 |             <tr>
 40 |               <th>Product</th>
 41 |               <th className="text-center">Quantity</th>
 42 |               <th className="text-center">Price</th>
 43 |               <th className="text-center">Total</th>
 44 |             </tr>
 45 |           </thead>
 46 |           <tbody>
 47 |             {cartItems !== undefined &&
 48 |               cartItems.length > 0 &&
 49 |               cartItems.map((product, index) => {
 50 |                 return (
 51 |                   <tr key={product.id}>
 52 |                     <td className="col-md-4">
 53 |                       <div className="media">
 54 |                         <a className="thumbnail pull-left" href="/#">
 55 |                           <img className="media-object" src={product.image} alt={product.title} />
 56 |                         </a>
 57 |                       </div>
 58 |                     </td>
 59 | 
 60 |                     <td className="col-sm-1 col-md-2 text-center">
 61 |                       <div className="cart-quantity">
 62 |                         <button
 63 |                           className="btn btn-sm btn-outline-primary inline-block"
 64 |                           onClick={() => {
 65 |                             dispatch(increment(product.id))
 66 |                             dispatch(getSubTotal())
 67 |                             dispatch(getCartCount())
 68 |                             dispatch(calculateTax())
 69 |                             dispatch(getTotalAmount())
 70 |                           }}
 71 |                         >
 72 |                           <svg
 73 |                             xmlns="http://www.w3.org/2000/svg"
 74 |                             width="16"
 75 |                             height="16"
 76 |                             fill="currentColor"
 77 |                             className="bi bi-plus-lg"
 78 |                             viewBox="0 0 16 16"
 79 |                           >
 80 |                             <path
 81 |                               fillRule="evenodd"
 82 |                               d="M8 2a.5.5 0 0 1 .5.5v5h5a.5.5 0 0 1 0 1h-5v5a.5.5 0 0 1-1 0v-5h-5a.5.5 0 0 1 0-1h5v-5A.5.5 0 0 1 8 2Z"
 83 |                             />
 84 |                           </svg>
 85 |                         </button>
 86 |                         <span className="text-center inline-block">
 87 |                           {product.quantity}
 88 |                         </span>
 89 |                         <button
 90 |                           className="btn btn-sm btn-outline-primary inline-block"
 91 |                           onClick={() => {
 92 |                             dispatch(decrement(product.id))
 93 |                             dispatch(getSubTotal())
 94 |                             dispatch(getCartCount())
 95 |                             dispatch(calculateTax())
 96 |                             dispatch(getTotalAmount())
 97 |                           }}
 98 |                         >
 99 |                           <svg
100 |                             xmlns="http://www.w3.org/2000/svg"
101 |                             width="16"
102 |                             height="16"
103 |                             fill="currentColor"
104 |                             className="bi bi-dash"
105 |                             viewBox="0 0 16 16"
106 |                           >
107 |                             <path d="M4 8a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7A.5.5 0 0 1 4 8z" />
108 |                           </svg>
109 |                         </button>
110 |                       </div>
111 |                     </td>
112 |                     <td className="col-sm-1 col-md-1 text-center">
113 |                       <strong>{product.price}</strong>
114 |                     </td>
115 |                     <td className="col-sm-1 col-md-1 text-center">
116 |                       <strong>
117 |                         {parseFloat(product.price * product.quantity).toFixed(
118 |                           2,
119 |                         )}
120 |                       </strong>
121 |                     </td>
122 |                     <td className="col-sm-1 col-md-1">
123 |                       <button
124 |                         type="button"
125 |                         onClick={() => {
126 |                           dispatch(removeCartItem(product.id))
127 |                           dispatch(getSubTotal())
128 |                           dispatch(getCartCount())
129 |                           dispatch(calculateTax())
130 |                           dispatch(getTotalAmount())
131 |                         }}
132 |                         className="btn btn-sm btn-outline-danger"
133 |                       >
134 |                         Remove
135 |                       </button>
136 |                     </td>
137 |                   </tr>
138 |                 )
139 |               })}
140 |           </tbody>
141 |         </table>
142 | 
143 |         <div className="col-md-12 cart">
144 |           <div className="col-md-6 p-4 offset-md-6 border alert alert-secondary">
145 |             <div className="d-flex gst">
146 |               <div className="flex-grow-1">GST 18%</div>$
147 |               {parseFloat(tax).toFixed(2)}
148 |             </div>
149 |             <hr />
150 |             <div className="d-flex gst">
151 |               <div className="flex-grow-1">Subtotal</div>$
152 |               {parseFloat(subAmount).toFixed(2)}
153 |             </div>
154 |             <hr />
155 |             <div className="d-flex">
156 |               <div className="flex-grow-1">
157 |                 <strong>Total Amount</strong>
158 |               </div>
159 |               <div>
160 |                 <strong>${parseFloat(totalAmount).toFixed(2)}</strong>
161 |               </div>
162 |             </div>
163 |             <div className="d-grid mt-3">
164 |               <button type="button" className="btn btn-dark">
165 |                 Proceed to Checkout
166 |               </button>
167 |             </div>
168 |           </div>
169 |         </div>
170 |       </>
171 |     )
172 |   } else {
173 |     showCart = (
174 |       <div className="w-100">
175 |         <div className="empty-cart mb-2 text-center">
176 |           <img
177 |             src={noCart}
178 |             className="img-thumbnail thumbnail-border-0"
179 |             alt="Empty cart"
180 |           />
181 |         </div>
182 |         <h2 className="h4 text-center mb-3">Your cart is empty</h2>
183 |         <p className="text-center">
184 |           Looks like you have not added anything to your cart. Let's buy some
185 |           products.
186 |         </p>
187 |         <div className="text-center">
188 |           <Link to="/" className="btn btn-danger">
189 |             Shop now
190 |           </Link>
191 |         </div>
192 |       </div>
193 |     )
194 |   }
195 | 
196 |   return <>{showCart}</>
197 | }
198 | 
199 | export default Cart
200 | 


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