restore page delete modal

packages/app/src/components/PageDeleteModal.tsx

@@ -1,5 +1,5 @@
 import React, {
-  useState, FC, useMemo, useCallback,
+  useState, FC, useMemo,
 } from 'react';
 
 import { useTranslation } from 'react-i18next';
@@ -8,7 +8,7 @@ import {
 } from 'reactstrap';
 
 import { apiPost } from '~/client/util/apiv1-client';
-import { apiv3Delete, apiv3Post } from '~/client/util/apiv3-client';
+import { apiv3Post } from '~/client/util/apiv3-client';
 import { HasObjectId } from '~/interfaces/has-object-id';
 import {
   IDeleteSinglePageApiv1Result, IDeleteManyPageApiv3Result, IPageToDeleteWithMeta, IDataWithMeta, isIPageInfoForEntity, IPageInfoForEntity,
@@ -45,7 +45,6 @@ const PageDeleteModal: FC = () => {
   const { data: deleteModalData, close: closeDeleteModal } = usePageDeleteModal();
 
   const isOpened = deleteModalData?.isOpened ?? false;
-  const emptyTrash = deleteModalData?.opts?.emptyTrash ?? false;
 
   const notOperatablePages: IPageToDeleteWithMeta[] = (deleteModalData?.pages ?? [])
     .filter(p => !isIPageInfoForEntity(p.meta));
@@ -105,33 +104,27 @@ const PageDeleteModal: FC = () => {
       return;
     }
 
+
     /*
      * When multiple pages
      */
     if (deleteModalData.pages.length > 1) {
       try {
-        const onDeleted = deleteModalData.opts?.onDeleted;
+        const isRecursively = isDeleteRecursively === true ? true : undefined;
+        const isCompletely = isDeleteCompletely === true ? true : undefined;
 
-        if (emptyTrash) {
-          await apiv3Delete('/pages/empty-trash');
-          if (onDeleted != null) {
-            onDeleted('', null, null);
-          }
-        }
-        else {
-          const isRecursively = isDeleteRecursively === true ? true : undefined;
-          const isCompletely = isDeleteCompletely === true ? true : undefined;
-          const pageIdToRevisionIdMap = {};
-          deleteModalData.pages.forEach((p) => { pageIdToRevisionIdMap[p.data._id] = p.data.revision as string });
-          const { data } = await apiv3Post<IDeleteManyPageApiv3Result>('/pages/delete', {
-            pageIdToRevisionIdMap,
-            isRecursively,
-            isCompletely,
-          });
-          const onDeleted = deleteModalData.opts?.onDeleted;
-          if (onDeleted != null) {
-            onDeleted(data.paths, data.isRecursively, data.isCompletely);
-          }
+        const pageIdToRevisionIdMap = {};
+        deleteModalData.pages.forEach((p) => { pageIdToRevisionIdMap[p.data._id] = p.data.revision as string });
+
+        const { data } = await apiv3Post<IDeleteManyPageApiv3Result>('/pages/delete', {
+          pageIdToRevisionIdMap,
+          isRecursively,
+          isCompletely,
+        });
+
+        const onDeleted = deleteModalData.opts?.onDeleted;
+        if (onDeleted != null) {
+          onDeleted(data.paths, data.isRecursively, data.isCompletely);
         }
         closeDeleteModal();
       }
@@ -218,10 +211,6 @@ const PageDeleteModal: FC = () => {
     );
   }
 
-  const renderCompletelyDeleteAlert = useMemo(() => {
-    return <p className="form-text mt-0">{t('modal_delete.empty_trash_alert')}</p>;
-  }, [t]);
-
   const renderPagePathsToDelete = () => {
     const pages = injectedPages != null && injectedPages.length > 0 ? injectedPages : deleteModalData?.pages;
 
@@ -236,28 +225,11 @@ const PageDeleteModal: FC = () => {
     return <></>;
   };
 
-  const renderDeleteModalOptions = useCallback(() => {
-    if (emptyTrash) {
-      return renderCompletelyDeleteAlert;
-    }
-
-    if (!isDeletable) {
-      return;
-    }
-
-    return (
-      <>
-        {renderDeleteRecursivelyForm()}
-        {!forceDeleteCompletelyMode && renderDeleteCompletelyForm()}
-      </>
-    );
-  }, [t, deleteModalData, isDeleteCompletely, isDeleteRecursively]);
-
   return (
     <Modal size="lg" isOpen={isOpened} toggle={closeDeleteModal} data-testid="page-delete-modal" className="grw-create-page">
       <ModalHeader tag="h4" toggle={closeDeleteModal} className={`bg-${deleteIconAndKey[deleteMode].color} text-light`}>
         <i className={`icon-fw icon-${deleteIconAndKey[deleteMode].icon}`}></i>
-        { emptyTrash ? t('modal_delete.empty_trash') : t(`modal_delete.delete_${deleteIconAndKey[deleteMode].translationKey}`) }
+        { t(`modal_delete.delete_${deleteIconAndKey[deleteMode].translationKey}`) }
       </ModalHeader>
       <ModalBody>
         <div className="form-group grw-scrollable-modal-body pb-1">
@@ -265,7 +237,8 @@ const PageDeleteModal: FC = () => {
           {/* Todo: change the way to show path on modal when too many pages are selected */}
           {renderPagePathsToDelete()}
         </div>
-        {renderDeleteModalOptions()}
+        { isDeletable && renderDeleteRecursivelyForm()}
+        { isDeletable && !forceDeleteCompletelyMode && renderDeleteCompletelyForm() }
       </ModalBody>
       <ModalFooter>
         <ApiErrorMessageList errs={errs} />
@@ -276,7 +249,7 @@ const PageDeleteModal: FC = () => {
           onClick={deleteButtonHandler}
         >
           <i className={`mr-1 icon-${deleteIconAndKey[deleteMode].icon}`} aria-hidden="true"></i>
-          { emptyTrash ? t('modal_delete.empty_trash_button') : t(`modal_delete.delete_${deleteIconAndKey[deleteMode].translationKey}`) }
+          { t(`modal_delete.delete_${deleteIconAndKey[deleteMode].translationKey}`) }
         </button>
       </ModalFooter>
     </Modal>

packages/app/src/stores/modal.tsx

@@ -38,7 +38,6 @@ export const usePageCreateModal = (status?: CreateModalStatus): SWRResponse<Crea
 */
 export type IDeleteModalOption = {
   onDeleted?: OnDeletedFunction,
-  emptyTrash?: true,
 }
 
 type DeleteModalStatus = {