41: Refactor the Model for Greater Good

So we have been avoiding wrapping up our new Note page converting it over to Elm, and in that respect we've been doing a pretty good job I'd say. I feel like it was a huge first lift to get most of it working, which is why I've been hesitant to dive back it, I know, at least for me at this point, it's going to be a bit bumpy, but what the hell, makes for good podcasting.

Steps Get it working Get onSubmit to POST to the API

And onChange for the file input to do the PORT access to FileRead() that we build.

Remember we need to use ports to read in the file in base 64 Then pass it back to our Elm app until the user submits the note Then off it goes, back over ports to the the api via POST, The page is popped back to the list, which fetches the whole thing — again. And around and around we go. Let’s see the model type alias CreateNote = { content : String , imageFile : Maybe Image } type alias Model = { notes : List Note , isAuthenticated : Bool , route : Route , createNote : CreateNote } type alias Flags = { route : String } So things have gotten a bit convoluted over time. Refactor the model Thinking about the state of your app

We have

Logged In Anonymous

For each of these states, whether there is a List of type Note or not is predetermined.

Now within Logged in we have a variety of of possible states, no notes, fetching notes, unable to fetch notes, actually having notes, but let’s focus high level first The two things we really need is to describe our data is the incoming route passed to us by our react app, and a way to describe the user as being logged in, or anonymous. What about the rest you say? What about the note, the list of notes, or creating a new note with content and an image and, and, and? STOP AND THINK if the user is anonymous, can they have a list of notes or even create a note? if the user is logged in, can or should they ever see the welcome screen instead of a list of notes? I have a naturally tendency, like a lot of programmers new to functional, to solve possible states with functions and conditionals.

When it compiles it totally works

Refactor Link Diff

Let’s look at renderNotes as an example of composition

Takes a list of Notes and used to return Html Msg. And we accomplished this by mapping over each item in the list, and transforming it from a note record to an Html Msg with Bootstrappy properties using an anonymous function. And this worked fine, BUT this function is doing a whole heck of a lot of things. (also the rando side effect where it tucks a new note record in to redirect to the new note’s page. lol. that’s terrible) I can imagine one day in the not to distant future looking for where in the world this “new note” button gets created, and after many hours of hunting and tracing it down, I find it tucked inside the renderNotes function!!!!! Not cool past Jesse, not cool Off to PROD Picks

New Gatsby 2.0 Beta

Out With Gatsby Layout Components, In With StaticQuery Improved APIs Hotter Hot Reloading Upgraded Dependencies Babel v7, React 16, webpack v4 Ionic and Elm RN out at airbnb Resources Elm Conf US React Rally Making Impossible States Impossible Follow

JavaScript to Elm

Twitter: @jstoelm
Email: [email protected]

Jesse Tomchak

Twitter: @jtomchak