Error handling

src/App.js

@@ -15,10 +15,10 @@ function App() {
 					<Route path="/create">
 						<Create/>
 					</Route>
-					<Route path="/join">
+					<Route path="/join/:roomName">
 						<Join/>
 					</Route>
-					<Route path="/game/:id">
+					<Route path="/game/:roomName">
 						<Game/>
 					</Route>
 

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 <Row className="text-center">
+		<Col md={{span: 12}}>
+			<h1><GiLongAntennaeBug/></h1>
+			<h1>404</h1>
+			<h4>Sorry, we couldn't find the room...</h4>
+			<Button onClick={onCreate}>Create New</Button>
+		</Col>
+	</Row>
+}

src/pages/game/game.js

@@ -4,21 +4,24 @@ 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";
 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 <GameNotFound/>
+	}
+	if (!me) {
+		history.push("/join/" + game.name);
+	}
 
 	const players = sortBy(values(game.players), "tablePosition")
 

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}
 					/>
 				</Row>
 				<Row>
@@ -52,6 +53,7 @@ function Join(props) {
 							setError(undefined)
 							setRoomName(e.target.value);
 						}}
+						value={roomName}
 					/>
 				</Row>
 				<Row>

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