add more servers and better error handling on UI

PabloDinella · Mar 8, 2020 · 5f90a1c · 5f90a1c
1 parent ebd0708
commit 5f90a1c
Show file tree

Hide file tree

Showing 5 changed files with 59 additions and 52 deletions.
diff --git a/extension/package.json b/extension/package.json
@@ -1,6 +1,6 @@
 {
   "name": "lets-play-tf2-chrome-extension",
-  "version": "0.1.0",
+  "version": "0.3.0",
   "private": true,
   "dependencies": {
     "@testing-library/jest-dom": "^4.2.4",
@@ -14,9 +14,10 @@
   "scripts": {
     "start": "react-scripts start",
     "start:prod": "REACT_APP_API=https://lets-play-tf2.herokuapp.com/ react-scripts start",
-    "build": "yarn build:app && yarn build:bg",
-    "build:app": "INLINE_RUNTIME_CHUNK=false REACT_APP_API=https://lets-play-tf2.herokuapp.com/ react-scripts build",
-    "build:bg": "REACT_APP_API=https://lets-play-tf2.herokuapp.com/ webpack --mode production --config background.webpack.config.js ./src/background.js --output ./build/background.js",
+    "build": "REACT_APP_API=https://lets-play-tf2.herokuapp.com/ yarn build:app && REACT_APP_API=https://lets-play-tf2.herokuapp.com/ yarn build:bg",
+    "build:dev": "REACT_APP_API=http://localhost:3001/ yarn build:app && REACT_APP_API=http://localhost:3001/ yarn build:bg",
+    "build:app": "INLINE_RUNTIME_CHUNK=false react-scripts build",
+    "build:bg": "webpack --mode production --config background.webpack.config.js ./src/background.js --output ./build/background.js",
     "test": "react-scripts test",
     "eject": "react-scripts eject"
   },

diff --git a/extension/public/manifest.json b/extension/public/manifest.json
@@ -2,7 +2,7 @@
   "manifest_version": 2,
   "name": "Let's play TF2",
   "author": "Pablo R. Dinella",
-  "version": "0.1.0",
+  "version": "0.3.0",
   "description": "Veja em tempo real quem está online nos servidores do Aww Yeah no Team Fortress 2.",
   "icons": {
     "16": "16.png",

diff --git a/extension/src/App.js b/extension/src/App.js
@@ -1,4 +1,5 @@
 import React from "react";
+import Server from "./Server";
 
 import "./App.css";
 
@@ -40,53 +41,10 @@ function App() {
               key={serverInfo.connect}
               style={{ borderColor: serverInfo.color }}
             >
-              <header>
-                <h2>{serverInfo.name}</h2>
-                <p
-                  onCopy={() => {
-                    window._gaq.push([
-                      "_trackEvent",
-                      "copy ip",
-                      serverInfo.name
-                    ]);
-                  }}
-                >
-                  connect {serverInfo.connect}
-                </p>
-                <p>
-                  <strong>mapa: </strong>
-                  {serverInfo.map}
-                </p>
-              </header>
-
-              {serverInfo.players.length === 0 && (
-                <p className="noPlayers">
-                  <em>Nenhum jogador :(</em>
-                </p>
-              )}
-
-              {serverInfo.players.length > 0 && (
-                <table>
-                  <thead>
-                    <tr>
-                      <th>nickname</th>
-                      <th>score</th>
-                    </tr>
-                  </thead>
-                  <tbody>
-                    {serverInfo.players
-                      .sort(
-                        ({ score: scoreA }, { score: scoreB }) =>
-                          scoreB - scoreA
-                      )
-                      .map(({ name, score, time }) => (
-                        <tr key={name + time}>
-                          <td>{name}</td>
-                          <td>{score}</td>
-                        </tr>
-                      ))}
-                  </tbody>
-                </table>
+              {!!serverInfo.error ? (
+                <center>{serverInfo.error}</center>
+              ) : (
+                <Server serverInfo={serverInfo} />
               )}
             </div>
           );

diff --git a/extension/src/Server.js b/extension/src/Server.js
@@ -0,0 +1,47 @@
+import React from "react";
+
+export default ({ serverInfo }) => (
+  <>
+    <header>
+      <h2>{serverInfo.name}</h2>
+      <p
+        onCopy={() => {
+          window._gaq.push(["_trackEvent", "copy ip", serverInfo.name]);
+        }}
+      >
+        connect {serverInfo.connect}
+      </p>
+      <p>
+        <strong>mapa: </strong>
+        {serverInfo.map}
+      </p>
+    </header>
+
+    {serverInfo.players.length === 0 && (
+      <p className="noPlayers">
+        <em>Nenhum jogador :(</em>
+      </p>
+    )}
+
+    {serverInfo.players.length > 0 && (
+      <table>
+        <thead>
+          <tr>
+            <th>nickname</th>
+            <th>score</th>
+          </tr>
+        </thead>
+        <tbody>
+          {serverInfo.players
+            .sort(({ score: scoreA }, { score: scoreB }) => scoreB - scoreA)
+            .map(({ name, score, time }) => (
+              <tr key={name + time}>
+                <td>{name}</td>
+                <td>{score}</td>
+              </tr>
+            ))}
+        </tbody>
+      </table>
+    )}
+  </>
+);
diff --git a/extension/src/background.js b/extension/src/background.js
@@ -11,6 +11,7 @@ function updateInfo(info) {
   localStorage.setItem("tf2", JSON.stringify(info));
   chrome.browserAction.setBadgeText({
     text: info
+      .filter(({ error }) => !error)
       .reduce((totalPlayers, item) => totalPlayers + item.players.length, 0)
       .toString()
   });