diff --git a/src/App.js b/src/App.js index b701a6e8845cb04a430eb2d0baaa03976bc061ec..3b57bad75dba81a4592757b60669e01685834f28 100644 --- a/src/App.js +++ b/src/App.js @@ -1,7 +1,6 @@ import React, { Component } from "react"; import "../node_modules/leaflet-draw/dist/leaflet.draw.css"; import "./App.css"; -import ClientSocket from "./components/Socket"; import { BrowserRouter as Router, Route, @@ -46,21 +45,6 @@ export default class App extends 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); - this.setState( - { - socketSignal: type - }, - () => { - this.setState({ - socketSignal: null - }); - } - ); - }; handleState = data => { sessionStorage.setItem("name", data.name); sessionStorage.setItem("token", data.token); @@ -148,13 +132,6 @@ export default class App extends Component { return ( <div> - {this.state.currentGameId && ( - <ClientSocket - gameId={this.state.currentGameId} - getSocketSignal={this.getSocketSignal} - /> - )} - <Router> <div> {/* Debug Sign out button ------------------------ */} diff --git a/src/components/GameView.js b/src/components/GameView.js index 217f292fc46e7299e005b7eb0eb52a78af2f8f73..f92586e94bc5b379b47914ab6bf0a3954fe7c28e 100644 --- a/src/components/GameView.js +++ b/src/components/GameView.js @@ -7,6 +7,7 @@ import JoinGameForm from "./JoinGameForm"; import PlayerlistView from "./PlayerlistView"; import NotificationView from "./NotificationView"; import GameStateButtons from "./GameStateButtons"; +import ClientSocket from "./Socket"; export default class GameView extends React.Component { state = { @@ -16,7 +17,8 @@ export default class GameView extends React.Component { lat: 62.2416479, lng: 25.7597186, zoom: 13, - mapUrl: "https://tiles.kartat.kapsi.fi/taustakartta/{z}/{x}/{y}.jpg" + mapUrl: "https://tiles.kartat.kapsi.fi/taustakartta/{z}/{x}/{y}.jpg", + socketSignal: null }; componentDidMount() { @@ -84,6 +86,22 @@ export default class GameView extends React.Component { .catch(error => console.log(error)); }; + // 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); + this.setState( + { + socketSignal: type + }, + () => { + this.setState({ + socketSignal: null + }); + } + ); + }; + render() { const initialPosition = [this.state.lat, this.state.lng]; @@ -94,6 +112,12 @@ export default class GameView extends React.Component { </Link> {this.state.gameInfo !== null && ( <div> + {this.state.gameInfo.id && ( + <ClientSocket + gameId={this.state.gameInfo.id} + getSocketSignal={this.getSocketSignal} + /> + )} <div>Game Name: {this.state.gameInfo.name}</div> {this.state.role === "" && ( <div>You don't have a role in this game</div> @@ -153,6 +177,7 @@ export default class GameView extends React.Component { zoom={this.state.zoom} mapUrl={this.state.mapUrl} currentGameId={this.state.gameInfo.id} + socketSignal={this.state.socketSignal} /> {this.state.form === "edit" && ( <EditGameForm