ui: Update Mailbox to use Timer module

ui/src/Layout.elm

@@ -38,9 +38,7 @@ import Html.Attributes
         )
 import Html.Events as Events
 import Modal
-import Process
 import Route exposing (Route)
-import Task
 import Timer exposing (Timer)
 
 

ui/src/Page/Mailbox.elm

@@ -1,7 +1,6 @@
 module Page.Mailbox exposing (Model, Msg, init, load, subscriptions, update, view)
 
 import Api
-import Browser.Dom as Dom
 import Data.Message as Message exposing (Message)
 import Data.MessageHeader exposing (MessageHeader)
 import Data.Session as Session exposing (Session)
@@ -56,6 +55,7 @@ import Modal
 import Route
 import Task
 import Time exposing (Posix)
+import Timer exposing (Timer)
 
 
 
@@ -75,8 +75,8 @@ type State
 type MessageState
     = NoMessage
     | LoadingMessage
-    | ShowingMessage VisibleMessage
-    | Transitioning VisibleMessage
+    | ShowingMessage Message
+    | Transitioning Message
 
 
 type alias MessageID =
@@ -90,12 +90,6 @@ type alias MessageList =
     }
 
 
-type alias VisibleMessage =
-    { message : Message
-    , markSeenAt : Maybe Int
-    }
-
-
 type alias Model =
     { session : Session
     , mailboxName : String
@@ -103,6 +97,7 @@ type alias Model =
     , bodyMode : Body
     , searchInput : String
     , promptPurge : Bool
+    , markSeenTimer : Timer
     , now : Posix
     }
 
@@ -115,6 +110,7 @@ init session mailboxName selection =
       , bodyMode = SafeHtmlBody
       , searchInput = ""
       , promptPurge = False
+      , markSeenTimer = Timer.empty
       , now = Time.millisToPosix 0
       }
     , load mailboxName
@@ -134,24 +130,8 @@ load mailboxName =
 
 
 subscriptions : Model -> Sub Msg
-subscriptions model =
-    let
-        subSeen =
-            case model.state of
-                ShowingList _ (ShowingMessage { message }) ->
-                    if message.seen then
-                        Sub.none
-
-                    else
-                        Time.every 250 MarkSeenTick
-
-                _ ->
-                    Sub.none
-    in
-    Sub.batch
-        [ Time.every (30 * 1000) Tick
-        , subSeen
-        ]
+subscriptions _ =
+    Time.every (30 * 1000) Tick
 
 
 
@@ -165,9 +145,8 @@ type Msg
     | CloseMessage
     | MessageLoaded (Result HttpUtil.Error Message)
     | MessageBody Body
-    | OpenedTime Posix
-    | MarkSeenTick Posix
-    | MarkedSeen (Result HttpUtil.Error ())
+    | MarkSeenTriggered Timer
+    | MarkSeenLoaded (Result HttpUtil.Error ())
     | DeleteMessage Message
     | DeletedMessage (Result HttpUtil.Error ())
     | PurgeMailboxPrompt
@@ -246,10 +225,10 @@ update msg model =
             , Cmd.none
             )
 
-        MarkedSeen (Ok _) ->
+        MarkSeenLoaded (Ok _) ->
             ( model, Cmd.none )
 
-        MarkedSeen (Err err) ->
+        MarkSeenLoaded (Err err) ->
             ( { model | session = Session.showFlash (HttpUtil.errorFlash err) model.session }
             , Cmd.none
             )
@@ -273,33 +252,6 @@ update msg model =
         OnSearchInput searchInput ->
             updateSearchInput model searchInput
 
-        OpenedTime time ->
-            case model.state of
-                ShowingList list (ShowingMessage visible) ->
-                    if visible.message.seen then
-                        ( model, Cmd.none )
-
-                    else
-                        -- Set 1500ms delay before reporting message as seen to backend.
-                        let
-                            markSeenAt =
-                                Time.posixToMillis time + 1500
-                        in
-                        ( { model
-                            | state =
-                                ShowingList list
-                                    (ShowingMessage
-                                        { visible
-                                            | markSeenAt = Just markSeenAt
-                                        }
-                                    )
-                          }
-                        , Cmd.none
-                        )
-
-                _ ->
-                    ( model, Cmd.none )
-
         PurgeMailboxPrompt ->
             ( { model | promptPurge = True }, Modal.resetFocusCmd ModalFocused )
 
@@ -317,20 +269,16 @@ update msg model =
             , Cmd.none
             )
 
-        MarkSeenTick now ->
+        MarkSeenTriggered timer ->
             case model.state of
-                ShowingList _ (ShowingMessage { message, markSeenAt }) ->
-                    case markSeenAt of
-                        Just deadline ->
-                            if Time.posixToMillis now >= deadline then
-                                updateMarkMessageSeen model message
+                ShowingList _ (ShowingMessage _) ->
+                    if timer == model.markSeenTimer then
+                        -- Matching timer means we have changed messages, mark this one seen.
+                        updateMarkMessageSeen model
 
                     else
                         ( model, Cmd.none )
 
-                        Nothing ->
-                            ( model, Cmd.none )
-
                 _ ->
                     ( model, Cmd.none )
 
@@ -355,14 +303,20 @@ updateMessageResult model message =
             ( model, Cmd.none )
 
         ShowingList list _ ->
+            let
+                newTimer =
+                    Timer.replace model.markSeenTimer
+            in
             ( { model
                 | state =
                     ShowingList
                         { list | selected = Just message.id }
-                        (ShowingMessage (VisibleMessage message Nothing))
+                        (ShowingMessage message)
                 , bodyMode = bodyMode
+                , markSeenTimer = newTimer
               }
-            , Task.perform OpenedTime Time.now
+              -- Set 1500ms delay before reporting message as seen to backend.
+            , Timer.schedule MarkSeenTriggered newTimer 1500
             )
 
 
@@ -465,10 +419,10 @@ updateDeleteMessage model message =
             ( model, Cmd.none )
 
 
-updateMarkMessageSeen : Model -> Message -> ( Model, Cmd Msg )
-updateMarkMessageSeen model message =
+updateMarkMessageSeen : Model -> ( Model, Cmd Msg )
+updateMarkMessageSeen model =
     case model.state of
-        ShowingList list (ShowingMessage visible) ->
+        ShowingList list (ShowingMessage message) ->
             let
                 updateSeen header =
                     if header.id == message.id then
@@ -482,15 +436,9 @@ updateMarkMessageSeen model message =
             in
             ( { model
                 | state =
-                    ShowingList (map updateSeen list)
-                        (ShowingMessage
-                            { visible
-                                | message = { message | seen = True }
-                                , markSeenAt = Nothing
+                    ShowingList (map updateSeen list) (ShowingMessage { message | seen = True })
               }
-                        )
-              }
-            , Api.markMessageSeen MarkedSeen message.mailbox message.id
+            , Api.markMessageSeen MarkSeenLoaded message.mailbox message.id
             )
 
         _ ->
@@ -557,10 +505,10 @@ view model =
                                 ++ " or enter a different username into the box on upper right."
                             )
 
-                    ShowingList _ (ShowingMessage { message }) ->
+                    ShowingList _ (ShowingMessage message) ->
                         viewMessage model.session.zone message model.bodyMode
 
-                    ShowingList _ (Transitioning { message }) ->
+                    ShowingList _ (Transitioning message) ->
                         viewMessage model.session.zone message model.bodyMode
 
                     _ ->