hey guys welcome back to cold roll in
this video when I polish up the
application that we’ve been working on
for the past almost a year now so it’s
been a while since I’ve made a video in
this playlist and I thought it’d be a
good time to go back to it and finish up
the application so we’re gonna do some
of the last-minute optimizations and fix
this to the app just like weather than
they react playlist before so if you
don’t have the code for the video you
could always go back to the github repo
which is located at github com Alex 9
and 6 slash react exercises you can go
ahead and clone the repo to get the
latest code but I myself I’m going to
switch to the terminal and I’m going to
open it in vs code right so now one of
the first things I’d like to do is I’d
like to add lending to the project
because if you go to just about any file
you’re gonna see that my embedded
terminal over here is going to complain
because we’re missing the standard style
which I have configured for all of my
projects so what I’m going to do is I’m
actually going to close this window for
now and I’m going to do a yarn add and
development dependency a standard and
besides that because we’re gonna be
using some of the experimental syntax
I’m also going to go to standard Jas
website so anytime you’re using
experimental syntax as in class
properties for example one thing you
could do is you could install babel es
lint as the parser so we’re gonna go
ahead and do exactly that
so we’ll install babel es went i’m going
to reopen the project and it looks like
it’s running fine now and with that we
can go back to package.json and i’m
going to add a new section this one is
gonna be for standard and the coarser in
this case is going to be babel es lint
like this so now if i go back to the app
component for example we’re now going to
have the underlined for the class
property syntax but you can see that
some of the things here are actually
broken what we can do is we can
obviously fix them manually and but it
would be a lot easier to do it with
standard so foreign MPX standard you’re
gonna see a lot of things are gonna be
broken mostly things like double quotes
versus single quotes having unnecessary
spaces or missing spaces before function
declarations so what I’m actually going
to do is I’m going to run an PX standard
– – fix to fix all of the warnings so if
we run the command again you’re gonna
see that we don’t have any errors
anymore okay so let me clear it out and
now that was only for linting so now if
we do yarn outdated let’s see if we need
to update some of our dependencies and
it looks like there’s actually quite a
few of them so what we can do is we can
with yarn run a command called yarn
upgrade – – latest this will upgrade all
of the dependencies to the latest
version we’re gonna have an issue with
the HTML web pack plugin though I’m just
gonna copy the name for now so let’s run
the command now if we do yarn outdated
again you’re gonna see everything is up
to date but this is actually not exactly
the case because we still need to update
HTML web pack plugin right now the
version has been downgraded to 3 and we
need to use the latest version 4 for web
pack four so much alar going to do yarn
remove HTML web pack plug-in I’m just
gonna add it again as a dev dependency
or the next branch like this right so
that should be fine for now I’m just
going to remove the dev script because
it’s pretty much useless and I’m also
going to change this main field from
source index to dist
me and Jas like this no in babble or C
since we’re not using any polyfills it
should be safe to remove this use
built-ins line completely alright so now
that we’ve done that let’s go back to
the terminal I’m going to do yarn start
let’s see if we run into any issues and
as you can see the app starts but we get
a few warnings here the first of them
points to the use of deprecated
typography variants now this has to do
with the fact that we’ve updated
material UI so if you look at the
version currently it’s at three point
six point one there’s been a major
change with the variance for the
typography elements so if we go to
material UI and I’m going to go and look
for the typography elements somewhere
towards the middle you’re gonna find a
section for the different variants for
the typography but just below it you’re
gonna see a list of deprecated variants
so throughout the series have been using
these ones things like display two title
subheading they’ve actually been
deprecated so you can still use them
they’re going to be dropped completely I
believe in the next major release so be
a good time to update them as well now
walk away it’s not a complicated process
one way would be to of course use a
codemod and I do
they have something for this project but
honestly in my experience using cold
months usually leads you in some sort of
a trouble it doesn’t always work so
personally I would do it manually
especially because it’s not such a big
project it’s very simple all we have to
do is we just need to update the
variance and as you can see here over
here we get a mapping of the old
variance to the new ones so if we go
back to a project I’m going to do a
quick search for typography you’re gonna
see we have a few of them so to update
to the new variance we have to update
the old ones to the new ones so if we
look for headline the headline in this
case as you can see maps to h5 let’s go
back and update it to h5 let’s go to the
next one this one is display one display
one is going to map to h4 so let’s
update that and now the third one the
subheading this one is going to be
updated to subtitle one let’s do that
and let’s see the last one in the header
we get a headline and the headline once
again is h5 so let’s copy that let’s
update it and the last step would be to
tell our theme to use the new variants
so we’re going to need to setup a
typography property on the theme so
let’s do that I’m going to go back to a
project so we’re going to add a new
property typography it’s gonna be an
object and we’re gonna tell it to use
next variants like this so now if we go
back to our project the first warning is
gone but we still have the second one
the fair variant is going to be removed
in the next major release we have to use
the fab component now this one is fairly
simple we just need to find a button
that uses the fab variant and it looks
like we have one in the dialog component
so much we’re going to replace this with
the fab component so instead of a button
we’re going to import fab which stands
for floating action button in fact just
to clarify this let’s go back to the
dogs let’s go to component demos we’re
gonna go to buttons so if we look for a
fab component as you can see it’s now a
dedicated component that you can import
directly and you could also pass a size
property I believe let’s actually look
into the API so I’m gonna look for a fab
component and let’s look for size as you
can see now instead of passing
many property as we did before over here
we actually need to pass the size
property instead so let’s do exactly
that instead of meaning we’re gonna pass
a size this one’s gonna be small and now
we don’t have to pass the variant
anymore so let’s save the file and it
looks like all the warnings are gone but
if we open the dialog you’re gonna see
another warning this one talks about the
Wraiths variance and the fact that it’s
going to be removed in the next major
release so what we need to do is we need
to find a component that uses the raised
variant so let’s look for that variant
equals raised so we need to do is we
need to replace it with the contained
attribute or value instead all right so
that was basically it for updating
material UI now because we updated react
there’s actually been a change in react
16.6 now if we look for it let’s go to
react Jas org when I go to blog and as
you can see here in react 16 dot 6.0
there’s been a new static property added
to component classes in react and this
one allows us to use the context
directly onto the class so now instead
of using the with context helper
function that we’ve created once again
if we go back to our context this is
something that we added ourselves
manually but now that we have the new
context type it might be worthwhile to
use that so let’s see an example how we
can actually use that property so if I
go through the dialogue component it
makes use of the with context helper
what I’m going to do is I’m going to
actually remove this higher-order
component call from this component
itself and I’m going to put a static
property of context type on my create
dialog component and this one needs to
reference the actual context now we’ll
have to do a bit of refactoring here
because we are destructuring the
provider and the consumer from the
context in this case we need to get the
actual context itself so I’m going to
create a new export
let’s export a constant of what they
call it exercises context now this
second statement will be structure from
that context so once we export it we can
go ahead and import it over here so what
we need to do is we need to assign the
context type static property to that
context and once we do we can actually
reference properties from that context
so instead of D structuring muscles from
props as with it in the past we’re going
to really structure them from this dot
context instead and the same thing is
going to apply to the oncreate function
for example so once again this is not a
mandatory change of course you could
still be using the what context helper
in fact we still have a few places where
it’s being used but I think that the new
context type makes it a bit more clear
or explicit because now you reference
all the requisite properties from this
context but so that’s about it for
updating the app itself now let’s
actually go ahead and update some of our
components let’s see if we need to make
any changes we have the setup in the XJS
file this is where we define the theme
of course the theme could be defined in
a separate file so you could for example
create theme Jas this was useful while
doing server-side rendering because you
would reference the theme in multiple
places but because it’s only reference
in one place I think it makes sense to
keep the theme in the setup file for now
so this is good to go once again for the
context like I said we can still keep
the with context function now moving on
let’s go to our app J’s component so now
in this app component we have a local
state and it’s good enough like this but
actually there’s more things in the
states then we have listed over here in
fact there’s also the edit mode property
by default it’s set to false
it’ll also have the category I believe
so if we look for category for instance
in handle category select we have this
category property on the state now if we
don’t specify those two properties by
default they’re going to be undefined
and the only way it’s working is because
of type coercion that’s because the
undefined value is going to be
typecasted to false for example the same
thing is also going to be applied to the
category in fact the more explicit value
would be an empty string but because of
the nature of JavaScript even though
we don’t specify those properties it’s
still going to be fine because they’re
gonna be typecasted to whatever value is
expected but to make it more explicit
let’s actually leave them in the state
in this way it becomes more clear what
type of data this component actually
holds from that on it should be good for
now but if we go to the layouts put our
components so what are the issues with
this component is that we have a lot of
black magic happening with the indices
this has to do with the fact that we
also want to display a tab for all
exercises now because the exercises are
a static property we actually get them
from the story as well it’s an array
that contains a list of muscle
categories but we also of course want to
display a tab for all of the exercises
so that you can basically see a list of
all of them now because of that we have
to manipulate the indices for each
exercise or category so instead of doing
that what we can do is we can actually
create a local property this is
something that we can either do in a
constructor or we could just use the
class property syntax and we can just
simply call in local method let’s call
it get muscles what this method is going
to do is it’s going to return a list of
muscles so what we can do is we can
return the first element as an empty
string and the rest we can pass as a
this dot props to add muscles so this is
going to return the same array of
muscles from the context or in the end
from the store yes file but it’s going
to append an empty string into the
beginning of that list and now for
example in get index method this is
where we get the initial value for the
tabs instead of doing this
transformation over here oblique edges
we can simply return the start muscles
dot index of passing the value of the
categories who are going to pass an S
that props dot category now the category
is going to come from the context and
once again this is why it was useful to
set it to an empty string by default in
this case that’s actually necessary what
this is going to do is it’s going to
find the first element which will be in
this empty string over here so the index
will be 0 now in the same note we can
actually remove this first tab that was
outside the muscles that map call so now
I want to remove it I’m going to bring
me a tab on a separate line and now
instead of getting the muscles from the
props from the context we’re going to
get them from this class
we’re gonna do this that muscles and
once again the muscles could be on the
state but because it’s a static property
of the storage es file the exercises
will change so for example you could be
adding new ones or you could be deleting
the old ones but the muscle categories
will remain static so we can actually
put them on the class as the local class
property and of course we also need to
update the IANA index select method in
this case is going to be simplified
quite a bit so we need to do is we need
to call the on category select function
so what we’re gonna do is we’re gonna
pass in the value of the category we’re
just going to call this that muscles and
we’re going to get the value at the
specified index so now we can get rid of
the two lines we had before and this
should suffice and now the last thing
I’m going to change is because the label
for the first element is going to be
nothing it’s going to be an empty string
instead of displaying an empty string
we’re going to display all like this so
if we go back as you can see we get the
list of tabs once again one of the small
issues you could observe is I’m going to
go back to the app components I’m going
to add a console log of render every
time you switch between tabs of course
we’re going to get a re render but if
you click on the same tab multiple times
we’re also getting the render log in the
console now to fix that one of the ways
to go about it would be to instead of
extending a component we can actually
extend pure component from react so
let’s do that on the same note I’m going
to also declare this as the app class
let’s do an export default of that this
is just so that we can see the app in
the browser using the react extension so
you can see as soon as we add a name to
that app component we can actually see
it in the tree but if I revert that if
we export the Fulton anonymous class
you’re gonna see that the app component
is actually not being displayed properly
so we just get the pure component so
it’s actually export default in app
component instead and now back to our
console so if I click on the same to
have multiple times you’re gonna see
that we only get the render log once and
this is of course only when we actually
switch the tab so if you try to go to
the same tab we’re now going to
render and of course the other way with
to go about this would be to instead in
your footer to actually before calling
the on category select you could check
if the new category is different from
the current category so you could do
something like if the new category is
not the same as the current category
which is in this props dot category so
if it’s not the same this is when we
actually need to call this method but
once again this is something you would
probably need to do in multiple places
it’s easier to keep the app component
itself as a pure component and let the
react
pure component decide when the app
actually needs to re-render and of
course the issue with we rendering is
whenever the app component we renders
everything else in the tree is also
going to be be rendered in fact the Dom
will not necessarily be repainted but
all the random methods are definitely
going to be involved so instead of doing
all those calculations and necessarily
we can just simply put a pure component
on the app so now the footer component
is much more straightforward one of the
issues you could observe in fact in
quite a few components we have a nesting
of several higher-order components now
for something like this we can use the
recompose library so make sure your
going to go back to the terminal
we’re gonna stop the dev server and i’m
going to add a dependency of recompose
which in fact is already installed I
believe it’s a dependency of material UI
or perhaps one of these sub dependencies
but either way it’s not going to bring
up the bundle size it’s already being
bundled it’s just that we can declare it
explicitly in our package JSON file but
once we do we can have an import of
compose once again I can’t type sorry
guys compose from recompose Jesus Christ
recompose okay so let’s do a compose
we’re gonna call this as a function and
now we’re gonna pass in with context
once again is a function reference to
the higher-order component that we’ve
created and the second one will be
actually an invocation of the width
width helper function unless that we’re
going to call this whole shebang of
compose on the footer component like
this so let’s save it and we should be
good to go so let’s do orange starts and
it loads successfully so this was a good
refactor so now let’s also look at the
header components this one is fairly
stable so we had to update the very end
and the
looks fine to me but the only thing is
an index J s file I’m going to update
the export syntax so what I’m going to
do is we’re going to actually export the
two named components header and footer
from this directory we just need to add
default as this way we don’t have to
import and then export them we can
simply export them directly like this
and it still works so that’s great the
only thing is once again for the header
component I’m actually going to change
it from a an anonymous export to a Const
header so we’re going to export default
the header component we’re just going to
wrap it with the width Styles higher
order component like this and this will
just make it more explicit a bit so now
moving on it to the exercises folder
once again the index.js file is useful
as a barrell file to re export multiple
things from the same directory but this
file is actually breaking the pattern
because we have an actual component
inside of it what I’m going to do is in
fact I’m going to split into several
components so if you look at it a bit
closer I’m gonna minify just for a
second you’re gonna see that this is
basically a grid we have two grid
elements inside of it and then each grid
has a paper component the first one
displays a list of titles with the
exercises for each category and the
second one displays sort of like a
preview for each exercise so it can
either be the details of the exercise or
it could also be the form to edit the selected exercise
this video when I polish up the
application that we’ve been working on
for the past almost a year now so it’s
been a while since I’ve made a video in
this playlist and I thought it’d be a
good time to go back to it and finish up
the application so we’re gonna do some
of the last-minute optimizations and fix
this to the app just like weather than
they react playlist before so if you
don’t have the code for the video you
could always go back to the github repo
which is located at github com Alex 9
and 6 slash react exercises you can go
ahead and clone the repo to get the
latest code but I myself I’m going to
switch to the terminal and I’m going to
open it in vs code right so now one of
the first things I’d like to do is I’d
like to add lending to the project
because if you go to just about any file
you’re gonna see that my embedded
terminal over here is going to complain
because we’re missing the standard style
which I have configured for all of my
projects so what I’m going to do is I’m
actually going to close this window for
now and I’m going to do a yarn add and
development dependency a standard and
besides that because we’re gonna be
using some of the experimental syntax
I’m also going to go to standard Jas
website so anytime you’re using
experimental syntax as in class
properties for example one thing you
could do is you could install babel es
lint as the parser so we’re gonna go
ahead and do exactly that
so we’ll install babel es went i’m going
to reopen the project and it looks like
it’s running fine now and with that we
can go back to package.json and i’m
going to add a new section this one is
gonna be for standard and the coarser in
this case is going to be babel es lint
like this so now if i go back to the app
component for example we’re now going to
have the underlined for the class
property syntax but you can see that
some of the things here are actually
broken what we can do is we can
obviously fix them manually and but it
would be a lot easier to do it with
standard so foreign MPX standard you’re
gonna see a lot of things are gonna be
broken mostly things like double quotes
versus single quotes having unnecessary
spaces or missing spaces before function
declarations so what I’m actually going
to do is I’m going to run an PX standard
– – fix to fix all of the warnings so if
we run the command again you’re gonna
see that we don’t have any errors
anymore okay so let me clear it out and
now that was only for linting so now if
we do yarn outdated let’s see if we need
to update some of our dependencies and
it looks like there’s actually quite a
few of them so what we can do is we can
with yarn run a command called yarn
upgrade – – latest this will upgrade all
of the dependencies to the latest
version we’re gonna have an issue with
the HTML web pack plugin though I’m just
gonna copy the name for now so let’s run
the command now if we do yarn outdated
again you’re gonna see everything is up
to date but this is actually not exactly
the case because we still need to update
HTML web pack plugin right now the
version has been downgraded to 3 and we
need to use the latest version 4 for web
pack four so much alar going to do yarn
remove HTML web pack plug-in I’m just
gonna add it again as a dev dependency
or the next branch like this right so
that should be fine for now I’m just
going to remove the dev script because
it’s pretty much useless and I’m also
going to change this main field from
source index to dist
me and Jas like this no in babble or C
since we’re not using any polyfills it
should be safe to remove this use
built-ins line completely alright so now
that we’ve done that let’s go back to
the terminal I’m going to do yarn start
let’s see if we run into any issues and
as you can see the app starts but we get
a few warnings here the first of them
points to the use of deprecated
typography variants now this has to do
with the fact that we’ve updated
material UI so if you look at the
version currently it’s at three point
six point one there’s been a major
change with the variance for the
typography elements so if we go to
material UI and I’m going to go and look
for the typography elements somewhere
towards the middle you’re gonna find a
section for the different variants for
the typography but just below it you’re
gonna see a list of deprecated variants
so throughout the series have been using
these ones things like display two title
subheading they’ve actually been
deprecated so you can still use them
they’re going to be dropped completely I
believe in the next major release so be
a good time to update them as well now
walk away it’s not a complicated process
one way would be to of course use a
codemod and I do
they have something for this project but
honestly in my experience using cold
months usually leads you in some sort of
a trouble it doesn’t always work so
personally I would do it manually
especially because it’s not such a big
project it’s very simple all we have to
do is we just need to update the
variance and as you can see here over
here we get a mapping of the old
variance to the new ones so if we go
back to a project I’m going to do a
quick search for typography you’re gonna
see we have a few of them so to update
to the new variance we have to update
the old ones to the new ones so if we
look for headline the headline in this
case as you can see maps to h5 let’s go
back and update it to h5 let’s go to the
next one this one is display one display
one is going to map to h4 so let’s
update that and now the third one the
subheading this one is going to be
updated to subtitle one let’s do that
and let’s see the last one in the header
we get a headline and the headline once
again is h5 so let’s copy that let’s
update it and the last step would be to
tell our theme to use the new variants
so we’re going to need to setup a
typography property on the theme so
let’s do that I’m going to go back to a
project so we’re going to add a new
property typography it’s gonna be an
object and we’re gonna tell it to use
next variants like this so now if we go
back to our project the first warning is
gone but we still have the second one
the fair variant is going to be removed
in the next major release we have to use
the fab component now this one is fairly
simple we just need to find a button
that uses the fab variant and it looks
like we have one in the dialog component
so much we’re going to replace this with
the fab component so instead of a button
we’re going to import fab which stands
for floating action button in fact just
to clarify this let’s go back to the
dogs let’s go to component demos we’re
gonna go to buttons so if we look for a
fab component as you can see it’s now a
dedicated component that you can import
directly and you could also pass a size
property I believe let’s actually look
into the API so I’m gonna look for a fab
component and let’s look for size as you
can see now instead of passing
many property as we did before over here
we actually need to pass the size
property instead so let’s do exactly
that instead of meaning we’re gonna pass
a size this one’s gonna be small and now
we don’t have to pass the variant
anymore so let’s save the file and it
looks like all the warnings are gone but
if we open the dialog you’re gonna see
another warning this one talks about the
Wraiths variance and the fact that it’s
going to be removed in the next major
release so what we need to do is we need
to find a component that uses the raised
variant so let’s look for that variant
equals raised so we need to do is we
need to replace it with the contained
attribute or value instead all right so
that was basically it for updating
material UI now because we updated react
there’s actually been a change in react
16.6 now if we look for it let’s go to
react Jas org when I go to blog and as
you can see here in react 16 dot 6.0
there’s been a new static property added
to component classes in react and this
one allows us to use the context
directly onto the class so now instead
of using the with context helper
function that we’ve created once again
if we go back to our context this is
something that we added ourselves
manually but now that we have the new
context type it might be worthwhile to
use that so let’s see an example how we
can actually use that property so if I
go through the dialogue component it
makes use of the with context helper
what I’m going to do is I’m going to
actually remove this higher-order
component call from this component
itself and I’m going to put a static
property of context type on my create
dialog component and this one needs to
reference the actual context now we’ll
have to do a bit of refactoring here
because we are destructuring the
provider and the consumer from the
context in this case we need to get the
actual context itself so I’m going to
create a new export
let’s export a constant of what they
call it exercises context now this
second statement will be structure from
that context so once we export it we can
go ahead and import it over here so what
we need to do is we need to assign the
context type static property to that
context and once we do we can actually
reference properties from that context
so instead of D structuring muscles from
props as with it in the past we’re going
to really structure them from this dot
context instead and the same thing is
going to apply to the oncreate function
for example so once again this is not a
mandatory change of course you could
still be using the what context helper
in fact we still have a few places where
it’s being used but I think that the new
context type makes it a bit more clear
or explicit because now you reference
all the requisite properties from this
context but so that’s about it for
updating the app itself now let’s
actually go ahead and update some of our
components let’s see if we need to make
any changes we have the setup in the XJS
file this is where we define the theme
of course the theme could be defined in
a separate file so you could for example
create theme Jas this was useful while
doing server-side rendering because you
would reference the theme in multiple
places but because it’s only reference
in one place I think it makes sense to
keep the theme in the setup file for now
so this is good to go once again for the
context like I said we can still keep
the with context function now moving on
let’s go to our app J’s component so now
in this app component we have a local
state and it’s good enough like this but
actually there’s more things in the
states then we have listed over here in
fact there’s also the edit mode property
by default it’s set to false
it’ll also have the category I believe
so if we look for category for instance
in handle category select we have this
category property on the state now if we
don’t specify those two properties by
default they’re going to be undefined
and the only way it’s working is because
of type coercion that’s because the
undefined value is going to be
typecasted to false for example the same
thing is also going to be applied to the
category in fact the more explicit value
would be an empty string but because of
the nature of JavaScript even though
we don’t specify those properties it’s
still going to be fine because they’re
gonna be typecasted to whatever value is
expected but to make it more explicit
let’s actually leave them in the state
in this way it becomes more clear what
type of data this component actually
holds from that on it should be good for
now but if we go to the layouts put our
components so what are the issues with
this component is that we have a lot of
black magic happening with the indices
this has to do with the fact that we
also want to display a tab for all
exercises now because the exercises are
a static property we actually get them
from the story as well it’s an array
that contains a list of muscle
categories but we also of course want to
display a tab for all of the exercises
so that you can basically see a list of
all of them now because of that we have
to manipulate the indices for each
exercise or category so instead of doing
that what we can do is we can actually
create a local property this is
something that we can either do in a
constructor or we could just use the
class property syntax and we can just
simply call in local method let’s call
it get muscles what this method is going
to do is it’s going to return a list of
muscles so what we can do is we can
return the first element as an empty
string and the rest we can pass as a
this dot props to add muscles so this is
going to return the same array of
muscles from the context or in the end
from the store yes file but it’s going
to append an empty string into the
beginning of that list and now for
example in get index method this is
where we get the initial value for the
tabs instead of doing this
transformation over here oblique edges
we can simply return the start muscles
dot index of passing the value of the
categories who are going to pass an S
that props dot category now the category
is going to come from the context and
once again this is why it was useful to
set it to an empty string by default in
this case that’s actually necessary what
this is going to do is it’s going to
find the first element which will be in
this empty string over here so the index
will be 0 now in the same note we can
actually remove this first tab that was
outside the muscles that map call so now
I want to remove it I’m going to bring
me a tab on a separate line and now
instead of getting the muscles from the
props from the context we’re going to
get them from this class
we’re gonna do this that muscles and
once again the muscles could be on the
state but because it’s a static property
of the storage es file the exercises
will change so for example you could be
adding new ones or you could be deleting
the old ones but the muscle categories
will remain static so we can actually
put them on the class as the local class
property and of course we also need to
update the IANA index select method in
this case is going to be simplified
quite a bit so we need to do is we need
to call the on category select function
so what we’re gonna do is we’re gonna
pass in the value of the category we’re
just going to call this that muscles and
we’re going to get the value at the
specified index so now we can get rid of
the two lines we had before and this
should suffice and now the last thing
I’m going to change is because the label
for the first element is going to be
nothing it’s going to be an empty string
instead of displaying an empty string
we’re going to display all like this so
if we go back as you can see we get the
list of tabs once again one of the small
issues you could observe is I’m going to
go back to the app components I’m going
to add a console log of render every
time you switch between tabs of course
we’re going to get a re render but if
you click on the same tab multiple times
we’re also getting the render log in the
console now to fix that one of the ways
to go about it would be to instead of
extending a component we can actually
extend pure component from react so
let’s do that on the same note I’m going
to also declare this as the app class
let’s do an export default of that this
is just so that we can see the app in
the browser using the react extension so
you can see as soon as we add a name to
that app component we can actually see
it in the tree but if I revert that if
we export the Fulton anonymous class
you’re gonna see that the app component
is actually not being displayed properly
so we just get the pure component so
it’s actually export default in app
component instead and now back to our
console so if I click on the same to
have multiple times you’re gonna see
that we only get the render log once and
this is of course only when we actually
switch the tab so if you try to go to
the same tab we’re now going to
render and of course the other way with
to go about this would be to instead in
your footer to actually before calling
the on category select you could check
if the new category is different from
the current category so you could do
something like if the new category is
not the same as the current category
which is in this props dot category so
if it’s not the same this is when we
actually need to call this method but
once again this is something you would
probably need to do in multiple places
it’s easier to keep the app component
itself as a pure component and let the
react
pure component decide when the app
actually needs to re-render and of
course the issue with we rendering is
whenever the app component we renders
everything else in the tree is also
going to be be rendered in fact the Dom
will not necessarily be repainted but
all the random methods are definitely
going to be involved so instead of doing
all those calculations and necessarily
we can just simply put a pure component
on the app so now the footer component
is much more straightforward one of the
issues you could observe in fact in
quite a few components we have a nesting
of several higher-order components now
for something like this we can use the
recompose library so make sure your
going to go back to the terminal
we’re gonna stop the dev server and i’m
going to add a dependency of recompose
which in fact is already installed I
believe it’s a dependency of material UI
or perhaps one of these sub dependencies
but either way it’s not going to bring
up the bundle size it’s already being
bundled it’s just that we can declare it
explicitly in our package JSON file but
once we do we can have an import of
compose once again I can’t type sorry
guys compose from recompose Jesus Christ
recompose okay so let’s do a compose
we’re gonna call this as a function and
now we’re gonna pass in with context
once again is a function reference to
the higher-order component that we’ve
created and the second one will be
actually an invocation of the width
width helper function unless that we’re
going to call this whole shebang of
compose on the footer component like
this so let’s save it and we should be
good to go so let’s do orange starts and
it loads successfully so this was a good
refactor so now let’s also look at the
header components this one is fairly
stable so we had to update the very end
and the
looks fine to me but the only thing is
an index J s file I’m going to update
the export syntax so what I’m going to
do is we’re going to actually export the
two named components header and footer
from this directory we just need to add
default as this way we don’t have to
import and then export them we can
simply export them directly like this
and it still works so that’s great the
only thing is once again for the header
component I’m actually going to change
it from a an anonymous export to a Const
header so we’re going to export default
the header component we’re just going to
wrap it with the width Styles higher
order component like this and this will
just make it more explicit a bit so now
moving on it to the exercises folder
once again the index.js file is useful
as a barrell file to re export multiple
things from the same directory but this
file is actually breaking the pattern
because we have an actual component
inside of it what I’m going to do is in
fact I’m going to split into several
components so if you look at it a bit
closer I’m gonna minify just for a
second you’re gonna see that this is
basically a grid we have two grid
elements inside of it and then each grid
has a paper component the first one
displays a list of titles with the
exercises for each category and the
second one displays sort of like a
preview for each exercise so it can
either be the details of the exercise or
it could also be the form to edit the selected exercise
Please follow and like us: