Reorganize frontend and install Craco to alias modules (#190)

front/src/modules/ui/hooks/__tests__/useOutsideAlerter.test.tsx

@@ -0,0 +1,31 @@
+import { useRef } from 'react';
+import { act } from 'react-dom/test-utils';
+import { fireEvent, render } from '@testing-library/react';
+
+import { useOutsideAlerter } from '../useOutsideAlerter';
+const onOutsideClick = jest.fn();
+
+function TestComponent() {
+  const buttonRef = useRef(null);
+  useOutsideAlerter(buttonRef, onOutsideClick);
+
+  return (
+    <div>
+      <span>Outside</span>
+      <button ref={buttonRef}>Inside</button>
+    </div>
+  );
+}
+
+test('useOutsideAlerter hook works properly', async () => {
+  const { getByText } = render(<TestComponent />);
+  const inside = getByText('Inside');
+  const outside = getByText('Outside');
+  await act(() => Promise.resolve());
+
+  fireEvent.mouseDown(inside);
+  expect(onOutsideClick).toHaveBeenCalledTimes(0);
+
+  fireEvent.mouseDown(outside);
+  expect(onOutsideClick).toHaveBeenCalledTimes(1);
+});

front/src/modules/ui/hooks/useListenClickOutsideArrayOfRef.ts

@@ -0,0 +1,35 @@
+import React, { useEffect } from 'react';
+
+import { isDefined } from '@/utils/type-guards/isDefined';
+
+export function useListenClickOutsideArrayOfRef<T extends HTMLElement>(
+  arrayOfRef: Array<React.RefObject<T>>,
+  outsideClickCallback: (event?: MouseEvent | TouchEvent) => void,
+) {
+  useEffect(() => {
+    function handleClickOutside(event: MouseEvent | TouchEvent) {
+      const clickedOnAtLeastOneRef = arrayOfRef
+        .filter((ref) => !!ref.current)
+        .some((ref) => ref.current?.contains(event.target as Node));
+
+      if (!clickedOnAtLeastOneRef) {
+        outsideClickCallback(event);
+      }
+    }
+
+    const hasAtLeastOneRefDefined = arrayOfRef.some((ref) =>
+      isDefined(ref.current),
+    );
+
+    if (hasAtLeastOneRefDefined) {
+      document.addEventListener('mouseup', handleClickOutside);
+      document.addEventListener('touchend', handleClickOutside);
+    }
+
+    return () => {
+      document.removeEventListener('mouseup', handleClickOutside);
+      document.removeEventListener('touchend', handleClickOutside);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [arrayOfRef, outsideClickCallback]);
+}

front/src/modules/ui/hooks/useOutsideAlerter.ts

@@ -0,0 +1,21 @@
+import { useEffect } from 'react';
+
+declare type CallbackType = () => void;
+
+export function useOutsideAlerter(
+  ref: React.RefObject<HTMLInputElement>,
+  callback: CallbackType,
+) {
+  useEffect(() => {
+    function handleClickOutside(event: Event) {
+      const target = event.target as HTMLButtonElement;
+      if (ref.current && !ref.current.contains(target)) {
+        callback();
+      }
+    }
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, [ref, callback]);
+}