41: Refactor the Model for Greater Good

Javascript to Elm

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: [e-mail]

• Jesse Tomchak

  • Twitter: @jtomchak