arch: move web folder into api & move api to top level

frontend/src/shared/hooks/memoize.ts

@@ -0,0 +1,13 @@
+import { useRef } from 'react';
+import { isEqual } from 'lodash';
+
+const useDeepCompareMemoize = (value: any) => {
+  const valueRef = useRef();
+
+  if (!isEqual(value, valueRef.current)) {
+    valueRef.current = value;
+  }
+  return valueRef.current;
+};
+
+export default useDeepCompareMemoize;

frontend/src/shared/hooks/onEscapeKeyDown.ts

@@ -0,0 +1,19 @@
+import { useEffect } from 'react';
+import KeyCodes from 'shared/constants/keyCodes';
+
+const useOnEscapeKeyDown = (isListening: boolean, onEscapeKeyDown: () => void) => {
+  useEffect(() => {
+    const handleKeyDown = (event: any) => {
+      if (event.keyCode === KeyCodes.ESCAPE) {
+        onEscapeKeyDown();
+      }
+    };
+    if (isListening) {
+      document.addEventListener('keydown', handleKeyDown);
+    }
+    return () => {
+      document.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [isListening, onEscapeKeyDown]);
+};
+export default useOnEscapeKeyDown;

frontend/src/shared/hooks/onOutsideClick.ts

@@ -0,0 +1,42 @@
+import { useEffect, useRef } from 'react';
+
+const useOnOutsideClick = (
+  $ignoredElementRefs: any,
+  isListening: boolean,
+  onOutsideClick: () => void,
+  $listeningElementRef: any,
+) => {
+  const $mouseDownTargetRef = useRef();
+  const $ignoredElementRefsMemoized = [$ignoredElementRefs].flat();
+
+  useEffect(() => {
+    const handleMouseDown = (event: any) => {
+      $mouseDownTargetRef.current = event.target;
+    };
+
+    const handleMouseUp = (event: any) => {
+      if (typeof $ignoredElementRefsMemoized !== 'undefined') {
+        const isAnyIgnoredElementAncestorOfTarget = $ignoredElementRefsMemoized.some(
+          ($elementRef: any) =>
+            $elementRef.current.contains($mouseDownTargetRef.current) || $elementRef.current.contains(event.target),
+        );
+        if (event.button === 0 && !isAnyIgnoredElementAncestorOfTarget) {
+          onOutsideClick();
+        }
+      }
+    };
+
+    const $listeningElement = ($listeningElementRef || {}).current || document;
+
+    if (isListening) {
+      $listeningElement.addEventListener('mousedown', handleMouseDown);
+      $listeningElement.addEventListener('mouseup', handleMouseUp);
+    }
+    return () => {
+      $listeningElement.removeEventListener('mousedown', handleMouseDown);
+      $listeningElement.removeEventListener('mouseup', handleMouseUp);
+    };
+  }, [$ignoredElementRefsMemoized, $listeningElementRef, isListening, onOutsideClick]);
+};
+
+export default useOnOutsideClick;