-
Notifications
You must be signed in to change notification settings - Fork 9
/
App.js
93 lines (83 loc) · 2.5 KB
/
App.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
import React, { Component } from 'react';
import './App.css';
import logo from './logo.svg';
import 'bootstrap/dist/css/bootstrap.min.css';
import Amplify, {API,graphqlOperation} from 'aws-amplify';
Amplify.configure({
'aws_appsync_graphqlEndpoint': 'https://xxxxxx.appsync-api.us-east-1.amazonaws.com/graphql',
'aws_appsync_region': 'us-east-1',
'aws_appsync_authenticationType': 'API_KEY',
'aws_appsync_apiKey': 'da2-xxxxxxxxxxxxxxxxxxxxxxxxxx',
});
const sendMessage = `mutation sendMessage($message: String!) {
sendMessage(message: $message) {
__typename
message
}
}`;
const subscribeToMessage = `subscription subscribeToMessage {
subscribeToMessage {
__typename
message
}
}`;
class App extends Component {
constructor(props){
super(props);
this.state={
message:"",
value:"",
display:false
};
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
async componentDidMount(){
this.subscription = API.graphql(graphqlOperation(subscribeToMessage)).subscribe({
next: (event) => {
console.log("Subscription: "+event.value.data);
this.setState({display: true});
this.setState({message: event.value.data.subscribeToMessage.message});
}
});
}
handleChange(event) {
this.setState({value:event.target.value});
}
async handleSubmit(event) {
event.preventDefault();
event.stopPropagation();
const message = {
"message":this.state.value
}
await API.graphql(graphqlOperation(sendMessage, message));
}
render() {
return (
<div className="App">
<img src={logo} className="App-logo" alt="logo" />
<div className="jumbotron jumbotron-fluid p-0">
<h3 className="display-4">Broadcaster</h3>
</div>
<br/>
<div className="container">
<form onSubmit={this.handleSubmit}>
<div className="form-group">
<input className="form-control form-control-lg"type="text" value={this.state.value} onChange={this.handleChange} />
</div>
<input type="submit" value="Submit" className="btn btn-primary"/>
</form>
</div>
<br/>
{this.state.display ?
<div className="container">
<div className="card bg-success">
<h3 className="card-text text-white p-2">{this.state.message}</h3>
</div>
</div>
: null }
</div>
);
}
}
export default App;