Add confirm dialog

src/App.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import './App.css';
 import { Button, createMuiTheme, ThemeProvider } from '@material-ui/core';
-import { ApplicationDialogsProvider, matAlert } from './ui/widgets/DialogsProvider';
+import { ApplicationDialogsProvider, matAlert, matConfirm } from './ui/widgets/DialogsProvider';
 
 function App() {
   const darkTheme = createMuiTheme({
@@ -19,6 +19,7 @@ function App() {
         {/* TODO : holder of login state */}
 
         <Button onClick={()=>matAlert("heloo!!")}>alert</Button>
+        <Button onClick={()=>matConfirm("heloo!!").then((r) => matAlert("response: " + r))}>confirm</Button>
       </div>
     </ThemeProvider>
   );

src/ui/widgets/DialogsProvider.tsx

@@ -15,27 +15,41 @@ interface AppDiagProvState {
     alertMessage : string,
     showAlert : boolean,
 
+    // Confirm dialog
+    confirmMessage: string,
+    showConfirm: boolean,
+    resolveConfirm ?: (confirmed: boolean) => void,
+
 }
 
 export class ApplicationDialogsProvider extends React.Component<{}, AppDiagProvState> {
+    private acceptConfirm: () => void;
+    private rejectConfirm: () => void;
 
     constructor(props: any) {
         super(props);
 
-        this.setState({
+        this.state = {
 
             // Alert dialog
             alertMessage: "",
             showAlert: false,
-        });
+
+            showConfirm: false,
+            confirmMessage: "",
+            resolveConfirm: undefined,
+        };
 
         this.handleCloseAlert = this.handleCloseAlert.bind(this);
+
+        this.acceptConfirm = this.handleCloseConfirm.bind(this, true);
+        this.rejectConfirm = this.handleCloseConfirm.bind(this, false);
     }
 
     showAlert(message: string) {
         this.setState({
             showAlert: true,
-            alertMessage: message
+            alertMessage: message,
         })
     }
 
@@ -43,6 +57,24 @@ export class ApplicationDialogsProvider extends React.Component<{}, AppDiagProvS
         this.setState({showAlert: false});
     }
 
+    showConfirm(message: string) : Promise<boolean> {
+        return new Promise((res, _rej) => {
+            this.setState({
+                showConfirm: true,
+                confirmMessage: message,
+                resolveConfirm: res
+            });
+        });
+    }
+
+    handleCloseConfirm(accept: boolean) {
+        this.setState({
+            showConfirm: false
+        });
+
+        this.state.resolveConfirm && this.state.resolveConfirm(accept);
+    }
+
     render() {
         cache = this;
 
@@ -70,6 +102,29 @@ export class ApplicationDialogsProvider extends React.Component<{}, AppDiagProvS
                     </Button>
                 </DialogActions>
             </Dialog>
+
+            {/* Confirm dialog */}
+            <Dialog
+                open={this.state.showConfirm}
+                onClose={this.rejectConfirm}
+                aria-labelledby="alert-dialog-title"
+                aria-describedby="alert-dialog-description"
+            >
+                <DialogTitle id="alert-dialog-title" style={{minWidth: "300px"}}>Confirm action</DialogTitle>
+                <DialogContent>
+                    <DialogContentText id="alert-dialog-description">
+                    {this.state.confirmMessage}
+                    </DialogContentText>
+                </DialogContent>
+                <DialogActions>
+                    <Button onClick={this.rejectConfirm} color="default">
+                        Cancel
+                    </Button>
+                    <Button onClick={this.acceptConfirm} color="default">
+                        Confirm
+                    </Button>
+                </DialogActions>
+            </Dialog>
         </div>)
     }
 }
@@ -77,3 +132,7 @@ export class ApplicationDialogsProvider extends React.Component<{}, AppDiagProvS
 export function matAlert(msg: string) {
     cache.showAlert(msg);
 }
+
+export function matConfirm(msg: string) : Promise<boolean> {
+    return cache.showConfirm(msg);
+}