separate empty button logic

packages/app/src/components/TrashPageList.tsx

@@ -17,21 +17,26 @@ import { DescendantsPageListForCurrentPath } from './DescendantsPageList';
 import EmptyTrashButton from './EmptyTrashButton';
 import PageListIcon from './Icons/PageListIcon';
 
+type EmptyTrashButtonOptions = {
+  isButtonDisable: boolean,
+  canDeleteAllPages: boolean,
+  deletablePages: IDataWithMeta<IPageHasId, IPageInfo>[],
+  mutatePageLists: () => void
+}
+
+const useEmptyTrashButton = (): EmptyTrashButtonOptions => {
 
-export const TrashPageList: FC = () => {
-  const { t } = useTranslation();
   const { data: limit } = useShowPageLimitationXL();
   const { data: pagingResult, mutate } = useSWRxDescendantsPageListForCurrrentPath(1, limit);
-  const { open: openEmptyTrashModal } = useEmptyTrashModal();
 
   const pageIds = pagingResult?.items?.map(page => page._id);
   const { injectTo } = useSWRxPageInfoForList(pageIds, null, true, true);
 
   let pageWithMetas: IDataWithMeta<IPageHasId, IPageInfo>[] = [];
 
-  const convertToIDataWithMeta = (page) => {
+  const convertToIDataWithMeta = useCallback((page) => {
     return { data: page };
-  };
+  }, []);
 
   if (pagingResult != null) {
     const dataWithMetas = pagingResult.items.map(page => convertToIDataWithMeta(page));
@@ -40,6 +45,21 @@ export const TrashPageList: FC = () => {
 
   const deletablePages = pageWithMetas.filter(page => page.meta?.isAbleToDeleteCompletely);
 
+  return {
+    isButtonDisable: deletablePages.length === 0,
+    canDeleteAllPages: pagingResult?.totalCount === deletablePages.length,
+    deletablePages,
+    mutatePageLists: mutate,
+  };
+};
+
+export const TrashPageList: FC = () => {
+  const { t } = useTranslation();
+  const { open: openEmptyTrashModal } = useEmptyTrashModal();
+  const {
+    isButtonDisable, canDeleteAllPages, deletablePages, mutatePageLists,
+  } = useEmptyTrashButton();
+
   const navTabMapping = useMemo(() => {
     return {
       pagelist: {
@@ -54,16 +74,16 @@ export const TrashPageList: FC = () => {
   const onEmptiedTrashHandler = useCallback(() => {
     toastSuccess(t('empty_trash'));
 
-    mutate();
-  }, [t, mutate]);
+    mutatePageLists();
+  }, [t, mutatePageLists]);
 
   const emptyTrashClickHandler = useCallback(() => {
-    openEmptyTrashModal(deletablePages, { onEmptiedTrash: onEmptiedTrashHandler, canDelepeAllPages: pagingResult?.totalCount === deletablePages.length });
-  }, [deletablePages, onEmptiedTrashHandler, openEmptyTrashModal, pagingResult?.totalCount]);
+    openEmptyTrashModal(deletablePages, { onEmptiedTrash: onEmptiedTrashHandler, canDeleteAllPages });
+  }, [deletablePages, onEmptiedTrashHandler, openEmptyTrashModal, canDeleteAllPages]);
 
   const emptyTrashButton = useMemo(() => {
-    return <EmptyTrashButton emptyTrashClickHandler={emptyTrashClickHandler} disableEmptyButton={deletablePages.length === 0} />;
-  }, [emptyTrashClickHandler, deletablePages.length]);
+    return <EmptyTrashButton emptyTrashClickHandler={emptyTrashClickHandler} disableEmptyButton={isButtonDisable} />;
+  }, [emptyTrashClickHandler, isButtonDisable]);
 
   return (
     <div data-testid="trash-page-list" className="mt-5 d-edit-none">