Updated the code for review comments

Updated the code for review comments

SAS/TMSS/frontend/tmss_webapp/src/routes/Timeline/reservation.create.js

@@ -49,9 +49,7 @@ export class ReservationCreate extends Component {
             durationError: false,
         };
         this.projects = [];                         // All projects to load project dropdown
-        this.stations = [];
-        this.reasons = [];
-        this.reservations = [];
+        this.reservationTemplates = [];
 
         // Validateion Rules
         this.formRules = {
@@ -65,29 +63,37 @@ export class ReservationCreate extends Component {
         this.saveReservation = this.saveReservation.bind(this);
         this.reset = this.reset.bind(this);
         this.cancelCreate = this.cancelCreate.bind(this);
+        this.initReservation = this.initReservation.bind(this);
     }
 
-    async componentDidMount(){
+    async componentDidMount() {
+        await this.initReservation();
+    }
+    /**
+     * Initialized the reservation template
+     */
+    async initReservation() {
         const promises = [  ProjectService.getProjectList(),
-                            ReservationService.getReservation(),
+                            ReservationService.getReservationTemplates(),
                         ]
-       await Promise.all(promises).then(responses => {
+       Promise.all(promises).then(responses => {
             this.projects = responses[0];
-            this.reservations = responses[1];
-        });    
-        let reservationTemplate = this.reservations.find(reason => reason.name === 'resource reservation');
-        let schema = {
-            properties: {}
-        };
-        if(reservationTemplate) {
-            schema = reservationTemplate.schema;
-        }
+            this.reservationTemplates = responses[1];
+
+            let reservationTemplate = this.reservationTemplates.find(reason => reason.name === 'resource reservation');
+            let schema = {
+                properties: {}
+            };
+            if(reservationTemplate) {
+                schema = reservationTemplate.schema;
+            }
+            this.setState({
+                paramsSchema: schema,
+                isLoading: false,
+                reservationTemplate: reservationTemplate,
+            });
+            });    
         
-        this.setState({
-            paramsSchema: schema,
-            isLoading: false,
-            reservationTemplate: reservationTemplate,
-        });
     }
     
     /**
@@ -96,23 +102,20 @@ export class ReservationCreate extends Component {
      * @param {object} value 
      */
     setReservationParams(key, value) {
-        this.setState({ 
-            touched: { 
-                ...this.state.touched,
-                [key]: true
-            }
-        });
+         
         let reservation = this.state.reservation;
         reservation[key] = value;
-        this.setState({reservation: reservation, validForm: this.validateForm(key), validEditor: this.validateEditor()});
-        this.validateEditor();
+        this.setState({reservation: reservation, validForm: this.validateForm(key), validEditor: this.validateEditor(),touched: { 
+            ...this.state.touched,
+            [key]: true
+        }});
     }
 
      /**
      * This function is mainly added for Unit Tests. If this function is removed Unit Tests will fail.
      */
     validateEditor() {
-        return this.validEditor && !this.state.durationError? true : false;
+        return this.validEditor;
     }
 
     /**
@@ -141,19 +144,17 @@ export class ReservationCreate extends Component {
         this.setState({reservation: reservation, validForm: this.validateForm(key), durationError: false});
     }
      
+    /**
+     * Validate Duration, it allows max 99:59:59
+     * @param {*} duration 
+     */
     validateDuration(duration) {
         const splitOutput = duration.split(':');
         if (splitOutput.length < 3) {
             return false;
-        }   else {
-              if (parseInt(splitOutput[1])>59 || parseInt(splitOutput[2])>59) {
-                  return false;
-              }
-              const timeValue = parseInt(splitOutput[1]*60) + parseInt(splitOutput[2]);
-              if (timeValue !== 'NaN' && timeValue > 3600) {
-                  return false;
-              }
-          }
+        } else if (parseInt(splitOutput[1])>59 || parseInt(splitOutput[2])>59) {
+            return false;
+        }
         return true;
     }
 
@@ -182,7 +183,7 @@ export class ReservationCreate extends Component {
             } else {
 
             }
-        }   else {
+        }  else {
             errors = {};
             validFields = {};
             for (const fieldName in this.formRules) {
@@ -216,14 +217,14 @@ export class ReservationCreate extends Component {
     saveReservation(){
         let reservation = this.state.reservation;
         let project = this.projects.find(project => project.name === reservation.project);
-        reservation['duration'] = ( reservation['duration'] === ''? 0: UnitService.getHHmmssToSecs(reservation['duration']));
+        reservation['duration'] = ( reservation['duration'] === ''? null: UnitService.getHHmmssToSecs(reservation['duration']));
         reservation['project']= project.url;
-        reservation['specifications_template']= this.reservations[0].url;
+        reservation['specifications_template']= this.reservationTemplates[0].url;
         reservation['specifications_doc']= this.paramsOutput;
         reservation = ReservationService.saveReservation(reservation); 
         if (reservation && reservation !== null){
             const dialog = {header: 'Success', detail: 'Reservation is created successfully. Do you want to create another Reservation?'};
-            this.setState({ dialogVisible: true, dialog: dialog})
+            this.setState({ dialogVisible: true, dialog: dialog,  paramsOutput: {}})
         }  else {
             this.growl.show({severity: 'error', summary: 'Error Occured', detail: 'Unable to save Reservation'});
         }
@@ -233,24 +234,26 @@ export class ReservationCreate extends Component {
      * Reset function to be called when user wants to create new Reservation
      */
     reset() {
+        let tmpReservation= { 
+            name: '',
+            description: '', 
+            start_time: '',
+            duration: '',
+            project: '',
+        }
         this.setState({
             dialogVisible: false,
             dialog: { header: '', detail: ''},      
             errors: [],
-            reservation: { 
-                name: '',
-                description: '', 
-                start_time: '',
-                duration: '',
-                project: '',
-            },
-            paramsSchema: this.state.paramsSchema, 
+            reservation: tmpReservation,
+            paramsSchema: null, 
             paramsOutput: null,
             validEditor: false,
             validFields: {},
             touched:false,
-            stationGroup: []
+            stationGroup: [],
         });
+        this.initReservation();
     }
 
       /**
@@ -341,12 +344,11 @@ export class ReservationCreate extends Component {
                                             value={this.state.reservation.duration} 
                                             mask="99:99:99" 
                                             placeholder="HH:mm:ss" 
-                                            className="inputmask" 
                                             onChange= {e => this.setParams('duration',e.value)}
                                             ref={input =>{this.input = input}}
                                             />
                                         <label className="error">
-                                            {this.state.durationError ? 'Invalid duration' : ""}
+                                            {this.state.durationError ? 'Invalid duration, Maximum:99:59:59.' : ""}
                                         </label>
                                     </div>     
                                 </div>
@@ -388,7 +390,7 @@ export class ReservationCreate extends Component {
 
                 {/* Dialog component to show messages and get input */}
                 <div className="p-grid" data-testid="confirm_dialog">
-                    <Dialog header={'this.state.dialog.header'} visible={this.state.dialogVisible} style={{width: '25vw'}} inputId="confirm_dialog"
+                    <Dialog header={this.state.dialog.header} visible={this.state.dialogVisible} style={{width: '25vw'}} inputId="confirm_dialog"
                             modal={true}  onHide={() => {this.setState({dialogVisible: false})}} 
                             footer={<div>
                                 <Button key="back" onClick={() => {this.setState({dialogVisible: false, redirect: `/su/timelineview`});}} label="No" />

SAS/TMSS/frontend/tmss_webapp/src/services/reservation.service.js

 const axios = require('axios');
 
-//axios.defaults.baseURL = 'http://192.168.99.100:8008/api';
 axios.defaults.headers.common['Authorization'] = 'Basic dGVzdDp0ZXN0';
 
 const ReservationService = {
-    getReservation: async function () {
+    getReservationTemplates: async function () {
         try {
             const url = `/api/reservation_template`;
             const response = await axios.get(url);