so the next thing we’re gonna work on is
the menu so on the Left I’d like to show
the list of links just like we’ve had
before so let’s go back to the
documentation and we could obviously use
the list component right so the list
would be almost perfect so we with the
list you could basically show a list of
elements so in this case we could show a
list of names of writers with the links
as we used to have before but the
problem with the list is that you can’t
really make the list items selected
conditionally because one of the things
I’d like to do is for example we have a
home link and if that home link is
active meaning that we’re actually on
slash home the routers currently slash
home I’d like that link to be selected
and it’s not very it’s not really built
into list items in my chil UI and of
itself a better component for that task
would be a menu so and menu actually
allows you to have items that are
selected so for example I click on this
element over here you can see a list
pops up and one of the items is
pre-selected and that’s perfect this is
going to allow us to make some of the
links active okay so in our component
what I’ll do is I’ll have a menu list
inside of the menu list we’re gonna add
menu items so we’ll have one for home
we’re also gonna have one for writers so
these are basically gonna be links right
so this one would be going to home this
one will be going to writers we’re gonna
need to import those components as well
I’ll remove divider because we’re not
using it for the time being so I’ll pass
in a menu list as well as a menu item
inside okay we can say those so now how
do we actually make the menu item a link
as it turns out that’s actually fairly
simple so if you go to the documentation
on buttons so open it in a new tab and
if you scroll to the very bottom you’re
gonna see a section on how to actually
integrate material UI with third-party
libraries and in this case they’re
specifically talking about the react
router down library so if you wanted to
make a button an actual link what you
need to do is you need to have a
component property and to that component
property you need to pass in at the
link component the owing component comes
from reactor Adama it’s just a simple
link that he used to create well anchor
tags or links and he also pass and lead
through property the to property is
gonna be added to the component and it’s
gonna be used for the link itself the
link will be the underlying
implementation for the button so this is
gonna make this button an actual link so
it’s actually fairly simple as you can
see
okay so I’ll close this for now and I’ll
go back here to our menus so what we can
do here from this point on is we can
actually start having links will turn
this menu item component to an actual
link so pass on a component property
let’s have a link this is gonna go to
slash basically to slash to our home
page and then the second one is gonna go
to slash writers like that we’re gonna
need to import the link component from
react router dumb so let’s pull that in
and let’s see if this actually works
I’ll go back here so now we have two
links and we can basically switch
between them okay so that’s pretty good
so let’s also add the links to our
writers so what I’ll do is I’ll actually
gonna map through our writers we’re
gonna need to pull them in as well so
let’s actually have our writers and I
believe we already pass writers as a
prop yes and it seems like we do so
we’re gonna have our writers property
we’re gonna map through those writers
will have a writer object and we’ll
return a menu item from here let’s have
a menu item like that for ye text we’re
gonna use the name of the writer so I’m
actually going to D structure it so
let’s have ID and name the idea would be
pretty handy because we need to pass in
the key so let’s have the ID serve as a
key also gonna need to have our
component property and we’re also going
to need to have a two property so for
now what we can do is we can basically
put in a template string so we’ll have
our slash
writers like before the rules can a need
to put in the ID of the writer and this
is an expression so we need to wrap it
with curly braces as well and finally
because we have a list over here that’s
basically gonna be a nested list we need
to do is we actually need to have
another menu list element at the top and
we’re gonna need to put in the this
logic basically inside of the menu list
that’s gonna be nested on it now as far
as nested lists go if you go back to the
documentation I think they already
described how you could do nested lists
in material UI they probably describe
that in the list section so if we go to
that section let’s see the source let’s
see what they’re doing so we are looking
for a nested list we have this nested
class on the list item inside of a list
and that list is actually nested inside
of another list obviously that’s why
it’s a nested list and then finally for
the styling we basically apply a padding
left we use the theme spacing unit
multiplied by 4 I think by default it’s
set to 8 pixels so we can have that
class we can steal it from there and we
can also add it to the list of our
classes and here and we’ll use that
nested list on menu item as well so put
in class name I’ll set it to classes dot
nested so this is supposed to apply the
padding left styling on it I’ll close
that for the time being and this is what
it’s gonna look like it doesn’t look too
bad for now okay so fix the indentation
over here just so that it’s more
readable and also understandable and
let’s see this is gonna be like that
I’ll put the arrow in the next line okay
it looks better now so the problem we
have right now is we can’t actually see
what page were on right so be useful
could like I said make some of these
items selected actually only one
depending on what URL you’re calling on
so the way we could do that is we could
actually add a selected property on the
menu item the problem is of course we
don’t know what menu item is currently
selected so what we need to know is we
actually need to know what URL wrong
now it’s not that easy inside of layout
component because the layout component
is not nested inside the route so what I
mean by that is whenever you have a
route component let’s say what’s a good
example let’s say the second one we have
a route component with a render prop and
we pass in a function that returns a
writer’s component the writer’s
component will also have access to
things like match which will contain the
URL it’s being matched by the router but
in this case in the case of layout
component we don’t actually have that
match URL property because we don’t have
a route component around layout right so
in this case the writer’s component has
a route around it so it’s wrapped inside
route but the layout is not so we need
to find a way to access the information
about the current route from the layout
component without actually having the
routes component around it so one thing
we could do is we could use with route
hoc so let’s see with route let’s search
for that and what we find is the
documentation on react router so if I go
to one of these links you’re gonna see
the information about this hoc helper
function so the way you use it is you
basically import it from reactor atom
and then if you wanted to have access to
things like location or history well if
you wrap your component with that helper
method then you’re gonna have access to
all those properties inside of it so
that’s exactly the helper that we’re
going to use so if we go back to your
code what we could do here is we can
actually import that helper at the top
so I’ll pull it in and then we already
have one hoc for the default export so
what I’m actually gonna do is I’m
actually going to use another helper
there is a compose function in the
recompose library if you’re curious
about that library it’s actually already
imported in our project if I search for
it you’re gonna see it pop up on github
it’s basically utility library that kind
of serves as lodash for reactant so if
we search for a compose function
you compose function basically allows us
to compose multiple higher-order
components behind one function so
instead of actually nesting them one
inside the other you could basically
have them on the same level and then
finally you would pass in your component
as the argument to that overarching a
function that basically wraps all those
components anyways so actually it’s very
simple so what we need to do is we need
to have with styles I’ll pass in the
styles and then also pass in with router
actually gonna pass in with router at
the top although the the order here
doesn’t really matter you can have
styles applied first or the router
applied first doesn’t really matter so
we have the layout and then how can we
remove the old one and we’re gonna pull
and compose so let’s do import compose
from recompose if you’re curious about
the recompose library it’s actually
already being installed so it’s actually
one of the dependencies if you search
for it and no modules you’re gonna see
it pop up over here now if you actually
use it in your project it will be a good
idea to actually add it as a dependency
and that’s what I’m actually gonna do so
I’ll go back to the terminal I’ll stop
the app and I’ll do yarn add recompose
even though it’s already a sub
dependency for one of our dependencies
you’ll be more reliable to actually add
it to our package.json file and that way
if that dependency gets removed for some
reason from that package in which it’s
being a sub dependency our project is
still gonna be solid because we’re gonna
have recompose in our package JSON okay
so it’s just safer for our project okay
so now we have that recompose we added
with router helper or hoc I’ll go back
to the terminal
I’ll do yarn start to restart the server
and then once we have that in our
terminal we can actually pull in the
information about the current location
so I’ll have location path the name and
this will give us the access to the
current route so to actually use path
name I’m gonna add in a selected
property so let’s say selected on the
menu item the home menu item needs to be
selected as long as the two properties
in this case you’d be a slash matches
the path name
which would be the current route so the
same thing we could basically say about
the writers link so if slash writers
matches path name then this link needs
to be active and of course the same
thing for the rest of the links so in
this case we’re actually need to match
it against the two properties so we
could obviously duplicate it but I think
what I’ll do is I’ll actually create a
constant so let’s say constant 2 this
would be the link of this menu item and
we’ll pass it in as a probably also
gonna check in if selected to property
if the two property matches the path
name then this menu item needs to be
selected that’s basically the idea and
looks like I made a typo we don’t need
this arrow this name we’re gonna indent
and the two prop I’ll put in at the top
over here so if I select let’s say
writers that’s gonna be selected and the
same thing for all the other links so
now we can actually distinguish between
the active links as well as those that
are not active so that’s pretty much it
for the drawer component in the next
tutorial we’re gonna look at the
writer’s component what I’d like to do
for the writer’s page is I’d like to
display a list of cards of the writers
my basic summary like we’re gonna show
an image we’re gonna show the name of
the writer and we’re also gonna put in a
link to the profile of that writer so
we’re gonna do that in the next tutorial
and I hope you stick around and I’ll see you next time take care
the menu so on the Left I’d like to show
the list of links just like we’ve had
before so let’s go back to the
documentation and we could obviously use
the list component right so the list
would be almost perfect so we with the
list you could basically show a list of
elements so in this case we could show a
list of names of writers with the links
as we used to have before but the
problem with the list is that you can’t
really make the list items selected
conditionally because one of the things
I’d like to do is for example we have a
home link and if that home link is
active meaning that we’re actually on
slash home the routers currently slash
home I’d like that link to be selected
and it’s not very it’s not really built
into list items in my chil UI and of
itself a better component for that task
would be a menu so and menu actually
allows you to have items that are
selected so for example I click on this
element over here you can see a list
pops up and one of the items is
pre-selected and that’s perfect this is
going to allow us to make some of the
links active okay so in our component
what I’ll do is I’ll have a menu list
inside of the menu list we’re gonna add
menu items so we’ll have one for home
we’re also gonna have one for writers so
these are basically gonna be links right
so this one would be going to home this
one will be going to writers we’re gonna
need to import those components as well
I’ll remove divider because we’re not
using it for the time being so I’ll pass
in a menu list as well as a menu item
inside okay we can say those so now how
do we actually make the menu item a link
as it turns out that’s actually fairly
simple so if you go to the documentation
on buttons so open it in a new tab and
if you scroll to the very bottom you’re
gonna see a section on how to actually
integrate material UI with third-party
libraries and in this case they’re
specifically talking about the react
router down library so if you wanted to
make a button an actual link what you
need to do is you need to have a
component property and to that component
property you need to pass in at the
link component the owing component comes
from reactor Adama it’s just a simple
link that he used to create well anchor
tags or links and he also pass and lead
through property the to property is
gonna be added to the component and it’s
gonna be used for the link itself the
link will be the underlying
implementation for the button so this is
gonna make this button an actual link so
it’s actually fairly simple as you can
see
okay so I’ll close this for now and I’ll
go back here to our menus so what we can
do here from this point on is we can
actually start having links will turn
this menu item component to an actual
link so pass on a component property
let’s have a link this is gonna go to
slash basically to slash to our home
page and then the second one is gonna go
to slash writers like that we’re gonna
need to import the link component from
react router dumb so let’s pull that in
and let’s see if this actually works
I’ll go back here so now we have two
links and we can basically switch
between them okay so that’s pretty good
so let’s also add the links to our
writers so what I’ll do is I’ll actually
gonna map through our writers we’re
gonna need to pull them in as well so
let’s actually have our writers and I
believe we already pass writers as a
prop yes and it seems like we do so
we’re gonna have our writers property
we’re gonna map through those writers
will have a writer object and we’ll
return a menu item from here let’s have
a menu item like that for ye text we’re
gonna use the name of the writer so I’m
actually going to D structure it so
let’s have ID and name the idea would be
pretty handy because we need to pass in
the key so let’s have the ID serve as a
key also gonna need to have our
component property and we’re also going
to need to have a two property so for
now what we can do is we can basically
put in a template string so we’ll have
our slash
writers like before the rules can a need
to put in the ID of the writer and this
is an expression so we need to wrap it
with curly braces as well and finally
because we have a list over here that’s
basically gonna be a nested list we need
to do is we actually need to have
another menu list element at the top and
we’re gonna need to put in the this
logic basically inside of the menu list
that’s gonna be nested on it now as far
as nested lists go if you go back to the
documentation I think they already
described how you could do nested lists
in material UI they probably describe
that in the list section so if we go to
that section let’s see the source let’s
see what they’re doing so we are looking
for a nested list we have this nested
class on the list item inside of a list
and that list is actually nested inside
of another list obviously that’s why
it’s a nested list and then finally for
the styling we basically apply a padding
left we use the theme spacing unit
multiplied by 4 I think by default it’s
set to 8 pixels so we can have that
class we can steal it from there and we
can also add it to the list of our
classes and here and we’ll use that
nested list on menu item as well so put
in class name I’ll set it to classes dot
nested so this is supposed to apply the
padding left styling on it I’ll close
that for the time being and this is what
it’s gonna look like it doesn’t look too
bad for now okay so fix the indentation
over here just so that it’s more
readable and also understandable and
let’s see this is gonna be like that
I’ll put the arrow in the next line okay
it looks better now so the problem we
have right now is we can’t actually see
what page were on right so be useful
could like I said make some of these
items selected actually only one
depending on what URL you’re calling on
so the way we could do that is we could
actually add a selected property on the
menu item the problem is of course we
don’t know what menu item is currently
selected so what we need to know is we
actually need to know what URL wrong
now it’s not that easy inside of layout
component because the layout component
is not nested inside the route so what I
mean by that is whenever you have a
route component let’s say what’s a good
example let’s say the second one we have
a route component with a render prop and
we pass in a function that returns a
writer’s component the writer’s
component will also have access to
things like match which will contain the
URL it’s being matched by the router but
in this case in the case of layout
component we don’t actually have that
match URL property because we don’t have
a route component around layout right so
in this case the writer’s component has
a route around it so it’s wrapped inside
route but the layout is not so we need
to find a way to access the information
about the current route from the layout
component without actually having the
routes component around it so one thing
we could do is we could use with route
hoc so let’s see with route let’s search
for that and what we find is the
documentation on react router so if I go
to one of these links you’re gonna see
the information about this hoc helper
function so the way you use it is you
basically import it from reactor atom
and then if you wanted to have access to
things like location or history well if
you wrap your component with that helper
method then you’re gonna have access to
all those properties inside of it so
that’s exactly the helper that we’re
going to use so if we go back to your
code what we could do here is we can
actually import that helper at the top
so I’ll pull it in and then we already
have one hoc for the default export so
what I’m actually gonna do is I’m
actually going to use another helper
there is a compose function in the
recompose library if you’re curious
about that library it’s actually already
imported in our project if I search for
it you’re gonna see it pop up on github
it’s basically utility library that kind
of serves as lodash for reactant so if
we search for a compose function
you compose function basically allows us
to compose multiple higher-order
components behind one function so
instead of actually nesting them one
inside the other you could basically
have them on the same level and then
finally you would pass in your component
as the argument to that overarching a
function that basically wraps all those
components anyways so actually it’s very
simple so what we need to do is we need
to have with styles I’ll pass in the
styles and then also pass in with router
actually gonna pass in with router at
the top although the the order here
doesn’t really matter you can have
styles applied first or the router
applied first doesn’t really matter so
we have the layout and then how can we
remove the old one and we’re gonna pull
and compose so let’s do import compose
from recompose if you’re curious about
the recompose library it’s actually
already being installed so it’s actually
one of the dependencies if you search
for it and no modules you’re gonna see
it pop up over here now if you actually
use it in your project it will be a good
idea to actually add it as a dependency
and that’s what I’m actually gonna do so
I’ll go back to the terminal I’ll stop
the app and I’ll do yarn add recompose
even though it’s already a sub
dependency for one of our dependencies
you’ll be more reliable to actually add
it to our package.json file and that way
if that dependency gets removed for some
reason from that package in which it’s
being a sub dependency our project is
still gonna be solid because we’re gonna
have recompose in our package JSON okay
so it’s just safer for our project okay
so now we have that recompose we added
with router helper or hoc I’ll go back
to the terminal
I’ll do yarn start to restart the server
and then once we have that in our
terminal we can actually pull in the
information about the current location
so I’ll have location path the name and
this will give us the access to the
current route so to actually use path
name I’m gonna add in a selected
property so let’s say selected on the
menu item the home menu item needs to be
selected as long as the two properties
in this case you’d be a slash matches
the path name
which would be the current route so the
same thing we could basically say about
the writers link so if slash writers
matches path name then this link needs
to be active and of course the same
thing for the rest of the links so in
this case we’re actually need to match
it against the two properties so we
could obviously duplicate it but I think
what I’ll do is I’ll actually create a
constant so let’s say constant 2 this
would be the link of this menu item and
we’ll pass it in as a probably also
gonna check in if selected to property
if the two property matches the path
name then this menu item needs to be
selected that’s basically the idea and
looks like I made a typo we don’t need
this arrow this name we’re gonna indent
and the two prop I’ll put in at the top
over here so if I select let’s say
writers that’s gonna be selected and the
same thing for all the other links so
now we can actually distinguish between
the active links as well as those that
are not active so that’s pretty much it
for the drawer component in the next
tutorial we’re gonna look at the
writer’s component what I’d like to do
for the writer’s page is I’d like to
display a list of cards of the writers
my basic summary like we’re gonna show
an image we’re gonna show the name of
the writer and we’re also gonna put in a
link to the profile of that writer so
we’re gonna do that in the next tutorial
and I hope you stick around and I’ll see you next time take care
Please follow and like us: