Gradually use React hooks on the project

index.html

@@ -37,8 +37,8 @@
             <!-- <script src="./node_modules/react-dom/umd/react-dom.development.js"></script> -->
 
 
-        <script src="https://unpkg.com/react@16.7.0/umd/react.production.min.js"></script>
-        <script src="https://unpkg.com/react-dom@16.7.0/umd/react-dom.production.min.js"></script>
+        <script src="https://unpkg.com/react@16.8.0/umd/react.production.min.js"></script>
+        <script src="https://unpkg.com/react-dom@16.8.0/umd/react-dom.production.min.js"></script>
 
         <!-- Main -->
 

package.json

@@ -71,8 +71,8 @@
     "mousetrap": "^1.6.2",
     "pako": "^1.0.7",
     "raven-js": "^3.27.0",
-    "react": "^16.6.3",
-    "react-dom": "^16.6.3",
+    "react": "^16.8.0",
+    "react-dom": "^16.8.0",
     "react-icons": "^2.2.7",
     "react-modal": "^3.6.1",
     "request": "^2.88.0",
@@ -86,7 +86,7 @@
     "@types/jest": "^22.1.4",
     "@types/jest-environment-puppeteer": "^2.2.1",
     "@types/puppeteer": "^1.10.1",
-    "@types/react": "^16.7.8",
+    "@types/react": "^16.8.1",
     "@types/react-dom": "^16.0.11",
     "base64-js": "^1.3.0",
     "coveralls": "^3.0.2",

src/components/StatusBar.tsx

@@ -22,38 +22,32 @@
 import * as React from "react";
 import appStore from "../stores/AppStore";
 
-export class StatusBar extends React.Component<{}, {
-  hasStatus: boolean;
-  status: string;
-}> {
-  constructor(props: any) {
-    super(props);
-    this.state = {
-      hasStatus: false,
-      status: ""
-    };
-  }
-  onDidChangeStatus = () => {
-    this.setState({
+export function StatusBar() {
+  let [state, setState] = React.useState({
+    hasStatus: false,
+    status: ""
+  });
+
+  function onDidChangeStatus() {
+    setState({
       hasStatus: appStore.hasStatus(),
       status: appStore.getStatus()
     });
   }
-  componentDidMount() {
-    appStore.onDidChangeStatus.register(this.onDidChangeStatus);
-  }
-  componentWillUnmount() {
-    appStore.onDidChangeStatus.unregister(this.onDidChangeStatus);
-  }
-  render() {
-    let className = "status-bar";
-    if (this.state.hasStatus) {
-      className += " active";
-    }
-    return <div className={className}>
-      <div className="status-bar-item">
-        {this.state.status}
-      </div>
-    </div>;
+
+  React.useEffect(() => {
+    appStore.onDidChangeStatus.register(onDidChangeStatus);
+    return () => appStore.onDidChangeStatus.unregister(onDidChangeStatus);
+  });
+
+  let className = "status-bar";
+  if (state.hasStatus) {
+    className += " active";
   }
-}
+
+  return <div className={className}>
+    <div className="status-bar-item">
+      {state.status}
+    </div>
+  </div>;
+}