fix(lobby): Clean up & update refresh polling interval properly (#996)

boardgameio · Aug 30, 2021 · feb08a1 · feb08a1
1 parent 1368d55
commit feb08a1
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 1 deletion.
diff --git a/src/lobby/react.test.tsx b/src/lobby/react.test.tsx
@@ -162,6 +162,30 @@ describe('lobby', () => {
     });
   });
 
+  describe('refresh interval', () => {
+    beforeEach(() => {
+      lobby = Enzyme.mount(<Lobby gameComponents={components} />);
+    });
+    afterEach(() => lobby.unmount());
+
+    test('lobby stores an interval ID', () => {
+      const { _currentInterval } = lobby.instance();
+      expect(_currentInterval).toEqual(expect.any(Number));
+    });
+
+    test('updating interval prop, updates internal interval ID', () => {
+      const { _currentInterval } = lobby.instance();
+      lobby.setProps({ refreshInterval: 10000 });
+      expect(lobby.instance()._currentInterval).not.toEqual(_currentInterval);
+    });
+
+    test('updating other props does not update interval ID', () => {
+      const { _currentInterval } = lobby.instance();
+      lobby.setProps({ debug: true });
+      expect(lobby.instance()._currentInterval).toEqual(_currentInterval);
+    });
+  });
+
   describe('matches list', () => {
     const spyClient = jest.fn();
     beforeEach(async () => {

diff --git a/src/lobby/react.tsx b/src/lobby/react.tsx
@@ -115,11 +115,11 @@ class Lobby extends React.Component<LobbyProps, LobbyState> {
   };
 
   private connection?: ReturnType<typeof LobbyConnection>;
+  private _currentInterval?: NodeJS.Timeout;
 
   constructor(props: LobbyProps) {
     super(props);
     this._createConnection(this.props);
-    setInterval(this._updateConnection, this.props.refreshInterval);
   }
 
   componentDidMount() {
@@ -132,6 +132,7 @@ class Lobby extends React.Component<LobbyProps, LobbyState> {
       playerName: cookie.playerName || 'Visitor',
       credentialStore: cookie.credentialStore || {},
     });
+    this._startRefreshInterval();
   }
 
   componentDidUpdate(prevProps: LobbyProps, prevState: LobbyState) {
@@ -151,6 +152,25 @@ class Lobby extends React.Component<LobbyProps, LobbyState> {
       };
       Cookies.save('lobbyState', cookie, { path: '/' });
     }
+    if (prevProps.refreshInterval !== this.props.refreshInterval) {
+      this._startRefreshInterval();
+    }
+  }
+
+  componentWillUnmount() {
+    this._clearRefreshInterval();
+  }
+
+  _startRefreshInterval() {
+    this._clearRefreshInterval();
+    this._currentInterval = setInterval(
+      this._updateConnection,
+      this.props.refreshInterval
+    );
+  }
+
+  _clearRefreshInterval() {
+    clearInterval(this._currentInterval);
   }
 
   _createConnection = (props: LobbyProps) => {