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

You may also like