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 PanelHeader from '../ui/PanelHeader';

const TAGS_MODAL = 'tags';
const CORRESPONDENTS_MODAL = 'correspondents';

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

  const openTagsModal = useCallback(() => setActiveModal(TAGS_MODAL), []);
  const openCorrespondentsModal = useCallback(
    () => setActiveModal(CORRESPONDENTS_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()}
        >
          <PanelHeader
            className="panel-modal__header"
            title="Manage Tags"
            titleTag="h3"
            titleProps={{ id: 'tags-modal-title' }}
            actions={(
              <button type="button" className="secondary" onClick={closeActiveModal}>
                Close
              </button>
            )}
          />
          <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()}
        >
          <PanelHeader
            className="panel-modal__header"
            title="Manage Correspondents"
            titleTag="h3"
            titleProps={{ id: 'correspondents-modal-title' }}
            actions={(
              <button type="button" className="secondary" onClick={closeActiveModal}>
                Close
              </button>
            )}
          />
          <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 managementModals = (
    <>
      {tagModal}
      {correspondentsModal}
    </>
  );

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

export default useManagementModals;