refactor

packages/app/src/components/EmptyTrashButton.tsx

@@ -0,0 +1,50 @@
+import React from 'react';
+
+import { useTranslation } from 'react-i18next';
+
+import { usePageDeleteModal } from '~/stores/modal';
+import { useSWRxDescendantsPageListForCurrrentPath, useSWRxPageInfoForList } from '~/stores/page';
+
+
+const EmptyTrashButton = () => {
+  const { t } = useTranslation();
+  const { open: openDeleteModal } = usePageDeleteModal();
+  const { data: pagingResult } = useSWRxDescendantsPageListForCurrrentPath();
+
+  const pageIds = pagingResult?.items?.map(page => page._id);
+  const { injectTo } = useSWRxPageInfoForList(pageIds, true, true);
+
+  let pageWithMetas = [];
+
+  const convertToIDataWithMeta = (page) => {
+    return { data: page };
+  };
+
+  if (pagingResult != null) {
+    const dataWithMetas = pagingResult.items.map(page => convertToIDataWithMeta(page));
+    pageWithMetas = injectTo(dataWithMetas);
+  }
+
+  const onDeletedHandler = (...args) => {
+    // process after multipe pages delete api
+  };
+
+  const emptyTrashClickHandler = () => {
+    openDeleteModal(pageWithMetas, { onDeleted: onDeletedHandler, emptyTrash: true });
+  };
+
+  return (
+    <div className="d-flex align-items-center">
+      <button
+        type="button"
+        className="btn btn-outline-secondary rounded-pill text-danger d-flex align-items-center"
+        onClick={() => emptyTrashClickHandler()}
+      >
+        <i className="icon-fw icon-trash"></i>
+        <div>{t('modal_delete.empty_trash')}</div>
+      </button>
+    </div>
+  );
+};
+
+export default EmptyTrashButton;

packages/app/src/components/PageDeleteModal.tsx

@@ -1,4 +1,6 @@
-import React, { useState, FC, useMemo } from 'react';
+import React, {
+  useState, FC, useMemo, useCallback,
+} from 'react';
 
 import { useTranslation } from 'react-i18next';
 import {
@@ -210,11 +212,9 @@ const PageDeleteModal: FC = () => {
     );
   }
 
-  const renderCompletelyDeleteAlert = () => {
-    return (
-      <p className="form-text mt-0">{t('modal_delete.empty_trash_alert')}</p>
-    );
-  };
+  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;
@@ -230,9 +230,9 @@ const PageDeleteModal: FC = () => {
     return <></>;
   };
 
-  const renderDeleteModalOptions = () => {
+  const renderDeleteModalOptions = useCallback(() => {
     if (emptyTrash) {
-      return renderCompletelyDeleteAlert();
+      return renderCompletelyDeleteAlert;
     }
 
     if (!isDeletable) {
@@ -245,7 +245,7 @@ const PageDeleteModal: FC = () => {
         {!forceDeleteCompletelyMode && renderDeleteCompletelyForm()}
       </>
     );
-  };
+  }, [t]);
 
   return (
     <Modal size="lg" isOpen={isOpened} toggle={closeDeleteModal} data-testid="page-delete-modal" className="grw-create-page">

packages/app/src/components/TrashPageList.jsx

@@ -1,58 +1,14 @@
 import React, { useMemo } from 'react';
 
 import PropTypes from 'prop-types';
-import { withTranslation, useTranslation } from 'react-i18next';
-
-import { usePageDeleteModal } from '~/stores/modal';
-import { useSWRxDescendantsPageListForCurrrentPath, useSWRxPageInfoForList } from '~/stores/page';
+import { withTranslation } from 'react-i18next';
 
 import CustomNavAndContents from './CustomNavigation/CustomNavAndContents';
 import { DescendantsPageListForCurrentPath } from './DescendantsPageList';
+import EmptyTrashButton from './EmptyTrashButton';
 import PageListIcon from './Icons/PageListIcon';
 
 
-const EmptyTrashButton = () => {
-  const { t } = useTranslation();
-  const { open: openDeleteModal } = usePageDeleteModal();
-  const { data: pagingResult } = useSWRxDescendantsPageListForCurrrentPath();
-
-  const pageIds = pagingResult?.items?.map(page => page._id);
-  const { injectTo } = useSWRxPageInfoForList(pageIds, true, true);
-
-  let pageWithMetas = [];
-
-  const convertToIDataWithMeta = (page) => {
-    return { data: page };
-  };
-
-  if (pagingResult != null) {
-    const dataWithMetas = pagingResult.items.map(page => convertToIDataWithMeta(page));
-    pageWithMetas = injectTo(dataWithMetas);
-  }
-
-  const onDeletedHandler = (...args) => {
-    // process after multipe pages delete api
-  };
-
-  const emptyTrashClickHandler = () => {
-    openDeleteModal(pageWithMetas, { onDeleted: onDeletedHandler, emptyTrash: true });
-  };
-
-  return (
-    <div className="d-flex align-items-center">
-      <button
-        type="button"
-        className="btn btn-outline-secondary rounded-pill text-danger d-flex align-items-center"
-        onClick={() => emptyTrashClickHandler()}
-      >
-        <i className="icon-fw icon-trash"></i>
-        <div>{t('modal_delete.empty_trash')}</div>
-      </button>
-    </div>
-  );
-};
-
-
 const TrashPageList = (props) => {
   const { t } = props;
 
@@ -67,9 +23,13 @@ const TrashPageList = (props) => {
     };
   }, [t]);
 
+  const EmptyTrashButton = useMemo(() => {
+    return <EmptyTrashButton />;
+  }, [t]);
+
   return (
     <div data-testid="trash-page-list" className="mt-5 d-edit-none">
-      <CustomNavAndContents navTabMapping={navTabMapping} navRightElement={EmptyTrashButton()} />
+      <CustomNavAndContents navTabMapping={navTabMapping} navRightElement={EmptyTrashButton} />
     </div>
   );
 };