This course has been updated! We now recommend you take the React Native, v2 course.
Transcript from the "Finishing the Exercise Modal" Lesson
[00:00:00]
>> [MUSIC]
[00:00:03]
>> Scott Moss: So now we actually go ahead and provide the props and hold all this stuff up. So when we start typing and we'll see some stuff pop up. So the first thing is the search bar on text change. So this is going to be like a fuzzy search so as we're typing, we wanna be able to see the different exercises show up From this initial state.So we have all these exercises here.
[00:00:23] And as we start typing, we wanna see which ones we type with a fuzzy search. So what we can do there is actually just make a quick search implementation for us and we're going to use that right quick. Let's head back here. I'm just gonna copy it because it's implementation detail.
[00:00:41] If you wanna look at it it's in the it's in the source. So it's really not going to really cover over really quick. So what to do this and we'll make a new folder called services and I'll make a new file called fuzzy. Not that. [LAUGH] that was paste around there.
[00:01:05]
>> Speaker 2: That's really fuzzy.
>> Scott Moss: That was really fuzzy. See, so this is gonna take a predicate a list of terms you want to search over and then a property on those terms and its gonna do a fussy search. So we say we got that.
>> Scott Moss: So head back to the current or I'm sorry the exercise model.
[00:01:27] There we go. So now that we have that what we can do is
>> Scott Moss: We just want to go ahead and include that fuzzy search in here.
>> Scott Moss: There we go. And then now what we're gonna do is when we pass in the text what the exercise is that we wanna search on this is gonna pass back a new list of exercises that we can pass in.
[00:01:56] So with that being said is we just need to actually do a connect. So we can connect here or we can connect and current work out. Looks like we're already connected and current work out. Let's go ahead pick back off this and pass in the supply details to exercise model.
[00:02:13] So I exercises modal also needs the exercises. We'll just imagine that if there was a to stop prop start exercises. So let's go ahead and do that and do that it's actually really easy to come up to this function here a map state of props and we say exercises and we want state exercises.
[00:02:36] That's it we know that's there every go look at the reduce or. There is exercises which is the initial state which is this file. So there's exercises already there done and all we have to deal with this say that and pass it. Now we have exercises we can come back over here and we can say cons.
[00:02:59] Found or actually to do a state.
>> Scott Moss: Foundexercises, let's make that an empty array. and it will do is we'll say so on text change every time we type will say this dot set state of found exercises to be the fuzzy. Search and fuzzy search takes and the predicate which is the text The list you wanna search over which is this dots are the props, exercise and then the property of those objects which is a name.
[00:03:49] So let's return a new or a force that we're gonna set the state with. So we got that and we need to have a-
>> Speaker 2: Paperback obit of exercise this month. Constructor Exercises.
>> Scott Moss: foundExercises.
>> Speaker 2: Exercises is spelled wrong.
>> Scott Moss: Dang.
>> Speaker 2: It's spelled wrong both places.
>> Scott Moss: Two c's.
[00:04:09]
>> Speaker 2: [LAUGH]
>> Speaker 3: They should just change it.
>> Scott Moss: They should just change the name. They should put a C there. Exercises.
>> Speaker 3: You're missing an S too.
>> Scott Moss: Exer, exer, so this is wow that was hard. Sizes. Why is that word so hard, is it just me?
>> Speaker 2: No no, that thing don't seem to work.
[00:04:37]
>> Scott Moss: [LAUGH] My God like what is, this is hard. Okay. There we go. So how do we do is, we pass in exercises, this gonna do this dot state dot file exercises quote. So let's run this And no creeping around out. Don't launch. Please don't launch. Okay.
>> Scott Moss: It's coming.
[00:05:16] That's low this thing Other debugger is still active things probably pause and everything have been saving so many errors about is so broken right now. I guarantee this thing has a look at it. Yeah it's over. Okay let's quit that. We are getting deep.
>> Scott Moss: Into list views.
[00:05:59]
>> Scott Moss: Stop.
>> Scott Moss: All right, so let this build again then we'll hop back in it. And we'll let it booting up
>> Scott Moss: It's coming. So any question on a list view while we're here at all. We went over it super fast, but I'm gonna put this up so you can look at it.
[00:06:27] Because I didn't wanna stress on like how different it is. I just wanted to be simple, cuz it really is a sum. We just got a modify the data source, was just there. That's all you gotta do.
>> Scott Moss: There's tons of other project passing over optimizations, but this is pretty much it past a data source.
[00:06:50] And how to render the row you can but you can do like a sticky header or a sticky footer. Pretty pretty cool stuff. But for right now this is all we're going to do.
>> Scott Moss: All right. Looks like that's running so let's boot this up again.
>> Scott Moss: I wanna turn out the remote to bugger.
[00:07:15] And then it's gonna break I'm actually gonna need it. [LAUGH]
>> Scott Moss: There we go, dataSource, there we go. Okay, stop all right. Let's only decide it into expressions and exercise most of us I forgot to put something and there they are text changed. So we want to say the start had no texting.
[00:07:58] There we go. What else you got. Okay exercise list. I expect it's okay if I turn. What the response. Hm.
>> Scott Moss: I don't know what they're talking about. Wow. [LAUGH] Another silly moment. Okay, let this thing render it.
>> Scott Moss: Come on.
>> Scott Moss: Okay.
>> Scott Moss: Not sure why that's not rendering or throwing an error or anything.
[00:09:13] Let's just stop it started there,
>> Scott Moss: There we go now there an error. I can't find components. Whenever I switched to a new components I forgot to put component guarantee. Probably an exercise list. No probably ExercizeModal. Yeah.
>> Scott Moss: Yeah, I know I just fixed you reload yourself. Now it's stuck in a loop.
[00:09:54] No.
>> Scott Moss: My God. It just killed itself.