Coding

#16 Adding Events | Build a Complete App with GraphQL, Node.js, MongoDB and React.js

  • 00:00:01 so now that in the last video we added
  • 00:00:04 this modal which we'll use to add events
  • 00:00:07 by adding a forum into that modal we're
  • 00:00:09 now all set to finally create events
  • 00:00:12 with the help of our graph QL back in
  • 00:00:14 API so let's do just that and by the end
  • 00:00:16 of this video we'll have a couple of
  • 00:00:18 events at it
  • 00:00:22 so we prepared the modal let's now use
  • 00:00:25 it to add events and therefore this
  • 00:00:28 modal content paragraph of course will
  • 00:00:30 get replaced by a forum that should
  • 00:00:32 actually hold the inputs for a new event
  • 00:00:34 now I did have a look at the schema for
  • 00:00:38 my events last in the last video so just
  • 00:00:42 to have a quick look at it again we will
  • 00:00:44 need to gather a title a description a
  • 00:00:47 price and a date so back here in my
  • 00:00:50 forum that means that I want to have
  • 00:00:54 some divs in there
  • 00:00:56 with a class name of forum control to
  • 00:01:00 use this global styling we set up an
  • 00:01:04 index CSS where I have form control
  • 00:01:06 styles that automatically add some
  • 00:01:08 styling to labels and so on in there and
  • 00:01:10 therefore now in this form control I'll
  • 00:01:14 add a label and that label will say
  • 00:01:18 title and it is for with HTML for my
  • 00:01:22 title input field with the ID title the
  • 00:01:26 input here holds type text or once typed
  • 00:01:30 text has an ID of title and will well
  • 00:01:33 gather text input in the end now as we
  • 00:01:37 saw in our schema here we need a
  • 00:01:39 description a price and a date as well
  • 00:01:42 so let's add another form control for
  • 00:01:46 the price so let's say price here and
  • 00:01:51 the type therefore is number and another
  • 00:01:56 form control for the date and therefore
  • 00:02:01 this is the event date and the type here
  • 00:02:04 will be date last but not least it's
  • 00:02:07 time for a last form control which will
  • 00:02:10 hold the description of the event so
  • 00:02:15 let's say description here and this will
  • 00:02:17 actually not be a input it'll be a text
  • 00:02:19 area with an ID of description and let's
  • 00:02:24 say with 4 rows as a default and yeah
  • 00:02:30 with that let's have a look at our modal
  • 00:02:31 if I click create event this is our form
  • 00:02:34 doesn't look too shabby
  • 00:02:36 the nice thing is for a date we get an
  • 00:02:37 automatic date picker in modern browsers
  • 00:02:40 which is great and yeah price entitled
  • 00:02:43 at work's price is a number input as you
  • 00:02:46 can tell by the fact that we can
  • 00:02:48 increment and decrement this now the
  • 00:02:50 description styling is not what I want
  • 00:02:52 so in the index CSS file where I have my
  • 00:02:55 global styling I want to make sure that
  • 00:02:57 I don't just stall inputs in a form
  • 00:03:00 control but that I also style my text
  • 00:03:03 areas in there so that the text area
  • 00:03:05 receives the same style as the input so
  • 00:03:10 with that that looks way better I got my
  • 00:03:15 formatted therefore which was relatively
  • 00:03:17 easy now we need to make sure that we
  • 00:03:19 save the values the user enters and that
  • 00:03:22 we also use them when we click confirm
  • 00:03:24 here on the events page here in a modal
  • 00:03:30 confirm Handler I therefore wanna gather
  • 00:03:32 all the values entered by the user and
  • 00:03:35 we could use two-way binding for that so
  • 00:03:37 we could use state and T on change event
  • 00:03:40 here on the inputs to update the state
  • 00:03:43 for let's say um the title here with
  • 00:03:45 every keystroke and then bind this back
  • 00:03:47 through the value property that would be
  • 00:03:50 possible but I will use references
  • 00:03:52 because that's a really nice and easy
  • 00:03:54 way of handling this to use references
  • 00:03:57 I'll add a constructor here which
  • 00:03:59 receives props where we have to call
  • 00:04:02 super props as a first step and then I
  • 00:04:06 think I also did this new off file right
  • 00:04:09 there
  • 00:04:10 yeah I already used references so I'll
  • 00:04:13 use the exact same approach again I'll
  • 00:04:15 have my title element reference which is
  • 00:04:20 created with react create ref and this
  • 00:04:23 will be replicated free time so that I
  • 00:04:26 also have a price I'll reference that I
  • 00:04:29 also have my date I'll reference and
  • 00:04:33 that I also have my description l
  • 00:04:37 reference now these rafts need to be
  • 00:04:40 assigned down there in the template so
  • 00:04:42 on this input here all bind dis first
  • 00:04:44 ref to my title L ref because this well
  • 00:04:47 holds my title the
  • 00:04:49 second input here holds the price so
  • 00:04:51 it'll be bound to this price l reference
  • 00:04:54 the third input holds the date so let's
  • 00:04:58 bind this to date L reference and the
  • 00:05:01 last input the text area here of course
  • 00:05:04 holds the description so let's bind this
  • 00:05:06 to description L reference and now we
  • 00:05:09 can use these refs to gather the value
  • 00:05:11 in modal confirm handler so here I'll
  • 00:05:14 have my title and I can get it from this
  • 00:05:16 title L reference current value and
  • 00:05:20 again this approach can be repeated for
  • 00:05:23 the the price for the date and for the
  • 00:05:29 description we can now create our new
  • 00:05:34 event object here which is a JavaScript
  • 00:05:37 object where I just combine all these
  • 00:05:40 fields and here I use a next-gen
  • 00:05:42 JavaScript shortcut where if the
  • 00:05:45 property name and the value name or the
  • 00:05:49 variable which holds the value have the
  • 00:05:51 same name instead of writing title colon
  • 00:05:54 title and price : price you can omit the
  • 00:05:57 value and the colon but this again only
  • 00:05:59 works if property name and the name of
  • 00:06:02 the property of the variable that holds
  • 00:06:04 your value are the same which is the
  • 00:06:05 case here so let me then console.log my
  • 00:06:09 event here to see if that worked and
  • 00:06:11 let's also add some validation here to
  • 00:06:14 confirm that valid data was entered and
  • 00:06:17 you could have more refined validation
  • 00:06:20 where you also highlight the inputs
  • 00:06:23 which are wrong I'll simply add a check
  • 00:06:25 here where I see if title if I trim it
  • 00:06:29 has a length that is equal to 0 which
  • 00:06:32 means it's empty or if price if I trim
  • 00:06:36 it has a length which is equal to 0 or
  • 00:06:42 if if date if I trim this has a length
  • 00:06:50 that is equal to 0 or last but not least
  • 00:06:53 if description if I trim it has a length
  • 00:06:58 that is equal to 0 if either of these
  • 00:07:01 cases is
  • 00:07:03 case then I know something invalid was
  • 00:07:05 entered and therefore he rolled and just
  • 00:07:07 returned otherwise I'll construct event
  • 00:07:10 and log it here so let's save that and
  • 00:07:13 open the developer tools in the console
  • 00:07:15 here to see output that we do log and
  • 00:07:20 first of all if I click confirm without
  • 00:07:22 any values
  • 00:07:23 I see nothing which kind of proves that
  • 00:07:25 the authentication works and thereafter
  • 00:07:27 I'll have a test here let's select today
  • 00:07:32 and this is a test and click confirm now
  • 00:07:36 and this looks good an event was
  • 00:07:38 constructed and I got my date I got my
  • 00:07:41 description my price and my test so this
  • 00:07:44 is looking pretty good now for the date
  • 00:07:48 I'd actually like to have a different
  • 00:07:50 format I want to use date/time – local
  • 00:07:54 here which allows me to set date and
  • 00:07:56 time simultaneously so now with that
  • 00:07:59 let's open this again test 1299 and then
  • 00:08:06 here i can choose a date and i can
  • 00:08:12 choose a time like 1250 this is an hour
  • 00:08:18 test
  • 00:08:19 let's hit confirm and this now looks
  • 00:08:22 better now date here should be a string
  • 00:08:25 because I want to submit a string to my
  • 00:08:28 back-end if you have a look at the
  • 00:08:29 schema again the price should be a float
  • 00:08:32 the date should be a string though
  • 00:08:35 currently though the price
  • 00:08:37 all's is a string if you have a look at
  • 00:08:39 it that can be fixed a relatively simple
  • 00:08:41 or an easy way though all we have to do
  • 00:08:44 is when we store the price here or when
  • 00:08:47 we extract it I add a plus in front of
  • 00:08:49 this and this converts it to a number so
  • 00:08:53 we have the event here obviously we
  • 00:08:55 don't just fetch it to you well then
  • 00:08:57 ignore it instead I want to send this to
  • 00:09:00 the back end and we sent data to our a
  • 00:09:03 graphical back-end as we already
  • 00:09:05 practiced it in off J a seer there I
  • 00:09:09 showed you how to construct a query and
  • 00:09:11 how to then send it so I will copy all
  • 00:09:14 that code I have in there
  • 00:09:16 starting from the request body all the
  • 00:09:19 way to the end of the then catch chain
  • 00:09:23 here and copy that over into events J s
  • 00:09:26 and yes you could outsource this into a
  • 00:09:28 separate file and reuse it I
  • 00:09:30 deliberately want to duplicate it here
  • 00:09:32 to make it really clear what belongs to
  • 00:09:34 what so here in modal confirm handler
  • 00:09:37 after creating that event I now copy in
  • 00:09:41 that code which I copied from off J s
  • 00:09:43 but obviously we'll have to adjust it so
  • 00:09:46 my request body here will always be the
  • 00:09:49 same so I don't need to check whether
  • 00:09:51 I'm logging in or anything like that
  • 00:09:53 instead I can turn this into a Const
  • 00:09:56 here and I will have a mutation that is
  • 00:09:59 correct but I will target create event
  • 00:10:03 here and I need to store or send my
  • 00:10:07 event input to that if we have a look at
  • 00:10:09 the schema event input then has title
  • 00:10:12 description price and date so these are
  • 00:10:14 the fields which now need to be set here
  • 00:10:16 so I have my title I have my description
  • 00:10:19 I have my price and I have my date now
  • 00:10:26 date will also be a string price won't
  • 00:10:28 so in here we can now inject the price
  • 00:10:33 for the price the description for the
  • 00:10:36 description the title for the title and
  • 00:10:39 at the end here for the date I can also
  • 00:10:44 use date so this now constructs the
  • 00:10:47 query for creating an event now if we
  • 00:10:52 have a look at the schema we see that
  • 00:10:53 for a create event we get back the event
  • 00:10:56 which was created and if we have a look
  • 00:10:58 at the event type we see we have an ID
  • 00:11:00 title description and so on here and I
  • 00:11:02 want to fetch all of that to see if that
  • 00:11:04 worked so I get my ID I get my title my
  • 00:11:08 description my date what else do we have
  • 00:11:13 price and creator so price and creator
  • 00:11:17 is again a complex object there I want
  • 00:11:20 to get the ID and email so this is now
  • 00:11:23 my mutation which I want to send I sent
  • 00:11:27 us to graph QL obviously that's the idea
  • 00:11:29 we have one
  • 00:11:30 say man point this configuration can
  • 00:11:33 stay as it is though they're not really
  • 00:11:36 one thing is missing of course I now
  • 00:11:38 need to attach by token and that is why
  • 00:11:42 I do login I need that token and I need
  • 00:11:44 that token to then send requests to
  • 00:11:47 protected endpoints now what do we do
  • 00:11:50 with this token at the moment in apps is
  • 00:11:54 where we handle the login we store that
  • 00:11:56 token in our state here and that state
  • 00:11:59 is then distributed through the off
  • 00:12:01 context this is pretty good and not a
  • 00:12:04 surprise because that is why we set it
  • 00:12:06 up this way I can now access my off
  • 00:12:09 context in events J's as well
  • 00:12:11 accessing is pretty easy all we have to
  • 00:12:14 do is we have to add a static type here
  • 00:12:17 which is named context type a static
  • 00:12:20 property let me move it up there and the
  • 00:12:24 type here or the value of context type
  • 00:12:26 will be my off context so I'll import my
  • 00:12:32 off context here from context of context
  • 00:12:38 and assign this off context as a value
  • 00:12:41 here for context type and with this we
  • 00:12:44 got at this context property in the
  • 00:12:46 whole events JS file or in this class to
  • 00:12:49 be precise in the events page class and
  • 00:12:51 this allows me to interact with the
  • 00:12:53 context and this is pretty interesting
  • 00:12:55 because in the context I'll be able to
  • 00:12:57 fetch my token and that is what I need
  • 00:13:00 to append to the requests were sending
  • 00:13:02 because if you have a look at the
  • 00:13:04 backend in the schema we don't see that
  • 00:13:08 but we know since we wrote this that for
  • 00:13:11 events when we create an event we check
  • 00:13:13 whether we are authenticated and if you
  • 00:13:16 recall we do check this by parsing here
  • 00:13:20 with the is off middleware by parsing
  • 00:13:23 our authorization header and we want to
  • 00:13:26 retrieve a token from there which should
  • 00:13:28 be added in the format authorization
  • 00:13:31 that is the name of the header and then
  • 00:13:33 the value bearer whitespace and then the
  • 00:13:36 token so that is exactly what I will
  • 00:13:39 attach on the front end now in events
  • 00:13:41 j/s when we send that
  • 00:13:45 here I need that token so token can be
  • 00:13:50 fetched from content from this context
  • 00:13:55 token this token field will be available
  • 00:13:58 on this context because this context is
  • 00:14:00 set equal to off context now with the
  • 00:14:05 token available I can add a new header
  • 00:14:08 authorization and set this equal to
  • 00:14:11 bearer wide space and then my token
  • 00:14:16 which I retrieve here with that I'm
  • 00:14:18 sending that query to that endpoint here
  • 00:14:21 in the end with my token added and
  • 00:14:24 therefore hopefully I'm able to get a
  • 00:14:27 success response and for now down there
  • 00:14:30 I will simply console.log rest data so
  • 00:14:35 let's save all of that and let's give it
  • 00:14:37 a try let's see if that works if I
  • 00:14:39 create a new event test with $12.99 as a
  • 00:14:43 prize let's select today here and some
  • 00:14:49 time at afternoon this is a test and
  • 00:14:52 let's hit confirm and I get prize trim
  • 00:14:55 is not a function which makes a lot of
  • 00:15:00 sense because I am actually do convert
  • 00:15:03 price to a number here so I can't trim
  • 00:15:05 it anymore
  • 00:15:07 so here the cheque of course is not to
  • 00:15:08 trim the value so let's change that
  • 00:15:11 logic logic and say it's invalid if
  • 00:15:13 price is smaller or equal than zero so
  • 00:15:16 that price is greater than zero are
  • 00:15:19 treated as valid and with that change
  • 00:15:22 made to the validation logic let's try
  • 00:15:25 this again let's enter a dummy title a
  • 00:15:28 dummy price choose a date here and a
  • 00:15:34 description and confirm and I get back
  • 00:15:38 some errors here unauthenticated so
  • 00:15:41 somehow that thing with the token didn't
  • 00:15:44 really work let's have a look at our
  • 00:15:46 network we have a look at our graph QL
  • 00:15:50 request here in the headers which I sent
  • 00:15:55 bearer was null or the token
  • 00:15:57 was null and that is all Dwight failed
  • 00:15:59 so retrieving the token that was the
  • 00:16:02 problem when I tried to retrieve it here
  • 00:16:04 from the context and it makes sense
  • 00:16:07 because I'm not offending kated it's
  • 00:16:09 kind of confusing because I haven't
  • 00:16:12 added logic to hide this create event
  • 00:16:14 part if we're not authenticated because
  • 00:16:16 we shouldn't be able to see that
  • 00:16:17 obviously so let's log in here and now
  • 00:16:24 that we have to log out button which
  • 00:16:25 confirms that we are logged in let's try
  • 00:16:28 this let's set the price let's set a
  • 00:16:31 date this is a test and let's now
  • 00:16:39 confirm this and this looks no better I
  • 00:16:41 get back data and there I get my date as
  • 00:16:44 it was stored in the database the date
  • 00:16:47 deviates from what I entered because of
  • 00:16:49 different time so instead Saul it is the
  • 00:16:52 correct date actually got my prize my
  • 00:16:54 description and for the Creator I got
  • 00:16:56 the email and the ID so our back-end
  • 00:16:58 works and were able to create an event
  • 00:17:00 and that event is now really stored in
  • 00:17:02 the database there now with dead let's
  • 00:17:06 build up on this and first of all I want
  • 00:17:08 to make sure that I don't see this
  • 00:17:10 create event box if I've not locked in
  • 00:17:13 so that we avoid problems like before so
  • 00:17:15 here I can simply add my check and say
  • 00:17:18 this context token only if this exists I
  • 00:17:22 want to render this death here otherwise
  • 00:17:24 I won't so now this whole events control
  • 00:17:26 box will only be visible if we are
  • 00:17:28 locked in and if I save test which locks
  • 00:17:31 me out it's not visible and if I log
  • 00:17:33 back in here with my credentials then I
  • 00:17:36 do see it so that's the first step the
  • 00:17:39 second thing which I want to do is of
  • 00:17:41 course I want to be able to fetch the
  • 00:17:42 events and render them here so that we
  • 00:17:44 can also see the events we stored and
  • 00:17:47 for now I'll do this in a relatively
  • 00:17:50 easy way I'll add a new section here on
  • 00:17:53 this page and give this a name of events
  • 00:17:58 list maybe and in there I want to render
  • 00:18:02 all while all my events which are in the
  • 00:18:05 database for now in a very simplified
  • 00:18:08 form actually therefore this will be an
  • 00:18:11 unordered Lee
  • 00:18:11 because that is what's in there and I'll
  • 00:18:14 have my list items here which I'll give
  • 00:18:17 a class name of events list item and now
  • 00:18:25 let me add some styling here to events
  • 00:18:28 list which is the unordered list box so
  • 00:18:31 this part here and then let's say we
  • 00:18:35 want to have a margin to the top of QM I
  • 00:18:40 want to have a width here of 40 Ram but
  • 00:18:46 a max width of 80% or 90% also add a
  • 00:18:52 margin to left the right of auto and
  • 00:18:55 therefore all refactor this margin hew
  • 00:18:58 Ram to top and bottom then and left to
  • 00:19:01 right is auto and the list style should
  • 00:19:05 be non I want to remove these bullet
  • 00:19:08 points and I want to have no extra
  • 00:19:10 padding now on my events list items
  • 00:19:15 which are the elements in this list I'll
  • 00:19:17 also set a margin of let's say 1 REM top
  • 00:19:20 and bottom and zero left and right I'll
  • 00:19:23 give them a padding of one REM and add a
  • 00:19:27 border of 1 pixel solid and then this
  • 00:19:31 purple color and yeah that should be it
  • 00:19:35 for now
  • 00:19:35 now of course I need to dynamically
  • 00:19:38 populate this so for now let me just add
  • 00:19:40 two test items here so that we can see
  • 00:19:42 how this will theoretically look like
  • 00:19:43 like this it's okay for now and now I
  • 00:19:46 want to populate this with data I fetch
  • 00:19:49 from my API of course and for this let's
  • 00:19:52 have another look at our schema here in
  • 00:19:54 the index J has fall in the schema
  • 00:19:56 folder for queries and we're now talking
  • 00:19:59 about a query we got the events query
  • 00:20:02 and that will give us a list or an array
  • 00:20:04 of events so I want to send a query to
  • 00:20:07 events and I don't need to pass any
  • 00:20:09 extra parameters there just get this
  • 00:20:12 events list and then well I'll get a
  • 00:20:16 list of these items here so in events J
  • 00:20:21 s I actually want to fetch these events
  • 00:20:24 right
  • 00:20:25 when we load this page and then whenever
  • 00:20:29 we add a new event I want to add that to
  • 00:20:33 that list and there are multiple ways of
  • 00:20:36 achieving this I will add a new method
  • 00:20:39 here to events J s which I'll name fetch
  • 00:20:43 events and in there I'll do just that
  • 00:20:47 so I'll again copy that HTTP request
  • 00:20:50 logic we have up there and move it into
  • 00:20:54 you fetch events and it will probably
  • 00:20:56 refactor this at some point but for now
  • 00:20:58 let's just copy it the request body here
  • 00:21:02 will now be a query or will hold a query
  • 00:21:04 request not a mutation and the request
  • 00:21:07 is sent to just events I have no
  • 00:21:10 argument list there but I do get events
  • 00:21:14 with that structure and let's let's
  • 00:21:16 fetch all that data for now by the way
  • 00:21:20 some of you already mentioned it in
  • 00:21:23 comments and I'm also aware of this
  • 00:21:26 problem creator here is of course a
  • 00:21:29 nested property and as we currently set
  • 00:21:31 up our back-end API we quickly end up in
  • 00:21:35 a problem if we have many events and for
  • 00:21:37 every event we fetch the creator with
  • 00:21:39 extra database roundtrip and will later
  • 00:21:43 optimize this to reduce the amount of
  • 00:21:45 requests and yeah the amount of requests
  • 00:21:48 made to the database so I'm aware of
  • 00:21:50 this we'll do this at a later point of
  • 00:21:52 time for now we just don't have that
  • 00:21:54 many events that it's a problem but we
  • 00:21:56 will take care about this later so for
  • 00:21:59 now I'll just fetch my events like this
  • 00:22:01 the token does not be doesn't it not
  • 00:22:04 need to be added here because this is
  • 00:22:06 not an endpoint that requires
  • 00:22:08 authentication and here I will get back
  • 00:22:12 my response and first of all I just want
  • 00:22:15 to have a look at it so as I mentioned
  • 00:22:17 this should execute whenever it is
  • 00:22:19 component loads and then whenever we
  • 00:22:21 added an event now for the loading part
  • 00:22:25 I of course can use a life cycle hook so
  • 00:22:28 I can add component did mount here and
  • 00:22:31 component it mount execute when this
  • 00:22:34 page loads essentially and in here I
  • 00:22:36 will call this fetch events
  • 00:22:39 so for now that is all if I now save
  • 00:22:41 this if I reload that we see this
  • 00:22:45 response and there we have an events
  • 00:22:47 array with right now we only have one
  • 00:22:49 event daddy went in there which I just
  • 00:22:52 created so that works like a charm let's
  • 00:22:55 now add the logic to output that list of
  • 00:22:58 events here in our user interface so for
  • 00:23:02 this in my fetch events method here when
  • 00:23:08 I get my events I will drill into them
  • 00:23:11 and set them on my state as the events
  • 00:23:14 which I want to render if you have a
  • 00:23:16 look in response data we have a data
  • 00:23:19 field which has a events field which is
  • 00:23:20 the array of events I'm interested in so
  • 00:23:24 I'll extract that from rest data dot
  • 00:23:27 theta dot events and stored it in a new
  • 00:23:29 constant and then I'll call this set
  • 00:23:32 state events is equal to the events I
  • 00:23:37 now fetched here now events is not a
  • 00:23:39 state I initialized so let's do that to
  • 00:23:41 up there I'll add events which is an
  • 00:23:44 empty array initially let's say and
  • 00:23:48 therefore we now set events on that
  • 00:23:51 events state as soon as we finished
  • 00:23:53 fetching we can now use that events
  • 00:23:56 array down there to output our list of
  • 00:23:58 events so in here I want to output that
  • 00:24:03 list of events and all prepare that
  • 00:24:05 before the return statements so I'll
  • 00:24:09 have my event list here and for this
  • 00:24:11 I'll use this state events and map every
  • 00:24:14 element into a JSX element here so every
  • 00:24:17 event here will be transformed into a
  • 00:24:20 list item with my class name off what
  • 00:24:23 did I use
  • 00:24:24 well basically into this list item here
  • 00:24:26 so I can cut it from down there and use
  • 00:24:29 it up here this is what every event will
  • 00:24:32 be transformed to this is how you create
  • 00:24:34 lists and output lists in react and of
  • 00:24:37 course the value in there will not be
  • 00:24:39 hard-coded instead that will be my let's
  • 00:24:41 say event title for now and here we also
  • 00:24:45 need to set a key and react so that
  • 00:24:47 react can efficiently update that list
  • 00:24:50 when it renders it so here I'll set this
  • 00:24:52 to you
  • 00:24:53 vent underscore ID which is a perfect
  • 00:24:55 unique identifier the event list is what
  • 00:24:58 I now want to output down there in my
  • 00:25:00 unordered list so between the opening
  • 00:25:03 and closing tag off the unordered list
  • 00:25:05 I will render my event list property
  • 00:25:10 which holds that list of JSX elements
  • 00:25:12 due to map we transform our list of
  • 00:25:15 events of JavaScript objects into JSX
  • 00:25:18 elements and we can then output that
  • 00:25:20 list of JSX elements down there that's
  • 00:25:23 how react works so we have the list of
  • 00:25:26 JSX elements being output down there of
  • 00:25:29 course I said I also want to fetch the
  • 00:25:32 events when I added a new one of course
  • 00:25:34 that is a bit unnecessary though but for
  • 00:25:36 now let's do it like this so here once
  • 00:25:39 I'm done adding my event I will call
  • 00:25:41 this fetch events again so let's save
  • 00:25:48 that and let it reload and I see test
  • 00:25:51 which was the name of the event I
  • 00:25:53 created now let me log in here real
  • 00:25:56 quick and let's create a new event and
  • 00:25:59 never test is the title 99.99 let's say
  • 00:26:04 let's pick a date 15:30 this is yet
  • 00:26:12 another test and let's confirm this and
  • 00:26:18 here it is so it did save that and it
  • 00:26:21 did update here now we could add a
  • 00:26:23 spinner and everything but for now we
  • 00:26:25 got this core functionality of adding
  • 00:26:28 events through our API and fetching them
  • 00:26:30 implement it now in the next videos
  • 00:26:33 we'll make sure that we add stuff like a
  • 00:26:36 spinner that we may be saved that extra
  • 00:26:39 round trip of fetching all events again
  • 00:26:42 when we created a new one why don't we
  • 00:26:45 just append Det through the existing
  • 00:26:46 list we could do that so we'll work on
  • 00:26:48 things like that and then of course
  • 00:26:50 we'll also implement the remaining end
  • 00:26:53 points which we have because if we have
  • 00:26:55 a look at our schema we see that we're
  • 00:26:57 missing the book event and cancel the
  • 00:26:59 bookings and this bookings endpoints
  • 00:27:03 we're not handling this in the app right
  • 00:27:04 now
  • 00:27:05 this will all follow in the next videos
  • 00:27:08 hopefully see you there bye