added confirm button to Delete

src/components/Admin/ChangeServices-Doctors.js

@@ -1,13 +1,19 @@
 import React from 'react';
 import Input from './Input'
 import CheckBoxWindow from "./CheckBoxWindow";
-import { CustomSelect } from "../hooks/select";
+import {CustomSelect} from "../hooks/select";
+import ConfirmButton from "../ConfirmButton";
 
 export default class ChangeServicesDoctors extends React.Component {
     state = {
+        showConfirm: false,
         flag: false,
     };
 
+    changeConfirm = (action, text) => {
+        this.setState({showConfirm: !this.state.showConfirm})
+    };
+
     componentDidUpdate(prevProps) {
         if (this.props.data !== prevProps.data) this.setState({flag: false})
     };
@@ -24,9 +30,9 @@ export default class ChangeServicesDoctors extends React.Component {
         this.props.form.map(el => {
             obj[el.name] = el.value
         });
-        this.props.postItem(this.props.categories? {
+        this.props.postItem(this.props.categories ? {
             ...obj,
-            speciality:this.props.specialityArray
+            speciality: this.props.specialityArray
         } : obj)
     };
 
@@ -38,9 +44,9 @@ export default class ChangeServicesDoctors extends React.Component {
             if (el.value !== '') obj[el.name] = el.value
         });
         this.props.putItem({
-            data: this.props.categories? {
+            data: this.props.categories ? {
                 ...obj,
-                speciality:this.props.specialityArray
+                speciality: this.props.specialityArray
             } : obj,
             id: this.props.itemId
         })
@@ -48,7 +54,8 @@ export default class ChangeServicesDoctors extends React.Component {
     };
 
     deleteItem = () => {
-        this.props.deleteItem(this.props.itemId)
+        this.props.deleteItem(this.props.itemId);
+        this.changeConfirm()
     };
 
     changeId = (e) => {
@@ -70,46 +77,53 @@ export default class ChangeServicesDoctors extends React.Component {
         } = this.props;
         let doctor = data.find(el => el._id === itemId);
         if (doctor) doctor = doctor.speciality;
-        console.log(data,specialityArray)
+        console.log(data, specialityArray);
         return (
             <div className="change-services-doctors">
                 {this.state.flag &&
-                <CheckBoxWindow categories={categories} specialityArray={specialityArray} changeFlag={this.changeFlag} changeSpecialityArray={changeSpecialityArray}/>}
+                <CheckBoxWindow categories={categories} specialityArray={specialityArray} changeFlag={this.changeFlag}
+                                changeSpecialityArray={changeSpecialityArray}/>}
                 <div className="admin-item">
                     <form className="form-doctors" onSubmit={itemId ? this.changeItem : this.postNewItem}>
                         {
                             form.map(el => {
                                 el.required = !itemId;
-                                    return (
-                                        <Input
-                                            key={el.id}
-                                            id={el.id}
-                                            el={el}
-                                            className = {el.className}
-                                            changeInputValues={changeInputValues}
-                                        />
-                                    )
+                                return (
+                                    <Input
+                                        key={el.id}
+                                        id={el.id}
+                                        el={el}
+                                        className={el.className}
+                                        changeInputValues={changeInputValues}
+                                    />
+                                )
                             })
                         }
-                        {categories && <button className = " btn servise-btn" onClick={this.changeFlag}>Выбрать сервисы</button>}
+                        {categories &&
+                        <button className=" btn servise-btn" onClick={this.changeFlag}>Выбрать сервисы</button>}
                         <input className="btn link"
                                type='submit'
-                               value={itemId ? 'Изменить'  : 'Добавить'}
+                               value={itemId ? 'Изменить' : 'Добавить'}
                         />
                     </form>
                 </div>
                 <div className="admin-item">
 
                     <CustomSelect
-                         label="Выбрать"
-                         options={data}
-                         clickOptionEvent={this.changeId}
+                        label="Выбрать"
+                        options={data}
+                        clickOptionEvent={this.changeId}
                     />
                     {itemId &&
-                    <button className="btn link" onClick={this.deleteItem} style={{backgroundColor: "#ff9774"}}>Удалить
+                    <button className="btn link" onClick={this.changeConfirm}
+                            style={{backgroundColor: "#ff9774"}}>Удалить
                         выбранный элемент</button>
                     }
                 </div>
+                {this.state.showConfirm &&
+                <ConfirmButton yes={this.deleteItem} no={this.changeConfirm}
+                               text={'Are you sure you want to Delete Item?'}/>
+                }
             </div>
         );
     }

src/components/Admin/ChangeUser.js

@@ -2,8 +2,12 @@ import React from 'react';
 
 
 import Input from "./Input"
+import ConfirmButton from "../ConfirmButton";
 
 export default class ChangeUser extends React.Component {
+    state = {
+        showConfirm: false,
+    };
 
     changeUserInput = (e) => {
         this.props.changeFindUserInput(e.target.value)
@@ -29,8 +33,13 @@ export default class ChangeUser extends React.Component {
         console.log(obj) //заменить на putUsers
     };
 
-    deleteUser = () => {
-        console.log(this.props.user._id) // заменить на deleteUser
+    changeConfirm = (action, text) => {
+        this.setState({showConfirm: !this.state.showConfirm})
+    };
+
+    deleteUser = (e) => {
+        console.log(this.props.user._id); // заменить на deleteUser
+        this.changeConfirm()
     };
 
     render() {
@@ -44,7 +53,7 @@ export default class ChangeUser extends React.Component {
         return (
             <div
                 style={{
-                    display:'flex'
+                    display: 'flex'
                 }}
             >
                 <div>
@@ -74,7 +83,7 @@ export default class ChangeUser extends React.Component {
                             )}
                         </form>
                         <button onClick={this.changeUser}>Change</button>
-                        <button onClick={this.deleteUser}>DELETE</button>
+                        <button onClick={this.changeConfirm}>DELETE</button>
                     </div>
                     }
 
@@ -87,6 +96,12 @@ export default class ChangeUser extends React.Component {
                 <div>
                     <p>User List will be here</p>
                 </div>
+                {
+                    this.state.showConfirm &&
+                    <ConfirmButton yes={this.deleteUser} no={this.changeConfirm}
+                                   text={'Are you sure you want to Delete User?'}
+                    />
+                }
             </div>
         );
     }

src/components/ConfirmButton.js

@@ -0,0 +1,28 @@
+import React, {Component} from 'react';
+
+class ConfirmButton extends Component {
+    render(){
+        const {yes,no,text} = this.props;
+        return(
+            <>
+                <div style={{
+                    position:'fixed',
+                    backgroundColor: 'tomato',
+                    left:'0',
+                    right:'0',
+                    width: '300px',
+                    height: '150px',
+                    margin: 'auto',
+                    zIndex:'2'
+                }}>
+                    <div>{text}</div>
+                    <button onClick={() => yes()}>Yes</button>
+                    <button onClick={() => no()}>No</button>
+                </div>
+                <div className = "wrap-check-off"  onClick={no}/>
+            </>
+        )
+    }
+}
+
+export default ConfirmButton;