From 99639c4122410be6ae7a351a35b9d7f0ce3972a2 Mon Sep 17 00:00:00 2001
From: "Mark T. Tomczak" <iam@fixermark.com>
Date: Mon, 3 Jan 2022 02:45:56 -0700
Subject: [PATCH] fix(lobby): only poll matches when match list is displayed
 (#1044)

Fixes #1043
---
 src/lobby/react.test.tsx | 72 +++++++++++++++++++++++++++++++++++++++-
 src/lobby/react.tsx      |  8 ++++-
 2 files changed, 78 insertions(+), 2 deletions(-)

diff --git a/src/lobby/react.test.tsx b/src/lobby/react.test.tsx
index 49d03de82..00b8a7884 100644
--- a/src/lobby/react.test.tsx
+++ b/src/lobby/react.test.tsx
@@ -27,9 +27,13 @@ Enzyme.configure({ adapter: new Adapter() });
 describe('lobby', () => {
   let lobby;
   const spy = jest.fn();
+  let setIntervalSpy;
+  let clearIntervalSpy;
   let components: any[];
 
   beforeEach(async () => {
+    setIntervalSpy = jest.spyOn(global, 'setInterval');
+    clearIntervalSpy = jest.spyOn(global, 'clearInterval');
     components = [
       {
         board: 'Board1',
@@ -45,6 +49,8 @@ describe('lobby', () => {
 
   afterEach(() => {
     spy.mockReset();
+    setIntervalSpy.mockRestore();
+    clearIntervalSpy.mockRestore();
   });
 
   describe('specify servers', () => {
@@ -157,15 +163,78 @@ describe('lobby', () => {
       );
       lobby = Enzyme.mount(<Lobby gameComponents={components} />);
     });
+    afterEach(() => {
+      Cookies.remove('lobbyState', { path: '/' });
+    });
     test('reset phase to list', async () => {
       expect(lobby.instance().state.phase).toBe('list');
     });
   });
 
-  describe('refresh interval', () => {
+  describe('refresh interval triggering', () => {
+    test('refresh does not start on initial component mount', () => {
+      lobby = Enzyme.mount(<Lobby gameComponents={components} />);
+
+      expect(setIntervalSpy).not.toHaveBeenCalled();
+    });
+
+    test('refresh starts when transitioning from ENTER lobby to LIST lobby', () => {
+      lobby = Enzyme.mount(<Lobby gameComponents={components} />);
+
+      lobby
+        .find('LobbyLoginForm')
+        .find('input')
+        .props()
+        .onKeyPress({ key: 'Enter' });
+
+      expect(setIntervalSpy).toHaveBeenCalledTimes(1);
+      expect(setIntervalSpy).toHaveBeenCalledWith(expect.any(Function), 2000);
+    });
+
+    test('refresh starts when component mounts and cookie state sends us to LIST', () => {
+      Cookies.save(
+        'lobbyState',
+        {
+          phase: 'list',
+          playerName: 'Bob',
+        },
+        { path: '/' }
+      );
+      lobby = Enzyme.mount(<Lobby gameComponents={components} />);
+
+      expect(setIntervalSpy).toHaveBeenCalledTimes(1);
+      expect(setIntervalSpy).toHaveBeenCalledWith(expect.any(Function), 2000);
+    });
+
+    test('refresh stops when transitioning from LIST to PLAY', () => {
+      Cookies.save(
+        'lobbyState',
+        {
+          phase: 'list',
+          playerName: 'Bob',
+        },
+        { path: '/' }
+      );
+      lobby = Enzyme.mount(<Lobby gameComponents={components} />);
+
+      lobby.instance()._startMatch('GameName1', { numPlayers: 2 });
+
+      expect(clearIntervalSpy).toHaveBeenCalledWith(
+        lobby.instance()._currentInterval
+      );
+    });
+  });
+
+  describe('refresh interval tracking', () => {
     beforeEach(() => {
       lobby = Enzyme.mount(<Lobby gameComponents={components} />);
+      lobby
+        .find('LobbyLoginForm')
+        .find('input')
+        .props()
+        .onKeyPress({ key: 'Enter' });
     });
+
     afterEach(() => lobby.unmount());
 
     test('lobby stores an interval ID', () => {
@@ -209,6 +278,7 @@ describe('lobby', () => {
 
     afterEach(() => {
       spyClient.mockReset();
+      Cookies.remove('lobbyState', { path: '/' });
     });
 
     describe('creating a match', () => {
diff --git a/src/lobby/react.tsx b/src/lobby/react.tsx
index 9c65f9124..5aa70d5ab 100644
--- a/src/lobby/react.tsx
+++ b/src/lobby/react.tsx
@@ -127,12 +127,14 @@ class Lobby extends React.Component<LobbyProps, LobbyState> {
     if (cookie.phase && cookie.phase === LobbyPhases.PLAY) {
       cookie.phase = LobbyPhases.LIST;
     }
+    if (cookie.phase && cookie.phase !== LobbyPhases.ENTER) {
+      this._startRefreshInterval();
+    }
     this.setState({
       phase: cookie.phase || LobbyPhases.ENTER,
       playerName: cookie.playerName || 'Visitor',
       credentialStore: cookie.credentialStore || {},
     });
-    this._startRefreshInterval();
   }
 
   componentDidUpdate(prevProps: LobbyProps, prevState: LobbyState) {
@@ -198,10 +200,12 @@ class Lobby extends React.Component<LobbyProps, LobbyState> {
   };
 
   _enterLobby = (playerName: string) => {
+    this._startRefreshInterval();
     this.setState({ playerName, phase: LobbyPhases.LIST });
   };
 
   _exitLobby = async () => {
+    this._clearRefreshInterval();
     await this.connection.disconnect();
     this.setState({ phase: LobbyPhases.ENTER, errorMsg: '' });
   };
@@ -282,10 +286,12 @@ class Lobby extends React.Component<LobbyProps, LobbyState> {
       credentials: this.connection.playerCredentials,
     };
 
+    this._clearRefreshInterval();
     this.setState({ phase: LobbyPhases.PLAY, runningMatch: match });
   };
 
   _exitMatch = () => {
+    this._startRefreshInterval();
     this.setState({ phase: LobbyPhases.LIST, runningMatch: null });
   };