hey guys it’s Alex Beck here so now that
we have the ability to add new exercises
to our database let’s also add the
functionality to delete exercises so I’m
going to go to index GS and we already
have a list component over here oh
basically we include the list item as
well as list item text well let’s head
over to material UI documentation okay
I’m gonna open the docs for my GOI next
let’s go get started and I’m gonna look
for the list component I click on list
and if you remember we used a very
simple example over here which basically
just represents a list that has a list
item with the text that’s exactly what
we use right so if you scroll down
you’re gonna see a bit more
sophisticated examples so upward from
just having the list item itself you
could also start adding icons you could
even add form controls like checkboxes
or even avatars fix them this first
example over here you can see that apart
from having just the list item text we
can also include with soonas list items
secondary action and inside of it we can
include an icon button with the actual
icon and then we can actually assign
some kind of behavior to that button so
back in our application let’s add
another element over here and it’s going
to be list items secondary action ok
it’s going to be a wrapping element and
of course we need to close it off like
that and then once we do include it of
course we need to also import it so I’m
going to include it over there and now
be a good time to adjust the placement
of these imports so we’re sort of put
them on separate lines like that and
this would be the last one ok this looks
good now with that in place we can
actually put the icon button wrapper
inside us I’m going to place the icon
button and the icon button itself can be
extracted from maturely life of course
like that and if you’re not sure about
the path of course you can always go
back to the dog they scroll up we’re
gonna see the import statement that
looks something like this they abort the
icon button directly from show UI so
that’s exactly we can do amel but we
have the icon button wrap or we actually
go to the style icons section and in
here we can actually find information
about the SVG material icons which I
talked about before and if you click on
the links and that leads to the Google
Website so the material design website
you could actually start searching for
icons so in this scenario we’re looking
for if you delete icon like that if you
want to use that icon the only thing
that we need to do is we basically need
to reference it so let’s do it board
delete make sure to keep it as camelcase
and then we import it from material UI
like us like that so let’s grab that
icon and let’s place it inside the I can
button wrapper just got base it in fix
the annotation and if you save the file
you’re gonna see the icon appearing on
the right side of the list item and once
we have that we can actually assign an
on-click event heller
and in this case this would be a
callback function we can call the on
delete property which we’re going to
extract when it drops passing the ID of
the current exercise okay and then we
just simply add the on delete at the end
and of course this property does not
exist at the moment so we have to also
pass it to the exercises like that on
delete let’s also create a method we
would call it this handle exercise
delete I’m gonna copy the name of the
method this method is going to accept
the ID of the exercise and it’s going to
return a function which in the end would
simply do the following and we basically
need to set the state
and then what we can do instead of set
state we can actually pass another
callback function which would return an
object in the end that’s why I need to
wrap it with parentheses and that
function is going to accept the previous
state object from which we’re going to
extract the exercises and then finally
we’re going to set the exercises
property itself so what I’m gonna do is
I’m going to look through the exercises
with the filter method we’re gonna
accept an exercise and we’re basically
just going to filter it down to those
exercises that do not contain the
current exercise and because we have the
idea we already know which exercise
needs to be excluded we’re just going to
say when we’re looping through the
exercises and we get the exercise object
if the ID of that exercise object does
not equal to the ID or the exercise that
needs to be deleted well that means that
that exercise needs to be excluded from
the list and once we save the file let’s
try deleting the first one overhead
press
I click home delete and then the
exercise disappears we can basically
delete all of them now the only thing as
you can see here when you actually
delete exercises the category disappears
as well now that’s not a problem if you
add a new exercise right so if I were to
let’s say a deadlift or our back
category and then we can put a
description when I click on create of
course that’s going to create the
exercise and the category would be added
back now if you did want to keep the
categories as they are the one thing you
could do is you could actually modify
the get exercises by muscles method so
there’s a few things we could do here
one of them would be to create the
initial set of exercises so we can take
the muscles right the muscles are coming
from the store and the muscles here
basically represent the categories that
we have in our application so these
muscles are never going to change so we
can rely on that
so what we can do actually is we can
create an object out of those muscles so
out of the muscles array we can create
an object that contains all those
muscles with
an empty array assigned to them so that
when you delete something from the
muscles you’re not going to delete the
property of the object but you’re
actually going to leave out the empty
array with that property now it’s a bit
confusing but it’s actually going to
make sense so let’s create a constant
here I’m going to call it initial
exercises like that and we’re basically
going to loop through the muscles so I’m
going to call the reduce method on it
and the reduced method is going to
accept a callback as always and I think
we’re going to return an object and what
we’re going to do is the first one would
be the accumulator so the exercises the
second one you can call it category or
you could also call it muscles basically
that’s the muscles group where the
category and then what we do in the end
is we basically have checked out the
exercises and then we also add a new
property on the object in fact we’re
going to pass an empty object as the
initial value for the reduce function
and then we’re basically going to assign
this an empty array and I think I called
it muscles actually needs to be category
of course but you could also keep the
argument named as muscles it doesn’t
really make any difference but I’m gonna
keep it as category now this is
confusing as hell so what I’m gonna do
is let’s do console.log and it exercises
that’s actually constant leg out the
muscles so the muscles you already know
what the value is right because it’s
coming from the store directly so it’s
just going to be the list of all the
categories but what happens if you save
that and I’m going to open up the
console and you already see the list of
muscles pretty much what you would
expect right but if you spend the object
over here you’re gonna see an object
that contains all the categories so all
those properties all those categories
are basically cloned to the object as
object properties and then the
assignment value is always an empty
array now if we do pass this initial
exercises as the initial value instead
of the empty
object when we do all this crazy
transformation to get our object or
excercises object if we passed that as
an initial value and I save it let’s see
what happens if I delete something so
let’s say I want to delete benchpress
well let’s actually going to keep the
chest category over there and the reason
it does that is because it’s actually
going to keep an empty array for that
property on the state on the exercises
property of the state and what’s even
better is that we don’t need to have
this condition over here because we
already know that the property already
exists on the exercises object so we can
just simply assign this expression to it
directly without the condition this is
going to extract all of the existing
exercises if there’s any because there
could be a case in which you just have
an empty array so it’s going to extract
an empty array into it and it’s going to
add the exercise so if you save that I’m
going to refresh the application just in
case so let’s try deleting something
that just basically keeps the category
in the top you’re still gonna see the
title of the muscle group and then you
delete other stuff of course as you
expect that’s gonna keep the categories
back on the left pane right so that’s basically it for deleting exercises
we have the ability to add new exercises
to our database let’s also add the
functionality to delete exercises so I’m
going to go to index GS and we already
have a list component over here oh
basically we include the list item as
well as list item text well let’s head
over to material UI documentation okay
I’m gonna open the docs for my GOI next
let’s go get started and I’m gonna look
for the list component I click on list
and if you remember we used a very
simple example over here which basically
just represents a list that has a list
item with the text that’s exactly what
we use right so if you scroll down
you’re gonna see a bit more
sophisticated examples so upward from
just having the list item itself you
could also start adding icons you could
even add form controls like checkboxes
or even avatars fix them this first
example over here you can see that apart
from having just the list item text we
can also include with soonas list items
secondary action and inside of it we can
include an icon button with the actual
icon and then we can actually assign
some kind of behavior to that button so
back in our application let’s add
another element over here and it’s going
to be list items secondary action ok
it’s going to be a wrapping element and
of course we need to close it off like
that and then once we do include it of
course we need to also import it so I’m
going to include it over there and now
be a good time to adjust the placement
of these imports so we’re sort of put
them on separate lines like that and
this would be the last one ok this looks
good now with that in place we can
actually put the icon button wrapper
inside us I’m going to place the icon
button and the icon button itself can be
extracted from maturely life of course
like that and if you’re not sure about
the path of course you can always go
back to the dog they scroll up we’re
gonna see the import statement that
looks something like this they abort the
icon button directly from show UI so
that’s exactly we can do amel but we
have the icon button wrap or we actually
go to the style icons section and in
here we can actually find information
about the SVG material icons which I
talked about before and if you click on
the links and that leads to the Google
Website so the material design website
you could actually start searching for
icons so in this scenario we’re looking
for if you delete icon like that if you
want to use that icon the only thing
that we need to do is we basically need
to reference it so let’s do it board
delete make sure to keep it as camelcase
and then we import it from material UI
like us like that so let’s grab that
icon and let’s place it inside the I can
button wrapper just got base it in fix
the annotation and if you save the file
you’re gonna see the icon appearing on
the right side of the list item and once
we have that we can actually assign an
on-click event heller
and in this case this would be a
callback function we can call the on
delete property which we’re going to
extract when it drops passing the ID of
the current exercise okay and then we
just simply add the on delete at the end
and of course this property does not
exist at the moment so we have to also
pass it to the exercises like that on
delete let’s also create a method we
would call it this handle exercise
delete I’m gonna copy the name of the
method this method is going to accept
the ID of the exercise and it’s going to
return a function which in the end would
simply do the following and we basically
need to set the state
and then what we can do instead of set
state we can actually pass another
callback function which would return an
object in the end that’s why I need to
wrap it with parentheses and that
function is going to accept the previous
state object from which we’re going to
extract the exercises and then finally
we’re going to set the exercises
property itself so what I’m gonna do is
I’m going to look through the exercises
with the filter method we’re gonna
accept an exercise and we’re basically
just going to filter it down to those
exercises that do not contain the
current exercise and because we have the
idea we already know which exercise
needs to be excluded we’re just going to
say when we’re looping through the
exercises and we get the exercise object
if the ID of that exercise object does
not equal to the ID or the exercise that
needs to be deleted well that means that
that exercise needs to be excluded from
the list and once we save the file let’s
try deleting the first one overhead
press
I click home delete and then the
exercise disappears we can basically
delete all of them now the only thing as
you can see here when you actually
delete exercises the category disappears
as well now that’s not a problem if you
add a new exercise right so if I were to
let’s say a deadlift or our back
category and then we can put a
description when I click on create of
course that’s going to create the
exercise and the category would be added
back now if you did want to keep the
categories as they are the one thing you
could do is you could actually modify
the get exercises by muscles method so
there’s a few things we could do here
one of them would be to create the
initial set of exercises so we can take
the muscles right the muscles are coming
from the store and the muscles here
basically represent the categories that
we have in our application so these
muscles are never going to change so we
can rely on that
so what we can do actually is we can
create an object out of those muscles so
out of the muscles array we can create
an object that contains all those
muscles with
an empty array assigned to them so that
when you delete something from the
muscles you’re not going to delete the
property of the object but you’re
actually going to leave out the empty
array with that property now it’s a bit
confusing but it’s actually going to
make sense so let’s create a constant
here I’m going to call it initial
exercises like that and we’re basically
going to loop through the muscles so I’m
going to call the reduce method on it
and the reduced method is going to
accept a callback as always and I think
we’re going to return an object and what
we’re going to do is the first one would
be the accumulator so the exercises the
second one you can call it category or
you could also call it muscles basically
that’s the muscles group where the
category and then what we do in the end
is we basically have checked out the
exercises and then we also add a new
property on the object in fact we’re
going to pass an empty object as the
initial value for the reduce function
and then we’re basically going to assign
this an empty array and I think I called
it muscles actually needs to be category
of course but you could also keep the
argument named as muscles it doesn’t
really make any difference but I’m gonna
keep it as category now this is
confusing as hell so what I’m gonna do
is let’s do console.log and it exercises
that’s actually constant leg out the
muscles so the muscles you already know
what the value is right because it’s
coming from the store directly so it’s
just going to be the list of all the
categories but what happens if you save
that and I’m going to open up the
console and you already see the list of
muscles pretty much what you would
expect right but if you spend the object
over here you’re gonna see an object
that contains all the categories so all
those properties all those categories
are basically cloned to the object as
object properties and then the
assignment value is always an empty
array now if we do pass this initial
exercises as the initial value instead
of the empty
object when we do all this crazy
transformation to get our object or
excercises object if we passed that as
an initial value and I save it let’s see
what happens if I delete something so
let’s say I want to delete benchpress
well let’s actually going to keep the
chest category over there and the reason
it does that is because it’s actually
going to keep an empty array for that
property on the state on the exercises
property of the state and what’s even
better is that we don’t need to have
this condition over here because we
already know that the property already
exists on the exercises object so we can
just simply assign this expression to it
directly without the condition this is
going to extract all of the existing
exercises if there’s any because there
could be a case in which you just have
an empty array so it’s going to extract
an empty array into it and it’s going to
add the exercise so if you save that I’m
going to refresh the application just in
case so let’s try deleting something
that just basically keeps the category
in the top you’re still gonna see the
title of the muscle group and then you
delete other stuff of course as you
expect that’s gonna keep the categories
back on the left pane right so that’s basically it for deleting exercises
Please follow and like us: