Blockchanapp Detals
Blockchanapp Detals
gender is mail and with the blood type is B positive and the allergies
pulled in allergy and the diagnosis is osteoporosis and the treatment is
surgery and now we are going to submit the record so here you can see
the action pending is coming up and you need to hit confirm and
whenever you will hit confirm it will take some time and after that the
transaction will be successful so let's wait for the transaction to get
successful yeah so as you can see here the action successful has occurred
now
if we will go to the data and see below we can see that every data is here
and if we want to delete some data let's say I want to delete this pack PCA
data so I am going to delete it it is asking whether you want to delete it or
not it will be lost forever so yes we want to delete it so hit confirm so here
you will see that the action pending is coming up and we need to hit
confirm and now the action pinning will be confirmed and as you can see
the action is successful and here if you will see then the data is
gone so this is a simple application and it will give you a brief introduction
of how we can program the back end of our application the front end of
our application and also the smart contract which is working behind this
application and also I want to show you that we are going to deploy it in a
different test net like sepulia so it will be deployed to sepulia and you can
go to sepulia and also to call it a set so yeah it will be a very interesting
project So eventually I am going to make a folder
and I will name that folder as medical record [Music] in that folder [Music]
here or is now started now I am just setting up so initially you need to
create a rear tab so for that and I want to create the app in this type so I
will just write a normal created [Music] okay so now we are going to add
harder so we will just try the on ADD hard head and click it up so it will
take some time so now how that is added so let's start with product if you
don't know that's it okay you can check my setup video
so as now it is okay okay so now as you can see that all the setups are
complete so let's make the contact first I will just simply delete the
contact here and make a new contract to where we will write something
like medical records dot so as it is we will start with spdx right since
identity power okay and right now solution we will be using our version of
0.8.0 and above all right zero okay and let's make the contract Point yeah
enable service okay so usually we will be making uh um so this will just
have the record of the
contains some parameters like we went to the call ID an instant like when
the record is created and after that it will contain string name what's the
name of the patient and you can see which what is the age of the patient
and I will again write down like what is sitting out the patient and also I
will take some parameter like blood type like what is the blood group the
patient and also I will write to something like a large cheese or explain
treatment like that okay so this is our struct and now we
are going to write some functions function to add record so let's add the
function let me just give this one uh and also so it will take screen name
and I will make it um memory card like if the name will be stored in the
memory as you will know that the strings are stored in the memory when
we are taking it as computers okay so UNC age and also the change
memory last type and also write string memory I will choose foreign
[Music] [Music] [Music] ID [Music] equal to record and here we will see the
record ID and hit the timestamp you will get Block dot style instant and
after that it will be name it will be http left side it will be allergies
diagnosis and there will be the equipment details okay so you are we have
stored the these details in the record snapping where it will be stored
according to the record ID and here we will edit an effect so initially let's
write the event first like this record and here and it is for Less confusion
and record ID and punct256 and stand thanks spam and also the name
and UI pH and explain Kindle it's getting blood type so write it as demo
case level explain allergies [Music] thank you so it's like that ah record
artist [Music] so okay and now we will be adding the medical records then
we limit that so we will write medical record thank you okay I have this
made a mistake I have I forgot to foreign so here we will be stored in
record ID and block dots and jump and also the name H the gender of the
blood type [Music] okay sorry for that mistake [Music] and allergies
[Music] and then we will add diagnosis and then we will add treatment
okay so it will emit the medical record at that part even and now we are
finished with this function and now we are going to write one more
function for deleting the Box Okay so first we will run itself or I do topic
okay here I we will add some parameters so that okay [Music] and if it is
thank you again [Music] box and the record ID okay so here we are storing
the stock company [Music] we are just naming this as a level as it
is the structure right so here as you can see the part so here we are just
making a variable of record and you need to write here storage foreign
store we will edit the delete records even um record so again let me just
move Network everything will be same just like the previous one so I will
just copy and paste it and it will just delete check out [Music] it looks good
to me now we will add the parameters to the image so it will be the first
parameter is record ID so like for the record ID as we have stored the
of spa certain records so we will be adding the record ID and it will give us
the timestamp the returns and here we will return R2 okay so we are
going to the records and the mapping and then we are searching the
struct very struct variable records now with the ID so when I get the ID we
will switch the time I hope you got it okay so next it will be that and you
want to okay or ID create screen memory okay so we will just write record
ID a name okay okay so also here Redbox now we will add one more thing
again age
I think it is UNT and it will be that h and similarly the other variables okay
so next is okay I just copy paste with some so it will be changed the blood
type allergies diagnosis treatment and will get deleted you will also make
a function of ventilator so this one will do it get changed this one in the
blood type again hello cheese [Music] okay diagnosis this world always
made for the dimensions right because foreign [Music] [Music] [Music]
diagnosis and here we are going to ask for that which is
the block type okay so I think everything is fine we have node seven data
functions okay and also so our medical student part the contract of the
medical record is created now we are going to make the back-end number
so before that we need to test this function sorry this smart contract and
also deploy it to the test net foreign [Music] to see if there is any errors or
not I hope it will be fine yeah it got compiled Okay so let me again explain
the smart contract okay so this is our medical record contract
which will store the medical record of patients and here we are giving a
vaccine called record ID so consider this as an index and there is a
mapping of record like oh this is a stock record like what is a stop so a
stock tool can consider it as a variable which we are creating based on our
necessities details of the patient allergies diagnosis and treatment and the
record ID is also stored in here and we are also storing it in the records like
the record it will be here and the records will be stored as
records in the records mapping and also deleted the estimated sources
that were a particular record is deleted it or not based on the record ID
okay and these are some of the events which we are recording When the
function is mixed up like here we are adding records and the record ID is
getting increased and then we are adding the record on the record section
a record mapping sorry and after that when it is getting inserted the
record mapping we are just emitting an event called Advocate similar to
the one
in the deleted record doing the same thing we are just deleting the record
and slow doing it in the is deleted with the record ID and this is the emit
delete record event and this is all the data functions to get the necessary
details okay so now let's test the application so for that where what you
need to do is you need to go to test and here you need to clean these
things up okay and just right here let's give it a name so I was thinking as
the name as just try here okay sorry [Music] yeah okay so this is the five
medical record
test so here we are going to write the test so let me make it aside so that
you can see the medical record and also the medical record test files we
will test the functions and everything one by one so let's first initialize the
this right method so describe record so this is a convention where we are
giving some disk drives and inside the describes we are giving some eight
functions so that we can just move this so like that we have initialized
third described function and here we are just testing the medical report
contact using
this described and inside it we need to First initialize sum of variables like
let me call and this one and the instructions response transaction received
okay so these are some of the label variables uh here in the medical we
will be storing this project and the user one will be the account which is
going to access it uh okay so we need to write before each so what is
before it so before which means that it is going to run before the element
the inside elements get triggered you can consider it as the
sing so they are let us first fetch the accounts and because we will be
reporting them from product if it is not getting triggered then you can also
write this slide it is specific and after that we are just allotting user word
as accounts one to be the first account okay so I'm going to write it yeah
so now user work is accountable and now we are going to fetch the
medical smart contact we will write Medical equal to always in first dot get
Contract Factory so here we are going to fetch the record
we will just type the name of the record as a medical record okay and
after that we will just Dot connects it is the one because user one is going
to deploy it and then we will write deploy so what this line is doing is that
we are fetching the smart contract and after that we are deploying it using
the deploy function and now connect three is used to give the information
that which user is going to deploy like user one here is okay so now as we
have written a views before each now we are going to write the
so we will add the footage we will first execute that function using this
again response you have to awaken a bit well dot and add records so
before that we need to connect it with one okay so now user one is
executing the add contact to add some data about the patient so we will
just add some data so let me just give it some depth of some data these
are right of data like so we are just testing it so for that reason I'm just
giving some Tamil data Okay so now we are adding it and after that we
are just wait for the block for permission so transaction we will see equal
to our reaction response then create so we are going to wait for the
transaction response and after that the medical ad record with these
records will be added to the smart contract and after that we can test it so
now it is added and requested uh like Google test whether it's in its uh ad
report is it or not so NX for the event foreign like the event so for testing
the editor we need to add a variable like constitute event equal
to our transaction we'll see is zero so this will give us the event
parameters so please check whether it is the name is same option equal
like it will be equal to this one so first terminal should be equal then let's
test it yeah so it is working after that we will just again make a alts
vertical so that we can get these arguments so once the answer is equal
to even dot R okay so we will again check that these variables are same or
not so we will write uh I will check the time stamp first so time scan
dot two you cannot talk equal that if you look uh so the timestamp will not
be equal to zero because it will have a certain timestamp and after that
we will write again uh expect event that also dot main dot two dot equals
expect rs.h dot Google dot equal to 22 right we have written here 2.2 so
that's all right and again realizing is that the blood type okay so the arcs
dot blood type foreign so 2 dot equal s also these three parameters the
allergies diagnosis and treatment are allergies F2 dot equals
inspect RC Dot diagnosis 2 that equal okay so I have given here the name
thank you and all these three as it is a damage data so it doesn't matter
well so here also can go and here we will check the treatment so I hope it
works fine so let's test it out okay so expected unrefined to be equal be
positive okay so what I have done I did something wrong I think okay here
also I have again [Music] I don't know why I am doing this mistakes so
let's test it out so when you are testing it you can see that the
smart contract is automatically filed so it's your choice you can compile it
previously or you can also directly start sticking and testing and the smart
contract will again you just compile itself okay so now we have checked
the event to now we are going to just write one more case it guess that
the get report function is working properly or not so uh you know finally or
not so at the same time we are just checking this function that we are
getting the record or not okay actually I don't think I need to write
this function because uh we are adding record we need to first take that
the weather today for ID is okay so by we are we can add one more
function without getter functions so it can we will add one more function
like to get the records directly we are getting these records but if these
records we are getting are individually but now we are going to fetch the
records together which returns here you want to type like this UI and T is
the record ID and a string memory this is going to return the name I think
and
the UNT is the age and after that we will write streaming memory after
that we're looking at string like I think this is the blood type this is the
energy this is the diagnosis and this is for the treatment okay so I like that
and we will return we will first test the record from the students so let's
forward to record equal to the records records with ID uh record ID so we
are storing the record with record ID this one and after that what we are
going to do is we will return things okay so the first one is timestamp not
break or the ID so we are just going to get the response done and after
that record dot image blood five six or more allergies record Dot diagnosis
record document okay so these are some of the functions which we are
going to return okay sorry for that so I forgot I'm going to like this in a
bracket so here is thank you okay so let me do this that you are having
some easiest thing okay so now we are returning this yeah so now as we
have added a function get forward we can directly get those records here
so let's get these records so we will check the get record ID get report
function is working we will write as particular here it is showing your sign
number of arguments which will be done two one more now it is fine one
two three four five one two three four five one the name is okay so it is all
good so now we are going to check this one so we will just mention the
variable first so the first one we are getting is timestamp as you can see
here we are posting the timestamp and building name and then a general
difference so we will
just write like that and scan and then it's gender blood type I like cheese
boxes diagnosis and after the treatment okay so I think that everything is
fine okay and now we will like awake my vehicle dot get to record quick
record ID like here you can see we are getting the record get record with
ID so here the right ID will be one because we are running our first
checkup okay so now these variables are stored in these local variables
and after that we are going to just write uh what we already will not
expect
to expect negative 12 but it and recorder items I first check the ID equal
to 1 so let us first check that whether the ID is same or not okay so it is
okay that's good the ID people so after that we are going to check these
parameters like the timestamp name H to time scan dot two now equal 1
0 it should not be equal to zero and it should have some standards done
so that's the thing uh expected name dot two dot equal we have given a
name as Boston right last one and similarly the other things like age
it is fast so now we are going to this type or we are going to test the
delete function okay so starting with the digit one so describe delete so
we are now going towards the delete function so get into root report so we
are working on that that thing so before it we will add as same function
and after that we are going to Make a ad record so transaction we can just
copy paste it from the application so we are just looking at the record and
after that we are going to delete it okay so we have made that record and
now
don't forget to record so I hope you remember the function get recorded
record okay delete it you can see it will return whether the [Music] so it
should move through to be equal to okay let's test it yeah so the next one
is we are going to see the emit event like as you have seen that we are
editing an event in the deleting records also this medical record delete
records so we are going to check whether it animates or delete event or
not okay and after that we will write first event equal to let's
just select the previous one transactions dot events number zero so I will
teach you more detailed tests in our upcoming videos for now I am just
making some simple tests and I'll just initially check the name of table
event this copy it and paste it either is a beautiful framework like it helps
you in testing deployment and much more so that's why I prefer harder
okay so it is good now we will check the arguments so first okay even the
dot acts so now we will write time instead actually we can just copy paste
from the
seating script then everything will be just empty Okay so let's write some
deploy strips so first we will get into the strips and then we will edit this
one and divide zero zero the plus yes okay good and now we are going to
write 30 plus script okay so now we are ready to enter the first step so we
are going to grab the thoughts for us because equal to require we will put
it from hard hat and you know to preventing the errors we will write this
statement it can just you can just copy paste it is just
you can create of it like a boiler paper press sketch I know it is shown to
us in that control now and that is exit one I look something along yes as it
is uh patch error yeah I just added a second battery okay so we will just
control lock that we are deploying the smart contract deploying uh smart
contract is now looking good and after that we will substitute First Medical
we are now taking the smart contract once again so I want to click first
dot get contacts actually as I have shown you in the test cases and
now we will be cards okay and now we will post account equal to always in
charge of the big science right so this line is executed because we needed
the accounts which are present and also we will now deploy the smart
contract medical so avoid maybe 12. you is going to deploy it right zero
you know please subscribe something else right everything is Supply
something million previously we have tried with account zero and now we
are trying it with account sorry previously we have tried it the second one
and now on zero so dot
deployed this and after that we will get a medical dog deployed so this
line shows is a deployed I press okay just don't repeat this 1 plus 27 this is
used to write it [Music] uh so it looks good to me so we will just run this
deploy script to deploy our smart contact so initially we will just start a
local host uh blockchain inside our local environment so just write this x
add hack node so this will create a local blockchain inside our system you
I think you have heard of ganache uh it says the
and I'm strips Network localhost okay so we are deploying it you will see
from things here like empty plug in the smart contacts okay it is giving us
some all right radical reports no accounts okay it's not your record which
just red mode here so now it should work properly yeah as you can see
the plugin does not contract and yeah it is deployed actually I think there
is some mistake so let's just do it once and just do it one more time so
initially we are just running uh node in our local system and after that
we are going to deploy the smart contract in the local blockchain so now
let's see I'm sure work yeah it's okay okay so you need to just copy this
address and just store it somewhere else I will just pull it in SRC so that
you can use this one when we are going to make our backend so I will just
name it conflict.json and we'll do something about Json we are going to
write the chain ID 31337 is for hard app localhost foreign [Music] scripts
so just click here okay sorry foreign this files okay so
now we are going to write the ceiling script okay so let's start so const
because you are getting because it will be imported from hard hat okay
and also if you remember we will write a config file using also import it
required dot dot Slash from SRC slash country dot Json okay and now we
are again going to write a async function which means and in the same
way as the previous one so we can just copy paste it yeah I told you it is
uh boilerplate code you can actually Transformer plate code so phones in
ID
with this command we are going to fetch the chain ID of the network
ethers dot providers then get yeah okay so this will provide us with the
network and now we can just control logic to see the network so just try
doing ID or you can write it okay okay [Music] so it will control of it and
after that you can just catch the accounts I'll go to youtubes.x lineups
okay so we are getting the signups and now we are going to fetch the
medical record as we have deployed it in the localhost now we can fetch it
to using this command Medical so I will name the contractors medical and
now we will purchase the key cards dot get contract at and now we will
write the contact name and also the address of it so that you can find the
medical labor so we will write complete Game ID Dot maybe called
medical records Dot address okay so let me explain this line to you so let
us go to the config file so from here we are getting the address we are
going to config and we are going to chain ID the chain ID will be 313270
it will be just provided in order for that and again we are putting the smart
content this time let's see load properly I just don't remove this uh error
things because I want to show you how to get rid of this errors so if you
get this error you can just see my video that I also did the same mistakes
okay so now we are going to write some seeding Scripts on the response
and now I want you can just take the user one as accounts zero okay and
now we will write transaction response equal to alert Library 12 dot so
let's
create user one dot so we will just add some records I will give some of
the locals as like this so foreign [Music] statement is Medical Records I
have just created some Dynamic data here and after that we will just wait
for the block transformation so I'm watching this ID you will just get the
record iot so this is like report and address with ID listen okay so this will
show us that we have added some reports we can just copy paste these
things to fill it up and after that you can just write some
delete scripts like I want to delete the first and second ID so I can write
away transaction responsible you would I have already written it and then
now I will write contraction response sorry convection responsible to over
to radical.com the one so you can write any seating State based on what
we want or create so we write the seating strips so that it doesn't seems
empty in the right scratch yeah so like that you can write many records as
you like but I will just give many reports like you can see here there
are many records here and you can really like you can do it of your own
you or you can copy my seeking record I will not show this much of record
as I have entered many records so you can just copy paste from the
GitHub repo I will provide it in the description so now we are going to
deploy it so just sorry we are going to see it so we will just write this zero
once you don't change should learn and now it should run properly okay it
is giving us some errored once again so okay my mistake I get this one
foreign [Music] state medical record it's okay not medical records foreign I
hope this time it should run yeah it is running as you can see the reports
are getting added and after that some records will also be deleted as I
have written in the season in our last you can see here that TV check or
69 reached at 155 so it will get deleted just wait for some time till the
seating is completed so that some data will go inside the smart contract
domain so this data is inserted now we are going to go with the front
end application and write the backend and something of the application
and connect it to the smart contract we have written and tested okay so
let's get started with okay so we need to download certain dependencies
so for that I am going to change with the package dot Education First so
I'm going to delete all of this and just paste um new package and here I
have address records okay so you can just download or copy paste it from
the GitHub repo only just search the packet.json and it just or just simply
copy paste it and after that you need to write a code which is npm install
so this will install some of all the different exists so these dependencies
are something that we will be using all the time so you can also download
it one by one the individually like and then install VF block is NTN install
reactant but if you will just copy paste the package.json then these things
will be downloaded automatically and you don't have to download usually
it will save you a lot of time okay so I will wait
so we are going to Source folder and from there we are going to eliminate
assets folder we are going to make components we are going to make
radius okay so ABS is so abstract binary interface so we will just store the
API of this medical record now also as you know in solidity the when we
compile our solidity program it it's divided into two plus one is bytecode
and another one is ABS so we'll just write the API here so I will write in
every 12 record Json it is interesting format so to get the API what you
need to do is you need
okay so next thing we are going to set up is store so let's add some files in
store so there are four files we are going to store in our store which is new
let's Andrew school and then we are going to school here the first one we
see interactions dot Js you just follow me to the Js reducer dot Js selector
structures so you can see these files are created now we are going to set
up the store so for that let's for making the story which is just very simple
there is some boilerplate code which you will use every time so I am
just showing you this but it is obviously about it probably you will just
import the the folders or you can say the components from the reducer
and they just provide it here so the first one is create store you can just
copy paste distance from uh apply [Music] the um these are also that's
components next to import account from a dots .com and after that you
can import s lines of course we'll get tools from uh reduction extension
and from here you will import some files from dot slash reducer so I will
show you
what are those files so let's be like that and we'll just reduce and here you
will also have those file we'll share foreign [Music] [Music] and the initial
state and compose well we will give outline middleware and result that we
will give you that okay so after that we are going to export and default
cool so this is just some of the boilerplate support so you want to be
writing it all the time and just simply copy paste it from other projects so
this is this you can just copy paste it from the
also it is just boiler checkpoint you don't have to remember all these
things so the next thing we are going to make is uh provider but before
that we are going to load our blockchain network is in this application so
for that let's go to the application folder so here are many components
initially let's start the activation okay and run it starts so it will get started
so till the time we'll get started let's make some files like the first folder
we are going to make is load blockchain data for loading blocking the data
I will
just write one um so with this folder it will be loading for the blockchain
data so just use we will be running it using the use effect so what is user
here so use effect is gesture component so whenever the component.j
who gets mounted this is the first thing which is getting done by the
compiler so I need to import with some react and after that I will put the
low block so in daytime it so what it will do is it will run the load
blockchain data this folder and in this folder we are going to do several
task live we are going to load our provider load our Network and load
accounts Etc so now the app is going to run okay let's see yes okay so
here it is and you can see the nice layer logo and now our react app is
running so we'll just clear these things out you don't need these things
and you don't need the sdg logo also I will delete it from the folder itself
also we're going to clear the app CSS okay so it looks good to me how
about this okay so yeah the blockchain security solving if it's working fine
so now we
are going to load our blockchain data so initially what we are going to do
is we are going to load a provider foreign ers so let me explain to you
what are okay sorry I was clearing this up okay [Music] okay so I was
talking about where three provider so our blockchain or provider is a
company or the organization that runs one or more full nodes on my
blockchain network and makes them available to other users so as you
can see in our case it is our metamask we are using is a blockchain
provided and
it is going to give us a connection with the web 3. so let's first load the
provider so we will write launch provider equal to we will be writing a
function in our interactions which is load provider and we are going to
make a load providers in our interactions files so here in connections you
will make a fourth forms to load from wide right here so from here we can
import this side so for getting the worksheet over you need to go and
write something so write some codes so the code for getting the web 3
Connection is that wants translation Dot [Music] uh so just Note One Thing
uh we will be just check importing the efforts from reverse library and this
time we are not using the hardware I'm just using the one which ethers
provides us because it is uh web application and we are not using hard hat
here we will just use hard hat for making our smart concept and deploying
it okay so transformation equal to new inverse dot providers dot bread
provider okay so this is the command which will give you a connection
with the word three
okay so this will give it a connection it will just return the connection and
in this we will just provide control dot not providing to see whether the
connection is applying on the application or not so okay let's see okay
let's clear it out once yeah so you just learning as you can see here with
three provider we are getting a correction from our web 3 converter which
is and now we will we will dispatch it and store it in our redox state so for
that what we will be doing is we will be initially reporting
use dispatch so first dispatch equal to use dispatch so this is from react
products used to sketch and we will provide this patch here to dispatch
and the loan for states in our detox and here we will write this patch type
is you know sorry to open first slide two types here and here we are going
to hit connection and here we go dispatch yeah so respect so it will
dispatch a provider loaded it will have connection inside it and taking the
reducer file it will be getting the interaction dispatch
so for that we need to make a file called provider export class provider so
[Music] so for provider equal to state state will be empty and here we will
pass action so that we can get the actions from the provider loader so for
this thing we will be adding certain action type so search action DOT type
so here as you can see here enter dispatch also have some type and it will
come here as action so action Dot right whenever it is provided loader
then you will get the connection okay let's go for it first we will add a
default state as state okay and after that we are going to provide the case
provider low node is this thing execute then it will be going to return State
models a modified state where the state will contain that connection the
connection which is coming from the provider loader type or you can write
here action.connection to get the attention and here as we are providing
we are providing the providers from our leaders we need to to store to
accept it from our Redux so we will write provider so I think this will work
let's go into our application so what's the problem let me see okay we
haven't encoded the app with provider here so what we need to do is we
need to go to the index folder and here you need to import it with two
minus okay now just make it down and also delete the stick node we don't
need the strip mode store so click stored in it you know this store which is
coming from the store folder so it will just import it from store slash store
and we will also inform the provider from real index okay so it looks fine to
me but it
should not be anywhere yeah so the errors are gone and now in the index
Capital so you can see that the connection is there if you haven't set up
this without step tools or other components please see my setup video
where I have shown you how to set up the whole blockchain environment
for decentralized application development okay so we have loaded the
provider now we are going to load the chain ID and so log and here then
I'll do equal to load Network s so that we can load data on network and it
will use uh async function so
that's why we are writing away so here we will pass provider and dispatch
and we are going to make this folder in our interactions only to exports
Network if you want to also right here we are passing two variables which
is provider well that's that now the thing that you will be doing is you will
be enabling the Network for that you are going to write const chain
everything you are going to fetch the chain ID from the provider so if I will
show you the provider Webster provider we will see that they
are going to uh same ID here in the networks in network you will get the
chain ID we are going to search this chain already here so let's try to
change ID equal to avoid provider.aps Network as it is in network folder so
we will pass getting the chain ID from the network file and after that we
are going to do scratches this patch uh try this type will be Network
loaded and here we will pass chain ID and also we will return the chain ID
here so I'm going to reduce so this time the case will be let's upload it and
it will return
the score okay [Music] okay so I I hope this time also if it is getting loaded
in the states and the provider there is correction but there is no chain ID
Lots reverse volume okay please forward to import it and now I can
understand it will be working fine so yeah as you can see the chain ID is
getting loaded foreign ID now we are going to set up the left bar so
initially let's add an airport in the components so go to components 253
and components and here we will make a map so first let's make the
folder for
number and now turn off our folder is here and we will make the files now
dot JS so it will make here JavaScript and then also for styling we will be
making blackboard.css and to access these two files removed or five
known as index.js and the components directory so now in index.pages
just write and also number just initial other FC uh if you write RFC then it
will appear and you can directly make a component out of it and now
import the CSS file of network yeah bar dot CSS okay dot slash you can go
to current
from the topic so that's all so as you can see here here is Network so we
will now decorate the network so initially the class will be Network and
inside it we will give a name to the network so we will construct it right of
last year and often now and here there will be some images and after that
there will be a meme now we will name it medical record ER okay so let's
see how it goes okay so let's add a image so for an image I am going to
add our image in the assets folder so it's the asset folder yeah here it is
paste this image and then I am going to add this image in the image
section but before that let's import it so initially replacing computer image
by writing the quality report and cool assets oops yes and after that you
can just drag here and press report and you will see that here okay give
us the image so we need to decorate it we will just give it some python
wood so the width will be coffee and the height will be also like topic there
are certain things which I am just checks again yeah so as you can see
that the name is
looking good so now we will again add a class add a date with class name
of maps crash test Network selector so here we are going to select the
network like whether we are in the local host or we are entering today or
in the quality tested or in the sequolier definite so here we will select the
test notes on the networks and after that let's add a select select uh the
name of the selected Network and the ID will also do Network okay and it
will have certain options like initially the value will be zero
and if it will be disabled and here will be select Network and now though
all real options start option it will get a comma that's all right uh so the
next two will be we will be adding is uh localhost chain ID that will be
31337 and so name will be localhost for now we will be adding these two
only so let's see yeah so this you can go to openhost after that we will be
adding let's say on change list now so in the select option I will be writing
on change so whenever the options will get changed we will
write okay we will go to a function called as Network Handler and also the
value will change according to it so first write the network Handler
function uh first Network [Music] whether you don't need to write student
default to pass the distance Network so the method will be getting though
sorry wallet Stitch area chain so with this we are going to change the
ethereum chain and take as a parameters we are going to give bottoms as
the chain Idols which we are going to get from this select option we will be
writing e
dot Target dot value okay graphics so oops links all right for me okay I
forward the connection within the request so potentially just right away
going into dot in stadium dot request so we are requesting the windows to
change the ethereum with the request of uh wallet switch ethereum chain
so here we will be inserting these functions now it is rectangle so Windows
dot equilibrium dot requests in the method will be wallets which is ADM
chain solver is requesting for a medium chain switch to the chain where I
had
mentioned the chain the chain will be e dot Target or value in this case the
value is 31337 so between the g1337 so the chain ID will do three one
three three seven and if we will be using a volume then it will be like five I
think so here we will be adding five so here we have added localhost you
can add one more thing that gold detector or even it's full yeah yeah it's
just like I think first of all it is one one let's search in Google um here ID of
Step or layer okay so like this one one five five one
one okay so you will just copy paste it so whenever sepulia will get
triggered then it will just show here one one one one five five one one and
the chain will switch according to it now now we have given some options
and let's see how our application is written it is again word and now we
are going to give a planet button over here and whenever we will click on
the connect button it will get connected to the metamask and after that
we will show the account balance and the account address in this site
okay so let's get
started with both hands so here I am going to name this clip as dot Maps
double Dash and my balance and click enter okay not my balance it will
be map balance first balance okay so in this one we are going to give a
button so here if there will be a small button called button and the Plus
One will be yeah dot dot balance box like save and also [Music] um okay
so let's see here it is a little bit but as you can see here that here is the
time button so the next step will be whenever we will connect it with
load the account and the balance so let's do those stuffs so in the connect
button we will write one click to make the connection so we will write
connect Handler so the correct Handler will be the function which will
involve in modeling the on balance and the account in our application so
here we are going to load the account so we will write a function away
load account and dispatch okay so we will fetch the provider and dispatch
from our Redux as I have told you that the reduction is a tool which
is available to all the components and from the state we can just take
them down like we want the provider so we will add course providers
equal to by using use select to use select and clearly let's from the state
we want the provider connection so let me show you one thing so here as
you can see we are using the uclps so by using you select we will go to
State and after Square State we are going to provider and then we are
taking the connection so I have written the same thing provider provider
dot connection okay
and for dispatch we know this packs equal to use dispatch so it looks good
to me and now we are going to load the account so for that let's go to
interactions and write a function load account equal to and here we will
give it async and provided provider and dispatch okay so we are going to
load the account here so let's close that out so we will write cost accounts
required window Dot request and go to request we I am going to give a
letter with for the request of account so the letter domain is
are going to discuss this account loaded but before that we also need the
balance so let's get the balance so balance of the account is our provider
Dot get the balance of background okay all right now balance is okay
three cards dot YouTube Dot connect equal foreign [Music] which will be
like let me show you this thing so initially what we are getting is that from
the balance uh it will provide us a balance which will be in which will be in
waveformer and in wave format it is much more bigger right
utensil.format method of balance and now let's continue as you can see
here it's talking about this that now you can see that it is in ether format
and it is now readable but this one is not readable because it is a very big
number okay so it's like that we have loaded the balance so we will also
discuss the balance okay so type will be enabling people balance loaded
and we are going to pass the balance on here and we are going to return
the account okay so now as we have given all these things
now let's see in our reducer we need to so we need to add those thing in
our reducer so the first case is account loaded State and State we are
going to add as account equal to action Dot so in account variable the
actual dot account will be stored and in this equal balance loader we are
going to load the balance here you can after that we will return dot State
and in this balance will be equal to action or the balance uh I hope you
understand if you think that this is available and we are providing it and
storing our balance
which is coming from action we have written here so this time I think that
the State should show the balance okay it is not sure but whenever you
will connect it it should show yeah as you can see here the account is
showing and the balance is also showing so now we can fetch these
accounts and balance in Our member component so let's go to number
and let's fetch here equal to use selector State and so we are going to go
for this state and then after that we are going to edit the second of
medical its provider Dot
account and you will be quantity is state state DOT provider.balance so I
hope you understand that from provider we are going we are fetching the
balance and the account okay so now let's write these things uh if we will
give the account here so the examples we can see the values here now uh
uh now we can see that update is for it is the account and third this this is
the balance so we need to return distance so let's decorate it initially we
are going to write the balance first okay so let's write the balance
yeah so I hope this will give us yeah so here you can see the value is
showing up but as you can see here that it is a very long number and
taking metamaski here you go we can see only to four digits so we want
like this we want to show photos we don't want to show the whole things
so for that we are going to write we are going to encode it with number
and we're going to fix it with four values like after decimal there will be
only four values and now it is showing a good result 999.992 okay and if
the and this is the case where
the balance key is showing up and because the balance is not shown then
we are going to just simply Choose You Know It so just show you know it
so if the account is not there or sorry the balance is not there then you are
going to show 0 it and if the balance is there you are going to show the
balance simple okay as we have we are showing the balance here now we
are going to show the accounts also uh let's give some of that right and
after that I'm going to slow the account so if the account is available then
store it otherwise store nothing or if the account is available that you are
going to show the account otherwise you are going to show the balance
here so in the account you just like or create that so I will show you so
let's show it and let me show you that if the account is there then we are
going to show the account here in the attack otherwise if the account is
not there we are going to show the button the connect button so that uh
one who is using the app can connect it first and after that he will be
shown
the account okay so here forget about the hdf for now we are going to
give a hash here for now and we are going to see pivot class name to it
we are going to give it class name also now my account okay and in the
ATAC we are going to show the account now let's see yeah now the
account is showing up but as you can see here that the account is really
too big and we just want to show a simple means of backup like in your
metamask you will see that here it is not showing the whole account it is
just showing uh some four
characters and after some dot dot and after the last four characters so we
are also going to achieve the same convention so we are going to write
account dot slides zero to five and plus there will give some dot dot dot
we are going to show the last some characters with slice it will be about
38 to 42. okay so let's see yeah now it's a second date [Music] okay and
also we are going to end the block piece like uh you know react block is
potential foreign so as you can see here every account will be shown like
this like these are
based on the account the drawing will change as you can see it is getting
changed and I will give more parameters like size will be then we'll do
three and corner yes two one eight seven between zero and some more
time it is like D3 color will be [Music] #and one s two at like and squat
color will be hashed seven six 7 F 9 2 and the class name will be identical
okay so now if you will look at it it is looking beautiful um I think I have
just written something wrong so just it will be better for me
to copy paste these things and it will also be better for you to a copy
paste so that you don't make any mistakes so as you can see here it is
looking great now but the account is not looking that much nice I don't
know why so let's find out so I have [Music] thank you because it's fine so
you need to change some CSS file I will check it and I will update it so but
as you can see here our navbar is ready whenever you will refresh it it will
show you our connect button and whenever you will connect it it will
just load your account and you can also see your account loading in this
one so now the number is ready okay uh so you need to change some of
these things like in navbars we are writing the account below the blocks
so you need to give it upward then the block so now it is looking up a bit
good okay and also what we need to do is the yeah that always curved
Roblox is also good and everything looks fine to me till now and left
balance um options oh yeah and as you can see here that it is showing
localhost but
we need to set a value so that we can show the one which is active so in
select we will also need to add one more parameter known as value so
value should store config of chain ID so we are basically storing the name
so we need to import config import currency and set from product slash
dot slash Json yeah and chain ID okay so for chain ID we are going to
import that also so as you know that in provider we also have chain IDs for
const chain I will be equal to you selector state and here state Dot
provider dot chain ID yeah so now the values generally if this value but
yeah so if this value is present then what we are going to do is we are
going to show it so I am using autonomy operator here to 0x and the
chain ID dot to strength of 16. yeah okay yeah and if it is not present in
the config file then we are going to choose zero okay or that's not good to
me thank you so everything looks fine and maybe okay so let's save that
you are same yeah it is looking good [Music] okay so I will fix this one up
but for now the navbar is ready and now we are going to make the form
like we are going to make a phone where we will be taking the name of
the patient and the blood group and the diagnosis and everything which
we have added in the add record file so let's get started with the contact
form site okay so we need to make the form in the Assets in the
components sorry so just add one more file so we will name it form and
inside the form we are going to add form dot JS component and also uh
form dot CSS okay
hit enter and then as usual in the index file we are going to or export the
font slash fine okay let's go [Music] and also you need to import the
serious file dot slash term dot CSS okay looks good so before that let's add
the CSS file here hmm so I have added the service file so now we are
going to add the form Okay so I was thinking that I will repeat the last
name as let's say the login my screen and then first question one and
here I'm going to add an account now initially we need to give some
parameters like let us just give okay let's first make a statement that if we
are connected then only we will show the content otherwise we will not
show it will show independent so for that you you can fetch the account
wants to act down to equal to use select as the previous one created Dot
provider.net yeah let's do it and it will just import the use selector and if
the account is present then only we will show the form otherwise we will
just give a div each one and that which one we are going to show
that uh download the account first and if the account is present or we are
connected then we are going to make a form so let's make a form um
later on so we made the form and here we are giving a title like patient
data so details we are taking the patient details here it won't show now
because I have not added it here so let's add it in the app on yeah let's
see yeah patient detail it will show now let's make the form Okay so and
the form initially we will be taking the patient name to click make a label
and do in the level give it name and change okay and here we will add an
input tag then it will be type of text ID will be name and a name will also
be name um let's see yeah so we have added the name next one is age
um the smart contract uh what we are going to take us into so I'm gonna
show you the record so the next one will be the age [Music] and here also
we are taking type as number because it is obviously a number which ID is
also huge and [Music] it is required some questions if you add the
requests
yeah so required next one is agenda HTML for agenda and we will write
gender so here is the gender and for gender we will use a select operation
select the name of the selectivity agenda and the ID will also be gender
and it is required to and the options will be value for this will be gender oh
it is foreign let's see here yeah it is second time now what else do we
need to offer it yeah after that we will be selecting the blood group so
level for the blood type oh so as an input here it will take it in our text to
the ID of
uh let's give it a name I do and also and then you can give it a union like
let's leave it like okay um the CSS fan will go like that as we expect and
anything else since it is required yeah obviously now the next one is
allergy yeah so it is energy so the input type will also be text and IDM
name will also be there and reverse treatment we will also video so
everything from that the same diagnosis and treatment will also be same
you just need to make your diet and losses and the next one is treatment
so let's check yeah the form is looking good and also we will that one
model input it is a type of submit and the value will also be submit now
let's see yeah it is looking good for me so now the next thing is that we
may we need to store the input values in some variables so for that we
are going to use the use state so if you have read vlcs you will know about
the U state for those who don't know used it so use state is a type of a
variable function like if I will show you you can know so we Define u State
like this
right we want to say the name so we will write name and set name equal
to use State as 0 . so what happens is that this is the variable and this is
the variable which we will use to set the name of this video so it's as
simple as that so I will change its name and power one is it gender blood
type allergy diagnosis treatment okay so name is it's gender level five
allergies and dial the losses and the other one is chicken yeah and then
set equipment and everything will be live the same but it will be just in
Candle
place and we will add a set before the no So Soft diagnosis set allergies
that blood sorry and said gender set age okay let's go to me and now we
are going to add anything here okay so we will put these things one by
one so first is the name so yeah there it is so after required we'll give it a
point change so it's a limiting changes we are going to set the name as
u.target.net so whatever we will be writing into this input will be set as in
the name variable with the separent function using the used state
so notice like that and also uh the value will be the same so whatever we
will change the value will be like that so if the name is zero Okay so so if
the name is 0 then we will just show an empty string otherwise we will
show the name itself okay I will give some mistake I wrote it inside the oil
change I need to write it outside this so yeah so the value change and
make me like yeah and the value change and the place folder will be
writing a placeholder of name like Amman or all right okay one
um and after that we are going to place our placeholder here also so in
the age we are going to set a value so just make it like that so we foreign
value will do page if it is equal to zero question mark then it will be an
entry otherwise it will be H and I will think which I was going to write this
place okay yeah so placeholder will be 29 that is good so let's see so now
for the gender we are also going to do the same thing uh it is required or
after that yeah so the general changes then we are going
to set the agenda and the same thing is happening here also we are not
going to add a placeholder here because it is a select an element and
after that the blood okay so for the blood um for allergies for the diagnosis
like this and also for close solar of the treatment we are going to do the
same thing yeah so now everything looks correct to me let's see yeah so
whenever we type the input and hit submit so these details should make
so for that we need to add a on submit so that we can submit it using
the input form of type subject so all submit here we are going to add uh
function so I'm going to add a function then submit handle and here I am
going to make the function let's add those functions before uh used it
yeah okay so let's write an e here so that we can delete this and set the
name okay so we will just check whether all these so we will control log
them anyone h and all the agenda and soul you know blood type [Music]
allergies diagnosis [Music] treatment okay so let's see thank you
so whenever we give the data okay and yeah there is some problem so
let's fix it so name set name we are sitting the name as the people so his
name is we will show this okay everything seems like to me um okay my
mistake I have wrote a name here I would feel like fairly foreign [Music] so
just go to the submit Handler and very quick just this fall so this will
prevent our page from getting reload okay so now add to one dance 32
gender will be one second price always be positive every detail is coming
to us
before that we need to make it and as simple function and we will now we
are not getting our provider unit equal to are you selector excuse Dot uh
Direction right and the next one is dispatch equals dispatch okay so we
have set the development we till now we haven't uploaded our concept in
the states yet so let's do that before that let's just comment this function
out so that we can just make a medical function so that we can upload our
medical contract so here before that we are going to make
defined so let's import a medical API from API from we will import it from
you know where from the API folder.abis for this functionally will have
saved the ideas so here you can get the ideas and now you can fetch the
contact in the medical and we can upload it in the states so let's go to the
States but initially let's first write the load Medical in the app so that
whenever the application gets started then the news effect could run in
the app.js and here we will be able to get the content so
you just need to first to get the contract and after that we are going to get
the address so let's first get the contraction s so we will write constant
identical equal to 0.6 of chain ID but Medical from product slash okay so
here we will get the config and the medical form from the insec.json as
you can see here we are getting the medical record from here yeah so and
after that we will be giving the address so from the medical recording to
that register awake what's the name of the function load Medical
load Medical yeah so import it and after that you need to write provider
my day 12.6 Dot and press so once address so that's all right address here
and after that we are going to go for dispatch okay so with this we are
going to get the Medical smart contract the medical record solidity
program in this folder and we are also going to upload it in the state
variables of the Redux so now as we have dispatched it in the interactions
our introductions yeah so as we have discussed it so let's write another
function in the reducer so that
we can just use it in the states so export cost medical equal to state
divided default State actually you can just make a variable so I will just
write default modical state type action and I'm going to make this variable
uh V equal to this will be an object and click that I had a function so
loaders will be false contract will be clear we are going to set the contract
here so in medical let's add the sorry let's add the split statement as the
previous one action DOT type and after draw we will Define the default
which will
return state extension and after that we will add a case the case will be uh
what What's the case yeah medical load so medical loaded and after that
we will return by editing the state the low rate will be true this load that
will get through and the contract will be actual DOT medical so we also
need to add it in the stores right here just add editor here also and I think
it should show you know the oops Yeah as you can see here it is true and
the contract is here our contact our medical contact medical record
contract
and now we can access from any components so we are going to import it
in the form there's only commented first and for medical we are going to
fetch the contact points equal to use selector state provider Dot Medical
oh sorry it will be contact medical.com because as you can see this time
we are adding medical and after that we are getting into the context so
medical DOT content contact who so now we are getting into this submit
record and now we will be making the submit record function so just go to
interactions
and we are going to complete this submit record so let's start with here so
let's transaction we are defining a transaction and we will be using it
during our transaction to add the medical records so let's patch of type
will be a new platform loaded so whenever the submit record is initialized
then this dispatch will be offered and after that we will write a price table
and here we will be is giving a patch of error so if some error occurs so we
will dispatch that itself okay and in price statement we are going
the client send application we are using sign up as the user so dot uh
what's the function name let's go to medical reports and here the function
name is the add record and where we are going to add the records so here
it will take input as the name H gender blood type hello cheese diagnosis
statement okay so it looks good to me so now we can type [Music] I mean
we can now submit the patient details so before the sketch or let's remove
the catch those settings and Advance data and now you can write
information
all right and then get all energy people I submit and now as you can see
the like mask is getting popped up and it is showing a contact interaction
now let's see I'm just getting it so that we can make a new record so hit
confirm and if it will get succeeded okay so I hope it will get succeed yeah
so as you can see it again that means it has successfully got so after this
we are going to show the records we need to load the records in our
medical contract here so let's fetch the information so for that what we
are going to use is
we are going to fetch the events so whenever add contact is called you
can see that there is a image called at record event so this event gets
emitted whenever we call the add record so we will add a subscribe
function which will uh turn on whenever this event is emitted this medical
record add contact event so let's first make a subscribe function so it's
code first subscribe to event it will be an async function which will take
medical and it will scratch as argument and after that we will call the
function it will do its task and after that it will edit the medical record at
record event and whenever this event will be emitted then this function
will catch that event and after that it will dispatch it or send it to the store
sorry export uh the state so let's catch this one yeah we will go to
interactions and we are going to and two source yeah so here the medical
gets loaded and after that we are going to load the new records so before
that we're going to handle the cables when the new record
is loaded and when the new record fails so let's make two cases new
record loaded return something and similarly no record then and in the
middle you will have new report success okay so for the case of new
record loaded we are going to update the state and we will make
transaction this trending will be true so these are some of the
functionalities it is needed this successful okay so these things will be
needed when we are going to make a like a alert box so for that we are
writing these things but first mention
the transaction in the default medical state to go to the first medical step
and as transaction is successful initially 28 points uh okay where it's been
consists of data which will be empty at first and also loaded will be false
okay so all medical loaded is false and the data is also empty so whenever
our medical record success will be paired it will get added in the all
medical data array so first we have the chance here in the new
transaction loaded the transaction is pending it's true and the successful
is false
and after that we are going to store the new record success and here we
will update the state so here or maybe equal whenever it will load then it
will be the state we are going to add foreign that whenever our data will
be getting loaded which can be a chance that those data is already
available with the same ID so we need to filter both screen okay so
initially we can just add data like that but after that we need to change it
so for now I am just going to add data as action dot Network order
okay and also it will transaction this pending will be false as it is and also
is successful with the truth and we will also store the event so events is
let's make a even variable also so it will do events okay so eventually are
going to actually go up to eBay so everything is correct it seems correct to
me and also uh when it feels clean then we will update the skate the
transaction and it will be failed please please error is another thing that it
can be in error we did two let's take some states
and this successful will be true okay fonts because it is not successful
right so it is for false okay so I hope this time everything will run okay and
let's see in the states so in the states event is no no event is loaded and
we will add some data before that just in the catches that is very
important data okay and hit submit foreign [Music] okay I did one mistake
actually we forgot to add subscribe event in the application and uh
function offer load blocking data so we will go to interaction here you need
to
add the Subscribe event in the app to enter app purchase we are going to
add this thing so here I am going to add is medical and dispatch so me
now I think the data will show up as you can see the data is here and the
event is also here [Music] actually I did something now as the data is
coming in the form of like array so we need to score it in other form so it is
like okay okay sorry will be like that so now you can see that the data is
here with the data here this data video and again if you
will enter some data maybe three email is always true click submit and
again it will hit enter then the data will change data actually here the data
is the old data is not getting up so we need to correct it so in action DOT
medical honor so dot all medical DOT data yeah it should work fine so this
time I'll hold on to the dogs shape up now as you can see there is two
data so we are just updating the data and we are fetching the events with
the help of events we are getting the data so okay that was great
and actually you can also see here that the new record loaded and after
that the new record success so it was like that that whenever we the
record will get submitted and this dispatch will run and it will show new
record loader and when the new record is successfully loaded then it will
emit a event and if that is a event is ADD record which will and we have
subscribed to the events so we will get the new record success in the in
the dispatch and after that we can load the orders or the records and if it
by chance fails then it will show new record fail so it works like that this is
pretty simple okay so the next thing is that we are going to show the
records so before that we need to make a option where we can select
whether we want to see the data or we want to see the form so for that
let's make the option segment so here in the components we are going to
add 105 known as option and in option we are going to add two files the
first one is action okay option Dot Js and the second one is option.co
so again we need to make one more folder that is like we want to show
the data so we are going to set a folder for data also component for data
so at KD IR SRC flash components hash and data the issue let's directory
okay so now as you can see I have made the directory and now we will
bring it from New icon to create new item and after that write data and
then data.js created after that data dot CSS create okay are done so let's
first write the arrayfc in the data form so go to data.js and after
that like other FC hit enter and after that import ant CSS [Music] okay
that's good and but now we are doing with the index.js folder and we will
do the same thing as we did before we are going to import the option
okay yeah [Music] so let's start working on the options folder okay so here
I find out that I did a mistake here I have written form two times it is not
formed it is data so let's write data here and click into I hope it will solve
the issue like here it was showing some kind of error
now I hope their air error will be gone let's wait till it gets compiled okay
so now it is showing us the correct data let's connect yeah so it is showing
off the drive data now we are going to give the options so let's first copy
and paste the CSS file here and after that we are going to option.js then
option.js we are going to make a link where we are just getting from the
form to the data and from the data root of all so the class name will be
option and here we are going to give two links so we will be using react
router Dom 6.0
so just go to index.js in SRC folder and here you need to add the reaction
of the Dome foreign router and encode it the provider should get encoded
and also import it from react Auto Dome now you can use a element
called link so this link element helps you to go to one element to other
without reloading the page so just sorry link and it will also get imported
from react router Dom so under the link you need to show where to go so I
am going to make for Less default so I am setting up as hash and the class
name will be of pt form okay and here I am going to write form and again
we are going to make the same thing here but in this case we are giving
data and here also we are going to write data and in this form we are
going to add opt data okay so I hope it is looking good so hit connect and
it is not showing up because so till now we haven't added it in the f so
let's go to app.js and here we need to add certain things but we have to
drop into so first we will add the option from the components okay
other element exact element equal to and you need to get the element
here so here we want to render form in the path default path so we will
add one layer and similarly in this one when it is data we are going to
import data and here also we will write data okay uh make sure that the
spelling of data here is in capital and also in the in the options sorry
options also the data spelling is same okay so now let's see as you can
see whenever I am taking the form it is showing us the form and
whenever I am clicking on
data it is it is showing off the data folder so yeah it is good now and now
we are going to show the data okay so let's go to the data folder so let me
clean all the elements out and just go to data I will explain the number
also and Here Also let's clear all the things and let's go to data.css uh
yeah I will also erase this one so now uh let me copy paste the data.css
file okay looks good to me [Music] um as you can see whenever I added
this file this problem of underlining gone down because I have added a tag
where the
uh uh some H1 tag let's give something like game here okay here here
yeah so if the account is present so we are going to print hello otherwise
we are going to provide H3 will be like uh connect to account okay and we
need to import the account so first account equal to you selector as usual
from State DOT provider dot account okay that's good to me so go let's go
to data and if we reload it will show connect to account and when we will
go to data uh it will show connected record in the same thing
okay so we will hit connect then it will show the form and also the other
things okay looks great uh I think I will write it as H1 okay yeah now it is
showing cool okay so we are going to fetch the data so for that we are
going to use the use selector so that we can get the data but here to show
the data we are going to use a special use selector so we will be making
our own custom use selector so till now you have seen this you've
selected this type of you selector but this time we are going to make a
custom
selector using react I think it is coming from we add reselect yeah so uh I
will show you let's initially go to selectors and here we are going to make
our custom selector so how we are going to make a custom selector so
before that let's add the selector to just a moment yeah so we will name
this selector as what should we name it we may name it as order data like
we are ordering the data here so order data is new selector and here we
are going to give a special type of selector I will name it as data book
selector okay so this part is a little bit complex so make sure you give your
full concentration in this part so here I have made a Data Book selector so
we need to make the data box selector in the selector section so here we
are going to write export cost data group selector equal to this to any two
like create selector it's from reselect reactory select okay uh and after that
we are going to return some data but for now I am just using this part
actually it is not like that uh it there will be a closing tag and
that's it so it works like that we are going to give some data in the create
selector and we will be manipulating the data so initially let's just import it
now to use click create selector we first need to get the data so let's get
the data first so const all data equal to state so this is a special type of
function which is known as get this is coming from a library known as low
Dash it is also a way to fetch data from the state so State and I will be
writing radical Dot all medical DOT data okay
so let's import and get from your dash so I hope I am getting it from the
right path as medical DOT all medical DOT data is the real path so as you
can see medical DOT all medical DOT data is the right from here so we got
all data after that we are going to pass the all data here and after that we
are going to take an instance of the data and going to manipulate it using
this and we will return the data so first let's control log the data to see
how the data looks uh okay actually I forgot that there is no data
okay now so let's go to the form and add some data let's remove the
empty stab data and after that we are going to write the name of the
patient the age gender type diagnosis treatment whatever you want and
after that I am going to click submit and hit confirm and whenever the
request is confirmed you will see it in the data section here you will see
that the data have a data and now if you will see in the this course okay
till now it is not showing yet so I think I did some mistake so from the
state we are fetching
medical DOT all medical DOT data and we are going to pass an empty
array here it's kind of weird why we are not getting the data I am
activating the data box selector okay I have not saved it so now I think we
are going to see the data yeah so here is the data and here is our data
does the same data which we have in prepared so let's add some more
data like error 23 genders will be my female write something and then
submit and hit confirm and then if you will see in the data we are going to
do it's a single data why
okay because I have now it is completed and now if she will go to the data
you will see two data and the first one and then shubham unless you will
refresh it and hit connect and go to data it is showing a single data
because we are showing an instance of the data now and the previous one
all over because we have written the it in the okay in the reducer file like
that so now what we are going to do is that we are going to fetch the
previous datas from the data section so let's do one thing so how we are
going to fetch the our
previous data so as you can see in our seedings scripts like script so here
we have inputted several data so all these datas are doing emitting an
event known as record add record or delete record all of this so we are
going to fetch all this record one by one from zero till the time the block is
created so with the help of this we are going to fetch the data so let's
paste the data so go to interactions and here we are going to make
another function known as foreign load all data equal to async
and here we are going to get provider medical and dispatch okay so const
block it is the time till the time where the last block is created so avoid
provider dot get block number so it is the block number and we are going
to take all the events which is created in from the time 0 till the block
number so const Medical stream equal to await Medical dot query filter
and here we are going to light medical records this one record and then all
the argue or sorry not the arguments from time 0 till the time the block is
created and after that we will get that get all the events and then we will
go for go and take the arcs of all the event so we will write const medical
record stream dot map with event and here event dot asks yeah so as you
can see medical record all the arguments are being kept here in this
variable and then we are going to write we are actually going to dispatch
it dispatch with type foreign and here we are going to pass on the medical
records okay so now all these all the records till now will be present in all
medical
records so we are just going to add in into the reducer so in the reducer
we are going to add all medical records so here is all medical loaded
actually we should just name it all medical records okay all medical
records we are going to store the records in the state so write dot dot
State we are eating the state and in all medical we are going to get loaded
as true as these are loaded and the data as vehicle [Music] medical
records just copy it and paste it here yeah so now I think all the reports
should show up
but before that we need to add it in our apps app component so go to app
and just bring it here and provider radical dispatch okay and also don't
forget to import it so let's see whether all the datas are there or not yeah
as you can see all the 82 data are here and you can also see here that all
the data are here from 1 to 1581 now there is a probability that if the
same data with two IDs can exist so we will add a filter whenever we are
adding a form or we are adding the record so let's add a filter
action DOT medical order otherwise we are going to add data as it is state
DOT all medical DOT data now in all medical we are going to edit we are
going to edit the state DOT all medical and we are going to set data there
okay and the pending will be the same is successful will be true and
events will occur like that okay so now everything looks fine to me now no
duplicate data will arise let's see connect yeah every data is arriving here
and as you can see hell is there and if we are going to add one more thing
let's
for that I am going to edit the form folder and in the form folder I am
going to remove this console logs these are pretty disturbing and then set
name as 0 and all the other fields I will be setting all the other fields as
zero okay something like that so now it is good okay now there is no
issues and we can decorate the data now hmm so we are going to
manipulate the data first we are going to add certain Fields so that we can
show the data in a nice format so in selector uh uh how you will
manipulate the data
is also in big number format so we need to change that also here you can
see record ID is in big number format so we need to change these two
Fields so initially we will write let record ID new equal to so you are we are
adding a new record ID so write maths dot round we are going to round it
data dot record ID we are fetching the record ID and giving it some
amount to record a to just round it like you can give a lag so now I think it
will be converted into uh new into a readable format so if we will see
the record move so it will be live where is the record View okay so I think it
is you know coming up let's reload connect go to the data and where okay
I think I forgot to add it yeah I forgot to edit record ID news so if you will
forgot to I add it in the states then obviously it is not going to show up and
now you will see that you can take any folder uh and you can see the
record ID new is fine so this is record number five this is record number
number five okay this should not be the case not
every record should show the world number five okay uh it is different
here and in this also it is different oh sorry I just made a wrong one so this
record is one this record is two you can see record is obvious five and
after that this report is six so everything is fine here and we will also
format the date so sorry not the date the age which mu equal to math dot
plan uh H uh will be this one and we will also add the edge mu h okay so
let's go to the recent one and here you can see the new age as
let's see where is the new HR yes so here is the new wedge and it is now
in readable format okay uh we should store this value in a variable so I will
write a variable once this session equal to V so here we go rotate and now
it should show up everything should be cleared our record ID is showing
new age is showing yeah so everything is fine now we should now uh give
the timestamp as the timestamp is also in big number so we are going to
format the timestamp using uh like a library known as movement so
world I have just read it previously so now here you can see that the
formatted date is also there uh yeah so as you can see here the formatted
date is a23 0pm to May 2023 okay so that's great we have manipulated
the data and now we are going to show up this data so we are going to
delete the console.log here okay just let it be here so that we can use it
you find we are using our delete folders okay so let's go to data okay so
we are going to add the data uh let me take a break first just a second
okay so we have successfully manipulated the data as you can see here
here is an array where we have manipulated the ID record ID and the age
and also the time stamp which is a formatted timestamp now and now we
are going to show it in the table so let's show it in the table so here if the
account is there then we are not going to show hello we are going to make
a table so here we are going to make a table and inside the table I am
going to provide a header the head and a key body okay so inside the T
head I am going to
add a CR and inside the TR I am going to provide the headings so first one
is record ID the second one will be I think age no I would think I will give it
date and type and the third one will be name so that age after that gender
after that blood type it's blood type okay and allergies and after that
diagnosis and after that treatment okay so looks good to me after that we
are going to provide the body so inside the body we are going to fetch the
data order data here and we are going to show it so for that
you need to see whether order data is available or not and if it is available
then we are going to show it by mapping in order data dot map you are
going to map in every element and show it one by one so for that we are
going to need the data and we are also going to need the index of the
data and after that you can return the j6 where the heading will be written
in TR and the key will be index after that we are going to the TD write the
TD and the TD will be index okay so I am giving it index plus 1 it is
just the indexing and after that PD again so the first one is the first one is
record ID and after that it will be date and time so we are going to write
the formatted data in time which we have already mentioned before
formatted timestamp okay and after that data dot name data Dot page
new after that gender after that blood type after that allergies and then
diagnosis and then treatment okay so let's see the application I hope the
data is there yeah so as you can see the data is clearly visible now
and it is looking perfect to me okay so here you can go to the form and
from here you can go to the data section and here is the data so we can
check that whether the data we are going to give through the form is
going to the data section or not so here is you can see the last 80 is
Victoria Robinson now we are going to add some data in it through the
form so initially let's clear the active data Google settings Advanced and
clear active data and I am going to enter the patient name and it will be
34
and it will email the blood group will be a b negative and after that it will
be like or Poland allergy after the diagnosis will be um where the
treatment should be surgery the diagnosis will be oystop or riosis or so
porosis that surgery and then I am going to submit it so now metamask
will pop up and after that I will perform it and then if we will see then the
data should be added up okay the data is not added up till now if we will
refresh then I think we can see the data data and yeah here you can see
Aditya mail maybe
Handler and in it we are going to add the data and delete button and let's
make the function now so delete Handler equal to e comma data so if
window Dot confirm so we are giving a confirm request that whether you
really want to delete the data or not so here is to do you want to delete
the record we will also give a warning that it will be lost forever so if you
want to delete it then you can go ahead and delete it by hitting confirm
and then we will run a function inside it and otherwise we will
just give control DOT log data not deleted okay so for now I am just
consult DOT log it our data is deleted okay so let's try it once here we will
go to data okay I haven't written anything yet so inside the button you
need to write something it will be delete okay yeah so now it is visible and
if I click on it it is going to show me do you really want to delete the data it
will last forever so let's go to F12 if I will hit OK then it will show data is
deleted and if I will go for cancel it will show us that
data not deleted okay not good not bad sorry foreign so now what we are
going to do now we are going to make this delete function for deletion so
delete data which will take the medical contract and the data dot record
ID okay and as you can see that we are giving data as input here so and
we are taking inputs as data here so we are going to create it and after
that dispatch and then provider okay so let's import them one by one First
Medical equal to you selector date state DOT medical DOT forecast
course variable and after that false dispatch equal to use dispatch now it
is it is the one which is must be done after that we are going to fetch the
provider fonts provider equal to you selector state Dot provider.connection
okay and after that delete data so for delete data we are going to go to
our interactions files so interactions so here is the interaction file so after
before load all data I am going to put it so export for delete data is equal
to async Medical okay medical record ID and dispatch and after that
provider
and then let's transaction is this and then if the as we have done before so
if the type will be so it is just like the one we are doing in submit record uh
in the similar way we are going to do the delete record so dispatch the
type will be delete delete request initialized so we need request initialized
and if it will success then we are going to delete it and if it gives some
error then we are going to catch it using the catch Handler and the error
will be there and we will dispatch type will be
delete request failed delete request failed okay that was great now now
now we are going to add the signer to delete it await provider dot gets I
know and after that transaction will be equal to a weight so sorry medical
DOT connect with the sign up and after that we are going to write the
function uh the function name is I forgot it so medical record we are going
to see it from here so here we are using this function dot delete record
and we are going to delete the record ID which we have mentioned in the
arguments and
after that we are going to hit follow confirmation transaction dot weight as
usual okay so what we are doing is that we are triggering this delete
record and this delete record will emit the delete record event uh which
we are going to fetch it and after that we are going to filter the event from
the our ad record event where all the records are there so usually what we
are doing is that we are going to delete this delete record from the add
records so add record minus delete record will be the record we are
going to get and which is our useful record okay so for this we are going to
load all data for the deletion also so we are going to get all the events
which are till now triggered for the delete function okay so for that we are
going to do the same thing for subscribe to even okay so we are not going
to do or load all data for now we are going to Simply subscribe to event so
medical DOT okay [Music] delete record this event we are going to figure
it's okay and if it is so then we are going to go for
the record ID the timestamp and name and every element which is here
record ID timestamp name is gender blood type and then okay we can just
copy paste as everything is same here from the allergies yeah so as you
can see everything is same so that's why we can compress from here and
after that now what we are going to do is we are going to catch from the
data okay not from here from here and here const delete order equal to
event dot Arts and then we are going to go for the dispatch the type will
be
the delete request success and then the delete order and then the event
okay it looks good to me yeah so now what we are going to do is you can
load all the data for the delete records also at the same time so let's go
for it also so for load all data for the deletion so once delete stream it will
be same like the medical stream equal to a weight hmm so I have written
wrong spelling of fonts the list stream equal to away medical DOT on the
not all okay query filter as we are fetching all the data so
that's why we need to use the pirate filter and then we are going to go for
the medical record delete so just copy paste from here delete record and
we are going to get the reports from starting till the the time or the
current block okay so here we are going to get the data from the delete
stream and now we will map the delete delete stream to get every event
and every Arts so first delete record equal to delete record map
event .orgs [Music] okay long one dot adds and then dispatch data type
which will be all
deleted records and then we are going to add the delete record yeah it
seems good to me we are fetching all the delete records and now we are
dispatching them so let's go to reducer so that we can get all the data so
first we are going to add that all the delete records okay so it will be same
as the all record medical records so go to reducer I am going to write it
below all medical records so for deletion we are going to make one more
foreign so that we can store the delete medical records and here loaded
will be false
and data will be like this and don't forget to hit for a comma after that we
are going to store the delete records so case all delete all deleted records
and then return dot State and delete Medical and here it's loaded will be
true it is loaded and then data will be action dot delete record okay seems
good to me now now what we are going to do is all delete records are here
so I hope we can see it now okay uh delete data is not defined in the
data.js deleted data okay so we forgot to mention here we will check on
deleted called okay not deleted record it will be deleted stream my fault
so now let's see it should now be visible uh and deleted records yeah and
as you can see here are two datas the first one and second one I think this
one is for 69 and this one is for 55 let's see uh for 55 uh here is yeah 455
so it is and so this one is 35 and for 69 here is Sophia ring so as you can
see the name matches so we have successfully pasted the name now we
are going to delete it but before that uh we need to store this this
functions
like as we have added here the value uh yeah so here as we are deleting
the data in the deletion request is initialized in English delete request
failed is initialized and delete request success is going to initialize so we
need to add them into reducer same as the one we are going for the
submit record where we are going for new record loaded new record field
and new record success so go to this one so I will prefer to just copy paste
it and duplicate it Ctrl D now the first one is what was the first one
uh foreign [Music] and for the uh all deleted records okay not for this but
for when whenever it is successful we are going to fetch it and for this also
we are going to filter it okay so uh Delete request initialize this will be the
same delete request fail it will also be same but we are going to my uh
make a difference in this one so for all medical record here it will be the
delete Medical so and here also uh we are have written delete order so
here we are removing the duplication if any record ID is already present
then
we are not going to add this one otherwise we are going to add the
medical record whenever we delete it so in all medical here will be the
delete Medical okay seems good to me so I hope one two three four five
okay hmm here will be delete order as we are going to go for the delete
order [Music] I hope everything is fine now [Music] okay so these things
will be remaining same okay seems good to me now [Music] we are going
to uncomment this one let's save it and now let's see what's the issue
here
okay there is no issue so hit connect yeah so as you can see that every
record is here and if we are we delete the one so it will ask us whether we
really want to delete it or not and if I will click ok then a metamask should
pop up yeah so it is popping up and it is showing delete record so
whenever we consume it it should add in the record section delete record
and the data yeah as you can see Aditya is here now we are going to filter
this data from this data so that we can delete minus this data from this
data
so for that we are going to the selection in the selection we have where
what we are going to do is that we are going to fetch the delete data and
after that we are going to delete or we are going to minus the delete data
from all data okay so for that we are going to find delete data [Music] so
here I will duplicate it and name it delete data and medical DOT delete
Medical I hope this is the name actually I am forwarding the name so
medical DOT delete medical okay so I was correct and after that
we are going to go for the open data [Music] so we can directly uh Delete
all the data which using the uh the delete dot sum function so sum is also
a function which is coming from low Dash okay [Music] so we are going to
delete all delete data from all data and we will be making a new object uh
I will call this as open data so constable open data equal to State and here
I am going to go for codes all so all means all data like we are going to get
the all data state and going to get the delete for
so what this reject function do is that it will delete the delete object from
the all object so whenever the record ID of the delete matches with any of
the record ID of all then the record ID of the one which matches the record
ID will be deleted so let me show you so here we are going to get all and
here we are going to get data and after that we are going to show first
data delete we are going to make a variable equal to delete dot sum
[Music] and here it won't be a form dot it will be a comma
so delete dot sum and if the order dot record ID Dot two string will match
the data record ID then we are going to return okay sorry uh then we are
going to return the data delete this one so that we can reject this mapping
okay and after that we are going to return this data delete and then we
are just going to return from this open data we are going to return this
open data so return the open data okay so if we will add this open data in
this section so we should get uh values which have already been
discarded
so contain data and as you know that if I went 69 we have already deleted
so it should not show us now so if we go here and see here uh as you can
see for now 55 is not visible like we are going to show here yeah so delete
delete record so as you can see now Sofia ring yeah or something uh it is
not showing here it is showing only VR Robinson and in 69 also Aman
Gupta is showing and 1778 Victoria Robinson is showing and Aditya is not
showing so we have successfully manipulated the data and now the data
is not visible and if we
delete some data like this delete it so we are going to delete Victoria
Robinson and we will hit confirm so whenever we hit confirm this should
disappear yeah as you can see here now we can delete it now so we have
successfully did it okay so the last thing we are going to do is we are
going to add an alert so that we can get whether we are going to get a
success in our operation or not so for that let's make Alert in the
components so let me minimize these things and also the form that uh is
one
and I am going to make another folder which will be known as alert and
inside it I am going to make a alert or css and alert dot Js and after that I
am going to click on the CSS of alert and here we are going to go for the
CSS of alert I am going to paste it here you can find it again from the
GitHub repo so need no need to worry for that and after that we are going
to get the alert message so from here import uh actually we need to do
RAC foreign so you will note one point that whenever we have added the
alert.css
okay so there is no changes yeah so we should add import dot slash alert
dot CSS so here we are adding it and after that we are going to make the
alert box so here let's start with the alert box hmm so we will be starting
with the e-spending so let me explain to you in the reducer you have seen
that we are giving this in transaction is spending is successful is error uh
so we are doing this because we are going to set up an alert here so
whenever we are going to make a delete request and pop-up will show up
that we
successful so for that let's first find is pending School which is pending
using you selector so here State and State DOT medical DOT transaction
so I have fetch is the name uh let's first imported the use selector and
after that constant is added so if there is an error then we are going to
fetch it along state in the similar way K DOT medical DOT transaction Dot
is spending here it will be is deleted or is error going for is error so here it
is now we are going to write some conditional statement that if it is
spending or if
uh let us first do with this is pending deal with spending and after that we
are going to deal with this error we should go one by one so if it is e-
spelling then do something otherwise do nothing we are just going to
show up a simple div IDE okay so if it is e-spending we are going to so uh
alert and there will be the alert message so it is pending is true so let's do
some operation let's do the delete operation so whenever we are going to
do a delete operation here something should show up okay we haven't
implemented the alert
yet so let's go to the app let's go to the app .js but before that I am going
to import it from the index from here so alert yeah so we are going to the
app.js and we are going to add alert here at the end yeah so now I think it
should show up wherever we are going to delete something uh okay still
now nothing is showing up so we need to make it with a proper case oh
where is the alert okay so in this tip we are going to write something so if
spending is there and we also want to remove it whenever we click on it
so we
are going to write on click remove Handler and we are going to make it a
function and here so first remove Handler equal to async and here we are
going to remove the class means like there are two classes so whenever
alert box will be there we are going to show alert and if it is alert dash
dash remove then it will get removed okay so inside this div we are going
to write dot overlay means and ref will be overlay graph so we are using
the refs uh those who don't know about ref you should refer to a
a React channel so that you can get an idea about that if so I am going to
copy this over layer and we are going to make this ref so in this one and
overlay left and we are also going to need an alert trips so alert is s equal
to use left and here we are going to give NL value just simply import it
from the react so overlay ref will also be there once overlay ref equal to
use rep we will be using user for removing the class for changing the class
[Music] so whenever it is overlay then we are going to show Dash Dash
remove otherwise we are going to just show overlay and similarly for the
electronics also alert and here also alert yeah so whenever it is alert only
so let me oh sorry Google should set [Music] so whenever we go for
spending okay nothing is showing up what's the issue if we will hit confirm
then delete request initialized yeah everything is fine so okay so
whenever it is alert then the alert will show up and whenever it is
removed then the alert will be removed something like that and we are
going to
then action will fail because it is an error so it is not going to complete the
transaction after that we are going to check that if it is not pending this
pending is false then we are going to do something okay so if it is is error
then we are going to show the transaction is successful and also the
transaction hash so [Music] we are going to do the same as before I am
going to copy it and paste it here but this time the S2 will be actual
successful and after that [Music] will be same the overlay will be same
thank you and everything will be same and let's see okay so now we are
going to add one more dips inside here so Dev and the class name will be
transaction has shout so we are going to show the transaction hash here
so transaction has Shout okay uh the transaction hash out inside the
transaction we are going to give a header for now it will be a hash and if
there is a transaction hash we are going to show the transaction hash so
for now you have noticed that we are securing these events these events
whenever we are triggering
anything these events are going to pop up and added into the event list so
we we are going to check if there is a latest event or not or whether a
latest event is occurring or not and if there is a latest event then we are
going to add that even event hash block hash so as you can see every
event will have its own Dockers so we are going to show it here so let's
show it here in the okay we are going to fetch the events uh before that I
am going to add in here because it is giving us issues yeah
so now we are going to show a event but for now let's just check it one
once whether it is going to triggered or not so whether whenever we are
going to hit confirm uh it should show us something but it is not showing
up I don't know what's the matter let's add some data [Music] and just hit
submit here meta here the alerts should pop up but it is not popping up I
don't know what's the matter here is ah the data is successfully okay here
it is showing alert pinning in the end and after that alert
successful and here as you can see here is shubham Das showing up so it
is showing success and if we delete some data then let's see what is going
to happen yeah alert pending is showing up and if we will hit confirm then
the alert success message will be here so let's first fetch the events and
show the event first so for here so event zero so we are going to fetch the
event using our selector only so for events also we are going to make a
custom selector it will just be a small code here at the end we are going to
make it
we will be fetching that event then our alert so on Stephen we'll selector
okay event and here it will be my event selected okay so I think
everything is good to go so here we are going to write given 0 and also
here if the event is present then you should check it uh so it's trending
and the even number zero should be present and if both these conditions
satisfied then we are going to show the success message along with the
event so even number zero dot transaction hash dot slice so we are going
to show the
transaction has actually just show the transaction has like that only here I
give two brackets there should not be prevented event or not event
number zero so we are going to fetch the latest event and the transaction
hash okay so let's see whether it is working on not okay transaction hash
is not found so here in the events we are going to see okay it is the block
hash uh block has is also not found what's the matter actually we are
going to show the transaction hash only yeah so here is the transaction
hash I
don't know why it is not showing up we are not going to show the
blockage we are going to show the transaction hash [Music] okay okay so
let us check whether we are going for the same export event selector
equal to create selector events down even foreign [Music] so let's see
[Music] oh that was my fault actually we should first check whether the
account is there or not so before that you let's check one thing okay
foreign because we are not getting it here we need to set it here ah
mistakes okay
so [Music] just do it once more so that we can get an idea what's done
later is so hit okay and alert pending is there and hit on confirm okay and
the delete record is working but it is not showing up here let's see what's
the problem [Music] the event 0 is I think is not showing up also lot now
events let's see whether it is consoled or normal all right [Music] whatever
yeah so let's remove other console.logs for the data you are not going to
show it here we are just going to log one thing okay so now
let's see I want you all to learn the debugging also that's why I am
showing you these things so that which can know what's the message or
what's the problem here the record is already deleted okay so it is not
showing us so here alert pending is here and whenever we click alert
success it is not showing us anything and Okay so the state the medical
events are not getting here so we are searching the medical events and
the events are empty so that's why these are not showing up [Music] so
let's see why the events are not
getting updated uh just go to the reducer and we are every time we are
doing a success message whenever we are doing some action we are
putting the events here and in the interaction files also we are giving the
events action dot events are here actual dot events are also here so here
also we are putting the events so I don't think here is any mistake from
this side so the action is showing us pending I don't know why so let's do
one thing just restart the application once uh just run the node once so
yarn hard hat node
or npxr Death Mode whichever you like just wait for it to complete and
now we are in a hard head to learn script zero zero deploy script dash
dash Network localhost [Music] and after that we are going to run the
same state but for the zero one ceiling strip okay let's see I hope there
should not be an error here for now [Music] [Music] okay so npm Run start
foreign [Music] [Music] next month [Music] [Music] okay so now the react
is going to start I hope this time everything will will be clean and cleared
and the events are
going to pop up okay so let's see here the events are empty but all the
datas are loaded okay events the events are empty so let's just go for
some action sorry so let's try some names some age some gender some
[Music] allergies and whatever is this so here it is showing action pending
and I hope action will fail yeah action will sell because we haven't
removed the active steps yet active tab data should be removed so now
hitting submit I hope this time everything will be good uh the event should
show up they show up
the transaction hash so let's make the transaction Hash a little bit shorter
by using the slice it was a hectic process I was not getting what was the
error but I hope you have learned how to debug the code you need to
check everything and go for the backtracking hash dot slice 60 and 66 it
will be good and I think this time yeah oh no no transaction hash is not a
function okay and actually the transaction successful message this wall so
that's why it is showing up so for removing and load we are going to
add the alerts so here we are going to give our e actually just remove the
and here alert left dot present dot class name if should be made as alert
then just remove so whenever the alert will pop up the class name will be
alert and whenever we will click it then it will become alert dash dash
removed and it will be removed so overlay left dot current dot class name
equal to Overlay [Music] means yeah so this is good and we also need to
use an use effect so that whenever is pending is there uh it
okay it is taking some time foreign [Music] so once let's again restart the
application and see what's the problem it is a very hectic process [Music]
okay at that moment that everything was working now I don't know why it
is not working it should work fine so we are again starting the application
please Pro get done so it is a very hectic field you need to notice
everything whatever is going on whatever is wrong so connect to account
first we need to collect the account and after that we need to remove the
active step data [Music] Advanced your active tab data and uh did I
forward to the ceiling shift no I didn't so why it is not showing the data
what's the problem man yeah so it is now showing the data to us and
whenever we are going to delete something we will hit OK metamask will
pop up we'll hit confirm delete request initialized it should success now
[Music] foreign [Music] but the deletion is not showing up let's see what's
the problem is in the interaction files here we are subscribe to the delete
event and here
we are showing the deletion and in the record ID the division is in progress
and if the deletion will be there then it is going to show us the delete
medical records let's add our console.log here delete order okay still now
the deletion will be spending let's see what happened uh 43 it is an
address [Music] [Music] still now the division will test is initialized and also
the deletion request is initialized but nothing is showing up I'm not getting
what the problem is there there are two then deletion
requests okay now and here in the delete data you can see that there is
two datas and if I will add one more then the division it should show us
one more thing hmm okay I see actually I think that my machine is getting
very hot and that's why it is working very slowly so let me just clean it up
once and I will show you the demonstration okay again let's try to see the
application so let's connect it okay we are now connected as you can see
here is the data and there's the form as you can see that there is no data
event and in the delete also there is only two data so let's try to add the
data 12 age [Music] and then hit enter so transaction building is showing
up uh and the transaction field we need to it is the active tabs here so just
go to clear electric tabs so again uh gender will be same as nailed be
positive always be positive and the OS to photos says something and the
pending will occur and I think this time some error will occur let's see so
record loading okay it is getting loaded and there is absolutely
this happens then we are going to show this otherwise we are going to
show an empty lift okay so we are showing an empty this and here also
we have use effect and whenever spending occurs then we are going to
show these things okay and whenever we remove it it should get removed
okay clear enough so why is those things showing up I'm not getting why
this thing showing up let's inspect them once okay here is the previous
one so div dot alert okay I think I did something wrong in the CSS I guess
okay
what's the issue so if he's spending in there then we are and also we are
removing them so I don't think there should be an issue here but let's find
out okay [Music] also you can add one more thing that whenever there is
a okay not now I think it will be better if I call it after some time so why it
is showing up till now I think the transaction is till now it is successful and
it is is true so that's why it is showing like this but now it is a false
transaction [Music] hmm the transaction is showing us false
but then also we are not getting [Music] so let's check everything once so
react here to use alert and use selector by events config okay there is no
country uh alert event event is here World PC reverse and these error is
here and to remove alert is also here dot current dot equal to Windows so
whenever it will be removed this is also showing up and this is also good
[Music] okay so [Music] it will be alert box and here also it will be alert box
so I wrote this wrong it won't be alert it will be alert box
here also it will be alert box and similarly here also it will be alert box so
that's my fault I this is my mistake so okay I hope everything is fine now
so let's see so the patient name is shubham Das uh 33 years age and it
will be a mail or yeah I will perform it so this was not gold and whatever
also whatever surgery whatever it entered the alert spending okay and
whenever we will hit confirm it should show a alert successful actually it
won't be alert pending it should be action bending so you can we will write
it yeah so
Poland green and also whatever surgery whatever and we will hit submit
the action pending is popping up okay and we'll hit confirm I hope this
time the action successful will show up and it will also get disabled
whenever we click it so as you can see the action successful is here well if
the transaction hash if you will click here then it is completely gone and
whenever we will see it in the data so here is patient pratik if we will try to
delete it it will ask us whether we want to delete it or not it will be lost
forever and here is the transaction pending message for deletion so we
will hit confirm and it is a success whoa okay that's great and I hope this
record is also wrong yes patient pratik is gone okay it is working and but
their hair should be a background I don't know why the background is not
coming let's check um thank you okay I don't see any mistakes here but
yeah it is fine it is looking good to me it is working so that's all guys uh
and also I will show you how to um show it in the test net or the
once is equal to okay I need to import it from above so input config from
dot slash dot slash then click from Json and here if the config file exists
then what we are going to do is we are going to show that in a string
otherwise we are going to show it as hash and the string will be config
okay so as it is a JavaScript expression we need to write in a dollar sign
config chain ID Dot Explorer URL we are going to provide the Explorer
divided in here and run a URL and DX slash here is one word event even
number 0 dot transaction hash okay so here is it and now we are going to
add the Explorer level but before that I realized that I have done a mistake
here uh in the in this file that we need to add a 0x before the chain ID in
the test Nets so 0x and here is the chain ID and we are going to deploy it
into the sepulior test step hmm so it is looking good to me so let's see
whether it is going to okay so we are we need to give the hash code of say
poly attachment foreign export is here and we need to give the
head score of this this chain yeah so here it is we are going to paste it
here [Music] yeah so I think it should work now so if I try to go into sepulia
so yeah it is showing us that uh we do we want to change the network or
not so for now we will be canceling it okay and I realized that whenever
we are going to change the account this account is not going to change
like as I am in harder number zero so whenever I change account to
harder one so it is seven eight C8 but it is remaining the same so what we
need to do
changed we are going to reload the page like as I have shown you that
whenever we are going to say bully attention we are going to reload the
page so window dot ethereum dot on whenever the change is changed so
change changed we are going to show we are going to reload the page so
window dot location Dot reload yeah simple okay and now whenever we
will change the this to sepulia the chain will reload and also I want to show
you one thing that if we go to some new account it will get changed like
here it is 7096 and here whenever I change this account it is two to six six
and here also it is 2266 so the account is getting changed and now we are
going to change the network to sepulia so we need to upload the smart
contract into sepulia so I will show you how we are going to do that so
wait for some time okay so we need to change it we are going to make
another link for sepulia so go to config.json and here you can write comma
and just write Okay so it is one one five one one one and it will be same
like this medical record the address we till now we don't know the address
but for medical records we need to give a Explorer URL so for that
Explorer reward L will be like a hash but for this Explorer will URL will be
something different like as we are going to deploy it in sepolia then it will
have a solar URL okay so we are going to change this address so now let's
deploy the address let's deploy the medical record smart contact to say
pull your definite okay so now I am in My remix ID and now
we are going to deploy the smart contract so let's first paste the smart
contact program here and here as you can see I have pasted the smart
contract program simply from here you can just copy paste from here I
have already done that so now I am going to provide it injected my
metamask web3 and everything is good everything seems good to me for
now okay and we are going to deploy it now so just go ahead and deploy
so it is showing you make sure that the definite is sepulia that confirm and
here it is going to deploy our smart
contact yeah so here as you can see I will copy the smart contract
branches and here is our transaction hash we can just copy paste it from
here or we can simply go to etherscan we'll see that our yeah so our test
uh is the smart contracts is deployed successfully and we can now add it
in our config.json so here I am going to paste the new address it confirm
okay and in our nav bar I am going to make certain changes foreign think
everything is fine but I want to do one thing that okay leave it everything
looks fine to
me so now we can just go to our react application and just hit connect and
here you can see we have 5.0648 in our sepulia okay it's not showing
sepulia it is showing local loads let's see why it is showing us like that so
chain ID config 16 the value is here the same so just refresh it once okay
till now it is showing us the same thing okay so I am not getting what's the
matter which is so the value is complete and zero exchange ID dot two
string x16 everything is fine yeah it should show sepulia
thank you so here we are finding the chain ID chain ID dot two string
somewhere you can getting the chain ID yeah so let's once check the
chain ID here so provider chain ID is one one five five one one one yeah
everything is good so zero X star chain ID dot two string of 16 and [Music]
0x5 it is for the golly and hip save and also you can add the smart
contract to any the quality effect so I am just going for the boldly yeah so
for the quality test net we are going to deploy it so let's see here hit
confirm for the call
latest net the contact deployment is pending let's see how much time it
will take actually to only was the previous Space page so it is taking a bit
of time that it gets finished yeah so it is finished and here you can see for
the body so for the body we are going to make it as file right yeah and
here also it will be called [Music] uh so for the quality slate it is showing
this but for the sepulia.net but it is not showing anything like that also
what is uh so let's see the chain idea of sepulia
I think I wrote the wrong chain ID 0883 1151 okay I should just copy this
one and just paste it here hit OK and here also 1115511 and in this one
one one five five one one one five five one one everything seems good to
me so I don't know why it is showing like that foreign let's just go here
again and go for sepulia come on though yeah so now it is working as you
can see sepulia Godly or you can go to localhost okay so for the localhost
is not working but let's add some data in separia texture so padam is 34
gender
main B positive and pollen grain and Australia or surgery and we are going
to submit it uh action pending is showing up I hope it should now get
confirmed so now as you can see action printing is still here and it's taking
some time yeah so it is successful and if you will click on it then it will
show you the transaction hash and it will also go in the third scan from
here you can see the connection I should add a blank here and also here
is the one so let me just add a blank tag here in the alerts
so that it doesn't open in the save tab so here I am going to add the
Target and the rail so here but I am going to add the Target and that in so
that it doesn't open here okay now I am going to delete it hit OK confirm
alert pending and metamask is popping up yeah and if you will click on
the transaction hash it is showing in the different tab and that's good we
have made this application it is looking good to me uh but I don't know
why it is not getting changed so let's find out why it is not getting
changed
um it seems like here in the lab bar we have to add 0x here yeah so I hope
this time it will no it is still not working so if I change it to Hard Hat by
myself it is coming to localhost when I am coming to sepulia it is still
having the same it will whenever we are going to localhost it is not going
there okay let me see what's the issue okay so it was again a fault so you
can see here we are just giving the chain ID we are not converting it into a
head score so again we need to convert it into a hex code so
just to go into the hex converter and just click here and hit confirm so it
will give the hex number just copy it up and paste it here yeah so this
time it should run properly let's find out yeah so from uh let's reload it
yeah so we are in sepulia it is connected we are in localhost it is going to
show us the local host and it will hit confirm it is going to show us the
localhost and if you will connect it we can see the data we can add data
we can do everything whatever we want okay it was a very long
video I hope you like the tutorial so thank you keep supporting me and
see you in the next video foreign