feat: schedule view

client/src/app/hooks/useInterval.js

@@ -0,0 +1,19 @@
+import { useEffect, useRef } from "react";
+
+export const useInterval = (callback, delay) => {
+  const savedCallback = useRef();
+
+  useEffect(() => {
+    savedCallback.current = callback;
+  }, [callback]);
+
+  useEffect(() => {
+    function tick() {
+      savedCallback.current();
+    }
+    if (delay !== null) {
+      let id = setInterval(tick, delay);
+      return () => clearInterval(id);
+    }
+  }, [delay]);
+};

client/src/app/hooks/useTimeout.js

@@ -0,0 +1,38 @@
+import { useEffect } from 'react';
+
+//
+// useTimeout React Hook
+//
+// React hook for delaying calls with time
+export const useTimeout = (
+  callback, // function to call. No args passed.
+  timeout = 0, // delay, ms (default: immediately put into JS Event Queue)
+  {
+    // manage re-render behavior.
+    // by default, a re-render in your component will re-define the callback,
+    //    which will cause this timeout to cancel itself.
+    // to avoid cancelling on re-renders (but still cancel on unmounts),
+    //    set `persistRenders: true,`.
+    persistRenders = false,
+  } = {},
+  // These dependencies are injected for testing purposes.
+  // (pure functions - where all dependencies are arguments - is often easier to test)
+  _setTimeout = setTimeout,
+  _clearTimeout = clearTimeout,
+  _useEffect = useEffect
+) => {
+  let timeoutId;
+  const cancel = () => timeoutId && _clearTimeout(timeoutId);
+
+  _useEffect(
+    () => {
+      timeoutId = _setTimeout(callback, timeout);
+      return cancel;
+    },
+    persistRenders
+      ? [_setTimeout, _clearTimeout]
+      : [callback, timeout, _setTimeout, _clearTimeout]
+  );
+
+  return cancel;
+};