adds useEffect to seta value in state to hold formatted time for rese…

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

@@ -22,7 +22,7 @@ function Login(props) {
       <form onSubmit={(e) => loginSubmit(e, { username, password })}>
         <ul>
           <li className={styles.inputFields}>
-            <i class="fa fa-user icon"></i> 
+            <i className="fa fa-user icon"></i> 
             <input
               type="text"
               name="username"
@@ -31,7 +31,7 @@ function Login(props) {
             />
           </li>
           <li className={styles.inputFields}>
-            <i class="fa fa-lock" aria-hidden="true"></i>
+            <i className="fa fa-lock" aria-hidden="true"></i>
             <input
               type="password"
               name="password"

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,15 +6,39 @@ 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";
 
+moment.updateLocale('en', {
+  relativeTime: {
+    future: 'in %s',
+    past: '%s',
+    s: 'Just now',
+    ss: 'Just now',
+    m: '1m ago',
+    mm: '%dm ago',
+    h: '1h',
+    hh: '%dh ago',
+    d: '1d',
+    dd: '%dd ago',
+    M: '1m',
+    MM: '%dM ago',
+    y: '1y',
+    yy: '%dY ago'
+  }
+});
+
 const Reservation = (props) => {
+  const dispatch = useDispatch();
+  const retailerName = useSelector(state=>state.currentRetailer.retailerName);
+
   const [menuOpen, setMenuOpen] = useState(false);
   const [confirmOpen, setConfirmOpen] = useState(false);
+  const [formattedTime, setFormattedTime] = useState(moment(props.reservation.createdAt).fromNow());
+  const [queueStatus, setQueueStatus]= useState("");
 
   const toggleMenu = () => {
     setMenuOpen(!menuOpen);
@@ -40,67 +64,67 @@ const Reservation = (props) => {
     document.addEventListener("mousedown", handleClickOutside);
   });
 
+  // rerenders the component every minute to update the fromNow time
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setFormattedTime(moment(props.reservation.createdAt).fromNow());
+    }, 60000);
+    return () => clearInterval(interval);
+  }, [props.reservation.createdAt]);
+
+
   const toggleConfirm = () => {
     setConfirmOpen(!confirmOpen);
 
     toggleMenu();
   };
 
+
   const handleConfirm = () => {
-    // this is where we need to send the data to the backend
-
+    let data;
+    if (queueStatus !=="pending"){
+      data = {queueStatus};
+      dispatch(actionUpdateReservation(data, props.reservation.id));
+      if (queueStatus === "enter"){
+        props.handlePlusPartySize(props.reservation.partySize);
+      }
+    } else {
+      data ={
+        phoneNumber: props.reservation.customerId.phoneNumber,
+        retailerName: retailerName,
+        reservationId: props.reservation._id,
+      };
+        dispatch (actionNotifyCustomer(data))
+    }
+
     setConfirmOpen(false);
   };
 
   const handleNotificationClick = () => {
-    let data = {
-      phoneNumber: props.reservation.customerId.phoneNumber,
-      retailerName: props.retailerName,
-      reservationId: props.reservation._id,
-    };
-    return props.dispatchNotifyCustomer(data);
+
+    return toggleConfirm();
   };
 
   const handleHoldClick = () => {
-    let data = { queueStatus: "hold", };
-    props.dispatchUpdateReservation(data, props.reservation.id);
-    return toggleMenu();
+    setQueueStatus("hold");
+    return toggleConfirm();
+
   };
 
   const handleRemoveCustomer = () => {
-    let data = { queueStatus: 'cancelled' };
-    props.dispatchUpdateReservation(data, props.reservation.id);
-    return toggleMenu();
+    setQueueStatus("cancelled")
+
+    return toggleConfirm();
   };
 
   const handleCheckinCustomer = () => {
-    let data = { queueStatus: 'enter' };
-    props.dispatchUpdateReservation(data, props.reservation.id);
-    props.handlePlusPartySize(props.reservation.partySize);
-    return toggleMenu();
+    setQueueStatus("enter");
+    return toggleConfirm();
   };
+
   const { isHold } = props;
   const { phoneNumber } = props.reservation.customerId;
   const phone = (phoneNumber).replace(/\W\d(\d\d\d)(\d\d\d)(\d\d\d\d)/, '($1) $2-$3');
-  moment.locale('en', {
-    relativeTime: {
-      future: 'in %s',
-      past: '%s',
-      s: 'Just now',
-      ss: 'Just now',
-      m: '1m ago',
-      mm: '%dm ago',
-      h: '1h',
-      hh: '%dh ago',
-      d: '1d',
-      dd: '%dd ago',
-      M: '1m',
-      MM: '%dM ago',
-      y: '1y',
-      yy: '%dY ago'
-    }
-  });
-  let formattedTime = moment(props.reservation.createdAt).fromNow();
 
   return (
     <li key={"customer-" + props.index} style={{ background: props.color }}>
@@ -151,21 +175,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;