└── CompareButton.jsx


/CompareButton.jsx:
--------------------------------------------------------------------------------
 1 | import { useState } from 'react';
 2 | import { connect } from 'react-redux';
 3 | //import { Link } from 'react-router-dom';
 4 | import { changeSellersComparison } from '../../actions/sellers_comparison';
 5 | import { ModalConfirmation } from '../../UI/ModalConfirmation/ModalConfirmation';
 6 | import { ReactComponent as CloseIcon } from '../../img/ui/close_icon.svg';
 7 | 
 8 | import classes from './CompareButton.module.css';
 9 | //import { routes } from '../../providers/AppRoutes/AppRoutes.data';
10 | 
11 | const CompareButton = ({
12 |   sellers_comparison: { sellersInComparsion },
13 |   changeSellersComparison,
14 |   className = ''
15 | }) => {
16 |   const [isOpen, setOpen] = useState(false);
17 | 
18 |   const onApprove = () => {
19 |     changeSellersComparison([]);
20 |     setOpen(false);
21 |   };
22 | 
23 |   const openModal = () => {
24 |     setOpen(true);
25 |   };
26 | 
27 |   if (!sellersInComparsion.length) return null;
28 | 
29 |   return (
30 |     <div className={`${classes.compareBtnBox} ${className}`}>
31 |       <div className={classes.compareBtn}>
32 |         {/* <Link to={routes.sellersComparison} className={classes.compareLink}>
33 |           {sellersInComparsion.length} sellers in comparison
34 |         </Link> */}
35 |         {sellersInComparsion.length} sellers in comparison
36 |         <CloseIcon className={classes.compareBtnIcon} onClick={openModal} />
37 |       </div>
38 |       <ModalConfirmation
39 |         isOpen={isOpen}
40 |         setOpen={setOpen}
41 |         onApprove={onApprove}
42 |         message="Are you sure you want to remove sellers in comparsion?"
43 |       />
44 |     </div>
45 |   );
46 | };
47 | 
48 | const mapStateToProps = (state) => ({
49 |   sellers_comparison: state.sellers_comparison
50 | });
51 | 
52 | export default connect(mapStateToProps, {
53 |   changeSellersComparison
54 | })(CompareButton);
55 | 


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