Convert withModal to useModal

client/js/components/modals/useModal.js

@@ -0,0 +1,46 @@
+import { useCallback } from 'react';
+import Modal from 'react-modal';
+import { useSelector, useDispatch } from 'react-redux';
+import { closeModal } from 'state/modals';
+
+Modal.setAppElement('#root');
+
+const defaultPayload = {};
+
+export default function useModal(name) {
+  const isOpen = useSelector(state => state.modals[name]?.isOpen || false);
+  const payload = useSelector(
+    state => state.modals[name]?.payload || defaultPayload
+  );
+  const dispatch = useDispatch();
+
+  const handleRequestClose = useCallback(
+    (dismissed = true) => {
+      dispatch(closeModal(name));
+
+      if (dismissed && payload.onDismiss) {
+        payload.onDismiss();
+      }
+    },
+    [payload.onDismiss]
+  );
+
+  const modalProps = {
+    isOpen,
+    contentLabel: name,
+    onRequestClose: handleRequestClose,
+    className: {
+      base: `modal modal-${name}`,
+      afterOpen: 'modal-opening',
+      beforeClose: 'modal-closing'
+    },
+    overlayClassName: {
+      base: 'modal-overlay',
+      afterOpen: 'modal-overlay-opening',
+      beforeClose: 'modal-overlay-closing'
+    },
+    closeTimeoutMS: 200
+  };
+
+  return [modalProps, payload, handleRequestClose];
+}