Merge pull request #70 from shabab477/feature/add-google-analytics

Add GA with test friendly method call

Author: oniahmed

.gitignore

@@ -20,4 +20,5 @@ npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 
-.idea/*
+.idea/*
+ package-lock.json 

src/App.js

@@ -1,12 +1,14 @@
 import React, { Component } from 'react';
 import axios from 'axios';
+import ReactGA from 'react-ga';
 import { BrowserRouter, Route } from 'react-router-dom';
 import { BeatLoader } from 'react-spinners';
 
 import './App.css';
 
 import Home from './components/Home';
 import Content from './components/Content';
+import AppContainer from './components/AppContainer';
 
 class App extends Component {
   state = {
@@ -16,6 +18,13 @@ class App extends Component {
     loading: true
   }
 
+  constructor(props) {
+    super(props)
+    
+    ReactGA.initialize('UA-129387050-1', { testMode: props.isTestMode })
+    ReactGA.pageview(window.location.href)
+  }
+
   getData() {
     const data = axios('https://raw.githubusercontent.com/devsonket/devsonket.github.io/develop/data/index.json');
     return data;
@@ -53,7 +62,7 @@ class App extends Component {
   render() {
     const { searchAItem } = this;
     const { tops, searchResult, data, loading } = this.state;
-
+    
     if(loading) {
       return <div className="loader">
         <BeatLoader color={'#333'} />
@@ -62,14 +71,16 @@ class App extends Component {
 
     return (
       <BrowserRouter>
-        <div className="App">
-          <Route exact path="/" render={props => (
-            <Home searchAItem={searchAItem} tops={tops} searchResult={searchResult} data={data} />
-          )}/>
-          <Route exact path="/:id" render={props => (
-            <Content {...props} data={data} />
-          )}/>
-        </div>
+        <AppContainer>
+          <div className="App">
+            <Route exact path="/" render={props => (
+              <Home searchAItem={searchAItem} tops={tops} searchResult={searchResult} data={data} />
+            )}/>
+            <Route exact path="/:id" render={props => (
+              <Content {...props} data={data} />
+            )}/>
+          </div>
+        </AppContainer>
       </BrowserRouter>
     );
   }

src/App.test.js

@@ -4,6 +4,6 @@ import App from './App';
 
 it('renders without crashing', () => {
   const div = document.createElement('div');
-  ReactDOM.render(<App />, div);
+  ReactDOM.render(<App isTestMode={true} />, div);
   ReactDOM.unmountComponentAtNode(div);
 });