create item report

src/container/MasterData/formReportItems/CreateReportItems.js

 import React, { Component } from 'react';
-import { TextField, Typography } from '@material-ui/core';
+import { TextField, Typography, Snackbar, withStyles } from '@material-ui/core';
 import * as R from 'ramda';
 import api from '../../../api';
 import Autocomplete from '@material-ui/lab/Autocomplete';
@@ -7,6 +7,9 @@ import { titleCase } from '../../../library/Utils';
 import format from "date-fns/format";
 import { DatePicker } from '@material-ui/pickers';
 import Images from '../../../assets/Images';
+import MuiAlert from '@material-ui/lab/Alert';
+const Alert = withStyles({
+})((props) => <MuiAlert elevation={6} variant="filled" {...props} />);
 
 export default class CreateReportItems extends Component {
     constructor(props) {
@@ -53,7 +56,10 @@ export default class CreateReportItems extends Component {
             disabledFormula: true,
             disabledCondt: true,
             disabledValue: true,
-            options: ['WARNING', 'STOPPER']
+            options: ['WARNING', 'STOPPER'],
+            alert: false,
+            tipeAlert: '',
+            messageAlert: ''
 
         }
     }
@@ -196,7 +202,9 @@ export default class CreateReportItems extends Component {
 
     getInputType() {
         api.create().getInputType().then((response) => {
-            console.log(response.data)
+            // console.log(response.data)
+            if(response.data) {
+
                 if (response.data.status === 'success') {
                     let data = response.data.data
                     let inputData = data.map((item) => {
@@ -211,7 +219,11 @@ export default class CreateReportItems extends Component {
                     };
                     this.setState({ listInputType: defaultProps, inputData: response.data.data })
                 } else {
-                alert(response.data.message)
+                    this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'warning' })
+                    // alert(response.data.message)
+                }
+            } else {
+                this.setState({ alert: true, messageAlert: response.problem, tipeAlert: 'error' })
             }
         })
     }
@@ -219,6 +231,7 @@ export default class CreateReportItems extends Component {
     getPerusahaan() {
         api.create().getPerusahaanActive().then((response) => {
             // console.log(response)
+            if (response.data) {
                 if (response.data.status === 'success') {
                     let data = response.data.data
                     let companyData = data.map((item) => {
@@ -233,7 +246,11 @@ export default class CreateReportItems extends Component {
                     };
                     this.setState({ listCompany: defaultProps, companyData: response.data.data })
                 } else {
-                alert(response.data.message)
+                    this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'warning' })
+                    // alert(response.data.message)
+                }
+            } else {
+                this.setState({ alert: true, messageAlert: response.problem, tipeAlert: 'error' })
             }
         })
     }
@@ -241,6 +258,7 @@ export default class CreateReportItems extends Component {
     getReportType() {
         api.create().getReportType().then((response) => {
             // console.log(response)
+            if (response.data) {
                 if (response.data.status === 'success') {
                     let data = response.data.data
                     let reportTypeData = data.map((item) => {
@@ -255,7 +273,11 @@ export default class CreateReportItems extends Component {
                     };
                     this.setState({ listReportType: defaultProps, reportTypeData: response.data.data })
                 } else {
-                alert(response.data.message)
+                    // alert(response.data.message)
+                    this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'warning' })
+                }
+            } else {
+                this.setState({ alert: true, messageAlert: response.problem, tipeAlert: 'error' })
             }
         })
     }
@@ -267,7 +289,9 @@ export default class CreateReportItems extends Component {
                 "company_id": this.state.company.company_id
             }
             api.create().getReportParent(payload).then((response) => {
-                console.log(response)
+                // console.log(response)
+                if (response.data) {
+
                     if (response.data.status === 'success') {
                         let data = response.data.data
                         let parentData = data.map((item) => {
@@ -282,7 +306,11 @@ export default class CreateReportItems extends Component {
                         };
                         this.setState({ listParent: defaultProps, parentData: response.data.data })
                     } else {
-                    alert(response.data.message)
+                        this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'warning' })
+                        // alert(response.data.message)
+                    }
+                } else {
+                    this.setState({ alert: true, messageAlert: response.problem, tipeAlert: 'error' })
                 }
             })
         }
@@ -327,6 +355,11 @@ export default class CreateReportItems extends Component {
                             </button>
                         </div>
                     </div>
+                    <Snackbar open={this.state.alert} autoHideDuration={6000} onClose={() => this.closeAlert()}>
+                        <Alert onClose={() => this.closeAlert()} severity={this.state.tipeAlert}>
+                            {this.state.messageAlert}
+                        </Alert>
+                    </Snackbar>
 
                     <div className="grid grid-2x grid-mobile-none gap-15px" style={{ paddingLeft: 20, paddingRight: 20 }}>
                         <div className="column-1">