okay so in this case once we have that
point we want to be able to invoke some
kind of a method on the countdown
component right in this case I think
this is the perfect time to actually
refactor this component so I’m just
gonna save the date picker for now and
like I said because we allow the user to
type a custom date we would need to
refactor the application to account for
that for now we’re just calculating the
difference between now as well as a new
year meaning the date in the future
basically January 1st and this gives
2019 right you basically add one to the
current year and then you calculate the
difference we want to be able to provide
a custom date and because of that we
need to change some of the code here
one thing I’ll do is instead of having
durational in the state let’s actually
do the following we’ll have a current
date on the state and by default this is
going to be the value of now when you
call moment like that without any
parameters it’s basically going to
default to the date and time of now a
current time and date okay this is going
to be the current date we’re also going
to have next date now
next date by default because when the
application melts or when the
application is created we want to have a
default value for that next date the
default value like you see here is going
to be a new year so I’m just gonna copy
over that object and we don’t have any
now variables I’m just gonna create a
new moment instance again it’s going to
be the date of now we’re gonna fetch the
year add one to it and we’re still going
to have the pause properly okay next
whenever we update this state instead of
updating the duration so for example
here in the resume function we actually
want to update the value of current date
okay this is how the component is going
to be updated every second so what’s
that day – the new value of moment okay
this is going to return the present date
on every tick on every second at a
function or the interval we invokes
itself okay so let’s say that
and let’s see what else needs to change
so back in the constructor here we use
the observation on the state we’re now
going to have duration as a separate
label let’s have generation equals I’m
gonna call this get remaining time and
we need to refactor the method also so
for now let’s do we’re gonna have
destructuring here again we’re gonna
have current date we also can have next
date okay we’re gonna get them from the
state and we’re also going to calculate
the difference between the two
and this is going to be the difference
between the next state as well as
current dates okay invited for current
date would be basically now the value of
now we can kill the old code and I think
this should still work let’s look for
set state calls here we have quite a few
of them we have one that sets the
current date we have one that sets be
paused and that’s the only one besides
the other one that we have here so I’m
going to leave it off like that let’s go
back to the app and the timer’s still
functional but the difference is that
now it’s actually going to rely on two
dates and on every single a render it’s
going to recalculate the duration now
the way this works is basically every
single second we’re going to update the
value of the current date probably on
the state and this is going to be the
current date at that moment when the
function we execute because of the
interval okay next for the date picker
let’s also provide a new attribute here
so we’re gonna have an event and
basically whatever a new date is
submitted so on date submit or let’s do
maybe on date reset whenever that event
is triggered we wants to call a local
method that we’re gonna create let’s
call that method handle date we said
this is basically going to reset the
timer and the countdown timer but we
need to add that function also and I
also foresee that we’re gonna need to
use the iseven class property subjects
because of the reference to
this key okay this function is also
going to receive the new date but for
now let’s just do console.log we are
here just to make sure that this
actually works and this property will be
passed to the date picker we are going
to be able to have access to it through
the properties so what I’m gonna do here
is we have handle date submit this is
going to fly whenever you click the
button the form gets submitted so we’re
just going to call this props and that
method on date we set and we are going
to pass this date to it okay so let’s
save that for that way we did quite a
few changes so let’s see I enter the
date of tomorrow 21st I do reset and we
get and we are here next let’s actually
accept that argument so we’re gonna have
a new date okay this is going to be the
value of next data actually this is
going to be the next date then we’re
gonna update on the state right this is
gonna update it properly in the state
but for now let’s just cancel out that
value next date okay what’s that 2018 Oh
9:15 that’s my birthday and uh let’s see
undefined ah we forgot to add the state
of course it’s not the state it’s this
state date the date on the state okay
let’s try again 1809 15 enter we get the
date now this state that you see where
there is actually not an object if I
were to set that value to the state on
the next date it’s going to be a string
and the calculation of the remaining
time is going to fail because it
actually expect an object that is
basically compatible with moments
because we need to call the difference
on it so it needs to be an object of the
type date or actually the native object
at the moment library provides a day so
we need to convert that to a moment we
need to grab the to the moment one way
to do it of course is we could do
inside of here so you could call moment
on that string and it’s going to convert
it to a moment incidence but I think
what I’m going to do is I’m actually
going to do that inside of the date
picker so that the countdown component
actually receives a problem the proper
value array so it doesn’t have to do
with that conversion by itself that’s
important moment from moment and next
here so we have a state what let’s go
moment on it okay again when you wrap
that string of date because it’s just
simply a string by default it’s an empty
string when you type to it it’s still a
string it looks like a date it’s
actually a strength it’s not an object
but when we call moment on it that’s
actually going to wrap it and create an
instance of the moment object okay and
when we actually console.log that value
it’s gonna make a lot more sense so
let’s do that
let’s save it again let’s type something
out 12 we get an instance of a moment
class or a moment moment object that the
moment library provides so once we get
that instance we’re gonna be able to
actually update the state so I’m gonna
call set state and I’m going to pass
next date now because of the es6
shorthand property syntax before you
would do something like this you would
have next day to call on next date but
we don’t need to do that with via 6
anymore the Shred syntax will look
something like next stage just the value
of next date by itself and the last
thing is I’ll remove the parentheses
here because they’re optional whenever
you have a single argument so it could
also kill them and the same thing goes
here so we have the event object we
could just kill the parentheses just for
gravity and if you go back to the
browser if I type something let’s do
only 9:15 I click Submit and as you can
see here it already updates the value of
the timer so we’re now calculating a
completely different value in there if I
were to do it say
12:15 a.m. if I click reset as you can
see it’s going to update the minutes or
so sorry to do it yeah it’s going to
update the hours you see now we get a
warning here we can just ignore it for
now but as you can see it’s basically
relying on the default conversion
mechanism that’s built into moment so
again just to reiterate what we’re doing
here is we are typing something to an
input right let’s actually format this
just a little bit so that’s more visible
clearer to heed okay so we have an input
here and we also have a button and this
is inside of a form whenever you drive
to a an input it’s going to update the
state with a value that you tech so it’s
going to store that value inside of the
date probably on the state whenever you
click on the button right it’s going to
submit the form by itself this is just
how forms work in HTML if you don’t have
the type attribute on the button did the
fault will be the submit type whenever
you click on that button it’s going to
submit the form now whenever we submit
the form we also intercept that event we
have an on submit handler here and we
call a method that basically prevents
the default it’s going to prevent the
page refresh and it’s going to call on
date reset from the parent object from
the parent component excuse me
and we’re going to pass a object and
moment object we basically wrap the date
string with a moment object we pass that
object to the parent the parent is going
to receive that object and it’s going to
update this state once the set state
method executes it updates the next
state property on the state the state
changes the component also we renders
and when the component re-renders it’s
going to update the duration the
calculation would be updated we’re going
to calculate the difference between now
as well as the next date by default it’s
new year but if you provide something
custom it’s going to be that date
completely different calculate duration
you get the duration object and then you
pass it to the timer and the timer
basically updates everything in the Dom as well
point we want to be able to invoke some
kind of a method on the countdown
component right in this case I think
this is the perfect time to actually
refactor this component so I’m just
gonna save the date picker for now and
like I said because we allow the user to
type a custom date we would need to
refactor the application to account for
that for now we’re just calculating the
difference between now as well as a new
year meaning the date in the future
basically January 1st and this gives
2019 right you basically add one to the
current year and then you calculate the
difference we want to be able to provide
a custom date and because of that we
need to change some of the code here
one thing I’ll do is instead of having
durational in the state let’s actually
do the following we’ll have a current
date on the state and by default this is
going to be the value of now when you
call moment like that without any
parameters it’s basically going to
default to the date and time of now a
current time and date okay this is going
to be the current date we’re also going
to have next date now
next date by default because when the
application melts or when the
application is created we want to have a
default value for that next date the
default value like you see here is going
to be a new year so I’m just gonna copy
over that object and we don’t have any
now variables I’m just gonna create a
new moment instance again it’s going to
be the date of now we’re gonna fetch the
year add one to it and we’re still going
to have the pause properly okay next
whenever we update this state instead of
updating the duration so for example
here in the resume function we actually
want to update the value of current date
okay this is how the component is going
to be updated every second so what’s
that day – the new value of moment okay
this is going to return the present date
on every tick on every second at a
function or the interval we invokes
itself okay so let’s say that
and let’s see what else needs to change
so back in the constructor here we use
the observation on the state we’re now
going to have duration as a separate
label let’s have generation equals I’m
gonna call this get remaining time and
we need to refactor the method also so
for now let’s do we’re gonna have
destructuring here again we’re gonna
have current date we also can have next
date okay we’re gonna get them from the
state and we’re also going to calculate
the difference between the two
and this is going to be the difference
between the next state as well as
current dates okay invited for current
date would be basically now the value of
now we can kill the old code and I think
this should still work let’s look for
set state calls here we have quite a few
of them we have one that sets the
current date we have one that sets be
paused and that’s the only one besides
the other one that we have here so I’m
going to leave it off like that let’s go
back to the app and the timer’s still
functional but the difference is that
now it’s actually going to rely on two
dates and on every single a render it’s
going to recalculate the duration now
the way this works is basically every
single second we’re going to update the
value of the current date probably on
the state and this is going to be the
current date at that moment when the
function we execute because of the
interval okay next for the date picker
let’s also provide a new attribute here
so we’re gonna have an event and
basically whatever a new date is
submitted so on date submit or let’s do
maybe on date reset whenever that event
is triggered we wants to call a local
method that we’re gonna create let’s
call that method handle date we said
this is basically going to reset the
timer and the countdown timer but we
need to add that function also and I
also foresee that we’re gonna need to
use the iseven class property subjects
because of the reference to
this key okay this function is also
going to receive the new date but for
now let’s just do console.log we are
here just to make sure that this
actually works and this property will be
passed to the date picker we are going
to be able to have access to it through
the properties so what I’m gonna do here
is we have handle date submit this is
going to fly whenever you click the
button the form gets submitted so we’re
just going to call this props and that
method on date we set and we are going
to pass this date to it okay so let’s
save that for that way we did quite a
few changes so let’s see I enter the
date of tomorrow 21st I do reset and we
get and we are here next let’s actually
accept that argument so we’re gonna have
a new date okay this is going to be the
value of next data actually this is
going to be the next date then we’re
gonna update on the state right this is
gonna update it properly in the state
but for now let’s just cancel out that
value next date okay what’s that 2018 Oh
9:15 that’s my birthday and uh let’s see
undefined ah we forgot to add the state
of course it’s not the state it’s this
state date the date on the state okay
let’s try again 1809 15 enter we get the
date now this state that you see where
there is actually not an object if I
were to set that value to the state on
the next date it’s going to be a string
and the calculation of the remaining
time is going to fail because it
actually expect an object that is
basically compatible with moments
because we need to call the difference
on it so it needs to be an object of the
type date or actually the native object
at the moment library provides a day so
we need to convert that to a moment we
need to grab the to the moment one way
to do it of course is we could do
inside of here so you could call moment
on that string and it’s going to convert
it to a moment incidence but I think
what I’m going to do is I’m actually
going to do that inside of the date
picker so that the countdown component
actually receives a problem the proper
value array so it doesn’t have to do
with that conversion by itself that’s
important moment from moment and next
here so we have a state what let’s go
moment on it okay again when you wrap
that string of date because it’s just
simply a string by default it’s an empty
string when you type to it it’s still a
string it looks like a date it’s
actually a strength it’s not an object
but when we call moment on it that’s
actually going to wrap it and create an
instance of the moment object okay and
when we actually console.log that value
it’s gonna make a lot more sense so
let’s do that
let’s save it again let’s type something
out 12 we get an instance of a moment
class or a moment moment object that the
moment library provides so once we get
that instance we’re gonna be able to
actually update the state so I’m gonna
call set state and I’m going to pass
next date now because of the es6
shorthand property syntax before you
would do something like this you would
have next day to call on next date but
we don’t need to do that with via 6
anymore the Shred syntax will look
something like next stage just the value
of next date by itself and the last
thing is I’ll remove the parentheses
here because they’re optional whenever
you have a single argument so it could
also kill them and the same thing goes
here so we have the event object we
could just kill the parentheses just for
gravity and if you go back to the
browser if I type something let’s do
only 9:15 I click Submit and as you can
see here it already updates the value of
the timer so we’re now calculating a
completely different value in there if I
were to do it say
12:15 a.m. if I click reset as you can
see it’s going to update the minutes or
so sorry to do it yeah it’s going to
update the hours you see now we get a
warning here we can just ignore it for
now but as you can see it’s basically
relying on the default conversion
mechanism that’s built into moment so
again just to reiterate what we’re doing
here is we are typing something to an
input right let’s actually format this
just a little bit so that’s more visible
clearer to heed okay so we have an input
here and we also have a button and this
is inside of a form whenever you drive
to a an input it’s going to update the
state with a value that you tech so it’s
going to store that value inside of the
date probably on the state whenever you
click on the button right it’s going to
submit the form by itself this is just
how forms work in HTML if you don’t have
the type attribute on the button did the
fault will be the submit type whenever
you click on that button it’s going to
submit the form now whenever we submit
the form we also intercept that event we
have an on submit handler here and we
call a method that basically prevents
the default it’s going to prevent the
page refresh and it’s going to call on
date reset from the parent object from
the parent component excuse me
and we’re going to pass a object and
moment object we basically wrap the date
string with a moment object we pass that
object to the parent the parent is going
to receive that object and it’s going to
update this state once the set state
method executes it updates the next
state property on the state the state
changes the component also we renders
and when the component re-renders it’s
going to update the duration the
calculation would be updated we’re going
to calculate the difference between now
as well as the next date by default it’s
new year but if you provide something
custom it’s going to be that date
completely different calculate duration
you get the duration object and then you
pass it to the timer and the timer
basically updates everything in the Dom as well
Please follow and like us: