Нужно реализовать простую логику c для переключения состояния кнопок в зависимости от избыточных данных. Изначально все кнопки имеют значение true, но когда я нажимаю кнопку «Утвердить», я отправляю запрос на сервер, получаю ответ (ложь) и отключенную кнопку, затем, когда я нажимаю кнопку «Отклонить», кнопка «Утвердить» должна изменить установите значение true и отклоните кнопку на false et c.
Когда я нажимаю кнопку отклонения второй раз, она возвращает состояние где возвращается утверждение, как я могу каждый раз возвращать новое состояние
Действие
//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>
);
};