I have made 3 different custom buttons:
<TouchableOpacity onPress={selectClosed}>
<Text>Closed</Text>
</TouchableOpacity>
<TouchableOpacity onPress={selectPending}>
<Text>Pending</Text>
</TouchableOpacity>
<TouchableOpacity onPress={selectComplete}>
<Text>Complete</Text>
</TouchableOpacity>
and their onPress functions:
const selectClosed = () => {
getShiftDetails.bind(null, 'closed');
};
const selectPending = () => {
getShiftDetails.bind(null, 'pending');
};
const selectComplete = () => {
getShiftDetails.bind(null, 'complete');
};
Below is how I am making my api call:
const getShiftDetails = useCallback(
(
page = 1,
limit = 20,
mode: 'pending' | 'complete' | 'closed' = 'complete',
) => {
const payload = {
page,
limit,
status: [mode],
};
ApiFunctions.post(apiUrl + '/shift', payload)
.then(
// other stuff
)
.catch((err: any) => {
// other stuff
});
},
[user],
);
By default my api call is being done with mode as complete. Now if I click on pending button then another api call should be made with mode as pending. But this is not happening. I am not sure where I went wrong.
I recommend using customHooks. (When options are changed, call is made again.)
const useFetch = (url, options) => {
const [response, setResponse] = React.useState(null);
React.useEffect(async() => {
const res = await fetch(url, options);
const json = await res.json();
setResponse(json);
}, [options]);
return response;
};use hooks:
const payload = {
page = 1,
limit = 20,
status: 'pending',
};
const { response } = useFetch("url", payload)