Coding

Fetching User State | Vue.js + Vuetify + Firebase FULL PROJECT

  • 00:00:01 in the last video of this view beautify
  • 00:00:04 and firebase serious we add a logic to
  • 00:00:06 be able to register and unregister
  • 00:00:10 our users now that's nice however the
  • 00:00:13 problem is if we register and reload our
  • 00:00:16 app and therefore lose our existing
  • 00:00:17 application state we against Keys
  • 00:00:20 register even though we can see on
  • 00:00:22 firebase that the user has a
  • 00:00:24 registration now that's what I want to
  • 00:00:27 fix in this video I want to make sure
  • 00:00:29 that when we load our application I
  • 00:00:31 fetch that initial user state from the
  • 00:00:33 firebase database let's dive into that
  • 00:00:36 together
  • 00:00:40 now to fetch this initial user state
  • 00:00:42 will work in our index.js file in the
  • 00:00:45 store folder there we already got a lot
  • 00:00:47 of actions and so on and we also have
  • 00:00:51 one special action that's auto sign in
  • 00:00:54 now in Auto sign-in we basically commit
  • 00:00:57 set user right now now I want you
  • 00:01:00 basically dispatch another action at the
  • 00:01:03 same time I sign my user in so once I
  • 00:01:07 know that we have a valid user basically
  • 00:01:09 I want to dispatch a new action which
  • 00:01:12 I'll add right below it maybe I'll call
  • 00:01:14 it fetch user data because signing the
  • 00:01:17 user in is nice but now we're storing
  • 00:01:19 extra data in our normal database here
  • 00:01:22 the registrations we don't get this
  • 00:01:24 right now so we have to fetch it as soon
  • 00:01:26 as we know that we have a user who
  • 00:01:28 signed it
  • 00:01:29 so in this fetch a user data action I of
  • 00:01:33 course get commit and I'll also need
  • 00:01:35 access to my getters salt already add
  • 00:01:37 that to and pull that out of this
  • 00:01:39 context object
  • 00:01:41 now inside fetch user data I first of
  • 00:01:44 all as always want to commit set loading
  • 00:01:47 and set it to true to indicate we're
  • 00:01:49 loading some data and then I need to
  • 00:01:51 reach out to firebase to the database
  • 00:01:54 call it as a method and there to my
  • 00:01:58 users note for the given user which I
  • 00:02:01 can get with the getters so getters user
  • 00:02:04 ID because we stored all the
  • 00:02:06 registration data under users and then
  • 00:02:08 the different user IDs and then add
  • 00:02:11 slash registrations here now for that I
  • 00:02:15 want to get a value once once value does
  • 00:02:19 just that it fetches the data under this
  • 00:02:22 node once it doesn't set up a permanent
  • 00:02:24 listener it gives us this data once in
  • 00:02:27 the den block I can use this data in
  • 00:02:30 this function here now in this function
  • 00:02:34 I first of all want to retrieve the
  • 00:02:36 values I got and for that I access data
  • 00:02:38 with the well helper method the firebase
  • 00:02:41 data basically isn't an a format to be
  • 00:02:44 used immediately
  • 00:02:45 so if well we transform it into normal
  • 00:02:48 JavaScript data we can work with so
  • 00:02:51 wellness gives us the data we got and
  • 00:02:53 we'll be an object with all our
  • 00:02:55 registered meetups so if the
  • 00:02:57 automatically created Keys firebase
  • 00:03:00 created as properties and our meetup IDs
  • 00:03:04 as values of these properties so the
  • 00:03:07 work therefore I'll create a new
  • 00:03:08 variable which will name registered
  • 00:03:10 meetups which is an empty array
  • 00:03:11 initially now before I continue here
  • 00:03:14 let's console.log values let's comment
  • 00:03:17 out adjust your meetups and see what we
  • 00:03:19 get back right now now I got a linting
  • 00:03:22 error
  • 00:03:22 this is gatherers here now I can use
  • 00:03:25 that here and to see what happens here
  • 00:03:28 of course need to call or dispatch fetch
  • 00:03:31 user data now we're dispatching auto
  • 00:03:33 sign-in in the main dot JS file down
  • 00:03:36 here I can simply also dispatch fetch
  • 00:03:39 user data here and I don't need to pass
  • 00:03:44 a payload now with that if I save this
  • 00:03:47 and I go back to the application reload
  • 00:03:50 you see that's the data I get back this
  • 00:03:53 is my key value pair and now the key the
  • 00:03:57 property is this part here so this
  • 00:04:01 automatically generated key by firebase
  • 00:04:03 whereas the value is the firebase meetup
  • 00:04:06 ID or just immediate idea I should say
  • 00:04:09 so I'm interested in an array of these
  • 00:04:12 strings and I get back a JavaScript
  • 00:04:14 object unfortunately now what I can
  • 00:04:17 easily do is in my store I can loop
  • 00:04:21 through all these properties in this
  • 00:04:23 values object to store the values of
  • 00:04:26 these keys in my registered meetups
  • 00:04:28 array for that I'll comment this in
  • 00:04:31 again and simply create a for in loop
  • 00:04:35 where I have my keys in values and this
  • 00:04:40 can be kind of problematic from a naming
  • 00:04:42 perspective I guess so these will be my
  • 00:04:45 data pairs whatever you like and now I
  • 00:04:49 want you use for just registered meetups
  • 00:04:51 and push data pairs key onto it because
  • 00:04:57 if I access a given key on data pairs I
  • 00:05:00 get the value and that's just this
  • 00:05:02 meetup ID string I'm interested in so
  • 00:05:04 with that I get an array of
  • 00:05:06 meetup IDs I can again simply prove this
  • 00:05:12 by printing it to the console again now
  • 00:05:14 we have an array of media by DS that's
  • 00:05:16 looking good now I need to store that on
  • 00:05:19 the user of course however I also want
  • 00:05:23 to set this FB keys value you remember
  • 00:05:25 from the last video which allows me to
  • 00:05:27 easily get the ID of a registration to
  • 00:05:30 easily delete it that's basically almost
  • 00:05:33 what I get back in data pairs there I
  • 00:05:36 have a property which is the
  • 00:05:38 registration ID and the value which is
  • 00:05:40 Tomita by D now that is the wrong order
  • 00:05:43 I need a object where I have the
  • 00:05:45 property B the meetup ID and the value
  • 00:05:49 BD registration ID I need to delete so I
  • 00:05:52 need to swap this object basically the
  • 00:05:54 data pairs object now that can easily be
  • 00:05:57 done I can actually do it in the very
  • 00:05:59 same for in loop so I'll create a second
  • 00:06:02 array may be swapped pairs and swap
  • 00:06:07 pairs is an empty object initially now
  • 00:06:10 in this foreign loop where I go through
  • 00:06:12 all the data pairs I can now also use
  • 00:06:16 swap pairs and there I want to set data
  • 00:06:20 pairs key because remember data pairs
  • 00:06:27 key is the value is the meetup ID is
  • 00:06:29 what I want to use as a new key so
  • 00:06:31 therefore I assign it as a key to swap
  • 00:06:34 pairs and the value shall now shall now
  • 00:06:36 just be the key which is the key of the
  • 00:06:39 registration I know this can be
  • 00:06:40 confusing so let's quickly print both
  • 00:06:43 out so console.log registered meetups we
  • 00:06:47 saw that before but also the swap pairs
  • 00:06:50 let's save that and let's see what we
  • 00:06:52 get now we get an array of meetup IDs
  • 00:06:55 that makes sense we had that before and
  • 00:06:57 we get an object where the key
  • 00:07:00 remember this kr pdy is actually the
  • 00:07:05 meetup ID and the value K SNS is
  • 00:07:09 actually the idea of the registration so
  • 00:07:12 later when we define or when we see that
  • 00:07:14 we want to delete the registration for
  • 00:07:15 this meetup we can simply access this as
  • 00:07:18 a property and we get
  • 00:07:19 the value the registration ID we want to
  • 00:07:22 get rid of that's the logic we're
  • 00:07:23 already using and with that we're
  • 00:07:25 setting it up in a way to easily work so
  • 00:07:28 now we swap this and now I can create my
  • 00:07:31 updated user this is a JavaScript object
  • 00:07:35 with the ID being my user ID so the user
  • 00:07:38 can be retrieved from the gathers of
  • 00:07:40 course getters user ID and D registered
  • 00:07:45 meetups will be my registered meetups
  • 00:07:47 array I created so disarray and FB keys
  • 00:07:51 will be my swapped pairs and this is at
  • 00:07:55 least an empty object so it never fails
  • 00:07:57 if I try to access it but in the best
  • 00:07:59 case it holds any registrations I have
  • 00:08:02 now if that I can finally commit set
  • 00:08:06 loading and set this to false and also
  • 00:08:10 commit set user with my updated user we
  • 00:08:14 already have that set user mutation now
  • 00:08:17 I also want to catch any errors of
  • 00:08:19 course so let's add a catch Handler and
  • 00:08:22 in the catch handler in the error
  • 00:08:25 handler I will print out the error and
  • 00:08:27 of course also set loading to false now
  • 00:08:31 if I save that and go back to the
  • 00:08:33 application we see it reload and we also
  • 00:08:37 see that I now have the unregistered
  • 00:08:39 button begins because this user happens
  • 00:08:41 to be registered for this Meetup so if I
  • 00:08:44 now click this and confirm we're
  • 00:08:46 unregistered hence it is gone here too
  • 00:08:49 if I click register again we create a
  • 00:08:52 new registration and if I reload the app
  • 00:08:55 that state should be kept no one other
  • 00:08:59 thing is if I log out I actually get an
  • 00:09:03 error that's interesting cannot read
  • 00:09:05 property registered meetups of null well
  • 00:09:07 it makes sense for log out on that
  • 00:09:09 meetup the button here should disappear
  • 00:09:11 I'll take care about this in a second
  • 00:09:13 let me first of all sign in again with
  • 00:09:15 the other user I have in this project
  • 00:09:17 this is not the creator of that meetup
  • 00:09:19 and now if I wizard that meetup here
  • 00:09:22 reload this user is not registered for
  • 00:09:25 it because the other user is if I now
  • 00:09:27 click register with this user though
  • 00:09:30 here
  • 00:09:31 we get a second registration remember
  • 00:09:35 that this is the one with WSB or here
  • 00:09:39 the UD registration ideas ends with rwv
  • 00:09:42 if I now I register it hopefully deletes
  • 00:09:46 that and it does so this works now with
  • 00:09:49 multiple users queue however let's fix
  • 00:09:52 that back here when we log out that of
  • 00:09:55 course stems from the fact that we try
  • 00:09:57 to find out if the user viewing this
  • 00:09:59 page is register or not and we're logged
  • 00:10:01 out there is no user hence there is no
  • 00:10:03 registered Madhav's array we could check
  • 00:10:05 well that's something we can easily
  • 00:10:07 prevent though let's go to the meetup
  • 00:10:10 dot view file and in there the app
  • 00:10:14 meetup register dialog here I want to
  • 00:10:17 make sure we only displayed us if we are
  • 00:10:19 authenticated so if we if and then user
  • 00:10:23 is authenticated this is our computer
  • 00:10:28 property here we already have I also
  • 00:10:30 want to make sure we don't see this
  • 00:10:32 button if we already creator so only
  • 00:10:34 show it if we are authenticated and if
  • 00:10:37 we are not de creator so not user is
  • 00:10:40 creator now if there if I save this we
  • 00:10:44 don't see that button and we don't get
  • 00:10:46 an error if I now reload this meetup
  • 00:10:48 page when I'm not logged in if I do a
  • 00:10:51 sign-in though with the Creator account
  • 00:10:55 you'll see no button if I switch to the
  • 00:10:59 our account so the user who didn't
  • 00:11:01 create this I should see my button and I
  • 00:11:05 do and I should be able to trigger this
  • 00:11:07 – and now the registration is finished
  • 00:11:10 and overall I'm happy with that
  • 00:11:12 application now we could always continue
  • 00:11:14 on with it we could work on the profile
  • 00:11:17 where we don't have anything yet you
  • 00:11:19 could display all registered meetups
  • 00:11:21 here you can add email notifications if
  • 00:11:24 you do sign up but I'm happy with the
  • 00:11:27 state of the project as it is you have
  • 00:11:29 to come to an end sometimes and I have
  • 00:11:31 so many new ideas I want to work on so
  • 00:11:34 this is the project as I will conclude
  • 00:11:36 it for now well almost there will be one
  • 00:11:39 more episode where I will do some
  • 00:11:42 optimizations split up my store
  • 00:11:45 and see if there's something else I feel
  • 00:11:47 we can improve or we should improve so
  • 00:11:50 we'll definitely have one more video
  • 00:11:51 until then have a great time bye