Add a button to reconnect.

This commit is contained in:
Danila Fedorin 2018-12-27 00:12:48 -08:00
parent 4de9063e67
commit b0e796ee16
4 changed files with 41 additions and 11 deletions

View File

@ -49,6 +49,7 @@ init _ url key =
, roomText = Dict.empty , roomText = Dict.empty
, transactionId = 0 , transactionId = 0
, userData = Dict.empty , userData = Dict.empty
, connected = True
} }
cmd = getStoreValuePort "scylla.loginInfo" cmd = getStoreValuePort "scylla.loginInfo"
in in
@ -94,6 +95,7 @@ update msg model = case msg of
SendFileResponse _ -> (model, Cmd.none) SendFileResponse _ -> (model, Cmd.none)
ReceiveMarkdown md -> updateMarkdown model md ReceiveMarkdown md -> updateMarkdown model md
DismissError i -> updateDismissError model i DismissError i -> updateDismissError model i
AttemptReconnect -> ({ model | connected = True }, firstSync model.apiUrl (Maybe.withDefault "" model.token))
updateDismissError : Model -> Int -> (Model, Cmd Msg) updateDismissError : Model -> Int -> (Model, Cmd Msg)
updateDismissError m i = ({ m | errors = (List.take i m.errors) ++ (List.drop (i+1) m.errors)}, Cmd.none) 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 , setScrollCmd sr
, setReadReceiptCmd sr , setReadReceiptCmd sr
]) ])
_ -> (model, Cmd.none) _ -> ({ model | connected = False }, Cmd.none)
subscriptions : Model -> Sub Msg subscriptions : Model -> Sub Msg
subscriptions m = subscriptions m =

View File

@ -29,6 +29,7 @@ type alias Model =
, roomText : Dict String String , roomText : Dict String String
, transactionId : Int , transactionId : Int
, userData : Dict Username UserData , userData : Dict Username UserData
, connected : Bool
} }
type Msg = type Msg =
@ -64,6 +65,7 @@ type Msg =
| SendFileResponse (Result Http.Error ()) | SendFileResponse (Result Http.Error ())
| ReceiveMarkdown MarkdownResponse | ReceiveMarkdown MarkdownResponse
| DismissError Int | DismissError Int
| AttemptReconnect
displayName : Model -> Username -> String displayName : Model -> Username -> String
displayName m s = Maybe.withDefault (senderName s) <| Maybe.andThen .displayName <| Dict.get s m.userData displayName m s = Maybe.withDefault (senderName s) <| Maybe.andThen .displayName <| Dict.get s m.userData

View File

@ -18,6 +18,9 @@ import Html.Events exposing (onInput, onClick, preventDefaultOn)
import Dict exposing (Dict) import Dict exposing (Dict)
import Tuple import Tuple
maybeHtml : List (Maybe (Html Msg)) -> List (Html Msg)
maybeHtml = List.filterMap (\i -> i)
contentRepositoryDownloadUrl : ApiUrl -> String -> String contentRepositoryDownloadUrl : ApiUrl -> String -> String
contentRepositoryDownloadUrl apiUrl s = contentRepositoryDownloadUrl apiUrl s =
let let
@ -59,14 +62,19 @@ errorView i s = div [ class "error-wrapper", onClick <| DismissError i ] [ iconV
baseView : Model -> Maybe (String, JoinedRoom) -> Html Msg baseView : Model -> Maybe (String, JoinedRoom) -> Html Msg
baseView m jr = baseView m jr =
let let
roomView = case jr of roomView = Maybe.map (\(id, r) -> joinedRoomView m id r) jr
Just (id, r) -> joinedRoomView m id r reconnect = reconnectView m
Nothing -> div [] []
in in
div [ class "base-wrapper" ] div [ class "base-wrapper" ] <| maybeHtml
[ roomListView m [ Just <| roomListView m
, roomView , 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 : Model -> Html Msg
roomListView m = roomListView m =

View File

@ -2,17 +2,20 @@
$primary-color: #53C0FA; $primary-color: #53C0FA;
$primary-color-highlight: #4298C7; $primary-color-highlight: #4298C7;
$primary-color-light: #9FDBFB; $primary-color-light: #9FDBFB;
$active-input-color: #282d30;
$background-color: #1b1e21; $background-color: #1b1e21;
$background-color-dark: darken($background-color, 4%); $background-color-dark: darken($background-color, 4%);
$error-color: #f01d43; $error-color: #f01d43;
$error-color-dark: darken(#f01d43, 10%); $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; $active-input-border-color: $primary-color;
$inactive-input-color: darken($active-input-color, 3%);
$inactive-input-border-color: darken($inactive-input-color, 10%); $inactive-input-border-color: darken($inactive-input-color, 10%);
$transition-duration: .125s;
html, body { html, body {
height: 100vh; 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. * The current room, if any.
*/ */