hey guys welcome back to materialise
series we’ve got a working application
here you can basically select exercises
you can new details about those
exercises and you can also sort them by
different categories but I think now is
a good time to move on to korat actions
in the very first action we gotta focus
on is the create action so what I’ll do
is I’ll go to components exercises and
I’m going to create a new directory I’m
gonna call it dialogues and let’s create
our first dialogue here so it’s going to
be create chess file let’s import react
from yet as always and let’s also export
default a functional component it’s
gonna receive props and it’s going to
return something for now it’s just going
to be a div so the idea for this credo
I’ll just have sort of like a model that
allows us to create new exercises that
we can add to our database so let’s head
over to material UI next we’re going to
look at the documentation together so
I’m going to click on get started and
let’s move on to component demos and
let’s search for dialogs
once you go met page you can already see
quite a few different examples of dialog
so we can use so for instance a simple
alert dialog would look something like
this
you click on it you can click away click
on the background it’s kind of makes it
a lot disappear
you can add buttons we can add all kinds
of text and even forms inside of that
dialog and that’s exactly what I’d like
to do so one of the examples here
actually uses a form nested inside of
the dialog for our application we’re
going to have something very similar
we’re basically going to have a dialog
that contains a form and the form is
going to allow us to enter the title
enter a description and also select the
muscles of the exercise once you click
on the create button that’s going to
create the exercise and basically add it
to the database so let’s use this exact
example I’m going to show you the source
code so let’s explain that let’s scroll
down and you can see the mark-up over
here already so you have basically a
button that allows you to open the
dialog and then you have the mark-up for
the dialogue itself so this is the
mark-up that we’re going to use so I’m
just gonna copy it over let’s go back to
the application and what instead of the
deadlift have a fragment that’s going to
wrap the button and also wrap the
dialogue itself I’m gonna base the
dialogue inside
obviously I’m gonna need to import all
those elements so we’re just gonna grab
that import statement okay let’s place
it like that the only thing is we’re
also gonna need to import the button and
on the same note I’m going to move the
dialogue to this import such that we can
have and name the import from mature UI
and by the way what the statement over
here does it basically imports
everything from material UI but in an
only extract dialogue and the button so
in order to make this import efficient
you would need to enable tree-shaking in
your setup we’re gonna talk about that a
little bit later but for now we’re just
gonna keep it like that and if you
remember in one of the previous videos I
also mention that there might as well be
some breaking changes in the quorum in
material UI such that you won’t have to
have multiple import statements from
different paths meaning that everything
would be available under maturity live
but until then this is the setup we’re
gonna have to use so let’s leave those
import statements alone we just need to
import fragment of course from react so
let’s have a name the import for
fragment now let’s see there’s anything
else that we need actually I’m going to
remove this text field that’s also in
dentist because for some reason this has
been messed up in fact let me change the
content text over here let’s say content
dentists let’s see what else the way out
we have a title for the title I think
we’re just gonna say create a new
exercise okay and I believe what this
element allows us to do is to enter sort
of like a description so we might see
something like please fill out the form
below okay and then below it we’re just
gonna have a form that’s going to
contain all of the input elements and
for the action buttons let’s actually
move one of them so we’re just going to
keep one that’s what creates inside of
it I’m going to remove the onclick
handler just for now and the color is
gonna be primary so let’s say that now
let’s not forget to the button at the
top
a button so what I’d like to do for this
button is to actually have an eye come
inside of it so actually let’s go back
to the dog so I’m going to go to buttons
and this is the type of button that I’d
like to have so it’s gonna have a plus
icon inside of it let’s see how this
actually works so you have your button
over here the very end is going to be
fab the color is primary and then we
have the class names which are optional
but inside of the button we actually put
the Add icon component and the Add icon
component if you look at the import
statements it actually comes from
material UI icons so we’re going to need
to import another library here in order
to be able to use the icons now if you’d
like to learn more about the icons make
sure to click on style and then go to
icons and essentially what you’re gonna
find in this section is that they are a
couple of different ways to handle icons
within the library so you could use your
material icons from Google and you
basically route them with the icon
component and then you put the name of
the icon that you like to use you could
also use SVG icons but more importantly
for us you could also use SVG material
icons in order to use those if you need
to import material UI icons library and
just very quickly this material UI icons
library what it simply does is it takes
T material eye icons developed by Google
and then it wraps them with the SVG icon
component so that you’re gonna be able
to use those icons inside of react so it
might sound a little bit complicated but
actually it’s not and the very next
thing we’re gonna do is we’re just
simply going to import that library so
let’s actually find it dependency
material UI icons let’s make sure we
select the latest version a lots at it
now we’re gonna wait for the
dependencies to build and then finally
once that’s going to be installed we can
just add this import statement at the
end so that we can use the add icon and
in fact for the import statement if
you’d even change it to something like
this so you can have a named import ad
in this case you’re gonna have to change
it to that
because that’s the name of the icon when
you can basically grabbed it from
material icons like that and like I said
be careful with this approach because
you’re going to need to enable tree
shaking in your
project but no let’s grab that ad icon
and let’s also put it inside of the book
and finally for the book I’m going to
use the variant of fab so what this is
going to do is it’s going to make the
button round it just like this this is
basically the example I’d like to use
and what else do we need we need the
color let’s set it to primary so to
color that’s going to be primary and
finally there’s also another property
called meeting and that’s probably
elected to manipulate this size of the
buttons and you can find it over here so
you could have your small medium and
large buttons as well as the mini
buttons that are basically controlled by
the mini property so you didn’t find
more over here your small your medium of
your large as well as your mini button
over here go back let’s save this hey
let’s actually use the create dialogue
somewhere the place that I’d like to put
it in is the app bar so let’s actually
go back to the up our documentation
I believe we use this example over here
so we can essentially place the button
right after typography and if we set
flex to 1 on the typography element
that’s going to push the button to the
far right like that so the instead of
the login button we’re gonna have the
plus icon that’s what we’re gonna do so
let’s grab this create dialogue let’s go
to the header I’m actually going to
import create dialogue from we’re gonna
need to go up and to go to exercises
dialogues and then create ok let’s grab
the create dialogue let’s also put it at
the very end over here let’s say that
and of course as you can see here we get
an error essentially the problem here is
trying to get the property of open from
the states and we’ve got a functional
component over here so the one thing to
do is we could of course keep the
dialogue itself separate from the button
and typically this is what you would do
so the button would be somewhere else
right and you would have to work out the
communication with the button and the
dialogue through the properties so
like their own child communication
something that I’ve explained before in
the channel but the other thing you
could do is you could actually change
this to a class-based component and of
course we need to extend the component
that we’re gonna need to the port for me
Act
so let’s do that first that’s important
component and the finally inside you’re
going to need to have your a render
method you need to return and then we
can just grab the fragment okay and now
that we converted this to a stateful
component we can actually start adding
this state on the model or the dialog so
we’re gonna have a state it’s gonna be
an object we’re gonna have an open
property by default that’s going to be
false and then lastly I’m just going to
extract that property from the state so
let’s have the open property is
structured from state okay and I’m going
to change the reference to just be open
variables it would just create it and
the only thing though is we’re gonna
have to remove the color property
because you can almost not see the
button and finally let’s also fix the
styling on the typography element so I’m
gonna say style this would be an object
and I’m gonna say flex equals one this
is going to push the button to the far
right like I said finally in order to
make the button actually work where you
need to add some kind of behavior to it
so what I’m gonna do is I’m actually
gonna add an on click and learn I’m
gonna call it handle toggle let’s create
this method handle toggle we’re gonna
need to have a function that’s going to
set the state so let’s do exactly that
we’re basically just going to set the
open property to the exact opposite of
its value so the state open which is
basically getting negate it and let’s
see if that works so I’m gonna click on
the plus button and that’s the open B
Moodle and of course the one thing that
we are actually missing at this point if
we go back to the dialogues we actually
need to provide another property on the
doll of itself if you expand the example
that we use it’s actually called on
clothes so let’s not forget to include
that property and the on clothes for now
it’s referencing the handle close method
that doesn’t actually exist
we said we’re going to use handle toggle
I’m also going to remove area labeled by
because we don’t really care about
accessibility for this simple demo just
gonna indent some of the things over
here so we’ve got the title here we’ve
got a dialog content I’m gonna fix that
and lastly this button and I think it
should be fine for now let’s click on
the plus button again it’s gonna open a
dialog if you click away that’s gonna
close it and finally I’m also gonna add
the variant of race to the button so now
if you click on the plus icon that’s what the button is going to look like
series we’ve got a working application
here you can basically select exercises
you can new details about those
exercises and you can also sort them by
different categories but I think now is
a good time to move on to korat actions
in the very first action we gotta focus
on is the create action so what I’ll do
is I’ll go to components exercises and
I’m going to create a new directory I’m
gonna call it dialogues and let’s create
our first dialogue here so it’s going to
be create chess file let’s import react
from yet as always and let’s also export
default a functional component it’s
gonna receive props and it’s going to
return something for now it’s just going
to be a div so the idea for this credo
I’ll just have sort of like a model that
allows us to create new exercises that
we can add to our database so let’s head
over to material UI next we’re going to
look at the documentation together so
I’m going to click on get started and
let’s move on to component demos and
let’s search for dialogs
once you go met page you can already see
quite a few different examples of dialog
so we can use so for instance a simple
alert dialog would look something like
this
you click on it you can click away click
on the background it’s kind of makes it
a lot disappear
you can add buttons we can add all kinds
of text and even forms inside of that
dialog and that’s exactly what I’d like
to do so one of the examples here
actually uses a form nested inside of
the dialog for our application we’re
going to have something very similar
we’re basically going to have a dialog
that contains a form and the form is
going to allow us to enter the title
enter a description and also select the
muscles of the exercise once you click
on the create button that’s going to
create the exercise and basically add it
to the database so let’s use this exact
example I’m going to show you the source
code so let’s explain that let’s scroll
down and you can see the mark-up over
here already so you have basically a
button that allows you to open the
dialog and then you have the mark-up for
the dialogue itself so this is the
mark-up that we’re going to use so I’m
just gonna copy it over let’s go back to
the application and what instead of the
deadlift have a fragment that’s going to
wrap the button and also wrap the
dialogue itself I’m gonna base the
dialogue inside
obviously I’m gonna need to import all
those elements so we’re just gonna grab
that import statement okay let’s place
it like that the only thing is we’re
also gonna need to import the button and
on the same note I’m going to move the
dialogue to this import such that we can
have and name the import from mature UI
and by the way what the statement over
here does it basically imports
everything from material UI but in an
only extract dialogue and the button so
in order to make this import efficient
you would need to enable tree-shaking in
your setup we’re gonna talk about that a
little bit later but for now we’re just
gonna keep it like that and if you
remember in one of the previous videos I
also mention that there might as well be
some breaking changes in the quorum in
material UI such that you won’t have to
have multiple import statements from
different paths meaning that everything
would be available under maturity live
but until then this is the setup we’re
gonna have to use so let’s leave those
import statements alone we just need to
import fragment of course from react so
let’s have a name the import for
fragment now let’s see there’s anything
else that we need actually I’m going to
remove this text field that’s also in
dentist because for some reason this has
been messed up in fact let me change the
content text over here let’s say content
dentists let’s see what else the way out
we have a title for the title I think
we’re just gonna say create a new
exercise okay and I believe what this
element allows us to do is to enter sort
of like a description so we might see
something like please fill out the form
below okay and then below it we’re just
gonna have a form that’s going to
contain all of the input elements and
for the action buttons let’s actually
move one of them so we’re just going to
keep one that’s what creates inside of
it I’m going to remove the onclick
handler just for now and the color is
gonna be primary so let’s say that now
let’s not forget to the button at the
top
a button so what I’d like to do for this
button is to actually have an eye come
inside of it so actually let’s go back
to the dog so I’m going to go to buttons
and this is the type of button that I’d
like to have so it’s gonna have a plus
icon inside of it let’s see how this
actually works so you have your button
over here the very end is going to be
fab the color is primary and then we
have the class names which are optional
but inside of the button we actually put
the Add icon component and the Add icon
component if you look at the import
statements it actually comes from
material UI icons so we’re going to need
to import another library here in order
to be able to use the icons now if you’d
like to learn more about the icons make
sure to click on style and then go to
icons and essentially what you’re gonna
find in this section is that they are a
couple of different ways to handle icons
within the library so you could use your
material icons from Google and you
basically route them with the icon
component and then you put the name of
the icon that you like to use you could
also use SVG icons but more importantly
for us you could also use SVG material
icons in order to use those if you need
to import material UI icons library and
just very quickly this material UI icons
library what it simply does is it takes
T material eye icons developed by Google
and then it wraps them with the SVG icon
component so that you’re gonna be able
to use those icons inside of react so it
might sound a little bit complicated but
actually it’s not and the very next
thing we’re gonna do is we’re just
simply going to import that library so
let’s actually find it dependency
material UI icons let’s make sure we
select the latest version a lots at it
now we’re gonna wait for the
dependencies to build and then finally
once that’s going to be installed we can
just add this import statement at the
end so that we can use the add icon and
in fact for the import statement if
you’d even change it to something like
this so you can have a named import ad
in this case you’re gonna have to change
it to that
because that’s the name of the icon when
you can basically grabbed it from
material icons like that and like I said
be careful with this approach because
you’re going to need to enable tree
shaking in your
project but no let’s grab that ad icon
and let’s also put it inside of the book
and finally for the book I’m going to
use the variant of fab so what this is
going to do is it’s going to make the
button round it just like this this is
basically the example I’d like to use
and what else do we need we need the
color let’s set it to primary so to
color that’s going to be primary and
finally there’s also another property
called meeting and that’s probably
elected to manipulate this size of the
buttons and you can find it over here so
you could have your small medium and
large buttons as well as the mini
buttons that are basically controlled by
the mini property so you didn’t find
more over here your small your medium of
your large as well as your mini button
over here go back let’s save this hey
let’s actually use the create dialogue
somewhere the place that I’d like to put
it in is the app bar so let’s actually
go back to the up our documentation
I believe we use this example over here
so we can essentially place the button
right after typography and if we set
flex to 1 on the typography element
that’s going to push the button to the
far right like that so the instead of
the login button we’re gonna have the
plus icon that’s what we’re gonna do so
let’s grab this create dialogue let’s go
to the header I’m actually going to
import create dialogue from we’re gonna
need to go up and to go to exercises
dialogues and then create ok let’s grab
the create dialogue let’s also put it at
the very end over here let’s say that
and of course as you can see here we get
an error essentially the problem here is
trying to get the property of open from
the states and we’ve got a functional
component over here so the one thing to
do is we could of course keep the
dialogue itself separate from the button
and typically this is what you would do
so the button would be somewhere else
right and you would have to work out the
communication with the button and the
dialogue through the properties so
like their own child communication
something that I’ve explained before in
the channel but the other thing you
could do is you could actually change
this to a class-based component and of
course we need to extend the component
that we’re gonna need to the port for me
Act
so let’s do that first that’s important
component and the finally inside you’re
going to need to have your a render
method you need to return and then we
can just grab the fragment okay and now
that we converted this to a stateful
component we can actually start adding
this state on the model or the dialog so
we’re gonna have a state it’s gonna be
an object we’re gonna have an open
property by default that’s going to be
false and then lastly I’m just going to
extract that property from the state so
let’s have the open property is
structured from state okay and I’m going
to change the reference to just be open
variables it would just create it and
the only thing though is we’re gonna
have to remove the color property
because you can almost not see the
button and finally let’s also fix the
styling on the typography element so I’m
gonna say style this would be an object
and I’m gonna say flex equals one this
is going to push the button to the far
right like I said finally in order to
make the button actually work where you
need to add some kind of behavior to it
so what I’m gonna do is I’m actually
gonna add an on click and learn I’m
gonna call it handle toggle let’s create
this method handle toggle we’re gonna
need to have a function that’s going to
set the state so let’s do exactly that
we’re basically just going to set the
open property to the exact opposite of
its value so the state open which is
basically getting negate it and let’s
see if that works so I’m gonna click on
the plus button and that’s the open B
Moodle and of course the one thing that
we are actually missing at this point if
we go back to the dialogues we actually
need to provide another property on the
doll of itself if you expand the example
that we use it’s actually called on
clothes so let’s not forget to include
that property and the on clothes for now
it’s referencing the handle close method
that doesn’t actually exist
we said we’re going to use handle toggle
I’m also going to remove area labeled by
because we don’t really care about
accessibility for this simple demo just
gonna indent some of the things over
here so we’ve got the title here we’ve
got a dialog content I’m gonna fix that
and lastly this button and I think it
should be fine for now let’s click on
the plus button again it’s gonna open a
dialog if you click away that’s gonna
close it and finally I’m also gonna add
the variant of race to the button so now
if you click on the plus icon that’s what the button is going to look like
Please follow and like us: