adds clear reservations button

src/components/Dashboard/Dashboard.jsx

@@ -48,7 +48,7 @@ const Dashboard = (props) => {
   };
 
   const resetQueueForm = () => {
-    setPhoneNumber('')
+    setPhoneNumber('');
     return document.getElementById("phone-input-form").reset();
   };
 
@@ -60,6 +60,9 @@ const Dashboard = (props) => {
     if (isOpen) {
       dashboard.setAttribute("style", "top: 3vh");
       addbutton.innerHTML = "CLOSE";
+      addbutton.addEventListener('click', function () {
+        resetQueueForm();
+      });
       addbutton.setAttribute("style", "background: #ff421f; color: white");
       addbutton.removeEventListener("click", handleExpand);
       addbutton.addEventListener("click", handleCollapse);

src/components/WaitList/WaitList.jsx

@@ -2,14 +2,41 @@ import React from 'react';
 import styles from './WaitList.module.scss'
 import clock from '../../utils/imgs/clock.png'
 import Reservation from '../Reservation';
+import { actionUpdateReservation } from '../../actions';
+import { connect } from "react-redux";
 
 const WaitList = (props) => {
     let {
         retailerName,
         waitList,
+        holdList,
         handlePlusPartySize,
     } = props;
 
+    const clearReservations = () => {
+        let waitLength = waitList.length;
+        let holdLength = holdList.length;
+
+        if (waitLength === 0 && holdLength === 0) {
+            return alert('No reservations to cancel.');
+        }
+        if (waitLength !== 0) {
+            waitList.forEach((res) => {
+                let data = { queueStatus: 'cancelled' }
+                props.dispatchUpdateReservation(data, res.id);
+            });
+            alert(`Wait list cleared ${waitLength} reservations.`)
+        };
+        if (holdLength !== 0) {
+            holdList.forEach((res) => {
+                let data = { queueStatus: 'cancelled' }
+                props.dispatchUpdateReservation(data, res.id);
+            })
+            alert(`Hold list cleared ${holdLength} reservations.`)
+        }
+        return
+    };
+
     return (
         <ul className={styles.WaitList}>
             <div className={styles.header}>
@@ -18,8 +45,15 @@ const WaitList = (props) => {
                     <img src={clock} alt="average wait time" />
                     <h3>5 Min</h3>
                 </div>
+                <button
+                    type="button"
+                    onClick={clearReservations}
+                >
+                    Clear
+                </button>
             </div>
             <div className={styles.listContainer}>
+                {waitList.length === 0 ? "No Reservations..." : null}
                 {waitList.map((reservation, index) => {
                     let replyStatuses = {
                         confirmed: "#6d9773",
@@ -48,4 +82,12 @@ const WaitList = (props) => {
     );
 };
 
-export default WaitList;
+const mapDispatchToProps = (dispatch) => {
+    return {
+        dispatchUpdateReservation: (data, id) => {
+            return dispatch(actionUpdateReservation(data, id))
+        }
+    }
+};
+
+export default connect(null, mapDispatchToProps)(WaitList);

src/views/RetailerView/RetailerView.jsx

@@ -94,13 +94,13 @@ function RetailerView(props) {
       return dispatchFetchOneRetailer(retailer.id);
     }
   }, [dispatchFetchOneRetailer]);
-
   return (
     <>
       <div className={styles.RetailerView}>
         <WaitList
           retailerName={props.retailerName}
           waitList={props.waitList}
+          holdList={props.holdList}
           handlePlusPartySize={handlePlusPartySize}
         />
         <HoldList