feat(react-native): handle multiplayer loading state in client (#1026)

Co-authored-by: delucis <[email protected]>

Author: kuket15

AUTHORS

@@ -17,3 +17,4 @@ Pete Nykänen
 Philihp Busby
 Jason Harrison
 Brendon Roberto
+Luca Vallisa

src/client/react-native.js

@@ -29,6 +29,14 @@ import { Client as RawClient } from './client';
  */
 export function Client(opts) {
   const { game, numPlayers, board, multiplayer, enhancer } = opts;
+  let { loading } = opts;
+
+  // Component that is displayed before the client has synced
+  // with the game master.
+  if (loading === undefined) {
+    const Loading = () => <></>;
+    loading = Loading;
+  }
 
   /*
    * WrappedBoard
@@ -96,6 +104,11 @@ export function Client(opts) {
       let _board = null;
 
       const state = this.client.getState();
+
+      if (state === null) {
+        return React.createElement(loading);
+      }
+
       const { matchID, playerID, ...rest } = this.props;
 
       if (board) {

src/client/react-native.test.js

@@ -12,6 +12,18 @@ import { Client } from './react-native';
 import Enzyme from 'enzyme';
 import Adapter from 'enzyme-adapter-react-16';
 import { Local } from './transport/local';
+import { Transport } from './transport/transport';
+
+class NoConnectionTransport extends Transport {
+  connect() {}
+  disconnect() {}
+  sendAction() {}
+  sendChatMessage() {}
+  requestSync() {}
+  updateMatchID() {}
+  updatePlayerID() {}
+  updateCredentials() {}
+}
 
 Enzyme.configure({ adapter: new Adapter() });
 
@@ -36,6 +48,25 @@ test('board is rendered', () => {
   game.unmount();
 });
 
+test('board is rendered with custom loading', () => {
+  const Loading = () => <>connecting...</>;
+
+  const Board = Client({
+    game: {},
+    board: TestBoard,
+    loading: Loading,
+    multiplayer: (opts) => new NoConnectionTransport(opts),
+  });
+
+  const game = Enzyme.mount(<Board />);
+  const loadingComponent = game.find(Loading);
+
+  expect(loadingComponent.props()).toEqual({});
+  expect(loadingComponent.text()).toBe('connecting...');
+
+  game.unmount();
+});
+
 test('board props', () => {
   const Board = Client({
     game: {},

src/client/react.tsx

@@ -73,7 +73,8 @@ export function Client<
   P extends BoardProps<G> = BoardProps<G>,
   ContextWithPlugins extends Ctx = Ctx
 >(opts: ReactClientOpts<G, P, ContextWithPlugins>) {
-  let { game, numPlayers, loading, board, multiplayer, enhancer, debug } = opts;
+  const { game, numPlayers, board, multiplayer, enhancer } = opts;
+  let { loading, debug } = opts;
 
   // Component that is displayed before the client has synced
   // with the game master.