41: Refactor the Model for Greater Good - JSToElm
All Episodes

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

  • 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

Resources

Follow

Published 21 Jun 2018

A show about learning Elm, Functional Programing, and generally leveling up as a JS developer.
JavaScript To Elm on Twitter