From 859bafb1e4223216d8d818fb5566fd42aaf80705 Mon Sep 17 00:00:00 2001 From: Joffrey Bion Date: Fri, 21 Jul 2017 10:00:07 +0200 Subject: Isolate Seven Wonders API from sagas --- frontend/src/sagas/errors.js | 17 +++++++++-------- frontend/src/sagas/gameBrowser.js | 29 +++++++++++------------------ frontend/src/sagas/home.js | 17 ++++++++--------- frontend/src/sagas/lobby.js | 28 +++++++++++++--------------- 4 files changed, 41 insertions(+), 50 deletions(-) (limited to 'frontend/src/sagas') diff --git a/frontend/src/sagas/errors.js b/frontend/src/sagas/errors.js index e43875ae..86fa0124 100644 --- a/frontend/src/sagas/errors.js +++ b/frontend/src/sagas/errors.js @@ -1,12 +1,13 @@ -import { apply, call, cancelled, take } from 'redux-saga/effects'; -import { createSubscriptionChannel } from '../utils/websocket'; -import { toastr } from 'react-redux-toastr'; +import {apply, cancelled, take} from 'redux-saga/effects'; +import {toastr} from 'react-redux-toastr'; +import {ApiError, SevenWondersSession} from '../api/sevenWondersApi'; +import type {Channel} from 'redux-saga'; -export default function* errorHandlingSaga({ socket }) { - const errorChannel = yield call(createSubscriptionChannel, socket, '/user/queue/errors'); +export default function* errorHandlingSaga(session: SevenWondersSession) { + const errorChannel: Channel = yield apply(session, session.watchErrors, []); try { while (true) { - const error = yield take(errorChannel); + const error: ApiError = yield take(errorChannel); yield* handleOneError(error); } } finally { @@ -17,13 +18,13 @@ export default function* errorHandlingSaga({ socket }) { } } -function* handleOneError(err) { +function* handleOneError(err: ApiError) { console.error('Error received on web socket channel', err); const msg = buildMsg(err); yield apply(toastr, toastr.error, [msg, { icon: 'error' }]); } -function buildMsg(err) { +function buildMsg(err: ApiError): string { if (err.details.length > 0) { return err.details.map(d => d.message).join('\n'); } else { diff --git a/frontend/src/sagas/gameBrowser.js b/frontend/src/sagas/gameBrowser.js index 55927bf2..17eb9287 100644 --- a/frontend/src/sagas/gameBrowser.js +++ b/frontend/src/sagas/gameBrowser.js @@ -1,6 +1,5 @@ // @flow import { call, put, take, apply } from 'redux-saga/effects'; -import { createSubscriptionChannel } from '../utils/websocket'; import { push } from 'react-router-redux'; import { normalize } from 'normalizr'; @@ -8,11 +7,10 @@ import { game as gameSchema, gameList as gameListSchema } from '../schemas/games import { actions as gameActions, types } from '../redux/games'; import { actions as playerActions } from '../redux/players'; +import type { SevenWondersSession } from '../api/sevenWondersApi'; -import type { SocketObjectType, SocketType } from '../utils/websocket'; - -function* watchGames({ socket }: { socket: SocketType }): * { - const gamesChannel = yield call(createSubscriptionChannel, socket, '/topic/games'); +function* watchGames(session: SevenWondersSession): * { + const gamesChannel = yield apply(session, session.watchGames, []); try { while (true) { const gameList = yield take(gamesChannel); @@ -26,8 +24,8 @@ function* watchGames({ socket }: { socket: SocketType }): * { } } -function* watchLobbyJoined({ socket }: { socket: SocketType }): * { - const joinedLobbyChannel = yield call(createSubscriptionChannel, socket, '/user/queue/lobby/joined'); +function* watchLobbyJoined(session: SevenWondersSession): * { + const joinedLobbyChannel = yield apply(session, session.watchLobbyJoined, []); try { const joinedLobby = yield take(joinedLobbyChannel); const normalized = normalize(joinedLobby, gameSchema); @@ -41,27 +39,22 @@ function* watchLobbyJoined({ socket }: { socket: SocketType }): * { } } -function* createGame({ socket }: { socket: SocketType }): * { +function* createGame(session: SevenWondersSession): * { while (true) { const { gameName } = yield take(types.REQUEST_CREATE_GAME); - yield apply(socket, socket.send, ['/app/lobby/create', JSON.stringify({ gameName }), {}]); + yield apply(session, session.createGame, [gameName]); } } -function* joinGame({ socket }: { socket: SocketType }): * { +function* joinGame(session: SevenWondersSession): * { while (true) { const { gameId } = yield take(types.REQUEST_JOIN_GAME); - yield apply(socket, socket.send, ['/app/lobby/join', JSON.stringify({ gameId }), {}]); + yield apply(session, session.joinGame, [gameId]); } } -function* gameBrowserSaga(socketConnection: SocketObjectType): * { - yield [ - call(watchGames, socketConnection), - call(watchLobbyJoined, socketConnection), - call(createGame, socketConnection), - call(joinGame, socketConnection), - ]; +function* gameBrowserSaga(session: SevenWondersSession): * { + yield [call(watchGames, session), call(watchLobbyJoined, session), call(createGame, session), call(joinGame, session)]; } export default gameBrowserSaga; diff --git a/frontend/src/sagas/home.js b/frontend/src/sagas/home.js index 579c7fd6..eb65097b 100644 --- a/frontend/src/sagas/home.js +++ b/frontend/src/sagas/home.js @@ -1,18 +1,18 @@ import { apply, call, put, take } from 'redux-saga/effects'; -import { createSubscriptionChannel } from '../utils/websocket'; import { push } from 'react-router-redux'; import { actions, types } from '../redux/players'; +import type { SevenWondersSession } from '../api/sevenWondersApi'; -function* sendUsername({ socket }) { +function* sendUsername(session: SevenWondersSession) { while (true) { const { username } = yield take(types.REQUEST_CHOOSE_USERNAME); - yield apply(socket, socket.send, ['/app/chooseName', JSON.stringify({ playerName: username })]); + yield apply(session, session.chooseName, [username]); } } -function* validateUsername({ socket }) { - const usernameChannel = yield call(createSubscriptionChannel, socket, '/user/queue/nameChoice'); +function* validateUsername(session: SevenWondersSession) { + const usernameChannel = yield apply(session, session.watchNameChoice, []); while (true) { const user = yield take(usernameChannel); yield put(actions.setCurrentPlayer(user)); @@ -21,9 +21,8 @@ function* validateUsername({ socket }) { } } -function* usernameChoiceSaga(wsConnection) { - // TODO: Run sendUsername in loop when we have the ability to cancel saga on route change - yield [call(sendUsername, wsConnection), call(validateUsername, wsConnection)]; +function* homeSaga(session: SevenWondersSession) { + yield [call(sendUsername, session), call(validateUsername, session)]; } -export default usernameChoiceSaga; +export default homeSaga; diff --git a/frontend/src/sagas/lobby.js b/frontend/src/sagas/lobby.js index d11511e8..0c264dde 100644 --- a/frontend/src/sagas/lobby.js +++ b/frontend/src/sagas/lobby.js @@ -1,5 +1,6 @@ import { call, put, take, apply } from 'redux-saga/effects'; -import { createSubscriptionChannel } from '../utils/websocket'; +import type { Channel } from 'redux-saga'; + import { push } from 'react-router-redux'; import { normalize } from 'normalizr'; @@ -7,15 +8,16 @@ import { game as gameSchema } from '../schemas/games'; import { actions as gameActions, types } from '../redux/games'; import { actions as playerActions } from '../redux/players'; +import { SevenWondersSession } from '../api/sevenWondersApi'; -function getCurrentGameId() { +function getCurrentGameId(): number { const path = window.location.pathname; return path.split('lobby/')[1]; } -function* watchLobbyUpdates({ socket }) { - const currentGameId = getCurrentGameId(); - const lobbyUpdatesChannel = yield call(createSubscriptionChannel, socket, `/topic/lobby/${currentGameId}/updated`); +function* watchLobbyUpdates(session: SevenWondersSession) { + const currentGameId: number = getCurrentGameId(); + const lobbyUpdatesChannel: Channel = yield apply(session, session.watchLobbyUpdated, [currentGameId]); try { while (true) { const lobby = yield take(lobbyUpdatesChannel); @@ -28,9 +30,9 @@ function* watchLobbyUpdates({ socket }) { } } -function* watchGameStart({ socket }) { +function* watchGameStart(session: SevenWondersSession) { const currentGameId = getCurrentGameId(); - const gameStartedChannel = yield call(createSubscriptionChannel, socket, `/topic/lobby/${currentGameId}/started`); + const gameStartedChannel = yield apply(session, session.watchGameStarted, [currentGameId]); try { yield take(gameStartedChannel); yield put(gameActions.enterGame()); @@ -40,19 +42,15 @@ function* watchGameStart({ socket }) { } } -function* startGame({ socket }) { +function* startGame(session: SevenWondersSession) { while (true) { yield take(types.REQUEST_START_GAME); - yield apply(socket, socket.send, ['/app/lobby/startGame', {}]); + yield apply(session, session.startGame, []); } } -function* lobbySaga(socketConnection) { - yield [ - call(watchLobbyUpdates, socketConnection), - call(watchGameStart, socketConnection), - call(startGame, socketConnection), - ]; +function* lobbySaga(session: SevenWondersSession) { + yield [call(watchLobbyUpdates, session), call(watchGameStart, session), call(startGame, session)]; } export default lobbySaga; -- cgit