Merge pull request #1349 from scm-manager/feature/modal-rework

Feature/modal rework

scm-ui/ui-webapp/src/admin/roles/containers/DeleteRepositoryRole.tsx

@@ -21,80 +21,78 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-import React from "react";
+import React, { FC, useState } from "react";
 import { connect } from "react-redux";
-import { compose } from "redux";
-import { withRouter } from "react-router-dom";
-import { WithTranslation, withTranslation } from "react-i18next";
-import { History } from "history";
+import { useHistory } from "react-router-dom";
+import { useTranslation } from "react-i18next";
 import { RepositoryRole } from "@scm-manager/ui-types";
-import { confirmAlert, DeleteButton, ErrorNotification, Level } from "@scm-manager/ui-components";
+import { ConfirmAlert, DeleteButton, ErrorNotification, Level } from "@scm-manager/ui-components";
 import { deleteRole, getDeleteRoleFailure, isDeleteRolePending } from "../modules/roles";
 
-type Props = WithTranslation & {
+type Props = {
   loading: boolean;
   error: Error;
   role: RepositoryRole;
   confirmDialog?: boolean;
   deleteRole: (role: RepositoryRole, callback?: () => void) => void;
-
-  // context props
-  history: History;
 };
 
-class DeleteRepositoryRole extends React.Component<Props> {
-  static defaultProps = {
-    confirmDialog: true
+const DeleteRepositoryRole: FC<Props> = ({ confirmDialog = true, deleteRole, role, loading, error }: Props) => {
+  const [showConfirmAlert, setShowConfirmAlert] = useState(false);
+  const [t] = useTranslation("admin");
+  const history = useHistory();
+
+  const roleDeleted = () => {
+    history.push("/admin/roles/");
   };
 
-  roleDeleted = () => {
-    this.props.history.push("/admin/roles/");
+  const deleteRoleCallback = () => {
+    deleteRole(role, roleDeleted);
   };
 
-  deleteRole = () => {
-    this.props.deleteRole(this.props.role, this.roleDeleted);
+  const confirmDelete = () => {
+    setShowConfirmAlert(true);
   };
 
-  confirmDelete = () => {
-    const { t } = this.props;
-    confirmAlert({
-      title: t("repositoryRole.delete.confirmAlert.title"),
-      message: t("repositoryRole.delete.confirmAlert.message"),
-      buttons: [
-        {
-          className: "is-outlined",
-          label: t("repositoryRole.delete.confirmAlert.submit"),
-          onClick: () => this.deleteRole()
-        },
-        {
-          label: t("repositoryRole.delete.confirmAlert.cancel"),
-          onClick: () => null
-        }
-      ]
-    });
+  const isDeletable = () => {
+    return role._links.delete;
   };
 
-  isDeletable = () => {
-    return this.props.role._links.delete;
-  };
+  const action = confirmDialog ? confirmDelete : deleteRoleCallback;
 
-  render() {
-    const { loading, error, confirmDialog, t } = this.props;
-    const action = confirmDialog ? this.confirmDelete : this.deleteRole;
-
-    if (!this.isDeletable()) {
-      return null;
-    }
+  if (!isDeletable()) {
+    return null;
+  }
 
+  if (showConfirmAlert) {
     return (
-      <>
-        <hr />
-        <ErrorNotification error={error} />
-        <Level right={<DeleteButton label={t("repositoryRole.delete.button")} action={action} loading={loading} />} />
-      </>
+      <ConfirmAlert
+        title={t("repositoryRole.delete.confirmAlert.title")}
+        message={t("repositoryRole.delete.confirmAlert.message")}
+        buttons={[
+          {
+            className: "is-outlined",
+            label: t("repositoryRole.delete.confirmAlert.submit"),
+            onClick: () => deleteRoleCallback()
+          },
+          {
+            label: t("repositoryRole.delete.confirmAlert.cancel"),
+            onClick: () => null
+          }
+        ]}
+        close={() => setShowConfirmAlert(false)}
+      />
     );
   }
-}
+
+  return (
+    <>
+      <hr />
+      <ErrorNotification error={error} />
+      <Level right={<DeleteButton label={t("repositoryRole.delete.button")} action={action} loading={loading} />} />
+    </>
+  );
+};
 
 const mapStateToProps = (state: any, ownProps: Props) => {
   const loading = isDeleteRolePending(state, ownProps.role.name);
@@ -113,8 +111,4 @@ const mapDispatchToProps = (dispatch: any) => {
   };
 };
 
-export default compose(
-  connect(mapStateToProps, mapDispatchToProps),
-  withRouter,
-  withTranslation("admin")
-)(DeleteRepositoryRole);
+export default connect(mapStateToProps, mapDispatchToProps)(DeleteRepositoryRole);