feat(app-board): improve stop listening to game change

eficode · Feb 2, 2021 · 71a9161 · 71a9161
1 parent 5df5235
commit 71a9161
Show file tree

Hide file tree

Showing 5 changed files with 21 additions and 22 deletions.
diff --git a/packages/game-app/src/gameView/apis/listenToGameChanges.ts b/packages/game-app/src/gameView/apis/listenToGameChanges.ts
@@ -6,13 +6,11 @@ export default function listenToGameChanges(
   gameId: string,
   onData: (cardState: { state: CardState; cardId: string }) => void,
 ) {
-  console.debug('[listenToGameChanges] start listening');
   const changeSubscription = firebase
     .app(gameId)
     .database()
     .ref(`${FirebaseCollection.Cards}/${gameId}`)
     .on('child_changed', snapshot => {
-      console.debug('[listenToGameChanges] child_changed ', snapshot.val());
       onData({ state: snapshot.val(), cardId: snapshot.key! });
     });
 
@@ -21,7 +19,6 @@ export default function listenToGameChanges(
     .database()
     .ref(`${FirebaseCollection.Cards}/${gameId}`)
     .on('child_added', snapshot => {
-      console.debug('[listenToGameChanges] child_added ', snapshot.val());
       onData({ state: snapshot.val(), cardId: snapshot.key! });
     });
 

diff --git a/packages/game-app/src/gameView/components/GameView/GameView.tsx b/packages/game-app/src/gameView/components/GameView/GameView.tsx
@@ -13,7 +13,7 @@ import { PanelMode } from '../DeckPanel/DeckPanel';
 import TopWidgetsRow from '../TopWidgetsRow';
 import ZoomPanContainer from '../ZoomPanContainer';
 import ZoomPanContext from '../ZoomPanContext';
-import useStopListenOnlineStatus from '../../hooks/useStopListenOnlineStatus';
+import useStopListenOnRtdb from '../../hooks/useStopListenOnRtdb';
 import LoadingOverlay from '../LoadingOverlay';
 
 type GameProps = {
@@ -44,7 +44,7 @@ const GameView: React.FC<GameProps> = ({ zoomIn, zoomOut }) => {
     setBackGround(s => !s);
   }, []);
 
-  useStopListenOnlineStatus();
+  useStopListenOnRtdb();
 
   return (
     <ZoomPanContext initialPan={initialPan}>

diff --git a/...meView/hooks/useStopListenOnlineStatus.ts → ...src/gameView/hooks/useStopListenOnRtdb.ts b/...meView/hooks/useStopListenOnlineStatus.ts → ...src/gameView/hooks/useStopListenOnRtdb.ts
@@ -1,14 +1,16 @@
 import { batch, useDispatch } from 'react-redux';
 import { actions as loadBalancerActions } from '../../userGameStatus/slice';
+import { actions as gameActions } from '../slice';
 import { useEffect } from 'react';
 
-export default function useStopListenOnlineStatus() {
+export default function useStopListenOnRtdb() {
   const dispatch = useDispatch();
 
   useEffect(() => {
     return () => {
       batch(() => {
         dispatch(loadBalancerActions.stopListenToOnlineStatus());
+        dispatch(gameActions.stopListenOnGame());
       });
     };
   }, [dispatch]);

diff --git a/packages/game-app/src/gameView/sagas/loadGame.ts b/packages/game-app/src/gameView/sagas/loadGame.ts
@@ -1,14 +1,16 @@
-import { call, fork, put, spawn, take, takeEvery } from 'redux-saga/effects';
-import { actions, GameState } from '../slice';
-import selectBestRTDBInstance from '../../userGameStatus/apis/selectBestRTDBInstance';
+import { call, put, spawn, take, takeEvery } from 'redux-saga/effects';
+import { eventChannel } from 'redux-saga';
+
+import { Game } from '@pipeline/models';
 import { addRequestStatusManagement } from '@pipeline/requests-status';
 import { CardEntity, CardState, CardTypes } from '@pipeline/common';
+
+import { actions, GameState } from '../slice';
+import selectBestRTDBInstance from '../../userGameStatus/apis/selectBestRTDBInstance';
 import loadGame from '../apis/callLoadGame';
 import loadCardsForDeck from '../apis/callLoadCardsForDeck';
-import { Game } from '@pipeline/models';
 import { initializeRTDB } from '../apis/initializeRTDBInstance';
 import listenToGameChanges from '../apis/listenToGameChanges';
-import { eventChannel } from 'redux-saga';
 
 function firebaseGameChannel(gameId: string) {
   return eventChannel<{ state: CardState; cardId: string }>(emit => {
@@ -25,26 +27,21 @@ function firebaseGameChannel(gameId: string) {
  * or use the lastDrag Timestamp to determine the zindex dynamically
  * (pay attention to rerender of each card on update if all zindex ar changed at once)
  *
+ * handle errors
  *
  *
  */
 
 function* listenToCardState(gameId: string) {
   const channel = yield call(firebaseGameChannel, gameId);
 
-  yield fork(function* () {
-    yield take('CANCEL_WATCH');
-    channel.close();
+  yield takeEvery(channel, function* (value: any) {
+    const { state, cardId } = value;
+    yield put(actions.setCardState({ cardState: state, cardId }));
   });
 
-  try {
-    while (true) {
-      const { state, cardId } = yield take(channel);
-      yield put(actions.setCardState({ cardState: state, cardId }));
-    }
-  } catch (error) {
-    console.error(error);
-  }
+  yield take(actions.stopListenOnGame);
+  channel.close();
 }
 
 function* executeLoadGame(action: ReturnType<typeof actions.loadGame>) {

diff --git a/packages/game-app/src/gameView/slice.ts b/packages/game-app/src/gameView/slice.ts
@@ -170,6 +170,9 @@ const slice = createSlice({
         };
       }
     },
+    stopListenOnGame(state, action: PayloadAction) {
+      return initialState;
+    },
   },
 });
-Original file line number
+Diff line change
@@ Expand Up / @@ -170,6 +170,9 @@ const slice = createSlice({ @@
             };
           }
         },
+        stopListenOnGame(state, action: PayloadAction) {
+          return initialState;
+        },
       },
     });
@@ Expand Down @@