Transcript from the "port Modules, localForage, & Review" Lesson
[00:01:05] So this port key word essentially says, hey, Elm make this function exist for me. This is one of the only cases in Elm where we don't actually write out the definition of this function. We just write the type and Elm will generate a function that does that thing for us.
[00:03:17] So this is not done with ports, it's done with a separate mechanism, but essentially it follows the same characteristics as these. These are made available to Elm, these flags, sort of in the same way as when you start up a command line application. You get those flags that are only available on startup, and then if they want, they can use them to get going.
[00:03:35] In our case, this is just an example of passing in the initial session so that the very first time the page renders, we can know if the user is logged in. So what we're doing here is we're describing a way to storeSession information. Which is to say the authentication information, the current users username, their avatar, stuff like that and dealing with when it changes using a library known as local forage.
[00:03:58] So localForage is a wrapper around local storage and indexdb and a couple of different technologies. And were going to assume that we have some business requirement to store our session in that. Now in the actual example of this thing, the SPA example, the real world application, it uses local storage.
[00:04:16] But for purposes of this exercise we're gonna be using local forage and we're gonna be talking to it using these APIs right here. Okay, so this right here, starts up our Elm application, and here's how you subscribe to this storeSession command. So we say app.ports which is basically an object containing all of the ports that we've defined anywhere on our Elm application.
[00:05:23] So when we're storing the session, there's really two different use cases that we have there. One is we want to say, I just logged in, or maybe I just signed up and I want to store this user as, yeah, this is the new session. This is their authentication token, this is their username etc.
[00:05:38] Please go persist that so that it will still be around when we refresh the page. We also might want to use this for logging out. So we log out we might wanna say, hey,, just clear that sucker out. Well, I don't wanna store that anymore, we're logged out, we're all done with that.
[00:06:13] The way that the port keyword works is it knows when you send them Maybe, and then a primitive like a string, then it means I might be sending it null. If I see nothing send null, and I don't see nothing, if I see just, then send that value unwrapped.
[00:07:35] Fortunately, I have this handy dandy function that converts from a string to a message, so I'm gonna call this function to convert it into my particular message type. And then that message is gonna go straight into update with the current model and then from there update being brains of our application it's gonna do it's thing.
[00:08:11] Somebody logs out in one and you wanna be logged out in all of them. And then, since each of those are going to be subscribed to changes in the session, that's gonna be immediately reflected as soon as the logout actually happens. Okay, cool, so that's what we're sort of building up to is storing session data in localForage.
[00:08:30] The localForage API is very simple, so I'm just gonna cover it very quickly. Here's how it works, you say localForage.getItem, which is to say, some key value, localForage is a key value store. So you parse it the key which in our case, is gonna be the string session.
[00:08:47] And then it runs a callback that says, I obtained the value at that key, which might be null, if it was missing and then you run the code in that callback. So that's, in here, that's where we would say, app.ports.onSesionChange.send. Also, you can setItem, very similar API except here we're giving in the key and the value that we want to store inside the storage system.