Coding

Storing Data on Firebase | Vue.js + Vuetify + Firebase FULL PROJECT

  • 00:00:01 welcome back to our meter project in the
  • 00:00:05 previous videos we already added quite
  • 00:00:07 some functionalities in the last videos
  • 00:00:09 you made sure that we can sign up sign
  • 00:00:11 in and get off education errors now I
  • 00:00:14 wanna sign in and I want to work on the
  • 00:00:17 next big thing when we organize a
  • 00:00:20 meet-up right now we only store that
  • 00:00:22 locally in our view X store and
  • 00:00:24 therefore we can see it there but we
  • 00:00:26 don't persist it we don't store it in a
  • 00:00:29 database on a server this is what I want
  • 00:00:32 to do in this video let's store new
  • 00:00:35 meetups on firebase
  • 00:00:40 so the goal is to store new meetups on
  • 00:00:42 firebase so that if we fill out this
  • 00:00:44 form entered image and everything pick a
  • 00:00:47 date that we actually write this to our
  • 00:00:50 real time database on this firebase
  • 00:00:52 project we're using here now for this I
  • 00:00:55 will use the firebase SDK though I will
  • 00:00:58 highlight that if you visit the docs and
  • 00:01:01 click on guides there if you pick real
  • 00:01:04 time database this is what will use the
  • 00:01:07 web SDK JavaScript SDK you could also go
  • 00:01:11 with the REST API though so you can send
  • 00:01:15 normal Ajax requests queue this REST API
  • 00:01:19 to save new items in the database or
  • 00:01:22 gets the items and there won't be
  • 00:01:24 nothing wrong with that I'll stick to
  • 00:01:27 the SDK because well I also wanna teach
  • 00:01:29 that and because I used the SDK for
  • 00:01:32 signing users in and up already
  • 00:01:34 but I just wanted to highlight you have
  • 00:01:36 that option you don't need to use the
  • 00:01:39 firebase SDK now with that out of the
  • 00:01:42 way let me close the documentation and
  • 00:01:45 go back to our project code here now any
  • 00:01:48 earth it's this is a store opened right
  • 00:01:51 now what we do is we have hard-coded
  • 00:01:53 meetups here which we load at the
  • 00:01:55 beginning and then we also have our
  • 00:01:58 create meetup method here which will
  • 00:02:01 basically just create a new meetup
  • 00:02:03 constant and write that to our well
  • 00:02:06 local array of meetups I want to keep
  • 00:02:10 that action but in that action I now of
  • 00:02:13 course want to reach out to firebase and
  • 00:02:15 store it there now we're already
  • 00:02:18 importing the firebase SDK because we're
  • 00:02:20 using it for authentication so what we
  • 00:02:23 can do in this create meetup action is
  • 00:02:26 we can use the SDK here to to write data
  • 00:02:29 to the database I will still create a
  • 00:02:32 meet-up obviously but before I commit
  • 00:02:36 anything I want to reach out to my
  • 00:02:39 firebase servers and this is important I
  • 00:02:42 do this in the action because actions
  • 00:02:44 are the place where you do asynchronous
  • 00:02:47 tasks in a view X store you never run
  • 00:02:50 any asynchronous code in you
  • 00:02:53 Haitians so you never do that here and
  • 00:02:55 of course we do have asynchronous code
  • 00:02:58 here because reaching out to a server
  • 00:03:00 which we do in the end and storing data
  • 00:03:02 there that is just a synchronous task so
  • 00:03:07 Q reach out to firebase I'll use the
  • 00:03:10 firebase SDK and for authentication we
  • 00:03:13 use the off method here now off gives us
  • 00:03:17 access to all the authentication relay
  • 00:03:18 that methods and functions here I want
  • 00:03:21 to get access to the database related
  • 00:03:23 ones so we call database now on database
  • 00:03:27 we now got this ref function and ref is
  • 00:03:32 a super important functional method
  • 00:03:34 actually ref allows us to pass an
  • 00:03:37 argument which is basically denote in
  • 00:03:40 our database under which we want to
  • 00:03:42 store data if you check out your
  • 00:03:45 real-time database here you see that it
  • 00:03:47 basically is a tree of nodes well we
  • 00:03:49 only get the root node right now but you
  • 00:03:51 will soon see it becoming a tree
  • 00:03:54 we don't have tables here or anything
  • 00:03:56 like that we just have one big JSON
  • 00:03:59 object so to say and that is where we
  • 00:04:02 store our data so to store data I first
  • 00:04:06 of all need to specify a node under
  • 00:04:08 which I want to specify that store that
  • 00:04:11 data and that node doesn't have to exist
  • 00:04:13 yet here I will name it meetups and
  • 00:04:17 again this is totally up to you what you
  • 00:04:19 name it it doesn't have to exist yet it
  • 00:04:21 will get created once you start writing
  • 00:04:23 data to it so now I specified that I
  • 00:04:26 want to store data or that I want to
  • 00:04:29 access the meetups node that's all I'm
  • 00:04:31 specifying right now I'm not doing
  • 00:04:33 anything I will call the push method
  • 00:04:36 next which is one of these supported
  • 00:04:39 methods firebase offers us for writing
  • 00:04:42 data Porsche simply allows us to add
  • 00:04:45 data to a list we would also have set
  • 00:04:48 which is useful if you don't have a list
  • 00:04:51 of data but a single object you want to
  • 00:04:53 set and we also have updated we will see
  • 00:04:56 update later in action which basically
  • 00:04:58 allows us to update one single item
  • 00:05:01 again here I will use push though
  • 00:05:03 because of course I manage a list of
  • 00:05:05 meetups
  • 00:05:06 now to push I can pass my meat up just
  • 00:05:10 like that I can remove this ID note or
  • 00:05:15 this ID property though because firebase
  • 00:05:18 will automatically create a unique ID
  • 00:05:20 for me so I can remove that and by the
  • 00:05:24 way if you want to learn more about
  • 00:05:25 firebase check out this mini-series I
  • 00:05:28 did together with an actual firebase
  • 00:05:30 employee who gave us some deeper insight
  • 00:05:33 into what firebase is and how it works
  • 00:05:35 super useful for understanding the
  • 00:05:38 bigger picture and some advanced pieces
  • 00:05:40 back to this project though we're
  • 00:05:42 pushing this meetup constant to firebase
  • 00:05:45 under this node and that should already
  • 00:05:48 add it however this actually just gives
  • 00:05:51 us a promise here so we can use them now
  • 00:05:55 to react you a success case so if we
  • 00:05:58 successfully wrote data here for now
  • 00:06:02 what I will do is I will simply fetch
  • 00:06:04 that data we might get back here and
  • 00:06:07 simply log into the console to see if
  • 00:06:10 that was successful we could also fail
  • 00:06:13 so let's also add a catch block queue
  • 00:06:17 whoops without semicolons here that's
  • 00:06:19 the style we write the code to also see
  • 00:06:22 any potential errors we got so here we
  • 00:06:24 might receive an error which I then also
  • 00:06:27 want your output console log error just
  • 00:06:31 like that with that we're handling all
  • 00:06:34 that and we're not quite done I will
  • 00:06:37 also change the place where we commit
  • 00:06:39 this in the future actually I can do it
  • 00:06:41 right now I want to commit it inside the
  • 00:06:43 success callback because I only want to
  • 00:06:45 commit this item to my local store if we
  • 00:06:48 successfully wrote it to the database so
  • 00:06:51 with that let's save this code and let's
  • 00:06:54 do it in our application here let's open
  • 00:06:57 up the console and let's create a new
  • 00:07:00 Meetup maybe the Paris meetup and I can
  • 00:07:05 now actually just take the data here
  • 00:07:08 like the image here in my dummy meetup I
  • 00:07:11 have hard-coded that is in Paris
  • 00:07:14 obviously here's the image URL it's a
  • 00:07:17 nice meetup in Paris
  • 00:07:20 and let's pick 24 third August and maybe
  • 00:07:25 5:00 p.m. let's click create meetup and
  • 00:07:29 you see we get something back a
  • 00:07:31 strange-looking object I will come back
  • 00:07:34 to how we can handle this soon let's
  • 00:07:36 have a look at our database now and you
  • 00:07:38 see without updating the page by the way
  • 00:07:40 it updates automatically then we have a
  • 00:07:42 new meet-ups node and that's of course
  • 00:07:45 the node we specified here in our create
  • 00:07:49 meetup action this node here so we get
  • 00:07:53 this new node and if we expand it we see
  • 00:07:55 there's a new object with some cryptic
  • 00:07:57 key that is this ID firebase krint
  • 00:08:01 automatically it's guaranteed to be
  • 00:08:03 unique and in there we got the
  • 00:08:05 description the image URL the location
  • 00:08:08 and the title you will see that the date
  • 00:08:11 is missing though even though we had it
  • 00:08:14 in this object the reason for that is
  • 00:08:18 that the date as we get it here can't be
  • 00:08:21 stored by firebase it's a date object
  • 00:08:23 and it can't store that we can actually
  • 00:08:26 call to izo string on that date object
  • 00:08:30 to convert it into a string which can be
  • 00:08:33 stored so why don't we try out that so
  • 00:08:36 let me save this and let's quickly sign
  • 00:08:40 in again by the way of course you don't
  • 00:08:44 see our newly created meetup here in the
  • 00:08:46 list of meetups because we don't fetch
  • 00:08:48 meetups from firebase yet so let's
  • 00:08:51 create a new meetup quickly and I will
  • 00:08:54 do this really quick just hammering some
  • 00:08:57 characters in there because I just want
  • 00:08:59 to see if the date gets safe now so
  • 00:09:01 let's just pick any arbitrary date here
  • 00:09:03 let's click create meetup and let's have
  • 00:09:05 a look new item was added and now you
  • 00:09:08 see the date was stored as a string so
  • 00:09:10 that's useful
  • 00:09:11 now we're already storing our meetup
  • 00:09:14 here now I will soon also add file
  • 00:09:17 upload so that we don't just paste a
  • 00:09:20 link in here but that we can actually
  • 00:09:21 upload files and store them on firebase
  • 00:09:24 before we do that though let's think
  • 00:09:28 about how we can read or how we can get
  • 00:09:32 the meetups
  • 00:09:33 from firebase and what we would need to
  • 00:09:36 work with them correctly one thing we
  • 00:09:38 would for example need SD ID firebase
  • 00:09:42 creates for us descriptor extreme
  • 00:09:45 previously we hard-coded an ID into our
  • 00:09:49 code but we removed that a few seconds
  • 00:09:51 ago that means that if we view our
  • 00:09:53 meetups and we try to access our new
  • 00:09:55 Meetup
  • 00:09:55 you already see it in the bottom left
  • 00:09:57 corner it's undefined it has no idea we
  • 00:10:01 try to fetch it by ID and it worked in
  • 00:10:04 the past when we hard-coded the ID but
  • 00:10:06 now it's of course not working anymore
  • 00:10:08 because well we got no ID anymore we
  • 00:10:11 removed the field here in our Meetup
  • 00:10:12 that's the meetup we commit to our store
  • 00:10:15 though we try to access a media buy ID
  • 00:10:17 we got non error well we have an ID in
  • 00:10:21 firebase and we actually get back some
  • 00:10:23 data op check here so maybe we have a
  • 00:10:26 way of getting that ID firebase created
  • 00:10:29 for us and stored it in our local store
  • 00:10:31 too so that we can use the firebase ID
  • 00:10:34 to access the Meetup and when deed we
  • 00:10:36 can even though the object we get back
  • 00:10:40 when we successfully saved our object
  • 00:10:44 even though that looks rather cryptic we
  • 00:10:48 can extract some useful data from it for
  • 00:10:51 example the key so here what I can do is
  • 00:10:54 I can create a new constant key and just
  • 00:10:57 access data key we might not see that
  • 00:11:00 property when we print it to the console
  • 00:11:03 but it is there it's just a special type
  • 00:11:06 of object firebase gives us back it's a
  • 00:11:08 promise about and it basically will
  • 00:11:11 resolve to some actual data pretty fast
  • 00:11:13 so we can safely access key here so with
  • 00:11:17 that we get the key
  • 00:11:18 firebase credit for us and now we can
  • 00:11:20 use that to adjust the meetup we wanna
  • 00:11:23 save so we can basically just commit an
  • 00:11:26 object here where we use the spread
  • 00:11:29 operator here to get our meetup data so
  • 00:11:33 from that me table object so basically
  • 00:11:34 just get all the properties we had in
  • 00:11:36 there and add them to this newly created
  • 00:11:38 object here and also add our key
  • 00:11:42 however just don't don't just add it
  • 00:11:45 like that use ID
  • 00:11:47 use key as a value so now we're using
  • 00:11:48 that key firebase created and stored as
  • 00:11:51 an ID to the meetup which we actually
  • 00:11:53 committed to the store with that in
  • 00:11:55 place if we now save this and reload
  • 00:12:00 clear the console to see we got no
  • 00:12:02 errors quickly load in again a login
  • 00:12:06 again organize a new Meetup
  • 00:12:07 let's just add a meetup here again again
  • 00:12:10 pick any date we want
  • 00:12:12 let's hit create meetup now again we see
  • 00:12:16 this was created here sign out if you
  • 00:12:20 have really good eyes you might see that
  • 00:12:22 the date we store here is stored as 7:00
  • 00:12:25 a.m. or 751 a.m. whilst here we did
  • 00:12:29 indeed save 951 a.m. that's just my
  • 00:12:33 local timezone here and a destur the
  • 00:12:35 time zone here – with this character so
  • 00:12:38 we are able to retrieve to correct time
  • 00:12:41 later just a side note more
  • 00:12:42 interestingly we can see that if I now
  • 00:12:45 click on view meetup you see already
  • 00:12:46 we're using this idea and it works we
  • 00:12:49 can load it so we get the front that
  • 00:12:52 fixed again however of course if we have
  • 00:12:54 a look at all the meetups we just see
  • 00:12:57 the one we just created even though we
  • 00:12:59 have more of them in our firebase list
  • 00:13:01 well we're not fetching data from
  • 00:13:03 firebase yet so let's do that – now for
  • 00:13:08 that we need to make sure that we fetch
  • 00:13:10 data whenever our application loads
  • 00:13:13 basically and we need to add a new
  • 00:13:15 action well let's start with the action
  • 00:13:18 then for that I'll add well a new action
  • 00:13:21 I'll call it load meetups here as always
  • 00:13:25 I get access to the commit method I
  • 00:13:28 don't have a payload I'm interested in
  • 00:13:30 because I just want to load all the
  • 00:13:32 meetups and there I now want to reach
  • 00:13:36 out to my firebase database again and
  • 00:13:39 now I want to reach out to the ref again
  • 00:13:42 so to this meetups reference where we
  • 00:13:44 stored all the meetups to tell firebase
  • 00:13:47 which node I want to access however now
  • 00:13:50 I'm not pushing or setting anything
  • 00:13:52 instead I want to fetch values in there
  • 00:13:54 are basically two ways of getting values
  • 00:13:56 the first honesty on method
  • 00:14:00 on actually allows us to listen to an
  • 00:14:02 event the value event is the most
  • 00:14:04 important one and this is an event
  • 00:14:07 firebase gives us which is fired
  • 00:14:08 whenever the day that changes keep in
  • 00:14:11 mind that it's called a real-time
  • 00:14:13 database firebase automatically accesses
  • 00:14:16 aid via WebSockets and hence we can
  • 00:14:18 listen to any value changes and get push
  • 00:14:22 notifications by the server whenever the
  • 00:14:25 meetups on our array of meetups change
  • 00:14:28 sounds pretty awesome and it is and
  • 00:14:30 again check out this our video series I
  • 00:14:32 mentioned I did together with Abe from
  • 00:14:34 Google to learn more about that now here
  • 00:14:38 I don't really need that real-time
  • 00:14:39 functionality though I can use one stair
  • 00:14:43 4 which will just give me a snapshot and
  • 00:14:45 not establish a real-time connection
  • 00:14:48 because I'm not interested in future
  • 00:14:50 updates I update my store anyways if
  • 00:14:53 someone else were to add a media buy the
  • 00:14:55 really neat add life update in the list
  • 00:14:57 and if I go back to the app will reload
  • 00:15:00 the app I fetch all meetups anyways
  • 00:15:02 still I pass the value here to get the
  • 00:15:05 value of this reference here so get a
  • 00:15:09 list of all meetups and then again
  • 00:15:11 that's a promise so I can catch errors
  • 00:15:14 and have my then block now like come
  • 00:15:18 back to deep then block soon let's catch
  • 00:15:20 errors first so here I get any potential
  • 00:15:23 error and if I got an error well then
  • 00:15:26 for now I simply want to lock that so
  • 00:15:31 I'm logging my error the deadlock is
  • 00:15:34 interesting of course here I get back my
  • 00:15:37 data and this data here now is super
  • 00:15:42 interesting because this of course is my
  • 00:15:44 list of meetups so it is basically al
  • 00:15:46 this list these three nodes including
  • 00:15:49 the ski and of course all the content in
  • 00:15:52 there I will get rid of the first one
  • 00:15:54 because we have no valid date here can
  • 00:15:56 just click the X the averages have well
  • 00:16:00 ugly names and descriptions but a valid
  • 00:16:03 date and it will soon clear this anyways
  • 00:16:04 to start fresh but let's go with that
  • 00:16:07 for now so that's the data these two
  • 00:16:10 values are what I expect to fetch what I
  • 00:16:13 can now do
  • 00:16:14 I can create a new array I'll call it
  • 00:16:16 meetups and it's an empty array I want
  • 00:16:18 to store all the meetups I fetch in
  • 00:16:20 there now data of course already is a
  • 00:16:22 list of all the elements in the meetups
  • 00:16:24 node but these meetups don't have the
  • 00:16:27 shape I need for my application so I
  • 00:16:30 need to transform the data so we'll
  • 00:16:32 store an object here where it's simply X
  • 00:16:35 is my data and there I have two Val
  • 00:16:37 helper method
  • 00:16:38 well basically gives us access to the
  • 00:16:41 values in the data we fetched here
  • 00:16:43 because we get some additional metadata
  • 00:16:45 too so object here is the actual value I
  • 00:16:48 want to use dad will be an object not an
  • 00:16:51 array an object will have a couple of
  • 00:16:54 properties each key is a property and
  • 00:16:57 the value of each property would be an
  • 00:16:58 average checked with the detailed data
  • 00:17:00 so that is what I get with well there's
  • 00:17:02 object with property value pairs now
  • 00:17:06 since I have an object and not an array
  • 00:17:08 and I want to transform all the elements
  • 00:17:12 in this object so to say I can create a
  • 00:17:15 for loop and basically loop through all
  • 00:17:18 the keys in my object because again just
  • 00:17:21 because it's important I get an object
  • 00:17:24 with two properties in this case the
  • 00:17:26 property is the key here just a strange
  • 00:17:29 ID and the value would be an average
  • 00:17:31 checked so now I'm looping through all
  • 00:17:33 the keys of the object of God so an
  • 00:17:34 object with these two properties and
  • 00:17:37 inside this loop I now have access to
  • 00:17:39 that object which holds the detail
  • 00:17:41 information for each Meetup so with that
  • 00:17:44 here I'm looping through all the keys an
  • 00:17:46 object so I can now use this meetups
  • 00:17:49 array I created up here and push a new
  • 00:17:53 object on it this will now be an object
  • 00:17:55 I construct manually where I want to
  • 00:17:57 ensure that I have an ID which is just
  • 00:17:59 the key actually this key firebase gives
  • 00:18:02 me where I have in title this will be
  • 00:18:05 now object then access to key because
  • 00:18:08 again it's important object is not an
  • 00:18:10 array there's an object we have these
  • 00:18:12 strange IDs generated by firebase as
  • 00:18:15 keys so we're accessing the key on the
  • 00:18:18 object I get access to well basically
  • 00:18:21 this object stored in that property and
  • 00:18:24 on this object here I'm interested in
  • 00:18:26 the title
  • 00:18:27 and then I repeat the same for the
  • 00:18:30 description object key description and
  • 00:18:34 for the image URL which I also stored
  • 00:18:37 object key image URL and so on so let's
  • 00:18:43 do the same for the date here object key
  • 00:18:46 date and that is it for now the
  • 00:18:51 interesting thing here of course is
  • 00:18:54 where do we call this and what do we do
  • 00:18:57 with this meetups array well we'll call
  • 00:19:00 it soon before we do though after
  • 00:19:03 leaving this for loop I want to commit a
  • 00:19:06 new mutation which I'll call set loaded
  • 00:19:10 meetups and I have to create that I will
  • 00:19:13 pass this array of meetups which are
  • 00:19:15 popular here queue it up in Maya
  • 00:19:16 mutations here I'll add a numeration
  • 00:19:19 mutation set loaded meetups this one
  • 00:19:24 here I do expect to get my state here
  • 00:19:28 and of course the payload and then
  • 00:19:31 inside there I will just say state
  • 00:19:33 loaded meetups so access this array
  • 00:19:38 which right now holds hard-coded values
  • 00:19:40 loaded meetups
  • 00:19:42 and set it equal to payload so to that
  • 00:19:44 array I created and I've fetched so
  • 00:19:47 that's what I do now of course would
  • 00:19:49 also be interesting to decide where
  • 00:19:52 should be called this act to where
  • 00:19:53 should we dispatch it when should we
  • 00:19:55 fetch all these meetups and when I do
  • 00:19:58 this in the main dot J's file because
  • 00:20:02 that's the file where I load my app so
  • 00:20:05 we already got this created method and
  • 00:20:07 this is called whenever this route view
  • 00:20:09 instance is created so it sounds like a
  • 00:20:11 good place to load all the meetups so
  • 00:20:14 what I'll do it your is all add some
  • 00:20:16 code after we initialize firebase and
  • 00:20:19 there I will now call this store
  • 00:20:26 dispatch and call load meetups so this
  • 00:20:30 action we just created in the store load
  • 00:20:33 meetups this one so that's what I do
  • 00:20:36 here
  • 00:20:39 let's save this and see if it works if
  • 00:20:41 we go back to the application and we
  • 00:20:45 reload it well we see a strange behavior
  • 00:20:50 here if we explore meetups we see the
  • 00:20:53 meetup so if I go back we see the
  • 00:20:54 meetups but if I reload the application
  • 00:20:56 you will notice at the beginning for a
  • 00:20:59 brief second you saw the meetup in New
  • 00:21:00 York then it becomes black and then the
  • 00:21:03 new meetups are loaded the reason for
  • 00:21:06 this is that when we dispatch this load
  • 00:21:09 meetups method it of course takes a
  • 00:21:10 second to fetch the meetups so maybe it
  • 00:21:13 would be nice to see a loader whilst we
  • 00:21:15 are fetching meetups and we can easily
  • 00:21:18 implement that if you go back to the
  • 00:21:20 store we already have to set loading
  • 00:21:22 mutation which sets the loading state to
  • 00:21:25 true or to whatever the payload is
  • 00:21:27 actually we can take advantage of this
  • 00:21:30 when we load the meetups wait don't we
  • 00:21:33 commit set loading first set it to true
  • 00:21:36 copy that and set it to false here once
  • 00:21:43 we get the meetups maybe after we
  • 00:21:46 actually committed that and also if you
  • 00:21:48 got an error because it's not loading
  • 00:21:50 anymore we got an error but it's not
  • 00:21:52 loading anymore so with that in place
  • 00:21:55 all we need to do is add a loader so
  • 00:22:00 let's go to the home that view file and
  • 00:22:02 here we get this carousel where we want
  • 00:22:05 to basically make sure we only show it
  • 00:22:07 if we loaded all the elements let's head
  • 00:22:10 over to beautify chase for this to see
  • 00:22:13 which component can help us with that we
  • 00:22:16 click on components we actually see that
  • 00:22:19 we get this progress and activity
  • 00:22:21 component thing so here why don't we
  • 00:22:25 pick one of these loaders and
  • 00:22:27 indeterminate one makes sense because we
  • 00:22:30 don't know when we'll be finished so
  • 00:22:32 what I can do here is I can simply pick
  • 00:22:35 any of these let's maybe pick this one
  • 00:22:39 the first one go back to our application
  • 00:22:42 and add it so add a new relay out here
  • 00:22:47 in as we layout on you'd add a new view
  • 00:22:51 flax element
  • 00:22:53 make dis X as 12 to span the full width
  • 00:22:57 on all devices and that's also at a
  • 00:23:00 class which is text XS Center to make
  • 00:23:04 sure the loader which is an inline
  • 00:23:06 element is centered now in there let's
  • 00:23:08 paste our circular loader in there with
  • 00:23:11 the intern managed indeterminate
  • 00:23:13 directive to make sure it keeps on
  • 00:23:15 spinning we don't manually have to
  • 00:23:16 adjust the percentage as it's loaded but
  • 00:23:19 this place is over multiple lines of
  • 00:23:20 course feel free to adjust the color off
  • 00:23:23 it
  • 00:23:23 I'll also then bind Q width and set this
  • 00:23:27 is 7 and size which all set to 70 and
  • 00:23:31 feel free to play around with these well
  • 00:23:33 see how it changes the size of the
  • 00:23:34 loader and then I also want to add the
  • 00:23:38 if and check if it's loading and only if
  • 00:23:41 loading is true I want to show this
  • 00:23:43 spinner now with that I can go back to
  • 00:23:46 my computer properties down there and
  • 00:23:49 loading property and in there I want to
  • 00:23:53 return the value of my loading getter
  • 00:23:56 which we have in the store so with that
  • 00:23:59 let's reload this application and we see
  • 00:24:01 the spinner and once we're done well we
  • 00:24:04 see a black carousel we saw the carousel
  • 00:24:07 before the reason for this is simple
  • 00:24:09 here I'm checking for a loading but
  • 00:24:12 we're showing the carousel at all times
  • 00:24:13 so we can go to the layout with the
  • 00:24:16 carousel and add if not loading on the
  • 00:24:18 whole layout on the whole row here and
  • 00:24:21 now what we should see is that if you
  • 00:24:23 load this we just see the spinner and
  • 00:24:24 then we get the carousel with the loaded
  • 00:24:27 meetups so now we got this working as it
  • 00:24:31 should work loading the meetups when we
  • 00:24:33 need them that's a final step I'll clear
  • 00:24:36 up my database here and remove both
  • 00:24:38 meetups this will not change my display
  • 00:24:41 here but if I go back we loaded we see
  • 00:24:45 an empty carousel and we could improve
  • 00:24:47 this user experience what I want to do
  • 00:24:49 is I want to improve it by organizing a
  • 00:24:51 new one for Dad I'll organize a new
  • 00:24:54 meetup and now I will copy dead link
  • 00:24:58 here give it a new name so that's the
  • 00:25:00 New York
  • 00:25:01 oops New York meetup if I'm not mistaken
  • 00:25:05 here ok
  • 00:25:06 New York therefore maybe with a
  • 00:25:09 lowercase L enter the image awesome New
  • 00:25:13 York meetup and let's pick a time maybe
  • 00:25:19 six September 6 p.m. like that
  • 00:25:24 let's hit create meetup and you see it
  • 00:25:26 works even though I'm not locked in so
  • 00:25:29 that's something I also want to change
  • 00:25:31 I'll do that in the next video though I
  • 00:25:33 want to make sure that only
  • 00:25:34 authenticated users can create new
  • 00:25:37 meetups and that we also store the idea
  • 00:25:40 of the user who created a meetup in the
  • 00:25:42 database because right now we get a new
  • 00:25:44 meetup to get no idea who created it
  • 00:25:47 because we're also not enforcing the
  • 00:25:49 user needs to be signed up and needs to
  • 00:25:51 be able to create meetup so that we need
  • 00:25:54 to user to be signed in so let's fix
  • 00:25:56 this in the next video