added loading and error state

scm-ui/src/users/components/DeleteUser.js

@@ -2,9 +2,18 @@
 import React from "react";
 import { translate } from "react-i18next";
 import type { User } from "@scm-manager/ui-types";
-import { Subtitle, DeleteButton, confirmAlert } from "@scm-manager/ui-components";
+import {
+  Subtitle,
+  DeleteButton,
+  confirmAlert
+} from "@scm-manager/ui-components";
+import { getDeleteUserFailure, isDeleteUserPending } from "../modules/users";
+import { connect } from "react-redux";
+import { ErrorNotification } from "@scm-manager/ui-components";
 
 type Props = {
+  loading: boolean,
+  error: Error,
   user: User,
   confirmDialog?: boolean,
 
@@ -47,7 +56,7 @@ class DeleteUser extends React.Component<Props> {
   };
 
   render() {
-    const { confirmDialog, t } = this.props;
+    const { loading, error, confirmDialog, t } = this.props;
     const action = confirmDialog ? this.confirmDelete : this.deleteUser;
 
     if (!this.isDeletable()) {
@@ -57,11 +66,13 @@ class DeleteUser extends React.Component<Props> {
     return (
       <>
         <Subtitle subtitle={t("deleteUser.subtitle")} />
+        <ErrorNotification error={error} />
         <div className="columns">
           <div className="column">
             <DeleteButton
               label={t("deleteUser.button")}
               action={action}
+              loading={loading}
             />
           </div>
         </div>
@@ -70,4 +81,13 @@ class DeleteUser extends React.Component<Props> {
   }
 }
 
-export default translate("users")(DeleteUser);
+const mapStateToProps = (state, ownProps) => {
+  const loading = isDeleteUserPending(state, ownProps.user.name);
+  const error = getDeleteUserFailure(state, ownProps.user.name);
+  return {
+    loading,
+    error
+  };
+};
+
+export default connect(mapStateToProps)(translate("users")(DeleteUser));