better tho

This commit is contained in:
Ryan Haskell-Glatz 2019-10-08 00:30:58 -05:00
parent c465d5effb
commit 1e2a4556d8

View File

@ -237,13 +237,12 @@ module Route exposing (Route(..))
type Route type Route
= Homepage = Homepage
| SignIn
``` ```
For now, there is only one route called `Homepage`. For now, there is only two routes: `Homepage` and `SignIn`.
__Note:__ Our `exposing` statement has `Route(..)` instead of `Route`. so we can access `Route.Homepage` outside of this module (We'll come back to that later) We also need to make `fromUrl` and `toPath` so our application handles routing and page navigation correctly!
For `src/Main.elm` to work, we also need to create and expose `fromUrl` and `toPath` so our application handles routing and page navigation correctly!
For that, we need to install the official `elm/url` package: For that, we need to install the official `elm/url` package:
@ -265,6 +264,7 @@ import Url.Parser as Parser exposing (Parser) ✨
type Route type Route
= Homepage = Homepage
| SignIn
fromUrl : Url -> Route ✨ fromUrl : Url -> Route ✨
-- TODO -- TODO
@ -280,14 +280,16 @@ Let's get started on implementing `fromUrl` by using the `Parser` module:
```elm ```elm
type Route type Route
= Homepage = Homepage
| SignIn
| NotFound ✨ -- see note #2 | NotFound ✨ -- see note #2
fromUrl : Url -> Route fromUrl : Url -> Route
fromUrl url = fromUrl url =
let let
router = router =
Parser.oneOf Parser.oneOf ✨ -- see note #1
[ Parser.map Homepage Parser.top ✨ -- see note #1 [ Parser.map Homepage Parser.top
, Parser.map SignIn (Parser.s "sign-in")
] ]
in in
Parser.parse router url Parser.parse router url
@ -296,10 +298,11 @@ fromUrl url =
__Notes__ __Notes__
1. Here we're matching the top url `/` with our `Homepage` 1. With `Parser.oneOf`, we match `/` to `Homepage` and `/sign-in` to `SignIn`.
2. `Parser.parse` returns a `Maybe Route` because it not find a match in our `router`. That means we need to add a `NotFound` case (good catch, Elm!) 2. `Parser.parse` returns a `Maybe Route` because it not find a match in our `router`. That means we need to add a `NotFound` case (good catch, Elm!)
#### toPath #### toPath
It turns out `toPath` is really easy, its just a case expression: It turns out `toPath` is really easy, its just a case expression:
@ -309,6 +312,7 @@ toPath : Route -> String ✨
toPath route = toPath route =
case route of case route of
Homepage -> "/" Homepage -> "/"
SignIn -> "/sign-in"
NotFound -> "/not-found" NotFound -> "/not-found"
``` ```
@ -328,6 +332,7 @@ import Url.Parser as Parser exposing (Parser)
type Route type Route
= Homepage = Homepage
| SignIn
| NotFound | NotFound
fromUrl : Url -> Route fromUrl : Url -> Route
@ -336,6 +341,7 @@ fromUrl url =
router = router =
Parser.oneOf Parser.oneOf
[ Parser.map Homepage Parser.top [ Parser.map Homepage Parser.top
, Parser.map SignIn (Parser.s "sign-in")
] ]
in in
Parser.parse router url Parser.parse router url
@ -345,6 +351,7 @@ toPath : Route -> String
toPath route = toPath route =
case route of case route of
Homepage -> "/" Homepage -> "/"
SignIn -> "/sign-in"
NotFound -> "/not-found" NotFound -> "/not-found"
``` ```
@ -367,7 +374,7 @@ our-project/
Flags.elm ✨ Flags.elm ✨
``` ```
For this app, we don't actually have flags, so we return an empty tuple! For this app, we don't actually have flags, so we return an empty tuple.
```elm ```elm
module Flags exposing (Flags) module Flags exposing (Flags)
@ -375,7 +382,7 @@ module Flags exposing (Flags)
type alias Flags = () type alias Flags = ()
``` ```
Let's move onto something more interesting! So let's move onto something more interesting!
--- ---
@ -391,7 +398,7 @@ our-project/
Global.elm ✨ Global.elm ✨
``` ```
Let's create `src/Global.elm` to define the `Model` and `Msg` types we'll share across pages and use in our layout functions: The purpose of `Global.elm` is to define the `Model` and `Msg` types we'll share across pages and use in our layout functions:
```elm ```elm
module Global exposing ( Model, Msg(..) ) module Global exposing ( Model, Msg(..) )
@ -407,7 +414,7 @@ type Msg
Here we create a simple record to keep track of the user's sign in status. Here we create a simple record to keep track of the user's sign in status.
Let's use `Global.Model` and `Global.Msg` in our layout: Let's see an example of `Global.Model` and `Global.Msg` being used in our layout:
### src/Components/Layout.elm ### src/Components/Layout.elm
@ -453,9 +460,9 @@ init _ =
) )
``` ```
Initially, our layout takes in three inputs: Initially, our layout has access to a record with three fields:
- __messages__ - not used here, but allows programmatic navigation to other pages. - __navigateTo__ - allows programmatic navigation to other pages.
- __route__ - the current route - __route__ - the current route
@ -489,13 +496,9 @@ update { navigateTo } msg model =
) )
``` ```
Here, our layout's update takes four inputs: In addition to the record we saw earlier with `init`, our layout's `update` function take a `Global.Msg` and `Global.Model`:
- __messages__ - allows programmatic navigation to other pages. That allows us to return an updated state of the app, and programmatically navigate to different pages!
- __route__ - the current route
- __flags__ - the initial JSON passed in with the app.
--- ---