33: Stay in production - JSToElm
All Episodes

33: Stay in production

So I all the rewriting and refactoring, we haven't shipped out a release of meow notes in a while. The first rule of our refactor was to always keep it in a state of usability. That way problems we have, or choices we make will come up sooner, rather than later!

Update to Prod

  • isAuthenticated not updating

    • oh so SOMEONE hardcoded true to the incoming update case for isAuthenticated!
    • So we had only sort of build the JS Interop stuff, we didn’t really see it all the way through!
    • sendData({ tag: "IsAuthenticated", data: this.props.isAuthenticated });
    • Then just ignoring it. D’oh
    • IncomingData Union Type where UpdateAuth is now Result and String or Bool
    • This is because we need to decode the incoming JSON payload and make sure it is what what we say it is, or we need Result to Err, instead of OK.
type IncomingData
    = NotesLoaded (Result String (List Note))
    | UpdateAuth (Result String Bool)
  • onCLick events pushing history without react components

    • ugh, so I have meaningfully avoided this for a while now
    • and I thought I was ramping up to face it head on last week with a look at routing.
    • So, with help from friend of the show, we probably want to handle routing last. Let react router Dom handle it
    • BUT we need to be able to trigger a route change from Elm. So a minute ago we went through the process of actually using our JSInterop to send in updated bool data on if user is authenticated. Now Elm is going to send out a new route for the app over ports
    • Outgoing Data Union Type need RedirectTo that will take our string that will be our route we’re headed to.
type OutgoingData
    = FetchNotes String
    | RedirectTo String
    | LogError String
  • And our Send Data function takes an OutgoingData Type, matches on the that type, and returns a Cmd msg
  • So in that pattern match we use outgoingData port that takes a type of Generic Data, and that is our record with tag property and data that is of type Json Encode Value
type alias GenericData =
    { tag : String, data : Json.Encode.Value }

Picks

Resources

Follow

Published 19 Apr 2018

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