Make homepage statistics dynamic

app/components/Pages/Home.jsx → app/components/Home/Home.jsx

@@ -10,11 +10,12 @@ import Logo from '../App/Logo'
 import ExternalLinkNewTab from '../Utils/ExternalLinkNewTab'
 import { INVITATION_SYSTEM } from '../../config'
 import AllContributors from './AllContributors'
+import Statistics from './Statistics'
 
 
 @connect(state => ({authenticated: isAuthenticated(state)}))
 @translate('home')
-export class Home extends React.PureComponent {
+export default class Home extends React.PureComponent {
   render() {
     const {t} = this.props
 
@@ -56,14 +57,7 @@ export class Home extends React.PureComponent {
         </section>
         <section className="section has-text-centered community content">
           <h1>{t('videoDebate:community')}</h1>
-          <p className="columns is-size-5">
-            <span className="column">
-              <Icon name="user"/> 1840 {t('registeredUsers')}
-            </span>
-            <span className="column">
-              <Icon name="check"/> 706 {t('verifiedStatements')}
-            </span>
-          </p>
+          <Statistics/>
         </section>
         <section className="section has-text-centered contributors content">
           <h1>{t('contributors')}</h1>

app/components/Home/Statistics.jsx

@@ -0,0 +1,44 @@
+import React from 'react'
+import { Query } from 'react-apollo'
+import gql from 'graphql-tag'
+import { translate } from 'react-i18next'
+import { Icon } from '../Utils/Icon'
+
+const QUERY = gql`
+{
+  allStatistics {
+    totals {
+      users
+      statements
+      sources
+      comments
+    }
+  }
+}
+`
+
+const DEFAULT_STATS = {allStatistics: {totals: {users: 2000, statements: 900}}}
+
+const Statistics = ({t}) => (
+  <Query query={QUERY}>
+    {({loading, error, data}) => {
+      if (loading || error) {
+        data = DEFAULT_STATS
+      }
+
+      const {users, statements} = data.allStatistics.totals
+      return (
+        <p className="columns is-size-5">
+          <span className="column">
+            <Icon name="user"/> {users} {t('registeredUsers')}
+          </span>
+          <span className="column">
+            <Icon name="check"/> {statements} {t('verifiedStatements')}
+          </span>
+        </p>
+      )
+    }}
+  </Query>
+)
+
+export default translate('home')(Statistics)

app/components/Pages/index.js

@@ -1,3 +1,2 @@
-export * from './Home'
 export * from './NotFound'
 export * from './BrowserExtensionsPage'

app/router.jsx

@@ -4,7 +4,8 @@ import { Router, Route, IndexRoute, browserHistory } from 'react-router'
 
 // Import Views
 import App from './components/App'
-import { Home, NotFound, BrowserExtensionsPage } from './components/Pages'
+import Home from './components/Home/Home'
+import { NotFound, BrowserExtensionsPage } from './components/Pages'
 import { PublicVideos, AddVideoForm } from './components/Videos'
 import { VideoDebate } from './components/VideoDebate'
 import Help from './components/Help/Help'