Hyper Cloud hacking, 7 May 2021

Previous Meeting

⏯

youtube image

►

From YouTube: hyper Web CMS API (hacking)

Description

In this video, Tom Wilson is working on the Update Feature for the FAQs API to drive the FAQ questions in the hyper website.

FYI, don't build a CMS with hyper, this is just an example for exercise purposes.

A

B

A

Ahead and record this um mainly for trip so that we can sort of stay in sync with what we're working on. So I've pulled up the project and want to make sure.

A

Yeah make sure our key is set up, and what we need to kind of work on here is the put feature, so we need to do an update faq.

A

So what I'm going to do is go ahead and start from the server kind of show an outside in approach. Let's maybe um start with a test right.

A

Change my plot here a little bit.

A

That's better um so let's uh create a test and we're gonna do uh put faq and then we'll call it test.js and we're going to need tape.

A

We're going to need fetch mock.

A

And we're going to need um test server.

A

And we'll want to get our app.

A

Okay, I think that's all that we need right now probably need more, but that's a good start. So we're going to write our test and it's going to do a put to the api faqs slash id endpoint.

A

And we need our server.

A

And we need fetch on this.

B

A

So we're going to do a fetch and we're going to go to server.url plus api faqs one. Let's do f8q dash one right. What's your favorite faq all time, so we want to do a put. So we need a put method. Hang on.

A

Tabs are off so I need to fix that really.

B

A

Like my code, rand.

A

Because that no.

B

A

I should have ran to install my.

A

A

I just uh I can't get away from them and I can't use um them.

A

A

Vs code, it just felt more for me, um so where were we? We were on our test doing put okay now, we've got a um put method and headers and name content type.

A

Application json and then a body.

A

And we'll say: json.

B

A

And let's go ahead and make this a sink.

A

And we'll get our result, wait.

A

And we're gonna have an id faq one and then question.

A

A

A

A

A

Let's say hyper.

B

A

That looks good.

A

Again, a way to wait all right, wait, wait! Wait! Oh wait!.

B

A

Wait: json, okay and then what we want to get back is probably an okay, whether it's okay or not. Okay, so we can say, t dot. Okay, equals result, dot, okay,.

A

And then we can do server dot close and we can um do test plan.

A

One and that way we don't have to call test on it all right, so our fetch mock.

A

We want to set global this, which equals fetch mock, sandbox and then we'll intercept the put will be https dev paper 63.5, slash data.

A

63 and faq-1.

A

That's the url that we want to check and then we want to just return.

A

Okay, all right, we got our tests, let's run it.

A

Faq test, so it can't find module tape if you aren't.

A

A

And we got that so now: let's try to run it again.

A

Okay, so invalid json response reason expected, so it um sent a response in html, not json. That's one thing we can handle on.

B

A

Server.Js right so we can handle.

A

Errors pull up the animal error code and express, but basically we want to do a.

A

Default error handler: that's what we wanted so.

A

um I'll write it up here.

A

Use and it's going to be a function that returns an error, a request and a response, and then next.

A

So what we want to do is basically keep it simple log out our error stack and then we'll send a status of 500 and the json of okay faults and message equals parent dot message.

A

Okay, now, if we run our test, let's see what expected json should have gotten.

A

A

hmm Right something.

A

A

A

Don't spend too.

B

A

This but kind of.

A

A

Well, let's see, let's just see if we can't address it, this way.

A

That might be just an error with a predefined route, but because the route doesn't.

A

Work, uh let's.

B

A

A

So, let's just do.

B

A

A

And let's do status 500.

A

And it's really should be a 404 right.

A

Say not implement.

A

A

Let's run our test.

A

Okay, let's set my paren.

A

So now we got um not implemented. That is text. We just need to change that back to.

A

A

Nice, okay, so our employees, non-implement and so we're going to go from the server to the api into the core and then to the service. So we're kind of going outside in here. So we're going to start with the server and we will say, put api faqs id and we'll call this faq put by id.

A

Keep with the same kind of convention and then faq put by id.

A

Cues id put index okay, we'll go into api faqs id put index.

A

And this is a function. Actually it's a sync function. It takes a request and a response.

A

Like so, and because our middleware, we got a core from the quest and what we can take even further is destructure. This request up here to just what we need, so we need core and we need um params and we need body right, pretty cool and then from core.

A

We can get faqs.

A

And then we're going to.

A

Call faqs dot update, pass in brands, dot id and body.

A

And if there's a problem, we'll do a catch.

A

uh If there's a problem that that error should be caught in our error, handling um and we'll we'll test that so now we've got a reserve result, so we should be able to um return that result.

A

As res dot json, let's do result.

A

That should be our endpoint and if we run our test again now, um I've got a typo.

A

A

A

B

A

That now can't read property; okay null so got back null, which is cool. um Okay,.

A

Now we've got to go to core.

A

And we've got our faqs, so we go into faqs and we've got list create, update, update, that's where we got the null and that's what it returned. It was null.

A

So, due to the closure, we have our services up here and we're going to use those services.

A

So we've got um an id and an faq.

A

Let's create a.

A

Chain so I'm going to say, services, dot, update and we'll give it um an id and an faaq like that.

A

Now we probably want to validate the faq and since we're hiding um type, we probably want to deal with that too. So we'll start the chain with the sync of faq and then we'll validate.

A

And the validate returns either so we'll convert it back to an sync type and then.

A

We want to like add our.

A

Defaults- and in this case, though, we want to add type, but we don't want to add um created unless it already exists and we probably want to add updated timestamp.

A

And then we will chain and.

A

In this case, we'll get the faq and we'll update it like.

A

A

And we may want to refactor that a little bit and then finally we'll.

A

Verify um and then verify returns and either so we'll change that to a sync.

A

Let's be it so we want to make one adjustment with our defaults, I'll, say: faq, dot created or a date time stamp.

A

Just break this down.

A

And then updated.

A

Will always be faq, updated.

A

Or I'm sorry new date to iso stream.

A

All right, so we've got that.

A

We want to share created, an updated, probably probably makes sense.

A

And they're a date, but they are a string basically we'll make them optional.

A

Since they're automated.

A

Okay, so we've got that.

A

We've got all of that: let's give it a spin.

A

Okay, unexpected identifier, updated. Okay, I think I probably missed a comma or something.

A

A

A

Cool so this time we got back a and a sink which, which is good, um and we just need to convert it to a promise. So we'll go back to our api.

A

B

A

And then convert our sync to a promise again. This is by using a sink where we're removing all the side effects from our core. So there's no side effects in core, it's all pure and then, when this two promise gets called, then the side effects happen. We um run it now.

A

Cool update services, dot update is not a function, that's what we're looking for. So we go to services.

A

In our index, we've got to create a get: let's create an update, it's going to take an id and a doc. It's all general there's nothing about faqs here, so we're gonna do a sync fetch and again we're call in side effect code, but it doesn't get executed until that two promise runs on the um the api layer.

A

So in this case we've got the id. So we'll add that in our url and then we're going to do a method put and headers, we need content type.

A

And we need authorization.

A

Okay, cool and then um we need a body.

A

I'll chain that to json very nicole and that's our update, we just need to add that to our.

A

A

And let's see how we got.

A

Cool we got okay, true and idfaq. One.

A

Let's go to our.

A

B

A

Angle, one second, so I think we need to see why this fetch mock didn't get called and get captured because it should have.

A

I think it might be, because I need to put it above.

A

Like that there we go okay, good status.

A

A

All right, so that's the update feature at least for this this round and push that in and next we'll work on.

A