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

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

@@ -1,30 +0,0 @@
-import { useRef } from 'react';
-import { render, fireEvent } from '@testing-library/react';
-import { useOutsideAlerter } from '../useOutsideAlerter';
-import { act } from 'react-dom/test-utils';
-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/hooks/useOutsideAlerter.ts

@@ -1,21 +0,0 @@
-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]);
-}