@SegniAdebaGodsSon
Posted
Looking good, I got around multiple clicks/fetches by adding a loading state for the fetch API in JS so that while it's in the loading state I made the dice button disabled to click. I used something like this:
const useFetchAdvice = (url: string, rerun: boolean) => {
const [advice, setAdvice] = useState<state>({
data: null,
loading: true,
error: null
});
useEffect(() => {
setAdvice({
data: null,
loading: true,
error: null
});
fetch(url)
.then(res => res.json())
.then(dat => setAdvice({
data: dat,
loading: false,
error: null
}))
.catch(err => setAdvice({
data: null,
loading: false,
error: err
}))
}, [...])
}
@ManuGil22
Posted
@SegniAdebaGodsSon Ohh i see, and how do u make the button disabled? I assume u are using a button tag right? Im using a div with the dice icon inside and not sure how to make it like a disabled button. I mean, i can do 'cursor: wait' but its still clickable. I might have to do a button 🤔
@SegniAdebaGodsSon
Posted
@ManuGil22 I've had a feedback under my solution that the clickable dice should be in a button tag for accessibility reasons I believe, I used a div just like yourself and changed it to button. If you use a button you can use the 'disabled' property, so then you can easily set it like 'disabled={loading}'...or if you stick to using div tag you can fetch conditionally, only fetch onClick if loading state is false.
Marked as helpful
@ManuGil22
Posted
@SegniAdebaGodsSon Alr! Thanks!!
