React Native (feat. Redux) Adding an Exercise Solution

Transcript from the "Adding an Exercise Solution" Lesson

[00:00:00]
>> [MUSIC]

[00:00:03]
>> Scott Moss: So the first thing we need to do, is we need to actually create an action type, an action and we need to make sure the state and the reducer's gonna handle it appropriately. So let's go ahead and we'll create an action type. So all ready have one right here called ADD_EXERCISE.

[00:00:21] So we'll just use that one, you can use whatever action you want I'm going just gonna use ADD_EXERCISE, cuz that's what we're doing, we're adding an exercise. So I'll say ADD_EXERCISE that's gonna be our type and then I'll go and make sure we actually have an action for it.

[00:00:32] So right here we'll create an action for that. So I'll say export const I'll give it the same name addExercise. I spelled it right. And that's just gonna take an exercise and you know what it's going to do. It's just going to return a new action, so we'll say create action of the types .ADD_EXERCISE and the payload is going to be the exercise.

[00:01:02] How many times am I gonna say that? I sound like Michelle Obama, telling everybody to exercise, there we go. Cool, so there's our action creator. This is gonna return this great action that takes the type ADD_EXERCISE with the exercise as the payload, sweet. So now we need to hook this up.

[00:01:21] Actually let's double check our reducers and of make sure it's gonna handle that. So let's check the current work out and, actually I'm not even handling it. I'm only handling ADD_EXERCISE_COMPLETE. So let's just change this over to ADD_EXERCISE right quick. There we go, so that's got to be ADD_EXERCISE.

[00:01:36] And all we're doing is, we're spending over the original state with the new exercise at the end. If you want you can pop it to the front if you want, if you want to put this on top of the list. It's totally up to you. Let's put on the top so we can see it, there we go.

[00:01:54]
>> Scott Moss: Any questions so far about what we did? So we have an action type ADD_EXERCISE. We created an action for that that dispatches an exercise and then we made sure our current workout reducer which is the state that we want to add to has a case to handle that.

[00:02:12] Follow me so far? All right, so next thing we wanna do is head over to our container that has all this stuff hooked up, which is the CurrentWorkout container. The CurrentWorkout container is the parent of the Exercise modals. This is where we're going to get the state and the actions.

[00:02:26] So we head up to where we are getting the state. So mapStatesToProps, and we already have exercises there. So we're good to go. currentWorkOut, I don't think we need that right now, but what we do need is to add a new action here to the mapActionsToProps. And we'll call this,

[00:02:48]
>> Speaker 2: [COUGH]
>> Scott Moss: Bless you, addExercise, and it's gonna take in the exercise. And what is it gonna do? It's gonna return dispatch and we need to bring in that function which is called addExercise from actions action. It's going to dispatch that function with the given exercise.
>> Scott Moss: All right, so dispatch this function with the given exercise which is just gonna return an action.

[00:03:23] With a type of ADD_EXERCISE with a payload of the given exercise which is going to run the reducer which is going to update the state.
>> Scott Moss: Cool, so we've got that. We've got the exercises here and we just need to add the action here. So addExercise and we're just gonna say this.ppops.addExercise.

[00:03:52] There we go.
>> Scott Moss: So we pass that in, everything's wired up from Redux all the way to here, so all that's good. All we do now is actually called this method on a tab. So we head over to the Workout or the Exercise modal which is where we pass in addExercise to.

[00:04:13] If we head over to the modal, we actually abstracted out the actual ListView through another component called ExerciseList. And here's a short cut. What this means is I wanna take all the props of this component and pass it on to this component. That way I don't have to like one for one name them.

[00:04:29] So just spread all the props here. Whatever props this has, I want this to have to. That doesn't mean you have to use them, doesn't mean you have them, right. And so now because this has a property called addExercise, so does this one. So we head over to ExerciseList, which is our ListView with our search bar and all the stuff that we made.

[00:04:52] This is the road that's gonna be rendered for the exercises, and let's just look at that right quick. So if I say I, O still have that, where is that at? Where am I doing that?
>> Scott Moss: I'm doing that in currentWorkout,
>> Scott Moss: Yeah I'm doing that right there.

[00:05:17] That's next lesson.
>> Scott Moss: Cool, so if we click add some exercises.
>> Scott Moss: Is the debugger open?
>> Scott Moss: Okay. Let's reload it right quick. There we go. There we go. Go away. There we go. So now if we type if we say like flat dumbbell bench or whatever. This fuzzy search returns all the exercises.

[00:05:55] So these are the exercises. This is the result of that fuzzy search that I created. So if we click on it, what we want to be able to do is have this add to our exercises. And right now it's not doing anything, we can't really click on anything.

[00:06:09] Nothing's actually happening. We can click this X and it'll close, but we wanna be able to click on the exercise and have it add to our list of exercises. So what we need to do is in our lists,
>> Scott Moss: Around the View right here that's being rendered. So again if I start typing, again if I say like squat or squat I know that's there, maybe it's not there, whatever.

[00:06:39] So each one of these is this code right here, is this view. So when I tap on this view, I wanna be able to add exercise. So what I'm gonna do is just wrap this inside of TouchableOpacity. There we go, we'll do that.
>> Scott Moss: So wrap those in a TouchableOpacity.

[00:07:03] Or actually let's do a touchable without feedback which means it's like a button but there's like no visual feedback on it at all, because this is a list item. So we'll do that instead.
>> Scott Moss: There we go. And then on press, what method do I want to run onPress?

[00:07:29]
>> Scott Moss: Anybody know? So what method is passed in-
>> Speaker 3: [INAUDIBLE], createExercises or addExercise?
>> Scott Moss: addExercise, yeah. So it's gonna be this.props.addExercise, yep, so.
>> Scott Moss: There we go. So we'll say this.props.addExercise which is gonna add the exercise to it but that's really not gonna be any help to us because the modal's still gonna be up and this is still gonna be there.

[00:08:00] But it will add it the exercise but we won't see any visual clues of that happening. So what we really want to do is not onPpress is just do this. We wanna abstract this out and call a method that we have instead. We'll call this.handle.
>> Scott Moss: handlePress. So we'll call it handlePress which needs access to the current exercise.

[00:08:28] So it'll invoke an anonymous function here which gets access to the exercise that we tapped on. And we'll say handlePress.call(this). And we'll pass in the exercise. So now we need to make handlePress
>> Scott Moss: Which is gonna get the exercise. And then what we want to do is now we'll call this.props

[00:09:03]
>> Scott Moss: .addExercise with the given exercise and then we'll also say this.props.closeModal. So close the modal too. So that's why we added this extra method because we want to close the modal, which is gonna bring us back to our currentWorkout which we will then populate with the currentWorkout. So we'll save that.

[00:09:25] We'll get rid of this person and now we just need to make sure our addExercises is gonna be subscribing to that state. So when we addExercise to the currentWorkout it will populate here right. So we head back over to the ExerciseModal, we have this. Right no.
>> Scott Moss: Is it ExerciseList?

[00:09:55] Yeah there we go. So right here. Actually no not this one. What we want is the WorkoutList, there we go. So the WorkoutList is actually just gonna be if we go look in currentWorkout is what we made whenever we made the workout list and we're going to get to it.

[00:10:12] So this is the WorkoutList. It's this right here. It's the add some exercises, just with a plus. And it has a SetModalVisibility with the current workout. We added that on the last walkthrough. But this is actually what it really looks like. It itself is just a ListView. It's just a list for you that is gonna iterate over the currentWorkout array.

[00:10:35] And then it has a footer, which is this. This is the footer right here, so this is always on the list for you. Regardless if there's anything in the list or not, this adds some exercise with a plus will always be there, because I rendered it as a static foot.

[00:10:47] So it'll always be there. But if we do have workouts it'll render them with this View right here renderRow. So styles.workoutText, exercise.name. So now I'm gonna add our exercise, we should actually see it pop up right here. So if I say bench I click that, looks like it added something there we go.

[00:11:13] But it didn't actually add in the name. Let's try that again, let's see what's happening. So let's add in another one, lunges, cool. So it's adding something. It looks like I just got the properties mixed up. So let's do the debugger right quick. Any questions so far? This code right here we didn't talk about.

[00:11:35] Because I wanna get to async and we're getting close on time and it's literally the same thing as the ExerciseList just with different styles. So it's not a new concept but anything about like the actions and Redux and stuff cuz now we're about to convert it to async.

[00:11:52] And it's just an extra step on top of this.
>> Scott Moss: It's crazy how much I use a debugger in React Native but never in web. Maybe now I'll use it in web, no I'm still not gonna use it.
>> Scott Moss: All right. So let's go into our reducers which is if that fires you know everything is good.

[00:12:22] So currentWorkout should get updated rate here. So let's check it out. So if we look, now we just hit a breakpoint right here. We should see currentWorkout get updated, so.
>> Scott Moss: Okay, paused, if you go look, yup. There it is. So the payload is something different. That's why it's freaking out.

[00:12:54] It's not, I don't even know what that is, what is that? What, I have no idea what that is? All right, so what we wanna do instead, I think I know why, I know why.
>> Speaker 3: Are you not passing in your action?
>> Scott Moss: I think I actually passed in an event on the tab.

[00:13:13] That's what I did, that looked like an event. So if you go back to the ExerciseList down here, this right here I grabbed the wrong thing. I put exercise. That's the event from this press. That's what that was. I want this exercise from the renderRow. So now it'll work.

[00:13:39] That's why it was freaking out. So let's just refresh this.
>> Scott Moss: Okay and take off those there we go. So now if you do this.
>> Scott Moss: There we go lunges.
>> Scott Moss: And flat barbell bench. So there are exercise that we added and this is always gonna be on the footer.

[00:14:12] So now what we're gonna do is we're gonna convert this over to async. But I'm gonna show you how to do this in the Todo app because I'll show you here then it will be done and there's no fun in that. So let's do this in the Todo app.

[00:14:24] Any questions on this? No, all right let me push this up real quick. Man, so let me put this in on my pocket. There we go, so git add- b we'll call this list-view.
>> Scott Moss: solution.
>> Scott Moss: There we go.
>> Scott Moss: Cool, okay, so now we're gonna do some async stuff.