Original subtitles

Back in the App component.

I now wanna use my custom hook

and therefore first of all, we have to import it.

So I import useHTTP

from

hooks

use-HTTP.

Then we can get rid of the, isLoading and the error states

because that's now a state which will be managed

by the custom hook.

So we can just call, useHTTP here.

Let me actually call this here after

initializing the Tasks state.

Now the custom hook needs some arguments

because we expect two parameters here, the requestConfig

and a function that is applied to that data

which we get back.

So therefore we should pass that in.

And for the requestConfig we pass in an object

with

a URL property

because inside of the custom hook

we are accessing a URL property here.

And we then also later access method, headers, and body

and therefore for the URL in the App component.

I will pass in this String here.

Now in the custom hook.

We also then expect the method, headers and body.

And the thing is that for App JS,

I just wanna get data

and therefore I wanna send a getRequest

I don't need any headers

and I don't need a body.

And to be flexible enough

and to not force all components to then pass

in some dummy data or anything like that, I will go back

to the custom hook and tweak this configuration here

for the fetchRequest a bit.

And in the case of the method here

check if requestConfig method is set

and only if it is set, I apply it here

and otherwise I set this to GET as a default.

For the headers I will check if headers are provided

on the requestConfig, and if they are

I of course will apply them.

Otherwise I'll set headers to an empty object

and for the body, all check if requestConfig body is set

in which case I will stringify it

so transform it to JSON I mean,

but if we got no body I'll set this to null here.

Now with that, the custom hooks should be flexible enough

so that

useHTTP

can just pass in an object that looks like this.

Now that's not all though.

We also need to provide a second argument

which is that function

which receives the data here in the end.

So therefore I will define a function here.

We could define it in line and the argument list

but to make it a bit more readable

I will define it here before I call useHTTP.

And it will add a function which I'll name

transformTasks,

here

I then expect to get my

tasks object

and inside of transformTasks.

I then wanna apply the transformation logic

which we had in use-HTTP JS before I deleted it there.

But I still have it down here

in App JS because I haven't deleted this code yet.

So it's in the end, this logic lines, 32-36 here in my case

which I wanna copy and add here into transformTasks.

And it's the tasks object through which I wanna loop here

with a for in loop and which I use down there.

And with that, we transform all the tasks from objects

which we get back from firebase

into objects that have the structure and format

we need for our front-end.

And then we set our tasks state

which we can still do since we still have setTasks here.

And we set our loaded tasks like this,

and now it's the transformTasks function,

a pointer at this function

which be pass as a second argument to use-HTTP.

And then this function will be called

for us by the custom hook whenever we got a response

and this is the best of both worlds with that

we have the main logic in the custom hook

but the data specific logic into component

where we need the data

that alone still won't do the trick.

UseHTTP does not just require parameters

it also returned something.

It returns this object with the loading and error states

and the a pointer at the sendRequest function,

which we ultimately will need to call

to trigger that request.

So in App JS,

I

will get back my HTTP

data here.

You can name this constant however you want

and it will de-structure it

by pointing at httpData.

And we can pull out isLoading error and sendRequest.

And of course we can also do the de-structuring right here

and save that extra line.

Now I will also assign an alias here

which is something we can do in JavaScript

by adding a colon here in this de-structuring syntax

and giving this a different name

and I will name it fetchTasks.

So we're still pointing at this sendRequest function

from the custom hook.

I'm just renaming it here

inside of this component function.

And with that, I will delete the old fetchTasks function

in the App JS file.

I will delete it like this

but I will keep useEffect here

where I still call fetchTasks.

Now, here, however, I should add fetchTasks

as a dependency now,

we should have done this before

but before it wasn't really an issue

because in the old fetchTasks function

I was only calling state updating functions

which are guaranteed by React to never change

and React to noticed this and didn't warn me before

but React doesn't know does fetchTasks function

so this sendRequest function at the end.

It doesn't know what's going on in there.

And therefore we have to add it

as a dependency to rerun this effect.

Whenever fetchTasks changes

at the moment this would be a problem though.

And therefore I will delete this dependency.

We will re-add it later because this is not a good practice

but we will avoid this dependency for the moment

because it would create an infinite loop right now.

And we don't want that.

And therefore with that

we now restructured the App component.

We still got access to the isLoading and error states

which we pass on to Tasks

to the Tasks component down there.

And we still get access to fetchTasks

but the logic for sending that request and handling errors

and so on is now part of the custom hook.

And therefore, if we save everything now

this should work again.

And if I reload it still loads all the tasks.

And if I add a new task

that also still works.

So that's now our custom hook being used.

It isn't finished the yet though

because as I mentioned, for example, here

we're not using it in a best practice way.

Let's therefore do that in the next lecture.