Reactjs and RapidAPI

AwaisRehman — Thu, 19 May 2022 05:39:56 +0000
import axios from 'axios';
 import React,{Component} from 'react';
 import {Button} from 'react-bootstrap';

class App extends Component {

  submit =  (e) => {

    const options = {
      method: 'POST',
      url: 'https://rapidprod-sendgrid-v1.p.rapidapi.com/mail/send',
      headers: {
        'content-type': 'application/json',
        'X-RapidAPI-Host': '',
        'X-RapidAPI-Key': ''
      },

       data: '{"personalizations":[{"to":[{"email":"awais.ur.rehman16@gmail.com"}],"subject":"Email from Teacher"}],"from":{"email":"aebrahima830@gmail.com"},"content":[{"type":"json","value":"Hello, World!"}]}'


    };

    axios.request(options).then(function (response) {
      console.log(response.data);
    }).catch(function (error) {
      console.error(error);
    });
      };

  constructor(props) {
    super(props);
    this.state = {
      teachers: [],
      emails: [],
      message: '',
       // Initially, no file is selected
      selectedFile: null,

      selectedTeacher: 'Teacher',
      selectedEmail: 'Email',
      selectedMessage: ''


    };
    this.changeTeacher = this.changeTeacher.bind(this);
    this.changeEmail = this.changeEmail.bind(this);
    this.changeMessage = this.changeMessage.bind(this);

    // this.handleSubmit = this.handleSubmit.bind(this);
  }

  componentDidMount() {
    this.setState({
      teachers: [
        { name: "Ali" , emails: [ {name: "ali@gmail.com" }]},
        { name: "Awais" , emails: [ {name: "awais@gmail.com" }]}
      ]
    });
  }
  changeTeacher(e) {
    this.setState({selectedTeacher: e.target.value});
    this.setState({emails : this.state.teachers.find(teach => teach.name === e.target.value).emails});
  }

  changeEmail(e) {
    this.setState({selectedEmail: e.target.value});

  }
  changeMessage(e) {
    this.setState({selectedMessage: e.target.value});
  }

  // handleSubmit(e) {
  //   alert('An Email was submitted: ' + this.state.value);
  //   e.preventDefault();
  // }



    // On file select (from the pop up)
    onFileChange = event => {

      // Update the state
      this.setState({ selectedFile: event.target.files[0] });

    };

    // On file upload (click the upload button)
    onFileUpload = () => {

      // Create an object of formData
      const formData = new FormData();

      // Update the formData object
      formData.append(
        "myFile",
        this.state.selectedFile,
        this.state.selectedFile.name
      );

      // Details of the uploaded file
      console.log(this.state.selectedFile);

      // Request made to the backend api
      // Send formData object
      axios.post("api/uploadfile", formData);
    };

    // File content to be displayed after
    // file upload is complete
    fileData = () => {

      if (this.state.selectedFile) {

        return (
          <div>
            <h2>File Details:</h2>

<p>File Name: {this.state.selectedFile.name}</p>


<p>File Type: {this.state.selectedFile.type}</p>


<p>
              Last Modified:{" "}
              {this.state.selectedFile.lastModifiedDate.toDateString()}
            </p>

          </div>
        );
      } else {
        return (
          <div>
            <br />
            <h4>Choose before Pressing the Upload button</h4>
          </div>
        );
      }
    };

    render() {

      return (

        <form  onSubmit={this.submit}>
        <div className="container">


          <div className="row">

           <h2>Email Form</h2>

           <div className="form-group">
             <label style={styles.lbl}>Teacher Name</label>
             <select className="form-select" placeholder="Select Teacher" value={this.state.selectedTeacher} onChange={this.changeTeacher}>
               <option disabled>Teacher</option>
               {this.state.teachers.map((e, key)=> {
                 return <option key = {key}>{e.name}</option>;
               })}
             </select>
           </div>

           <div className="form-group">
             <label style={styles.lbl}>Teacher Email</label>
             <select className="form-select" placeholder="Select Email" value={this.state.selectedEmail} onChange={this.changeEmail}>
               <option disabled>Email</option>
               {this.state.emails.map((e, key)=> {
                 return <option key = {key}> {e.name}</option>;
               })}
             </select>
           </div>
           <div  style={styles.lbl} className="form-group">
           <textarea 
             className="form-control"
             id="exampleFormControlTextarea1"
             rows="5"
             placeholder="Enter the Message"
             value={this.state.selectedMessage}
             onChange={this.changeMessage}
             />
          </div>


          </div>
        <div>



            <h3> File Upload </h3>
            <div>
                <input type="file" onChange={this.onFileChange} />
                <button onClick={this.onFileUpload}>
                  Upload!
                </button>
            </div>
          {this.fileData()}
        </div>
        <div >
          <Button variant="outline-primary"  
          onClick={this.submit} 
          style={styles.btn}>SEND EMAIL</Button>

          </div>

        </div>
        </form>
      );
    }
  }

  export default App;


  //JUST SOME STYLES

  const styles = {
  lbl: {
  marginTop: 15,
  marginBottom: 15,
  },
  btn: {
    width: 200,
    marginLeft: 15,
    marginTop: 15,
  }

  };
DEV Community: AwaisRehman

Reactjs and RapidAPI
