refactor empty method

packages/app/src/components/EmptyTrashButton.tsx

@@ -1,24 +1,28 @@
-import React from 'react';
+import React, { useCallback } from 'react';
 
 import { useTranslation } from 'next-i18next';
 
 type EmptyTrashButtonProps = {
-  emptyTrashClickHandler: () => void,
+  onEmptyTrashButtonClick: () => void,
   disableEmptyButton: boolean
 };
 
 
 const EmptyTrashButton = (props: EmptyTrashButtonProps): JSX.Element => {
-  const { emptyTrashClickHandler, disableEmptyButton } = props;
+  const { onEmptyTrashButtonClick, disableEmptyButton } = props;
   const { t } = useTranslation();
 
+  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={disableEmptyButton}
-        onClick={() => emptyTrashClickHandler()}
+        onClick={emptyTrashButtonHandler}
       >
         <i className="icon-fw icon-trash"></i>
         <div>{t('modal_empty.empty_the_trash')}</div>

packages/app/src/components/TrashPageList.tsx

@@ -82,7 +82,7 @@ export const TrashPageList: FC = () => {
   }, [deletablePages, onEmptiedTrashHandler, openEmptyTrashModal, canDeleteAllPages]);
 
   const emptyTrashButton = useMemo(() => {
-    return <EmptyTrashButton emptyTrashClickHandler={emptyTrashClickHandler} disableEmptyButton={isButtonDisable} />;
+    return <EmptyTrashButton onEmptyTrashButtonClick={emptyTrashClickHandler} disableEmptyButton={isButtonDisable} />;
   }, [emptyTrashClickHandler, isButtonDisable]);
 
   return (