state and latency? [8:01pm]

[frankcollins3]

attempting to do:

heres the component that renders the component enticketed below it. (with dependencies removed to save space. everything works)

export default function Panel({ date, hydroIntake, hydroSchedule }) {

  return (
    <div className="panel-container">
      <div className="panel-card">
        <Boop rotation={10} timing={150}>
          <img src="/water_img/clock.png" />
        </Boop>
        <Timer hydroSchedule={hydroSchedule} />
      </div>
      <div className="panel-card">
        <Streak />
      </div>
      <div className="panel-card">
        <div>
          <Boop rotation={10} timing={150}>
            <img src="/water_img/calendar.png" />
          </Boop>
          <span>{date}</span>
        </div>
        <div>
          <Boop rotation={10} timing={150}>
            <img src="/water_img/target.png" />
          </Boop>
          <span>
            { hydroIntake ? hydroIntake : 0} fl oz / {(hydroIntake? hydroIntake: 0 / 8).toFixed(2) } cups
          </span>
        </div>
      </div>
    </div>
  );
}

heres the component:

// keeps track of the callback (/something)
// "keeps the class var in line" -  if the callback ever changes
// does not cause any re-rendering
// the useeffect has a function tick that calls the current class variable
// then tick is called with the setInterval function
// the delay on the setInterval is passed through the useInterval
// every time the delay value changes, change the setInterval
// the return value from useffect can clean up after last useeffect

function useInterval(callback, delay) {
  const savedCallback = useRef();
  // Remember the latest callback.
  useEffect(() => {
    savedCallback.current = callback;
  }, [callback]);
  // Set up the interval.
  useEffect(() => {
    function tick() {
      savedCallback.current();
    }
    if (delay !== null) {
      let id = setInterval(tick, delay);
      return () => clearInterval(id);
    }
  }, [delay]);
}

export default function Timer({ **hydroSchedule** }) {
  const [timer, setTimer] = useState();

  useEffect(() => {
    const currentTime = new Date().getTime();
    const currentHour = new Date().getHours();

    // find the closest matching time

    const remainingReminders = hydroSchedule.filter((time) => {
      return time > currentHour;
    });

    if (remainingReminders.length) {
      const nextHour = new Date();
      nextHour.setMinutes(0);
      nextHour.setSeconds(0);

      const timeToNextRemind = Math.ceil(
        (nextHour.setHours(remainingReminders[0]) - currentTime) / 1000
      );

      setTimer(timeToNextRemind);
    }
  }, [hydroSchedule]);

  useInterval(() => {
    if (timer !== undefined) {
      setTimer(timer - 1);
    }
  }, 1000);

  const renderTimer = () => {
    if (timer < 0 || timer > 3600 * 6 || timer === NaN) {
      return (
        <div>
          <img src="/img/panda.png" />
        </div>
      );
    } else if (!timer) {
      return (
        <div>
          0:00
        </div>
      )
    }
    return (
      <div>
        {Math.floor(timer / 60).toString().length < 2
          ? `0${Math.floor(timer / 60).toString()}`
          : Math.floor(timer / 60)}
        :
        {(timer % 60).toString().length < 2
          ? `0${(timer % 60).toString()}`
          : (timer % 60).toString()}
      </div>
    );
  };

  return (
    <div style={{ color: 'silver', fontWeight: 'bolder'}} className="timer">
      Next Reminder:
      {renderTimer()}
    </div>
  );
}

while I made a password constraint checker, a user login, reiterated all old mongo data to be new psql related data... adjusted the navbar a bit and added the puppeteer searching and profile icon search... also updated routing to be GraphQL, and state to be redux.

I'm redoing this app. These are her components (jenny) from the class project "WAPP" (in github organizations)

if I were to connect this app, mapStateToProps, mapDispatchToProps, connect, those also have to reach to the reducers and actions...

quite a bit going on where, in this example, the only state handling expressions are: state passed as props from last component :

export default function Timer({ hydroSchedule }) { :

bookmarking a curiosity on how much latent or memory/power intensive for the app to handle these expressions.

// seen a few jobs mention "work with ultra-low-latency teams to optimize performance" If this were a stock trading app that depended on real-time data, what would be the MOST MOST MOST performant approach

[frankcollins3]

chatGPT says redux comes with additional overhead like storing global store as singular object but that: such extra work is negligible and outperformed by reduction in complexity for state, if state were to be so complex. [8:06pm]