refactor empty trash

src/client/js/components/EmptyTrashModal.jsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 
 import {
@@ -6,11 +6,34 @@ import {
 } from 'reactstrap';
 
 import { withTranslation } from 'react-i18next';
+import { createSubscribedElement } from './UnstatedUtils';
+
+import AppContainer from '../services/AppContainer';
+import ApiErrorMessage from './PageManagement/ApiErrorMessage';
 
 const EmptyTrashModal = (props) => {
   const {
-    t, isOpen, onClose, onClickEmptyBtn,
+    t, isOpen, onClose, appContainer,
   } = props;
+  const [errorCode, setErrorCode] = useState(null);
+  const [errorMessage, setErrorMessage] = useState(null);
+
+  async function emptyTrash() {
+    setErrorCode(null);
+    setErrorMessage(null);
+    try {
+      await appContainer.apiv3Delete('/pages/empty-trash');
+      window.location.reload();
+    }
+    catch (err) {
+      setErrorCode(err.code);
+      setErrorMessage(err.message);
+    }
+  }
+
+  function emptyButtonHandler() {
+    emptyTrash();
+  }
 
   return (
     <Modal isOpen={isOpen} toggle={onClose} className="grw-create-page">
@@ -21,7 +44,8 @@ const EmptyTrashModal = (props) => {
         { t('modal_empty.notice')}
       </ModalBody>
       <ModalFooter>
-        <button type="button" className="btn btn-danger" onClick={onClickEmptyBtn}>
+        <ApiErrorMessage errorCode={errorCode} errorMessage={errorMessage} />
+        <button type="button" className="btn btn-danger" onClick={emptyButtonHandler}>
           <i className="icon-trash mr-2" aria-hidden="true"></i>Empty
         </button>
       </ModalFooter>
@@ -29,13 +53,21 @@ const EmptyTrashModal = (props) => {
   );
 };
 
+/**
+ * Wrapper component for using unstated
+ */
+const EmptyTrashModalWrapper = (props) => {
+  return createSubscribedElement(EmptyTrashModal, props, [AppContainer]);
+};
+
 
 EmptyTrashModal.propTypes = {
   t: PropTypes.func.isRequired, //  i18next
+  appContainer: PropTypes.instanceOf(AppContainer).isRequired,
 
   isOpen: PropTypes.bool.isRequired,
   onClose: PropTypes.func.isRequired,
   onClickEmptyBtn: PropTypes.func.isRequired,
 };
 
-export default withTranslation()(EmptyTrashModal);
+export default withTranslation()(EmptyTrashModalWrapper);

src/client/js/components/Page/TrashPageAlert.jsx

@@ -2,7 +2,6 @@ import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 
 import { withTranslation } from 'react-i18next';
-import { toastError } from '../../util/apiNotification';
 
 import { createSubscribedElement } from '../UnstatedUtils';
 import AppContainer from '../../services/AppContainer';
@@ -47,21 +46,6 @@ const TrashPageAlert = (props) => {
     setIsPageDeleteModalShown(false);
   }
 
-  async function emptyTrash() {
-    try {
-      await appContainer.apiv3Delete('/pages/empty-trash');
-      window.location.reload();
-    }
-    catch (err) {
-      toastError(err);
-    }
-  }
-
-  function emptyButtonHandler() {
-    emptyTrash();
-  }
-
-
   function renderEmptyButton() {
     return (
       <button
@@ -102,7 +86,10 @@ const TrashPageAlert = (props) => {
   function renderModals() {
     return (
       <>
-        <EmptyTrashModal isOpen={isEmptyTrashModalShown} onClose={closeEmptyTrashModalHandler} onClickEmptyBtn={emptyButtonHandler} />
+        <EmptyTrashModal
+          isOpen={isEmptyTrashModalShown}
+          onClose={closeEmptyTrashModalHandler}
+        />
         <PutbackPageModal
           isOpen={isPutbackPageModalShown}
           onClose={closePutbackPageModalHandler}