next so we have a bit of code repetition
here so we have the code that says the
interval it’s basically the same as the
one that we have in component did melt
we also have clear interval and this is
basically repeated in component will and
melt I’m going to change that I’m going
to create two separate methods let’s
call one pause and let’s call the other
one resume okay so when you pause you
basically want to clear the interval
we’re gonna do exactly that okay we’re
gonna basically clear the interval
passing the interval property and
instead of doing the clear until all
inside of handle pause toggle I’m just
going to call the pause method on this
and this block of code that basically
creates an interval that’s going to be
put in resume and the resume function so
similarly we’re going to call that
method the ovoid repetition and of
course now that we have these two
methods we also don’t need to call clear
integral from component will unmount
we’re actually going to call this pause
okay the same thing goes for component
dead mount we’re actually going to call
this dot resume okay and let’s see if
this actually works so we’re gonna click
on pause and that’s gonna stop the timer
resume that’s kind of resume if you
update a page you can see that because
by default pause is false the timer is
active and it basically goes down so
just a bit of refactoring in there for
you let’s remove the comment for now
because we don’t need it let’s also move
the label or basically the text that
refers to the number below it so that
it’s gonna look something like this
the number is actually going to be on
the top and the label is going to be at
the bottom so we just get remove that
has nothing to do with the app it
doesn’t really affect the functionality
in any way shape or form but basically I
think it just looks a little bit better
so I’m just gonna do that
let’s put it below and four seconds I’m
going to do the exact same thing as you
can put it down there
save this is what it looks like another
smaller factoring thing I’d like to do
is if you go back to app GS let’s
suppose we moved to do the wrapping do
it’s essentially pretty much useless
here because it doesn’t do anything and
in the app component we basically are
just going to return the calm down
itself okay so we don’t need to wrap it
in anything and this is still linked to
work of course and while we’re at it
let’s also move the expressions to a
separate line just for a better
readability so I’m gonna just move them
on a separate line like so let’s do the
same for the title and also seconds okay
this is not going to affect the app in
any way again but it’s just for
readability so we’re in a good shape
right now we have a countdown component
this is a stateful component basically
contains all of a state and then it also
has a dependent controls component that
relates to that con down now you can see
that the controls are really not that
reusable so will be controls themselves
the only relates to the countdown timer
component in fact you can really reuse
them anywhere else because they only
makes sense within the context of the
canto so I’d like to in fact it’s a
little bit further let’s create a folder
let’s go it count down and let’s move
the two components in there okay so
we’re gonna have a separate folder that
represents the countdown timer and I’m
going to create a new file and I’m going
to call it in the SGS okay back in app
GS we are going to have our countdown we
moved to index GS instead of countdown
GS
I’m going to rename the import it going
to go to countdown and the reason I
created index.js file is because first
of all this component F GS is going to
look for count of Cheops it’s not going
to find the file but it’s going to find
a folder countdown it’s going to go
inside of that folder and because we
have indexed GS it’s basically going to
go to that file by default so we don’t
need to do slash index or index GSE
we could just leave it off it’s gonna go
to index by default we don’t need to do
anything else other than that now in
index what’s basically have all of the
countdown mark up inside of index chests
and then in countdown we’re basically
going to have just the timer but the
index itself is going to contain all the
state okay so let’s do the following
let’s do import react from react and the
very first thing we always need to do
let’s also import count down from
countdown on this note I will probably
we name countdown to just timer right
because this is what it’s going to be
it’s just going to be a timer and the
countdown is actually indexed yes this
is what the component is going to be so
now go ahead timer and we’re also gonna
need controls we’re at the buttons
controls from controls let’s create a
new class we’re gonna call it countdown
it’s gonna extend the component which we
also need to import along with the react
let’s do a component from react this is
going to be a class extends with an S I
forget that now let’s also do export
default let’s say that now in timer this
is no longer going to be come down this
is going to be tire okay and we’re
basically going to move most of this
markup to index.jsp okay so what I will
actually keep inside of here is only the
level I think so I’m going to remove
everything from the top to index yes and
we’re going to have a rather method okay
this is going to return that block
and then we’ll also let’s see we have a
section here this is the closing date
for the level I’m going to move this
stuff to index and then in here I will
basically put our timer I’ll close it
off and this is going to be adjusted in
fact this is going to go to that line
that this looks good now the other thing
I think I’ll do is i remove the
constructor from here
so i’d like to keep all the state inside
of the countdown component that state is
basically going to be passed to the
timer okay and i’m going to move all of
these methods and i’ll just basically
drop them in here in the next chest I’ll
say that and of course the timer now the
timer is going to expect duration as
well as paused this component no longer
needs to be stateful so I’m going to
make it functional let’s create a
constant called timer it’s going to be a
an error function that accepts
properties of props and it’s going to
return this block of code so it’s
basically going to return the level that
is going to contain basically all the
output that needs to be displayed
rendered right that’s also just a just a
little bit when you remove the render
method okay we don’t need any of this
stuff anymore because we don’t know
about how the class works and finally
this’ll bring to the same line you might
have seen a little bit of a difference
effects where you have parentheses so
you wrap you could wrap the day of birth
parentheses it still works without the
parentheses in most cases but you’re
just going to be careful with semicolons
and it specifically automatic semicolon
insertion it’s a little bit off topic so
I’ll just leave it off for now but here
we are going to need the duration object
back in and XJS when we call the timer
we need to pass oops we need to pass
duration
okay and the duration is basically going
to be this dot state dilation in fact
let’s do the following we’re going to
need to bring back the constants here
right so let’s do constant I’m going to
use the structuring again let’s do the
duration and let’s also do pause pauses
need for the buttons right so I will
just assign all the stuff to the state
like so it’s basically going to extract
those two variables from the state I’ll
pass the duration in there and I think
this should work by now let’s go back
okay module not found can’t resolve blah
blah but see what’s the issue here can
act yes I can’t find countdown oh I
think I misspelled it sorry guys
countdown there’s it’s not two DS it’s
only one now to complete that moment is
not defined of course back and timer we
need to move moment now to index GS so
let’s put it in here woman GS
I think that should be fine anything
else we’re missing export default diner
was not found in timer ah ha I forgot to
export the constants so let’s do export
default timer
let’s remove that space and it should be
fine by now yep except components not is
defined but never used aha
I know what that is so we don’t need to
decompose ear because we have a
functional not a stateful component okay
like so controls is defined but never
used and that’s interesting
ah how come the controls are never used
oh okay wouldn’t need controls inside of
timer any more games I’m just going
above those yeah this is basically it I
think it’s it should be perfectly
functional let’s click on pause that
pauses the timer click on resume that
resumes the chatter okay so this is
pretty good so far so I think this was a
good refactoring and of course you could
argue whether the timer needs to have
state whether it needs to maintain its
own state you know checking what the
duration object needs to be with
calculating the difference being the two
days and I would probably say that
you’re right it’s it should probably be
the responsibility of the timer to
calculate those two dates but at this
point what I’m going to do is I’m going
to leave it off like that and I’m going
to keep all of the state inside of an
XJS and like I said it’s useful to have
the state be inside of in this chest use
first of all the timer is going to be
functional it’s gonna render a little
bit faster so that’s a plus the buttons
or the controls are also functional
that’s also a plus and all of our state
is now centralized inside of index yes
it’s just easier to manage it and
whatever new we need to fast it it’s
basically going to be passed as
properties to the functional components
that actually need it lastly the one
thing we could also do is we can also
use the es7 class properties syntax like
I show you for the methods so here we
use it just so that we have access to
the desk keyword because if you watch
the es6 series I explained in the
the video about arrow functions they are
the arrow functions unlike traditional
functions are going to use the function
keyword the arrow functions actually
allow you to preserve the this keyword
so the context under this keyword gets
saved or gets preserved unlike normal
functions because if you have a
traditional function you try to access
this keyword if it’s a method on an
object it’s going to refer to that
object but sometimes it might actually
refer to the window object or if it’s a
strict mode it might actually refer to
undefined so the value might be
undefined this is not the case with
arrow functions with arrow functions
this keyword gets preserved so that we
have access to the outlining object that
basically invoke the function in this
case this object is going to be the
component itself so this was just a bit
of a side note my point is we could
actually use the same syntax for the
state and instead of doing this state
instead of the constructor we could
actually move that outside so what I’m
talking about here is let’s set a state
property we’re basically going to set it
to the same object as we have in here
right and I’m going to remove the
constructor so this removes quite a bit
of code for us but it simplifies things
also so now we just have the state
property it’s going to have duration and
it’s going to have the pause property
and behind the scenes it’s actually
going to invoke the constructor for us
so we don’t have to write the extra code
to do that and calling in all the super
keyword and all that stuff we just set
the property like this with the es7
effects and I think it should still work
right we pause it stops resume continues
perfect so I think I’m going to stop
here in the next video what we’re gonna
do is I think I’m going to add a new
input box it’s going to be a date/time
picker and this is basically going to
allow us to explore how forms working
react and how you can actually bind
events to input and how you can listen
to events on inputs so a lot of cool
stuff I hope you stick around and I’ll see you next time
here so we have the code that says the
interval it’s basically the same as the
one that we have in component did melt
we also have clear interval and this is
basically repeated in component will and
melt I’m going to change that I’m going
to create two separate methods let’s
call one pause and let’s call the other
one resume okay so when you pause you
basically want to clear the interval
we’re gonna do exactly that okay we’re
gonna basically clear the interval
passing the interval property and
instead of doing the clear until all
inside of handle pause toggle I’m just
going to call the pause method on this
and this block of code that basically
creates an interval that’s going to be
put in resume and the resume function so
similarly we’re going to call that
method the ovoid repetition and of
course now that we have these two
methods we also don’t need to call clear
integral from component will unmount
we’re actually going to call this pause
okay the same thing goes for component
dead mount we’re actually going to call
this dot resume okay and let’s see if
this actually works so we’re gonna click
on pause and that’s gonna stop the timer
resume that’s kind of resume if you
update a page you can see that because
by default pause is false the timer is
active and it basically goes down so
just a bit of refactoring in there for
you let’s remove the comment for now
because we don’t need it let’s also move
the label or basically the text that
refers to the number below it so that
it’s gonna look something like this
the number is actually going to be on
the top and the label is going to be at
the bottom so we just get remove that
has nothing to do with the app it
doesn’t really affect the functionality
in any way shape or form but basically I
think it just looks a little bit better
so I’m just gonna do that
let’s put it below and four seconds I’m
going to do the exact same thing as you
can put it down there
save this is what it looks like another
smaller factoring thing I’d like to do
is if you go back to app GS let’s
suppose we moved to do the wrapping do
it’s essentially pretty much useless
here because it doesn’t do anything and
in the app component we basically are
just going to return the calm down
itself okay so we don’t need to wrap it
in anything and this is still linked to
work of course and while we’re at it
let’s also move the expressions to a
separate line just for a better
readability so I’m gonna just move them
on a separate line like so let’s do the
same for the title and also seconds okay
this is not going to affect the app in
any way again but it’s just for
readability so we’re in a good shape
right now we have a countdown component
this is a stateful component basically
contains all of a state and then it also
has a dependent controls component that
relates to that con down now you can see
that the controls are really not that
reusable so will be controls themselves
the only relates to the countdown timer
component in fact you can really reuse
them anywhere else because they only
makes sense within the context of the
canto so I’d like to in fact it’s a
little bit further let’s create a folder
let’s go it count down and let’s move
the two components in there okay so
we’re gonna have a separate folder that
represents the countdown timer and I’m
going to create a new file and I’m going
to call it in the SGS okay back in app
GS we are going to have our countdown we
moved to index GS instead of countdown
GS
I’m going to rename the import it going
to go to countdown and the reason I
created index.js file is because first
of all this component F GS is going to
look for count of Cheops it’s not going
to find the file but it’s going to find
a folder countdown it’s going to go
inside of that folder and because we
have indexed GS it’s basically going to
go to that file by default so we don’t
need to do slash index or index GSE
we could just leave it off it’s gonna go
to index by default we don’t need to do
anything else other than that now in
index what’s basically have all of the
countdown mark up inside of index chests
and then in countdown we’re basically
going to have just the timer but the
index itself is going to contain all the
state okay so let’s do the following
let’s do import react from react and the
very first thing we always need to do
let’s also import count down from
countdown on this note I will probably
we name countdown to just timer right
because this is what it’s going to be
it’s just going to be a timer and the
countdown is actually indexed yes this
is what the component is going to be so
now go ahead timer and we’re also gonna
need controls we’re at the buttons
controls from controls let’s create a
new class we’re gonna call it countdown
it’s gonna extend the component which we
also need to import along with the react
let’s do a component from react this is
going to be a class extends with an S I
forget that now let’s also do export
default let’s say that now in timer this
is no longer going to be come down this
is going to be tire okay and we’re
basically going to move most of this
markup to index.jsp okay so what I will
actually keep inside of here is only the
level I think so I’m going to remove
everything from the top to index yes and
we’re going to have a rather method okay
this is going to return that block
and then we’ll also let’s see we have a
section here this is the closing date
for the level I’m going to move this
stuff to index and then in here I will
basically put our timer I’ll close it
off and this is going to be adjusted in
fact this is going to go to that line
that this looks good now the other thing
I think I’ll do is i remove the
constructor from here
so i’d like to keep all the state inside
of the countdown component that state is
basically going to be passed to the
timer okay and i’m going to move all of
these methods and i’ll just basically
drop them in here in the next chest I’ll
say that and of course the timer now the
timer is going to expect duration as
well as paused this component no longer
needs to be stateful so I’m going to
make it functional let’s create a
constant called timer it’s going to be a
an error function that accepts
properties of props and it’s going to
return this block of code so it’s
basically going to return the level that
is going to contain basically all the
output that needs to be displayed
rendered right that’s also just a just a
little bit when you remove the render
method okay we don’t need any of this
stuff anymore because we don’t know
about how the class works and finally
this’ll bring to the same line you might
have seen a little bit of a difference
effects where you have parentheses so
you wrap you could wrap the day of birth
parentheses it still works without the
parentheses in most cases but you’re
just going to be careful with semicolons
and it specifically automatic semicolon
insertion it’s a little bit off topic so
I’ll just leave it off for now but here
we are going to need the duration object
back in and XJS when we call the timer
we need to pass oops we need to pass
duration
okay and the duration is basically going
to be this dot state dilation in fact
let’s do the following we’re going to
need to bring back the constants here
right so let’s do constant I’m going to
use the structuring again let’s do the
duration and let’s also do pause pauses
need for the buttons right so I will
just assign all the stuff to the state
like so it’s basically going to extract
those two variables from the state I’ll
pass the duration in there and I think
this should work by now let’s go back
okay module not found can’t resolve blah
blah but see what’s the issue here can
act yes I can’t find countdown oh I
think I misspelled it sorry guys
countdown there’s it’s not two DS it’s
only one now to complete that moment is
not defined of course back and timer we
need to move moment now to index GS so
let’s put it in here woman GS
I think that should be fine anything
else we’re missing export default diner
was not found in timer ah ha I forgot to
export the constants so let’s do export
default timer
let’s remove that space and it should be
fine by now yep except components not is
defined but never used aha
I know what that is so we don’t need to
decompose ear because we have a
functional not a stateful component okay
like so controls is defined but never
used and that’s interesting
ah how come the controls are never used
oh okay wouldn’t need controls inside of
timer any more games I’m just going
above those yeah this is basically it I
think it’s it should be perfectly
functional let’s click on pause that
pauses the timer click on resume that
resumes the chatter okay so this is
pretty good so far so I think this was a
good refactoring and of course you could
argue whether the timer needs to have
state whether it needs to maintain its
own state you know checking what the
duration object needs to be with
calculating the difference being the two
days and I would probably say that
you’re right it’s it should probably be
the responsibility of the timer to
calculate those two dates but at this
point what I’m going to do is I’m going
to leave it off like that and I’m going
to keep all of the state inside of an
XJS and like I said it’s useful to have
the state be inside of in this chest use
first of all the timer is going to be
functional it’s gonna render a little
bit faster so that’s a plus the buttons
or the controls are also functional
that’s also a plus and all of our state
is now centralized inside of index yes
it’s just easier to manage it and
whatever new we need to fast it it’s
basically going to be passed as
properties to the functional components
that actually need it lastly the one
thing we could also do is we can also
use the es7 class properties syntax like
I show you for the methods so here we
use it just so that we have access to
the desk keyword because if you watch
the es6 series I explained in the
the video about arrow functions they are
the arrow functions unlike traditional
functions are going to use the function
keyword the arrow functions actually
allow you to preserve the this keyword
so the context under this keyword gets
saved or gets preserved unlike normal
functions because if you have a
traditional function you try to access
this keyword if it’s a method on an
object it’s going to refer to that
object but sometimes it might actually
refer to the window object or if it’s a
strict mode it might actually refer to
undefined so the value might be
undefined this is not the case with
arrow functions with arrow functions
this keyword gets preserved so that we
have access to the outlining object that
basically invoke the function in this
case this object is going to be the
component itself so this was just a bit
of a side note my point is we could
actually use the same syntax for the
state and instead of doing this state
instead of the constructor we could
actually move that outside so what I’m
talking about here is let’s set a state
property we’re basically going to set it
to the same object as we have in here
right and I’m going to remove the
constructor so this removes quite a bit
of code for us but it simplifies things
also so now we just have the state
property it’s going to have duration and
it’s going to have the pause property
and behind the scenes it’s actually
going to invoke the constructor for us
so we don’t have to write the extra code
to do that and calling in all the super
keyword and all that stuff we just set
the property like this with the es7
effects and I think it should still work
right we pause it stops resume continues
perfect so I think I’m going to stop
here in the next video what we’re gonna
do is I think I’m going to add a new
input box it’s going to be a date/time
picker and this is basically going to
allow us to explore how forms working
react and how you can actually bind
events to input and how you can listen
to events on inputs so a lot of cool
stuff I hope you stick around and I’ll see you next time
Please follow and like us: