remove hModal and move functionality in Modal component

OlarisTV · Jun 6, 2020 · acd7ddf · acd7ddf
1 parent 1efbdd1
commit acd7ddf
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 39 deletions.
diff --git a/src/Components/Admin/Users/UserItem.jsx b/src/Components/Admin/Users/UserItem.jsx
@@ -4,8 +4,7 @@ import { connect } from 'react-redux';
 import { useMutation } from '@apollo/react-hooks';
 
 import DELETE_USER from 'Mutations/deleteUser';
-
-import { showModal, hideModal, WARNING_MODAL } from 'Redux/Actions/modalActions';
+import { showModal, WARNING_MODAL } from 'Redux/Actions/modalActions';
 
 import { faTrash, faCrown } from '@fortawesome/free-solid-svg-icons';
 import * as S from './Styles';
@@ -14,27 +13,17 @@ type Props = {
     username: string,
     id: number,
     admin: boolean,
-    hModal: Function,
     sModal: Function
 };
 
-const UserItem = ({ sModal, hModal, username, id, admin }: Props) => {
+const UserItem = ({ sModal, username, id, admin }: Props) => {
     const [deleteUser, { data }] = useMutation(DELETE_USER);
 
-    const title = "Delete user";
-    const message = `Are you sure you want to delete the user '${username}'?`;
-    const confirm = () => {
-        hModal();
-        deleteUser({ variables: { id } });
-    };
-    const cancel = () => hModal();
-
     const toggleModal = () => {
         sModal(WARNING_MODAL, {
-            title,
-            message,
-            confirm,
-            cancel,
+            title: 'Delete user',
+            message: `Are you sure you want to delete the user '${username}'?`,
+            confirm: () => deleteUser({ variables: { id } }),
         });
     };
 
@@ -48,7 +37,6 @@ const UserItem = ({ sModal, hModal, username, id, admin }: Props) => {
 
 const mapDispatchToProps = (dispatch) => ({
     sModal: (type, props) => dispatch(showModal(type, props)),
-    hModal: () => dispatch(hideModal()),
 });
 
 export default connect(

diff --git a/src/Components/Modal/WarningModal/index.jsx b/src/Components/Modal/WarningModal/index.jsx
@@ -13,35 +13,41 @@ type OwnProps = {
     title: string,
     message: string,
     confirm: Function,
-    cancel: Function,
 };
 
 type Props = {
     ...OwnProps,
     hModal: Function,
 };
 
-const WarningModal = ({ hModal, title, message, confirm, cancel }: Props) => (
-    <Modal>
-        <ModalWrap>
-            <ModalHeader>
-                <ModalHeading>
-                    {title}
-                    <ModalClose onClick={() => hModal()} />
-                </ModalHeading>
-            </ModalHeader>
-            <ModalBody>
-                <Message>{message}</Message>
-                <Button type="button" onClick={() => cancel()}>
-                    Cancel
-                </Button>
-                <Button confirm type="button" onClick={() => confirm()}>
-                    Confirm
-                </Button>
-            </ModalBody>
-        </ModalWrap>
-    </Modal>
-);
+const WarningModal = ({ hModal, title, message, confirm }: Props) => {
+    const onConfirm = () => {
+        confirm();
+        hModal();
+    };
+
+    return (
+        <Modal>
+            <ModalWrap>
+                <ModalHeader>
+                    <ModalHeading>
+                        {title}
+                        <ModalClose onClick={() => hModal()} />
+                    </ModalHeading>
+                </ModalHeader>
+                <ModalBody>
+                    <Message>{message}</Message>
+                    <Button type="button" onClick={() => hModal()}>
+                        Cancel
+                    </Button>
+                    <Button confirm type="button" onClick={() => onConfirm()}>
+                        Confirm
+                    </Button>
+                </ModalBody>
+            </ModalWrap>
+        </Modal>
+    );
+};
 
 const mapDispatchToProps = (dispatch) => ({
     hModal: () => dispatch(hideModal()),