toast di upload + parameter

src/container/MasterData/Parameter/Parameter.js

@@ -2,7 +2,8 @@ import React, { Component } from 'react';
 import { createMuiTheme, MuiThemeProvider } from '@material-ui/core/styles';
 import Images from '../../../assets/Images';
 import MUIDataTable from "mui-datatables";
-import { InputBase } from "@material-ui/core";
+import { InputBase, Snackbar, withStyles } from "@material-ui/core";
+import MuiAlert from '@material-ui/lab/Alert';
 import CreateParameter from '../Parameter/CreateParameter';
 import api from '../../../api';
 import PopUpFailedSave from "../../../library/PopUpFailedSave";
@@ -15,6 +16,9 @@ const getMuiTheme = () => createMuiTheme(ct.customTable());
 const options = ct.customOptions();
 const options2 = ct.customOptions2();
 
+const Alert = withStyles({
+})((props) => <MuiAlert elevation={6} variant="filled" {...props} />);
+
 export default class Parameter extends Component {
     constructor(props) {
         super(props)
@@ -24,7 +28,10 @@ export default class Parameter extends Component {
             visibleParameter: true,
             popupError: false,
             data: [],
-            dataTable: []
+            dataTable: [],
+            alert: false,
+            tipeAlert: '',
+            messageAlert: ''
         }
         this.fileHandler = this.fileHandler.bind(this);
     }
@@ -76,11 +83,15 @@ export default class Parameter extends Component {
     updateParameter = (payload) => {
         this.setState({ visibleEdit: false })
         api.create().updateParameter(payload).then(response => {
-            if (response.data.status == 'success') {
-                this.getAllParameter()
-                alert(response.data.message)
+            if (response.data) {
+                if (response.data.status == 'success') {
+                    this.getAllParameter()
+                    this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'success' })
+                } else {
+                    this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'warning' })
+                }
             } else {
-                alert(response.data.message)
+                this.setState({ alert: true, messageAlert: response.problem, tipeAlert: 'error' })
             }
         })
     }
@@ -88,11 +99,15 @@ export default class Parameter extends Component {
     createParameter = (payload) => {
         this.setState({ visibleCreate: false })
         api.create().createParameter(payload).then(response => {
-            if (response.data.status == 'success') {
-                this.getAllParameter()
-                alert(response.data.message)
+            if (response.data) {
+                if (response.data.status == 'success') {
+                    this.getAllParameter()
+                    this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'success' })
+                } else {
+                    this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'warning' })
+                }
             } else {
-                alert(response.data.message)
+                this.setState({ alert: true, messageAlert: response.problem, tipeAlert: 'error' })
             }
         })
     }
@@ -501,14 +516,22 @@ export default class Parameter extends Component {
             if (response.data) {
                 if (response.data.status === "success") {
                     console.log(response)
-                    alert(response.data.message)
                     this.getAllParameter()
                     this.setState({ visibleParameter: true })
+                    this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'success' })
+                } else {
+                    this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'warning' })
                 }
+            } else {
+                this.setState({ alert: true, messageAlert: response.problem, tipeAlert: 'error' })
             }
         })
     }
 
+    closeAlert() {
+        this.setState({ alert: false })
+    }
+
     render() {
         const columns = [{
             name: "Action",
@@ -524,7 +547,7 @@ export default class Parameter extends Component {
                                     borderColor: 'transparent'
                                 }}
                                 onClick={() => this.openPopUp(tableMeta.rowData, 'edit')}
-                                // onClick={()=> console.log(tableMeta)}
+                            // onClick={()=> console.log(tableMeta)}
                             >
                                 <img src={Images.editCopy} />
                             </button>
@@ -643,6 +666,11 @@ export default class Parameter extends Component {
             <div style={{ height: this.props.height }}>
                 {/* <Row> */}
                 <div className={"main-color"} style={{ height: 199, width: '100%' }} />
+                <Snackbar open={this.state.alert} autoHideDuration={6000} onClose={() => this.closeAlert()}>
+                    <Alert onClose={() => this.closeAlert()} severity={this.state.tipeAlert}>
+                        {this.state.messageAlert}
+                    </Alert>
+                </Snackbar>
                 {this.state.visibleParameter === true ?
                     <div>
                         <div style={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-between', paddingRight: 25, paddingLeft: 25, marginTop: -150 }}>

src/container/MasterData/UnitBisnis.js

@@ -200,10 +200,10 @@ export default class UnitBisnis extends Component {
                     })
                     this.setState({ dataTable: listData, listData: response.data.data })
                 } else {
-                    alert(response.data.message)
+                    this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'warning' })
                 }
             } else {
-                this.setState({ dataTable: [] })
+                this.setState({ alert: true, messageAlert: response.problem, tipeAlert: 'error', dataTable: [] })
             }
         })
     }
@@ -229,14 +229,18 @@ export default class UnitBisnis extends Component {
         }
         api.create().searchUnitBisnis(body).then(response => {
             // console.log(response.data);
-            if (response.data.status == 'success') {
-                let data = response.data.data
-                let listData = data.map((item, index) => {
-                    return [index, item.business_unit_id, item.business_unit_name, item.status]
-                })
-                this.setState({ dataTable: listData, listData: response.data.data })
+            if (response.data) {
+                if (response.data.status == 'success') {
+                    let data = response.data.data
+                    let listData = data.map((item, index) => {
+                        return [index, item.business_unit_id, item.business_unit_name, item.status]
+                    })
+                    this.setState({ dataTable: listData, listData: response.data.data })
+                } else {
+                    this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'warning' })
+                }
             } else {
-                alert(response.data.message)
+                this.setState({ alert: true, messageAlert: response.problem, tipeAlert: 'error' })
             }
         })
     }
@@ -244,23 +248,32 @@ export default class UnitBisnis extends Component {
     updateUnitBisnis = (payload) => {
         this.setState({ visibleEdit: false })
         api.create().updateUnitBisnis(payload).then(response => {
-            if (response.data.status == 'success') {
-                this.getData()
-                this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'success' })
+            if (response.data) {
+                if (response.data.status == 'success') {
+                    this.getData()
+                    this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'success' })
+                } else {
+                    this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'warning' })
+                }
             } else {
-                this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'warning' })
+                this.setState({ alert: true, messageAlert: response.problem, tipeAlert: 'error' })
             }
+
         })
     }
 
     createUnitBisnis = (payload) => {
         this.setState({ visibleCreate: false })
         api.create().createUnitBisnis(payload).then(response => {
-            if (response.data.status == 'success') {
-                this.getData()
-                this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'success' })
+            if (response.data) {
+                if (response.data.status == 'success') {
+                    this.getData()
+                    this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'success' })
+                } else {
+                    this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'warning' })
+                }
             } else {
-                this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'warning' })
+                this.setState({ alert: true, messageAlert: response.problem, tipeAlert: 'error' })
             }
         })
     }
@@ -305,6 +318,8 @@ export default class UnitBisnis extends Component {
                 } else {
                     this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'warning' })
                 }
+            } else {
+                this.setState({ alert: true, messageAlert: response.problem, tipeAlert: 'error' })
             }
         })
     }

src/library/Upload.js

@@ -2,8 +2,12 @@ import React, { Component, createRef } from "react"
 import Dropzone from 'react-dropzone'
 import LinearProgress from '@material-ui/core/LinearProgress'
 import Images from "../assets/Images"
+import MuiAlert from '@material-ui/lab/Alert';
+import { withStyles, Snackbar } from "@material-ui/core";
 
 const dropzoneRef = createRef()
+const Alert = withStyles({
+})((props) => <MuiAlert elevation={6} variant="filled" {...props} />);
 
 class Upload extends Component {
     constructor(props) {
@@ -19,7 +23,9 @@ class Upload extends Component {
             iconButtonUpload: 'fa fa-1x fa-upload',
             uploadProgress: false,
             percentage: '0',
-            completed: '0'
+            completed: '0',
+            alert: false,
+            alertMessage: ''
         }
     }
 
@@ -64,7 +70,8 @@ class Upload extends Component {
                 uploadProgress: false,
                 percentage: '0'
             })
-            alert("Unsupported Media Type")
+            this.setState({ alertMessage: "Unsupported Media Type", alert: true })
+            // alert("Unsupported Media Type")
         }
     }
 
@@ -85,15 +92,20 @@ class Upload extends Component {
         // console.log(strState);
 
         if (strProps.includes(strState)) {
-            if (this.state.sizeFile < 1000000) {
+            if (this.state.sizeFile < 1000) {
                 this.props.onUpload()
             } else {
-                alert('File Tidak Boleh Lebih Dari 1MB')
+                this.setState({ alertMessage: 'File Tidak Boleh Lebih Dari 1MB', alert: true })
+                // alert('File Tidak Boleh Lebih Dari 1MB')
             }
         } else {
-            alert('File Tidak Mendukung')
+            this.setState({ alertMessage: 'File Tidak Mendukung', alert: true })
+            // alert('File Tidak Mendukung')
         }
+    }
 
+    closeAlert() {
+        this.setState({ alert: false })
     }
 
     render() {
@@ -102,6 +114,11 @@ class Upload extends Component {
                 <Dropzone ref={dropzoneRef} onDrop={this.onDrop}>
                     {({ getRootProps, getInputProps }) => (
                         <div>
+                            <Snackbar open={this.state.alert} autoHideDuration={6000} onClose={() => this.closeAlert()}>
+                                <Alert onClose={() => this.closeAlert()} severity={"warning"}>
+                                    {this.state.alertMessage}
+                                </Alert>
+                            </Snackbar>
                             <div className="upload-file">
 
                                 {/* label */}