Coding

Editing Meetups | Vue.js + Vuetify + Firebase FULL PROJECT

  • 00:00:00 welcome back to our view beautify and
  • 00:00:03 firebase meet up project we added a lot
  • 00:00:07 of features already we're nearing the
  • 00:00:09 end of the project but some things are
  • 00:00:11 still missing in this video I want to
  • 00:00:13 make our meetups editable right now we
  • 00:00:15 can create them we can view them but
  • 00:00:18 what if we wanted to change them after
  • 00:00:20 they've been created let's take a closer
  • 00:00:22 look at that in this video
  • 00:00:26 let's have a look at where I would want
  • 00:00:28 to edit a meet-up for that I'll first of
  • 00:00:31 all sign in with t account I created
  • 00:00:33 earlier and then I can obviously
  • 00:00:35 organize a meet-up but if I view meetups
  • 00:00:38 and I wizard an individual meetup it
  • 00:00:40 would be nice if I could have some
  • 00:00:42 buttons here which allow me to edit the
  • 00:00:44 meet up and now that I see it there
  • 00:00:46 seems to be a bug the location is
  • 00:00:48 missing there okay so little change of
  • 00:00:50 plan let's edit this or let's fix this
  • 00:00:53 by going to the meetup dot view fall and
  • 00:00:56 here meetup location that's not working
  • 00:00:59 why is it not working let's have a look
  • 00:01:00 at our meetup here in the database we do
  • 00:01:04 have the location location looks right
  • 00:01:08 to me
  • 00:01:09 meet up so that should really work in my
  • 00:01:12 opinion though the issue probably is in
  • 00:01:15 the store there when we allow it to
  • 00:01:18 meetups I simply don't store the
  • 00:01:20 location locally so we fetch it but if I
  • 00:01:23 don't store it in the store we can't use
  • 00:01:25 in our views so let's set location equal
  • 00:01:28 to object key location here because we
  • 00:01:31 do have it in the data so we'd probably
  • 00:01:32 also use it and then here we'll get an
  • 00:01:34 error I'll come back to that error too
  • 00:01:37 but here we see location is displayed
  • 00:01:40 now the error here on the right is
  • 00:01:42 stemming from the fact that data needs
  • 00:01:43 to be fetched and when it first wants to
  • 00:01:46 load or render this page the data isn't
  • 00:01:49 there yet by the way that's the same
  • 00:01:51 reason why under the meetups if you
  • 00:01:53 reload the page you see the original to
  • 00:01:56 meetups first before they get replaced
  • 00:01:58 with San Francisco because we have to
  • 00:02:00 the loading period now we can get rid of
  • 00:02:02 that by showing a spinner same is true
  • 00:02:05 you're on the front page where we
  • 00:02:06 already do show one but I don't really
  • 00:02:09 want to add this spinner for now we'll
  • 00:02:11 do this later for now what I want to do
  • 00:02:13 is I want to make a meetup editable so
  • 00:02:16 here the San Francisco meetup would be
  • 00:02:18 nice to have some buttons to add it and
  • 00:02:20 for that I'll create new components in
  • 00:02:23 the meetup folder we have to create
  • 00:02:26 meetup component meetup and meetups now
  • 00:02:29 I'll create a new subfolder in there and
  • 00:02:31 I will name it add it now of course you
  • 00:02:34 can choose any name you like in there
  • 00:02:37 I'll trade a new file the Edit
  • 00:02:39 meetup details dialog dot view file you
  • 00:02:43 can give it any other name this will be
  • 00:02:45 my component name because it should open
  • 00:02:47 as a dialog so as a modal basically
  • 00:02:50 where the user is able to edit the
  • 00:02:52 details off the Meetup now with details
  • 00:02:54 I mean things like title or description
  • 00:02:56 I'll make the time and date also
  • 00:02:59 editable but I want to show these in a
  • 00:03:01 separate modal which should open on a
  • 00:03:04 different button which I want to have
  • 00:03:05 place maybe next to the time and date
  • 00:03:08 somewhere down here so let's go with the
  • 00:03:10 general details first I opened this new
  • 00:03:14 dot view file and there I of course need
  • 00:03:18 a template to have something to work
  • 00:03:20 with now in the template I will use a
  • 00:03:23 special beautify component let's open
  • 00:03:26 the beautify documentation to find out
  • 00:03:28 which one this is they're under
  • 00:03:31 documentation you see that under
  • 00:03:33 components we actually have dialogues
  • 00:03:36 now dialogs are looking like that there
  • 00:03:40 are different versions of it so
  • 00:03:41 basically these are modal's we can use
  • 00:03:43 I'm gonna use such a dialogue a little
  • 00:03:47 bit of a more complex one and of course
  • 00:03:49 feel free to dive into the documentation
  • 00:03:51 to find out how you may find unity your
  • 00:03:53 needs I'll go back to my template here
  • 00:03:57 and I'll add V dialogue which actually
  • 00:03:59 is the selector for that component on
  • 00:04:02 that I'll set a width and I'll set it to
  • 00:04:04 350 pixels which should look good on all
  • 00:04:08 devices of course you could also style
  • 00:04:11 this and make a real responsive design
  • 00:04:13 where the width of this dialog changes
  • 00:04:15 with the device width I'll take the
  • 00:04:18 cheap way here and I'll set it to
  • 00:04:20 persistent this will basically influence
  • 00:04:23 how it is displayed and how we may
  • 00:04:25 dismiss it now with that added the first
  • 00:04:30 thing we actually add is the button
  • 00:04:31 which will open it
  • 00:04:33 that is how beautified dialogs work you
  • 00:04:36 have a so-called activator that is a wee
  • 00:04:39 button oops with – in between though so
  • 00:04:42 normal beautiful button I'll make it a
  • 00:04:45 floating button give it the X on color
  • 00:04:47 and here in port we have to assign a
  • 00:04:50 slot where this should go in now keep in
  • 00:04:52 mind
  • 00:04:52 nesting this Envy dialogue so by
  • 00:04:55 assigning a slot here beautify knows
  • 00:04:57 where to place this button inside of the
  • 00:05:00 dialogue which is actually not inside of
  • 00:05:02 the dialogue because their dialogue is
  • 00:05:04 the modal so we nested into into this
  • 00:05:07 Videla component but behind the scenes
  • 00:05:10 that actually consists of two parts the
  • 00:05:13 modal you see and a different part where
  • 00:05:16 you can place the button on the normal
  • 00:05:19 page so outside of the modal this is
  • 00:05:22 where the button will go in and I mark
  • 00:05:24 this button as please put it in there
  • 00:05:27 with the slot which I said to activator
  • 00:05:29 don't miss type here because activator
  • 00:05:32 is understood by beautify and which will
  • 00:05:34 place the button correctly now on the
  • 00:05:37 button here I'll add a V icon
  • 00:05:40 so maybe the added icon sounds
  • 00:05:43 appropriate
  • 00:05:44 now let's already see how it looks even
  • 00:05:46 though no dialogue was added so for dead
  • 00:05:50 I'll go to the meetup table you fall
  • 00:05:52 which is wearing what I use it at the
  • 00:05:53 end and here I of course want to
  • 00:05:56 register it and use it in my template
  • 00:05:58 for that I could register it as a local
  • 00:06:02 component in that file which would be
  • 00:06:04 fine because I only add it there or to
  • 00:06:07 see that again in the main dot JS file I
  • 00:06:09 can register it as a global component
  • 00:06:12 which I can use application wide
  • 00:06:14 I'll give it a selector of app added
  • 00:06:17 meat details dialog a relatively long
  • 00:06:21 selector but it's fine for me here and
  • 00:06:23 of course I should import it so I will
  • 00:06:26 import the Edit meetup details dialog
  • 00:06:32 from slash components meetup edit and
  • 00:06:39 then this newly traded top view file we
  • 00:06:43 created a few seconds ago like that so
  • 00:06:46 that's the import that is what I want to
  • 00:06:49 store here in this newly created
  • 00:06:50 component woops without semicolons of
  • 00:06:52 course and with that added here I can go
  • 00:06:56 back to the meetup dot view file and add
  • 00:06:58 it here to there I want to add it next
  • 00:07:02 to the title
  • 00:07:03 so offer my h6 tag here so to say
  • 00:07:06 I can do this by adding a template tag
  • 00:07:11 here because I only want to show this if
  • 00:07:13 the user who is locked in is the creator
  • 00:07:17 of that specific meetup here so for now
  • 00:07:22 I'll quickly said we if you're – true –
  • 00:07:25 always show it but later I'll exchange
  • 00:07:27 this to make sure that only the creator
  • 00:07:28 of that meetup can see that button
  • 00:07:30 because of course no one else should be
  • 00:07:32 able to edit it then I'll add V spacer
  • 00:07:36 in there
  • 00:07:36 that's a placeholder provided by
  • 00:07:38 beautify which will nicely distribute it
  • 00:07:40 so that the title sets on the left and
  • 00:07:42 the button goes on the right so after we
  • 00:07:47 spacer I'll actually add my component
  • 00:07:49 app added meetup details dialog was the
  • 00:07:54 selector and that actually is all for
  • 00:07:56 now now let me save this and see if it
  • 00:07:59 works like that if we go back to the
  • 00:08:01 application we see the button here now
  • 00:08:04 the style of the button isn't exactly
  • 00:08:07 what I wanted though I don't want to
  • 00:08:10 have a button like that so let's quickly
  • 00:08:12 have a look at it again having a look at
  • 00:08:15 the documentation helps turns out this
  • 00:08:17 change to fab so it's not floating it's
  • 00:08:20 fab what I want here so now if I reload
  • 00:08:24 this is the button I want now I got this
  • 00:08:27 edit button here on the right and now of
  • 00:08:30 course I want to make sure that I only
  • 00:08:31 see it if I am the creator of that
  • 00:08:34 meetup I can easily point this out
  • 00:08:36 because if we have a look at the store
  • 00:08:38 or a view chess story that our gathers
  • 00:08:40 we see we can add a user here and the
  • 00:08:43 user of course will have an ID you can
  • 00:08:46 see this in the sign user in method here
  • 00:08:51 we store the user ID on the user object
  • 00:08:54 now estate
  • 00:08:55 now each meetup also has a creator ID
  • 00:08:58 here here also for the ones we fetched
  • 00:09:01 so I only have to match of creator ID
  • 00:09:03 matches user ID
  • 00:09:05 therefore I'll go back to that meetup to
  • 00:09:08 the view file and I'll add a new
  • 00:09:09 computer property actually I'll add two
  • 00:09:12 the first one is user is authenticated
  • 00:09:15 because I also want to check this – if
  • 00:09:18 the user is authenticated
  • 00:09:20 then this will change if we can register
  • 00:09:22 later on so I can already add this since
  • 00:09:25 I'll also need it in my other check and
  • 00:09:27 here in user is authenticated I simply
  • 00:09:29 return this store gathers user and chef
  • 00:09:35 check if it's not equal to null and if
  • 00:09:38 this store gathers user is not equal to
  • 00:09:43 undefined which basically means the user
  • 00:09:46 is set so we are authenticated otherwise
  • 00:09:48 it wouldn't be set in our store now I'll
  • 00:09:50 add the other computed property which we
  • 00:09:53 need to make sure that we only show the
  • 00:09:55 button to the creator of that meetup
  • 00:09:57 here I'll name it user is Creator so
  • 00:10:01 that's the name of my computer property
  • 00:10:03 and here I'll first of all check if
  • 00:10:05 we're not authenticated so if user is
  • 00:10:08 authenticated as false don't execute
  • 00:10:10 this as a method
  • 00:10:11 I'm simply referring to this computed
  • 00:10:13 property if it is false
  • 00:10:15 I'll return false because if the user
  • 00:10:17 user is not Fennec ated I certainly
  • 00:10:19 don't want to show this this button but
  • 00:10:23 then I'll also return this store gathers
  • 00:10:27 user ID so getting the idea of the
  • 00:10:30 currently authenticated user and I'll
  • 00:10:32 check if this is equal to this meetup
  • 00:10:36 creator ID this meetup refers to the
  • 00:10:39 meetup computed property so the Twitter
  • 00:10:42 loaded meetup and get rid of these
  • 00:10:44 semicolons we don't need them do a have
  • 00:10:47 one here to know so that should work now
  • 00:10:50 we can use the user is creator check in
  • 00:10:53 bf I only show this if the user is the
  • 00:10:56 Creator if that returns true cell let's
  • 00:10:59 now reload this and we still see the
  • 00:11:04 button now let's check if it works
  • 00:11:06 correctly if I sign up another user who
  • 00:11:09 clearly won't be the Creator then if I
  • 00:11:14 now explore the meetups we don't see the
  • 00:11:17 edit button so this is working now I'll
  • 00:11:19 sign in with the average user again
  • 00:11:20 because now I want to work on the actual
  • 00:11:22 model we open because right now if I
  • 00:11:25 click this nothing is happening well
  • 00:11:29 almost nothing we see the backdrop
  • 00:11:30 already but of course the modal content
  • 00:11:32 is missing because we haven't
  • 00:11:34 figure out anything about it you also
  • 00:11:36 see I can't dismiss it by clicking on
  • 00:11:37 the backdrop because I set the style too
  • 00:11:40 persistent here this derive directive
  • 00:11:43 here this property so now let's work on
  • 00:11:46 the dialogue again for that below the
  • 00:11:50 button I'll add a big hard
  • 00:11:52 so the button goes into the activator
  • 00:11:54 slot it's kind of a special thing the
  • 00:11:56 rest of this video log content here
  • 00:12:00 basically will be what actually gets
  • 00:12:01 displayed in the modal and I want to
  • 00:12:03 show a card now there I simply want to
  • 00:12:08 have a title to begin with but to stay
  • 00:12:11 aligned with my other cards like to sign
  • 00:12:13 up here I'll also use V layout in that
  • 00:12:16 card to structure it the container and
  • 00:12:19 so on so let's start with that let's add
  • 00:12:22 V container here and then that lets add
  • 00:12:25 we layout and this shall be a row which
  • 00:12:29 wraps if necessary which shouldn't be
  • 00:12:31 necessary in there we can then use v
  • 00:12:33 flex and just like we did before in the
  • 00:12:37 other components we flex also needs to
  • 00:12:40 get a property defining when this should
  • 00:12:42 be shown here i want to use access 12
  • 00:12:46 should be one layout for all sizes now
  • 00:12:50 in there I'll add weak hard title and on
  • 00:12:53 title I'll set say added meetup I then
  • 00:12:57 once you add a new row we lay out all
  • 00:13:01 the row and wrap with the Flex x12 to
  • 00:13:06 use the grid here where I want to show
  • 00:13:11 the text of the actual content in
  • 00:13:14 between when we add a we the wider here
  • 00:13:18 will have the content let's see how that
  • 00:13:21 looks like if I save this we already see
  • 00:13:24 it this is roughly what it will look
  • 00:13:26 like not that pretty yet but we'll get
  • 00:13:28 there we'll get there by now working on
  • 00:13:31 the content in there here I'll add weak
  • 00:13:33 hard text inside this row here we
  • 00:13:36 created with the grid and in Ricard's
  • 00:13:39 text I now want to have text fields
  • 00:13:41 which allow me to edit the title and the
  • 00:13:43 description for that of course we can go
  • 00:13:46 to create
  • 00:13:47 meet up and get inspired from there at
  • 00:13:50 least here we already have text fields
  • 00:13:52 for the description and for the title so
  • 00:13:56 why don't we pick the text field for the
  • 00:13:59 title here go back to dialog and enter
  • 00:14:02 that and do the same whoops here from
  • 00:14:06 create meetup for the description which
  • 00:14:08 is a multi-line text field so I picked
  • 00:14:11 these two and I add them right below
  • 00:14:14 each other beneath each other here in my
  • 00:14:16 vCard text element now we model is bound
  • 00:14:20 to title and description here that won't
  • 00:14:22 work for now so I'll get rid of it and
  • 00:14:24 now let's see how that looks like in our
  • 00:14:27 model what doesn't look too bad to me
  • 00:14:29 added meetup title description that
  • 00:14:32 doesn't look too bad now of course this
  • 00:14:35 is not really editable yet though so
  • 00:14:39 before we take care about these values
  • 00:14:41 actually being used somewhere I also
  • 00:14:43 want to have actions in the modal so
  • 00:14:46 below 0 here which holds my input fields
  • 00:14:49 I'll add another V divider simply a
  • 00:14:52 horizontal line add another layout which
  • 00:14:55 should be a row and wrap and we flex in
  • 00:14:58 there X is 12 where I now want to add my
  • 00:15:03 actions now we can have a look at the
  • 00:15:06 card component here to find out how we
  • 00:15:09 add actions you see we got a weak hard
  • 00:15:11 actions here basically so the code can
  • 00:15:14 be seen here with card actions with
  • 00:15:15 buttons in there so let's add we card
  • 00:15:20 actions here just like that just using
  • 00:15:23 this component and in there let's add
  • 00:15:26 buttons one maybe for canceling that
  • 00:15:28 changes and one for accepting them so
  • 00:15:31 add a button and now it's totally up to
  • 00:15:33 you how you style it I want to use the
  • 00:15:36 flat style but I want to use my own
  • 00:15:38 class I want to give it a blue text with
  • 00:15:42 the darken one well modification
  • 00:15:45 basically and of course choose any
  • 00:15:47 styling any color you want I'll see if I
  • 00:15:49 stick to that but for now I want to go
  • 00:15:51 with that a gift is the name of clothes
  • 00:15:53 duplicate it and add a Save button too
  • 00:15:56 now I'll add click listener soon let's
  • 00:15:58 have a look at the modal first
  • 00:16:00 pretty good to me close and safe now
  • 00:16:03 it's time to make sure that we actually
  • 00:16:04 handle these inputs and that we do
  • 00:16:07 something with that for that I'll add a
  • 00:16:10 script tag here to my component and
  • 00:16:14 there I'll export a default object where
  • 00:16:18 first of all I want to set up my data in
  • 00:16:21 the data property or in the object
  • 00:16:24 return there to be precise I want to
  • 00:16:27 have my edited title which is an empty
  • 00:16:30 string initially and my edited
  • 00:16:32 description which is an empty string
  • 00:16:35 initially so this is what I want to get
  • 00:16:38 back now actually it would be nice if we
  • 00:16:41 could pre populate the text fields with
  • 00:16:45 the actual values of that meet up
  • 00:16:47 because we're editing it so there are
  • 00:16:49 existing values to do that we of course
  • 00:16:52 need to get the me that we want to add
  • 00:16:54 it I expect to get this wire props so
  • 00:16:57 props here should give me the meet up
  • 00:17:00 and then we could try to set edited
  • 00:17:04 title equal to this meetup title and the
  • 00:17:09 description equal to this meetup
  • 00:17:11 description let's see if that works as
  • 00:17:14 we want it to work now for that of
  • 00:17:15 course you need to pass a meet-up we do
  • 00:17:17 this from the meetup top you fall which
  • 00:17:19 is where I use the edit dialog and there
  • 00:17:22 I can bind Meetup
  • 00:17:23 the prop we just configured do the
  • 00:17:26 meetup we have here so to the loaded
  • 00:17:28 meet up in the middle of you file just
  • 00:17:31 like that so meetup here in front of the
  • 00:17:34 equal sign refers to the prop name we
  • 00:17:36 assigned here let's save this and see if
  • 00:17:38 it works as expected the click test
  • 00:17:41 button
  • 00:17:41 maybe reload the app before we do so we
  • 00:17:46 see it does not work
  • 00:17:48 now the reason for this is that at the
  • 00:17:50 point of time we're assigning this the
  • 00:17:52 meetup hasn't been loaded yet so a
  • 00:17:55 different way for us to to handle this
  • 00:17:57 is to ensure that we only load this
  • 00:18:02 dialogue this component here I should
  • 00:18:04 say when's the meetup has been loaded
  • 00:18:06 this goes back to the same problem we
  • 00:18:08 had before that when I reload this we
  • 00:18:11 get the the error here initially
  • 00:18:14 now to avoid that all we have to do is
  • 00:18:17 we have to basically add a loader and
  • 00:18:20 only render the demet up if the data is
  • 00:18:24 there now we can easily do that we
  • 00:18:26 already do it in the home component
  • 00:18:28 there we have a loader here in we layout
  • 00:18:32 where I check if we're loading and if
  • 00:18:35 we're loading we actually display the D
  • 00:18:39 loader here so I'll copy that code over
  • 00:18:42 to the meetup W fault and I'll add it
  • 00:18:44 right at the top we container this is a
  • 00:18:47 row wrapping now I won't add it here
  • 00:18:50 I'll add we have to the whole V layout
  • 00:18:53 instead and I'll check is loading now
  • 00:18:56 clearly I don't have a is loading
  • 00:18:59 property in the meetup dot view file yet
  • 00:19:01 but in the home that you follow we
  • 00:19:04 already use this we simply have loading
  • 00:19:06 and we get it from the store now
  • 00:19:09 obviously we can do the same in our
  • 00:19:11 meetup W file so I'll copy the computed
  • 00:19:14 property from the home that you felt the
  • 00:19:16 loading one and I'll add it here loading
  • 00:19:19 so now I can use loading not as loading
  • 00:19:22 loading up here and I only load to be
  • 00:19:25 layout here in DB Al's case I can use V
  • 00:19:28 else here because I have we have on the
  • 00:19:30 same type of element on the same level
  • 00:19:33 of nesting so here B layout with three
  • 00:19:35 we have here we layout with the else so
  • 00:19:38 now we should see the loader as long as
  • 00:19:40 we are loading let's see if that works
  • 00:19:43 indeed dead works now if we open the
  • 00:19:46 dialog still no title and description
  • 00:19:48 the reason for that is simple we have
  • 00:19:50 added the title and description but
  • 00:19:52 we're not binding to it here so we
  • 00:19:55 should add V model on the title input
  • 00:19:57 field and bind the two edited title and
  • 00:20:00 for the other one the multi-line input
  • 00:20:04 field for the description I should find
  • 00:20:06 V model two edited description like that
  • 00:20:10 now with that if I reload that and now
  • 00:20:14 click this button we see it's
  • 00:20:15 pre-populated with the values we already
  • 00:20:17 had that's awesome now the only thing we
  • 00:20:20 have to do is make these buttons work
  • 00:20:22 and actually take these changes and do
  • 00:20:24 something with them with
  • 00:20:26 of course is a big step we'll have to
  • 00:20:27 reach out to the web for that again so
  • 00:20:30 to make sure that we can submit this we
  • 00:20:32 need click listeners on these buttons on
  • 00:20:35 the close button I want to listen to a
  • 00:20:37 click listener and simply set simply
  • 00:20:41 close that modal and on the save
  • 00:20:43 listener I also want to close the modal
  • 00:20:45 but of course I then also want to save
  • 00:20:47 the data so here I will say unsaved
  • 00:20:49 changes should get executed for closing
  • 00:20:52 the modal I have an easier way though I
  • 00:20:54 can create a new data property so
  • 00:20:57 storing in an object I returning data
  • 00:20:59 and I'll name it added dialog referring
  • 00:21:02 to that whole dialogue also the default
  • 00:21:05 initially and I will assign it to my
  • 00:21:09 overall V dialogue element this is
  • 00:21:12 supported by the V dialogue component by
  • 00:21:14 vilifying
  • 00:21:15 we can bind it to a boolean to determine
  • 00:21:18 whoever to show it or not deactivator
  • 00:21:21 will automatically show it automatically
  • 00:21:24 set this to true but we can always
  • 00:21:26 disable it by setting it back to false
  • 00:21:28 so here I can set V modal a modal it
  • 00:21:31 will equal to edit edit dialogue yeah
  • 00:21:36 add a dialogue again this will be turned
  • 00:21:38 to true by the activator button but if
  • 00:21:41 we set it back to false the modal will
  • 00:21:44 disappear and I do just that here in the
  • 00:21:46 close click event edit dialog will be
  • 00:21:49 set to false here let me split this over
  • 00:21:53 multiple lines to make this a bit easier
  • 00:21:56 to read now if a safe doesn't go back
  • 00:21:59 and reload the application here
  • 00:22:03 yeah we get that unsaved changes is of
  • 00:22:05 course not a method we'll add it soon
  • 00:22:07 but we also get that if I click on close
  • 00:22:09 we close the model so that works now
  • 00:22:12 let's take care about this error and add
  • 00:22:14 on Save Changes we're executing it here
  • 00:22:17 when we click Save so we need to add it
  • 00:22:19 here as a method so let's add the
  • 00:22:21 methods key and add on Save Changes like
  • 00:22:25 that now in unsaved changes I obviously
  • 00:22:28 want to close the modal which I can do
  • 00:22:30 by setting this edit dialog equal to
  • 00:22:34 false following the same logic we use on
  • 00:22:37 the close button here I also want to
  • 00:22:40 make sure that I don't take the changes
  • 00:22:42 if they're invalid though so if I have
  • 00:22:46 like an empty like an empty string in
  • 00:22:50 either of the two so here we'll check if
  • 00:22:53 this added the title trim to remove any
  • 00:22:57 excess whitespace if that is equal to an
  • 00:23:00 empty space or if this edited
  • 00:23:04 description trimmed by excess white
  • 00:23:07 space is empty if Eva is the case I want
  • 00:23:10 to return so we don't continue then I
  • 00:23:12 don't want to do anything with invalid
  • 00:23:14 values let's check if that works click
  • 00:23:17 the button empty that and click Save
  • 00:23:19 can't submit it type something I can now
  • 00:23:23 of course this is not stored or it's not
  • 00:23:26 doing anything yet but this is the next
  • 00:23:29 step I want to do I want you to submit
  • 00:23:30 to changed values to the server now for
  • 00:23:34 that we need a new method a new action
  • 00:23:37 in our store and by the way I will also
  • 00:23:41 in a later video optimize everything and
  • 00:23:43 split the store into multiple modules so
  • 00:23:46 there I now want to update a module it's
  • 00:23:49 maybe add that code below create I'll
  • 00:23:51 name it update meetup data there we'll
  • 00:23:56 get the object where we can extract
  • 00:23:58 commit and we'll get a payload basically
  • 00:24:01 an object which holds the new data we
  • 00:24:04 want to store now first of all I want to
  • 00:24:09 commit set loading to true because I am
  • 00:24:13 loading if I use that or not I want to
  • 00:24:15 set it to true here
  • 00:24:16 then I wants to create a new constant
  • 00:24:19 and update object which is an empty new
  • 00:24:22 JavaScript object initially we'll use it
  • 00:24:24 soon I don't want to check if we have a
  • 00:24:28 title in that payload if we do have that
  • 00:24:31 on the update object I'll set the title
  • 00:24:35 equal to the payload title I don't want
  • 00:24:38 to do that without any check because if
  • 00:24:40 the payload title is not present for
  • 00:24:42 some reason because we're not changing
  • 00:24:44 it I don't want to overwrite the
  • 00:24:46 existing valid title with an invalid one
  • 00:24:49 so therefore I'll also check the same
  • 00:24:51 for the description which is another
  • 00:24:53 thing we could check change if we have a
  • 00:24:56 description I want to set the
  • 00:24:58 description description property on that
  • 00:25:02 update object equal to payload
  • 00:25:05 description and finally for the date
  • 00:25:09 because that will be the last thing we
  • 00:25:10 can add it not right now but in the
  • 00:25:12 future if the payload date is existing I
  • 00:25:17 want to set update object date equal to
  • 00:25:20 payload date so now we have a configured
  • 00:25:24 update object it could be empty if we
  • 00:25:26 somehow commit this or dispatch this
  • 00:25:29 action without any payload or a payload
  • 00:25:31 which does have Nibiru title nor a
  • 00:25:33 description nor a date but in most cases
  • 00:25:35 we will probably set some of these
  • 00:25:37 properties with that I can reach out to
  • 00:25:40 firebase and there to meetups so the
  • 00:25:44 same path we use when creating meetups
  • 00:25:46 of course you can by the way add these
  • 00:25:49 slashes or not so since I didn't use the
  • 00:25:51 material remove them down here too then
  • 00:25:54 I want to access a specific meetup of
  • 00:25:58 course can do this with child and access
  • 00:26:02 payload ID now I expect to get the ID as
  • 00:26:06 an argument in the payload to wear as a
  • 00:26:08 property to be precise and with dad we
  • 00:26:11 can call update now the cool thing about
  • 00:26:13 update is it will not overwrite the
  • 00:26:15 existing object it will only override
  • 00:26:18 the properties which need to be
  • 00:26:20 overwritten and it decides which these
  • 00:26:22 are depending on the data we pass to it
  • 00:26:25 in this case the update object so if the
  • 00:26:27 update object has a title proper
  • 00:26:29 it will overwrite the existing title
  • 00:26:31 property but leave the other properties
  • 00:26:33 unchanged which is why I do the update
  • 00:26:36 like this have an empty object initially
  • 00:26:38 if it would pass that nothing would
  • 00:26:40 change on the server but if we for
  • 00:26:42 example have a title because the payload
  • 00:26:45 held a title then we will change it on
  • 00:26:47 the server too this is what update does
  • 00:26:49 here and of course it's firebase
  • 00:26:53 database
  • 00:26:55 oops data base ref like that or to add
  • 00:26:59 that now as before this gives us a
  • 00:27:04 promise where we can listen to the
  • 00:27:07 success case in this case I want to set
  • 00:27:10 loading to to false because we're not
  • 00:27:12 loading anymore
  • 00:27:13 and I want to commit this this change I
  • 00:27:17 want to also change it in my local store
  • 00:27:18 so for that I'll create a new mutation
  • 00:27:22 because right now we only have the
  • 00:27:24 action I'll add it below create Meetup
  • 00:27:27 I'll name it update meetup data or just
  • 00:27:31 update meetup to be in line with create
  • 00:27:32 meter there I'll get my state and a
  • 00:27:35 payload payload will be the new meetup
  • 00:27:37 data and now in there I will basically
  • 00:27:42 update my meet up with that meetup data
  • 00:27:44 so first of all I need to fetch the
  • 00:27:47 meetup which should be changed I'll get
  • 00:27:49 it from my state there I have my loaded
  • 00:27:51 meetups and there I want to find a given
  • 00:27:55 meetup I'll find it by ID so the arrow
  • 00:28:00 function here which will return me a
  • 00:28:01 meetup should simply check if the idea
  • 00:28:04 of the meetup I'm currently looking at
  • 00:28:06 in that array of meetups matches my
  • 00:28:09 payload ID this is the ID of the meetup
  • 00:28:13 which should get updated so that will
  • 00:28:15 give me the meetup I wanna
  • 00:28:17 well I want to change I want to update
  • 00:28:19 their I don't want to check if we have a
  • 00:28:23 title following the same logic as before
  • 00:28:25 then I want to change meetup title to be
  • 00:28:29 the payload title and I'll repeat this
  • 00:28:34 for description date if we have
  • 00:28:36 description here in the payload I want
  • 00:28:40 to update payload the score
  • 00:28:42 a meet-up description and set it equal
  • 00:28:45 to payload description lastly all the
  • 00:28:48 for the date if we have a date in the
  • 00:28:52 payload then I want to set meetup date
  • 00:28:55 equal to payload date to update that so
  • 00:28:59 this is the logic in my mutation I'll
  • 00:29:01 fetch a meter and then I'll change only
  • 00:29:04 what I need to change for that I check
  • 00:29:06 if that's a title description or date if
  • 00:29:08 any of these is present in the payload
  • 00:29:10 with that I'm updating that I have my
  • 00:29:13 mutation it's named update Meetup
  • 00:29:15 so down in the update meetup action I
  • 00:29:21 can commit this to commit this newly
  • 00:29:24 created armed mutation update meetup and
  • 00:29:27 of course I need to pass the pail out
  • 00:29:29 there because the payload contains the
  • 00:29:30 data and we want to edit data so it
  • 00:29:33 makes sense to pass a to it finally I
  • 00:29:36 also want to catch any errors here in
  • 00:29:39 that case I will console lock the error
  • 00:29:42 so that we get any insights and of
  • 00:29:44 course I still want to commit something
  • 00:29:46 I want to set loading to false because
  • 00:29:48 even if we've gotten an error the
  • 00:29:50 loading still is done so that was a lot
  • 00:29:54 of work now we get this update meetup
  • 00:29:56 data-action setup back to the update
  • 00:29:59 meetup details dialog we can now a
  • 00:30:01 dispatch this here so there I will reach
  • 00:30:04 out to my store and call this patch and
  • 00:30:07 dispatch this newly created action now
  • 00:30:10 we need to pass some data there and what
  • 00:30:14 do we expect to get let's have a look at
  • 00:30:16 that store again in the action we're
  • 00:30:19 using the title description date and the
  • 00:30:23 ID these are the things we try to access
  • 00:30:26 on the payload now it's okay if some of
  • 00:30:28 them are missing that's why I have two
  • 00:30:29 checks here DF checks the ID is needed
  • 00:30:32 in all cases though so let's make sure
  • 00:30:34 to pass the ID the ID can simply be
  • 00:30:38 retrieved of course from the loaded
  • 00:30:39 meetup the loaded meetup ID that's the
  • 00:30:41 ID stored in firebase already and that
  • 00:30:44 obviously is the ID by which we can
  • 00:30:45 identify it
  • 00:30:46 now we'll also have a title here this
  • 00:30:49 editable edited title and of course we
  • 00:30:54 can also pass the
  • 00:30:56 because even if we didn't change it it's
  • 00:30:58 still the original one so we can safely
  • 00:31:00 overwrite it
  • 00:31:01 so here I'll set description equal to
  • 00:31:04 this edited description like that with
  • 00:31:08 that I'm dispatching reaction and I'm
  • 00:31:10 passing this object now let's say if
  • 00:31:13 that was let's see if that works I'm
  • 00:31:15 reloading this and I'm opening up in
  • 00:31:17 firebase so here that's this meet up
  • 00:31:19 with awesome as a description let's
  • 00:31:22 change the description to really awesome
  • 00:31:25 and let's it safe let's have a look at
  • 00:31:29 the Meetup really awesome as a
  • 00:31:32 description let's change to titled hue
  • 00:31:34 just to see if that works
  • 00:31:36 maybe it's the San Francisco meetup
  • 00:31:39 let's it safe and let's switch to
  • 00:31:41 firebase here and we see the San
  • 00:31:44 Francisco media so this is working let's
  • 00:31:47 all try something else if I empty this
  • 00:31:49 and I hit say if it doesn't get closed
  • 00:31:52 and here nothing changed if I close it
  • 00:31:55 like that nothing changes and if I
  • 00:31:59 reload that and I actually don't change
  • 00:32:03 anything but hit save it gets submitted
  • 00:32:05 but here you see nothing changed so this
  • 00:32:09 is how we can edit the meetup of course
  • 00:32:11 thus far only the title and description
  • 00:32:13 in the next video we'll have a look at
  • 00:32:16 how we can add a date and time see you
  • 00:32:18 there bye