Coding

Register for Meetups | Vue.js + Vuetify + Firebase FULL PROJECT

  • 00:00:00 welcome back to the view of unify and
  • 00:00:03 firebase serious we're almost at the end
  • 00:00:05 of the series and we added a lot of
  • 00:00:08 functionalities to this application and
  • 00:00:10 the last weakness we made sure that we
  • 00:00:12 can't edit meetups we created in this
  • 00:00:15 video I want to make sure that we can
  • 00:00:16 actually register for meetups at least
  • 00:00:19 four meetups we didn't create so let's
  • 00:00:21 dive into that and let's start working
  • 00:00:22 on that feature
  • 00:00:27 now how do I want to be able to register
  • 00:00:29 for a meet-up if we have a look at an
  • 00:00:31 example meetup here we got this register
  • 00:00:34 button here on the bottom right corner
  • 00:00:35 off the Meetup
  • 00:00:36 the goal is that we can click this
  • 00:00:38 button obviously and open a dialog in
  • 00:00:40 which I can then confirm that I really
  • 00:00:43 want to register it so that I basically
  • 00:00:44 asked of course you could just register
  • 00:00:47 upon clicking the button but a little
  • 00:00:49 extra twist never hurts if I am
  • 00:00:51 registered I want to have an
  • 00:00:53 unregistered button here instead instead
  • 00:00:56 of the register button obviously and if
  • 00:00:58 I'm the creator of the meetup I don't
  • 00:01:00 want to have any button down there now
  • 00:01:02 we already have to register button so we
  • 00:01:04 can build up on that but I will actually
  • 00:01:06 build a new component for this a
  • 00:01:08 registration dialog and that basically
  • 00:01:11 follows the same pattern as all the
  • 00:01:13 other dialogues we've built over the
  • 00:01:15 last videos the Edit the date and so on
  • 00:01:17 dialogues we managed a lot of
  • 00:01:19 functionality in there and now I want to
  • 00:01:22 use an average I'll log for confirming
  • 00:01:24 that I want to register it's going to be
  • 00:01:26 a much simpler dialogue than the Edit
  • 00:01:28 details dialog and so on though now for
  • 00:01:31 that in the meetup folder i'll create a
  • 00:01:33 new subfolder and i'll name it
  • 00:01:36 registration because it's about
  • 00:01:39 registering for meetups in that folder i
  • 00:01:41 wanna create a component which i'll name
  • 00:01:44 register dialogue dot view to be in line
  • 00:01:47 with the average components where i open
  • 00:01:49 the dialogue so this also ends with
  • 00:01:51 dialogue in the name now let's build
  • 00:01:54 that dialogue here and for that we can
  • 00:01:57 actually use let's say the dates dialog
  • 00:01:59 though we're going to change a lot about
  • 00:02:02 it I'm still going to copy the whole
  • 00:02:04 file content in there but I'm going to
  • 00:02:07 clean up a lot of the things actually
  • 00:02:08 everything down there and this default
  • 00:02:11 object I want to write this from scratch
  • 00:02:13 later and in the template well we
  • 00:02:16 obviously will have a video log wrapper
  • 00:02:18 now I will get rid of the width here I
  • 00:02:21 want to have our automatic scaling
  • 00:02:22 because we will have very little content
  • 00:02:25 in there just a question basically I
  • 00:02:27 want to have a persistent dialogue which
  • 00:02:29 stays on top of the of the screen
  • 00:02:31 basically and I will open it or hook it
  • 00:02:34 up to a register dialog property which
  • 00:02:37 controls whether we can see this dialog
  • 00:02:40 or not
  • 00:02:40 now then we have a button and this
  • 00:02:44 button is our activator and that shall
  • 00:02:47 actually say register if we are
  • 00:02:49 registered or unregistered if we are not
  • 00:02:51 now to control this we of course need to
  • 00:02:55 find out if we are registered or not and
  • 00:02:57 that is something I want to find out
  • 00:02:59 with the help of UX because if we have a
  • 00:03:03 look at our store we see that for our
  • 00:03:06 user when we sign in and we will clean
  • 00:03:10 up the store to the in the next videos
  • 00:03:13 if we assign a user up or in we also get
  • 00:03:17 a list of the registered meetups now
  • 00:03:20 this list always is empty as of now
  • 00:03:22 because we got no way of registering
  • 00:03:24 this is about to change but that is the
  • 00:03:27 starting point with which I want to
  • 00:03:28 start so in the gathers it would be
  • 00:03:31 interesting to find out for which
  • 00:03:34 elements or meetups a user is registered
  • 00:03:37 and we already get the user the user has
  • 00:03:40 this registered meet-ups
  • 00:03:41 array I was just pointing to you so dad
  • 00:03:43 will be the starting point with which
  • 00:03:45 I'll find out if we should show a
  • 00:03:47 register or an unregistered button with
  • 00:03:51 that information
  • 00:03:52 let's go back and our register dialog
  • 00:03:54 and let's add a computed property in
  • 00:03:56 there the computed property I want a
  • 00:03:59 name add can be named user is registered
  • 00:04:02 because that's what I want to check and
  • 00:04:04 in there I'll reach out to the store of
  • 00:04:08 course
  • 00:04:08 so this store to the gathers and then as
  • 00:04:13 I just said to the user because the user
  • 00:04:15 has this registered meet-ups
  • 00:04:17 array now you could of course also build
  • 00:04:20 a getter which already gives you the
  • 00:04:22 finished information you are interested
  • 00:04:23 in here I'm going to put this logic into
  • 00:04:26 this component because it's basically
  • 00:04:28 the only place where I use it now what
  • 00:04:31 I'll do here is I'll use defined index
  • 00:04:33 method that's a default JavaScript
  • 00:04:36 method which allows me to find a
  • 00:04:38 specific element in an array of elements
  • 00:04:40 and gives me back the position at which
  • 00:04:42 this element can be found and this will
  • 00:04:45 be negative minus one if it doesn't find
  • 00:04:49 an element and that's what I want to
  • 00:04:50 take advantage of if it's greater than
  • 00:04:52 zero I know that we found
  • 00:04:54 registration if it's smaller than zero I
  • 00:04:57 know that the user is not registered the
  • 00:05:00 question then just is for which element
  • 00:05:02 am I looking well in there we're going
  • 00:05:04 to have a function arrow function where
  • 00:05:07 I will get up my meetup ID because this
  • 00:05:11 registered meetups array whilst
  • 00:05:13 currently being empty will in the end
  • 00:05:15 just hold an array of meetup IDs so the
  • 00:05:18 individual element which of course is
  • 00:05:20 passed to this function which gets
  • 00:05:22 executed and find index the individual
  • 00:05:24 element will be just such an ID a string
  • 00:05:27 in the end so in that function which we
  • 00:05:30 pass to find index I now want to return
  • 00:05:33 true if that meetup ID is all the D ID
  • 00:05:37 of the meetup we currently load it now
  • 00:05:40 for that I need to currently loaded
  • 00:05:41 meetup and I expect to get this wire
  • 00:05:43 props so here I'll also get the meetup
  • 00:05:46 ID so that's the meetup ID for which we
  • 00:05:49 click the registration button and with
  • 00:05:52 that information here I can return if
  • 00:05:54 the meetup ID here is equal to the
  • 00:05:57 meetup ID we have as data so to our
  • 00:06:00 props now just to clarify what's
  • 00:06:03 happening here find it next again runs
  • 00:06:06 this function here which we pass as an
  • 00:06:09 argument on every element in registered
  • 00:06:11 meetups and registered meetups will be
  • 00:06:13 an array of meetup IDs the loaded meetup
  • 00:06:17 for which we clicked on the registration
  • 00:06:18 button also is just or for which we for
  • 00:06:22 possibly show this dialogue I should say
  • 00:06:24 also has an ID of course and if the ID
  • 00:06:27 of the element for which we want to
  • 00:06:29 click the button happens to be part of
  • 00:06:32 our meetups
  • 00:06:33 in this registered meetups array we know
  • 00:06:36 that we already are signed up for this
  • 00:06:38 meetup so then I can show the and
  • 00:06:40 register button otherwise I show the
  • 00:06:42 register button so with that let's take
  • 00:06:44 this logic and let's use it and I do use
  • 00:06:48 it here at the top where I set up this
  • 00:06:50 button now of course you can use
  • 00:06:52 different approaches I'll simply go
  • 00:06:55 there and use string interpolation and
  • 00:06:58 check if user is registered if that is
  • 00:07:01 true and keep in mind this will be true
  • 00:07:04 if we find something well at least if I
  • 00:07:07 finish the condition
  • 00:07:08 that should be greater or equal than
  • 00:07:11 zero because that alone just returns me
  • 00:07:13 the position of that ID and that idea
  • 00:07:15 such as said where that position is
  • 00:07:18 going to be negative if we don't find a
  • 00:07:20 match so only if it's greater or equal
  • 00:07:23 than zero so we found an element at some
  • 00:07:25 position in this index in this array
  • 00:07:28 only if that's greater than zero I know
  • 00:07:30 that I am registered and this is what
  • 00:07:32 I'm checking so greater or equal than
  • 00:07:34 zero definitely has to be added here at
  • 00:07:36 the end this is the full condition I
  • 00:07:38 want to check now with that though I
  • 00:07:41 know that this will be true if I've
  • 00:07:42 found a match so if that is true then I
  • 00:07:46 want to show whoops with a ternary
  • 00:07:48 expression then I want to show
  • 00:07:50 unregister and otherwise I will show
  • 00:07:54 register now of course you could also
  • 00:07:57 outsource this into a computed property
  • 00:07:59 and not put it in line into the template
  • 00:08:01 I'll leave it here for now the thing is
  • 00:08:04 that you shouldn't put too much code
  • 00:08:06 into your templates short ternary
  • 00:08:09 expression like this one certainly isn't
  • 00:08:11 too bad but in general don't put too
  • 00:08:14 much logic into your template instead
  • 00:08:17 contain it into a new computer property
  • 00:08:19 you could create where you simply well
  • 00:08:21 perform this check and return this or
  • 00:08:24 this string anyways with that we make
  • 00:08:28 sure that the button shows the correct
  • 00:08:30 text taking advantage of our user is
  • 00:08:32 registered computed property we just set
  • 00:08:35 up this one here and now we can move on
  • 00:08:39 in this dialogue of course in this
  • 00:08:41 dialog the textview on a display depends
  • 00:08:44 on whether we are registered or not so
  • 00:08:47 here I can say unregister from Meetup
  • 00:08:51 question mark and only show this title
  • 00:08:54 if user is registered returns true and
  • 00:08:59 then I can duplicate this and say we
  • 00:09:02 else which I can use since we have a
  • 00:09:04 sibling of the same component type next
  • 00:09:07 to it here we could say register for
  • 00:09:10 Meetup
  • 00:09:11 so only one of the two titles is going
  • 00:09:14 to show up at a time but we make sure
  • 00:09:16 that it's the correct one depending on
  • 00:09:18 our registration status the next thing
  • 00:09:21 is in
  • 00:09:22 the body then so here we have a divider
  • 00:09:26 we can leave that here now in the body I
  • 00:09:28 don't want to have a date picker instead
  • 00:09:30 I'll add a V card text and there I'll
  • 00:09:35 just say you can always change your
  • 00:09:38 decision later on that's just an example
  • 00:09:43 text now I also need some actions and I
  • 00:09:47 will add these actions below the card
  • 00:09:51 text of course so add another row here
  • 00:09:54 we card actions like that and now the
  • 00:10:00 action shall basically be a confirm
  • 00:10:03 action that I do want to register or
  • 00:10:05 unregister or a cancel action so I can
  • 00:10:08 add a V button and say cancel and the
  • 00:10:13 number one where I say confirm now I
  • 00:10:17 want to stall these buttons differently
  • 00:10:19 the cancel button there I want to add a
  • 00:10:21 class of red text dark and one to make
  • 00:10:25 it well red because we cancel and I'll
  • 00:10:28 make it a flat button also I want to
  • 00:10:30 register my click listener and basically
  • 00:10:32 say that I want to close the dialog by
  • 00:10:35 setting register dialog to false because
  • 00:10:38 keep in mind and I'm just splitting this
  • 00:10:41 over lines keep in mind that register
  • 00:10:43 dialog is bound by a two-way binding to
  • 00:10:46 the V dialogue over V model that's
  • 00:10:48 exposed by beautify and therefore
  • 00:10:50 whatever we set this to true the
  • 00:10:52 dialogue will show up if we set it to
  • 00:10:54 false the dialogue will disappear so
  • 00:10:57 that's exactly what I do upon clicking
  • 00:10:58 cancel we don't do anything except for
  • 00:11:00 hiding the dialogue now on the upper
  • 00:11:03 button there I want to also add a class
  • 00:11:06 use some green text maybe because here
  • 00:11:09 we are confirming also you start in one
  • 00:11:12 to make it a bit darker make this button
  • 00:11:15 a flat button and add a click listener
  • 00:11:17 also split this over multiple lines on
  • 00:11:20 this click listener here I want to
  • 00:11:22 execute on agree and that's going to be
  • 00:11:25 a method which basically kicks off the
  • 00:11:27 registration process
  • 00:11:29 dispatches some action which in the end
  • 00:11:31 reaches out to firebase and stores the
  • 00:11:33 registration there too
  • 00:11:34 so there
  • 00:11:35 our button now let's have a look at it
  • 00:11:36 and for that we of course have to use
  • 00:11:38 that component right it's registered
  • 00:11:41 dialogue so let's register it as a
  • 00:11:43 global component may be in the main dot
  • 00:11:45 JS file and there I'll duplicate the
  • 00:11:48 edit meetup time dialog
  • 00:11:50 I'll also duplicate the import reach out
  • 00:11:53 to the registration folder there and in
  • 00:11:55 that folder I now want to import the
  • 00:11:57 register dialog that's also the name
  • 00:12:00 I'll give the component here so here
  • 00:12:03 register dialog and this can be the app
  • 00:12:05 added register dialog maybe and not AB
  • 00:12:10 edit just a producer maybe app me tap
  • 00:12:14 register I'm a fan of clear names even
  • 00:12:17 though they tend to get a bit long I
  • 00:12:18 guess well anyways this is the meetup
  • 00:12:21 register dialog referring to the newly
  • 00:12:23 created component we can now use that on
  • 00:12:26 our meetup component and just as we use
  • 00:12:29 the our dialogues for date and time and
  • 00:12:31 so on we can just put them in here where
  • 00:12:34 we had the button in the past so now
  • 00:12:37 let's add our new dialog and don't
  • 00:12:39 forget we need to pass some props to the
  • 00:12:41 dialog we need to pass our meetup ID to
  • 00:12:44 it so I'll do that here pass meetup ID
  • 00:12:49 and this of course is simply equal to
  • 00:12:51 meetup ID a meetup is of course loaded
  • 00:12:55 here in this component we have it here
  • 00:12:59 we get it from the store so with that
  • 00:13:02 let's save this and let's see it in our
  • 00:13:04 application loading a meetup here
  • 00:13:07 see you just this button keep on
  • 00:13:09 occurring this error I mean we have an
  • 00:13:11 error here let's see any bullet handler
  • 00:13:14 for even click yeah makes sense um India
  • 00:13:17 registered our I'm handling a click on
  • 00:13:20 confirm with on agree and we don't have
  • 00:13:22 that method yet so to get rid of that
  • 00:13:24 error all quickly added already even
  • 00:13:26 though we don't do anything in there yet
  • 00:13:28 so now let's make sure we add this
  • 00:13:31 without landing errors and reload one
  • 00:13:34 more time now it should work what else
  • 00:13:37 property or method register dialogue is
  • 00:13:39 not too fine on the instance although a
  • 00:13:42 valid point that is something you
  • 00:13:45 definitely have to keep in mind we're
  • 00:13:46 binding to reduce
  • 00:13:48 dialog here with two-way binding but we
  • 00:13:50 never set up his property it's easy to
  • 00:13:52 overlook because I created so many
  • 00:13:53 dialogues here but of course we have to
  • 00:13:56 set this up so that's a data property
  • 00:13:58 return an object in there and set
  • 00:14:01 register dialogue here to false
  • 00:14:04 initially so that it doesn't show up by
  • 00:14:07 default now if we have a look at this
  • 00:14:11 yeah get rid of this limiting error now
  • 00:14:14 we should be able to reload this with
  • 00:14:16 out getting an error looks better and
  • 00:14:19 now if you click register here we see
  • 00:14:21 this little nice dialog here where we
  • 00:14:24 can confirm or cancel it now this is
  • 00:14:29 nice I want to change the styling of
  • 00:14:31 this button here there adjust your
  • 00:14:33 button keep in mind that's our activator
  • 00:14:36 here we can simply change it by giving
  • 00:14:38 it a different color for example the
  • 00:14:41 primary color by adding the primary
  • 00:14:43 directive or to be precise property I
  • 00:14:47 should say so now we have a nice red
  • 00:14:49 button ear that's looking good
  • 00:14:51 now we can turn towards the logic upon
  • 00:14:56 clicking these buttons so we have cancel
  • 00:14:58 and confirm cancel is simple but confirm
  • 00:15:00 is of course the tricky part there I
  • 00:15:03 want you dispatch in action which in the
  • 00:15:05 end leads to us setting a request to
  • 00:15:07 firebase and of course also altering our
  • 00:15:10 local state in view X so for that we
  • 00:15:14 need to go to our store and there I'll
  • 00:15:18 start by creating a new action and we
  • 00:15:21 get loads of actions and mutations here
  • 00:15:22 that's well also clean it up in the next
  • 00:15:24 videos but for now let's simply add
  • 00:15:27 something here maybe at the top register
  • 00:15:30 user for meetup could be one action name
  • 00:15:33 and there we of course get the commit in
  • 00:15:37 the object we can extract and we get a
  • 00:15:39 payload that will be the meetup for
  • 00:15:42 which you want to register and of course
  • 00:15:45 I'll also have a unregistered user from
  • 00:15:48 meetup action where I also get the
  • 00:15:50 commit method from that first object and
  • 00:15:53 also get a payload which will be the ID
  • 00:15:55 of the meetup I want to unregister from
  • 00:15:57 now let's start with registering here
  • 00:16:01 for registering I first of all want to
  • 00:16:03 commit set loading set this to true to
  • 00:16:06 indicate that we are currently doing
  • 00:16:08 something because we will reach out to a
  • 00:16:11 server so this will take a couple of
  • 00:16:13 seconds or milliseconds and then I want
  • 00:16:16 you actually send a request to firebase
  • 00:16:18 to edit my user there if we have a look
  • 00:16:22 at our firebase data here we only got
  • 00:16:25 meetups right now we also of course got
  • 00:16:28 users we got users here under
  • 00:16:31 authentication now we can't change that
  • 00:16:33 data firebase doesn't give us access to
  • 00:16:35 the user data here well we can read it
  • 00:16:37 we can get the email address and so on
  • 00:16:38 but we can't add new fields but of
  • 00:16:42 course we can simply add it to our main
  • 00:16:44 database and that's exactly what I want
  • 00:16:46 to do here in the past I didn't need to
  • 00:16:48 do that but now that I want to store
  • 00:16:50 some user information namely if the user
  • 00:16:52 is registered for a given Meetup
  • 00:16:54 I of course need to well store some data
  • 00:16:57 connected to my user on the firebase
  • 00:16:59 database too so what I want to do here
  • 00:17:02 is I want to take the firebase object
  • 00:17:04 reach out to the database and there get
  • 00:17:07 a reference to slash users now that
  • 00:17:10 doesn't exist yet but then it will just
  • 00:17:12 be created the first time we access it
  • 00:17:15 now I need my user ID because that is a
  • 00:17:18 good identifier for the node beneath the
  • 00:17:23 users level so that I can store some
  • 00:17:25 user specific data below that I denote I
  • 00:17:29 can enter afforded I need to get my
  • 00:17:32 active user and we actually have a
  • 00:17:34 getter for that right we have the user
  • 00:17:36 here now one thing we can do is we can
  • 00:17:41 go back to our action and not just
  • 00:17:43 receive the commit method from this
  • 00:17:46 object we can also get access to the
  • 00:17:48 gathers here
  • 00:17:49 that's another property provided on that
  • 00:17:51 object which we can pull out with
  • 00:17:53 destructuring
  • 00:17:54 so here I can then say plus and maybe
  • 00:17:59 store the user in a new constant where I
  • 00:18:01 just get getters user and we have that
  • 00:18:05 user gathered that's where I'm getting
  • 00:18:06 it from and with that I can check check
  • 00:18:08 user ID here add this as a new SAP node
  • 00:18:12 so to say and then chain
  • 00:18:14 another thing registrations may be with
  • 00:18:18 child here so I want you add
  • 00:18:22 registrations so this would basically
  • 00:18:24 create free notes a users note then
  • 00:18:27 below that note and note for the user ID
  • 00:18:31 and then below the user ID our
  • 00:18:33 registrations note under which I want to
  • 00:18:35 push all the media bodies the user
  • 00:18:38 registered for so it's under
  • 00:18:40 registrations that I want to push
  • 00:18:43 something and that something will be the
  • 00:18:46 payload which will just be the meetup ID
  • 00:18:48 for which the user want to register so
  • 00:18:50 then I know that this will probably
  • 00:18:52 eventually succeed if it does succeed
  • 00:18:55 then I will commit said loading and set
  • 00:18:59 it to false because we're not loading
  • 00:19:00 anymore and I also want to commit a new
  • 00:19:03 mutation I haven't created yet which is
  • 00:19:05 also called register user for Meetup
  • 00:19:08 because we changed firebase we also need
  • 00:19:11 to change our view X store of course and
  • 00:19:13 I need to pass some payload to that to
  • 00:19:16 that mutation and a good payload to pass
  • 00:19:20 is actually something taking into
  • 00:19:23 account the data I get back from
  • 00:19:24 firebase I can of course pass the ID of
  • 00:19:29 the meda for which I registered but I
  • 00:19:32 also won Q store the registration ID
  • 00:19:36 firebase created for me and I can
  • 00:19:39 retrieve that as part of the data I get
  • 00:19:42 in that response keep in mind if I push
  • 00:19:44 something to firebase firebase creates
  • 00:19:47 these cryptic strings and I want to
  • 00:19:49 store this cryptic string on my
  • 00:19:51 registration in view X because that
  • 00:19:54 makes it way easier for me to later
  • 00:19:55 unregister the user
  • 00:19:56 so here I'll store it under maybe FB key
  • 00:20:00 for firebase key data key and again data
  • 00:20:04 is simply an object returned by firebase
  • 00:20:06 which happens to have some meta
  • 00:20:08 information about the successful request
  • 00:20:10 and one field is the key field which
  • 00:20:13 gives me information about the key
  • 00:20:15 firebase created automatically so that's
  • 00:20:18 important and that's helpful if we fail
  • 00:20:21 I'll catch that of course here I'll then
  • 00:20:24 get an error and I will law
  • 00:20:27 that error to find out what's wrong but
  • 00:20:30 of course I will also commit set loading
  • 00:20:33 and set this to false to stop the
  • 00:20:36 loading nonetheless with that out of the
  • 00:20:40 way we can create this register user for
  • 00:20:43 meetup mutation next so I'll go up to my
  • 00:20:46 meetups and maybe here at the beginning
  • 00:20:50 tube I'll add this meetup where I get
  • 00:20:51 the state and the payload and now the
  • 00:20:54 question is what do I want to do in this
  • 00:20:55 mutation well I first of all want to
  • 00:20:59 extract the ID off the meetup which was
  • 00:21:02 registered or for which the user
  • 00:21:04 registered so I've extracted from the
  • 00:21:07 payload from the ID field which will be
  • 00:21:09 available because I passed two fields ID
  • 00:21:12 and the firebase key and the ID is the
  • 00:21:15 meetup ID for which the user registered
  • 00:21:18 so with that we'll have that available
  • 00:21:21 in our meetup now I will also check if
  • 00:21:24 the user is registered in there because
  • 00:21:28 if I try to register for a meetup I
  • 00:21:30 somehow am already registered in I can't
  • 00:21:33 just cancel this mutation I don't want
  • 00:21:36 to add this registration again now
  • 00:21:38 theoretically you should not be able to
  • 00:21:40 trigger this mutation if you already are
  • 00:21:42 registered but still extra security so
  • 00:21:45 we'll check if state user registered
  • 00:21:49 oops
  • 00:21:51 registered meetups and here use the same
  • 00:21:54 logic from before if find in index for
  • 00:21:58 the given meetup here if the idea of the
  • 00:22:01 given meetup is basically the same as
  • 00:22:03 the ID for which I want to register if
  • 00:22:05 that's greater or equal than serum then
  • 00:22:07 I know I always already have a
  • 00:22:09 registration and I can't just return
  • 00:22:11 without doing anything else because then
  • 00:22:13 I would try to register for a meetup I
  • 00:22:15 already am registered for in uppercase s
  • 00:22:18 if I pass this check so if I don't make
  • 00:22:21 it into DF statement I can add this new
  • 00:22:24 registration so then I will reach out to
  • 00:22:26 my user on the state and use registered
  • 00:22:29 meetups to push this new ID onto it so
  • 00:22:33 this shall now or this now make sure
  • 00:22:35 that I add it I will now also use my
  • 00:22:39 user
  • 00:22:40 and at firebase keys here access that ID
  • 00:22:46 that property and store for the given ID
  • 00:22:50 D payload firebase key so that my
  • 00:22:55 registered user has a property called FB
  • 00:22:58 keys which I add here for which I stored
  • 00:23:03 the meetup ID as a property and the
  • 00:23:08 firebase key as a value so I have key
  • 00:23:12 value pairs with meetup IDs and firebase
  • 00:23:15 keys and if a user wants to unregister
  • 00:23:17 from a given meetup I can easily look up
  • 00:23:20 that meetup ID here and immediately get
  • 00:23:22 the firebase ID or key off that
  • 00:23:26 registration on firebase which makes it
  • 00:23:28 easy to unregister that's why I add this
  • 00:23:31 logic here now with that added we can
  • 00:23:34 already add a new mutation for
  • 00:23:37 unregistered user from meetup so for the
  • 00:23:42 opposite where I will probably also get
  • 00:23:44 a state and a payload and we haven't
  • 00:23:46 added the action yet but why don't we
  • 00:23:49 already start with mutation and there I
  • 00:23:52 now want to get the registered meetups
  • 00:23:55 of a user so I'll store it in a new
  • 00:23:56 constant by accessing state user and
  • 00:23:59 then D registered meetups so this array
  • 00:24:02 and I then want to use these and splice
  • 00:24:06 by finding the meetup for which the user
  • 00:24:10 did unregister so here I can use
  • 00:24:12 registered meetups and use find index
  • 00:24:15 again this time hoping to find something
  • 00:24:17 the same logic as before I'll find the
  • 00:24:20 meetup for which this mutation was
  • 00:24:22 triggered and if I do find something
  • 00:24:24 that will give me the position off that
  • 00:24:27 Meetup and that's exactly what I want to
  • 00:24:28 splice so I'll splice exactly one
  • 00:24:30 element the one meetup I want to remove
  • 00:24:33 I all of course want to remove this key
  • 00:24:36 value pair where I stored the meetup and
  • 00:24:38 the registration ID and I can do this by
  • 00:24:41 using the JavaScript reflect API this
  • 00:24:44 has a delete property method and there I
  • 00:24:47 can pass the user and firebase keys so
  • 00:24:53 the property
  • 00:24:54 and then I can wear the object on which
  • 00:24:58 I want to delete a property and the
  • 00:25:00 property is then deep meetup ID because
  • 00:25:03 remember we're creating this FB keys
  • 00:25:05 object as a property on that user and
  • 00:25:08 there we create a new property ID which
  • 00:25:12 in the end is just the ID of the
  • 00:25:15 firebase of the meetup we register for
  • 00:25:17 so the properties of that firebase Keys
  • 00:25:20 object are meetup IDs and here I'm
  • 00:25:23 accessing the firebase keys object and
  • 00:25:26 I'm removing one specific property which
  • 00:25:29 is the ID of the media for which I
  • 00:25:31 unregistered and that of course will
  • 00:25:32 also remove the value of the property
  • 00:25:34 which will be the firebase key
  • 00:25:36 identifying that meet up on the firebase
  • 00:25:39 server which I can remove now because
  • 00:25:42 this is mutation so prior to this
  • 00:25:44 mutation running I'll probably already
  • 00:25:46 have ran action where I got rid of that
  • 00:25:50 key on firebase this is actually what
  • 00:25:53 we'll add next so that this hopefully
  • 00:25:55 gets a little better a little bit less
  • 00:25:57 confusing so let's go down to the
  • 00:25:59 actions again and here we have the
  • 00:26:01 unregister from need of action now there
  • 00:26:04 I first of all will of course
  • 00:26:06 commit set loading and set it to true to
  • 00:26:10 make sure we show a loader if you want
  • 00:26:12 you and then I'll get my user by
  • 00:26:16 extracting it from the getters again
  • 00:26:18 remember we can get access to gathers
  • 00:26:20 here too we can get this out of this
  • 00:26:22 object being passed to actions so here
  • 00:26:25 does this just gathers user and of
  • 00:26:30 course also want to get the key the
  • 00:26:33 firebase key off the Meetup
  • 00:26:35 for which I want to unregister and this
  • 00:26:37 is now taking advantage of this little
  • 00:26:39 trick I used where I store the extra
  • 00:26:41 object on the user to store my keys I
  • 00:26:44 can now simply get my firebase key by
  • 00:26:47 accessing the user and there the
  • 00:26:50 firebase Keys object and there the
  • 00:26:52 payload which is to meet up I want to
  • 00:26:55 register for and again one final time
  • 00:26:57 since the properties of that firebase
  • 00:27:00 keys object are the meetup IDs the user
  • 00:27:03 is registered for I will find this
  • 00:27:06 meetup there and then I get back as a
  • 00:27:08 value the fire-based key off that
  • 00:27:11 registration and that registration is
  • 00:27:13 what I want to delete now first of all I
  • 00:27:16 should check if user has firebase keys
  • 00:27:20 if this is faulty then I should return
  • 00:27:26 because then I would try to access
  • 00:27:28 something which isn't there that would
  • 00:27:29 be strange but still this would then
  • 00:27:32 throw an error this next line so don't
  • 00:27:34 get there without checking if firebase
  • 00:27:36 Keys exists here however I can safely
  • 00:27:40 extract my firebase key and with that I
  • 00:27:43 can reach out to the firebase database
  • 00:27:46 add a reference to users and then to my
  • 00:27:51 user ID
  • 00:27:52 remember we stored all the registrations
  • 00:27:55 under users user ID registrations so now
  • 00:27:58 I'm basically rebuilding that so here we
  • 00:28:01 have registrations with a plus in front
  • 00:28:06 of it and there I access a shout out
  • 00:28:10 node and that child node is the firebase
  • 00:28:12 key I extract that because again
  • 00:28:14 firebase assigned a key to the new
  • 00:28:16 registration I stored that on that
  • 00:28:18 firebase keys object on the user I
  • 00:28:20 retrieve that here and now I'm using FB
  • 00:28:23 key here to get rid of it
  • 00:28:25 I get rid of it by calling remove on
  • 00:28:28 this reference that's all this also
  • 00:28:30 returns a promise which hopefully is
  • 00:28:33 successful in which case I will commit
  • 00:28:36 said loading and set it to false because
  • 00:28:38 we're not loading anymore we're done and
  • 00:28:39 I will commit this mutation we just
  • 00:28:42 created so this unregistered user from
  • 00:28:45 meetup mutation here I will commit this
  • 00:28:48 in my action in the unregistered user
  • 00:28:51 from u-dub action there I will pass on
  • 00:28:54 the payload which is just the idea of
  • 00:28:56 the meetup I wanted to unregister for
  • 00:28:58 then I'll have a catch block to where I
  • 00:29:01 get any potential errors here I will
  • 00:29:04 lock that error and of course not only
  • 00:29:07 log it I also want to stop any loading
  • 00:29:11 processes several committees and set it
  • 00:29:13 to false with that we worked a lot in
  • 00:29:16 the story we added methods actions and
  • 00:29:19 mutations for registering and unruhe
  • 00:29:21 important part is this part where I
  • 00:29:23 stored the key of the registration the
  • 00:29:25 fire-based key of the registration which
  • 00:29:27 makes it much easier for me to delete it
  • 00:29:29 later on and now with that we can
  • 00:29:32 continue in our web status error so now
  • 00:29:36 with that we can continue in our
  • 00:29:38 component where we want to dispatch an
  • 00:29:40 action in register dialog we have our
  • 00:29:45 confirm button where we execute on agree
  • 00:29:47 and on agree we of course want to
  • 00:29:50 dispatch the while which action that
  • 00:29:54 depends on the registration status so an
  • 00:29:57 on agree I check if this user is
  • 00:29:59 registered so if my computer property
  • 00:30:03 here returns true or false if it is true
  • 00:30:07 then I want to dispatch a special action
  • 00:30:10 which one well if I am registered I want
  • 00:30:14 to dispatch the unregistered user from
  • 00:30:17 meetup action and I'll pass the meetup
  • 00:30:21 ID as a payload else if the user is not
  • 00:30:25 registered
  • 00:30:26 I want to dispatch register user for
  • 00:30:32 Meetup and also pass my meetup ID of
  • 00:30:35 course like that now we can still find
  • 00:30:41 Eunice but let's save this which error
  • 00:30:44 am I getting here probably some linting
  • 00:30:46 error semicolon in line 81 in my store
  • 00:30:54 yeah we shouldn't add a semi colon here
  • 00:30:58 let's see if this now is done it is so
  • 00:31:03 let's reload this page here and yes I am
  • 00:31:06 the creator of this meetup we'll add the
  • 00:31:08 logic to prevent this later for now let
  • 00:31:11 me click register and confirm and we get
  • 00:31:14 an error cannot set property of
  • 00:31:16 undefined that comes from us accessing
  • 00:31:21 in the store the fire-based keys
  • 00:31:25 property on the user in this register
  • 00:31:27 for meetup mutation here I try to set an
  • 00:31:31 ID property but firebase Keys is a
  • 00:31:34 proper
  • 00:31:34 Gyan the user which doesn't exist yet
  • 00:31:37 now how can we fix that I simply need to
  • 00:31:40 make sure that every user has that so
  • 00:31:43 I'll take it and I want to add it to
  • 00:31:46 newly created users too now right now I
  • 00:31:50 only create users here in users signup
  • 00:31:53 and of course in you to sign in and Auto
  • 00:31:57 sign in where I call set user so in the
  • 00:32:00 end it's always set user now if we
  • 00:32:03 scroll all the way up to mutations where
  • 00:32:05 we have set user I set it equal to
  • 00:32:07 payload so I need to add it that payload
  • 00:32:10 before I pass it here so scrolling down
  • 00:32:13 again here whenever we set the user I
  • 00:32:15 have to add my Facebook keys element
  • 00:32:18 which should be an empty object simply
  • 00:32:20 I'll do it not only here in sign user up
  • 00:32:23 I'll also do it in sign user in to
  • 00:32:25 initialize the firebase keys property
  • 00:32:28 and an auto sign in I of course also
  • 00:32:31 need to add it let me distribute this or
  • 00:32:34 multiple lines to make it easier to read
  • 00:32:36 with that every user should have that
  • 00:32:38 and now when there's reloads here this
  • 00:32:42 should work by the way one thing we can
  • 00:32:45 see though on firebase is that the
  • 00:32:47 addition here on firebase did work we
  • 00:32:50 created a new registration here this is
  • 00:32:53 our ID of that registration created by a
  • 00:32:58 firebase whereas this here is the ID of
  • 00:33:01 our meetup this key here and that's
  • 00:33:04 exactly that key value pair we have on
  • 00:33:05 firebase and I want to inversely
  • 00:33:08 replicate this on my client so that I
  • 00:33:11 can easily delete firebase registrations
  • 00:33:13 so I'll manually delete it for now and
  • 00:33:15 try this again I reloaded the page so
  • 00:33:19 let's register again this looks much
  • 00:33:22 better it was added here now we also see
  • 00:33:25 on register and if I click this and
  • 00:33:27 confirm now we get an error database ref
  • 00:33:31 is not a function well I assume that in
  • 00:33:34 my Mutai in my action here I accessed
  • 00:33:39 here are mutations database without
  • 00:33:42 calling it like a function so make sure
  • 00:33:45 to call database only firebase object
  • 00:33:47 always like a function
  • 00:33:48 so with that let's go back and reload
  • 00:33:52 this page now we see register that has
  • 00:33:57 of course a good reason if we load this
  • 00:34:00 page new we load the application from
  • 00:34:02 scratch and we have no code at all to
  • 00:34:05 fetch our existing registrations from
  • 00:34:08 firebase on firebase we know that this
  • 00:34:10 user is registered for this meetup but
  • 00:34:13 in our front-end application how would
  • 00:34:15 we know we always initialize registered
  • 00:34:19 meetups as an empty array check our
  • 00:34:22 actions here when we sign the user app
  • 00:34:23 empty array here signing in empty array
  • 00:34:27 Auto sign in empty array so in our
  • 00:34:31 application the user is never signed in
  • 00:34:34 it's never registered for any meetup I
  • 00:34:36 should say that's why reloading the page
  • 00:34:38 well makes it appear as if we were
  • 00:34:41 inside in so I'll manually delete this
  • 00:34:44 registration on firebase again and
  • 00:34:46 register myself again now of course we
  • 00:34:49 see unregistered because now the page
  • 00:34:51 didn't reload we are still in the same
  • 00:34:54 application and we manually edit this
  • 00:34:55 registration now now let's try
  • 00:34:58 unregistering and this also seems to
  • 00:35:02 have worked though removing it from
  • 00:35:03 firebase didn't work we removed it from
  • 00:35:06 our local store for sure but in firebase
  • 00:35:09 I still see the subscription so let's
  • 00:35:12 investigate why this isn't gone
  • 00:35:14 dissolution can be found in our store
  • 00:35:17 again in the unregistered user from
  • 00:35:19 media of action we reach out to users
  • 00:35:22 user ID registrations and remove that
  • 00:35:24 key so far so good
  • 00:35:27 unfortunately we store the key under
  • 00:35:29 registration not registrations it should
  • 00:35:33 be registration Shen's though so simple
  • 00:35:36 typo here and with that if I now save
  • 00:35:39 this clear my firebase data from hand
  • 00:35:42 the user's data here and now I try this
  • 00:35:45 again and I register now on firebase we
  • 00:35:48 see it's under registrations and now if
  • 00:35:52 I unregister here we also see it gets
  • 00:35:55 deleted here on firebase so this is now
  • 00:35:58 working as expected and this was a lot
  • 00:36:01 of new content with all this
  • 00:36:02 raishin and unn registration here now
  • 00:36:05 what I want to do next is I want to make
  • 00:36:08 sure that whatever we initially load our
  • 00:36:10 application we fetch all that
  • 00:36:13 registration data for the user so this
  • 00:36:16 is what I'll have a look at in the next
  • 00:36:17 video