Fix navigation

Use mthadley/elm-hash-routing and also remove the animation. Seems like other people were also having issues: mdgriffith/elm-style-animation#64
mthadley · May 25, 2019 · 46ff775 · 46ff775
1 parent bbcd94e
commit 46ff775
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 101 deletions.
diff --git a/elm.json b/elm.json
@@ -17,20 +17,21 @@
             "elm-community/list-extra": "8.2.0",
             "joneshf/elm-tagged": "2.1.1",
             "krisajenkins/remotedata": "5.0.0",
-            "mdgriffith/elm-style-animation": "4.0.0",
+            "mthadley/elm-hash-routing": "1.0.1",
             "rtfeldman/elm-css": "16.0.1"
         },
         "indirect": {
             "Skinney/murmur3": "2.0.8",
-            "elm/bytes": "1.0.8",
-            "elm/file": "1.0.5",
             "elm/svg": "1.0.1",
             "elm/virtual-dom": "1.0.2",
             "rtfeldman/elm-hex": "1.0.0"
         }
     },
     "test-dependencies": {
         "direct": {},
-        "indirect": {}
+        "indirect": {
+            "elm/bytes": "1.0.8",
+            "elm/file": "1.0.5"
+        }
     }
 }
diff --git a/src/App.elm b/src/App.elm
@@ -1,8 +1,5 @@
 module App exposing (Model, Msg(..), init, subscriptions, update, view)
 
-import Animation
-import Animation.Messenger
-import Animation.Spring.Presets as Presets
 import Browser
 import Browser.Navigation exposing (Key)
 import Elements
@@ -25,12 +22,10 @@ import Views.Nav as Nav
 
 
 type alias Model =
-    { currentRoute : Route
-    , nextRoute : Route
+    { route : Route
     , page : Page
     , store : Store
     , key : Key
-    , style : Animation.Messenger.State Msg
     }
 
 
@@ -49,15 +44,10 @@ init _ url key =
 
         ( page, cmd, store ) =
             initPage route Store.init
-
-        style =
-            Animation.style <| animationProps In
     in
-    ( { currentRoute = route
-      , nextRoute = route
+    ( { route = route
       , key = key
       , page = page
-      , style = style
       , store = store
       }
     , cmd
@@ -122,46 +112,36 @@ view model =
         [ Elements.container []
             [ styles
             , Header.view
-            , content
+            , Nav.view model.route
+            , main_ [] [ content ]
             ]
         ]
             |> List.map Html.toUnstyled
     }
 
 
 viewMain : Model -> ( String, Html Msg )
-viewMain { page, store, style } =
-    let
-        ( title, content ) =
-            case page of
-                CategoryPage model ->
-                    CategoryPage.view store model
+viewMain { page, store } =
+    case page of
+        CategoryPage model ->
+            CategoryPage.view store model
 
-                ItemPage model ->
-                    Tuple.mapSecond (Html.map ItemPageMsg) <| ItemPage.view store model
+        ItemPage model ->
+            Tuple.mapSecond (Html.map ItemPageMsg) <| ItemPage.view store model
 
-                UserPage model ->
-                    UserPage.view store model
+        UserPage model ->
+            UserPage.view store model
 
-                NotFoundPage ->
-                    NotFoundPage.view
-    in
-    ( title
-    , fromUnstyled <|
-        UnstyledHtml.main_ (Animation.render style)
-            [ toUnstyled content
-            ]
-    )
+        NotFoundPage ->
+            NotFoundPage.view
 
 
 
 -- UPDATE
 
 
 type Msg
-    = ActivateRoute Route
-    | AnimationMsg Animation.Msg
-    | StoreMsg (Action Msg)
+    = StoreMsg (Action Msg)
       -- Routing
     | UrlRequest Browser.UrlRequest
     | UrlChange Route
@@ -174,44 +154,27 @@ type Msg
 update : Msg -> Model -> ( Model, Cmd Msg )
 update msg model =
     case ( msg, model.page ) of
-        ( UrlChange route, _ ) ->
-            ( if route == model.currentRoute then
-                model
-
-              else
-                { model
-                    | nextRoute = route
-                    , style =
-                        Animation.interrupt
-                            [ animate Out
-                            , Animation.Messenger.send <| ActivateRoute route
-                            ]
-                            model.style
-                }
-            , Cmd.none
-            )
+        ( UrlRequest urlRequest, _ ) ->
+            case urlRequest of
+                Browser.Internal url ->
+                    ( model, Browser.Navigation.pushUrl model.key (Url.toString url) )
+
+                Browser.External href ->
+                    ( model, Browser.Navigation.load href )
 
-        ( ActivateRoute route, _ ) ->
+        ( UrlChange route, _ ) ->
             let
                 ( page, cmd, store ) =
                     initPage route model.store
             in
             ( { model
-                | currentRoute = route
+                | route = route
                 , page = page
                 , store = store
-                , style = Animation.interrupt [ animate In ] model.style
               }
             , cmd
             )
 
-        ( AnimationMsg animationMsg, _ ) ->
-            let
-                ( style, cmd ) =
-                    Animation.Messenger.update animationMsg model.style
-            in
-            ( { model | style = style }, cmd )
-
         ( StoreMsg action, _ ) ->
             let
                 ( store, cmd, outCmd ) =
@@ -256,30 +219,6 @@ update msg model =
             ( model, Cmd.none )
 
 
-type Direction
-    = In
-    | Out
-
-
-animate : Direction -> Animation.Messenger.Step Msg
-animate =
-    Animation.toWith (Animation.spring Presets.zippy) << animationProps
-
-
-animationProps : Direction -> List Animation.Property
-animationProps direction =
-    case direction of
-        In ->
-            [ Animation.opacity 1
-            , Animation.translate (Animation.px 0) (Animation.px 0)
-            ]
-
-        Out ->
-            [ Animation.opacity 0
-            , Animation.translate (Animation.px 0) (Animation.px 12)
-            ]
-
-
 updateStoreWith : (a -> Msg) -> Action a -> Store -> ( Store, Cmd Msg )
 updateStoreWith f action store =
     let
@@ -293,8 +232,8 @@ updateStoreWith f action store =
 -- SUBS
 
 
-getPageSub : Model -> Sub Msg
-getPageSub { page, store } =
+subscriptions : Model -> Sub Msg
+subscriptions { page, store } =
     case page of
         CategoryPage model ->
             Sub.map CategoryPageMsg <| CategoryPage.subscriptions store model
@@ -307,11 +246,3 @@ getPageSub { page, store } =
 
         NotFoundPage ->
             Sub.none
-
-
-subscriptions : Model -> Sub Msg
-subscriptions model =
-    Sub.batch
-        [ Animation.subscription AnimationMsg [ model.style ]
-        , getPageSub model
-        ]
diff --git a/src/Main.elm b/src/Main.elm
@@ -1,14 +1,14 @@
 module Main exposing (main)
 
 import App exposing (Model, Msg, init, subscriptions, update, view)
-import Browser
+import Browser.Hash
 import Html.Styled exposing (toUnstyled)
 import Router
 
 
 main : Program () Model Msg
 main =
-    Browser.application
+    Browser.Hash.application
         { init = init
         , view = view
         , update = update