React Native - Using an API to populate the calendar

hello everyone and welcome to another video today i will do something a little different i'm basically gonna take a library that i've used in a previous video and then show a different example so previously i explored this library called the react native calendars is no longer being maintained so a little disclaimer there but it does have a lot of neat components in here for working with yeah event calendars and this agenda component is especially pretty neat and in my previous video i showed an example uh that was built as a class component and then i changed it into a function component but there was a function in there for generating the events that was kind of confusing so this time around i am gonna grab a new example so instead of rewriting that function code i'm gonna be fetching some data from a an api and then be showcasing some events i think this is a better way of understanding how it works and also it can give a little bit of insight of how we would from react native grab some data from another place and then show it in the ui all right so jumping into the app where i created and a little example here just to get going if i want to explain just what's going on in this small example then we can move on to actually fetch some data from an api okay so um first things first i've created a use state hook here and you can see i have put in some dummy data here and the first thing you might get a little confused of is the structure of this data here so you may notice that on the left side here we have some dates and these days are formed this specific way so we have year year year then the month and then the day here okay so this is the left side of our object so these are our keys right and for each key we have an array and inside this array we have all the events okay so right now you can see on the 29th i have this one called test1 if i were to jump inside this array and put another one here i'm going to call it test4 just for random you can see that now i'm rendering two events here on this uh day here 29 okay and if i were to create another one here you see now we're rendering three okay so this is the structure that i'm expecting for this agenda component and so i just basically put this in my state here okay and i tried to type it out up here so passing this one in in my use date i have a key as some string and for each key you have this array of items and an item is a name and for now just a boolean called cookies okay so these are my items down here i have function and this function is responsible for rendering out these blocks here for each date and in here i basically just show the name and then if the property cookies is true i'm going to write out a cookie otherwise i'm rendering out this hungry emoji okay and down here we have the main return and i just have a safety review and then i'll just ran out of my agenda okay so pretty simple stuff here so far okay now now we're going to get to the data fetching file so how would we actually grab some data from somewhere and then put it into our calendar here so for that whenever we do any type of data fetching we need to use a user vector like this okay and that's the second argument so the first argument is going to be my function here right second argument is going to be my dependency array so now i'm just going to put it empty so this one will just run once and comment it in there okay now there are many ways of data fetching and react and regulative but i'm just going to do the very basic way so this comes back and we react we don't need any further dependencies to do this so that's good now for grabbing the data itself we can also use a library so some library to do a http request yeah but we can also choose to use fetch which is the one i'm using so fetch also comes built in with react native so all i have to do is just say fetch and then put in the url of the api i'm pinging and i'm gonna be pinging a very common api so one that's public and also used in other tutorials which is going to be the jsonplaceholder typeycode.com library and i'm paying the slash posts and points okay so let's try to do this so here i'm gonna tag i could be tagging it then here because the fetch returns the promise but i like to do the async way so inside my use effect i'm just going to call a i'm just going to define a function and that's going to be an async function and inside my async function i'm going to doing this fetch okay and i need to make sure that at the end of my use effect i also call this get data okay so let's jump up here and then first we want to get the response right so we're going to await this fetch after getting a response um we can do some things so um let's just call this data okay and then now on the response you can see if you do dot we get some different properties here so we have status text.json some stuff here and for the fetch api if you expect to get some json data back what we can do is we can do await and then on our response object we can call json so after we awaited the response here got our response and then here on our response awaited the json jsony i don't know if that's the word but basically transforming the data to json we finally have the data inside our data variable so now we could as an initial thing trying to log out this data okay so if i open up a terminal here you can see that it's logging a bunch of things here and all this stuff in here that's pretty hard to read is um basically my json data and if you run this metro and open up the regnator debug menu we can go into debug and then show this debug ui to just get a little more of a neater overview of the data so here it is way better formatted so you can see we get 100 posts in here and each post has a body id title and a user id so yeah these are not really events right there's just some posts but we can still use this api uh and then just pretend we have a date in here okay so we need to do a little bit of mapping of data so we actually have a date okay so let me show how we can do this so we get these posts and right now it's not typed so typing that would be beneficial to us so here we can do type post and then remember we have a title we have a body and we use id and then we had something else i believe i think we had a just a normal id and i think that id was also a number okay then here you can just type this the post id or post array even oh close array now as i said we don't have a date here and we kind of want to show this in our calendar so we need to create some dummy dates okay and i think we got a hundred posts so we can slice it down to maybe five posts that's okay so when we do set items here we only want to grab let's say five of them right but before we do this we need to do some reformatting so i'm gonna say add a new variable here called map data and i'm gonna basically do grab my data and i'm gonna call the map function here and uh well i'm going to be mapping over some posts right so post body id title this stuff here and that all that stuff is fine we just need a new date so we can do return and then just copy everything you copy everything by doing these three dots and then a new line we can add a date here okay and i would like to have some different dates i think that would be pretty cool so in order to generate these dates i'm going to pull in a library for this just to make it neat so down here in my console i'm gonna do yarn add date fns i'm just gonna wait for this library to be pulled in and that was pretty fast so let me just generate this new date here so with date of nest we can pull in some helper functions uh for me i would like to find a date up here and then how i'm going to find the state well i am going to use the cell function called add days okay and add this takes in a date and then the amount of days you want to add so the data i want to put in is just going to be today and the number i want to add is going to be depending on the index of this map function so up here i'm going to expose index and then just plop it right in here okay and since we call this variable date we can omit this date and now we have our map data okay now this state in here that i just added is going to be a date object okay and we saw earlier up here that this is how we expect the formatting to be of our dates yeah so we need to first of all format this and then we need to do a little bit of remapping once again because actually we need a object here right and on the left side we need that key and then we need the array on the right side for each date okay so um yeah let's first of all just go down here then call format it also comes building with date function state of an s so if you go up here you can see we're now importing add days and also format from data fns okay so now we can put in our date and then the format and the format is going to be year year year month month and then the day okay so it looks something like this if you go down here now lock map data and open up chrome let's see if we can find chrome chrome chrome chrome it should be here yes so if i scroll down here and look at my map data shipping this one right it's not uh let me just clear this console and then delete this log statement go back here and now we have a date see i have a date here 29 30 the first of december so yeah we are adding one day that's good now we have some dates but we still don't have the format we want right we have dates for each post but we don't have the format that this library requires so in addition to doing the mapping we also we need to be doing some reducing because we need to change the overall structure of the data we can just have one big array with a bunch of objects in we need one object as the outermost as the base so to speak okay so after doing the mapping i'm going to call the reduce function on my map data here okay so let's say uh let's just call this variable reduced i'm going to call publicmap data here then call reduce and the reduce also takes a callback in here and as the second parameter we have a starting uh starting how do you say like what structure do we start with right and what we're looking for here is not an array but it's going to be an object okay and i'm not great at explaining exactly how reduced work so i would recommend looking up the documentation for this but let me just try i'm trying to explain anyway so we have two parameters here and reduce the first one is the one that i usually call accumulator okay acc and then i have the current item as the left one that's the second one here and the accumulator is the one we define down here so that's the object that is the object here okay and the current item is going to be yeah for each entering this array in our case okay so what we can do here is that we want to access the date right so let's say date actually that's just the structure out date from our current item now you can see here actually it's inferred that we added a date here that's pretty neat okay never mind so we destruction out the date so now we can grab the accumulator that i like to call it which is this object down here and then we can add a key by using the array notation here and i'm going to drop in my date here's the key okay so now we have the left side up here added now we just need to add the right side and that's going to be the array so not an object but an array in here and in my array i'm just going to put in one item okay and create that item i'm actually going to go up here in current item and i'm going to restructure the rest of the property so everything but date into this into its own object right and i'm just gonna call it uh cool item doesn't matter and i'm gonna pop it in here okay now if i jump down here and then return my accumulator i should be in pretty good hands but uh let's just try to lock this stuff first so um if we install logging map data now logged reduced let's have a look at how the data structure is looking now so if i jump in here you can see that i'm getting a bunch of dates here so that's good and we're inside an object and for each state we have an array and inside each array there you go guys we have the post here and you can see the date is removed now and that's because i destructed out the date so the date's gone right why does still have the rest of the properties and i can grab all these properties uh using these three dots and you can see even when i hover over it's gonna show that cool item is these four props okay now you can see i'm getting an array here in timescript and that's because i didn't actually type this accumulator up here and uh we could attempt to do that so in this case it's just gonna be uh my typing from previous so up here grab this one put it here i should be in good hands if i remove this item to post okay now typescript is stop complaining we can finally do set items and then drop in our reduced here okay so now you can see it's populating like crazy here and that's because we have one item for each day right and remember we have a hundred posts so uh yeah we can scroll all the way down here basically and then it stops and yeah our post doesn't have this cookies properties so everything is just an emoji but i hope you guys understand what we did so far and uh whether that makes sense okay so here you can also see because a typescript error and that's because we've got to update the typing up here so that's the post array and we remove this dummy stuff which is no longer correct uh see here yeah it should be that should be good so we just cleared out this initial state with an empty object and um everything's looking good now okay guys i hope this was useful um if any of this uh mapping i'm reducing confused you there's something in the data structure that makes sense let me know in the comments and i'll try to explain more okay see you guys the next one peace

Channel: Jonas Grøndahl

Views: 27,770

Keywords: React native, react, calendar, event calendar, Data fetching, Fetch, Es6, Reduce, map, React native beginner, Typescript

Id: HF5qgqQRCWA

Length: 24min 3sec (1443 seconds)

Published: Sun Nov 29 2020