refresh the sample app realtime-poll

community/sample-apps/realtime-poll/package.json

@@ -3,20 +3,20 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "apollo-boost": "^0.1.13",
+    "apollo-boost": "^0.4.7",
     "apollo-cache-inmemory": "^1.2.7",
     "apollo-client": "^2.3.8",
     "apollo-link": "^1.2.2",
     "apollo-link-http": "^1.5.4",
     "apollo-link-ws": "^1.0.8",
     "apollo-utilities": "^1.0.18",
-    "graphql": "^0.13.2",
+    "graphql": "^15.0.0",
     "react": "^16.4.2",
-    "react-apollo": "^2.1.11",
-    "react-bootstrap": "^0.32.1",
+    "react-apollo": "^3.1.4",
+    "react-bootstrap": "^1.0.0",
     "react-dom": "^16.4.2",
     "react-google-charts": "^3.0.5",
-    "react-scripts": "1.1.4",
+    "react-scripts": "^3.4.1",
     "subscriptions-transport-ws": "^0.9.14"
   },
   "scripts": {
@@ -28,7 +28,19 @@
     "eject": "react-scripts eject"
   },
   "devDependencies": {
-    "eslint-plugin-jsx-a11y": "5.1.1",
-    "gh-pages": "^1.2.0"
+    "eslint-plugin-jsx-a11y": "^6.2.3",
+    "gh-pages": "^2.2.0"
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
   }
 }

community/sample-apps/realtime-poll/public/index.html

@@ -20,7 +20,12 @@
          Learn how to configure a non-root public URL by running `npm run build`.
     -->
     <!-- Latest compiled and minified CSS -->
-    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
+    <link
+      rel="stylesheet"
+      href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
+      integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
+      crossorigin="anonymous"
+      />
     <title>Realtime Poll | Powered by Hasura GraphQL Engine</title>
     <!-- Global site tag (gtag.js) - Google Analytics -->
     <script async src="https://www.googletagmanager.com/gtag/js?id=UA-129818961-1"></script>

community/sample-apps/realtime-poll/src/App.css

@@ -26,12 +26,12 @@
   color: white;
   text-align: left;
 }
-.App-footer{
-    height: 50px;
-    text-align: center;
-    width: 100%;
-    margin-bottom: 30px;
-    margin-top: 30px;
+.App-footer {
+  height: 50px;
+  text-align: center;
+  width: 100%;
+  margin-bottom: 30px;
+  margin-top: 30px;
 }
 
 .App-title {
@@ -44,36 +44,31 @@
 .App-intro {
   font-size: large;
 }
-.pollWrapper
-{
-  padding-top: 10px;
+
+.cardGraphQL {
+  padding-top: 50px;
 }
-.pollForm
-{
 
+.pollWrapper {
+  padding-top: 10px;
 }
-pre
-{
+
+pre {
   font-size: 10px;
   text-align: left;
   margin: 25px 0;
 }
-.voteBtn
-{
 
-}
-.radio
-{
+.radio {
   margin-bottom: 15px;
 }
-.textLeft
-{
+
+.textLeft {
   text-align: left;
 }
-.wd100
-{
+
+.wd100 {
   width: 100%;
-  float: left;
 }
 @keyframes App-logo-spin {
   from { transform: rotate(0deg); }
@@ -86,7 +81,10 @@ pre
 }
 
 .online-users {
-    padding-top: 20px;
+  justify-content: center;
+  text-align: center;
+  width: 100%;
+  margin-top: 30px;
 }
 .online-users .alert {
     margin-bottom: 0px;
@@ -98,7 +96,7 @@ pre
     justify-content: center;
     max-width: 900px;
     width: 100%;
-    min-height: 400px;
+    min-height: 350px;
 }
 
 @media(max-width: 767px) {
@@ -109,4 +107,4 @@ pre
 
 .hasura-logo img {
   margin-bottom: 12px;
-}
+}

community/sample-apps/realtime-poll/src/App.js

@@ -2,25 +2,27 @@ import React, { Component } from 'react';
 import logo from './img/logo-white.svg';
 import './App.css';
 import { ApolloProvider } from 'react-apollo';
-import client, {HASURA_GRAPHQL_ENGINE_HOSTNAME} from './apollo';
+import client from './apollo';
 import Poll from './Poll';
 import { getUserId } from './session';
 import { GraphQL } from './GraphQL';
+import { Users } from './Users';
+
 
 class App extends Component {
-  constructor (props) {
+  constructor(props) {
     super(props);
-    this.state = {loading: true, userId: ''};
+    this.state = { loading: true, userId: '' };
   }
 
-  componentWillMount() {
+  componentDidMount() {
     getUserId().then((userId) => {
-      this.setState({loading: false, userId});
+      this.setState({ loading: false, userId });
     });
   }
 
   render() {
-    if (this.state.loading) return <p>Loading...</p>;
+    // if (this.state.loading) return <p>Loading...</p>;
     return (
       <ApolloProvider client={client}>
         <div className="App">
@@ -32,8 +34,9 @@ class App extends Component {
             </div>
           </header>
 
+          <Users />
 
-          <Poll userId={this.state.userId}/>
+          <Poll userId={this.state.userId} />
 
           <GraphQL />
 

community/sample-apps/realtime-poll/src/GraphQL.js

@@ -1,9 +1,9 @@
 import React from 'react';
-import { Panel } from 'react-bootstrap';
+import { Card } from 'react-bootstrap';
 
 const QUERY_GET_POLL = `
 query {
-  poll {
+  poll (limit: 10) {
     id
     question
     options (order_by: {id:desc}){
@@ -71,38 +71,36 @@ mutation newUser($uuid: uuid) {
 
 const GraphQL = () => (
   <div className="container">
-    <div className="col-md-12">
-    <Panel>
-      <Panel.Heading>
-        <Panel.Title componentClass="h3">GraphQL Queries/Mutations/Subscriptions in this page</Panel.Title>
-      </Panel.Heading>
-      <Panel.Body>
-        <div className="row">
-          <div className="col-md-4">
-            Get the Poll question and options:
+    <div className="col-md-12 cardGraphQL">
+      <Card>
+        <Card.Header>GraphQL Queries/Mutations/Subscriptions in this page</Card.Header>
+        <Card.Body>
+          <div className="row">
+            <div className="col-md-4">
+              Get the Poll question and options:
             <pre>{QUERY_GET_POLL}</pre>
 
             Create a new user:
             <pre>{MUTATION_NEW_USER}</pre>
-          </div>
-          <div className="col-md-4">
-            Cast a vote:
+            </div>
+            <div className="col-md-4">
+              Cast a vote:
             <pre>{MUTATION_VOTE}</pre>
 
             Mark user online:
             <pre>{MUTATION_MARK_USER_ONLINE}</pre>
-          </div>
-          <div className="col-md-4">
-            Show live results:
+            </div>
+            <div className="col-md-4">
+              Show live results:
             <pre>{SUBSCRIPTION_RESULT}</pre>
 
             Get real-time number of users:
             <pre>{SUBSCRIPTION_ONLINE_USERS}</pre>
+            </div>
           </div>
-        </div>
-      </Panel.Body>
-    </Panel>
-  </div>
+        </Card.Body>
+      </Card>
+    </div>
   </div>
 )