Отправка запроса из приложения React в скрипт приложения Google без публикации и обновления страницы - PullRequest
Новая
       10

Отправка запроса из приложения React в скрипт приложения Google без публикации и обновления страницы

1 голос
/ 15 марта 2020

Я пытаюсь сохранить данные из моего приложения реагирования в электронную таблицу Google, запустив почтовый запрос к сценарию приложения Google.

Пока я добавляю свой код. Почему-то он не добавляет информацию и, кроме того, он всегда обновляет страницу (я не знаю почему).

Электронная таблица опубликована c, и я опубликовал ее как веб-приложение с разрешением для всех, даже анонимно.

Кстати, когда я даю HTML форме атрибуты action = {addToSheet} и method = post, это работает, но нестабильно (работает только часть времени).

Спасибо заранее всем! 

import React from "react";
import FormInput from "../FormInput/FormInput";
import {
  ButtonContainer,
  DetailsContainer,
  StaticDetailsContainer,
  FormContainer
} from "../Details/Details-styles";
import staticDetails from "../../assets/details-static.png";
import { usersTable } from "../../Firebase/Firebase";
import axios from "axios";

const addToSheets =
  "https://script.google.com/macros/s/AKfycbxKQegNRwudHPHqkcxC0CiH1SizT1dwbzl5T_R9KATngvfsqwHn/exec";

class Details extends React.Component {
  state = {
    firstName: "",
    lastName: "",
    email: "",
    phone: ""
  };

  handleSubmit = async event => {
    await usersTable.push().set(this.state);
    // add user to spreadsheet here.
    axios
      .post(`${addToSheets}`, this.state)
      .then(function(response) {
        console.log(response);
      })
      .catch(function(error) {
        console.log(error);
      });

    this.props.handleUIOnSubmit();
  };

  handleChange = event => {
    const { value, name } = event.target;
    this.setState({ [name]: value });
  };

  render() {
    return (
      <DetailsContainer>
        <StaticDetailsContainer src={staticDetails} />
        <FormContainer>
          <form class="gform" onSubmit={this.handleSubmit}>
            <FormInput
              name="lastName"
              type="text"
              placeholder="שם משפחה"
              value={this.state.lastName}
              handleChange={this.handleChange}
            />
            <FormInput
              name="firstName"
              type="text"
              placeholder="שם פרטי"
              value={this.state.firstName}
              handleChange={this.handleChange}
            />
            <FormInput
              name="phone"
              type="phone"
              placeholder="טלפון"
              value={this.state.phone}
              handleChange={this.handleChange}
            />
            <FormInput
              name="email"
              type="email"
              placeholder='דוא"ל'
              value={this.state.email}
              handleChange={this.handleChange}
            />
            <ButtonContainer type="submit">תאם לי שיעור</ButtonContainer>
          </form>
        </FormContainer>
      </DetailsContainer>
    );
  }
}

export default Details;



function doPost(e) { 
  var monthTabs = [ "ינואר", "פברואר", "מרץ", "אפריל", "מאי", "יוני",
                     "יולי", "אוגוסט", "ספטמבר", "אוקטובר", "נובמבר", "דצמבר" ];

  var today = new Date();
  var month = today.getMonth();
  var ss = SpreadsheetApp.openById("19Vq3f26DiXL0Iyah13qIy963OgYyEeXdFE_Q8PMIiDE");
  var sheet = ss.getSheetByName(monthTabs[month]);
  ss.setActiveSheet(sheet);

  var checkCell = sheet.getRange('A1');
  if(checkCell.isBlank()){
    ss.appendRow(["תאריך", "שם פרטי", "שם משפחה", "טלפון", "דואל"]);
  }
  var params = e.parameter;
  var firstName = params.firstName;
  var lastName = params.lastName;
  var phone = params.phone;
  var email = params.email;

  ss.appendRow([today, firstName, lastName, phone, email]);
}
...