Monday, 24 April 2017

React with Google Client JS

I'm trying to implement this example with react starter kit with redux.

No NPM modules used, just this js in the head document. The strange behaviour I have is that when I refresh the page, the data is gone and I got, in console, status: UNAUTHENTICATED. If I should change the code and save, the result returns (hot reloading on save changes).

React Component:

componentDidMount(){
  gapi.load('client:auth2', this.initClient);
}

initClient() {
  gapi.client.request({
    path: '/v4/reports:batchGet',
    root: 'https://analyticsreporting.googleapis.com/',
    method: 'POST',
    body: {
      reportRequests: [
        {
          viewId: VIEW_ID, // Not shown here
          dateRanges: [
            {
              startDate: '7daysAgo',
              endDate: 'today'
            }
          ],
          metrics: [
            {
              expression: 'ga:sessions'
            }
          ]
        }
      ]
    }
  }).then(function(response) {
    var formattedJson = JSON.stringify(response.result, null, 2);
    document.getElementById('query-output').value = formattedJson;
  });
}

render(){
  return(
    <div>
    hello
      <p className="g-signin2" data-onsuccess={this.initClient}></p>
      <textarea cols="80" rows="20" id="query-output"></textarea>
    </div>
  )
}

Is there a way that when I refresh the page, the data still remains? Do I need an npm module for this?



via Sylar

No comments:

Post a Comment