From 47aeec0e45de9de21826e3a09b0b34a8c6a1c0cd Mon Sep 17 00:00:00 2001
From: Joni Laukka <joni.laukka.overflow@gmail.com>
Date: Tue, 16 Jul 2019 16:19:38 +0300
Subject: [PATCH] socket notification wip
---
src/components/GameView.js | 25 +++++++++++---
src/components/NotificationPopup.js | 16 +++++++++
src/components/NotificationView.js | 53 ++++++++++++++++++++++++++++-
src/components/Socket.js | 6 ++--
4 files changed, 92 insertions(+), 8 deletions(-)
create mode 100644 src/components/NotificationPopup.js
diff --git a/src/components/GameView.js b/src/components/GameView.js
index f92586e..fab8c79 100644
--- a/src/components/GameView.js
+++ b/src/components/GameView.js
@@ -8,6 +8,7 @@ import PlayerlistView from "./PlayerlistView";
import NotificationView from "./NotificationView";
import GameStateButtons from "./GameStateButtons";
import ClientSocket from "./Socket";
+import NotificationPopup from "./NotificationPopup";
export default class GameView extends React.Component {
state = {
@@ -18,7 +19,8 @@ export default class GameView extends React.Component {
lng: 25.7597186,
zoom: 13,
mapUrl: "https://tiles.kartat.kapsi.fi/taustakartta/{z}/{x}/{y}.jpg",
- socketSignal: null
+ socketSignal: null,
+ socket: null
};
componentDidMount() {
@@ -88,11 +90,11 @@ export default class GameView extends React.Component {
// setting the socket signal automatically fires shouldComponentUpdate function where socketSignal prop is present
// setting socketSignal to null immediately after to avoid multiple database fetches
- getSocketSignal = type => {
- console.log(type);
+ getSocketSignal = data => {
+ console.log(data);
this.setState(
{
- socketSignal: type
+ socketSignal: data
},
() => {
this.setState({
@@ -102,6 +104,12 @@ export default class GameView extends React.Component {
);
};
+ onSocketChange = newSocket => {
+ this.setState({
+ socket: newSocket
+ });
+ };
+
render() {
const initialPosition = [this.state.lat, this.state.lng];
@@ -116,6 +124,7 @@ export default class GameView extends React.Component {
<ClientSocket
gameId={this.state.gameInfo.id}
getSocketSignal={this.getSocketSignal}
+ onSocketChange={this.onSocketChange}
/>
)}
<div>Game Name: {this.state.gameInfo.name}</div>
@@ -177,8 +186,13 @@ export default class GameView extends React.Component {
zoom={this.state.zoom}
mapUrl={this.state.mapUrl}
currentGameId={this.state.gameInfo.id}
- socketSignal={this.state.socketSignal}
+ socketSignal={
+ this.state.socketSignal !== null
+ ? this.state.socketSignal
+ : null
+ }
/>
+ <NotificationPopup socketSignal={this.state.socketSignal} />
{this.state.form === "edit" && (
<EditGameForm
gameId={this.state.gameInfo.id}
@@ -206,6 +220,7 @@ export default class GameView extends React.Component {
<NotificationView
gameId={this.state.gameInfo.id}
toggleView={() => this.setState({ form: "" })}
+ socket={this.state.socket}
/>
)}
</div>
diff --git a/src/components/NotificationPopup.js b/src/components/NotificationPopup.js
new file mode 100644
index 0000000..99f50cb
--- /dev/null
+++ b/src/components/NotificationPopup.js
@@ -0,0 +1,16 @@
+import React from "react";
+
+export default class NotificationPopup extends React.Component {
+ componentDidUpdate(prevProps, prevState) {
+ if (prevProps.socketSignal === "alert") {
+ console.log("alert");
+ }
+ if (prevProps.socketSignal === "note") {
+ console.log("note");
+ }
+ }
+
+ render() {
+ return false;
+ }
+}
diff --git a/src/components/NotificationView.js b/src/components/NotificationView.js
index 5fcf801..8d261a1 100644
--- a/src/components/NotificationView.js
+++ b/src/components/NotificationView.js
@@ -1,7 +1,58 @@
import React from "react";
export default class NotificationView extends React.Component {
+ state = {
+ notifications: [],
+ notificationInput: ""
+ };
+
+ componentDidMount() {
+ this.getNotifications(this.props.gameId);
+ }
+
+ getNotifications(gameId) {
+ let token = sessionStorage.getItem("token");
+ fetch(`${process.env.REACT_APP_API_URL}/notifications/${gameId}`, {
+ headers: {
+ Authorization: "Bearer " + token
+ }
+ })
+ .then(res => res.json())
+ .then(res => {
+ console.log(res);
+ //this.setState({ notifications: res });
+ });
+ }
+
+ handleSend = e => {
+ e.preventDefault();
+
+ console.log(this.props.socket);
+
+ this.props.socket.emit(this.props.gameId, {
+ type: "alert",
+ message: "asd"
+ });
+ };
+
render() {
- return false;
+ return (
+ <div className="fade-main">
+ <button onClick={() => this.props.toggleView()}>Close</button>
+ <div>
+ <form onSubmit={this.handleSend}>
+ <input
+ type="text"
+ value={this.state.notificationInput}
+ onChange={e =>
+ this.setState({ notificationInput: e.target.value })
+ }
+ placeholder="Notification text..."
+ />
+ <button type="submit">Send Notification</button>
+ </form>
+ </div>
+ </div>
+ );
}
}
diff --git a/src/components/Socket.js b/src/components/Socket.js
index 06cc2fd..438b278 100644
--- a/src/components/Socket.js
+++ b/src/components/Socket.js
@@ -47,16 +47,18 @@ export default class ClientSocket extends React.Component {
// set the socket to listen gameId-thread
socket.on(this.props.gameId, data => {
- console.log(data);
- this.props.getSocketSignal(data.type);
+ console.log("on " + data);
+ this.props.getSocketSignal(data);
// check socket update type
this.setState({ update: data.type });
});
+ this.props.onSocketChange(socket);
this.setState({ sock: socket });
};
render() {
+ //TODO: return needed?
return this.state.update;
}
}
--
GitLab