The following code is causing 2 requests to be made to my API with the GET endpoint. I don't understand useEffect() enough to know where to start to debug, but I don't want to cause unneccessary strain on the services that these API endpoints will call server side. This is because they will be calling windows servers to action delete requests in active directory etc...
function Ad() {
const [data, setData] = useState(null)
const [isLoading, setLoading] = useState(false)
useEffect(() => {
setLoading(true)
fetch('../api/decom/ad')
.then(response => response.json())
.then(data => {
setData(data)
setLoading(false)
if (data.exists == true) {
Remove()
}
})
}, [])
const Remove = () => {
fetch("../api/decom/ad", { method: "DELETE" })
.then(response => response.json())
.then(data => {
var inner = ""
if (data.removed == true) {
inner = `<p>Removed: ${greenCircle}</p>`
} else {
inner = `<p>Removed: ${redCircle}</p>`
}
document.getElementById('adremoved').innerHTML = inner
})
}
if (data != null && data.exists == true) return (
<a className={styles.card}>
<h2>AD</h2>
<p>Exists: { greenCircle } </p>
<div id ="adremoved" className={styles.parent}>
<p className={styles.child}>removed:</p>
<div><div className={styles.loader}><div></div><div></div><div></div></div></div>
</div>
</a>
)
if (data != null && data.exists == false) return (
<a className={styles.card}>
<h2>AD</h2>
<p>Exists: {redCircle} </p>
<p>Removed:{redCircle}</p>
</a>
)
if (isLoading) return (
<a className={styles.card}>
<h2>AD</h2>
<div className={styles.parent}>
<p id="adstatus" name="adstatus" className={styles.child}>Exists:</p>
<div id="adloader"><div className={styles.loader}><div></div><div></div><div></div></div></div>
</div>
<p>Removed:{redCircle}</p>
</a>
)
}
const [isLoading, setLoading] = useState(true)
useEffect(() => {
if(isLoading){
fetch('../api/decom/ad')
.then(response => response.json())
.then(data => {
if (data.exists == true) {
Remove()
}else{
setData(data)
}
setLoading(false)
})
}
}, [isLoading])