papercrate/frontend/src/app/useManagementModals.js

import React, { useCallback, useEffect, useMemo, useState } from 'react';
import TagsPanel from '../tags/TagsPanel';
import CorrespondentsPanel from '../correspondents/CorrespondentsPanel';
import DocumentTypesPanel from '../documentTypes/DocumentTypesPanel';

const TAGS_MODAL = 'tags';
const CORRESPONDENTS_MODAL = 'correspondents';
const DOCUMENT_TYPES_MODAL = 'document-types';

export const useManagementModals = ({
  locationPathname,
  tags,
  refreshTags,
  onTagCreate,
  onTagUpdate,
  onTagDelete,
  correspondents,
  refreshCorrespondents,
  onCorrespondentCreate,
  onCorrespondentUpdate,
  onCorrespondentDelete,
  documentTypes,
  refreshDocumentTypes,
  onDocumentTypeCreate,
  onDocumentTypeUpdate,
  onDocumentTypeDelete,
  setStatusMessage,
}) => {
  const [activeModal, setActiveModal] = useState(null);

  const openTagsModal = useCallback(() => setActiveModal(TAGS_MODAL), []);
  const openCorrespondentsModal = useCallback(
    () => setActiveModal(CORRESPONDENTS_MODAL),
    [],
  );
  const openDocumentTypesModal = useCallback(
    () => setActiveModal(DOCUMENT_TYPES_MODAL),
    [],
  );
  const closeActiveModal = useCallback(() => setActiveModal(null), []);

  useEffect(() => {
    setActiveModal(null);
  }, [locationPathname]);

  useEffect(() => {
    if (!activeModal) {
      return undefined;
    }
    const handleKeyDown = (event) => {
      if (event.key === 'Escape') {
        event.preventDefault();
        setActiveModal(null);
      }
    };
    window.addEventListener('keydown', handleKeyDown);
    return () => window.removeEventListener('keydown', handleKeyDown);
  }, [activeModal]);

  const tagModal = useMemo(() => {
    if (activeModal !== TAGS_MODAL) {
      return null;
    }
    return (
      <div
        className="modal-backdrop"
        role="presentation"
        onClick={closeActiveModal}
      >
        <div
          className="modal modal--panel"
          role="dialog"
          aria-modal="true"
          aria-labelledby="tags-modal-title"
          onClick={(event) => event.stopPropagation()}
        >
          <div className="panel-modal__header">
            <h3 id="tags-modal-title">Manage Tags</h3>
            <button type="button" className="secondary" onClick={closeActiveModal}>
              Close
            </button>
          </div>
          <div className="panel-modal__body">
            <TagsPanel
              tags={tags}
              onRefresh={refreshTags}
              onCreateTag={onTagCreate}
              onUpdateTag={onTagUpdate}
              onDeleteTag={onTagDelete}
              onNotify={setStatusMessage}
            />
          </div>
        </div>
      </div>
    );
  }, [
    activeModal,
    closeActiveModal,
    onTagCreate,
    onTagDelete,
    onTagUpdate,
    refreshTags,
    setStatusMessage,
    tags,
  ]);

  const correspondentsModal = useMemo(() => {
    if (activeModal !== CORRESPONDENTS_MODAL) {
      return null;
    }
    return (
      <div
        className="modal-backdrop"
        role="presentation"
        onClick={closeActiveModal}
      >
        <div
          className="modal modal--panel"
          role="dialog"
          aria-modal="true"
          aria-labelledby="correspondents-modal-title"
          onClick={(event) => event.stopPropagation()}
        >
          <div className="panel-modal__header">
            <h3 id="correspondents-modal-title">Manage Correspondents</h3>
            <button type="button" className="secondary" onClick={closeActiveModal}>
              Close
            </button>
          </div>
          <div className="panel-modal__body">
            <CorrespondentsPanel
              correspondents={correspondents}
              onRefresh={refreshCorrespondents}
              onCreate={onCorrespondentCreate}
              onUpdate={onCorrespondentUpdate}
              onDelete={onCorrespondentDelete}
              onNotify={setStatusMessage}
            />
          </div>
        </div>
      </div>
    );
  }, [
    activeModal,
    closeActiveModal,
    correspondents,
    onCorrespondentCreate,
    onCorrespondentDelete,
    onCorrespondentUpdate,
    refreshCorrespondents,
    setStatusMessage,
  ]);

  const documentTypesModal = useMemo(() => {
    if (activeModal !== DOCUMENT_TYPES_MODAL) {
      return null;
    }
    return (
      <div
        className="modal-backdrop"
        role="presentation"
        onClick={closeActiveModal}
      >
        <div
          className="modal modal--panel"
          role="dialog"
          aria-modal="true"
          aria-labelledby="document-types-modal-title"
          onClick={(event) => event.stopPropagation()}
        >
          <div className="panel-modal__header">
            <h3 id="document-types-modal-title">Manage Document Types</h3>
            <button type="button" className="secondary" onClick={closeActiveModal}>
              Close
            </button>
          </div>
          <div className="panel-modal__body">
            <DocumentTypesPanel
              documentTypes={documentTypes}
              onRefresh={refreshDocumentTypes}
              onCreate={onDocumentTypeCreate}
              onUpdate={onDocumentTypeUpdate}
              onDelete={onDocumentTypeDelete}
              onNotify={setStatusMessage}
            />
          </div>
        </div>
      </div>
    );
  }, [
    activeModal,
    closeActiveModal,
    documentTypes,
    onDocumentTypeCreate,
    onDocumentTypeDelete,
    onDocumentTypeUpdate,
    refreshDocumentTypes,
    setStatusMessage,
  ]);

  const managementModals = (
    <>
      {tagModal}
      {correspondentsModal}
      {documentTypesModal}
    </>
  );

  return {
    managementModals,
    openTagsModal,
    openCorrespondentsModal,
    openDocumentTypesModal,
    closeActiveModal,
    activeModal,
  };
};

export default useManagementModals;