socket notification wip

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>

src/components/NotificationPopup.js

+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;
+  }
+}

src/components/NotificationView.js

 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>
+    );
   }
 }

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;
   }
 }