Add dropdown on Sort button on table

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

@@ -0,0 +1,33 @@
+const onOutsideClick = jest.fn();
+import { useRef } from 'react';
+import TableHeader from '../../components/table/table-header/TableHeader';
+import { render, fireEvent } from '@testing-library/react';
+import { useOutsideAlerter } from '../useOutsideAlerter';
+import { act } from 'react-dom/test-utils';
+
+function TestComponent() {
+  const buttonRef = useRef(null);
+  useOutsideAlerter(buttonRef, onOutsideClick);
+
+  return (
+    <div>
+      <span>Outside</span>
+      <button ref={buttonRef}>Inside</button>
+    </div>
+  );
+}
+
+export default TableHeader;
+
+test('clicking the button toggles an answer on/off', 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

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