Ionic 4: todo App + firebase

31 Displaying User’s ToDos Building Mobile Apps with Ionic 4

in this lesson we are going to write the code to display the users to-do items on the to do page so we'll start by writing the code to retrieve all the to-do items

that belong to the currently logged in user and then we'll display all those to-do items in a nice list on the to-do page we'll conclude this lesson by making the

list slidable so that a button is revealed when the list items are slid towards the left so let's go back to visual studio code and we'll start writing the code inside the to do stage

and I'll open up the to-do store page dot ts file in this file we'll write the code to retrieve all the documents from the troduce collection where the owner property matches the ID of the currently

logged in user so we start by importing firebase and once we have imported firebase we need to create a new function to get all the documents from the toodles

collection so here just after my ng on init:function I'll create a function called get to Do's and this function will use the file store SDK to get all

the documents from the Toulouse collection and we'll be using the wear method to filter the documents based on the ID of the currently logged in user so here I'll start by typing in firebase

dot file store dot collection which takes in the name of the collection which is produced but we also need to use the ver method because we want to filter other documents so just before

executing the gate function I'll execute the wear function and as we know the wave function takes in three different arguments the first argument is the name of the field which is owner in our case

the second argument will be the Equality operator because we want to make sure that the ID of the currently logged in user matches exactly with the owner property in the documents finally we

need to pass in the ID of the currently logged in user to do that I'll create a property inside the class and let's call it user ID which will be of the type string and

inside the constructor we'll assign value to the user ID property so let's go ahead and type in this dot user ID equals firebase dot off dot current user dot UID this code will be executed as

soon as the page loads up and we'll assign the value of the current users UID to the user ID property and we can use this user ID property inside our where method

so here I discordant type in user ID now you can go ahead and use the gate function but because I want my application to be real-time and that means that I want the application to

reflect newly added to Do's as soon as they are added by the user so instead of using the gate function here I'll instead use the on snapshot function and the on snapshot function also returns a

query snapshot I'll also need to create an array let's call it to do's and this will be of the type any I'll also assign a default value to the traduce array which will be

a blank array finally inside the on snapshot function I'll assign value to the to do Zuri so I'll just go ahead and type in they start to dues is equal to query snapshot

dot Docs and Doc's here as we know is an array which contains all the documents that match the query that we have defined here so all the documents where the owner property matches with the ID

of the currently logged in user will be available to us inside the to do sarey and that's what we wanted finally I'll go ahead and make a call to the get Toulouse function inside my constructor

now as I save the application we will get all the documents that belong to the current user inside that reduce array so now that we have the array ready we need to write the code inside to do start

page dot HTML file to display the contents of this array in a list so I'll open up the to-do store page dot HTML file and here as you can see I only have an eye on fab component

so I'll start by adding an iron list here inside the iron list I'll use an iron items sliding component because I want to have slidable items inside this list and

inside iron item sliding I'll place in the ire item inside the iron item we will have an iron label and inside the iron label within an h2 tag we will display the

title of the to do just under that inside an h3 tag we will display the description of the to do and then within a P tag we will display the last date of the to do so as of now you can see that

I am not passing in any values to the interpolation and that's because first I need to use an ng for on this iron item sliding so I will start by typing in ng 4 equals

let to do of to dos to lose here is the array that we have created inside the TS file and to do is one of the items of that array for each item one eye on item sliding will be rendered on the page now

we can use the to do object inside this eye on item sliding to get the values in our interpolation so here I'll just go ahead and type in to do which is a document object dot theta dot title

which will give us the title of the to do similarly I will just copy that and paste it inside other interpolations let's save that and see if we get anything or not on the page

also note that when the application refreshes if you get an error like this that's probably because you are refreshing the application on the to do page however you should be navigating to

the to do page from the login page so make sure that you go back to the login page and then when you arrive at the to do page you will get the list just like this so here you can see that I get the

list item there is just one to do in might reduce collection on firestore and that's what I am seeing here you can see that there is an issue with the date and that's because of the way

files door handles times time objects I get the date but this is in a time stamp object format we need to display it in a user-friendly way and to do that we can use the to date function which converts

this timestamp object into a JavaScript data object and to prevent any errors you need to use in ng F here and you need to check if law state is not null only in that case you want to execute

the to date function let's save that and see what we get and there you can see that I get my to-do item and the date is much more readable if you also feel that this

state is still not readable enough we can write a function real quick to make this state readable for the user so here instead of using interpolation we can use the inner HTML property of this HTML

tag and bind it to the value returned by the function that we'll create next let's call this function get date the gate date function will take in the timestamp object that we get from cloud

file store now we need to create the get date function so I will go to the TS file and here just after the get to lose function I'll create the get date function this

receives a timestamp object which is of the type firebase toward fire store dot timestamp and the first thing we'll do is get the date object from the timestamp so I'll just go ahead and type

in let date equals timestamp dot to date this gives us a JavaScript data object next we can go ahead and type in return date dot to local date string which will return a date string in the local format

of the device on which this application is working and that's what we pretty much want let's save this and see how it works make sure that you navigate back to the

home page of your application and there you can see that I get the date formatted in a nice and clean manner so the to local date string function is a function that you can

execute on a JavaScript date object and you get a JavaScript date object using the to date function on a firebase timestamp object so now that we are getting a list of to dos in our

application let's learn how we can change the status of to dos and mark them as completed when they are done