diff --git a/src/App.js b/src/App.js
index e7348b7..33fef3e 100644
--- a/src/App.js
+++ b/src/App.js
@@ -15,10 +15,10 @@ function App() {
-
+
-
+
diff --git a/src/components/gameNotFound.js b/src/components/gameNotFound.js
new file mode 100644
index 0000000..454a51b
--- /dev/null
+++ b/src/components/gameNotFound.js
@@ -0,0 +1,21 @@
+import React from "react";
+import {Button, Col, Row} from "react-bootstrap";
+import {useHistory} from "react-router-dom";
+import {GiLongAntennaeBug} from "react-icons/all";
+
+export default function GameNotFound(props) {
+ const history = useHistory();
+
+ const onCreate = () => {
+ history.push("/create")
+ }
+
+ return
+
+
+ 404
+ Sorry, we couldn't find the room...
+
+
+
+}
\ No newline at end of file
diff --git a/src/pages/game/game.js b/src/pages/game/game.js
index 0bca308..adeb539 100644
--- a/src/pages/game/game.js
+++ b/src/pages/game/game.js
@@ -4,9 +4,9 @@ import {Button, Col, Container, Modal, Row} from "react-bootstrap";
import "./game.css"
import {Player} from "../../components/player/player";
import Board from "../../components/board/board";
-import {withRouter} from "react-router-dom";
+import {useHistory, withRouter} from "react-router-dom";
import {useDispatch, useSelector} from "react-redux";
-import {fetchGameRoom, selectGame, updateGame} from "../../reducers/game";
+import {fetchGameRoom, isLoading, selectGame, updateGame} from "../../reducers/game";
import db from "../../firebase/db";
import WaitingRoom from "./waitingRoom";
import {selectPlayer, updatePlayerId} from "../../reducers/player";
@@ -14,11 +14,14 @@ import {sortBy, values} from "lodash"
import {CurrentPlayer} from "../../components/player/currentPlayer";
import GameService from "../../services/gameService";
import {updateRoom} from "../../firebase/game";
+import GameNotFound from "../../components/gameNotFound";
function Game(props) {
const dispatch = useDispatch()
+ const history = useHistory();
const game = useSelector(selectGame);
const me = useSelector(selectPlayer);
+ const loading = useSelector(isLoading);
const gameService = new GameService(game);
const onGameUpdate = (snapshot) => {
@@ -35,18 +38,24 @@ function Game(props) {
useEffect(() => {
dispatch(updatePlayerId(sessionStorage.getItem("playerId")))
- dispatch(fetchGameRoom(props.match.params.id))
+ dispatch(fetchGameRoom(props.match.params.roomName))
- db.ref(`/rooms/${props.match.params.id}`).on('value', onGameUpdate)
+ db.ref(`/rooms/${props.match.params.roomName}`).on('value', onGameUpdate)
return () => {
- db.ref(`/rooms/${props.match.params.id}`).off('value', onGameUpdate)
+ db.ref(`/rooms/${props.match.params.roomName}`).off('value', onGameUpdate)
}
}, [])
- if (!game) {
+ if (loading) {
return null
}
+ if (!game.name) {
+ return
+ }
+ if (!me) {
+ history.push("/join/" + game.name);
+ }
const players = sortBy(values(game.players), "tablePosition")
diff --git a/src/pages/join/join.js b/src/pages/join/join.js
index 4232c4d..04d2c5d 100644
--- a/src/pages/join/join.js
+++ b/src/pages/join/join.js
@@ -11,7 +11,7 @@ function Join(props) {
const [error, setError] = useState(undefined);
const [loading, setLoading] = useState(false);
const [playerName, setPlayerName] = useState("");
- const [roomName, setRoomName] = useState("");
+ const [roomName, setRoomName] = useState(props.match.params.roomName);
const joinGame = async () => {
setLoading(true)
@@ -42,6 +42,7 @@ function Join(props) {
setError(undefined)
setPlayerName(e.target.value)
}}
+ value={playerName}
/>
@@ -52,6 +53,7 @@ function Join(props) {
setError(undefined)
setRoomName(e.target.value);
}}
+ value={roomName}
/>
diff --git a/src/reducers/game.js b/src/reducers/game.js
index 827109e..829f491 100644
--- a/src/reducers/game.js
+++ b/src/reducers/game.js
@@ -17,7 +17,7 @@ const slice = createSlice({
name: undefined,
players: []
},
- loading: false
+ loading: true
},
reducers: {
updateGame: (state, action) => {
@@ -26,11 +26,11 @@ const slice = createSlice({
},
extraReducers: {
[fetchGameRoom.fulfilled]: (state, action) => {
- state.game = action.payload
+ if (action.payload) {
+ state.game = action.payload
+ }
+
state.loading = false
- },
- [fetchGameRoom.pending]: (state, action) => {
- state.loading = true
}
}
})
@@ -40,6 +40,7 @@ export const {updateGame} = slice.actions;
// the state. Selectors can also be defined inline where they're used instead of
// in the slice file. For example: `useSelector((state) => state.counter.value)`
export const selectGame = state => !state.game.loading ? state.game.game : undefined;
+export const isLoading = state => state.game.loading;
export default slice.reducer
\ No newline at end of file