hey guys welcome back to materialise
series I know I haven’t made a video in
this playlist for a while
but we’re gonna get back to it and we’re
gonna start working on styling in this
video but the very first thing I’d like
to do is I’d like to update some of the
dependencies here so the first thing
I’ll do is when I go to package.json and
I’m gonna update the react as well as
react Dom dependencies 2:16 3 1 also I’m
gonna add a carrot in front of them and
4 react scripts I’m actually gonna go to
NP MGS org so this would be react
scripts you know the current version is
1.1 4 so that’s the exact one we’re
gonna use over here so what I will do is
I’ll add a carrot and then the version
right so that’s gonna bait the core
dependencies but I’d also like to update
my chilli why so what I’ll do is I’ll we
add it in the latest version so far has
been one beta 41 that’s all we’re gonna
add and besides that we also need to
update material UI icons so in fact what
happened is material UI cards has been
deprecated and we’re actually gonna see
it in a second material UI icons
let’s see right so this is the library
we’re actually going to use so we have
to riad it as a dependency so I’ll add a
new dependency let’s search for that
library and let’s remove the @ sign
material UI icons there we go that’s the
one and the current version is beta 42
so I’ll riad it so what’s gonna happen
now is it won’t be able to find some of
the icons that we’re using in the
application there we go we got a
dependency not found error so what we
can do here is we can go to the dialog
and we can replace the import statement
to that exact new path okay so we’re
grabbing the add icon from a chili why
slash icons like that so make sure you
update the path and we also have to do
the same thing over here because we’re
using the edit and delete icons update
it and then it’s going to work okay the
other thing we’re gonna fix is if you
remember in forum Jas we had this
component will receive props method now
if you know in react 16 is actually
being
change to lifecycle methods in fact some
of them also be deprecated so if we look
for component will receive props that’s
one of the candidates to be removed and
react eighteen or seventeen I believe so
as you can see they have a warning here
in the documentation the recommended
approach for now is to use the static
get the right state from props and what
what I’m gonna do here isn’t actually
going to change this to a static method
we’re still gonna have the next props
object that looks something like this
we also have access to the previous
state which we don’t actually need in
this case but instead of setting the
state all we have to do is basically
return the new exercise object as you
can see here if I click on edit on the
overhead press we could see the form
popping up we can also edit other
exercises and as you can see the form is
getting updated just like before and the
only problem with this approach is if i
refresh the page and if I go to the
forum so I’ll click on the plus icon to
creating your exercise you could see
that we actually get an error in the
console and it’s basically complaining
about the value that we returned so in
this case the exercise is undefined and
that’s because the value of the exercise
property is undefined the one that we
actually pass to this component so what
we can do here is we can actually have a
condition that will basically check if
the exercise is full-si and in this case
it’s only going to be true with the
exercise is undefined and if that’s the
case we’re going to return null
otherwise we’re actually going to return
the exercise object so that’s going to
be eight the warning so if I click on
the plus we don’t get the error any
longer and the very last bug that I
actually noticed is if we go to app J s
what are the methods over here resets
the edit mode to false and it also
resets the exercise to an empty object
when you are deleting the exercise so
this actually makes sense if I have an
exercise selected let’s say overhead
press and I try to delete it well that
actually resets the currently selected
exercise to an empty object and we do
that because if I let’s say want to edit
something but then I also delete it well
I shouldn’t be able to edit it any
longer because the exercise does not
actually exist in a store
now that works for the exercises that we
want to delete but let’s see what if I
select dips and I want to delete barbell
curls well that’s gonna reset the
currently selected exercise even though
it still exists in the store so one
thing we can do here is we can actually
check if the ID of the currently
selected exercise so that’s coming from
the previous state object if that ID
actually matches the ID that we want to
delete so that’s the case we’re gonna
have to reset the currently selected
exercise to an empty object but
otherwise we can just simply set it to
the exercise itself and I know it’s a
bit redundant because we’re basically
resetting the exercise to the same exact
object so what you could do in the end
instead of passing an actual object
right so what you can do is you could
have a function that basically creates
the new state object and then you can
have your conditions that says well if
the exercise ID matches the ID of the
exercise that needs to be deleted then
you can basically have your exercise
being set on the new state right so you
have your new States dot exercise and
you could set that to an empty object
I’m not gonna go into that and I think
for this small example even though it’s
not the most efficient approach as you
can see it’s I think it’s perfectly fine
in this in this context and the same
thing will do for the edit mode so what
I’m gonna do is amount almost gonna have
a ternary expression and we’re going to
check if the exercise ID matches the ID
of the exercise that needs to be deleted
and if that’s true we’re gonna have to
reset the edit mode to false because we
cannot we can no longer edit that
exercise because it’s being deleted
otherwise we’ll reset the edit mode to
its same value so we’re gonna have to
grab it from the previous state like
that so I’m gonna save it and right now
so we can do is we can actually delete
exercises we can also edit them but more
importantly let’s say if I select let’s
say pull-ups and if I delete pull-ups
well that’s going to reset the current
exercise but let’s say I have dip
selected and I want to
deadlifts well that’s fine that’s not
gonna affect the dips right because I’m
still able to see them and the same
thing in the edit mode so if I am
editing dips for example it and if I
delete squats that’s not gonna affect my
dips and in fact I’m still able to edit
them so let’s see we’re gonna edit the
title and I can save it and there’s no
errors in the console as you can see now
as far as react 16/3 contacts API if you
guys are interested we can actually
dedicate a separate video for that
because we do have some of the
components that need to receive some of
the props all the way from the app
component and we end up passing them
through the intermediate component so
for example the header has a form as you
can see and the form requires muscles as
well as on create well the header itself
doesn’t need to know about the oncreate
function so this would be a good
scenario for a context so what I mean by
that is we could actually store the
oncreate function on the context that we
could have a consumer we could transform
the form into a consumer that receives
that prop and that way we don’t have to
pass the on exercise create property to
the header because the header basically
in this case acts as a as an
intermediary component between the two
if you guys want to see that let me know
and perhaps we can dedicate a video for
the context API and react 16/3 but we’re
gonna move on for now and we’re actually
gonna finally look at styling in my
chilli why so what I’m gonna do is I’m
actually gonna go back to let’s say a
form J s file and I’ve already shown you
an interesting way to define styles in
my chilli why what we’ve used so far was
mostly a an inline approach to styling
so for example inside of index J is for
the exercise component we have the style
property that contains a paper element
which is just basically an object and
the paper is simply a property of that
object
now that object has a value excuse me
that property paper property has a value
of an object and that object contains an
interesting structure which basically
resembles CSS styles
of course the keys have to be common
cased so for example I can do something
like margin-top with the – of course
because the – is not a valid character
for a for an object key so what I have
to do is I have to camelcase them now
this approach has nothing to do with
material UI in and of itself because
this approach can work with react out of
the box so what we do is we reference
that style property right in one of the
components so this for example this
paper component needs to have a style so
we do is we basically inject the paper
object from the style property and
that’s gonna work fine in most cases but
what if you wanted to add media queries
or what if you wanted to add a hover
event on an element let’s say a button
right so in cases where styling needs to
be more advanced we could actually
resort to the with style helper function
so I think the first thing I have to
mention is that in the past material I
used to rely on less the less
preprocessor for styling but they
eventually moved on to inline styling
but like I mentioned inline styling has
its own disadvantages and limitations as
well so what they ended up doing for
Miceli why next is they ended up going
with the CSS in JavaScript styling
solution and what they ended up using
actually is the JSS library now JSS is
basically a tool that allows you to
write CSS in JavaScript so what your
code might look like is something like
this so like I said we have a Styles
object which can have different classes
so the top-level keys are basically
class names so let’s say button a call
to action button and as you can see also
a media query with the button inside and
then we can also have hover events and
like I said media queries and a lot more
functionality than that so what ends up
happening in the end is once you have
your Styles you could actually transform
them into classes that you end up using
on actual HTML elements and of course
there’s also another library that’s
adapted for react which is known as
react jss if you are interested to know
more about it make sure to go to the
documentation on get up and as you can
see this example
over here actually looks very similar to
maturely live so we end up having a
Stiles object again we have a button
class a label class and we have
properties inside of those objects and
then we have the inject sheet call where
we pass these Stiles
so this inject sheet is basically a
higher-order component so what we do is
we wrap our button component a normal
react component with that inject sheet
function and what it does is it actually
passes those styles as classes to the
component as a prop so we can start
using those classes on the elements for
example we can assign the button class
on the button and we can also assign the
label class on the span and as you can
see already it resembles what Miceli why
uses internally and in material you are
instead of inject sheet method there’s
another one that’s known as with styles
it’s also a higher-order component and
it’s actually more customizable and more
powerful because it also allows you to
have reference to the themes so what we
can do here is we can actually
console.log the theme just to see what
properties it contains so I’m gonna open
up the console let’s click on the plus
icon that’s gonna open up the form and
as you can see here we get a huge object
the one thing you might notice is the
pallet property that also contains a
bunch of colors for example the primary
color you can see the main color that’s
the one that we you see in the header
over there in the application that’s the
blue color and there’s other variations
of that color like the light one the
dark one and the contrast text so that’s
the white color you see in the header
over here we’re gonna explore the theme
object eventually in more detail but for
now what I’d like to show you is how we
can move on from inline styling to the more advanced with style hoc
series I know I haven’t made a video in
this playlist for a while
but we’re gonna get back to it and we’re
gonna start working on styling in this
video but the very first thing I’d like
to do is I’d like to update some of the
dependencies here so the first thing
I’ll do is when I go to package.json and
I’m gonna update the react as well as
react Dom dependencies 2:16 3 1 also I’m
gonna add a carrot in front of them and
4 react scripts I’m actually gonna go to
NP MGS org so this would be react
scripts you know the current version is
1.1 4 so that’s the exact one we’re
gonna use over here so what I will do is
I’ll add a carrot and then the version
right so that’s gonna bait the core
dependencies but I’d also like to update
my chilli why so what I’ll do is I’ll we
add it in the latest version so far has
been one beta 41 that’s all we’re gonna
add and besides that we also need to
update material UI icons so in fact what
happened is material UI cards has been
deprecated and we’re actually gonna see
it in a second material UI icons
let’s see right so this is the library
we’re actually going to use so we have
to riad it as a dependency so I’ll add a
new dependency let’s search for that
library and let’s remove the @ sign
material UI icons there we go that’s the
one and the current version is beta 42
so I’ll riad it so what’s gonna happen
now is it won’t be able to find some of
the icons that we’re using in the
application there we go we got a
dependency not found error so what we
can do here is we can go to the dialog
and we can replace the import statement
to that exact new path okay so we’re
grabbing the add icon from a chili why
slash icons like that so make sure you
update the path and we also have to do
the same thing over here because we’re
using the edit and delete icons update
it and then it’s going to work okay the
other thing we’re gonna fix is if you
remember in forum Jas we had this
component will receive props method now
if you know in react 16 is actually
being
change to lifecycle methods in fact some
of them also be deprecated so if we look
for component will receive props that’s
one of the candidates to be removed and
react eighteen or seventeen I believe so
as you can see they have a warning here
in the documentation the recommended
approach for now is to use the static
get the right state from props and what
what I’m gonna do here isn’t actually
going to change this to a static method
we’re still gonna have the next props
object that looks something like this
we also have access to the previous
state which we don’t actually need in
this case but instead of setting the
state all we have to do is basically
return the new exercise object as you
can see here if I click on edit on the
overhead press we could see the form
popping up we can also edit other
exercises and as you can see the form is
getting updated just like before and the
only problem with this approach is if i
refresh the page and if I go to the
forum so I’ll click on the plus icon to
creating your exercise you could see
that we actually get an error in the
console and it’s basically complaining
about the value that we returned so in
this case the exercise is undefined and
that’s because the value of the exercise
property is undefined the one that we
actually pass to this component so what
we can do here is we can actually have a
condition that will basically check if
the exercise is full-si and in this case
it’s only going to be true with the
exercise is undefined and if that’s the
case we’re going to return null
otherwise we’re actually going to return
the exercise object so that’s going to
be eight the warning so if I click on
the plus we don’t get the error any
longer and the very last bug that I
actually noticed is if we go to app J s
what are the methods over here resets
the edit mode to false and it also
resets the exercise to an empty object
when you are deleting the exercise so
this actually makes sense if I have an
exercise selected let’s say overhead
press and I try to delete it well that
actually resets the currently selected
exercise to an empty object and we do
that because if I let’s say want to edit
something but then I also delete it well
I shouldn’t be able to edit it any
longer because the exercise does not
actually exist in a store
now that works for the exercises that we
want to delete but let’s see what if I
select dips and I want to delete barbell
curls well that’s gonna reset the
currently selected exercise even though
it still exists in the store so one
thing we can do here is we can actually
check if the ID of the currently
selected exercise so that’s coming from
the previous state object if that ID
actually matches the ID that we want to
delete so that’s the case we’re gonna
have to reset the currently selected
exercise to an empty object but
otherwise we can just simply set it to
the exercise itself and I know it’s a
bit redundant because we’re basically
resetting the exercise to the same exact
object so what you could do in the end
instead of passing an actual object
right so what you can do is you could
have a function that basically creates
the new state object and then you can
have your conditions that says well if
the exercise ID matches the ID of the
exercise that needs to be deleted then
you can basically have your exercise
being set on the new state right so you
have your new States dot exercise and
you could set that to an empty object
I’m not gonna go into that and I think
for this small example even though it’s
not the most efficient approach as you
can see it’s I think it’s perfectly fine
in this in this context and the same
thing will do for the edit mode so what
I’m gonna do is amount almost gonna have
a ternary expression and we’re going to
check if the exercise ID matches the ID
of the exercise that needs to be deleted
and if that’s true we’re gonna have to
reset the edit mode to false because we
cannot we can no longer edit that
exercise because it’s being deleted
otherwise we’ll reset the edit mode to
its same value so we’re gonna have to
grab it from the previous state like
that so I’m gonna save it and right now
so we can do is we can actually delete
exercises we can also edit them but more
importantly let’s say if I select let’s
say pull-ups and if I delete pull-ups
well that’s going to reset the current
exercise but let’s say I have dip
selected and I want to
deadlifts well that’s fine that’s not
gonna affect the dips right because I’m
still able to see them and the same
thing in the edit mode so if I am
editing dips for example it and if I
delete squats that’s not gonna affect my
dips and in fact I’m still able to edit
them so let’s see we’re gonna edit the
title and I can save it and there’s no
errors in the console as you can see now
as far as react 16/3 contacts API if you
guys are interested we can actually
dedicate a separate video for that
because we do have some of the
components that need to receive some of
the props all the way from the app
component and we end up passing them
through the intermediate component so
for example the header has a form as you
can see and the form requires muscles as
well as on create well the header itself
doesn’t need to know about the oncreate
function so this would be a good
scenario for a context so what I mean by
that is we could actually store the
oncreate function on the context that we
could have a consumer we could transform
the form into a consumer that receives
that prop and that way we don’t have to
pass the on exercise create property to
the header because the header basically
in this case acts as a as an
intermediary component between the two
if you guys want to see that let me know
and perhaps we can dedicate a video for
the context API and react 16/3 but we’re
gonna move on for now and we’re actually
gonna finally look at styling in my
chilli why so what I’m gonna do is I’m
actually gonna go back to let’s say a
form J s file and I’ve already shown you
an interesting way to define styles in
my chilli why what we’ve used so far was
mostly a an inline approach to styling
so for example inside of index J is for
the exercise component we have the style
property that contains a paper element
which is just basically an object and
the paper is simply a property of that
object
now that object has a value excuse me
that property paper property has a value
of an object and that object contains an
interesting structure which basically
resembles CSS styles
of course the keys have to be common
cased so for example I can do something
like margin-top with the – of course
because the – is not a valid character
for a for an object key so what I have
to do is I have to camelcase them now
this approach has nothing to do with
material UI in and of itself because
this approach can work with react out of
the box so what we do is we reference
that style property right in one of the
components so this for example this
paper component needs to have a style so
we do is we basically inject the paper
object from the style property and
that’s gonna work fine in most cases but
what if you wanted to add media queries
or what if you wanted to add a hover
event on an element let’s say a button
right so in cases where styling needs to
be more advanced we could actually
resort to the with style helper function
so I think the first thing I have to
mention is that in the past material I
used to rely on less the less
preprocessor for styling but they
eventually moved on to inline styling
but like I mentioned inline styling has
its own disadvantages and limitations as
well so what they ended up doing for
Miceli why next is they ended up going
with the CSS in JavaScript styling
solution and what they ended up using
actually is the JSS library now JSS is
basically a tool that allows you to
write CSS in JavaScript so what your
code might look like is something like
this so like I said we have a Styles
object which can have different classes
so the top-level keys are basically
class names so let’s say button a call
to action button and as you can see also
a media query with the button inside and
then we can also have hover events and
like I said media queries and a lot more
functionality than that so what ends up
happening in the end is once you have
your Styles you could actually transform
them into classes that you end up using
on actual HTML elements and of course
there’s also another library that’s
adapted for react which is known as
react jss if you are interested to know
more about it make sure to go to the
documentation on get up and as you can
see this example
over here actually looks very similar to
maturely live so we end up having a
Stiles object again we have a button
class a label class and we have
properties inside of those objects and
then we have the inject sheet call where
we pass these Stiles
so this inject sheet is basically a
higher-order component so what we do is
we wrap our button component a normal
react component with that inject sheet
function and what it does is it actually
passes those styles as classes to the
component as a prop so we can start
using those classes on the elements for
example we can assign the button class
on the button and we can also assign the
label class on the span and as you can
see already it resembles what Miceli why
uses internally and in material you are
instead of inject sheet method there’s
another one that’s known as with styles
it’s also a higher-order component and
it’s actually more customizable and more
powerful because it also allows you to
have reference to the themes so what we
can do here is we can actually
console.log the theme just to see what
properties it contains so I’m gonna open
up the console let’s click on the plus
icon that’s gonna open up the form and
as you can see here we get a huge object
the one thing you might notice is the
pallet property that also contains a
bunch of colors for example the primary
color you can see the main color that’s
the one that we you see in the header
over there in the application that’s the
blue color and there’s other variations
of that color like the light one the
dark one and the contrast text so that’s
the white color you see in the header
over here we’re gonna explore the theme
object eventually in more detail but for
now what I’d like to show you is how we
can move on from inline styling to the more advanced with style hoc
Please follow and like us: