api calls for faq and contact

src/pages/Contacts.js

@@ -1,25 +1,94 @@
-import React, {Component} from 'react';
+import React, {Component, useState, useEffect} from 'react';
+import SiteService from '../svs/SiteService';
 
-class Contacts extends React.Component {
+class Contacts extends Component {
+  constructor(props){
+    super(props)
+
+    this.state = {
+      formData: {
+        name: '',
+        email: '',
+        country: '',
+        phone: '',
+        message: ''
+      },
+      loading: false,
+      submitError: null,
+      submitSuccess: false,
+    };
+  }
+
+  handleInputChange = (event) => {
+    const { name, value } = event.target;
+    this.setState((prevState) => ({
+      formData: {
+        ...prevState.formData,
+        [name]: value,
+      },
+    }));
+  };
+
+  handleSubmit = async(e) => {
+    e.preventDefault();
+    const apiCall = new SiteService();
+    const { formData } = this.state;
+
+    this.setState({ loading: true });
+
+    if(!formData.name && !formData.email && !formData.message) return;
+
+    console.log(formData)
+
+    try {
+      await apiCall.contactData(formData)
+
+      console.log('Success')
+
+        this.setState({
+          formData: {
+            name: '',
+            email: '',
+            country: '',
+            phone: '',
+            message: ''
+          },
+          loading: false,
+          submitError: null,
+          submitSuccess: false,
+        });
+
+      // if(res.status == 200){
+        
+      // } else {
+      //   throw new Error('Error submitting form');
+      // }
+    } catch (error) {
+      this.setState({
+        loading: false,
+        submitSuccess: false,
+        submitError: error,
+      });
+      console.log(error)
+    }
+  }
+
+  
     render() {
+      const {formData, loading, submitError, submitSuccess} = this.state
+      console.log(submitSuccess)
         return(
             <div>
-
-
-        {/* PRELOADER SPINNER
-		============================================= */}	
+        {/* PRELOADER SPINNER */}	
         <div id="loader-wrapper">
           <div id="loading">
             <span className="cssload-loader"><span className="cssload-loader-inner" /></span>
           </div>
         </div>
-        {/* PAGE CONTENT
-		============================================= */}	
+        {/* PAGE CONTENT */}	
         <div id="page" className="page">
-          {/* HEADER
-			============================================= */}
-          {/* CONTACTS-2
-			============================================= */}
+          {/* HEADER */}
+          {/* CONTACTS-2 */}
           <section id="contacts-2" className="bg_whitesmoke hero-offset-nav pb-50 contacts-section division">				
             <div className="container">
               {/* SECTION TITLE */}	
@@ -39,7 +108,7 @@ class Contacts extends React.Component {
               <div className="row">
                 <div className="col-lg-10 col-xl-8 offset-lg-1 offset-xl-2">
                   <div className="form-holder">
-                    <form name="contactform" className="row contact-form">
+                    <form name="contactform" className="row contact-form" onSubmit={this.handleSubmit}>
                       {/* Form Select */}
                       <div id="input-subject" className="col-md-12 input-subject">
                         <p className="p-lg">This question is about: </p>
@@ -57,21 +126,23 @@ class Contacts extends React.Component {
                       <div id="input-name" className="col-md-12">
                         <p className="p-lg">Your Name: </p>
                         <span>Please enter your real name: </span>
-                        <input type="text" name="name" className="form-control name" placeholder="Your Name*" /> 
+                        <input type="text" name="name" className="form-control name" placeholder="Your Name*" value={formData.name} onChange={this.handleInputChange} /> 
                       </div>
                       <div id="input-email" className="col-md-12">
                         <p className="p-lg">Your Email Address: </p>
                         <span>Please carefully check your email address for accuracy</span>
-                        <input type="text" name="email" className="form-control email" placeholder="Email Address*" /> 
+                        <input type="text" name="email" className="form-control email" placeholder="Email Address*" value={formData.email} onChange={this.handleInputChange} /> 
                       </div>
                       <div id="input-message" className="col-md-12 input-message">
                         <p className="p-lg">Explain your question in details: </p>
-                        <span>Your OS version, NordEx version &amp; build, steps you did. Be VERY precise!</span>
-                        <textarea className="form-control message" name="message" rows={6} placeholder="I have a problem with..." defaultValue={""} />
+                        <span>Your OS version, steps you did. Be VERY precise!</span>
+                        <textarea className="form-control message" name="message" rows={6} placeholder="I have a problem with..." value={formData.message} onChange={this.handleInputChange} />
                       </div> 
                       {/* Contact Form Button */}
                       <div className="col-md-12 mt-15 form-btn text-right">	
-                        <button type="submit" className="btn btn-skyblue tra-skyblue-hover submit">Submit Request</button>	
+                        <button type="submit" className="btn btn-skyblue tra-skyblue-hover submit" disabled={loading}>
+                        {loading ? 'Submitting...' : 'Submit Request'}
+                        </button>	
                       </div>
                       {/* Contact Form Message */}
                       <div className="col-lg-12 contact-form-msg">