bugfixing autocomplete and add initial table

src/container/ReportCarfm/RepotrCafrm.js

@@ -40,8 +40,6 @@ class RepotrCafrm extends Component {
         super(props)
         this.state = {
             dataTable: [],
-            listMonth: null,
-            listPeriodeMB: null,
             curMonth: 0,
             curYear: 0,
             data: false
@@ -54,7 +52,7 @@ class RepotrCafrm extends Component {
         this.setState({loading: true})
         await api.create().getMonthTransaction().then(response => {
             let dateNow = new Date()
-            dateNow.setMonth(dateNow.getMonth() - 1);
+            dateNow.setMonth(dateNow.getMonth());
             let month = format(dateNow, 'MMMM')
             if (response.data) {
                 if (response.data.status === "success") {
@@ -71,11 +69,14 @@ class RepotrCafrm extends Component {
                     };
                     console.log("month ");
                     console.log(defaultProps);
+                    console.log(monthData[0]);
                     let index = data.findIndex((val) => val.month_name == month)
                     this.setState({
                         listMonth: defaultProps,
                         month: index == -1 ? monthData[0] : monthData[index],
-                        loading: false
+                        curMonth: monthData[index]['month_id']
+                    }, async () => {
+                        await this.getPeriode()
                     })
                 } else {
                     this.setState({alert: true, messageAlert: response.data.message, tipeAlert: 'warning'}, () => {
@@ -93,7 +94,7 @@ class RepotrCafrm extends Component {
         })
     }
 
-    getPeriode() {
+    async getPeriode() {
         let currentYear = new Date().getFullYear()
         let MB = []
         for (var i = 2000; i <= currentYear; i++) {
@@ -108,10 +109,12 @@ class RepotrCafrm extends Component {
             getOptionLabel: (option) => option.name,
         };
 
-        this.setState({
+        await this.setState({
             listPeriodeMB: defaultPropsMB,
-            periodeMB: MB[MB.length - 1],
-            loading: false
+            periodeMB: MB[MB.length - 2],
+            curYear: currentYear,
+        }, async () => {
+            await this.getFromCallback()
         })
     }
 
@@ -152,7 +155,7 @@ class RepotrCafrm extends Component {
     async getFromCallback() {
         if (this.state.curYear >= 2000 && this.state.curMonth > 0) {
             let month = 0;
-            if(this.state.curMonth >= 1 && this.state.curMonth <= 9){
+            if(this.state.curMonth >= 1 && this.state.curMonth <= 9 && this.state.curMonth.toString().length == 1){
                 month = '0'+this.state.curMonth;
             }else{
                 month = this.state.curMonth;
@@ -165,10 +168,6 @@ class RepotrCafrm extends Component {
                 curMonth: month,
                 loading: false
             })
-        } else {
-            this.setState({
-                loading: false
-            })
         }
     }
 
@@ -191,16 +190,9 @@ class RepotrCafrm extends Component {
 
     async componentDidMount() {
         await this.getMonth();
-        await this.getPeriode();
-        this.setState({
-            loading: false
-        })
-        console.log("month");
-        console.log(this.state.listMonth);
-        console.log("year");
-        console.log(this.state.listPeriodeMB);
-        console.log("data")
-        console.log(this.state.dataTable);
+        // this.setState({
+        //     loading: false
+        // })
     }
 
     render() {
@@ -322,6 +314,8 @@ class RepotrCafrm extends Component {
                                 <Typography style={{fontSize: '12px', color: '#4b4b4b', margin: 10}}>Report Status &
                                     Approval Progress CAFRM</Typography>
                             </div>
+
+                            {this.state.curMonth > 0 && this.state.curYear > 2000 && !this.state.loading && (
                                 <div style={{minWidth: 'max-content', padding: '20px 20px 0px 20px'}}>
                                     <div style={{marginTop: 15, display: 'flex'}}>
                                         <Autocomplete
@@ -330,12 +324,15 @@ class RepotrCafrm extends Component {
                                             onChange={(event, newInputValue) => this.setState({
                                                 periodeMB: newInputValue,
                                                 curYear: newInputValue['value'],
-                                            loading: true
-                                        }, () => {this.getFromCallback()})}
+                                                loading: true,
+                                            }, async () => {
+                                                await this.getFromCallback()
+                                            })}
                                             disableClearable
                                             style={{minWidth: 210, marginRight: 20}}
-                                        renderInput={(params) => <TextField {...params} label="Periode" margin="normal"
-                                                                            style={{marginTop: 7}}/>}
+                                            renderInput={(params) => <TextField {...params} label="Periode" margin="normal" style={{marginTop: 7}}/>}
+                                            defaultValue={this.state.periodeMB}
+                                            value={this.state.periodeMB}
                                         />
                                         <Autocomplete
                                             {...this.state.listMonth}
@@ -344,14 +341,19 @@ class RepotrCafrm extends Component {
                                                 month: newInputValue,
                                                 curMonth: newInputValue['month_id'],
                                                 loading: true
-                                        }, () => {this.getFromCallback()})}
+                                            }, async () => {
+                                                await this.getFromCallback()
+                                            })}
                                             disableClearable
                                             style={{minWidth: 210, marginRight: 20}}
-                                        renderInput={(params) => <TextField {...params} label="Month" margin="normal"
-                                                                            style={{marginTop: 7}}/>}
+                                            renderInput={(params) => <TextField {...params} label="Month" margin="normal" style={{marginTop: 7}}/>}
+                                            value={this.state.month}
                                         />
+
                                     </div>
                                 </div>
+                            )}
+
                             <div style={{marginTop: 20, marginBottom: 20}}>
                                 <div style={{
                                     display: 'flex',