React-Redx Rerender тип действия - PullRequest
0 голосов
/ 30 марта 2020

Нужно реализовать простую логику c для переключения состояния кнопок в зависимости от избыточных данных. Изначально все кнопки имеют значение true, но когда я нажимаю кнопку «Утвердить», я отправляю запрос на сервер, получаю ответ (ложь) и отключенную кнопку, затем, когда я нажимаю кнопку «Отклонить», кнопка «Утвердить» должна изменить установите значение true и отклоните кнопку на false et c.

img

Когда я нажимаю кнопку отклонения второй раз, она возвращает состояние где возвращается утверждение, как я могу каждый раз возвращать новое состояние

Действие

//Approve candidate
export const approveRequest = (token, id) => (dispatch) => {
    dispatch({ type: 'FETCHING_ON' });
    try {
        axios.post(API.approveCandidateRequest + '/' + id,
            {},
            {headers: {"Authorization": 'Bearer ' + token.token }})
            .then( (response) => {
                if ( response.status === 200) {
                    dispatch(approveAction(response.data));
                }
            });
    } catch (e) {
        console.log(e);
    }
};

//Decline Candidate
export const declineRequest = (token, id) => (dispatch) => {
    dispatch({ type: 'FETCHING_OFF' });
    try {
        axios.post(API.declineCandidateRequest + '/' + id,
            {},
            {headers: {"Authorization": 'Bearer ' + token.token }})
            .then( (response) => {
                if ( response.status === 200) {
                    dispatch( declineAction( response.data) );
                }
            });
    } catch (e) {
        console.log(e);
    }
};

Редуктор

case 'SET_DECLINE_DATA_STATUS':
    return {
        ...state,
        isDecline: action.isDecline,
        mergeDeclineDataToMessage: state.me.messages.push(action.isDecline.data.message)
    };
case 'FETCHING_ON':
    return {
        ...state,
        isDecline: null
    };
case 'SET_APPROVE_DATA_STATUS':
    return {
        ...state,
        isApprove: action.isApprove,
        mergeApproveToMessage: state.me.messages.push(action.isApprove.data.message)
    };
case 'FETCHING_OFF':
    return {
        ...state,
        isApprove: null
    };

Logi c

const ShareContacts = ( { messages, getProfileShare, declineRequest, isDecline, isApprove, approveRequest } ) => {

    const shared = messages.me ? messages.me.account.shared : null;
    const id = messages.me ? messages.me.account.id : null;

    const [ roleId, setRoleId ] = useState('');
    const [ token, setToken ] = useState('');

    let declineIsDisabled = false;
    let approveIsDisabled = false;


    if ( isApprove  && isApprove.data.is_approved !== null && isApprove.data.is_approved !== undefined
        && isApprove.data.is_approved === true ) {
        approveIsDisabled = true;
        declineIsDisabled = !approveIsDisabled;
        console.log('isApprove', 1);
    }

    if (isDecline  && isDecline.data.is_approved !== null && isDecline.data.is_approved !== undefined
        && isDecline.data.is_approved === false ) {
        declineIsDisabled = true;
        approveIsDisabled = !declineIsDisabled;
        console.log('isDecline', 2)
    }

    isDecline = isApprove = null;


    useEffect( () => {
       const token = JSON.parse(localStorage.getItem("user-data"));
        getProfileShare(token);
        setRoleId(token.roleId);
        setToken(token)
    }, []);

    const [open, setOpen] = useState(false);
    const openModal = () => {
        setOpen(true);
    };
    const closeModal = () => {
        setOpen(false);
    };

    const handleApproveRequest = (e) => {
        e.preventDefault();
        approveRequest(token, id);
    };

    const handleDeclineRequest = (e) => {
        e.preventDefault();
        declineRequest(token, id)
    };

   return(
        <ShareButtons>
            {
                roleId === 1 ? !shared ? (<Button size='tiny' color='green' onClick={openModal}>Share Contact</Button>) : null
                    : roleId === 2 ? shared ? (
                        <Flex>
                            <Button size='tiny' disabled={ approveIsDisabled }
                                  onClick={handleApproveRequest}   color='green'>Approve</Button>
                            <Button size='tiny' disabled={ declineIsDisabled }
                                    onClick={handleDeclineRequest}  color='red'>Decline</Button>
                            <Button size='tiny'  color='grey' onClick={openModal}>Open Contacts</Button>
                        </Flex>
                    ) : null :null  
            }
            {
                roleId === 1 ? (<UserDataModal open={open} closeModal={closeModal} /> )
                    : roleId === 2 ? ( <RecruiterDataModal id={id} open={open} closeModal={closeModal} /> ) : null
            }

        </ShareButtons>
    );
};
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...