update realtime poll and location tracking apps (#1066)

This commit is contained in:
Karthik Venkateswaran 2018-11-20 17:13:27 +05:30 committed by Shahidh K Muhammed
parent f25d49a9ca
commit 1b1658221c
16 changed files with 80 additions and 103 deletions

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.2 KiB

After

Width:  |  Height:  |  Size: 2.0 KiB

File diff suppressed because one or more lines are too long

View File

@ -1,5 +0,0 @@
// Use this file as a starting point for your project's .eslintrc.
// Copy this file, and add rule overrides as needed.
// {
// "extends": "airbnb"
// }

View File

@ -1,23 +0,0 @@
{
"indent_size": 2,
"indent_char": " ",
"eol": "\n",
"indent_level": 0,
"indent_with_tabs": false,
"preserve_newlines": true,
"max_preserve_newlines": 2,
"jslint_happy": false,
"space_after_anon_function": false,
"brace_style": "collapse",
"keep_array_indentation": false,
"keep_function_indentation": false,
"space_before_conditional": true,
"break_chained_methods": true,
"eval_code": false,
"unescape_strings": false,
"wrap_line_length": 80,
"wrap_attributes": "auto",
"wrap_attributes_indent_size": 2,
"e4x": true,
"end_with_newline": true
}

View File

@ -13,7 +13,7 @@ hosted on GitHub pages and the Postgres+GraphQL Engine is running on Postgres.
- Checkout the [live app](https://shahidh.in/hasura-realtime-poll/).
- Explore the database using [Hasura
Console](https://hasura-realtime-dashboard.herokuapp.com/console/data/schema/public).
Console](https://hasura-realtime-poll.herokuapp.com/console/data/schema/public).
# Running the app yourself
@ -43,5 +43,6 @@ hosted on GitHub pages and the Postgres+GraphQL Engine is running on Postgres.
```
- Run the app (go the root of repo):
```bash
npm install
npm start
```

View File

@ -29,7 +29,7 @@
"eject": "react-scripts eject"
},
"devDependencies": {
"eslint-plugin-jsx-a11y": "^6.1.1",
"eslint-plugin-jsx-a11y": "5.1.1",
"gh-pages": "^1.2.0"
}
}

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.8 KiB

After

Width:  |  Height:  |  Size: 2.0 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.2 KiB

After

Width:  |  Height:  |  Size: 2.0 KiB

View File

@ -6,7 +6,7 @@ import client, {HASURA_GRAPHQL_ENGINE_HOSTNAME} from './apollo';
import Poll from './Poll';
import { getUserId } from './session';
import hasura_logo from './img/hasura_logo_200.png';
import { GraphQL } from './GraphQL.jsx';
import { GraphQL } from './GraphQL';
class App extends Component {
constructor (props) {
@ -41,18 +41,18 @@ class App extends Component {
<footer className="App-footer displayFlex">
<div className="container hasura-logo">
<a href="https://hasura.io" target="_blank">
Powered by <img src={hasura_logo} />
<a href="https://hasura.io" target="_blank" rel="noopener noreferrer">
<img alt="hasura logo" src={hasura_logo} />
</a>
&nbsp; | &nbsp;
<a href={consoleURL} target="_blank">
Database
</a>
&nbsp; | &nbsp;
<a href="https://github.com/hasura/graphql-engine/tree/master/community/examples/realtime-poll" target="_blank">
<a href="https://github.com/hasura/graphql-engine/tree/master/community/examples/realtime-poll" target="_blank" rel="noopener noreferrer">
Source
</a>
<div className="footer-small-text"><span>(The database resets every 30 minutes)</span></div>
<div className="footer-small-text"><span>(The database resets every 24 hours)</span></div>
</div>
</footer>

View File

@ -6,17 +6,15 @@ import {
import gql from 'graphql-tag';
import {
Button,
ButtonGroup,
FormGroup,
Radio,
Alert,
} from 'react-bootstrap';
import { Result } from './Result.react.js';
import { Users } from './Users.react'
import { Result } from './Result';
import { Users } from './Users'
import {
QUERY_GET_POLL,
MUTATION_VOTE,
} from './GraphQL.jsx';
} from './GraphQL';
class PollQuestion extends Component {
@ -29,15 +27,15 @@ class PollQuestion extends Component {
this.setState({ ...this.state, optionId: e.currentTarget.value });
}
onMutationCompleted = (e) => {
this.setState({...this.state, voteBtnText: '👍 Done', voteBtnStyle: 'success'});
onMutationCompleted = () => {
this.setState({ ...this.state, voteBtnText: '👍 Done', voteBtnStyle: 'success' });
window.setTimeout(() => {
this.setState({...this.state, voteBtnText: '🗳️ Vote', voteBtnStyle: 'primary'});
}, 3000)
this.setState({ ...this.state, voteBtnText: '🗳️ Vote', voteBtnStyle: 'primary' });
}, 3000);
}
onMutationError = (e) => {
this.setState({...this.state, voteBtnText: 'Error 😞 Try again', voteBtnStyle: 'danger'});
onMutationError = () => {
this.setState({ ...this.state, voteBtnText: 'Error 😞 Try again', voteBtnStyle: 'danger' });
}
render () {
@ -47,7 +45,7 @@ class PollQuestion extends Component {
onCompleted={this.onMutationCompleted}
onError={this.onMutationError}
>
{(vote, { loading, error }) => (
{(vote) => (
<div className="textLeft">
<h3>{this.props.poll.question}</h3>
<form className="pollForm textLeft"

View File

@ -2,20 +2,18 @@ import React from 'react';
import {
Subscription,
} from 'react-apollo';
import {
Well,
} from 'react-bootstrap';
import {Chart} from 'react-google-charts';
import gql from 'graphql-tag';
import { SUBSCRIPTION_RESULT } from './GraphQL.jsx'
import { SUBSCRIPTION_RESULT } from './GraphQL'
const renderChart = (data) => {
const d = [
['Option', 'No. of votes', {role:'annotation'}, {role:'style'}],
];
data.poll_results.map((r, i) => {
d.push([r.option.text, r.votes, r.votes, 'color: #4285f4']);
})
for (var r of data.poll_results) {
console.log(r);
d.push([r.option.text, parseInt(r.votes, 10), parseInt(r.votes, 10), 'color: #4285f4']);
}
return (
<Chart className="poll-result-chart-container"

View File

@ -4,7 +4,7 @@ import { Subscription } from 'react-apollo';
import {
Alert,
} from 'react-bootstrap';
import {SUBSCRIPTION_ONLINE_USERS} from './GraphQL.jsx';
import {SUBSCRIPTION_ONLINE_USERS} from './GraphQL';
export const Users = () => (
<Subscription subscription={gql`${SUBSCRIPTION_ONLINE_USERS}`}>
@ -13,7 +13,7 @@ export const Users = () => (
if (error) return <span>Error :</span>;
return (
<Alert bsStyle="info">
👥 Online users: {data.online_users[0].count}
<span role="img" aria-label="online users">👥</span>Online users: {data.online_users[0].count}
</Alert>
);
}}

Binary file not shown.

Before

Width:  |  Height:  |  Size: 32 KiB

After

Width:  |  Height:  |  Size: 4.6 KiB

View File

@ -1,44 +1,51 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="-200 239 98 24" style="enable-background:new -200 239 98 24;" xml:space="preserve">
<style type="text/css">
.st0{fill:#FFFFFF;}
.st1{fill:#FFC627;}
.st2{fill:#232323;}
</style>
<title>Asset 1</title>
<g>
<g id="Layer_2">
<g id="Layer_1-2">
<path class="st0" d="M-168,241.8h2.7v7.9h3.3v-7.9h2.7v18.5h-2.8v-8.2h-3.2v8.2h-2.7V241.8z M-153.8,241.8h2.2l4.1,18.5h-2.7
l-0.8-4h-3.6l-0.8,4h-2.6C-158,260.3-153.8,241.8-153.8,241.8z M-152.7,247.1l-1.3,6.7h2.7C-151.3,253.8-152.7,247.1-152.7,247.1
z M-137.5,247.1h-2.7v-0.6c0-0.6-0.1-1.1-0.4-1.6c-0.3-0.5-0.9-0.7-1.4-0.7c-0.3,0-0.6,0.1-0.9,0.2c-0.2,0.1-0.4,0.3-0.5,0.5
c-0.1,0.2-0.2,0.5-0.3,0.8c-0.1,0.3-0.1,0.6-0.1,0.9v0.9c0,0.2,0.1,0.4,0.2,0.6c0.1,0.2,0.3,0.4,0.5,0.5c0.3,0.2,0.5,0.3,0.8,0.4
l2,0.8c0.5,0.2,1,0.5,1.4,0.8c0.4,0.3,0.7,0.7,0.9,1.1c0.2,0.4,0.3,0.9,0.4,1.4c0.1,0.6,0.1,1.2,0.1,1.8c0,0.7-0.1,1.5-0.2,2.2
c-0.1,0.6-0.4,1.2-0.8,1.7s-0.9,0.9-1.4,1.1c-0.7,0.3-1.4,0.4-2.2,0.4c-0.6,0-1.2-0.1-1.8-0.3c-1.1-0.4-1.9-1.3-2.4-2.3
c-0.2-0.5-0.4-1.1-0.4-1.7v-1h2.7v0.8c0,0.5,0.1,0.9,0.4,1.3c0.4,0.4,0.9,0.6,1.5,0.6c0.4,0,0.7,0,1.1-0.2
c0.2-0.1,0.4-0.3,0.6-0.6c0.1-0.3,0.2-0.6,0.2-0.9v-1.1v-1.2c0-0.3-0.1-0.5-0.2-0.8c-0.1-0.2-0.3-0.4-0.5-0.5
c-0.3-0.1-0.5-0.3-0.8-0.4l-1.9-0.8c-1-0.3-1.8-1-2.3-1.8c-0.4-0.9-0.6-1.9-0.6-2.9c0-0.7,0.1-1.4,0.3-2c0.2-0.6,0.5-1.1,0.9-1.6
c0.4-0.5,0.9-0.8,1.4-1.1c0.6-0.3,1.3-0.4,2-0.4c0.6,0,1.2,0.1,1.8,0.4c0.5,0.2,1,0.6,1.4,1c0.4,0.4,0.7,0.8,0.9,1.3
s0.3,1,0.3,1.5V247.1z M-126.8,256.2c0,0.6-0.1,1.2-0.3,1.7c-0.4,1-1.3,1.9-2.3,2.3c-1.1,0.5-2.3,0.5-3.3,0
c-1-0.4-1.8-1.3-2.3-2.3c-0.2-0.5-0.3-1.1-0.3-1.7v-14.4h2.7v14.1c0,0.5,0.1,1.1,0.5,1.5c0.7,0.6,1.7,0.6,2.3,0
c0.3-0.4,0.5-0.9,0.5-1.5v-14.1h2.7C-126.6,241.8-126.8,256.2-126.8,256.2z M-124.2,241.8h4.3c3.1,0,4.7,1.8,4.7,5.4
c0,0.9-0.2,1.9-0.5,2.8c-0.4,0.8-1,1.5-1.8,1.9l2.9,8.5h-2.8l-2.5-7.9h-1.6v7.9h-2.7C-124.2,260.4-124.2,241.8-124.2,241.8z
M-121.5,250.1h1.5c0.4,0,0.8-0.1,1.1-0.2c0.3-0.1,0.5-0.3,0.6-0.6c0.2-0.3,0.3-0.6,0.3-0.9c0.1-0.4,0.1-0.8,0.1-1.2
c0-0.4,0-0.8-0.1-1.2c0-0.3-0.2-0.6-0.3-0.9c-0.2-0.3-0.4-0.4-0.7-0.6c-0.4-0.1-0.8-0.2-1.2-0.2h-1.4v5.8H-121.5z M-110,241.8
h2.2l4.1,18.5h-2.6l-0.8-4h-3.6l-0.8,4h-2.7L-110,241.8z M-108.9,247.1l-1.3,6.7h2.6L-108.9,247.1z"/>
</g>
</g>
<g>
<circle class="st1" cx="-188.4" cy="253.3" r="8"/>
<path class="st2" d="M-185.2,255.7l-3-5.9c-0.3-0.5-0.9-0.7-1.4-0.5c-0.5,0.3-0.7,0.9-0.5,1.4l1.3,2.4l-2.2,2.2
c-0.4,0.4-0.4,1.1,0,1.5c0.2,0.2,0.5,0.3,0.7,0.3c0.3,0,0.5-0.1,0.7-0.3l1.8-1.8l0.7,1.5c0.2,0.4,0.6,0.6,0.9,0.6
c0.2,0,0.3,0,0.5-0.1C-185.1,256.9-184.9,256.3-185.2,255.7"/>
<path class="st2" d="M-181.2,239.4c-0.6,0.4,0.4,3.8-2,5.9c-1.5-1-3.3-1.6-5.2-1.6c-1.9,0-3.7,0.6-5.2,1.5c-2.4-2-1.4-5.5-2-5.9
c-1-0.6-2.8,3-2.6,5.2c0.1,1.2,0.4,3,1.3,4.4c-0.7,1.3-1,2.7-1,4.3c0,5.3,4.3,9.6,9.6,9.6s9.6-4.3,9.6-9.6c0-1.5-0.4-3-1-4.3
c0.9-1.4,1.2-3.2,1.3-4.4C-178.4,242.3-180.2,238.8-181.2,239.4 M-188.4,260.7c-4.1,0-7.4-3.3-7.4-7.5c0-4.1,3.3-7.4,7.4-7.4
c4.1,0,7.5,3.3,7.5,7.4C-180.9,257.4-184.3,260.7-188.4,260.7"/>
</g>
</g>
</svg>
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 22.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 270 80" style="enable-background:new 0 0 270 80;" xml:space="preserve">
<style type="text/css">
.st0{fill:#FFFFFF;}
</style>
<g id="Layer_2_1_">
</g>
<g id="Layer_1_5_">
<g>
<g>
<path class="st0" d="M110,45.5h-5.1c-0.8,0-1.4-0.7-1.4-1.4V28c0-0.8-0.7-1.4-1.4-1.4h-4.4c-0.8,0-1.4,0.7-1.4,1.4v40.7
c0,0.8,0.7,1.4,1.4,1.4h4.4c0.8,0,1.4-0.7,1.4-1.4V52.9c0-0.8,0.7-1.4,1.4-1.4h5.1c0.8,0,1.4,0.7,1.4,1.4v15.9
c0,0.8,0.7,1.4,1.4,1.4h4.4c0.8,0,1.4-0.7,1.4-1.4V28c0-0.8-0.7-1.4-1.4-1.4h-4.4c-0.8,0-1.4,0.7-1.4,1.4v16
C111.4,44.8,110.8,45.5,110,45.5z"/>
<path class="st0" d="M132.6,27.8l-7.2,40.7c-0.1,0.8,0.5,1.6,1.3,1.6h4.4c0.7,0,1.3-0.5,1.3-1.2l1.2-7.4c0.1-0.7,0.7-1.2,1.3-1.2
h5.6c0.7,0,1.3,0.5,1.3,1.2l1.3,7.5c0.1,0.7,0.7,1.2,1.3,1.2h4.6c0.9,0,1.6-0.8,1.3-1.7l-7.5-40.7c-0.1-0.7-0.7-1.2-1.3-1.2h-7.5
C133.3,26.6,132.8,27.1,132.6,27.8z M139.3,54.2h-2.9c-0.9,0-1.4-0.8-1.3-1.6l1.3-15c0.3-1.6,2.5-1.6,2.7,0l1.4,15
C140.7,53.4,140.1,54.2,139.3,54.2z"/>
<path class="st0" d="M170.1,44.9h-4.9c-0.9,0-1.4-0.4-1.4-1.4v-9.4c0-0.9,0.5-1.4,1.4-1.4h2.9c0.9,0,1.4,0.4,1.4,1.4v4.4
c0,0.8,0.7,1.4,1.4,1.4h4.6c0.8,0,1.4-0.7,1.4-1.4v-5.5c0-4.3-2.3-6.5-6.9-6.5h-6.6c-4.6,0-6.9,2.2-6.9,6.5v11.2
c0,4.3,2.3,6.6,6.8,6.6h4.9c0.9,0,1.4,0.4,1.4,1.4v10.4c0,0.9-0.4,1.4-1.4,1.4h-2.9c-0.9,0-1.4-0.4-1.4-1.4v-4.4
c0-0.8-0.7-1.4-1.4-1.4h-4.6c-0.8,0-1.4,0.7-1.4,1.4v5.5c0,4.3,2.3,6.5,6.9,6.5h6.5c4.6,0,6.9-2.2,6.9-6.5V51.6
C176.9,47.1,174.5,44.9,170.1,44.9z"/>
<path class="st0" d="M197.4,62.6c0,0.9-0.4,1.4-1.4,1.4h-3.9c-0.9,0-1.4-0.4-1.4-1.4V28c0-0.8-0.7-1.4-1.4-1.4h-4.6
c-0.8,0-1.4,0.7-1.4,1.4v35.5c0,4.3,2.3,6.5,6.9,6.5h7.5c4.6,0,6.9-2.2,6.9-6.5V28c0-0.8-0.7-1.4-1.4-1.4h-4.3
c-0.8,0-1.4,0.7-1.4,1.4L197.4,62.6L197.4,62.6z"/>
<path class="st0" d="M233.6,46.4V33.1c0-4.3-2.3-6.5-6.9-6.5h-13c-0.8,0-1.4,0.7-1.4,1.4v40.7c0,0.8,0.7,1.4,1.4,1.4h4.4
c0.8,0,1.4-0.7,1.4-1.4V54.4c0-0.8,0.7-1.4,1.4-1.4l0,0c0.5,0,1,0.4,1.3,0.9l5.7,15.3c0.3,0.5,0.8,0.9,1.3,0.9h4.8
c0.9,0,1.7-0.9,1.3-1.8l-5.5-14.2c-0.3-0.7,0.1-1.4,0.8-1.8C232.4,51.3,233.6,49.2,233.6,46.4z M226.3,34.1v11.4
c0,0.9-0.5,1.4-1.4,1.4h-4c-0.8,0-1.4-0.7-1.4-1.4V34.1c0-0.8,0.7-1.4,1.4-1.4h4C225.8,32.7,226.3,33.2,226.3,34.1z"/>
<path class="st0" d="M257.5,26.6H250c-0.7,0-1.3,0.5-1.3,1.2l-7.2,40.7c-0.1,0.8,0.5,1.6,1.3,1.6h4.4c0.7,0,1.3-0.5,1.3-1.2
l1.2-7.4c0.1-0.7,0.7-1.2,1.3-1.2h5.6c0.7,0,1.3,0.5,1.3,1.2l1.3,7.5c0.1,0.7,0.7,1.2,1.3,1.2h4.6c0.9,0,1.6-0.8,1.3-1.7
l-7.5-40.7C258.7,27.1,258.2,26.6,257.5,26.6z M255.2,54.2h-2.7c-0.9,0-1.4-0.8-1.3-1.6l1.3-13.7c0.3-1.6,2.5-1.6,2.7,0l1.4,13.7
C256.7,53.4,256.1,54.2,255.2,54.2z"/>
</g>
<g>
<path class="st0" d="M68.2,26.8c2.2-5.3,2.2-16.1-0.7-24.4l0,0c-0.8-1.5-3-1-3.1,0.6v0.6c-0.5,7.9-3.4,12.2-7.7,14.3
c-0.7,0.3-1.8,0.3-2.5-0.2c-5.1-3.2-11.1-5.1-17.6-5.1S24.1,14.5,19,17.7c-0.7,0.4-1.5,0.5-2.2,0.2c-4.4-1.6-7.4-6.4-7.9-14.4
V2.9C8.8,1.3,6.5,0.8,5.8,2.3C2.9,10.7,3,21.5,5.1,26.8c1.1,2.6,1.1,5.6,0.2,8.3c-1.2,3.4-1.8,7.2-1.7,11
C4,63.5,18.8,78.3,36.2,78.6c18.4,0.2,33.4-14.6,33.4-33c0-3.7-0.6-7.2-1.7-10.5C67,32.4,67.1,29.4,68.2,26.8z M36.2,70.7
c-13.4-0.3-24.4-11.2-24.6-24.6c-0.3-14.3,11.3-25.9,25.5-25.6c13.4,0.2,24.4,11.2,24.6,24.6C62,59.3,50.4,70.9,36.2,70.7z"/>
<path class="st0" d="M40.5,42.9l-5.9-9.1c-0.9-1.5-2.9-1.9-4.4-1c-0.9,0.6-1.5,1.6-1.5,2.7c0,0.6,0.2,1.2,0.5,1.7l4,6.2
c0.3,0.5,0.2,1.1-0.1,1.5l-6.2,6.8c-1.2,1.3-1.1,3.3,0.2,4.5c0.6,0.5,1.4,0.8,2.2,0.8c0.9,0,1.7-0.4,2.3-1l4.6-5.4
c0.4-0.4,1-0.4,1.3,0.1l3.3,4.7c0.2,0.4,0.5,0.7,0.9,0.9c1.1,0.8,2.5,0.8,3.6,0.1l0,0c0.9-0.6,1.5-1.6,1.5-2.7
c0-0.6-0.2-1.2-0.5-1.7L40.5,42.9z"/>
</g>
</g>
</g>
</svg>

Before

Width:  |  Height:  |  Size: 3.3 KiB

After

Width:  |  Height:  |  Size: 3.8 KiB

View File

@ -3,7 +3,7 @@ import client from './apollo';
import {
MUTATION_MARK_USER_ONLINE,
MUTATION_NEW_USER,
} from './GraphQL.jsx';
} from './GraphQL';
const newUUID = () => {
const p8 = (s) => {