Implement React example of WS integration with Flipper

Summary: Create an example of how one can use `js-flipper` in a browser to connect to Flipper over WS.

Reviewed By: mweststrate

Differential Revision: D31688114

fbshipit-source-id: 135f826daeddeda8dca5b3df6504cc2bdc04dd1b

js/react-flipper-example/src/App.tsx

@@ -0,0 +1,27 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @format
+ */
+
+import {FC} from 'react';
+import FlipperTicTacToe from './FlipperTicTacToe';
+
+
+const App: FC = () => {
+  return (
+    <div>
+      <header>
+        React Flipper WebSocket Example
+      </header>
+      <section>
+        <FlipperTicTacToe />
+      </section>
+    </div>
+  );
+}
+
+export default App;

js/react-flipper-example/src/FlipperTicTacToe.css

@@ -0,0 +1,27 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @format
+ */
+
+.grid {
+    display: grid;
+    grid-template-rows: repeat(3, 40px);
+    grid-template-columns: repeat(3, 40px);
+}
+
+.cell {
+    line-height: 40px;
+    text-align: center;
+}
+
+.cell:disabled {
+    color: black;
+}
+
+.cell:hover:not(:disabled), .cell:focus:not(:disabled) {
+    background-color: blue;
+}

js/react-flipper-example/src/FlipperTicTacToe.tsx

@@ -0,0 +1,93 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @format
+ */
+
+import {useState, useEffect, FC} from 'react';
+import type {FlipperPluginConnection, FlipperClient} from 'js-flipper';
+import './FlipperTicTacToe.css';
+
+// We want to import and start flipper client only in development and test modes
+let flipperClientPromise: Promise<FlipperClient> | undefined;
+if (process.env.NODE_ENV !== 'production') {
+  flipperClientPromise = import('js-flipper').then(({flipperClient}) => {
+    flipperClient.start('React Tic-Tac-Toe');
+    return flipperClient;
+  });
+}
+
+interface GameState {
+  cells: string[];
+  turn: string;
+  winner: string;
+}
+
+const FlipperTicTacToe: FC = () => {
+  const [status, setStatus] = useState('Waiting for Flipper Desktop Player...');
+  const [gameState, setGameState] = useState<GameState>({
+    cells: [],
+    turn: ' ',
+    winner: ' ',
+  });
+  const [connection, setConnection] = useState<FlipperPluginConnection>();
+
+  useEffect(() => {
+    flipperClientPromise?.then(flipperClient => {
+      flipperClient.addPlugin({
+        getId() {
+          return 'ReactNativeTicTacToe';
+        },
+        onConnect(connection) {
+          setStatus('Desktop player present');
+          setConnection(connection);
+
+          // listen to updates
+          connection.receive('SetState', (gameState: GameState) => {
+            if (gameState.winner !== ' ') {
+              setStatus(
+                `Winner is ${gameState.winner}! Waiting for a new game...`,
+              );
+            } else {
+              setStatus(
+                gameState.turn === 'X'
+                  ? 'Your turn...'
+                  : 'Awaiting desktop players turn...',
+              );
+            }
+            setGameState(gameState);
+          });
+
+          // request initial state
+          connection.send('GetState');
+        },
+        onDisconnect() {
+          setConnection(undefined);
+          setStatus('Desktop player gone...');
+        },
+      });
+    });
+  }, []);
+
+  return (
+    <div>
+      <p>{status}</p>
+      <div className="grid">
+        {gameState.cells.map((state, idx) => (
+          <button
+            key={idx}
+            disabled={!connection || gameState.turn !== 'X' || state !== ' '}
+            onClick={() => connection?.send('XMove', {move: idx})}
+            className="cell">
+            {state}
+          </button>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default FlipperTicTacToe;

js/react-flipper-example/src/index.tsx

@@ -0,0 +1,20 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @format
+ */
+
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+import App from './App';
+
+ReactDOM.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+  document.getElementById('root')
+);

js/react-flipper-example/src/react-app-env.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @format
+ */
+
+/// <reference types="react-scripts" />