From a3e05119fa84763b3de09cd876ac5a09659aac19 Mon Sep 17 00:00:00 2001
From: Drew DeVault <sir@cmpwn.com>
Date: Fri, 8 Sep 2017 14:07:31 +0900
Subject: [PATCH] Add autoconnect

---
 src/socket.js        |  4 ++++
 src/ui/connection.js | 22 +++++++++++++---------
 src/ui/server.js     | 17 ++++++++++++-----
 3 files changed, 29 insertions(+), 14 deletions(-)

diff --git a/src/socket.js b/src/socket.js
index 1a255aa..a75dded 100644
--- a/src/socket.js
+++ b/src/socket.js
@@ -41,3 +41,7 @@ export function ws_init(uri, open, close) {
   ws.addEventListener("message", ws_recv);
   ws.addEventListener("close", close);
 }
+
+export function ws_disconnect() {
+  ws.close();
+}
diff --git a/src/ui/connection.js b/src/ui/connection.js
index 4be45dd..8db29cf 100644
--- a/src/ui/connection.js
+++ b/src/ui/connection.js
@@ -16,14 +16,18 @@ import { SOCKET_STATE } from '../actions/socket';
 class ConnectionOverlay extends Component {
   constructor() {
     super();
-    this.state = {
-      uri: "ws://127.0.0.1:8412",
-      autoconnect: false,
-      connecting: false
-    };
-    // TODO: "connecting..." UI
-    // TODO: autoconnect
-    // TODO: gracefully handle dis/reconnections
+    const uri = localStorage.getItem("autoconnect");
+    this.state = { uri: uri || "ws://127.0.0.1:8412", autoconnect: !!uri };
+    if (uri) {
+      initialize(this.state.uri);
+    }
+  }
+
+  connect() {
+    if (this.state.autoconnect) {
+      localStorage.setItem("autoconnect", this.state.uri);
+    }
+    initialize(this.state.uri);
   }
 
   render() {
@@ -72,7 +76,7 @@ class ConnectionOverlay extends Component {
             </FormGroup>
             <button
               className="btn btn-primary"
-              onClick={() => initialize(this.state.uri)}
+              onClick={this.connect.bind(this)}
             >{socket.reason ? "Reconnect" : "Connect"}</button>
           </CardBlock>
         </Card>
diff --git a/src/ui/server.js b/src/ui/server.js
index cb55707..7712d19 100644
--- a/src/ui/server.js
+++ b/src/ui/server.js
@@ -1,19 +1,26 @@
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import { formatBitrate } from '../bitrate';
+import { ws_disconnect } from '../socket';
 
-function throttle(v) {
-  return v === null ? "Unlimited" : formatBitrate(v);
-}
+const throttle = _ => _ === null ? "Unlimited" : formatBitrate(_);
 
 function Server({ server }) {
   if (!server.id) {
-    // TODO: websocket status?
     return null;
   }
   return (
     <div>
-      <h3>Server</h3>
+      <h3>
+        Server
+        <button
+          className="btn btn-sm btn-outline-danger pull-right"
+          onClick={() => {
+            localStorage.removeItem("autoconnect");
+            ws_disconnect();
+          }}
+        >Disconnect</button>
+      </h3>
       <dl>
         <dt>Running since</dt>
         {/* TODO: pretty print dates */}