weseek__growi/apps/app/src/client/components/Common/Dropdown/PageItemControl.tsx

import React, { type JSX, useCallback, useEffect, useState } from 'react';
import {
  type IPageInfoExt,
  isIPageInfoForEmpty,
  isIPageInfoForOperation,
} from '@growi/core/dist/interfaces';
import { LoadingSpinner } from '@growi/ui/dist/components';
import { useTranslation } from 'next-i18next';
import {
  Dropdown,
  DropdownItem,
  DropdownMenu,
  DropdownToggle,
} from 'reactstrap';

import { NotAvailableForGuest } from '~/client/components/NotAvailableForGuest';
import type { IPageOperationProcessData } from '~/interfaces/page-operation';
import { useSWRxPageInfo } from '~/stores/page';
import loggerFactory from '~/utils/logger';
import { shouldRecoverPagePaths } from '~/utils/page-operation';

const logger = loggerFactory('growi:cli:PageItemControl');

export const MenuItemType = {
  BOOKMARK: 'bookmark',
  RENAME: 'rename',
  DUPLICATE: 'duplicate',
  DELETE: 'delete',
  REVERT: 'revert',
  PATH_RECOVERY: 'pathRecovery',
  SWITCH_CONTENT_WIDTH: 'switch_content_width',
} as const;
export type MenuItemType = (typeof MenuItemType)[keyof typeof MenuItemType];

export type ForceHideMenuItems = MenuItemType[];

export type AdditionalMenuItemsRendererProps = { pageInfo: IPageInfoExt };

type CommonProps = {
  pageInfo?: IPageInfoExt;
  isEnableActions?: boolean;
  isReadOnlyUser?: boolean;
  forceHideMenuItems?: ForceHideMenuItems;

  onClickBookmarkMenuItem?: (
    pageId: string,
    newValue?: boolean,
  ) => Promise<void>;
  onClickRenameMenuItem?: (
    pageId: string,
    pageInfo: IPageInfoExt | undefined,
  ) => Promise<void> | void;
  onClickDuplicateMenuItem?: (pageId: string) => Promise<void> | void;
  onClickDeleteMenuItem?: (
    pageId: string,
    pageInfo: IPageInfoExt | undefined,
  ) => Promise<void> | void;
  onClickRevertMenuItem?: (pageId: string) => Promise<void> | void;
  onClickPathRecoveryMenuItem?: (pageId: string) => Promise<void> | void;

  additionalMenuItemOnTopRenderer?: React.FunctionComponent<AdditionalMenuItemsRendererProps>;
  additionalMenuItemRenderer?: React.FunctionComponent<AdditionalMenuItemsRendererProps>;
  isInstantRename?: boolean;
  alignEnd?: boolean;
};

type DropdownMenuProps = CommonProps & {
  pageId: string;
  isLoading?: boolean;
  isDataUnavailable?: boolean;
  operationProcessData?: IPageOperationProcessData;
};

const PageItemControlDropdownMenu = React.memo(
  (props: DropdownMenuProps): JSX.Element => {
    const { t } = useTranslation('');

    const {
      pageId,
      isLoading,
      isDataUnavailable,
      pageInfo,
      isEnableActions,
      isReadOnlyUser,
      forceHideMenuItems,
      operationProcessData,
      onClickBookmarkMenuItem,
      onClickRenameMenuItem,
      onClickDuplicateMenuItem,
      onClickDeleteMenuItem,
      onClickRevertMenuItem,
      onClickPathRecoveryMenuItem,
      additionalMenuItemOnTopRenderer: AdditionalMenuItemsOnTop,
      additionalMenuItemRenderer: AdditionalMenuItems,
      isInstantRename,
      alignEnd,
    } = props;

    const bookmarkItemClickedHandler = useCallback(async () => {
      if (onClickBookmarkMenuItem == null) return;

      if (
        !isIPageInfoForEmpty(pageInfo) &&
        !isIPageInfoForOperation(pageInfo)
      ) {
        return;
      }

      await onClickBookmarkMenuItem(pageId, !pageInfo.isBookmarked);
    }, [onClickBookmarkMenuItem, pageId, pageInfo]);

    const renameItemClickedHandler = useCallback(async () => {
      if (onClickRenameMenuItem == null) return;

      if (
        !(isIPageInfoForEmpty(pageInfo) || isIPageInfoForOperation(pageInfo)) ||
        !pageInfo?.isMovable
      ) {
        logger.warn('This page could not be renamed.');
        return;
      }

      await onClickRenameMenuItem(pageId, pageInfo);
    }, [onClickRenameMenuItem, pageId, pageInfo]);

    const duplicateItemClickedHandler = useCallback(async () => {
      if (onClickDuplicateMenuItem == null) {
        return;
      }
      await onClickDuplicateMenuItem(pageId);
    }, [onClickDuplicateMenuItem, pageId]);

    const revertItemClickedHandler = useCallback(async () => {
      if (onClickRevertMenuItem == null) {
        return;
      }
      await onClickRevertMenuItem(pageId);
    }, [onClickRevertMenuItem, pageId]);

    const deleteItemClickedHandler = useCallback(async () => {
      if (onClickDeleteMenuItem == null) return;

      if (
        !(isIPageInfoForEmpty(pageInfo) || isIPageInfoForOperation(pageInfo)) ||
        !pageInfo?.isDeletable
      ) {
        logger.warn('This page could not be deleted.');
        return;
      }
      await onClickDeleteMenuItem(pageId, pageInfo);
    }, [onClickDeleteMenuItem, pageId, pageInfo]);

    const pathRecoveryItemClickedHandler = useCallback(async () => {
      if (onClickPathRecoveryMenuItem == null) {
        return;
      }
      await onClickPathRecoveryMenuItem(pageId);
    }, [onClickPathRecoveryMenuItem, pageId]);

    let contents = <></>;

    if (isDataUnavailable) {
      // Show message when data is not available (e.g., fetch error)
      contents = (
        <div className="text-warning text-center px-3">
          <span className="material-symbols-outlined">error_outline</span> No
          data available
        </div>
      );
    } else if (isLoading) {
      contents = (
        <div className="text-muted text-center my-2">
          <LoadingSpinner />
        </div>
      );
    } else if (pageId != null && pageInfo != null) {
      const showDeviderBeforeAdditionalMenuItems =
        (forceHideMenuItems?.length ?? 0) < 3;
      const showDeviderBeforeDelete =
        AdditionalMenuItems != null || showDeviderBeforeAdditionalMenuItems;

      // PathRecovery
      // Todo: It is wanted to find a better way to pass operationProcessData to PageItemControl
      const shouldShowPathRecoveryButton =
        operationProcessData != null
          ? shouldRecoverPagePaths(operationProcessData)
          : false;

      contents = (
        <>
          {!isEnableActions && (
            <DropdownItem>
              <p>{t('search_result.currently_not_implemented')}</p>
            </DropdownItem>
          )}

          {AdditionalMenuItemsOnTop && (
            <>
              <AdditionalMenuItemsOnTop pageInfo={pageInfo} />
              <DropdownItem divider />
            </>
          )}

          {/* Bookmark */}
          {!forceHideMenuItems?.includes(MenuItemType.BOOKMARK) &&
            isEnableActions &&
            (isIPageInfoForEmpty(pageInfo) ||
              isIPageInfoForOperation(pageInfo)) && (
              <DropdownItem
                onClick={bookmarkItemClickedHandler}
                className="grw-page-control-dropdown-item"
                data-testid={
                  pageInfo.isBookmarked
                    ? 'remove-bookmark-btn'
                    : 'add-bookmark-btn'
                }
              >
                <span className="material-symbols-outlined grw-page-control-dropdown-icon">
                  bookmark
                </span>
                {pageInfo.isBookmarked
                  ? t('remove_bookmark')
                  : t('add_bookmark')}
              </DropdownItem>
            )}

          {/* Move/Rename */}
          {!forceHideMenuItems?.includes(MenuItemType.RENAME) &&
            isEnableActions &&
            !isReadOnlyUser &&
            (isIPageInfoForEmpty(pageInfo) ||
              isIPageInfoForOperation(pageInfo)) &&
            pageInfo.isMovable && (
              <DropdownItem
                onClick={renameItemClickedHandler}
                data-testid="rename-page-btn"
                className="grw-page-control-dropdown-item"
              >
                <span className="material-symbols-outlined me-1 grw-page-control-dropdown-icon">
                  redo
                </span>
                {t(isInstantRename ? 'Rename' : 'Move/Rename')}
              </DropdownItem>
            )}

          {/* Duplicate */}
          {!forceHideMenuItems?.includes(MenuItemType.DUPLICATE) &&
            isEnableActions &&
            !isReadOnlyUser && (
              <DropdownItem
                onClick={duplicateItemClickedHandler}
                data-testid="open-page-duplicate-modal-btn"
                className="grw-page-control-dropdown-item"
              >
                <span className="material-symbols-outlined me-1 grw-page-control-dropdown-icon">
                  file_copy
                </span>
                {t('Duplicate')}
              </DropdownItem>
            )}

          {/* Revert */}
          {!forceHideMenuItems?.includes(MenuItemType.REVERT) &&
            isEnableActions &&
            !isReadOnlyUser &&
            (isIPageInfoForEmpty(pageInfo) ||
              isIPageInfoForOperation(pageInfo)) &&
            pageInfo.isRevertible && (
              <DropdownItem
                onClick={revertItemClickedHandler}
                className="grw-page-control-dropdown-item"
              >
                <span className="material-symbols-outlined me-1 grw-page-control-dropdown-icon">
                  undo
                </span>
                {t('modal_putback.label.Put Back Page')}
              </DropdownItem>
            )}

          {AdditionalMenuItems && (
            <>
              {showDeviderBeforeAdditionalMenuItems && <DropdownItem divider />}
              <AdditionalMenuItems pageInfo={pageInfo} />
            </>
          )}

          {/* PathRecovery */}
          {!forceHideMenuItems?.includes(MenuItemType.PATH_RECOVERY) &&
            isEnableActions &&
            !isReadOnlyUser &&
            shouldShowPathRecoveryButton && (
              <DropdownItem
                onClick={pathRecoveryItemClickedHandler}
                className="grw-page-control-dropdown-item"
              >
                <span className="material-symbols-outlined me-1 grw-page-control-dropdown-icon">
                  build
                </span>
                {t('PathRecovery')}
              </DropdownItem>
            )}

          {/* divider */}
          {/* Delete */}
          {!forceHideMenuItems?.includes(MenuItemType.DELETE) &&
            isEnableActions &&
            !isReadOnlyUser &&
            (isIPageInfoForEmpty(pageInfo) ||
              isIPageInfoForOperation(pageInfo)) &&
            pageInfo.isDeletable && (
              <>
                {showDeviderBeforeDelete && <DropdownItem divider />}
                <DropdownItem
                  className={`pt-2 grw-page-control-dropdown-item ${pageInfo.isDeletable ? 'text-danger' : ''}`}
                  disabled={!pageInfo.isDeletable}
                  onClick={deleteItemClickedHandler}
                  data-testid="open-page-delete-modal-btn"
                >
                  <span className="material-symbols-outlined me-1 grw-page-control-dropdown-icon">
                    delete
                  </span>
                  {t('Delete')}
                </DropdownItem>
              </>
            )}
        </>
      );
    }

    return (
      <DropdownMenu
        className="d-print-none"
        data-testid="page-item-control-menu"
        end={alignEnd}
        container="body"
        persist={!!alignEnd}
        style={{
          zIndex: 1055,
        }} /* make it larger than $zindex-modal of bootstrap */
      >
        {contents}
      </DropdownMenu>
    );
  },
);

PageItemControlDropdownMenu.displayName = 'PageItemControl';

type PageItemControlSubstanceProps = CommonProps & {
  pageId: string;
  children?: React.ReactNode;
  operationProcessData?: IPageOperationProcessData;
};

export const PageItemControlSubstance = (
  props: PageItemControlSubstanceProps,
): JSX.Element => {
  const {
    pageId,
    pageInfo: presetPageInfo,
    children,
    onClickBookmarkMenuItem,
    onClickRenameMenuItem,
    onClickDuplicateMenuItem,
    onClickDeleteMenuItem,
    onClickPathRecoveryMenuItem,
  } = props;

  const [isOpen, setIsOpen] = useState(false);
  const [shouldFetch, setShouldFetch] = useState(false);

  const {
    data: fetchedPageInfo,
    isLoading: isFetchLoading,
    mutate: mutatePageInfo,
  } = useSWRxPageInfo(shouldFetch ? pageId : null);

  // update shouldFetch (and will never be false)
  useEffect(() => {
    if (shouldFetch) {
      return;
    }
    if (!isIPageInfoForOperation(presetPageInfo) && isOpen) {
      setShouldFetch(true);
    }
  }, [isOpen, presetPageInfo, shouldFetch]);

  // mutate after handle event
  const bookmarkMenuItemClickHandler = useCallback(
    async (_pageId: string, _newValue: boolean) => {
      if (onClickBookmarkMenuItem != null) {
        await onClickBookmarkMenuItem(_pageId, _newValue);
      }

      if (shouldFetch) {
        mutatePageInfo();
      }
    },
    [mutatePageInfo, onClickBookmarkMenuItem, shouldFetch],
  );

  // Delegate to SWR's isLoading so that a skipped request (null key) is not treated as loading
  const isLoading = shouldFetch && isFetchLoading;
  const isDataUnavailable =
    !isLoading && fetchedPageInfo == null && presetPageInfo == null;

  const renameMenuItemClickHandler = useCallback(async () => {
    if (onClickRenameMenuItem == null) {
      return;
    }
    await onClickRenameMenuItem(pageId, fetchedPageInfo ?? presetPageInfo);
  }, [onClickRenameMenuItem, pageId, fetchedPageInfo, presetPageInfo]);

  const duplicateMenuItemClickHandler = useCallback(async () => {
    if (onClickDuplicateMenuItem == null) {
      return;
    }
    await onClickDuplicateMenuItem(pageId);
  }, [onClickDuplicateMenuItem, pageId]);

  const deleteMenuItemClickHandler = useCallback(async () => {
    if (onClickDeleteMenuItem == null) {
      return;
    }
    await onClickDeleteMenuItem(pageId, fetchedPageInfo ?? presetPageInfo);
  }, [onClickDeleteMenuItem, pageId, fetchedPageInfo, presetPageInfo]);

  const pathRecoveryMenuItemClickHandler = useCallback(async () => {
    if (onClickPathRecoveryMenuItem == null) {
      return;
    }
    await onClickPathRecoveryMenuItem(pageId);
  }, [onClickPathRecoveryMenuItem, pageId]);

  return (
    <NotAvailableForGuest>
      <Dropdown
        isOpen={isOpen}
        toggle={() => setIsOpen(!isOpen)}
        className="grw-page-item-control"
        data-testid="open-page-item-control-btn"
      >
        {children ?? (
          <DropdownToggle
            role="button"
            color="transparent"
            className="border-0 rounded btn-page-item-control d-flex align-items-center justify-content-center"
          >
            <span className="material-symbols-outlined">more_vert</span>
          </DropdownToggle>
        )}

        {isOpen && (
          <PageItemControlDropdownMenu
            {...props}
            isLoading={isLoading}
            isDataUnavailable={isDataUnavailable}
            pageInfo={fetchedPageInfo ?? presetPageInfo}
            onClickBookmarkMenuItem={bookmarkMenuItemClickHandler}
            onClickRenameMenuItem={renameMenuItemClickHandler}
            onClickDuplicateMenuItem={duplicateMenuItemClickHandler}
            onClickDeleteMenuItem={deleteMenuItemClickHandler}
            onClickPathRecoveryMenuItem={pathRecoveryMenuItemClickHandler}
          />
        )}
      </Dropdown>
    </NotAvailableForGuest>
  );
};

export type PageItemControlProps = CommonProps & {
  pageId?: string;
  children?: React.ReactNode;
  operationProcessData?: IPageOperationProcessData;
};

export const PageItemControl = (props: PageItemControlProps): JSX.Element => {
  const { pageId } = props;

  if (pageId == null) {
    return <></>;
  }

  return <PageItemControlSubstance pageId={pageId} {...props} />;
};