ReactJS Course [5] - CRUD In React | TodoList Tutorial

hey guys how's it going i'm back here with another video and today this is the fifth episode of my react.js course and today what we're gonna be going over is um how to create some sort of like crud application in react so the example we're gonna follow is the most classic example uh which is to build a to-do list and the reason why i chose this example is because it was the example that really got me good at and helped me understand how states work and react so this episode specifically will be packed with a bunch of logic stuff that are going to be fundamental for um for your react knowledge and um i really hope you guys enjoyed this video check out the code in the description and yeah stick around as well for the the exercise at the end of the video and yeah that's basically it so let's get into the video [Music] [Applause] [Music] [Applause] okay everyone so let's get started writing the code for our first um crud application in react where we're going to be building a to-do list so like i mentioned this episode will be mainly focused on and like emphasizing um how to use states and enforcing the best practices when you're using states and exactly why you would use states in react because when you create something like a to-do list states are extremely important so that's the whole point of us making this video so i have over here just an empty application um just like we had before you see there's only three files um and i'm just i just have hello world written over here and what we want to build is we want to build an app where over here in the website there's going to be um a list for um to like tasks that you might want to complete and inside of that list um each task will either be um colored green for completed or just white for um not completed yet so you can you can basically check them to say that you've completed a task and if you did the task will become green you can also delete a task uh if you want to we're going to add all of those functionalities and obviously you will be able to add a new task to your list now if you're interested in seeing how this will look you can just go to the end of the video where i'm gonna be showing this but basically this is one of the best projects in my opinion i know it's overused and there's a lot of tutorials out there for this already but there's no way i'm gonna make a react course without including this because this was definitely one of the projects that got me got me understanding what states are and what and how they are used so that's why i decided to make this video so let's get started right now i'm going to open up vs code over here i basically want to create a div over here because we're going to divide our project our website into two right two parts ui wise right we're gonna have over here at top part where there's gonna be an input and a button because we're gonna be able to write which task we want to complete and there's going to be a button which when we click on it we're going to be able to add the task to our list so we're going to have that part and we can even give a class name over here of something like inputs or actually i'll just call it add task something like this right it's just a part where you're going to be able to add a new task to your list and then we're going to have another div which is going to be the div with a list now this whole course i don't want to focus at all on css because that's not important in my opinion for someone learning react although it is important for a website it is not important for react so um what i'm going to do is whenever i add some minor css i'm just going to show you guys the css and you guys can just look at it use it if you want to but i'm not going to be wasting my time of this course um right teaching you guys css because it's not the point of the course but over here we have two divs and on this div over here what we're going to put is we want to put an input and a button so two things the button will be the add task button so we'll look over here and you'll see right now we have the input and the button and over here is where we're going to display the list of tasks which obviously initially will be empty but let's leave this for now and just focus on this part over here so what we want is we want to have some sort of variable inside of our application which is going to keep track of a list of tasks right so we could have a task for example do homework right where we we're just saying that i need to do homework or we can also have a task which is um wash dishes right something like this so a good data structure that could hold um the information about which tasks we have to complete is an array right it's a list an array so what we want over here is we need to have a variable which is going to keep track of our list of tasks and um we want to dynamically change this like how the the variable looks because we want to display the list in our screen and whenever we make any changes to the list we want to re-render the ui to show the new changes a change would be for example adding new tasks the list we want to immediately see that the new task appear over here or when we delete or when we complete we want to see those changes appearing immediately so the way we're going to do that is by creating a state which is what we learned in the previous video so if you want to refresh you can watch the previous video to see how you create a state but the way you do it is you basically say const you open and close curly br square brackets like this and you set it equal to the use state hook and we obviously need to import the use state hook from react so i'm going to say import from react and we're going to import the hook that we're using use state so to declare this hook we need to give a name for the for the variable i'm going to call it to-do list and a function that will be used to change the value of this variable so i'm going to call it set to do list then like i mentioned in the previous video of this course you need to set an initial value for this variable or for the state so the initial value will be an empty array because initially this list will be empty so this can be a good initial value right what we want to do over here is um we want to be able to whenever you click on this list we want to add something to you want to add that task to the list right but in order to do that we need to keep track of the value of what is inside of this input so if i write over here do homework we need to get the information we need to get this do homework string inside of this input and use it to add into our list and the way i taught you guys in the previous episode to get information from an input is by creating a state to represent the input value so i'm going to create another state over here and i'm going to call it uh we can call it whatever we want i'm going to call it new task because it is it's going to represent whatever we're writing on the input when we want to add a new task and then i'm going to say set new task like this and i'm going to set this equal to use state and it will be a string initially right because it's a string inside of an input so now we have two states and this is basically what is necessary for our to-do list so what we want to do now is we want to make it so that whenever you type on this input you now keep track or you update this new task state to represent the value inside of that input now the way you do this as i mentioned in the previous episode is you can give an onchange function to this input so whenever there's any change to the inputs value so whenever you type a letter in the input this function over here whatever function you pass inside of this will be called so we're going to come over here and create the handle change function like this and um inside of here we're going to write the logic for this so we're just going to copy handle change and put it inside of here now inside of this handle change function since it is inside of an input like i mentioned you can have an event as an argument to this function and you can use that event to grab the value of the input so if i want to set the variable a new task to be equal to the value of the input all i have to say is set new task equal to event.target.value now all of this i've like i mentioned i've talked about this in the previous episode but it's extremely important for me to show myself using it again in a better context so you guys keep refreshing how like how everything works and understand how everything will be used so now what we have over here is we have a variable um called new task which i'm gonna even just for now just to show you guys that this is working i'll just display this in our screen over here in our ui new task and you'll see that it is actually working as i type on this input it is setting the variable new task to be equal to whatever is over here and the only reason why we're seeing it over here is because i just decided to display it as i go just to show you guys that it's working so i'm going to delete this for now because this is not where at the point of this video um but it's good to know that it is working the handle change function so now that we have this new task variable and we have access to what the user is typing on the input we want to be able to add to this array over here the new task that we just typed on the input so the way we're going to do that is we have this button over here which whenever it's clicked we want to add to the list so we're going to create a function over here and call it add task right because it is the the function that is going to be called when we want to add a new task to the list and then inside of this button we're going to give it an on click property because um we're going to say that whenever you click on the button you want to call the add task function so we haven't worked previously with um using states and lists before but states and lists are extremely interesting because it is very common for you to use it and they're going to appear so many times that it is important for you to get good with it now when you have a normal array and i want to emphasize this to you guys when you have a normal array right imagine i had this array over here which was just an array an empty array usually in javascript if you want to add a value to that array for example i want to add the ver the variable name which is equal to pedro if i want to add page row to the array i could say something like array.push and put name over here right and this would work we would see that um now after this array would have the the name uh the name inside of it right but this doesn't work with states and the reason why it doesn't work with states is because we don't alter we don't mutate the state directly remember with states we always have to use the the function that is used to mutate the value so we don't i can't just say something like new task is equal to um event.target.value this is why we have to put the value inside of the function parameters not not by setting them like this so i couldn't say something like a radar push but what i can do is i can create a a new array for example new to-do list and say that whenever i want to add a new task i basically want to have a new to-do list which is made out of the old to-do list with the addition of the new task that we want to add if you're not familiar with this thing over here this is the spread operator and it is extremely important when you're using react because this kind of javascript is used a lot in react especially when you're working with states basically what this means is when you put the three dots over here you're just saying that you want to add you want to make an array that is composed of everything in this list plus this value over here so that means that now i can just set the to-do list to be equal to the new to-do list and what we're doing here is we're just adding the new value to the list so this is amazing right it it will be working it is working um but we're not able to see it working for now because we're not displaying um the value the list inside of our ui i could add over here do homework but there's nowhere where like it is it added this task but there's nowhere to be seen a list in our ui so the way we're going to show that list is inside of our div over here for list we want to grab the to-do list which is a state which is an array and using what we learned in my in the third episode of this course we want to map through this list now why do we want to map through this list because when you have a list and you want to display each element in a list in react as a ui element you say the name of the list dot map and then it will iterate through every element and you just grab the task or each element in the array and as an argument to a function and inside of the function you just return some sort of um ui that you want to display based on that specific element so i want to display an h1 tag for each element in the to-do list now what do i want to display for each element well i just want to display the task that is being represented in that specific index so if initially it should be empty because our array is empty but when we add a new task then it will loop through the array it will go to that task and just put the name of the task inside of this h1 tag so you can see that since we already added the do homework now it's being displayed but i'll refresh again to first so you guys can see i'm going to say do homework and when i click add task now it just added to the list i could add more stuff like wash dishes and it will keep adding let me do another thing um clean room and you can clearly see that our list is working it is adding to each element in the list then it is looping through the list and just displaying it in our screen so this is the basis of how a to-do list works there are some optimizations or just things that we could do to make this look better for example code wise i usually don't separate the array into a separate variable and then set the list like this i just did this so you guys could have a better idea of what is happening here i usually just copy this and put it inside of here without creating a new variable and this will work the same way now everything else is is looking good right it's like it's basically 29 lines of code 31 lines of code for a pretty cool project right we can add a bunch of stuff and um it's looking pretty nice so this is to emphasize how how quick you can write complex code in react um without writing a lot of code at all so what we want to do now is we want to make this project look a little bit cooler right we want to add some functionality that will um definitely bring up the value of this project and the first thing we want to do is we want to add the ability to delete a task so deleting a task would be um if i i don't want to do homework anymore there will be a little button right over here which we can click and this will be removed from the list so how can we do something like this well the first thing we want to do is add the button for each element in the list and we can easily do that by coming to our to-do list map over here and say that for each element in the in the list instead of just returning the name of the of the element we can actually return a div and this div will include not only the task name but also a button which um we'll just put an x to represent delete and you'll see that this is exactly how it looks um at the end like i said i'll add some css and everything will look a little bit better so you guys can copy the css but for now let's just leave it like this but you can see that each element now has a button which doesn't do anything when i click but we're going to obviously add the functionality in a bit so in order to delete a task from the list we're going to create a function over here called delete task right and this function will be called whenever we click on that button so i'm going to come over here and i'm going to put an on click to this button now what i want to explain to you guys is the following how am i going to know inside of this delete task function which um element in the list we want to delete because we don't we want to delete a specific element right so how are we going to know which one we want to delete well we can actually instead of the delete function over here we can pass an argument to it which we're going to get the specific task that we can delete so for now let's just try deleting it by using the name of the task over here so i could come over here inside of this function say that it accepts a task name and over here instead of an on click you might imagine that i could just come over here and pass the task from the to-do list map as the argument to the function but there's an important thing i want to mention to you guys in react when you have an on click like this and you have a function that has um has a parameter so something that they have to put inside of parentheses over here you can't just put it like this um this format like this is just for functions that don't have a parentheses or arguments in its parentheses when we have something like this we actually need to create an a function that returns this function call so this is kind of weird but um just know that whenever you have a parenthesis like this you gotta write on this syntax over here which basically is you're you're creating a new function and you're calling the delete the delete task function so um what we can do now is we could come over here instead of our delete task function and we could do this similar to the add task we're going to set the to-do list to be equal to a new array now with the to when we're adding a new element all we're doing is we're just creating an array with everything that had that the to-do list had before and the new task that we want to add but with uh when we want to delete something we actually need to use something called the filter function now the filter function i mentioned that it is important for you to already know this but if you don't i'll go over really quickly what this is so imagine you have an array over here right um let's just this is an example if i had an array which had the following elements it had um the name pedro it had the name jessica and it have the name james and i want to get this array keep it the same like create a new variable over here right call it new array and but the difference is i want to keep every element in this array but pedro so i want to delete pedro from this array i want to create a new array which pedro isn't in there anymore to do that i could do the following i could say array dot filter like this then it's going to loop through every element and i can grab the element in the array like this let me call it name over here and for each element i'm going to ask okay if the name is equal to pedro then return false else return true so we're going to say else over here return true so why are we doing something like this well the filter function it takes in a function inside of it which you return true to the elements you want to keep and false to the elements you don't want to keep so in this case we're just asking okay if the name variable so if the element in the array is equal to page row then return false if it's not return true so i'll explain why this is useful for our case because we can just go through every element in the um to-do list and say okay if the task is equal to the task name then remove it if it's not keep it so return false when the when the task is equal to the test name and return true when it's not so we could do something exactly like that i'm going to delete this over here and i'm going to again create a newer a new to-do list so a new to-do list set it equal to the old to-do list dot filter like this and i'm gonna loop through each of them and for each task in this to-do list we're gonna run the same logic we're gonna say if the task is equal to the task name that we're grabbing from this um the from the from the the map over here from the call of the function then return false because we don't want to keep it else else over here we want to return true so we will then have an array with everything but the element we want to delete which is the whole point of this and then we can just set the to-do list to be equal to that so we can test this by coming over here and adding more elements to our to-do list so i'm going to say do homework and i'm going to say wash dishes and you'll see that now when we click on the delete button i can delete do homework and do homework is not here anymore because it looped through every element in the list and it deleted all of them which had the name do homework now um if you look at this logic over here it is kind of it looks kind of complicated because it has like one two three four five six seven lines of code you can actually make this into one line of code um and it is it looks a lot better why can you do this something like that well because um you can just say something like this instead of having an if else statement you can just say return if the task is not equal to the task name so what it's going to do is if it is equal to the task name which is the element we want to delete then it will return false if it is not for every element element it will return true you'll see that the same logic now still works right if i add do homework over here and wash dishes and i delete wash dishes it will delete wash dishes and keep do homework meaning it's working you can even condense this even further by removing the curly braces over here and the return statement and just doing something like this and it will still work because that's just how javascript works and even better like i mentioned over here we don't even have to create a new variable we can even just grab this and put it inside of here and this whole logic is now condensed into a single line of code which still works and it's amazing you can see i can still delete it so it's looking perfect right but there's an issue with this an issue that i purposively didn't tell you guys till now because i feel like i need to go through the wrong part first to then explain to you guys why we're gonna fix this in a different way so the issue is the following if i do if i write a task called do homework over here and i write another task called do homework again right i want to be able to delete the first do homework without deleting both of it at the same time right it doesn't matter if i have two tasks with the same name there are different tasks because i added them separately right but at the moment this won't be possible because if i delete one of them it delete both because what it's doing right now it's it's looping through every element in the in the array and deleting all of them with the name equal to the name that we want to delete so if two elements have the same name both of them will be deleted which is not good at all so what we can do to fix something like this is we have to have some sort of identifier to differentiate each task in the list now what kind of identifier we can use well an identifier that is extremely common in every web development project out there which is an a variable called id for each element in the list so now instead of having a to-do list which is just an array of strings right an array that is like do homework or or just a string right we can now have actually each task be an object like this an object which has an id for example one and a task name which is equal to do homework right with this way we're now going to have more information for each task which we can use to differentiate them and you'll see how this can grow to be even better when we write the part of updating the task so this is what we want we want to change this to instead of taking strings inside of this array we're going to take an object which is going to have an id and a task name so let's delete this over here because i was just explaining to you guys and how we're going to do this is first of all when we add a new task we don't want to just set the new array to be equal to the old array plus the new task because new task is a string and not an object what we want to do is we're going to create this object over here for whenever we want to add a task which will have an id and it's going to have a test name which is what we we said we want it before test name we know it will be the value for new task and we'll just pass this over here but what we will put for the id well the first element in the list we want the id to be one right because it's the first element in the list the second one we want it to be two the third one it will be three so what we want to do is we want to grab the element in the array before the current one and just add one to that id so it would be something like this i would say to-do list then go um to-do list dot length like this minus one meaning we want to go to the previous one the previous element that's the last element before the one that we want to add right now and we're gonna grab the id for that element and add one to it if you're confused by this logic i can go over again basically we're just grabbing the idea of the the last element and we're adding one to it because now we're adding a new element and we want the id to increment by one right that makes sense but there's an issue with this an issue that is pretty obvious initially the array is empty so there's no id to the less element so what we can do is we can ask over here first if the to-do list dot length is equal to zero right we're going to use the turnover operator we're going to say if it's equal to zero then the id will be one else we'll just grab the previous element like we like we said before and we're going to add one to to it so if it's the second element it will be two if there's the third it will be three i understand if this is a bit confusing especially because we're in the beginning of the course but if you guys are interested just let me know any questions in the description and i'll be able to answer everything also we have a community on discord which is going over this course so if you're interested in checking that out just go in the description you'll see the link for the discord so this logic makes sense to me i hope it makes sense for you too but let's continue forward so over here now we are adding a new task which is perfect but despite the logic here being correct it's breaking now you see it's breaking every time i need to i want to add a new task it breaks the reason is because we updated the format of the to-do list of how it looks of this array now instead of being a string it's an actual object so when we're displaying over here we can't just say something like display the task because task now is an object and not a string if we want to display like it was before i have to say task dot task name like this and you'll see that now it's adding as well but the button the delete button is still broken because it looks like it isn't but it is still broken because basically we're passing the whole object over here when instead of that we want to actually pass the id and now we want to delete the element by using the id instead of using the task name so we're going to change this to say task.id and instead of this delete task function all we're going to do is we're going to change this to id and we're going to say if the task.id is not equal to the id that we just passed then you want to delete it right so let's try that again let's say do homework we're going to even write it twice right we're gonna use the same thing twice just like how we did before before we were gonna delete it based on the name so both of them would be deleted because they both have the same name but now what i expect is this one over here to have an id of one and this one over here to have an id of two and since we are now deleting by the id we should only delete one which is exactly what happens uh it looks like it deleted the wrong one but it's just because the list um updated and now the second one is in the first position but you can see now we can have multiple tasks with the same name so our project is looking kinda nice right um my plan with this is i want to actually just add some css right now so it looks a little bit better i know a lot of people like to see something visual like visually pleasing while they work with so i'm gonna just write some css come back with the css you'll be able to see the css if you if you even want to copy the css the link for the code will be in the description so you can just check it out and then we're gonna come back to do the exercise for this episode which you guys will write it and i'll show you guys the solution um after you guys write it so like just like i did in the previous episodes so i'll be back in a second after i've written some css just to show you guys how it looks okay everyone so we're back and this is the css changes that i made um it's not a lot uh i just changed the color of this made it look like semi okay i don't care that much about css like i said the whole point of this course is react and not css but you can see this is how it looks now still works the same uh we can add more we can add tasks we can have multiple tasks and just delete them and um if you if you're interested in just copying the css which again it's not it's not even that good this is the css that i wrote it's not a lot um it will all be in the description so check it out so what i want to do now is i want to first try to show you guys um how to use components to make this look a little bit better and then i'm going to present you guys the x the exercise for this um video so we've talked about components before right and components um make it easier for you to abstract a lot of logic into a single um like compact function right so the kind of logic i'm talking about is jsx which is a mix between javascript logic and uh like html or ui so we can implement components over here by taking away this part over here and put it into a single component the reason for that is because this part um think about how it how it how it's represented right it's a piece of ui that is consistently being changed depending on a different value for some sort of data such as the task name and the id so if i wanted to create a component for representing this i could come over here and i could create a file called task for example and i would just create the component which we all know is just a function in javascript with a capital letter first and a function that will return ui so the ui we're going to return is this over here so i can just copy this and paste it over here now obviously um we need to take in um props for this to work so over here at the top we can just say props like this and simply come over here and say props.task name and props dot id same thing as before it just works the same way but the difference now is instead of having all this stuff over here i could just have a return and return the task component that we just created right it just abstracted the whole logic for that the whole ui for that and put it in a different file in a different component now we have to import this component so i'm going to come over here and i want to export this right by exporting and then over here i can just say import from and then we put the path to that file so it's the task file because it is in the same level and then i just want to import the task component so now this should be working the exact same way but we do have to pass the props that we determine that we need to get over here the two props that we need is a test claim prop and an id prop so we'll just come over here and say task name like this and we'll pass the task dot task name and we'll get an id which is task dot id so now we get both of those pieces of information directly from the props and it should be working the exact same way oh it says delete task is not defined oh so that's another thing i wanted to mention we have this delete task function over here right and we need to access it inside of the task component but how exactly are we going to do something like that well the way we can do something like that is by for example passing this delete task function inside of as props for this task component now we could copy this and paste it over here and you would imagine that this would work the same way but it wouldn't because we don't have access to the set to-do list or the to-do list inside of our component we could pass both of those pieces of information as props but it's much easier for us to instead of doing something like this over here we have just we can just say props dot delete task and just grab just pass the delete task as a prop to this component just like this so if you were if you didn't know this um you can pass everything as prop um you can pass uh variables just like i numbers and and strings but you can also pass functions so we're just passing this to this component the test component and accessing it over here and you can see that it still works the exact same way as before which is amazing so this is how we would abstract this make this look a little bit better because now we just have this task component and all the uis over here so now what i want to do is i want to present you guys the exercise for this episode the exercise is creating the update functionality like i mentioned in the beginning so what is the update functionality well i want to have a little button over here in the task like similar to the x the delete button we can have another button right over here and we'll just say complete i'm going to save this you'll see that this is how the button looks right so what i want is to be able to click on this complete button over here and it will make the task be completely green right so every task that you complete it will become green to symbolize that the task has been completed to do that i'll give you a hint you have to create a new property inside of um like inside of this object over here instead of just having each task having an id and a task name you can have another thing for example called completed which will be in a boolean like false or true and use that to change the value and use that to determine which tasks are completed or not now i'm going to obviously show you how this is like the solution for this but i want you to do this on your own i'll also tell you that for updating something like this you will not use the filter function you'll do something similar to this but you will use the map function so you can do whatever you want to to solve this you can try on your own if you already know have an idea of how to do it um you can also just look tutorials online or anything like that or just search online how to do something similar i'm obviously gonna explain to you guys at the end of this video but i'll give you some time to do this and come back whenever you're ready okay everyone so this is the solution to how to do something like that you see that um right now we have over here we could add a task and if i i'll just do another one wash dishes and if i want to complete one of the tasks i can just click on this and it will become green to represent that it's been completed and it will work with every other one as well so the way we can do something like this is like i mentioned we'll have a field called completed which will be a boolean to determine if the task is completed or not it will start out as false but if we click on the button it will call this complete task function which is the main port where we work with some logic right so i mentioned that you guys want to use the map function because the map function allows you to loop through the to-do list or any array and for each element you can change its element depending on some sort of condition so over here the condition is if the id of the task is equal to the id that we want to complete then i want to i want the element in that list that element then i want that specific element to remain the same but the completed property in it so this thing over here will now be true instead of false so if again if you've never seen this syntax over here the three dots mean the spread operator it means that um you basically is this structure you're basically saying that you want to keep the whole object the same but the field completed will be now set to true and if it's not the element that we want to complete then we return task because it is just we want to keep it the same so if you're not familiar with map then it's one of the things that i assume you should know for this course is it's a javascript function but this is the whole point of it whatever you return is will be replaced in the list so we're replacing in this case with completed equal to true in this case we're not replacing at all we're just keeping it the same and then we pass this complete task function to our task as props and we also passed the completed property from the task as props as well because now in our task over here we call that complete task function just like we did with the delete task like this and also to make it green we add a style to our div like we did in the previous episode and the style we changed its background color depending on if it's completed or not if it is completed we make it green if it's not we make it white and all of this allows us to have a project that a to-do list that works perfectly as we wanted in the beginning so again i know this all might seem a little bit confusing because it's the first time we're actually using a lot of logic in react we're doing a lot of states and stuff like that um but i don't want to overwhelm you guys although i might i think it might a little bit i remember this was the the hardest thing for me in the beginning but just being able to play around with the code and understanding everything really helped out the real the points that i want you guys to spend the most time understanding is um how the ad edition part of the to-do list works how the deletion works and how the updating or the completing works because this over here will be massively useful for us later on in the course understanding the filter and the map function are extremely important also understanding the part where we just separate into a component and how props work it'll just refresh your knowledge on stuff that we've worked in the past so i would recommend you also spending some time if you want to check out the code we'll all be in the description and this is basically it for this episode this is probably one of the longest episodes especially in the beginning portion of the course because it is a long topic and it is a very important one so um if you're interested in watching more videos just keep around and feel free to leave a comment down below asking whatever you want i'll be there to answer if you like the video please leave a like down below and comment what you want to see next subscribe because i'm going to be posting um three times a week this course until we're done and i would really appreciate it so with that in mind thanks for watching and i see you guys in the next episode [Music] [Applause] [Music] [Applause] [Music] [Applause] you

Channel: PedroTech

Views: 87,562

Keywords: css, javascript, learn reactjs, react tutorial, reactjs, reactjs beginner, reactjs tutorial, typescript, react js crash course, react js, node js, express js, pedrotech, traversy media, traversymedia, clever programmer, tech with tim, freecodecamp, deved, pedro tech, react course, reactjs course, react beginner course, complete react course beginner to advanced, code ninja, code evolution, learn react, react beginner tutorial, todolist react, react crud, react todo list

Id: omphzcP6wf4

Length: 41min 18sec (2478 seconds)

Published: Wed Jul 20 2022