- 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