React Native Project: Workout Stack - Workout History

hey everyone hope you're doing well and staying safe in this video i'm going to be going over the retrieving of our um history for the workouts so let me begin by going to my project folder in my project folder like last time we just went over the strengths next we're now doing the crud the r retrieve function of this but before i get started what i have to do is go into my directory and then just make sure i'm in the directory and now what i'm going to do is launch the emulator and then go on from there so here we have our splash screen and this can take us to the login screen and it's going to give us a new um quote and the user so from here like it's last time we have the create workout we can come in and choose our the date that we wanted to work out the cardio and the strength but um so let me just do january 17th 2020 i'll do uh actually let me do june august 17th 2020. then i'll do a strength we have machines yeah cat let's do four arms duration 45 minutes resistance was 60 pounds reps was 25 of five and my uh calories burned let's say 500 the heart rate was 65 beats per minute and press submit so it was submitted successfully so now uh that i have that stored what i want to do is create a screen to retrieve the history so i can look up what my um what my workouts are and i can just view them so in order to do that what i first need to do is go to my workout stack here and create a new file in this file i'm going to call it work out history.js and for this what i'm going to do is just do the like we always do so import react then use effect and use state from react then i'm going to import button view safe area view style sheet flat list to display our items um from and this can be react native and then what i want to do now is uh open the database so i'm going to say import open database from that's going to be sqlite storage react native particulate storage and then i'm going to import async storage a sync storage from and this is me at react native community async storage so then uh from here what i'm going to do is just um do the react components i'm going to say const workout history then it's going to be an arrow function return right now i'm just going to put text and say workout history.js and then i'm going to say const defaults or yeah const export defaults and then or export default export default workout history and i'm going to say const styles is equal to stylesheet.create so now that i have this taken care of what i need to do is go to my main and inside of my main i just need to import this in my uh main.js i'll say import workout history from then go to my home stack workout stack workout history then in my workout stack i'm going to do is put a workout stack dot screen name is equal to we'll call this work out history and the component is equal to work out history self enclose tag so now that i have this here what i want to do is go to my workouts.js and in my workout.js what i need to do is get another button like so so in here i'm going to have a button that's going to be a view so in this video i have a button the color is going to be purple the title is going to equal work out history and the on press is going to equal a re navigate function this is me navigation.navigate and then in here it's going to be workout history and um just like the view i'm just going to copy this style right here put it inside this so then if i go back to here now i have my workout history okay so let me oh it's because it's an import text so if i go to my workout history here i didn't import text so let me just do a text let this refresh come here work out history and now i have workout history.js okay so now that that works what i need to do now is begin implementing the database stuff that we need for the retrieving from our database so i'm going to say let error cb equal passing the value error say console.log and then in here i'm going to put sql error and then it's going to be plus error then we'll say let success cb equal i'm not going to pass anything in i'm going to console.log in this case i'm going to call this work out history db opened let me just tidy this up a bit so now that i have this done i need a variable so i'm going to say let's db equal open database and then inside of here i'm going to pass in the name of my workout database the name is going to be workout.tv and then i'm going to say if this is successful give me the success otherwise give me the error function now that that's done um i am going to be going to one screen further for the workout history so i'm going to pass in navigation as a parameter to our component then i am going to be using flat list so i'm going to say let then i'm going to call this flat list items set flat list items this can be equal to an array so it's a parenthesis array then i'm going to be um accessing our async function like before so i'm going to put right underneath our variables use effect and then inside of here i'm just going to pass in the function name async function call so um before i get too far ahead um let me just finish this off with the uh open close brackets at the end the empty bricks at the end so that it knows i'm not passing in anything so for this what i'm going to do is get a const get async data is equal to async and it's going to be passing in an arrow function i'm going to say try say async storage dot get item then i'm going to pass this in user token and i have a function errors comma result so inside of here what i'm going to say is if there are no errors um i'm going to console.log then in here it's going to be user token plus results and then i'm going to have a db dot and here and pass ntx and then i'm going to say let a sql statement equal and it's tilt key and from here i'm going to do joins from my cardio and my strengths for the date that we're going to be passing in to have it return for the dates to be listed say select distinct distinct main underscore work out dot work out underscore dates then i'm also going to have the main underscore workout dot user underscore token and say from main underscore workout because this is our main workout table and i'm going to have a left join workout and score cardio on workout underscore cardio dot work out underscore dates and that's going to be equal to my main underscore workout dot workout underscore date and then i'm going to have here put in and work out underscore cardio dot user underscore token is equal to main underscore workout dot i user token then i'm going to have another left join so let's say left join workout strength on work out underscore strength dot work out underscore date and that's going to be equal to main underscore workout dot work out underscore date and then just like before i'm gonna have an and work out underscore strength dot user underscore token is equal to main underscore workout dot work out dot user underscore token and then i'm going to have here a where statement and this where statement is going to be uh setting the main workout user token so say main underscore workout dot user underscore token is equal to question mark so then after this let me just make sure i didn't misspell anything so select distinct maintenance workout dot workout underscore date comma space main underscore workout dot user underscore token from main workout i have left drawing work out underscore cardio on workout underscore cardio.workout date is equal to main underscore workout.workout underscore date and workout underscore cardio.user tokens underscore workout user token and i have left join workout underscore strength on workout and score strength.workoutdate is equal to main underscore workout dot workout underscore date so the dates are the same and workout underscore strength that user token is equal to main underscore workout.usertoken so yes i don't see any misspellings i did catch that one error right there cool so now that that is done what i want to do now is have an execute seq statement and say tx dot execute sql and here i'm going to put my sql statement then i'm going to pass in the variable results which as you can see up here is going to be our user token and then i'm going to pass in the however callback function so tx and then results i'm going to say var let temp is equal to an empty array i'm going to say for let i is equal to zero i is less than results dot rows dot length plus plus ah plus plus i and then for here i'm just going to say temp dot push results dot rose dot item sub i and then i'm going to have here console.log temp to make sure that we have the array situated then i'm going to pass in my set um then i'm going to pass in my uh the data being stored into my array so i'm going to push it to anywhere so i'm going to say set flat list items as temp then i'll have this finished off and i'll have this finished off um i yep then i have this right here so then i'm going to have a catch block right here and in my catch block i'm going to have an error no just an error and in my error i'm going to console.log error so if this doesn't work it will return an error so now if we go to our workout app we refresh it i believe it will show right here so if we go to our workout and go to workout history and that is because we haven't called the function so let me go inside of here call the function now that we have the function called let me there we go so as you can see we have our user token is this and then we have our workout date friday march 13th 2020 user token so on and so forth so this is what our data looks like in its raw form now that we have our um now that we have our bedding of the data now we need to put them actually inside of a list to view so i'm going to say let's list view item separator is equal to and this can be a functional component save return and let me put here a view and then i will come back to this to put a style with it but this is going to be separating the items accordingly and then what i'm going to do is say let list item view is equal to going to pass an item as the variable and then i'm going to have a variable saying let text date is equal to item dot work out underscore dates dot to string then i'm going to have a return inside this return and put a view the key is going to equal item dot user underscore token because it has to be unique and then the uh i'll get back to the style so then inside of here i'm going to have a button it says button the title is gonna equal the text date and the color is gonna equal salmon then on press is gonna be equal to a function that we have to create um yeah it's gonna right now i'll just get rid of this but uh we're going to have this go to this specific screen later on so once this is done um we can now come to here get rid of this and then i'm in here i'm going to have a safe area view i'm going to have a view with a button and this is going to have a title is going to equal back the color is going to equal purple and then it's going to have an on press equal to um navigation dot navi navi navigate dot go back so then after we have this taken care of um i can just do that it's the same thing so then once that's done i'm going to have another view and inside this view i'm going to have another view and then it's going to um have a flat list inside of that flat list where the data is equal to flat list items the item separator component is equal to list view item separator the key extractor is going to equal inside of here we can have the item comma index and then it's going to re have the index be turned into a 2 string then we're going to be rendering the item so it's going to be open close braces open close parentheses open close braces and pass an item and then i'm going to pass right here the list item view of item so that is it for the flat list view as you will note however our view is empty and we have no styles so what i'm going to do now is fix that so um actually we can see right now it's just empty go back good workout history there's nothing here press go back oh it's just navigation dot go back that was my mistake let's go back it takes me back okay i apologize about that so now for here what i need to do is pass in the um styles we're going to be using so say main container inside here i'm going to have a flex of one the justified content the center and then the background color is going to be pink and then the main container is just fire safe area view so style is equal to styles dot container as you can see we have that right now so then once we do that next what we're going to do is our secondary container so it's a secondary container and here i'm going to have a flex b1 have a background color be white the align itself the center the width be 375. the margin bottom is going to be 10 and then the border radius will also be 10. and then our secondary container is going to be inside of this view right here style is equal to styles.secondary container as well as it's going to be inside of this one right here so we have two so then now that we have this what we want to do is get the um stellar back button some say back button and i will say align self is going to be center the margin top is going to be 15. the width is going to be 200 the height is going to be 40 and then the margin bottom is going to be 10. so go to our back button which we have right here say style is equal to styles.back button yeah that looks good now what we want are the dates so i'm going to put the name called button dates dive here and have an aligned self the center the margin top b15 so uh the width b300 and the height b40 and the margin bottom b10 so then if we come up here to where we have um to have the list view item we're going to have inside of here our style is equal to styles dot button dates refresh this so now that that is done what we want to do is get our um that should be it oh that's why so up here i didn't put use state that's why it's not working okay so i ran into an error that wasn't returning anything now it returns something because i didn't put you state oh my goodness that was a mistake so be sure you put you state here otherwise um you will be troubleshooting so now when we click on this nothing's going to happen obviously because that's a separate screen i'll implement in another video because i try and keep these relatively short but now that we have um so now these are all of the data that we have in our database for the cardio and strength workouts and in the next video what we will be doing is going over the other screen itself to view both the strengths and the top and the or the strength at the bottom of the card in the top but um until then i hope you guys enjoy and as always before we close this video uh before we close this video what we need to do is our git commands so we'll make sure that all the stuff closes so then what we need is in here to do git add star would you get commit dash m quote say added work out history and i'm going to say get uh push dash dash set dash u and then we're gonna say origin master and just like before it's these right here so then if we go to our github website just make sure things check out we go to a master 38 seconds go source home stack workout stack workout history and here you can see that everything we just uploaded is available cool so in the next so i said in the next video we're going to be implementing the second screen needed for the workout history but until then i hope you guys enjoy

Channel: David Grice

Views: 31

Rating: 5 out of 5

Keywords: react, native, tutorial, react native, react native tutorial, reactjs, React, project, based, learning, project based learning, android, ios, app, application, how, to, javascript, js, vsc, visual, studio, code, databases, sqlite, sqlite databases, react databases, react native databases

Id: aDoDawyKCqo

Length: 31min 50sec (1910 seconds)

Published: Mon Dec 21 2020