updating water cycle yields to a 5 count invocation of useEffect [6:51pm]

[frankcollins3]

attempting to do: perform only 1 graphQL mutation with the redux state set by updating water cycles.

error: The reminder bars are there to the left for visibility. click all the bars and the useEffect runs for every bar clicked once the REMINDER_CLICK === HYDRO_SCHEDULE.length.

    useEffect( () => {        
      if (REMINDER_CLICK === HYDRO_SCHEDULE.length) {
        console.log('are we over here')
        if (clickLimit !== 0) {
           new Promise( (resolve:any, reject:any) => {
             setClickLimit(clickLimit + 1)
            resolve(clickLimit)
            reject("lets go!")
          }).then( (clickLim) => {
👎             console.log('clicklimit here', clickLim)                // this never runs.
          })
        }
      }
    }, [REMINDER_CLICK])

proposed approach: // admittedly haven't ran the query & should probably run it to see if it only runs once but: 0: PROMISE.then() =>

ooh just thought of this while typing this issue up: can initiate the graphQL query after the click in a mousemove with a same limiter.

separate concerns that there are 5 elements attached to 1 logic (useEffect) now there will be 1 element to 1 logic.

// probably best way to go

[frankcollins3]

once the mouseenter event is added it runs 5x in a row every time. useEffect( () => {

    if (REMINDER_CLICK === HYDRO_SCHEDULE.length) {
      console.log('are we over here');
      if (clickLimit === 0) {
        const containerElement = document.querySelector(`#${styles.reminderCont}`);
        if (containerElement) {
          containerElement.addEventListener('mouseenter', hoverQuery);
        }
        setClickLimit(clickLimit + 1);
      }
    }      

}, [REMINDER_CLICK])

[7:08pm]

[frankcollins3]

forgot that this is dynamic UI and we can just check for the index. now getting 1 invocation of the graphQL query [8:56pm]