My modal is not toggling properly in React using Redux? Redux, functional component

Question

when trying to add a toggle the modal on my application, the state is messed up where it automatically shows the modal form without anything being clicked to toggle it. The 'initialState' for the Modal is set to 'false' but in the main component 'timeSlotSheet' it appears below the timeSlots I'm having trouble making the functionality work with using functional components. Also another potential issue that could be contributing to the problem is that I noticed the functions are not being passed to the modal from the timeSlotSheet component.

actions.js

import {
    ADD_USER_INFO,
    CHOOSE_TIME_SLOT,
    UPDATE_USER_INFO,
    TOGGLE_MODAL,

} from './actionTypes'


export const chooseTimeSlot = (userInput) => ({
    type: CHOOSE_TIME_SLOT , payload: {
        time: userInput.time,
        name: userInput.name,
        phone: userInput.phone,
        filled: userInput.filled,
    }
});

export const updateTimeSlot = (userData) => ({
    type: ADD_USER_INFO, payload: {
       userData
    },
    userData
});

export const editForm = (userInput) => ({
    type: UPDATE_USER_INFO, payload: {
        time: userInput.time,
        name: userInput.name,
        phone: userInput.phone,
        filled: userInput.filled,

    }
    
});

export const toggleModal = () => ({
    type: TOGGLE_MODAL
})

reducers.js

import {
    ADD_USER_INFO,
    CHOOSE_TIME_SLOT,
    UPDATE_USER_INFO,
    TOGGLE_MODAL 

} from '../actions/actionTypes'

//the reducer will keep track of all the actions brought in from actionTypes as well as use initial state 
//create the time slots that the users will be selecting.

export default function appReducer(state = initialState, action){
    switch(action.type) {
     case TOGGLE_MODAL:
            return {...state, open: !state.open}
        case CHOOSE_TIME_SLOT:
            return {...state, chosenTimeSlot: action.payload}
        case UPDATE_USER_INFO:
            return {...state, chosenTimeSlot: action.payload}
        case ADD_USER_INFO:
            return {...state, userData: action.payload.userData}
        default:
            return state
    }
}


const initialState = {
    userData: [
        {
        time: "9:00am-10:00am",
        name: 'Cameron Lumpkin',
        phone: '000000000',
        filled: true
        },

        {
            time: "10:00am-11:00am",
            name: '',
            phone: '',
            filled: false
            },
            {
                time: "11:00am-12:00pm",
                name: '',
                phone: '',
                filled: false
                },

                {
                    time: "12:00pm-1:00pm",
                    name: '',
                    phone: '',
                    filled: false
                    },

                    {
                        time: "1:00pm-2:00pm",
                        name: '',
                        phone: '',
                        filled: false
                        },

                        {
                            time: "2:00pm-3:00pm",
                            name: '',
                            phone: '',
                            filled: false
                            },

                            {
                                time: "3:00pm-4:00pm",
                                name: '',
                                phone: '',
                                filled: false
                                },


                            {
                                time: "4:00pm-5:00pm",
                                name: '',
                                phone: '',
                                filled: false
                                },
    ],

    open: false,
    chosenTimeSlot: {
        time: '',
        name: '',
        phone: '',
        filled: false
    }
}

timeSlotSheet.js

import React, { Component } from 'react'
import { connect } from 'react-redux';
import { toggleModal, updateTimeSlot,  chooseTimeSlot, editForm } from '../actions/actions';

import {bindActionCreators} from 'redux';
import  TimeSlot from './TimeSlot'
import {useDispatch, useSelector} from 'react-redux'
import Modal from './Modal'

const TimeSlotSheet = () => {

 const userData = useSelector(state => state.userData);
 const open = useSelector(state => state.open);
 const chosenTimeSlot = useSelector(state => state.chosenTimeSlot)
 const dispatch = useDispatch();


 const openModal = (userInput) => {
    dispatch(toggleModal());
    dispatch(chooseTimeSlot(userInput));
    
 }

 const closeModal = () => {
     toggleModal();
 }

 const handleChange = (event) => {
     let newChosenTimeSlot = {
         ...userData, [event.target.id]: event.target.value
     };
     editForm(newChosenTimeSlot)
 }

 const handleOnSubmit = () => {

    let filledSlot;
     if( chosenTimeSlot.name !== '' || chosenTimeSlot.phone !== '' ) {
         filledSlot = {
             ...chosenTimeSlot, filled: true
         };
     } else {
         filledSlot = {
             ...chosenTimeSlot, filled: false
         };
     }

     let updatedTimeSlot = userData.map(timeSlot => {
         if (timeSlot.time === chosenTimeSlot.time) {
             return filledSlot
         } else {
             return timeSlot;
         }
     })

     updateTimeSlot(updatedTimeSlot);
     toggleModal();


 }
    return (
        <div>
            <h2>Pick a time.</h2>
              {userData.map(userInput=> {
             return (
                 <ul onClick={()=>openModal(userInput)} key={userInput.time}>
                     <TimeSlot time={userInput.time}  name={userInput.name} phone={userInput.phone} filled={userInput.filled}/>
                </ul>
            
       
        )
        })}
        <Modal open={open} handleChange={handleChange} chosenTimeSlot={chosenTimeSlot} closemodal={closeModal} handleOnSubmit={handleOnSubmit} />
        </div>
    )
}



export default TimeSlotSheet;

Modal.js

import React from 'react'
import {dispatch} from 'react-redux'

const Modal = ({chosenTimeSlot, closeModal, handleChange, open, handleOnSubmit }) => {

    // render() {
    let time = chosenTimeSlot.time ? chosenTimeSlot.time : '';
    let name = chosenTimeSlot.name ? chosenTimeSlot.name : '';
    let phone = chosenTimeSlot.phone ? chosenTimeSlot.phone : '';
    let isEmpty = (name !== '' && phone !== '') || (name === '' && phone === '');
    return (
        <div>
            <div className="modal-container" open={open} closeModal={closeModal}>
               
            <div>
             <input type="text"
            id="name"
            label="name"
            value={name}
            onChange={handleChange}
             />
            <input type="tel" id="phone" label="phone number" value={phone} onChange={handleChange} />
            <button onClick={handleOnSubmit}> confirm</button>
            <button onClick={closeModal} disabled={!isEmpty}>cancel</button>
            </div>
            
            
            </div>
        </div>
    )

}


export default Modal

Answer 1

For an action to occur, you need to dispatch that particular action handler. But in timeSlotSheet.js in closeModal() function you are not dispatching it as you are doing in openModal() function.

Hope this answer helps.