From b0e796ee16c02713f03b0f249b8f6732a9b9326c Mon Sep 17 00:00:00 2001
From: Danila Fedorin <danila.fedorin@gmail.com>
Date: Thu, 27 Dec 2018 00:12:48 -0800
Subject: [PATCH] Add a button to reconnect.

---
 src/Main.elm           |  4 +++-
 src/Scylla/Model.elm   |  2 ++
 src/Scylla/Views.elm   | 22 +++++++++++++++-------
 static/scss/style.scss | 24 +++++++++++++++++++++---
 4 files changed, 41 insertions(+), 11 deletions(-)

diff --git a/src/Main.elm b/src/Main.elm
index 09a8320..418b705 100644
--- a/src/Main.elm
+++ b/src/Main.elm
@@ -49,6 +49,7 @@ init _ url key =
             , roomText = Dict.empty
             , transactionId = 0
             , userData = Dict.empty
+            , connected = True
             }
         cmd = getStoreValuePort "scylla.loginInfo"
     in
@@ -94,6 +95,7 @@ update msg model = case msg of
     SendFileResponse _ -> (model, Cmd.none)
     ReceiveMarkdown md -> updateMarkdown model md
     DismissError i -> updateDismissError model i
+    AttemptReconnect -> ({ model | connected = True }, firstSync model.apiUrl (Maybe.withDefault "" model.token))
 
 updateDismissError : Model -> Int -> (Model, Cmd Msg)
 updateDismissError m i = ({ m | errors = (List.take i m.errors) ++ (List.drop (i+1) m.errors)}, Cmd.none)
@@ -319,7 +321,7 @@ updateSyncResponse model r notify =
                 , setScrollCmd sr
                 , setReadReceiptCmd sr
                 ])
-            _ -> (model, Cmd.none)
+            _ -> ({ model | connected = False }, Cmd.none)
 
 subscriptions : Model -> Sub Msg
 subscriptions m =
diff --git a/src/Scylla/Model.elm b/src/Scylla/Model.elm
index 6fb8a6b..150be74 100644
--- a/src/Scylla/Model.elm
+++ b/src/Scylla/Model.elm
@@ -29,6 +29,7 @@ type alias Model =
     , roomText : Dict String String
     , transactionId : Int
     , userData : Dict Username UserData
+    , connected : Bool
     }
 
 type Msg =
@@ -64,6 +65,7 @@ type Msg =
     | SendFileResponse (Result Http.Error ())
     | ReceiveMarkdown MarkdownResponse
     | DismissError Int
+    | AttemptReconnect
 
 displayName : Model -> Username -> String
 displayName m s = Maybe.withDefault (senderName s) <| Maybe.andThen .displayName <| Dict.get s m.userData
diff --git a/src/Scylla/Views.elm b/src/Scylla/Views.elm
index e6c5738..b5ca917 100644
--- a/src/Scylla/Views.elm
+++ b/src/Scylla/Views.elm
@@ -18,6 +18,9 @@ import Html.Events exposing (onInput, onClick, preventDefaultOn)
 import Dict exposing (Dict)
 import Tuple
 
+maybeHtml : List (Maybe (Html Msg)) -> List (Html Msg)
+maybeHtml = List.filterMap (\i -> i)
+
 contentRepositoryDownloadUrl : ApiUrl -> String -> String
 contentRepositoryDownloadUrl apiUrl s =
     let
@@ -59,14 +62,19 @@ errorView i s = div [ class "error-wrapper", onClick <| DismissError i ] [ iconV
 baseView : Model -> Maybe (String, JoinedRoom) -> Html Msg
 baseView m jr = 
     let
-        roomView = case jr of
-            Just (id, r) -> joinedRoomView m id r
-            Nothing -> div [] []
+        roomView = Maybe.map (\(id, r) -> joinedRoomView m id r) jr
+        reconnect = reconnectView m
     in
-        div [ class "base-wrapper" ]
-        [ roomListView m
-        , roomView
-        ]
+        div [ class "base-wrapper" ] <| maybeHtml
+            [ Just <| roomListView m
+            , roomView
+            , reconnect
+            ]
+
+reconnectView : Model -> Maybe (Html Msg)
+reconnectView m = if m.connected
+    then Nothing
+    else Just <| div [ class "reconnect-wrapper", onClick AttemptReconnect ] [ iconView "zap", text "Disconnected. Click here to reconnect." ]
 
 roomListView : Model -> Html Msg
 roomListView m =
diff --git a/static/scss/style.scss b/static/scss/style.scss
index fe75e4c..d991a46 100644
--- a/static/scss/style.scss
+++ b/static/scss/style.scss
@@ -2,17 +2,20 @@
 $primary-color: #53C0FA;
 $primary-color-highlight: #4298C7;
 $primary-color-light: #9FDBFB;
-$active-input-color: #282d30;
+
 $background-color: #1b1e21;
 $background-color-dark: darken($background-color, 4%);
+
 $error-color: #f01d43;
 $error-color-dark: darken(#f01d43, 10%);
-$transition-duration: .125s;
 
-$inactive-input-color: darken($active-input-color, 3%);
+$active-input-color: #282d30;
 $active-input-border-color: $primary-color;
+$inactive-input-color: darken($active-input-color, 3%);
 $inactive-input-border-color: darken($inactive-input-color, 10%);
 
+$transition-duration: .125s;
+
 html, body {
     height: 100vh;
 }
@@ -160,6 +163,21 @@ div.room-link-wrapper {
     }
 }
 
+div.reconnect-wrapper {
+    position: fixed;
+    bottom: 20px;
+    left: 20px;
+    display: flex;
+    align-items: center;
+    background-color: $inactive-input-color;
+    border: 1px solid $inactive-input-border-color;
+    border-radius: 3px;
+
+    .feather-icon {
+        margin-right: 10px;
+    }
+}
+
 /*
  * The current room, if any.
  */