use react-select for ArticlePicker

Author: azaky

.gitignore

@@ -1,3 +1,6 @@
+.vscode/
+node_modules/
+
 # extensions examples
 examples/
 

extension/dist/background.js

@@ -5,8 +5,8 @@
   "main": "index.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
-    "dev": "webpack --watch",
-    "dev-local": "WIKIGAME_SERVER_URL=http://localhost:9454 webpack --watch",
+    "dev": "GENERATE_SOURCE_MAP=true webpack --watch",
+    "dev-local": "GENERATE_SOURCE_MAP=true WIKIGAME_SERVER_URL=http://localhost:9454 webpack --watch",
     "build": "webpack --mode production",
     "build-local": "WIKIGAME_SERVER_URL=http://localhost:9454 webpack --mode production",
     "pack": "webpack --mode production && echo 'Creating zip and crx file...' && crx pack dist -o dist/wikigame-v$npm_package_version.crx * && cd dist && zip -x *.crx -r wikigame-v$npm_package_version.zip *",
@@ -34,6 +34,7 @@
     "ramda": "^0.27.1",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
+    "react-select": "^3.1.0",
     "react-toastify": "^6.0.9",
     "regenerator-runtime": "^0.13.7",
     "socket.io-client": "^2.3.1"

extension/dist/content_script.js

@@ -256,18 +256,24 @@ chrome.runtime.onMessage.addListener(
         if (!ack || !ack.success) {
           if (ack.message) {
             sendNotification('error', ack.message);
-
+            
             // we call update to reset any obsolete fields
             updateData({}, updated => {
               sendMessage('update', updated);
+              // For now, this is only for resetting loading state in ArticlePicker
+              sendResponse({error: ack.message});
             });
           }
         } else if (ack.data) {
           updateData(ack.data, updated => {
             sendMessage('update', updated);
+            sendResponse(null);
           });
+        } else {
+          sendResponse(null);
         }
       });
+      return true;
     } else if (message.type === 'start') {
       console.log('start!');
 

extension/dist/wikigame-v1.0.0-beta.3.crx

@@ -3,7 +3,7 @@ import ReactDOM from 'react-dom';
 
 import { ToastContainer, toast } from 'react-toastify';
 import 'react-toastify/dist/ReactToastify.css';
-import './style.css';
+import './styles/style.css';
 
 import * as util from './util';
 import * as wiki from './wiki';

extension/dist/wikigame-v1.0.0-beta.3.zip

@@ -19,31 +19,29 @@ function LobbySidebar(props) {
   const {currentRound, rules, leaderboard, lastRound, host, username, players } = data;
   const isHost = host === username;
 
-  const onStartArticleChange = title => {
-    console.log('onStartArticleChange', title);
+  const onUpdate = (toUpdate, callback) => {
     if (!isHost) return;
     chrome.runtime.sendMessage({
       type: 'update',
-      data: { currentRound: { start: title } },
+      data: toUpdate,
+    }, reply => {
+      if (callback) callback(reply);
     });
   };
 
-  const onTargetArticleChange = title => {
+  const onStartArticleChange = (title, callback) => {
+    console.log('onStartArticleChange', title);
+    onUpdate({ currentRound: { start: title } }, callback);
+  };
+
+  const onTargetArticleChange = (title, callback) => {
     console.log('onTargetArticleChange', title);
-    if (!isHost) return;
-    chrome.runtime.sendMessage({
-      type: 'update',
-      data: { currentRound: { target: title } },
-    });
+    onUpdate({ currentRound: { target: title } }, callback);
   };
 
-  const onRulesChange = newRules => {
+  const onRulesChange = (newRules, callback) => {
     console.log('onRulesChange', newRules);
-    if (!isHost) return;
-    chrome.runtime.sendMessage({
-      type: 'update',
-      data: { rules: newRules },
-    });
+    onUpdate({ rules: newRules }, callback);
   };
 
   const onStartRound = () => {
@@ -56,15 +54,14 @@ function LobbySidebar(props) {
     chrome.runtime.sendMessage({ type: 'start' });
   };
 
-  const onTransferHost = (newHost) => {
+  const onTransferHost = (newHost, callback) => {
     console.log('onTransferHost', newHost);
-    if (!isHost) return;
-    if (!players.includes(newHost)) return;
+    if (!isHost || !players.includes(newHost)) {
+      if (callback) callback();
+      return;
+    }
     if (window.confirm(`You're about to transfer host to ${newHost}. Are you sure?`)) {
-      chrome.runtime.sendMessage({
-        type: 'update',
-        data: { host: newHost },
-      });
+      onUpdate({host: newHost}, callback);
     }
   };
 
@@ -111,7 +108,6 @@ function GameSidebar(props) {
 
   // enforce rules
   useEffect(() => {
-    console.log('enforce rules!');
     if (currentState.finished) return;
 
     // remove search bar
@@ -188,6 +184,7 @@ function GameSidebar(props) {
       <Rules
         rules={rules}
         disabled={true}
+        roundStarted={true}
       />
     </div>
   );