Time filed updated

package.json

@@ -7,6 +7,8 @@
     "@testing-library/react": "^9.3.2",
     "@testing-library/user-event": "^7.1.2",
     "bootstrap": "^4.4.1",
+    "moment": "^2.25.3",
+    "moment-timezone": "^0.5.28",
     "react": "^16.13.1",
     "react-bootstrap": "^1.0.1",
     "react-date-picker": "^8.0.1",

src/App.css

@@ -1,7 +1,24 @@
 .App {
   text-align: center;
   padding: 20%;
+  display: block;
 
+}
+.dateandtime-picker-box{
+  display: inline-block;
+  display: flex;
+  border: 1px solid rgb(212, 209, 209);
+  border-radius: 5px;
+  margin-bottom: 10px;
+
+}
+.react-datepicker-wrapper {
+  display: inline-block;
+  width: 100%;
+  height: 30px;
+ font-weight: normal;
+  border-radius: 5px;
+
 }
 .form-submit-button {
   margin-top: 20px;
@@ -15,11 +32,5 @@
   text-shadow:none;
 
   }
-.date-picker{
-  height: 30px;
-  width: 100%;
-  border: 1px solid rgb(212, 209, 209);
-  border-radius: 5px;
-
-}
+
 

src/App.js

@@ -1,8 +1,11 @@
 import React from 'react';
 import './App.css';
 import Form from './components/Form'
+import moment from 'moment-timezone'
 
 function App() {
+  moment.tz.setDefault('Asia/Kuala_Lumpur');
+
   return (
     <div className="App">
       <Form />

src/components/DateField.js

@@ -3,6 +3,7 @@ import DatePicker from 'react-datepicker'
 import "react-datepicker/dist/react-datepicker.css";
 import { addDays } from 'date-fns';
 import '../App.css';
+import moment from 'moment-timezone'
 
 
 
@@ -15,12 +16,15 @@ class  DateField  extends React.Component {
     }
   }
   componentDidMount(){
+
+
     fetch('http://localhost:3000/disabled-dates')
     .then(res => res.json())
     .then(json => {
       this.setState({
         dates: json,
       })
+      console.log(json)
     })
 
   }
@@ -29,26 +33,45 @@ class  DateField  extends React.Component {
     startDate: new Date()
   };
   handleChange = date => {
+
     this.setState({
       startDate: date
     });
+
+    date=moment(date).tz("Asia/Kuala_Lumpur").format("YYYY-MM-DD")
+    const {onDateSelected}=this.props
+    onDateSelected(date)
 
   };
- 
+
 
 render(){
-
+  moment.tz.setDefault('Asia/Kuala_Lumpur');
   return (
-    <div>
+    <div className="dateandtime-picker-box">
       <DatePicker
         autoFocus={false}
         placeholderText="Date"
-        className="date-picker"
+        className="react-datepicker-wrapper"
         selected={this.state.startDate}
         onChange={this.handleChange}
         dateFormat='yyyy-MM-dd'
         minDate={new Date()}
-        filterDate={date => date.getDay() !== 7 && date.getDay() !== 0}     
+        filterDate={date => {
+
+
+
+          date=moment(date).tz("Asia/Kuala_Lumpur").format("YYYY-MM-DD")
+          return !this.state.dates.includes(date)
+          // let flag=false
+          // this.state.dates.forEach((ddate)=>{
+          //   let prev=new Date(ddate)
+          //   prev.setDate(prev.getDate()-1)
+          //   flag=flag || date.toJSON().slice(0,10) === prev.toJSON().slice(0,10)
+          // })
+          // return !flag
+
+        }}     
         isClearable
         maxDate={addDays(new Date(), 21)}
 

src/components/Form.js

@@ -6,42 +6,75 @@ import TimeField from './TimeField'
 
 
 export default class Form extends Component {
+  state = {
+    selectedDate: null,
+    selectedTime:null
+  }
 
   async onSubmit (e){
     try {
 
       let result = await fetch('http://localhost:3000/inspection',{
-          method: 'post',
+          method: 'POST',
           header: {
             'Content-type': 'application/json'
           },
           body: JSON.stringify({
-            "date": "2020-05-22",
-            "time": "4.30 PM"
+            date: 'selectedDate',
+            time: 'selectedTime'
           })
       });
       console.log(result)
     } catch(e){
       console.log(e)
     }
   }
-
+  onDateSelected =(selectedDate) =>{
+    this.setState({
+      selectedDate: selectedDate
+    })
+    // console.log("FF "+ new Date(selectedDate).toJSON())
+  }
+
+  onTimeSelected =(selectedTime) =>{
+    this.setState({
+      selectedTime: selectedTime
+    })
+    console.log("FF "+ selectedTime)
+  }
 
   render() {
-
-    return (
-      <div>
-      <DateField />
-      <TimeField />
-      <button 
-
-        className="form-submit-button" 
-        onClick ={e => this.onSubmit(e)} 
-      >
-        Submit
-      </button>
-      </div>
-
+    // let sqlDate=new Date(this.state.selectedDate).toJSON().slice(0,10)
+    if(this.state.selectedDate !== null )
+      return (
+        <div>
+        <DateField onDateSelected={this.onDateSelected}/>
+        <TimeField onTimeSelected={this.onTimeSelected}  selectedDate={this.state.selectedDate}/>
+        {this.state.selectedTime!==null &&
+        <button 
+          className="form-submit-button" 
+          onClick ={e => this.onSubmit(e)} 
+        >
+          Submit
+        </button>
+        }
+        </div>
+
+      );
+    else
+      return (
+        <div>
+        <DateField onDateSelected={this.onDateSelected}/>
+        {/* <TimeField />
+        <button 
+          className="form-submit-button" 
+          onClick ={e => this.onSubmit(e)} 
+        >
+          Submit
+        </button> */}
+        </div>
+
     );
+
   }
 }

src/components/TimeField.js

@@ -1,13 +1,14 @@
 import React, { Component } from 'react'
 import Select from 'react-select'
+import '../App.css';
 
-const options = [
-    {label: '4:30 PM', value:'0'},
-    {label: '5:00 PM', value:'1'},
-    {label: '5:30 PM', value:''}
+const options =[
+  {label:'9:00 AM', value:'0'},
+  {label:'9:30 AM', value:'1'},
+  {label:'10:00 AM', value:'2'},
+  {label:'10:30 AM', value:'3'}
 
-  ];
-
+]
 export default class TimeField extends Component {
     constructor(props){
         super(props);
@@ -17,36 +18,44 @@ export default class TimeField extends Component {
         }
       }
       componentDidMount(){
-        fetch('http://localhost:3000/available-slots/2020-05-11')
+        const {selectedDate}=this.props
+        console.log("Time ++ "+selectedDate)
+        fetch('http://localhost:3000/available-slots/'+selectedDate)
         .then(res => res.json())
         .then(json => {
+          console.log(json)
           this.setState({
             times: json,
           })
         })
       }
-    state = {
-        selectedOption: null,
+
+      state = {
+        selectedTime: new Date()
+
       };
-      handleChange = selectedOption => {
-        this.setState({ selectedOption });
-        console.log(`Option selected:`, selectedOption);
+
+      handleChange = selectedTime => {
+        this.setState({ selectedTime });
+        console.log(`Option selected:`, selectedTime)
       };
 
     render() {
-        console.log(this.times)
-        const { selectedOption } = this.state;
+      const { selectedTime } = this.state;
           return (
-            <div style={{marginTop: 20}}>
+            <div>
             <Select 
-                isSearchable={false} 
-                placeholder={'Time'}
-                options ={options}
-                value={selectedOption}
-                onChange={this.handleChange}
-            />
+
+              isSearchable={false}
+              value={selectedTime}
+              onChange={this.handleChange}
+              options={options}
+              placeholder="Time"
+              >
+
+            </Select>
             </div>
+
           )
-
     }
 }