I guess in this final video like us to
apply some of the last-minute
optimizations and fixes to the
application so I have the application
going on localhost port 3 8000 let’s get
back to the editor and we’re going to
begin with the app component so do you
show you a bit of a different form for
exporting functions from a module and if
you’ve seen the video in my ear 6 series
you should already know that it’s
possible to export default and anonymous
function so in this case we don’t need
to have any app constant to hold the
function itself we can just return the
function as is from the module and we’re
gonna do that with the default keyword
and I’m also going to remove the
parentheses around properties because we
only have one argument the props object
to the function and that’s where the
parentheses are completely optional that
we don’t need to include them so let’s
save the file let’s see if the
application still works well it’s just
fine
and what I’m gonna do is I’m just gonna
go through every single file one by one
and we’re gonna see if we can find
places where we can make positive
changes so what’s next go to controls
component and one thing we can do
already is to use the same format for
exporting the poll functions without
actually needing to create any constants
and hold the function references let’s
save that now the next thing you can see
here is that the paragraph and the
button are served duplicated for each of
the controls so that’s a good indication
that we will create a separate component
let’s go ahead and control it’s going to
be a function that accepts the props and
returns some GSX
let’s return the same markup that’s
going to be a paragraph with a button
and as you can see here we need to
accept the disabled property first of
all so as to structure it from the props
object that’s going to be passed to the
control component then we also need to
have the on click and learn so I’m just
instead of having on pasto I’m just
going to go it on click so this on quick
is the built-in method on the button so
every button
react or GSS has this special on-click
property or event and then we pass the
on click method that’s going to fire
whenever the button is clicked and the
last thing you can see here that the
list of classes is pretty much identical
for both of the buttons you can make the
classes dynamic by passing the class’s
property but because we’re only going to
use the control component inside of
controls it makes sense to just simply
pass the color of the button so it’s
either going to be danger or success so
I’m going to keep the same list of
classes except I’m going to change the
string to an actual GSX expression let’s
also use single quotes that’s what I
prefer to use and then we’re just going
to remove the is danger class okay so
these four classes are going to be the
same regardless of the color of the
button
but then the color itself is going to be
passed as the property to the control so
I’m going to pass the color property
it’s gonna be part of the props object
and we’re just simply going to append it
to the string so for instance if you
pass danger
the class is going to become as danger
and the same for success it’s going to
be is success and that’s how the button
is going to be styled next let’s also
change the past variable to disabled
because that’s the name of the property
that we’re going to pass and this is
what the component is going to look like
and then next let’s also remove these
other paragraphs and instead have two
controls okay
so we’re gonna have to control elements
let’s put the other one just below it
and then we obviously need to pass the
disabled attribute we also need to pass
the color right that’s going to be a
string and then we need to pass the on
click handler all right and for the
onclick it’s going to be the same
function right we receive it as the
props too
controls component on pasta then for the
first one we’re going to have a color
and it’s going to be danger right the
first button is going to be this danger
the second one is going to be success
now for this disabled attribute we
already have the logic in place so I’m
just gonna copy that the first one needs
to be disabled when pause this true the
second one would need to be disabled to
my pause is actually false okay and
that’s how this expression would become
true and then the button would be
disabled now for the actual text let’s
also do the following so in react if you
wanted to pass some kind of text inside
B component and you wanted to render
that text inside of a component give you
the special children property just like
the key property when you are working
with the lists for example in holding
Smule we’re using the key property we’re
not actually defining it ourselves it’s
a property that’s built into a yet and
the same goes for children property so
let’s also accept that property in the
props object the structure it and then
we’re gonna just pass the chosen
property and in this case in the first
control we’re going to pass a pause text
so this is going to be the text of the
button this text is going to be injected
right over here for our children and of
course this this pause text that does
not necessarily has to be a string or a
text for sake it also be some kind of
JSX
or you can have some kind of a tree in
there you could also put HTML or just
sex elements inside of it but in this
case I’m just gonna keep it as pause
just as a text and for the second
control I’m gonna do the exact same
thing so let’s close it off first of all
and of course we could also pass the
text as a property so you could do
something like this you could do let’s
say text equals pause and then we could
also track that text property right in
there look it just simply display the
text inside of the GSX expression for
the button but i’m just gonna use the
children property because it’s a built
in property
but just keep in mind that you could
also have your own property if you wish
to and then we just could have the
resume text for the second button and I
think that’s pretty much it we can we
move the two paragraphs that we use now
before the duplicated paragraphs and
let’s go back to the browser and it
seems to work fine so let’s just click
on pause the suppose to pause the timer
when you click resume it’s going to
resume the timer so we preserve the same
functionality as we have before let’s
move on to the date picker now and the
one thing we also do here is we have a
class-based component in this case we
are exporting a default class that has a
name but in this scenario the name of
the class is completely optional we
could just export an anonymous class so
this class would not have any name and
this example it would just be an
anonymous class which is just fine it’s
going to work the exact same way and
let’s also adjust the styling or
annotation here just a little bit so it
looks neater like that okay I think that
looks a little bit better I don’t see if
we could change anything else in here so
let’s move on to holidays model in this
scenario we are already exporting a
default anonymous function the one thing
that we could do in this case though is
let’s just copy this div over here I’m
going to show you a small trick so
instead of appending the class with a
try or expression we could also use the
backticks which denotes the template
string that’s been added in es6 so the
one thing we can have here is let’s say
the model class is always going to be
present on the string but then the
second part of the string is actually
going to be conditional so we’re still
going to have the ternary expression
it’s just going to look a little bit
different so the turnery is if the
active property is true then we want to
pass is active with a space just like
before and then we have a call line
otherwise we don’t want to pass anything
okay so it’s pretty much the same as
before but I think it might be a little
bit more readable and it’s in fact one
character or two characters shorter so
let’s say that and let’s check that it
actually works and as you can see here
we can open up the holidays model and we
can also close it everything works just
as before let’s close all of the other
files and let’s move on to index J s I’m
going to remove the class thing here
we’re going to rely on an anonymous
class next in set state over here we’re
accepting the previous state but we only
actually need the pause property in that
state so I’m just going to extract it
using the structuring so we’re going to
be passed property and then we have to
remove the constant keyword because that
property is already initialized we’re
just going to reset it to the opposite
of its value because we need to negate
it and back in the browser if you click
on pause the timer is passed resume it
resumes but I can see a bit of a defect
or a bit of an issue that we can
actually improve so I’m going to show
you again let’s say we click on pause
obviously that stops the timer but
observe the following if you click on
the resume button there’s a bit of a
delay before the timer actually goes
back to execution in order to make the
timer execute immediately we can update
the current date property on the state
in the mean time but we only want to do
that if the past property is not true so
if not positive then we can also set in
the current date property to a new
moment object in this case I’m going to
create a constant that’s gonna be new or
actually let’s call it next state it’s
gonna have a pause property of course
because that’s what we need to return
from this function anonymous function
that would pass over here and then if
this condition is true so if you need to
resume the timer in this case I’m just
gonna say next
state and let’s set the current date to
a new
object okay and we’re just simply gonna
return next state okay let’s say that
let’s go back to the browser so now if
you click on pause that’s gonna stop the
timer but if you click on resume that
can resume the timer immediately so we
were calling the resume function but the
resume function was actually setting up
the new interval that role was going to
execute only after the one-second delay
right because that’s the value that we
pass to the control but now because we
update this state immediately we set the
new value on the current date property
in the state that value is going to be
updated and then after one second
the timer is actually going to start so
that’s how that works
lastly if we go down over here the one
thing I’ll do with the button here the
button that opens the holidays model is
I’m gonna add is outlined class just for
the styling purposes so we go back you
can see that it’s going to be outlined
and finally let’s also add a section
it’s going to have a class named section
and let’s just put a small paragraph
here so I’m gonna have an attack what’s
gonna make the text indented and let’s
just simply output the current date over
here so that the user of our application
knows against which current date the
timer operates so for instance right now
we are February 10th Saturday February
tip and it’s 10:45 a.m. so when I output
something like that over here in a per
graph just below the controls so I’m
going to need to have access to the
current date and we can call the format
function on it or the method and of
course we’re going to need to extract
that value from the state so let’s get
it just along within the next date and
the format function is going to accept a
string now if we go to the moment j/s
documentation
and if you go to the docks let’s also go
to parse then here shrink what format in
that section you can see that yeah
couple of tables that explain how the
formatting works the first thing I’m
going to do is I’m going to use the
format for days the quadruple D’s here
will denotes full name of the day of the
week so for example Monday or Sunday
that’s the first thing that we’re gonna
use
we’re then we’re gonna put a comma next
we’re also going to have a month so the
quadruple M capitalized is going to
denote the month so for example December
January that so let’s copy that let’s
face it over here next for the date I’m
actually going to use capital D oh
that’s going to denote the day of the
month with ordinal so for example 1st
2nd 3rd that’s the next form and I’m
going to use so let’s put it here oh
it’s also put a comma and next I’m going
to put the year so or why isn’t if you
go back they denote the year so it’s
going to be four digits and let’s also
have a time zone so let’s scroll down a
little bit
the single Z is going to give us for
instance minus 5 so I live in Montreal
minus 5 would be Eastern Standard Time
or ESD so let’s just put it here in
parentheses let’s say that back in the
application here that’s what it’s going
to look like the one thing though is I’m
also going to put UTC just in front of
it and the UTC is not actually a format
of any sorts it’s just simply a string
that’s going to be present no matter
what the back in the application that’s
what it’s going to look like you have
your UTC and then in that time zone so
in this case minus 5 now if you go to
display and format subsection you’re
gonna see that there’s actually a bunch
of localized formats so we can have a
localized format that looks something
like this so for instance Thursday
September 4th 1986 and then that date so
we could just simply use that format
instead we could pretty much replace
everything that we have before and it’s
not going to look the exact same way but
it’s going to be pretty close to that
and it’s just a shorter form so at this
point it’s pretty much up to you but I
think I’m gonna
stick to the previous one someone that
we were back to whatever we had before
him and I think it just looks a little
bit near and of course in this case you
could also include the time so let’s go
back to the docks and let’s see if we
can find a section for time so here’s a
section for weeks and with days we also
have a section for time so we can have
hours we can also have minutes and
seconds and we can also say whether it’s
a.m. or p.m. so it’s with hours minutes
and let’s also have a space and then the
last one is going to be a.m. or p.m. and
I’m just going to put a comma after the
year like so let’s say that yeah I think
it looks pretty pretty neat at this
point so finally let’s move on to the
timer component now we’re here you can
already see a bit of duplication again
so this dev is sort of like duplicated
across the timer component four times
and the only thing that actually changes
is the contents of that diff so for
instance the title as well as the
heading so I think this is a good place
to actually create a separate employment
I’m going to create a component here
let’s call it timer item we’re going to
see the props in return JSX
and just to clarify the timer item is
basically the item that you see over
here so for instance if you open up the
dev tools you can see that we have devs
over here and we have four of them one
for each segment of time right so for
instance days we have also hours minutes
and seconds and that’s going to be the
timer item component that we’re just
going to create in a couple of seconds
so back in here they all are going to
have the same exact format it’s just
going to be a couple of divs with a
nested paragraphs and let’s say we’re
going to accept a count so that’s going
to be a count of days hours minutes or
seconds we’re also going to accept a
label and we’re going to output that
label as an expression so the properties
over here would need to include like I
said account as well as the label
pass them down in there and now we’re
going to have four of those elements so
let’s have them like this that’s
duplicated
four times now all of them of course
like I said are going to need to include
the count it’s going to be an expression
and lastly the label and the label is
going to be a shrink so we could just
keep it as a string the first one is
going to be this one
okay so we’re basically pouring down the
number of days any of these string is
going to be days okay under the same
thing for the rest of them that’s just
cuts and bass
be careful not to duplicate Ecola braces
okay this one same thing let’s put it in
there
finally for seconds I’m just gonna cut
it and paste and then here we have hours
I think the next one is going to be
minutes and of course as you might
expect
without much surprise the last night’s
going to be seconds now I’m just going
to indent them a little bit so let’s put
them on separate lines
let’s also fix the labels like so that’s
gonna look a little bit better okay and
then I think we can just remove the
mark-up down there and if we save that
let’s go back to the browser there’s no
errors so far and as you can see the
timer works just fine let’s add a date
so let’s say first 20 22 basically two
years from now on no timer works just
fine okay now of course the timer item
could be a component on its own meaning
that you can actually export it to a
separate module and that’s actually a
good thing when you are working in a
setup that uses webpack you should be
afraid to use as many files or modules
as you wish to because that’s actually
going to make your app simpler to use
and maintain because princess hotel
this component needs to be changed at
some point in future so let’s say you
want to complicate the mark-up add more
elements to it and before you know the
file is just simply going to roll so in
this example I think it does make sense
to explore time or item to a separate
module or file in fact for that reason
I’m going to create a timer folder let’s
create index GS inside of it okay and
let’s remove all of this markup from
timer GS to index.js file over here and
let’s just remove the timer file
altogether let’s delete it what we do
need to do here is we actually need to
restart the server and wait for the
changes to be applied so let’s see if
that works now so it seems to work
nothing change really the reason it
works is that whenever you include the
timer component so for instance in index
yes include the timer well it’s gonna
look for the timer GS file it’s not
gonna be able to find it
but it’s quite to see the timer folder
and because we need the component in x
GS it’s actually going to look for that
index first it’s gonna find it and it’s
going to import it inside of the
countdown component like this and that’s
why this import actually works and
that’s because we call the file index GS
and in here in time where we can
actually create another subfolder
eliptical a timer item you could also
call it timer GS by the way but I’m
going to create a subfolder this might
be useful if for instance you might also
have extra Styles they’re only pertinent
to the timer item component that’s why
it might be useful to have a separate
folder for a timer item and then we’re
going to extract the timer item put it
to the timer item component or module
actually we’re gonna need to import
react from react because we’re using GS
x here and don’t forget that this syntax
is actually JavaScript it’s going to be
converted to react dot create elements
calls because we’re using bubble and we
can just simply explore default
this anonymous function over here let’s
save the file and then finally we need
to import timer item from timer item
okay back in the browser everything
seems to work just fine but now the
tiber item component has been extracted
to a separate file so if you need to
make any changes whatsoever the
structure all the files and folders is
now a bit more complicated but it’s
actually easier for us to manage because
everything is separated by concern it
makes sense to keep the timer item in a
separate module because well this module
is dedicated for a timer item and this
one is dedicated for the timer itself so
the components are sort of like
separated in different files and in the
long run it’s only going to benefit you
because it’s going to be easier to
manage the vilest and on that same note
we’re gonna do the same exact thing for
control component so the first thing
I’ll do is I’ll create a controls over
there for the controls I’m gonna create
index GS file and I’m going to extract
first of all all this logic from
controls to the index GS under the
controls folder let’s delete the
controls file let’s also create a folder
called control so the control is going
to be a folder for the control component
but it’s actually going to be index.js
file and what we want to do here is we
want to extract the controller here the
control is going to be imported just as
before so we’re getting port control
from control now the reason I use index
GS like I said previously is because I
don’t want to have this sort of import
that has control / control and this
would actually work if we called the
file instead of index she has control GS
but in order to avoid that duplication I
just simply call them index that’s how
it’s going to work so in this case we
will have the control of course just
like before we need to import react from
react there’s not much we can do about
that we still need to import react
and finally we’re going to export
default anonymous function like that and
I can here we were to control with the
import statement and then we use the
control inside of the mark-up over there
next we need to restart the server so
let’s run a TM start again okay
and as you expect everything works fine
like before so I think this was a good
refactor for the application I think I’m
going to stop here so this was the last
and final video for the yak series so
just to give you an idea as to where the
channel is going we’re going to explore
the material UI framework we’re gonna
look at firebase we’re probably going to
cover GSS and CSS module loading things
of that nature
basically styling as far as react goes
in the nearest future and we’re also
going to build a lot of different
applications and beside that of course
we’re going to focus on JavaScript is
Jimmy new videos about JavaScript all
that good stuff is coming it’s already
on the way so stay tuned if you like the
channel make sure to subscribe leave
your comments down below if you do find
something weird about the application or
you have suggestions or any type of
feedback just leave it just make sure to
leave it down below and let me know and
with that I’m going to close off the
series so thanks a lot for watching and I’m gonna see you next time bye bye
apply some of the last-minute
optimizations and fixes to the
application so I have the application
going on localhost port 3 8000 let’s get
back to the editor and we’re going to
begin with the app component so do you
show you a bit of a different form for
exporting functions from a module and if
you’ve seen the video in my ear 6 series
you should already know that it’s
possible to export default and anonymous
function so in this case we don’t need
to have any app constant to hold the
function itself we can just return the
function as is from the module and we’re
gonna do that with the default keyword
and I’m also going to remove the
parentheses around properties because we
only have one argument the props object
to the function and that’s where the
parentheses are completely optional that
we don’t need to include them so let’s
save the file let’s see if the
application still works well it’s just
fine
and what I’m gonna do is I’m just gonna
go through every single file one by one
and we’re gonna see if we can find
places where we can make positive
changes so what’s next go to controls
component and one thing we can do
already is to use the same format for
exporting the poll functions without
actually needing to create any constants
and hold the function references let’s
save that now the next thing you can see
here is that the paragraph and the
button are served duplicated for each of
the controls so that’s a good indication
that we will create a separate component
let’s go ahead and control it’s going to
be a function that accepts the props and
returns some GSX
let’s return the same markup that’s
going to be a paragraph with a button
and as you can see here we need to
accept the disabled property first of
all so as to structure it from the props
object that’s going to be passed to the
control component then we also need to
have the on click and learn so I’m just
instead of having on pasto I’m just
going to go it on click so this on quick
is the built-in method on the button so
every button
react or GSS has this special on-click
property or event and then we pass the
on click method that’s going to fire
whenever the button is clicked and the
last thing you can see here that the
list of classes is pretty much identical
for both of the buttons you can make the
classes dynamic by passing the class’s
property but because we’re only going to
use the control component inside of
controls it makes sense to just simply
pass the color of the button so it’s
either going to be danger or success so
I’m going to keep the same list of
classes except I’m going to change the
string to an actual GSX expression let’s
also use single quotes that’s what I
prefer to use and then we’re just going
to remove the is danger class okay so
these four classes are going to be the
same regardless of the color of the
button
but then the color itself is going to be
passed as the property to the control so
I’m going to pass the color property
it’s gonna be part of the props object
and we’re just simply going to append it
to the string so for instance if you
pass danger
the class is going to become as danger
and the same for success it’s going to
be is success and that’s how the button
is going to be styled next let’s also
change the past variable to disabled
because that’s the name of the property
that we’re going to pass and this is
what the component is going to look like
and then next let’s also remove these
other paragraphs and instead have two
controls okay
so we’re gonna have to control elements
let’s put the other one just below it
and then we obviously need to pass the
disabled attribute we also need to pass
the color right that’s going to be a
string and then we need to pass the on
click handler all right and for the
onclick it’s going to be the same
function right we receive it as the
props too
controls component on pasta then for the
first one we’re going to have a color
and it’s going to be danger right the
first button is going to be this danger
the second one is going to be success
now for this disabled attribute we
already have the logic in place so I’m
just gonna copy that the first one needs
to be disabled when pause this true the
second one would need to be disabled to
my pause is actually false okay and
that’s how this expression would become
true and then the button would be
disabled now for the actual text let’s
also do the following so in react if you
wanted to pass some kind of text inside
B component and you wanted to render
that text inside of a component give you
the special children property just like
the key property when you are working
with the lists for example in holding
Smule we’re using the key property we’re
not actually defining it ourselves it’s
a property that’s built into a yet and
the same goes for children property so
let’s also accept that property in the
props object the structure it and then
we’re gonna just pass the chosen
property and in this case in the first
control we’re going to pass a pause text
so this is going to be the text of the
button this text is going to be injected
right over here for our children and of
course this this pause text that does
not necessarily has to be a string or a
text for sake it also be some kind of
JSX
or you can have some kind of a tree in
there you could also put HTML or just
sex elements inside of it but in this
case I’m just gonna keep it as pause
just as a text and for the second
control I’m gonna do the exact same
thing so let’s close it off first of all
and of course we could also pass the
text as a property so you could do
something like this you could do let’s
say text equals pause and then we could
also track that text property right in
there look it just simply display the
text inside of the GSX expression for
the button but i’m just gonna use the
children property because it’s a built
in property
but just keep in mind that you could
also have your own property if you wish
to and then we just could have the
resume text for the second button and I
think that’s pretty much it we can we
move the two paragraphs that we use now
before the duplicated paragraphs and
let’s go back to the browser and it
seems to work fine so let’s just click
on pause the suppose to pause the timer
when you click resume it’s going to
resume the timer so we preserve the same
functionality as we have before let’s
move on to the date picker now and the
one thing we also do here is we have a
class-based component in this case we
are exporting a default class that has a
name but in this scenario the name of
the class is completely optional we
could just export an anonymous class so
this class would not have any name and
this example it would just be an
anonymous class which is just fine it’s
going to work the exact same way and
let’s also adjust the styling or
annotation here just a little bit so it
looks neater like that okay I think that
looks a little bit better I don’t see if
we could change anything else in here so
let’s move on to holidays model in this
scenario we are already exporting a
default anonymous function the one thing
that we could do in this case though is
let’s just copy this div over here I’m
going to show you a small trick so
instead of appending the class with a
try or expression we could also use the
backticks which denotes the template
string that’s been added in es6 so the
one thing we can have here is let’s say
the model class is always going to be
present on the string but then the
second part of the string is actually
going to be conditional so we’re still
going to have the ternary expression
it’s just going to look a little bit
different so the turnery is if the
active property is true then we want to
pass is active with a space just like
before and then we have a call line
otherwise we don’t want to pass anything
okay so it’s pretty much the same as
before but I think it might be a little
bit more readable and it’s in fact one
character or two characters shorter so
let’s say that and let’s check that it
actually works and as you can see here
we can open up the holidays model and we
can also close it everything works just
as before let’s close all of the other
files and let’s move on to index J s I’m
going to remove the class thing here
we’re going to rely on an anonymous
class next in set state over here we’re
accepting the previous state but we only
actually need the pause property in that
state so I’m just going to extract it
using the structuring so we’re going to
be passed property and then we have to
remove the constant keyword because that
property is already initialized we’re
just going to reset it to the opposite
of its value because we need to negate
it and back in the browser if you click
on pause the timer is passed resume it
resumes but I can see a bit of a defect
or a bit of an issue that we can
actually improve so I’m going to show
you again let’s say we click on pause
obviously that stops the timer but
observe the following if you click on
the resume button there’s a bit of a
delay before the timer actually goes
back to execution in order to make the
timer execute immediately we can update
the current date property on the state
in the mean time but we only want to do
that if the past property is not true so
if not positive then we can also set in
the current date property to a new
moment object in this case I’m going to
create a constant that’s gonna be new or
actually let’s call it next state it’s
gonna have a pause property of course
because that’s what we need to return
from this function anonymous function
that would pass over here and then if
this condition is true so if you need to
resume the timer in this case I’m just
gonna say next
state and let’s set the current date to
a new
object okay and we’re just simply gonna
return next state okay let’s say that
let’s go back to the browser so now if
you click on pause that’s gonna stop the
timer but if you click on resume that
can resume the timer immediately so we
were calling the resume function but the
resume function was actually setting up
the new interval that role was going to
execute only after the one-second delay
right because that’s the value that we
pass to the control but now because we
update this state immediately we set the
new value on the current date property
in the state that value is going to be
updated and then after one second
the timer is actually going to start so
that’s how that works
lastly if we go down over here the one
thing I’ll do with the button here the
button that opens the holidays model is
I’m gonna add is outlined class just for
the styling purposes so we go back you
can see that it’s going to be outlined
and finally let’s also add a section
it’s going to have a class named section
and let’s just put a small paragraph
here so I’m gonna have an attack what’s
gonna make the text indented and let’s
just simply output the current date over
here so that the user of our application
knows against which current date the
timer operates so for instance right now
we are February 10th Saturday February
tip and it’s 10:45 a.m. so when I output
something like that over here in a per
graph just below the controls so I’m
going to need to have access to the
current date and we can call the format
function on it or the method and of
course we’re going to need to extract
that value from the state so let’s get
it just along within the next date and
the format function is going to accept a
string now if we go to the moment j/s
documentation
and if you go to the docks let’s also go
to parse then here shrink what format in
that section you can see that yeah
couple of tables that explain how the
formatting works the first thing I’m
going to do is I’m going to use the
format for days the quadruple D’s here
will denotes full name of the day of the
week so for example Monday or Sunday
that’s the first thing that we’re gonna
use
we’re then we’re gonna put a comma next
we’re also going to have a month so the
quadruple M capitalized is going to
denote the month so for example December
January that so let’s copy that let’s
face it over here next for the date I’m
actually going to use capital D oh
that’s going to denote the day of the
month with ordinal so for example 1st
2nd 3rd that’s the next form and I’m
going to use so let’s put it here oh
it’s also put a comma and next I’m going
to put the year so or why isn’t if you
go back they denote the year so it’s
going to be four digits and let’s also
have a time zone so let’s scroll down a
little bit
the single Z is going to give us for
instance minus 5 so I live in Montreal
minus 5 would be Eastern Standard Time
or ESD so let’s just put it here in
parentheses let’s say that back in the
application here that’s what it’s going
to look like the one thing though is I’m
also going to put UTC just in front of
it and the UTC is not actually a format
of any sorts it’s just simply a string
that’s going to be present no matter
what the back in the application that’s
what it’s going to look like you have
your UTC and then in that time zone so
in this case minus 5 now if you go to
display and format subsection you’re
gonna see that there’s actually a bunch
of localized formats so we can have a
localized format that looks something
like this so for instance Thursday
September 4th 1986 and then that date so
we could just simply use that format
instead we could pretty much replace
everything that we have before and it’s
not going to look the exact same way but
it’s going to be pretty close to that
and it’s just a shorter form so at this
point it’s pretty much up to you but I
think I’m gonna
stick to the previous one someone that
we were back to whatever we had before
him and I think it just looks a little
bit near and of course in this case you
could also include the time so let’s go
back to the docks and let’s see if we
can find a section for time so here’s a
section for weeks and with days we also
have a section for time so we can have
hours we can also have minutes and
seconds and we can also say whether it’s
a.m. or p.m. so it’s with hours minutes
and let’s also have a space and then the
last one is going to be a.m. or p.m. and
I’m just going to put a comma after the
year like so let’s say that yeah I think
it looks pretty pretty neat at this
point so finally let’s move on to the
timer component now we’re here you can
already see a bit of duplication again
so this dev is sort of like duplicated
across the timer component four times
and the only thing that actually changes
is the contents of that diff so for
instance the title as well as the
heading so I think this is a good place
to actually create a separate employment
I’m going to create a component here
let’s call it timer item we’re going to
see the props in return JSX
and just to clarify the timer item is
basically the item that you see over
here so for instance if you open up the
dev tools you can see that we have devs
over here and we have four of them one
for each segment of time right so for
instance days we have also hours minutes
and seconds and that’s going to be the
timer item component that we’re just
going to create in a couple of seconds
so back in here they all are going to
have the same exact format it’s just
going to be a couple of divs with a
nested paragraphs and let’s say we’re
going to accept a count so that’s going
to be a count of days hours minutes or
seconds we’re also going to accept a
label and we’re going to output that
label as an expression so the properties
over here would need to include like I
said account as well as the label
pass them down in there and now we’re
going to have four of those elements so
let’s have them like this that’s
duplicated
four times now all of them of course
like I said are going to need to include
the count it’s going to be an expression
and lastly the label and the label is
going to be a shrink so we could just
keep it as a string the first one is
going to be this one
okay so we’re basically pouring down the
number of days any of these string is
going to be days okay under the same
thing for the rest of them that’s just
cuts and bass
be careful not to duplicate Ecola braces
okay this one same thing let’s put it in
there
finally for seconds I’m just gonna cut
it and paste and then here we have hours
I think the next one is going to be
minutes and of course as you might
expect
without much surprise the last night’s
going to be seconds now I’m just going
to indent them a little bit so let’s put
them on separate lines
let’s also fix the labels like so that’s
gonna look a little bit better okay and
then I think we can just remove the
mark-up down there and if we save that
let’s go back to the browser there’s no
errors so far and as you can see the
timer works just fine let’s add a date
so let’s say first 20 22 basically two
years from now on no timer works just
fine okay now of course the timer item
could be a component on its own meaning
that you can actually export it to a
separate module and that’s actually a
good thing when you are working in a
setup that uses webpack you should be
afraid to use as many files or modules
as you wish to because that’s actually
going to make your app simpler to use
and maintain because princess hotel
this component needs to be changed at
some point in future so let’s say you
want to complicate the mark-up add more
elements to it and before you know the
file is just simply going to roll so in
this example I think it does make sense
to explore time or item to a separate
module or file in fact for that reason
I’m going to create a timer folder let’s
create index GS inside of it okay and
let’s remove all of this markup from
timer GS to index.js file over here and
let’s just remove the timer file
altogether let’s delete it what we do
need to do here is we actually need to
restart the server and wait for the
changes to be applied so let’s see if
that works now so it seems to work
nothing change really the reason it
works is that whenever you include the
timer component so for instance in index
yes include the timer well it’s gonna
look for the timer GS file it’s not
gonna be able to find it
but it’s quite to see the timer folder
and because we need the component in x
GS it’s actually going to look for that
index first it’s gonna find it and it’s
going to import it inside of the
countdown component like this and that’s
why this import actually works and
that’s because we call the file index GS
and in here in time where we can
actually create another subfolder
eliptical a timer item you could also
call it timer GS by the way but I’m
going to create a subfolder this might
be useful if for instance you might also
have extra Styles they’re only pertinent
to the timer item component that’s why
it might be useful to have a separate
folder for a timer item and then we’re
going to extract the timer item put it
to the timer item component or module
actually we’re gonna need to import
react from react because we’re using GS
x here and don’t forget that this syntax
is actually JavaScript it’s going to be
converted to react dot create elements
calls because we’re using bubble and we
can just simply explore default
this anonymous function over here let’s
save the file and then finally we need
to import timer item from timer item
okay back in the browser everything
seems to work just fine but now the
tiber item component has been extracted
to a separate file so if you need to
make any changes whatsoever the
structure all the files and folders is
now a bit more complicated but it’s
actually easier for us to manage because
everything is separated by concern it
makes sense to keep the timer item in a
separate module because well this module
is dedicated for a timer item and this
one is dedicated for the timer itself so
the components are sort of like
separated in different files and in the
long run it’s only going to benefit you
because it’s going to be easier to
manage the vilest and on that same note
we’re gonna do the same exact thing for
control component so the first thing
I’ll do is I’ll create a controls over
there for the controls I’m gonna create
index GS file and I’m going to extract
first of all all this logic from
controls to the index GS under the
controls folder let’s delete the
controls file let’s also create a folder
called control so the control is going
to be a folder for the control component
but it’s actually going to be index.js
file and what we want to do here is we
want to extract the controller here the
control is going to be imported just as
before so we’re getting port control
from control now the reason I use index
GS like I said previously is because I
don’t want to have this sort of import
that has control / control and this
would actually work if we called the
file instead of index she has control GS
but in order to avoid that duplication I
just simply call them index that’s how
it’s going to work so in this case we
will have the control of course just
like before we need to import react from
react there’s not much we can do about
that we still need to import react
and finally we’re going to export
default anonymous function like that and
I can here we were to control with the
import statement and then we use the
control inside of the mark-up over there
next we need to restart the server so
let’s run a TM start again okay
and as you expect everything works fine
like before so I think this was a good
refactor for the application I think I’m
going to stop here so this was the last
and final video for the yak series so
just to give you an idea as to where the
channel is going we’re going to explore
the material UI framework we’re gonna
look at firebase we’re probably going to
cover GSS and CSS module loading things
of that nature
basically styling as far as react goes
in the nearest future and we’re also
going to build a lot of different
applications and beside that of course
we’re going to focus on JavaScript is
Jimmy new videos about JavaScript all
that good stuff is coming it’s already
on the way so stay tuned if you like the
channel make sure to subscribe leave
your comments down below if you do find
something weird about the application or
you have suggestions or any type of
feedback just leave it just make sure to
leave it down below and let me know and
with that I’m going to close off the
series so thanks a lot for watching and I’m gonna see you next time bye bye
Please follow and like us: