Refactor redux

src/actions/index.js

@@ -61,7 +61,7 @@ export const searchRetailersByName = (data) => async (dispatch) => {
     });
 };
 
-export const fetchOneRetailer = (id) => async (dispatch) => {
+export const actionFetchOneRetailer = (id) => async (dispatch) => {
   // needs to be replaced later with dynamically generated ids
   await Axios.get(`/api/retailers/${id}`)
     .then((retailer) => {
@@ -103,7 +103,7 @@ export const actionUpdateReservation = (data, id) => async (dispatch) => {
     });
 };
 
-export const notifyCustomer = (data) => async (dispatch) => {
+export const actionNotifyCustomer = (data) => async (dispatch) => {
   await Axios.post("/api/sms/send", data)
     .then((response) => {
       dispatch({
@@ -179,7 +179,7 @@ export const actionFindRetailers = () => async (dispatch) => {
     });
 };
 
-export const actionSearchingRetailers = (searchTerm) => async (dispatch) => {
+export const actionSearchRetailers = (searchTerm) => async (dispatch) => {
   await Axios.get("/api/customers/search?searchTerm=" + searchTerm)
     .then((retailers) => {
       dispatch({

src/components/Modal/Modal.jsx

@@ -1,18 +1,10 @@
-import React, { Component } from "react";
+import React from "react";
 import styles from "./Modal.module.scss";
 
-class Modal extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {};
-  }
-  render() {
-    return (
-      <div className={styles.modal}>
-        <div className={styles.modalBody}>{this.props.children}</div>
-      </div>
-    );
-  }
+const Modal = (props) => {
+  return ( <div className={styles.modal}>
+    <div className={styles.modalBody}>{this.props.children}</div>
+  </div> );
 }
-
+ 
 export default Modal;

src/components/Reservation/Reservation.jsx

@@ -6,13 +6,16 @@ import CheckButton from "../CheckButton";
 import HoldButton from "../HoldButton";
 import NotificationButton from "../NotificationButton";
 import moment from "moment";
-import { connect } from "react-redux";
+import { useDispatch, useSelector } from "react-redux";
 import {
-  notifyCustomer,
+  actionNotifyCustomer,
   actionUpdateReservation
 } from "../../actions";
 
 const Reservation = (props) => {
+  const dispatch = useDispatch();
+  const retailerName = useSelector(state=>state.currentRetailer.retailerName);
+
   const [menuOpen, setMenuOpen] = useState(false);
   const [confirmOpen, setConfirmOpen] = useState(false);
 
@@ -55,27 +58,27 @@ const Reservation = (props) => {
   const handleNotificationClick = () => {
     let data = {
       phoneNumber: props.reservation.customerId.phoneNumber,
-      retailerName: props.retailerName,
+      retailerName: retailerName,
       reservationId: props.reservation._id,
     };
-    return props.dispatchNotifyCustomer(data);
+    return dispatch(actionNotifyCustomer(data));
   };
 
   const handleHoldClick = () => {
     let data = { queueStatus: "hold", };
-    props.dispatchUpdateReservation(data, props.reservation.id);
+    dispatch(actionUpdateReservation(data, props.reservation.id));
     return toggleMenu();
   };
 
   const handleRemoveCustomer = () => {
     let data = { queueStatus: 'cancelled' };
-    props.dispatchUpdateReservation(data, props.reservation.id);
+    dispatch(actionUpdateReservation(data, props.reservation.id));
     return toggleMenu();
   };
 
   const handleCheckinCustomer = () => {
     let data = { queueStatus: 'enter' };
-    props.dispatchUpdateReservation(data, props.reservation.id);
+    dispatch(actionUpdateReservation(data, props.reservation.id));
     props.handlePlusPartySize(props.reservation.partySize);
     return toggleMenu();
   };
@@ -151,21 +154,5 @@ const Reservation = (props) => {
   );
 };
 
-const mapStateToProps = (state) => {
-  return {
-    retailerName: state.currentRetailer.retailerName,
-  };
-};
-
-const mapDispatchToProps = (dispatch) => {
-  return {
-    dispatchNotifyCustomer: (data) => {
-      return dispatch(notifyCustomer(data));
-    },
-    dispatchUpdateReservation: (data, id) => {
-      return dispatch(actionUpdateReservation(data, id));
-    }
-  };
-};
 
-export default connect(mapStateToProps, mapDispatchToProps)(Reservation);
+export default Reservation;

src/views/RetailerView/RetailerView.jsx

@@ -1,13 +1,26 @@
 import React, { useState, useEffect } from "react";
 import styles from "./RetailerView.module.scss";
-import { connect } from "react-redux";
-import { fetchOneRetailer, actionUpdateRetailer } from "../../actions";
+import { useDispatch, useSelector } from "react-redux";
+import { actionFetchOneRetailer, actionUpdateRetailer } from "../../actions";
 import Dashboard from "../../components/Dashboard";
 // import Profile from "../../components/Profile";
 import WaitList from "../../components/WaitList/WaitList.jsx";
 import HoldList from "../../components/HoldList/HoldList.jsx";
 
 function RetailerView(props) {
+  const dispatch = useDispatch();
+  const waitList = useSelector(state=> state.currentRetailer.reservations.filter((res) => {
+    return res.queueStatus === "wait";
+  }))
+  const holdList = useSelector(state=>state.currentRetailer.reservations.filter((res) => {
+    return res.queueStatus === "hold";
+  }))
+  const retailerName = useSelector(state=>state.currentRetailer
+    ? state.currentRetailer.retailerName
+    : null)
+
+  const retailer = useSelector(state=>state.currentRetailer);
+
   const [maxCapacity] = useState(JSON.parse(localStorage.retailer).maxCapacity);
   const [initialCount] = useState(
     parseInt(localStorage.getItem("currentCapacity")) || 0
@@ -44,17 +57,18 @@ function RetailerView(props) {
       countElement.innerHTML = `${maxCapacity}(${overflow})`;
     }
   }, [custCount, maxCapacity]);
-  let { changeCustomersInStore } = props;
+
   //handles updating customer count to db
   useEffect(() => {
     let retailerId = JSON.parse(localStorage.retailer).id;
+
     if (custCount === maxCapacity) {
-      return changeCustomersInStore({ currentCapacity: custCount }, retailerId);
+      dispatch(actionUpdateRetailer({ currentCapacity: custCount }, retailerId));
     }
     if (custCount === maxCapacity - 1) {
-      return changeCustomersInStore({ currentCapacity: custCount }, retailerId);
+      dispatch(actionUpdateRetailer({ currentCapacity: custCount }, retailerId));
     }
-  }, [custCount, maxCapacity, changeCustomersInStore]);
+  }, [custCount, maxCapacity, dispatch]);
 
   // handles open and close of On Hold list
   const [isOpen, setIsOpen] = useState(false);
@@ -87,24 +101,23 @@ function RetailerView(props) {
   };
 
   // grabs the initial data when the view loads
-  const { dispatchFetchOneRetailer } = props;
   useEffect(() => {
     let retailer = JSON.parse(localStorage.getItem("retailer"))
     if (retailer) {
-      return dispatchFetchOneRetailer(retailer.id);
+      dispatch(actionFetchOneRetailer(retailer.id));
     }
-  }, [dispatchFetchOneRetailer]);
+  }, [dispatch]);
 
   return (
     <>
       <div className={styles.RetailerView}>
         <WaitList
-          retailerName={props.retailerName}
-          waitList={props.waitList}
+          retailerName={retailerName}
+          waitList={waitList}
           handlePlusPartySize={handlePlusPartySize}
         />
         <HoldList
-          holdList={props.holdList}
+          holdList={holdList}
           handleCollapse={handleCollapse}
           handleExpand={handleExpand}
           handlePlusPartySize={handlePlusPartySize}
@@ -116,35 +129,10 @@ function RetailerView(props) {
         handleMinus={handleMinus}
       />
       {/* Needs to be connected to a button to access retailer profile. */}
-      {/* <Profile retailer={props.retailer} /> */}
+      {/* <Profile retailer={retailer} /> */}
     </>
   );
 }
 
-const mapStateToProps = (state) => {
-  return {
-    waitList: state.currentRetailer.reservations.filter((res) => {
-      return res.queueStatus === "wait";
-    }),
-    holdList: state.currentRetailer.reservations.filter((res) => {
-      return res.queueStatus === "hold";
-    }),
-    retailerName: state.currentRetailer
-      ? state.currentRetailer.retailerName
-      : null,
-    retailer: state.currentRetailer,
-  };
-};
-
-const mapDispatchToProps = (dispatch) => {
-  return {
-    dispatchFetchOneRetailer: (id) => {
-      dispatch(fetchOneRetailer(id));
-    },
-    changeCustomersInStore: (data, id) => {
-      dispatch(actionUpdateRetailer(data, id, true));
-    },
-  };
-};
 
-export default connect(mapStateToProps, mapDispatchToProps)(RetailerView);
+export default RetailerView;

src/views/UserView/UserView.jsx

@@ -1,29 +1,25 @@
 import React from "react";
 import styles from "./UserView.module.scss";
 import magGlass from "../../utils/imgs/magGlass.png";
-import { connect } from "react-redux";
-import { actionFindRetailers, actionSearchingRetailers } from "../../actions";
+import { useDispatch, useSelector } from "react-redux";
+import { actionFindRetailers, actionSearchRetailers } from "../../actions";
 import RetailerCard from "../../components/RetailerCard/RetailerCard";
 import { useEffect, useState } from "react";
 
 function UserView(props) {
+  const dispatch = useDispatch();
+  const customerSearchRetailer = useSelector(state=> state.customerSearchRetailer);
   const [searchTerm, setSearchTerm] = useState('');
-  const [foundRetailers, setFoundRetailers] = useState([]);
   //on mount find all retailers
 
-  let {dispatchFindRetailers} = props
   useEffect(() => {
-    return dispatchFindRetailers();
-  }, [dispatchFindRetailers]);
-
-  useEffect(() => {
-    return setFoundRetailers(props.customerSearchRetailer);
-  }, [props.customerSearchRetailer]);
+    dispatch(actionFindRetailers());
+  }, []);
 
   const handleSearchSubmit = (e) => {
     e.preventDefault();
     if (searchTerm !== '') {
-      props.dispatchSearchingRetailers(searchTerm);
+      dispatch(actionSearchRetailers(searchTerm));
     }
     return setSearchTerm('');
   };
@@ -51,9 +47,9 @@ function UserView(props) {
           <img src={magGlass} alt="search" />
         </button>
       </form>
-      {foundRetailers.length === 0 ? <h1>{"No search results"}</h1> : null}
+      {customerSearchRetailer.length === 0 ? <h1>{"No search results"}</h1> : null}
       <ul className={styles.results}>
-        {foundRetailers.map((store, index) => {
+        {customerSearchRetailer.map((store, index) => {
           return (
             <RetailerCard
               key={index}
@@ -66,21 +62,6 @@ function UserView(props) {
   );
 };
 
-const mapStateToProps = (state) => {
-  return {
-    customerSearchRetailer: [...state.customerSearchRetailer],
-  };
-};
 
-const mapDispatchToProps = (dispatch) => {
-  return {
-    dispatchFindRetailers: () => {
-      return dispatch(actionFindRetailers());
-    },
-    dispatchSearchingRetailers: (term) => {
-      return dispatch(actionSearchingRetailers(term));
-    },
-  };
-};
 
-export default connect(mapStateToProps, mapDispatchToProps)(UserView);
+export default UserView;