refactor(devices): use the new Confirmation component

Signed-off-by: Gianfranco Manganiello <gmanganiello@teclib.com>

Author: Gianfranco97

src/containers/Applications/components/ApplicationsList.js

@@ -266,6 +266,7 @@ export default class ApplicationsList extends PureComponent {
    * handle delete selected application
    * @function handleSelectionChanged
    * @param {object} eventObject
+   * @async
    */
   handleDelete = async (isOK) => {
     try {

src/containers/Devices/components/DevicesList.js

@@ -84,6 +84,8 @@ export default class DevicesList extends PureComponent {
         page: 1,
         count: 15,
       },
+      hideContentDialog: true,
+
     }
   }
 
@@ -258,12 +260,19 @@ export default class DevicesList extends PureComponent {
   }
 
   /**
-   * handle delete to selected device
-   * @function handleDelete
+   * Show the content dialog
+   * @function showContentDialog
+   */
+  showContentDialog = () => this.setState({ hideContentDialog: false })
+
+  /**
+   * handle delete selected devices
+   * @function handleSelectionChanged
+   * @param {object} eventObject
+   * @async
    */
-  handleDelete = async () => {
+  handleDelete = async (isOK) => {
     try {
-      const isOK = await Confirmation.isOK(this.contentDialog)
       if (isOK) {
         const itemListToDelete = this.props.selectedItems.map(item => ({
           id: item['PluginFlyvemdmAgent.id'],
@@ -369,7 +378,7 @@ export default class DevicesList extends PureComponent {
         label={I18n.t('commons.delete')}
         priority={0}
         disabled={this.props.selectedItems.length === 0}
-        onClick={this.handleDelete}
+        onClick={this.showContentDialog}
       />
     )
 
@@ -469,9 +478,19 @@ export default class DevicesList extends PureComponent {
         </ReactWinJS.ToolBar>
         {listComponent}
         <Confirmation
+          hideDialog={this.state.hideContentDialog}
           title={I18n.t('devices.delete')}
           message={`${this.props.selectedItems.length} ${I18n.t('devices.title')}`}
-          reference={(el) => { this.contentDialog = el }}
+          isOK={() => {
+            this.setState({ hideContentDialog: true }, () => {
+              this.handleDelete(true)
+            })
+          }}
+          cancel={() => {
+            this.setState({ hideContentDialog: true }, () => {
+              this.handleDelete(false)
+            })
+          }}
         />
       </React.Fragment>
     )

src/containers/Devices/components/Sections/Main.js

@@ -54,6 +54,7 @@ export default class Main extends PureComponent {
       update: this.props.update,
       data: undefined,
       sendingPing: false,
+      hideContentDialog: true,
     }
   }
 
@@ -108,39 +109,42 @@ export default class Main extends PureComponent {
     }
   }
 
+  /**
+   * Show the content dialog
+   * @function showContentDialog
+   */
+  showContentDialog = () => this.setState({ hideContentDialog: false })
+
+
   /**
    * handle delete selected device
-   * @async
    * @function handleRefresh
    */
   handleDelete = async () => {
-    const isOK = await Confirmation.isOK(this.contentDialog)
-    if (isOK) {
-      this.setState({
-        isLoading: true,
-      })
+    this.setState({
+      isLoading: true,
+    })
 
-      this.props.glpi.deleteItem({
-        itemtype: itemtype.PluginFlyvemdmAgent,
-        id: this.state.id,
-      })
-        .then(() => {
-          this.props.toast.setNotification({
-            title: I18n.t('commons.success'),
-            body: I18n.t('notifications.device_successfully_removed'),
-            type: 'success',
-          })
-          this.props.changeSelectionMode(false)
-          this.props.history.push(`${publicURL}/app/devices`)
-          this.props.changeAction('reload')
-        })
-        .catch((error) => {
-          this.props.toast.setNotification(this.props.handleMessage({
-            type: 'alert',
-            message: error,
-          }))
+    this.props.glpi.deleteItem({
+      itemtype: itemtype.PluginFlyvemdmAgent,
+      id: this.state.id,
+    })
+      .then(() => {
+        this.props.toast.setNotification({
+          title: I18n.t('commons.success'),
+          body: I18n.t('notifications.device_successfully_removed'),
+          type: 'success',
         })
-    }
+        this.props.changeSelectionMode(false)
+        this.props.history.push(`${publicURL}/app/devices`)
+        this.props.changeAction('reload')
+      })
+      .catch((error) => {
+        this.props.toast.setNotification(this.props.handleMessage({
+          type: 'alert',
+          message: error,
+        }))
+      })
   }
 
   /**
@@ -266,7 +270,7 @@ export default class Main extends PureComponent {
                   <Icon
                     iconName="Delete"
                     style={{ marginRight: '20px', fontSize: '20px' }}
-                    onClick={this.handleDelete}
+                    onClick={this.showContentDialog}
                   />
                 </div>
               </div>
@@ -289,9 +293,15 @@ export default class Main extends PureComponent {
           </div>
 
           <Confirmation
+            hideDialog={this.state.hideContentDialog}
             title={I18n.t('devices.delete')}
             message={this.state.data.name}
-            reference={(el) => { this.contentDialog = el }}
+            isOK={() => {
+              this.setState({ hideContentDialog: true }, () => {
+                this.handleDelete()
+              })
+            }}
+            cancel={() => this.setState({ hideContentDialog: true })}
           />
         </ContentPane>
       )