ui: Convert Layout to use Effects

ui/src/Effect.elm

@@ -3,10 +3,12 @@ module Effect exposing
     , addRecent
     , append
     , batch
+    , clearFlash
     , deleteMessage
     , disableRouting
     , enableRouting
     , focusModal
+    , focusModalResult
     , getGreeting
     , getHeaderList
     , getMessage
@@ -64,6 +66,7 @@ type ApiEffect msg
 type SessionEffect
     = FlashClear
     | FlashShow Session.Flash
+    | ModalFocusResult Modal.Msg
     | RecentAdd String
     | RoutingDisable
     | RoutingEnable
@@ -233,6 +236,9 @@ performSession ( session, effect ) =
         FlashShow flash ->
             ( Session.showFlash flash session, Cmd.none )
 
+        ModalFocusResult result ->
+            ( Modal.updateSession result session, Cmd.none )
+
         RoutingDisable ->
             ( Session.disableRouting session, Cmd.none )
 
@@ -283,6 +289,11 @@ focusModal toMsg =
     ModalFocus toMsg
 
 
+focusModalResult : Modal.Msg -> Effect msg
+focusModalResult msg =
+    SessionEffect (ModalFocusResult msg)
+
+
 deleteMessage : HttpResult msg -> String -> String -> Effect msg
 deleteMessage toMsg mailboxName id =
     ApiEffect (DeleteMessage toMsg mailboxName id)

ui/src/Layout.elm

@@ -1,7 +1,7 @@
 module Layout exposing (Model, Msg, Page(..), frame, init, reset, update)
 
-import Browser.Navigation as Nav
 import Data.Session as Session exposing (Session)
+import Effect exposing (Effect)
 import Html
     exposing
         ( Attribute
@@ -39,7 +39,7 @@ import Html.Attributes
         )
 import Html.Events as Events
 import Modal
-import Route exposing (Route)
+import Route
 import Timer exposing (Timer)
 
 
@@ -96,46 +96,31 @@ type Msg
     | RecentMenuToggled
 
 
-update : Msg -> Model msg -> Session -> ( Model msg, Session, Cmd msg )
+update : Msg -> Model msg -> ( Model msg, Effect msg )
-update msg model session =
+update msg model =
     case msg of
         ClearFlash ->
-            ( model
+            ( model, Effect.clearFlash )
-            , Session.clearFlash session
-            , Cmd.none
-            )
 
         MainMenuToggled ->
-            ( { model | mainMenuVisible = not model.mainMenuVisible }
+            ( { model | mainMenuVisible = not model.mainMenuVisible }, Effect.none )
-            , session
-            , Cmd.none
-            )
 
         ModalFocused message ->
-            ( model
+            ( model, Effect.focusModalResult message )
-            , Modal.updateSession message session
-            , Cmd.none
-            )
 
         ModalUnfocused ->
-            ( model, session, Modal.resetFocusCmd (ModalFocused >> model.mapMsg) )
+            ( model, Effect.focusModal (ModalFocused >> model.mapMsg) )
 
         OnMailboxNameInput name ->
-            ( { model | mailboxName = name }
+            ( { model | mailboxName = name }, Effect.none )
-            , session
-            , Cmd.none
-            )
 
         OpenMailbox ->
             if model.mailboxName == "" then
-                ( model, session, Cmd.none )
+                ( model, Effect.none )
 
             else
                 ( model
-                , session
+                , Effect.navigateRoute True (Route.Mailbox model.mailboxName)
-                , Route.Mailbox model.mailboxName
-                    |> session.router.toPath
-                    |> Nav.pushUrl session.key
                 )
 
         RecentMenuMouseOver ->
@@ -143,20 +128,19 @@ update msg model session =
                 | recentMenuVisible = True
                 , recentMenuTimer = Timer.cancel model.recentMenuTimer
               }
-            , session
+            , Effect.none
-            , Cmd.none
             )
 
         RecentMenuMouseOut ->
             let
+                -- Keep the recent menu open for a moment even if the mouse leaves it.
                 newTimer =
                     Timer.replace model.recentMenuTimer
             in
             ( { model
                 | recentMenuTimer = newTimer
               }
-            , session
+            , Effect.schedule (RecentMenuTimeout >> model.mapMsg) newTimer 400
-            , Timer.schedule (RecentMenuTimeout >> model.mapMsg) newTimer 400
             )
 
         RecentMenuTimeout timer ->
@@ -165,18 +149,16 @@ update msg model session =
                     | recentMenuVisible = False
                     , recentMenuTimer = Timer.cancel timer
                   }
-                , session
+                , Effect.none
-                , Cmd.none
                 )
 
             else
                 -- Timer was no longer valid.
-                ( model, session, Cmd.none )
+                ( model, Effect.none )
 
         RecentMenuToggled ->
             ( { model | recentMenuVisible = not model.recentMenuVisible }
-            , session
+            , Effect.none
-            , Cmd.none
             )
 
 

ui/src/Main.elm

@@ -199,12 +199,10 @@ updateMain msg model session =
 
         LayoutMsg subMsg ->
             let
-                ( layout, newSession, cmd ) =
+                ( layout, effect ) =
-                    Layout.update subMsg model.layout session
+                    Layout.update subMsg model.layout
             in
-            ( updateSession { model | layout = layout } newSession
+            ( { model | layout = layout }, effect ) |> performEffects
-            , cmd
-            )
 
         _ ->
             updatePage msg model |> performEffects