CODEWITHSUNDEEP
javascriptnode.jsreactjs
Neskews
Neskews

Reputation: 824

synchronize react app with google sheets

I have a react app, which displays data from a Google Sheet.

It turned out, that I can't fetch data from that Google Sheet directly from the react-client, because it is meant to be running on a server (judge me, if I'm wrong).

Here's my question: can I create a minimal server.js, let's say using expressjs, which still is static?

The goal is to get it running on a host like github pages, while the data is being refreshed every few minutes.

I have read a few posts and articles (e.g. 1, 2), but I still found no answer to how such a project would be deployed.

Upvotes: 1

Views: 2909

Answers (2)

Neskews
Neskews

Reputation: 824

I finally managed it!

In my index.html I had to add <script src="https://apis.google.com/js/api.js"></script>, which makes window.gapi available everywhere in the app.

My App.js now contains a Login functionality, which loads the google client lib.

And finally the data-representing component looks like this:

export default class PartnerTable extends Component {
  constructor(props) {
    super(props);

    this.state = {
      partners: []
    };

    this.load = this.load.bind(this);
  }

  componentWillMount() {
    this.setState({ loading: true });
    // Load an initial state
    this.load();
  }

  componentDidMount() {
    // sync every one minute
    setInterval(() => {
      this.setState({ loading: true });
      this.load();
    }, ONE_MINUTE);
  }

  callback(values) {
    this.setState({ partners });
  }

  errorCallback(errorMessage) {
    console.error(errorMessage);
  }

  load() {
    window.gapi.client.load('sheets', 'v4', async () => {
      return window.gapi.client.sheets.spreadsheets.values
        .get({
          spreadsheetId: '<YOUR SPREADSHEET ID>',
          range: 'A1:E'
        })
        .then(response => {
          const { values } = response.result;
          this.callback(values);
        })
        .catch(error => {
          this.errorCallback(error);
        });
    });
  }

  render() {
    const { partners } = this.state;
    return <div>{'<some way to represent the data, e.g. as table>'}</div>;
  }
}

Upvotes: 2

MaddEye
MaddEye

Reputation: 741

as far as i know you can't run a server on a hosting platform like github pages, but you could use an button for refreshing. For this maby read this blog post "Experimenting with React Create App and Google Sheets API"

Also here is the source code on Github: Link

Upvotes: 2

Related Questions