Merge branch 'master' into fix/page-move-event-notification-message-for-master

packages/app/src/components/EmptyTrashButton.tsx

@@ -1,55 +1,28 @@
-import React, { FC, useCallback } from 'react';
+import React, { useCallback } from 'react';
 
 import { useTranslation } from 'next-i18next';
 
-import { toastSuccess } from '~/client/util/apiNotification';
-import {
-  IDataWithMeta,
-  IPageHasId,
-  IPageInfo,
-} from '~/interfaces/page';
-import { useEmptyTrashModal } from '~/stores/modal';
-import { useSWRxDescendantsPageListForCurrrentPath, useSWRxPageInfoForList } from '~/stores/page-listing';
+type EmptyTrashButtonProps = {
+  onEmptyTrashButtonClick: () => void,
+  disableEmptyButton: boolean
+};
 
 
-const EmptyTrashButton: FC = () => {
+const EmptyTrashButton = (props: EmptyTrashButtonProps): JSX.Element => {
+  const { onEmptyTrashButtonClick, disableEmptyButton } = props;
   const { t } = useTranslation();
-  const { open: openEmptyTrashModal } = useEmptyTrashModal();
-  const { data: pagingResult, mutate } = useSWRxDescendantsPageListForCurrrentPath();
-
-  const pageIds = pagingResult?.items?.map(page => page._id);
-  const { injectTo } = useSWRxPageInfoForList(pageIds, null, true, true);
-
-  let pageWithMetas: IDataWithMeta<IPageHasId, IPageInfo>[] = [];
-
-  const convertToIDataWithMeta = (page) => {
-    return { data: page };
-  };
-
-  if (pagingResult != null) {
-    const dataWithMetas = pagingResult.items.map(page => convertToIDataWithMeta(page));
-    pageWithMetas = injectTo(dataWithMetas);
-  }
-
-  const deletablePages = pageWithMetas.filter(page => page.meta?.isAbleToDeleteCompletely);
-
-  const onEmptiedTrashHandler = useCallback(() => {
-    toastSuccess(t('empty_trash'));
-
-    mutate();
-  }, [t, mutate]);
 
-  const emptyTrashClickHandler = () => {
-    openEmptyTrashModal(deletablePages, { onEmptiedTrash: onEmptiedTrashHandler, canDelepeAllPages: pagingResult?.totalCount === deletablePages.length });
-  };
+  const emptyTrashButtonHandler = useCallback(() => {
+    onEmptyTrashButtonClick();
+  }, [onEmptyTrashButtonClick]);
 
   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"
-        disabled={deletablePages.length === 0}
-        onClick={() => emptyTrashClickHandler()}
+        disabled={disableEmptyButton}
+        onClick={emptyTrashButtonHandler}
       >
         <i className="icon-fw icon-trash"></i>
         <div>{t('modal_empty.empty_the_trash')}</div>

packages/app/src/components/EmptyTrashModal.tsx

@@ -19,7 +19,7 @@ const EmptyTrashModal: FC = () => {
 
   const isOpened = emptyTrashModalData?.isOpened ?? false;
 
-  const canDeleteAllpages = emptyTrashModalData?.opts?.canDelepeAllPages ?? false;
+  const canDeleteAllpages = emptyTrashModalData?.opts?.canDeleteAllPages ?? false;
 
   const [errs, setErrs] = useState<Error[] | null>(null);
 

packages/app/src/components/TrashPageList.tsx

@@ -1,15 +1,67 @@
-import React, { FC, useMemo } from 'react';
+import React, { FC, useMemo, useCallback } from 'react';
 
 import { useTranslation } from 'next-i18next';
 
+import { toastSuccess } from '~/client/util/apiNotification';
+import {
+  IPageHasId,
+} from '~/interfaces/page';
+import { IPagingResult } from '~/interfaces/paging-result';
+import { useShowPageLimitationXL } from '~/stores/context';
+import { useEmptyTrashModal } from '~/stores/modal';
+import { useSWRxDescendantsPageListForCurrrentPath, useSWRxPageInfoForList } from '~/stores/page-listing';
+
 import CustomNavAndContents from './CustomNavigation/CustomNavAndContents';
 import { DescendantsPageListForCurrentPath } from './DescendantsPageList';
 import EmptyTrashButton from './EmptyTrashButton';
 import PageListIcon from './Icons/PageListIcon';
 
+const convertToIDataWithMeta = (page) => {
+  return { data: page };
+};
+
+const useEmptyTrashButton = () => {
+
+  const { data: limit } = useShowPageLimitationXL();
+  const { data: pagingResult, mutate: mutatePageLists } = useSWRxDescendantsPageListForCurrrentPath(1, limit);
+  const { t } = useTranslation();
+  const { open: openEmptyTrashModal } = useEmptyTrashModal();
+
+  const pageIds = pagingResult?.items?.map(page => page._id);
+  const { injectTo } = useSWRxPageInfoForList(pageIds, null, true, true);
+
+  const calculateDeletablePages = useCallback((pagingResult?: IPagingResult<IPageHasId>) => {
+    if (pagingResult == null) { return undefined }
+
+    const dataWithMetas = pagingResult.items.map(page => convertToIDataWithMeta(page));
+    const pageWithMetas = injectTo(dataWithMetas);
+
+    return pageWithMetas.filter(page => page.meta?.isAbleToDeleteCompletely);
+  }, [injectTo]);
+
+  const deletablePages = calculateDeletablePages(pagingResult);
+
+  const onEmptiedTrashHandler = useCallback(() => {
+    toastSuccess(t('empty_trash'));
+
+    mutatePageLists();
+  }, [t, mutatePageLists]);
+
+  const emptyTrashClickHandler = useCallback(() => {
+    if (deletablePages == null) { return }
+    openEmptyTrashModal(deletablePages, { onEmptiedTrash: onEmptiedTrashHandler, canDeleteAllPages: pagingResult?.totalCount === deletablePages.length });
+  }, [deletablePages, onEmptiedTrashHandler, openEmptyTrashModal, pagingResult?.totalCount]);
+
+  const emptyTrashButton = useMemo(() => {
+    return <EmptyTrashButton onEmptyTrashButtonClick={emptyTrashClickHandler} disableEmptyButton={deletablePages?.length === 0} />;
+  }, [emptyTrashClickHandler, deletablePages?.length]);
+
+  return emptyTrashButton;
+};
 
 export const TrashPageList: FC = () => {
   const { t } = useTranslation();
+  const emptyTrashButton = useEmptyTrashButton();
 
   const navTabMapping = useMemo(() => {
     return {
@@ -22,10 +74,6 @@ export const TrashPageList: FC = () => {
     };
   }, [t]);
 
-  const emptyTrashButton = useMemo(() => {
-    return <EmptyTrashButton />;
-  }, []);
-
   return (
     <div data-testid="trash-page-list" className="mt-5 d-edit-none">
       <CustomNavAndContents navTabMapping={navTabMapping} navRightElement={emptyTrashButton} />

packages/app/src/stores/modal.tsx

@@ -78,7 +78,7 @@ export const usePageDeleteModal = (status?: DeleteModalStatus): SWRResponse<Dele
 */
 type IEmptyTrashModalOption = {
   onEmptiedTrash?: () => void,
-  canDelepeAllPages: boolean,
+  canDeleteAllPages: boolean,
 }
 
 type EmptyTrashModalStatus = {