This content details the implementation of a web application's authentication and feature development, focusing on integrating Google OAuth, managing user sessions with JWT, and building core functionalities like workspace management, project creation, task handling, and user role management.
Mind Map
Click to expand
Click to explore the full interactive mind map • Zoom, pan, and navigate
so let's go into the handle click and we're going to do window dot so we're
going to redirect the user to that Endo so I'm going to get the window H
hrf sorry not HR location the location that HF this is going to direct to .3 if you go into our
if you going into this local remember you have API sl/
Google and this will take us to so that what we're going to do here so I'm going
to do that here so to get the local remember in the EMV we set we set local local 8,000
API so we just going to P that and that is also inside the base URL if you open
the base URL you can see the base URL here so I'm going to import that so let's import this
here Bas URL and this is going to be sl/ Google and let's import the base
URL so after you set this up that is all we need to do on the client side for Google and if we
go into if you scroll down to we have Google o failure this is the call which we set um which
we set in the back end if we go into back end EMV you should see that we set the client or the font
end Local Host o and come back here so this is actually a a route client for the for the Google
oio and also the the part if you go into the rout folder and you click on common click on
um the let click on rout part we should say the Google call back so this is the part so
this will handle so we go out me close this back in there so Google fail has there's nothing else
we can do here the only thing is just if the if Google fil to sign the user in it will redirect
them to this page and then we have a button to they can click to go back to log so we're
going to demonstrate this so let's make sure that our front end and back end server is running and
let me so let's test it out I'm going to make sure close this and let me go into my client
and let's try and click on Google so I'm going to try and test this fied or from Google so what I'm
going to is I'm going to click on log with Google Let me refresh let me oh so inside the okay yeah
connected let me save this and let's try it again so I'll click on it now is redirected me to Google
so I'm going to try with a new account and I will this from I'm going to cancel this from
um signing signing up this new account I'm going to cancel and immediately it's going to redirect
me to this Google o button and you can see uh o failure sorry o failure you can see back to back
to login so once I click on it this is taking me back to login then I'm going to try to log
with my real account and and I'm going to just log in with Google and immediately this should
take me to the dashboard so this dashboard is just all this data here are just simple
so so let's go ahead and work on the sign in so I'm going to move back
to log in and let's connect let's connect the login and point so let's go over to sign in
before let's go and set up the connect the Endo first so I'm going to go into API and
inside the login motation I'm going to I'm going to set this so we have the types for
the login I've set the type already if I go into my type scroll down to types
and click on API type you will see login type and login response type so this is
what I'm going to this is what I said so I'm going to copy this going to my API and there
we're going to say data and data is of Type L Type so let's import login type
and there we're going to we're going to also set the return
is going to be a promise of type let's go back and copy the login
response type about to type and let me break this down here and let's pass it
here make sure to import this
so let's do constant [Music] response is equals to await API so we're going
to API form the API from the Asus client we're going to have that
post and let's pass in the aps Das / Google and pass the data then let's return response.
data and the error should stop so just copy and the login and let's move into sign in and
inside the sign in we we're going to get this inside here so let's uh say constant
it and we're going to say it's [Music] spending we going to get that
from from we're going to get our motation so uh motation use motation is from T query so
most use motation from T query and let's import that we going to have a mation function here
and that going to just past the so let's past the log mutation function and make sure to import
it so let's import this from
API and then we are going to we're going to get use navigation because we're going
to the user to the workspace after loging in so we get to use navigation
and navigate is to use navigation which is going to be from let's importation
for and then we're going to use this mutation motate inside onsubmit so
inside the unsubmit we going to check if if pending then return this un let's do
motate unless pass the
value then ins we're going to have Comm and let say on
success we going to get the
data and let add Comm on error
let say this to error and here we're going to conso the error and true and toast the error
I'm to toast errorr message and this should stop so let's import to from to from Shanty UI so you
can see who use to from shant and then inside this success you're going to get the user user
to data. user and we're going to uh
navigate we're going to navigate the user to
workpace
slash user. current Point workspace yeah so that is it so we are also going to also catch in for
instance on the client side we can have a return return URL equals to htal to slash
let's give it SL invite slash the code slash join so we want to also capture the return URL
if a user that tries to um join the workspace it's not sign in it will be redirected to sign
in on this P so the the URL will be added to the to the to the part yeah the part will be
added to this URL and assigned to return URL so we need to capture this on the log
and check if there's any URL then we the user once the user Lo user to the part the route
being specified here so to do that we're going to get we're going to use constant
search you want to do use search
param and let's get the search param here and let's say constant
return URL is going to be equals to search param do get return UR
so we are going to uh get that okay let's go to where weting the user to Curr Curr
space so what we're going to do here is we are going to decode the return URL if if
it was passed so we're going to do a check a constant decoded URL return URL de code
component or you said no no then if this you just do Go pass this here and set all
this so This
should they should work so let's trans and log in and we should have the return Ur here and if I try
to L with this user so this ISO and I'm going to just click on sign in login oh let's go back first
so let me add let me add the
uh the return
URL
invites so let me get the part here U from route
invite let me just put anything
here and let's copy this and reload this then I'm going to go back to my sign in
we forgot to add in the um login the loader so on log we're going
to add in the loader here and let's first say this is disabled set to is
pending then we're going to set this load here so it's spending loader we going to get loader
from Lucy we already install that already so and we have animate spin to rotate the icon so let's
save that and let's try it out again so I'm going to reload this and let's sign in with
L and you should see it has taking me to this invite workpace page so this is great this is
great so let's go ahead let's go back and if we remove this [Music] URL and immedately I CLI to
log so let me remove this and reload
this yeah she just taking me to
workpace so now we have the workpace here so let's go over and work on the sign up
so I'm going to go back to my log and I'm going
to go to sign up and let's connect the sign up here so uh we can go to our AP
API inside the loop folder and um let's go to register and if you go to the type
we have the register type here and so I'm going to copy this and uh
we're going to say
data passing the register type and let's import register type from from
API and then we're going to just say wait so I'm going to just remove all this IIT
API not post
slash SL
register I'm going to pass in the data
here so let's use this I'm going to use register and let's go back to the uh sign
let's go to the sign up page so click on sign in and let's copy this mutation
here and let's go to sign up
and let's just paste this [Music] here so we're going to also get the navigate use
navigate is equal to use
navigation and let's import use
mutation from PTO with
we query and we going to change this from log to register mation function and let's import
this let's import this from API then we are going to we're going to check if if it's pending
return first we're going to call the M and pass the value then we're going to nigate back to log
and we're going toow error going to we're going to throw the error here we going to call a post if
it fails then then let's go scroll down to where we have the submit and let's have disabled here
you can set this to is
spending and um we going to display the loader here so it's spending
loader and then class name anim spin so think we are done with
the sign up so let's test this out let's create a new user so I'm going to say um
let have the password here so I'm going to sign up
here so let's sign up
so I think uh there's some issue here we
should let me reload this again and let me look at the submit button okay let's import loader from
Lucy and let's make sure everything is okay and let's try it again
let's sign up email already exist to sign up the user so let's try with a new user here um
and IM take us to L and if we TR
with if I try and L in with the user we just
register and it should load us in so this is great
this is great so let's I notice the uh the workspace the current
user is not being passed yet so let's go back to
login and then let's go to
unsubmit so let's try and console
this L user so I'm going to inspect
let me go to network and let me try Lo with the user
again Lucy
Gates let's
in I think we're getting this wrong
okay okay okay okay I think I know where the issue is from so I'm going to let's move to a
better view to view this one so I'm going to go into my loc [Music] point and if I try to
log in we should see that we have some list of works B is here and it's redirecting the
user if the um ID the ID didn't match any of this it's going to redirect the user to the
one to the workspace that march here so that why it is having that issue so I'm going to so
this is working already so let's go ahead and fetch all workspaces here and and this should
fix the issue so let's go back to our code and let's go on and work on all workspace here we're
going to show all workspace all the workspace this user have so I'll go to my API so let's
close let's close this and let's go to component so this is going to be in the sidebar so let's go
to sidebar and if you look at workspace feature so click on that and this is it so you can see
see we have some um workpace I set here and this is just Dom data and this is a check we the user
to workpace from the list so let's close all this sign up and let's go ahead and call this
end point let's go and set this end point so scroll down so before work the log we're
going to also do the log outs here so let's let's just switch and let's work on the all
space so let me move this up and let's work on this so This is actually going to be a
guest request so what we're going to do is to let's set this to async here and we're going to
have we're going to let me bring this down here and let's have the promise
and we're going to set this to all workspace all workspace response type I'm going to import that
so we can find it inside so I'm going to go into where I set it if you go into the type the API
typ so scroll to where you have the workspace type and we can see the all workspace response
here so just select this and copy that and bring it inside here and let's return
so let's call constant [Music] response this is going to be equals to await API do get workspace
SL all and let's return your response to data and this should fix the err problem so let's copy
this let's all workpace user is a member in so if you copy that and go over to our our um workspace
feature inside here we're going to use use Query use Query from
um query so I'm going to constant data we're going to get a spending
and let's say
usey query let's set the query
key call this user
workpace I us
workspaces we going to say the query function this is going
to be we're going to set the get all work space function and then let's
say time set this to one and refresh amount
true through yeah so we have done it so let's get the workspace here say work
space data work spaces so let's remove
this and [Music]
now and now let's uh let's fix this so I'm going to remove let's
remove everything here and let's do like this
workpace workspaces do
length so remove
everything constant work space is equals to
workspace so we need to get the ID of the workspace so I'm going to get the ID okay
we already have the ID we're getting the ID from the use workspace ID which is just to get the par
so we say if workspace ID then we
say workspace workspaces do
find
workspace doore ID is equals to workspace then s we're to pick
workpace work spaces
index and we're going to also say
if if
workspace then we're going to set the
active to workspace then we're going to say if not this then redirect the
user we going to redirect the user to the workspace and the workspace _
ID so this workspace type we need to change this
to [Music] underscore and say remove this plan here and set this to name
String then we need to set here all the
and this should stop the warning and this we need to change this to underscore
ID so we are done with
this so let's scroll down to fix the this issue here
so I'm going to remove this and set this to free
and then we are going to WR
fix so let's scroll down here and this should be let's put a question mark here
because this possible undefined we can just set this to or empty you can set
it like that but I'm just going to remove it and let's change this to
underscore ID so this should be after the label of workspace then set this to
underscore so I think that is all so the last thing we're going to do is to show
the loading here so we're going to show the loading at this point here so just look for
the drop down menu label let's P this here so is it's spending there um just show the
loader yeah then lastly we're going to show no workpace selected here so to do
that we're going to check if the active so I'm going to collapse this live and
this is the Side Bar menu button that holds the uh the the active so I'm going to say
active attive work space then if I work space let's open this the fragments and let's move this
inside and let's say else we just going to you're going to say if so we're going
to have if so just copy this is the same thing here if G Flex one text left text small leading
and tight so this is exactly the same thing then copy this two yeah you can see it no
workspace selected so I think that is it so if you try to log in the we ID should appear on the
URL so let me try log
in and we should see the Lo there so the real workspace ID is showing on if you click on this
side bar you should see the list of workspace for J do you can click to switch between different
workspace so so we need to handle our current users so the user when they signed in they can
access this page and if if they are not signed in if they are if they not signning then they'll be
on this page and can navigate to the workspace uh they can navigate to the workspace uh dashboard
so let's go ahead and handle this so I'm going to let me clear all this here and let's go back to
login then let's go over to workpace and let me let me clear everything here and let's go to the
current we're going to work on the current user so we already have the Endo if we go to API we
can scroll up and you see get current get current user function and you see we've passed in the the
API then if you go to the hook because we're going to set it in a hook I'm going to go into hook API
use H and we should be able to see that we' been able to we WR the use Query the use Query and we
set the query function and so let's go over to um the the route so we're going to handle the
route here so if you go to um so we're going to handle right here so the out rout and the
protected routes so we going to handle if the user is loging then user navigated to move to um
the rout under this protected rout they red them to the log and also the same for they're going to
do that for the but this vers the user once they loging they'll be redirected to his dashboard so
let's go and impl so inside here I'm going to close this and we can get the
data is going to be equals to use or so use is from the hook so I'm say
use H current user then we're going to set this to all data and let say it's loading
now we can say this we then here we can get the user so user is equals to alt data
user so this is okay let me say this this can be yeah so now let's check
we need to check if um so we need to check if not
user then let's return the
user so
outlet and let's this else if the user is actually Lo and then we
navigate
to so sorry guys I need to open so let's import navigate from to
and here we're going to get ready user to the workspace
slash we going to get the user current
workspace and let's get the IG let's say this to
replace then for the loading we are going to so let's go over here and say if is
loading let's return so I have a I have a component already for the loader so this
is going to be dashboard scalen if you go into dashboard scalen you should see
this is inside a scalen loader inside the component so I I'll set this like
this so This the scal is coming from Shanti UI going to UI fold you can see it's connecting
so let's see this if I try to let's try to go back to the login page and you should see this
is working so let's go ahead and um and work on it so before we go ahead and work on the
protected r i want to also avoid the user loader to show on the when we trying to refresh the
login page for instance if I try to clear let me try and clear the the
cookie so let's clear the cookie and let me try to go back to
login so if I try to load you will see a dashboard loader on the login page side so to fix that
we need to get or we need to avoid the dashbo SC for showing on the log
page when trying to load the login page so I'm going to use constant
location this is going to be equals to use location
from and here we're going to say constant is loging in log rout or out
route so we're going to get this a rout and we're going to pass in location part
so I need to change let's change this to is out
rout uh I think this is going to give an issue
I need to set this okay let's just leave it to
um is we can set this one to underscore here and we just say and not so reason
why we did this is because we want to avoid any if we go into his out
inside the r part we had a simple function that that converts the
all the a to the list and check if the part name is included into it so I want to avoid the
dashboard from loading to load in all the route only in a protected route so if we go route inside
the route and this is the reason why we have to do this so if we try to reload this now if I try to
reload we should not see the dashboard showing so if I try to to log in you should see the dashboard
if I load this so this is not showing the loader yet so let's go and work on the protected uh for
the protected route we need to handle that so inside the protected rout we are going to we
going to do the same so let's go into the auto out and copy so let me reduce this let's go and copy
this let's paste it here let's import use
or and then if
loading then we're going to return the dash going to return the dashboard
here and we going to say
user if user
we if the user we're going to show move the display the outlet you're going to put Outlet
here and E we're going to navigate the user to navigate the user to the login
page and let's replace so let me import this naate first from here to and let's
replace so now we've been able to do that if I try to reload now we
should see the dashboard skele this is great if I try to go over to my
login it's taking me back to the dashboard but so that is it so we are done with handling the
protected route so we need to able to on our side be able to show the user that
is loing the name the email and the profile Pi so we do that we're going to we're going to go
into from the route if you go into protected rout we have um inside the index we have app
layout so if you go into app layout so inside the app layout if you notice that we wrap the
app layout with the output provider so this will help us to provide we use the data from
the current user and so and add pass it down to all of the components so inside thew we're
going to get this so I'm going to I'm inside the context so we're going to um let's close this art
provider so I'm going to first of all let's get the let's get the AL so I'm going to say
constant this is going to be equals to um
use and let's pass in data is going to be out
data going to get error
ER is loading it's going to be out
loading is fetching we can have is fetching so let's import use
or and refresh I have all refresh
we can leave the refresh so once you have done with this let's get the user here current user
is equals to all data user let like this so let's go over and set the type for the
context so for the Contex I'm going to remove this workspace ID we don't need it say user
so user is going to equ to user
type so if you go into the type you should see user type here so this
is the data of the user once we try to get the current user if you check your
post you should see that once when you tested the current user point this is the
output so we're going to show uh that's for error of
any is loading buan let is fet refresh sorry it's
fetching bu think that is all let let
say and
I set let's set refresh here
what just say it
here so we done with that so now let's let's pass this
so let's remove the work ID let's pass in the user
let's passing error it's going to be out out error it's loading is going to be out
loading um is
fing refresh or let's remove this workspace ID here or let's just let me comment this
out so I think we are done with the current user able to fetch
the current user let's go over to the sidebar and let's display the username
so I going to my component let me close everything going client SLC component Side
Bar and let me expand this and if I go into sidebar I will scroll
down yeah and this is where we're going to display
it so uh let's let's get the let's get the quantiy constant
it's
loading let's get up from use both
context you have
user let me remove this so for the user let's go down to we have the
user so for the call the avat we're going to set the image all so I'm going to get
the Avatar image here not from from UI avat and let me say SRC user DOI picture or mty
string then for the uh fallback I'm going to just
username so I'm going to get the first name split by this get the first index and get the
C zero so I can duplicate this and set this to one and let's save that and we should see this
uh can see JD J so let's also set the name here user do name and also user. email and we should
be able to see the user name and email so that is it so let's go ahead and implement the log
out so we can able to lck the user out so for the log out we're going to so we have log out
menu drop down menu here and if you look at we have log dialog where we set it is open and set
is open and we set is open to through here if you look at it we have the state control so if
I go into log out uh we can see the dialog here saying that are you sure you want to
log out some message and the sign out button and also the cancel button then this is where
we're going to handle the loger so let's go over to API to set our API so I'm going to go
into the leave folder API and if we go into log out I can just remove this I just say await AP I
post log out so let's copy this the log out mutation function and let's go let's make sure
to save this let's go back to our logog and in here we're going to all the motivation here so I'm
going to since we're not going to pass anything to the L to the end point we're not passing any data
here so what I'm going to do is we can go back to log out and let's a constant um let's remot
it so it's ping this is going to be equals to use
mation and we can have the UN we can have the motation function here let's
P the L motation function and make sure to import that and we have on
sucess and let's set this let's have the UN on on error
so have error and if error occur we're going to show a
tost so let's import tost [Music] fromi and here going to immedately navigate user
to us to log so let's set this to then let's get the log here na Conant navigate is equals to use
navigate and then we can also
set this open to [Music]
force then if you guys we can reload the you can say constant query R so you can
refresh now can query Cent let's import query C from query and then let's invalidate or
reset let's reset the query for user so I'm going to do that here you say client reset
and let's pass in the query key and the query key for all if I go to use
say we have user so I'm going to my dialogue and let me pass
it here I save that so let's copy uh the is spending I say if is spending
[Music]
return and
let's let passing the dependency
here and let's go down to where we have sign out I'm going to pass in spending andless the
loader from Luc and set this to a [Music] disabled expending and let's save that and
let's try it out now make sure uh the server is running and let's go here and I'm going to
reload this and let me log out this user so I'm going to click on done and hit log
out and you can see the dialog I'm going to click on sign out and EV we are brought out
to this if I try to go to workspace this it's going to take me back to log so we are done
with this end point so the end point we're going to work on you're going to implement
is being able to get so if I log to J being able to fetch the data base the workspace
data based on this IDE so we can also use that to make sure the user accessing this workspace is a
member and if it's a member then we we return the data for the workspace and display it but
if not then we can redir the user back to their own current workspace or to the log so let's go
ahead and so to do that we're going to first of all let's go into our API and let's set the API
for get workpace by ID so here we're going to pass in the workpace by we're going to get going
to pass in the workpace ID here which is going to be string and this will return a promise for
us of type workpace by ID respon I'm going to import that and I'm
going to show you if you go into this you should see this workspace by ID
is under the workspace type and this is going to be the workspace type workspace type and remember
so workpace type if you go scroll up you should see workspace type here and this is the member
added to it so let's go into API and let's this going say constant response equals to AIT API
get
workspace do sign workspace ID and let's return um response data so let's copy this
and let's go ahead and create a hook so I'm going to create a hook to use that so
inside my hook I'm going to create uh inside API I'm going to create
get you can use get workspace so use get workspace and we're going to use
our query so I'm going to first over so this will require workpace ID okay let's that to
string a constant is equals to use
Query and let's say the query key the qu is going to be
workpace and we're going to add the workspace ID here so we're going to get a query function since
we're going to pass our going to pass argument to the workspace to the query function so we're
going to use a call function so we're going to say and let's call this I'm passing the workspace ID
so let's import this from uh Li API and then we can set the you can say this zero we try
we can say we can have
enable work space ID and let's
return so we are done with this so let's go and get let's go and use
this inside the context so that's where it to be handled I'm going to go to the context for
out and below the user we are going to we going to go for the I'm going to take this up and let
me move this to the top we going to enable this because we're going to have to get the workspace
ID I'm going to say
constant this is going to be cl to use unless passing the workspace
ID and then we're going to have a data workspace data is loading it's going to be
workspace [Music] loading we have
error b space
and we can have
aesh with refresh this is
refresh effect work space let's import use workspace um get workspace query and
that should be it we should also add the typ here for workspace
workspace it's going to be workspace
type and we should also add the refresh so I'm going to say refresh refresh
work space set
void then we can get the um let's get the the work space from the data so
I'm going to say workpace go to workspace data workspace and there we're going to pass in the
workpace and there we can have a workspace eror
and also workpace
loading or you can just
simply you can simply just set this to us
loading what loading
and then space
loading yeah I think I made a mistake here and we have the refresh workspace
so that is it so here we need to use the US effect to confirm if the user is
actually a member of this workspace so I think I need to fix an error
here oh okay it's loading so let me let me set this out on it's loading
another office the error so we need to check if the user is a member then we are
going to we going to redirect the user to the login if not we going to we not going
to do anything so let's just go ahead and do that so let's check this if the so if
you want cons this we seeing the assess on authoriz so let's check if this have access
on authoriz we going to be the user to the login so let's do that here so I'm going to
say if if workspace error and errors workspace error do error code I think this let me check
M your
name I think this is not giving me the error
code so let
me so um I had to comment this out so the problem is coming from asuse so
to fix this on as we can go over to API go over to as client also we can also track this here if
you want to track it at this point and is to show we can come over here and let's say if
data error code access unauthorized then we direct the user to the uh Slash to the login
and if you can see it will redirect the user so I'm signed in with um Lucy gate and Lucy gate
only have my workspace so I'm going to go to my Postman and copy the workspace which is not
from which is which is for gendo I'm going to go over and I'm going to remove this f space b
this one and click on enter and you take me to login and redirect me back to the user uh own
workspace and if you click here you should see my workspace has been selected but to fix it
to be able to solve the problem of that error code not been seen by asuse we have to we have
to refactor the error being sent to the reget promise reget so to do that I'm going to create
a constant here and this is going to be set to custom error and we going to structure this error
we going to pass in this error here so this so now we need to create the type for this error
here so I'm going to we can create this uh we can create this below here let me create at the
top or let's put it
here let me create a type instead for it so I can create a type here call this custom error
type type
Cs and this should be let's change this to type or let's
use the interface interface custom error so let's export
this and you can see that this is the error which was shown in the if you go over to get use
to the context and you should see ER so I have to extend from error
and pass it so let's go over here and let's import
this and then and then if you go over to um to use get workspace we need to add this here to
any and custom error
and if if you go over to let's go to our provider and if I if I un comment this out
you should see that error code is visible now we can we can see the error code so I'm just going
to comment this out since we are already using the [Music] uh already using so let me remove
the so I'm going to remove all this here so so that we're done with that so let's go ahead and
work on the create workspace so I'm going to clear let's clear all of this and I'm going
to just close all let me open it back so for the create workspace let's go over to our API
and let's let's plug in the Endo let's set the end points here so we're going to pass in data
and data is going to be of type create workspace type and create workspace type is already a type
which I set if I go into create workspace type here you should see name and description under
the workspace type if you click on you can see it API types here so I'm going to go back and
let's let's set this Fant response is equals to await API so let me change this from okay so API
post and we have
workspace SL create T
new and let's pass in the
data and then we need to return response data let's also set the
type so I'm going to um let me this we're going to
say type here promise the response typ promise I'm going to say this to create
workspace response
type and if we go into create response type you should see
message and the workspace type and workpace type is
this so let me save that and let's go let's go over and use this create workspace function so
to use create workspace function I'm going to go to hook and um we should
see where we specify the create workspace so this is the hook that is controlling the um
use create workspace dialog and we're using no to handle the open and close you can see
it's open and set open we setting a key and we set a default value to for so once we open
this it you set it to true then it will be like this it's going to set it to open true or this
true then if you close it's going to close it so I'm going to just click and let's go over
to uh layout and this is where we call this is where we call the create U or space dialog
and create dialog is coming from the components create workspace so I'm going to go into it and
it's inside the component inside the component uh open workspace and you should see create workspace
dialog and inside create workspace dialog we can get the we able to get the hook for the open and
close and we can see we set it shant dialog and let's go into workspace form and this is where
we're going to set we're going to um connect our form to the end point so I'm going to over here
let's get the motates use motation so I'm going to first all let's say this say mate
bending and this is going to be equals to use mutation function use mutation and
let's open this let's set mation function here and let's p in our create workspace
mutation function and make sure to import that so I'm going to import this from Li
so we're going to also import Cent because we have to um reset or inv
validate for the all workspace or user workspace so after we've done that then
we need to also import um navigate so we have to navigate the user to the newly
created workspace once the user create the workspace so let's go ahead and implement
this inside the unsubmit so for the unsubmit if is spending I'm going to return now so let me
try import this use Navigator here then we're going to have our mate and let's pass in our
values let's get our answer
sux and also on error
and for the on error we are going to I to call the tost here so let's import to from Ed
toast and then on the on suage you're going to get the
data and let's use
Query sorry query client
dot invalidate queries Let's see we set queries
here and query
key this is going to be if you go over to our switcher inside the aside by the
switcher this is where we call all the users workspace user log in their workspace which
they member in so I'm going to copy the key go over to my workspace form and let
me place this here so this will reset it then we can get the workspace data
you can get a workspace which is a type of workspace type and let's un close this
and unclose is been passed so we need to also pass the unclose here so I'm going to so let's
pass it here I'm going to open this and say unclose which you're going to pass from the
dialog and this is of type and
close for
let let's call it here it should stop the error yeah so then let's navigate
the user to the workspace so we're going to navigate the user workspace workspace
I and let's go scroll down to where we have the on theit button and let's um
let's set loading here so pending loader and let's set this disabled so it's
spending so let me import this loader from Lu and
I think let's go into the dialog and let's pass in the um un close
here and this should stop so let's test it let's test it out so I'm going to reload this let me L
with um let's look let me sign out from this alra L with so I noticed some issue when I'm
trying to do this disc countless loading so what you have to do you have to go back to
our API and let's go ahead and access Cent and remove remove the return return and also remove
the the uh data access we need to remove this so this will only be access we only work on the
provider so let's go back to the provider and fix that issue so I'm going to go to my context
um H provider and let me enable this here so we
need to enable this I enable this and let's also import the constant
navigate use
navigate let me import this so we import it then let me set the empty dependency here
so just
navigate and work space
err let's check IND
plus yeah so let me try and log in again
and let's try let's try to use another workspace
ID so it's with user and oh yeah because this is
G do so where to log out to gender let me try it with let see let's see
get okay so it works so let's go ahead and let me log out from Lucy gate and let's sign aend
do and then let's create a new workspace so I'm going to click
on this and let's say um sales sales apps workspace then you can give it our team
organize
sales
reest so let's try click on Create and if I click on create immediately you can see we've navigated
to the sales Ops and this has refresh so that is great so we are done with this if you view this
in a larger View and let me reload this so we can see to create work
theace if I try to create a new workspace again
engineering and I click on create immediately we've navigated to engineering workspace and
we can switch between multiple workspace so that is great so let's head over to our code and let's
work on the next [Music] Endo so let's work on the edit endpoint so if you go over to settings click
on settings we should see the edit and we should notice that we are not showing the data sales Ops
is not displaying here so we have to display this here and also display the workspace data inside
so then we make the Buton to update the workspace functional so let's first of all go over and work
on this first so let's go over to our pages so I'm going to clear this and let's go to pages
and let's go to workspace then go to settings page and in the settings
page you can see we have workpace header because we had to reuse it on the members
page go to members page we also specify this workspace header so let's go into workspace
header and inside here is where we're going to call this so since um if you
go to Art um art provider remember we are passing the workspace from
the Endo so I'm going to go back to my workspace ER and let's get workspace
from let's space from use cont
test and we're going to get workspace loading and we can get workpace and
let me remove this loading here you can set workspace L into this
and for the workspace data we can we can set workspace do name spit
space do index
zero the as zero
I just say this to and for the okay that is it then the name we can set the name so workspace do
name and that is it we should see that the set name has changed to sales up and this so let's
go over to the form to also populate this so I'll go over to uh let me close this and if
you scroll down to workspace inside the component we should scroll and we should
see edit workspace form so click on this and if you click on that then we can be
able to do that so let's get workspace form so let's get workspace from use
PX and this will be workpace just workspace we don't need the loading here so we need
to set take data here and populate it to a default field here so I'm going to
use use effect to handle that so I'm going to say um use use effect from
react and let's see if
workpace then form set
value [Music] name workspace name one do set description
can say it's just empty
string yeah so let also
add
space confirm here and if we check this out now we should see the data
here is showing so let's go back let's go over to our API so we can set the end
point for the edit workspace mutation function so the edit is going to take
in data so I'm going to say data and the workspace ID so I'm going to say workspace
ID is string let's there let's say data and this is going to be of type edit workspace
type and let's import edit workspace type from the
types and then so edit or space type is inside type if you check
it forace type and data I'll go into my API pack and um we're going to say
constant so
constant okay response API put
work space workspace ID so let's put in update here so if you can't remember the same can check
our post man which where we tested it you see updates go over to workspace updates I
you should see workpace updates that's how we be able to get it and then we need to pass in the
data so let's set it
here response. data so let's go over to um edit form and let's use this [Music]
Endo make sure to save this
and then inside the edit form we are going to we
going to call our motation use motation so I'm going to say motate first constant
motate is [Music]
pending sorry M use mation use a [Music]
function notation function here and let's paste the edit workspace mation
function make sure to import this from so after you've imported the edit workspace
mutation function then let's make use of this so before we that I want to set in
the query clients and also fetch the get the workspace um workspace ID so get the query
clients here so let's make sure to import query clients and then use use workspace
ID and let me import the query cents so let's go over to our unsubmit and instead of un submit I'm
going to set the payload so the payload we're going to pass in the workspace ID and data and
the structure the values from the form hook then here we're going to call our motates here so I'm
going to call motate and passing the payload here and once I pass in the payload I'm going to get
the UN submit un success submit then I'm going to invalidate query workspace so workspace is
for the get use get workspace the end point to get the workspace here if you go over to hook
API if you see use get workspace and we set the key to workspace here so likewise for the
user user workspaces is workspaces we set all workspace all user workspace and the workspace
um switcher so that is it so let me go back to my edit form and let me import to so to is
going to display the error if there's an error and let's save that so let's scroll down to um
the bottom and let's enable this and set make sure to change us to expending here and set if
it's able to spending then import load out from Luc save that and I think we are done so let's
test this out U I'm going to let me go back to my page let me reload this let's go back let me go to
settings and you and sales up so I'm going to just change this to uh sales operation then
I can change it to Sales UPS here and let me save that this should change yeah we can see
sales UPS now and this should change sales UPS likewise we can change it back to uh sales ups
and sales operations here and save that and that is so we are done with the that it's workspace so
let's head over to work on the delete workspace so I'll go over to my endpoint First Let Me Close
um the hooks here and let's go to API where I set the delay workspace function here I'm
going to get so for the delet we're going to pass in the workspace ID so I'm going to say
workspace workpace ID which is string
so this is going to give me a a response and response is going to be a promise and
I'm going to pass in the U message which is going to return to us and the current
workspace so once we delete a workspace we you user to this current workspace and this current
workpace is going to be an ID it's going to be the ID of your workspace so here we're going to say
constants response is equal to API do
delete and we're going to say uh
workpace Delete space ID and let's with turn response response.
data why is he having issue here oh yeah we forgot to put our Sor our here so we
are done with this so let's go over to work on this so to get to delete rate is inside
a settings page so I'll go to my just go to page go to settings enter into the workspace
card and the work card is inside the component um just selace and you select delete workpace
card so inside delete workpace card we have a a use confirm dialog so this is uh this
is what we're going to use to handle the open and close of our dialog and this is a reable book and
likewise the component here confirm dialog is a reasonable dialog component which if we go into
it we can see that it's set in it's open loading CL unclose confirm UNC confirm and then others
then we can see title description children we can pass in the children we can pass in uh the cancel
text they confirm text and we have some default sets here likewise for the um use confound dialog
we're using no to handle the state and we have confirm dialog um you have a def set to first if
I try to test it here let me go to my let me try and click on this and we should see if I move my
we should see confirm dialog through if I canc see you should if I canc see it you should see
that it's some on the the URL so we're using the URL to control the dialog and likewise we
added context so that once we click on delete you'll be able to display the workspace name
on this we can do that uh we're going to also see example on where we trying to delete the
project so and you can see on close dialog and U on open dialog so let's go back to our delete
card and let's implement this so we're going to replace delete test cod with the current uh
workspace name so to do that we're going to get a workspace from our Contex so constants use all
contest and let's get
workspace and we going to to also get uh navigate use
navigate you're going to set it to um navigate use
n then we let's uh Implement uh let's first of all get the let's get the workspace
ID we are going to also get s client because we're going to have to uh reset the queries
for the used workspace so import from time query and then let's call our let's get our use mutation
function use mutation and the function so use mutation import thaty the mutation function
delete workspace mutation function let's import that from our API and then let's go ahead and
Implement that on this confirm so I'm saying I'm mate we're going to pass in our workspace
ID and let's say on
success and also on [Music] error and there we just get error [Music] eror and we going
to tost this error if if the if the end point an error we're going to return set
the message to this to description here and um for the on sucess we're going to say query
client query client reset or invalid invalidate
and I'm going to SEC
key it's going to be user workspace so we can get that from our switcher workspace
switcher and let's go to delete card back and let's place this here then
we can navigate the user to the current workpace
navigate and let's get that from data here so say slash
workspace slash uh workspace ID not workspace ID sorry data do
current workpace and then to close the dialog we're going to use set
timeout and we're going to say un close dialog
and let's set this to 100 here so we are done with this so um let's use the workspace let's scroll
down to where we have this and let's remove test SC and let just set this workspace do
name so that is it so let's head over to test this so I'm not going to delete Sal
up so I'm going to find um instead I'm going to uh delete the text workspace
so let me select text workspace and let me go into
settings and let's click on this and we should see text workspace workspace Stu we can see that
like that so let me try and delete so make sure everything is server and everything is
running so let's click on delete and immediately we should be redirected to a different workspace
if you click on this you see we have moved to my workspace and we can see test workspace is
cleared so that is it so let's go back to our sales workspace and the next thing we are going
to do now is to implement the analytics so on the workspace we can see the dashboard we we can
implement this and fetch the end point for this so I'll go over to my API Inside My Le folder
and we have workspace get workspace analytics so for for the workspace analystic we're going to
pass in the workspace ID so let's say workspace ID which is string and this is going to return us a
promise of U analytics response type so in ort this so you should see it inside
the uh an analytic response type for workspace types so I'll go out
my API and let's say constant [Music] response AR I uh API do get workspace
analytics and let's pass in the workspace
ID and let's return response to data and we can see that the data or the error has stopped
so just copy the get workspace um analytics query function and let's go into our dashboard
so inside the workspace page just click on dashboard go into analytics workspace
analytics and this is where we B to so inside here we're going to
um implement or we're going to display the the workspace analytics here so what I'm
going to do is to get our workspace ID first so workspace ID is equals to use workspace ID
and let's get um use
Query use Query from query and going set our
key our query key our query key is going to be uh workspace analytics and we passing the
workspace ID then query function is going to we going to call in our um get workspace
analytics and we're going to pass in the workspace ID here so make sure to
import get workspace analytic from API and then we're going to just set so let me add in comma
here I'm sorry s this is zero [Music] enable we can see workpace ID so let's get data and U it's
spending so let's get analytics from
here and once we get this we can remove all of this loop we're not going to look through this
so let's remove key and let's say this to is
spending let's remove this and let's set this to Total
T and let's say to
analytics do total tax
let's set this to zero or zero so I'm going to copy it duplicate it twice and let's say
to overdue overdue tabes and then completed that so inside the analytics card we should
go into it or I can show you we have title value is loading and then we have the card from shant UI
the card title the activity icon the value is display here then the get Arrow icon is very
simple say if over du tax then return value greater than zero then we setting Arrow big
function toi red then up will be green likewise for completed Tas and title or total Tas say
value greater than zero we have antic pick up is going to be green and down it's going to be red
so save that and if we see this we have no Tas currently in this any of this here so you can
see total Tas showing this and uh if I click on any workspace you see it load and it FES
so once we Implement creating of tax you should be able to see all of this so we are done with
so we're going to work on the um members page we're going to work on invite members so if we
go into members and we should see that uh we have sample dos here likewise the HTP uh the
invite member link here but this is correct sales Ops so let's go ahead and change this
and be able to invite user to um join this workspace so let's go over to our members
page members page so go over to Pages inside page click on workspace and click on members so going
to invite member and it should be brought to this page so let's quickly get the uh use or
context so let's move this we to the top then we're going to get uh
workspace workspace
loader and um let's implement this just change
this so I'm going to remove this and then we're going to say if
workpace if
workpace then let's say window
window window do location
origin and we're going
to you're going to say base base route get the base
route dots invite URL then if you go into invite URL we should see that
we have invite code there invite workpace invite code and we need to find pass in the
invite code for the uh workspace so I'm going to say slash and then I'm going to
replace let's go into our base rout and let's copy this invite let's copy
this and let's go to invite member and let's
change this here we going to replace this with uh workpace
do invite code
and uh I think we going to say as M
string so that's so um here is how to we have set the function navigator cboard to copy this
to the cboard then let's go and uh show it's loading here so we're going to show it loading
so let's say um workspace
loading so I'm going
to and let me move this to the
top then here we're going to say we're going to display loader here
and let's import loader from Luc and loader is with 8 height eight anim spin place place s
Center and flex and if you save that you should see that our work invite workspace and invite
invite code we Trin so we have been able to do that so let's go over to display all our members
or before we do that let's let's copy the link we going to copy the link and go to this page
and let's implement this page so uh I'm going to copy this and I'm going to log out from this
user I'm going to paste in the link yeah let me open the new
tab p in the invite link and we should go ahead and fix this page
so let's go into our Pages I'm going to close this I'm going to Source go to pages and let's
click on invite then click on invite us so in this page is where we're going to handle
this so what we're going to do is to get the uh constant navigation use navigation we are
going to redirect the user once we get us use parth to get the invite code AS string then
let's [Music] uh let's get use us constant use us to so since invite user is not WRA
inside the art do it's not it's not R it's not among the layout app layout which is WRA
with the alt provider so we can't have access to the context that is the uh current user so
we're going to have to get the current user from the uh end point from the hook so we say
constant this is going to come from use or and remember we specify use
or as the current user end point if we going to it you can see to
so we're going to confirm if the user is loging we're going say data all data
and is
pending so here we are going to we going to say constant user is equal to data
user so we able to get a user and we able to replace the turn URL we are getting the
invite URL and replacing the invite code so we encod encode components then let's get
user and let's first forget it is spending let's scroll
down and we're going to say uh inside the context here let's say it's spending
we are going to show this loader else we going to move this D inside
here then inside here we have we have the uh join workspace button and also the sign
in sign up button so we need to confirm if the user is uh if the user is if you
can get the user from the current user then we can move in you can display the showing
workspace but if not I'm going to
uh if not we're going to show the we going to show the uh button
here see um think so this we need to remove the return Ur from and sign
up oh okay let's leave it here from sign up we need to we didn't handle this for the sign up
we only handle this for the login so we need to also get that so I will leave for just work
on with login you can also you can Implement that so I'll just focus on the log here so uh
so we've done this now is to use a navigate and so let's go ahead and
um get the end point so we can once they click on the join workspace the user is
redirected the user will be redirected to the workspace so I'll go to my API inside the leave
folder and and we should have yeah invite to
join workspace so inside here we're going to get the invite
code we going to have
promise
message string works this ID
string the Str will be return so let's say constant response
this going to be equal to a API do
Post we have member SL workpace you can get the end points from uh inside this just uh go [Music]
into scroll down to where we have member and we click on join
workspace and we should see the yeah see the end points there so remember what
space and we're going to pass in the invite code SL
jooin and then let's return soorry let's return response do
data so we are done with that let's copy
this uh let's copy the invite
and let's go back to our uh let's go back to invite [Music]
SE and inside here we're going to call the motation
so I'm going to let's come down here and let's say
constants use motation for query and let's say motation function and let's paste this
here let's import from API let's say mate is pending and let's say so it's
loading and let me remote this loading first so for the motation
for the mate we are going to handle that here so we're going to say
mate invite
code on [Music]
success on error I'm going to get the error
and then we're going to toast the error if the end point fil so let's import to
from used toast and inside here we're going to have to reevaluate the user
query for this user so I'm going to uh let me gu the uh let's get
the client the client query you can get that here
and let's say use client quy use quy client sorry use quare client and inside is we're
going to say um do reset queries and let a query key and we going to get in the user
workspace and then let's move this up we going to navigate to the workspace so let
me bring in data here and for this is loading I'll set this loading to this uh loading and
you can see disable for the join button so I'm going to say we have done the invite
we can invite us now so I'm going to go my invite page and then if I this we see we are
not loging so it's showing us to sign up and sign in we can also show this to um uh which
for uh
Wishful let me so work fine so let's click on log so you can see you invited to join a t te
sync workspace so show the name of the workspace you can just add that to this you can say um ws
and you put the name so I'm going to leave like this and I'm going to click on log so
since uh the invite and you can see the invite URL being pass here is encoded so since um the
user I want since the invite um workpace is for Joo I'm going to sign in with Lucy gate
so I'm inviting jundo is inviting Lucy gate to join the workspace I'm going to log in and to
take me to this page so now once I click on join workspace and immediately this should
take me to this page and if we click on this we should see sales up and you see locy gate so we
can see sales UPS here and we can see luy gate so now the Lucy gate is now a member of sales
Ops so if we're going to member uh we need to also list all the members here so we can also
see who is the owner and also who is the member so let's go ahead and work on all members so
let's go ahead and implement the let's go ahead and um set up the Endo for that so I'm going to
go into my API and if you scroll up inside uh the workspace you should see get members
workspace so I think uh this is not we have changed member Ro so we need get member Works
Space so I'm going to create that here so let me create that here say export
before that let me move let me move all of this
down so we have create edit fetch all user workspace get single workspace
uh yeah we have analytics here so let's say get all workpace
then let's get all okay so let's say export
constant get get members in workspace quy functions get members in workpace
query function and this is going to be async we're going to pass in the workspace [Music]
ID which is string and and this is going to also give us a typing of
Promise 're going see all members all members in workspace
response so let's go into we can look at it we should see all message members and
also the rules so let's go into a API and let's call this so constant [Music]
response is equals to our api.
get slash
workpace Plus
members the workspace ID
then let's return response do
data so we are done with this so we're going to copy this and let's go into
all members so to go into all members all members is inside the workspace settings
page uh no not settings members page and we can see all members so go into all members
all members can be found inside the members folder inside the component so here we're going
to implement it so for the all members we are going to first of all let's uh so for this end
point for this guest members in workspace query I want to make this reusable because we're going
to use it inside the recent page like on this page if you go over to dashboard you're going
to use it here as recent member so I'm going to convert it to a hook so let me go back to set to
Members First and let's go ahead and create a hook for that so I'm going to scroll down
to Hooks and inside the hook we're going to inside the API I'm going to say use workspace
or use get
workspace
memberss then we can just say constants
R use gu workspace members
so close this and let's REM [Music]
this and here we are going to Let's remove the react here we're going to get the workspace
ID
string constant query is equals to use Query from to query query
cence we're going to give it a key of members we going to pass in the workspace ID then the query
function we can paste in the get members workspace in
workspace query query function and let's pass in the workspace ID let's import
that from Li API and let's
set so
infinity and then let's return
where so let's copy the use get worksheet MERS and go to all members page
and then here we are going to get that so we going to say U let's first of
all get the [Music] constants um let's get the user first use or
context and let's say to user then we can get the workspace ID from use workpace
ID then we can get
the use get all members and let's pass in the workspace ID here you can get data and is
spending then
uh we can get the members so I'm going to remove pending here we can get the members likewise we
can get the rules so this will give us a list of rules and this will give us a list of members so
we able to do that so then what we're going to do is to is to look through this inside
here so we have a spending loading then we have uh the Avatar of the user and
also the name and email with a popover so yeah we're going to look through the
members so let's come up here and let's see members do map member
and let's do [Music]
return and let's move this
inside so here we're going to get the name of the of the member we say member dot do user ID do
name and we need to create the uh initials we can we can also use
uh we can use there's a hiper fion i cre for to get the avat fallback I call avat
fallback text and we passing the name so let's view the helper function you can use to create
the initials so it's just similar guys if not initial split map join and get the uh
initi and show only two initials so let's save that and then we can get the color if the user
does not have uh an avat we can get aat color and a color we can get a color and pass in the
name then let's importat color let's go into avat color and see so I have some list of colors here
and we make a simple harh map to initial map initial to a color index we split weuse it
and get the coders then the return color has and color length so this will be set to this
works because this format helps because uh a user with a particular name can have the same color all
over the app the colors are not randomly are not regenerating once we navigate to a different page
so it's still the same color so I'm going to save this and let's go back to our code then we can use
this inside here so inside the image we're going to just set this to our member do profile user
ID do profile picture I can set this to empty string
then for the fullback we can just set this to
initial and let's replace and set this to our avat color and then here we can just have
the the name and also the email [Music] member member do user id. [Music]
email and if you check this you should see the list of me and this is still on up so
let's go and change this and we can see they have different colors here so uh let's go to
the pop over the button so this button so for this button we are going to get the member I'm going to
say let drop is [Music] down and let's say member do [Music] row name so we're going to say that to
lower because on the the real name is in capital letter so let's set to lower case and let me p
here and then this is set to capitalize and we should see the member owner and member then we
need to also uh this drop down should be disabled for for member that is not user
so member the user can change can um view the options for the this so I'm loging as um I'm L
at Lucy Gat I can't be able to change this or view this for my own account so what I'm going
to do here is I'm going to do a check I'm going to say member do user id doore id not equals to
user do
IG and then let's move this drop down here you see there's no drop down here and also
we are going to work on other ones the permission and this will also will not
display for members this drop down so that is going to come later on so while we doing that
let's go back to below here and we're going to what we are going to do here is reset this
loading so it'sing to first so let's look through the rows here so we're
going to look to the so inside here let's clear all of this
and here I'm going to say rules
map
Ru and here we are going to we are going to do a check so row dot name is equal
to owner is not equals to owner so we can't view we can specify
owner in the list of options here so I'm going to Omit on from the
list L of so let's open this and let's move one of this
inside then we can set the key
and also disabled to is
loading
then we can also
uh we can we can add let so you can see that this TR together so let's uh remove this
and let's add
disabled pointed invent now and [Music] GAP one
mb1 and then we're going to have our crer
poter so that is so now let's uh let's set this to the row do [Music] name do to lower
case and let's say class name
capitalize then for then for the description here we are going to
do a check so we have the admin level to this is for um owner but we have the one
we specify for admin and the one for member so I'm going to close this and I'm going to
say if Ro re to admin then can view edit taxs project and manage settings then can
view edits only can view edit only task created by them so so I'm going to remove all of this
here and um I think that is all [Music]
so that's is
all and also for the input let's just set a class name say if disable poter
now and so you're going to set this disable to it's
loading so this loading here is first we're going to work on that so let's check this out and we
should see uh for members we can view this for own can see this so before we Implement change uh
um change member so we can do that so I'm going to log out with let's log
out and let me log in as [Music] nendo log in and let me go into members let
me switch on my workspace to sales Ops and let me go into
members and you can see I can change this person so let's Implement CH let's change
Lu Gat to admin so to do that let's go and implement the end point so let's constant
use mutation from T query and uh let's pass in let's open let's pass motation
function function
um okay we need to set up the API so let's go over to API uh let's go into our leer API and
we're going to call this change workspace M change workspace member row mutation function so we are
going to pass in so we are going to pass in um let's scroll to here want to get the workspace ID
and also the
data oh this should be an
object and this will have a type of change workspace member Road type so I'm going to
import this and if we go into change if you go going into the we should say inside the workspace
type you should change workspace member type workspace ID and the RO ID and member ID that
is the user you want to change your R ID so I'm going to go into here and let say
constant response is equals to A we API dot put
and let is
workpace change slash member slash row so this be similar to what we have in
Postman here um change workspace change [Music] member you see change and pass
then we're going to also have in the uh workspace ID here then we need to pass the
data and then let's return response data here so this is so let's copy
this and let's head over to um all members let me go to all members
and let's paste it here let's import
this then here we're going to say mate and we're going to say it's
pending is spending and this is going to be so it's loading so it does not
clash with this is pending so let me remove this is loading
here and yeah we're going to uh let scroll down so we going to have um constants do
handle handle
select and here we're going to pass in the ID which is string and remember
string so let's go scroll down to where we we are going to plug in this um on select some handle
select so for the handle select we're going to do that inside the yeah inside yeah the cont the
command items the command items so I'm going to go below here and I'm going to say [Music] um on
select and you know that command item is coming from command item command command
MC coming from sh UI so I'm going to open it and I'm going to say handle
select we're going to pass in Ru doore ID comma member do user id doore
id so that is it and we passing the is loading here likewise here and so let's head over to uh
unless let's call this okay so I'm going say not if not ID and not member ID just
return and let's get say the payload the payload is going to be equals to workspace
ID you can just say like this and data is going to be row ID and member
ID let's mate
payload on
success on error and inside the error we get our
error and then let's call the toast so we going to say toast
and make sure to import
toast from used toast so inside un success we are going to uh we are going to reload this
um use workspace endpoint I mean use get workspace members endpoint if you go into
it you can see we have member members and workpace ID so let's import uh use
client yeah I'm going to import that and let's import this from T
query then inside here we're going to say query clients
do invalidate queries query key we can pass in
members and then the workspace ID
then we can also we can also thr a
toast of tile
success
descrition of
members [Music] will change successfully
then then set this to set the variance to
uh to
success and that is it so let's try it out and see if it will work so I'm going to let's go to
Team and let's conver let's change Lucy Gates uh from members to member to admin so I'm going to
select member and let's 44 so I think something is wrong yeah so I'm just going to change workspace
member H this should be workspace not workspace change member let's confirm is workpace change
member so let's save this and then let's go back to this page and let me reload this again
and let's change this to M to admin to click and uh is successful and then we can see the user is
not set to admin so this is so the next thing we're going to work on is to start to work on
the rules and permission so I'm going to sign sign up with another user um account so we can
so I'm going to sign in okay let me sign up a new user uh oh let me log in so already have some user
let me copy this vet let me go to sign up yeah so let me call this wigets and let me sign up this
user so I'm going to invite this user into so let me log in with joho Andy the invite
link so I'll go to members no not to my workspace let's go to sales Ops and uh
let me invite let's go into members and let let me copy this link and let's log
out let's log out from jandoo account sign out and
I'm going to paste the link here and I'm going to log in
with.com so log in and then I'm going to join this
work space and immediately sales up if I go to sales up members
see we have is a member and you get is admin and own and you can see the member has access can is
able to see all this so let's go and work on the r and permissions so can have access to change any
of the any of the members R so let's go ahead and work on that so to start implement the permission
I'm going to let's look up from Jet Jet and let's log into the owners owners workspace I'm going to
go into J and if I go into J I'm going to go into sales Ops and let me click on members
here so the first thing we're going to do is so before we go let's clear all this and
close everything going to C and so let's go into hook and set up our use permission hook so we're
going to set up our first our use permission H so for the use permission I'm going to R
fce let's go use [Music] Mission let's remove the return
return so inside this
look you're going to get going to pass in the user and this is going to be of user type or
undefined then we're going to also pass in the workspace and this is going to be workpace
workspace with members type and undefined so this type this we're going to pass in the
we're going to pass in the workspace which is we're going to also get a list of members
so that below here we're going to say constant we're going to create a state that holds the user
permission so here we're going to say [Music] permission set permission
and here we're going to set the type for the state is going to be permission and let's import
permission type from constant so if you go into constant you can see that we listed the the enum
the uh tax priority inum and also the permissions here so I'm going to set that into an empty array
and let's set this two to empty array so here we're going to use I use the first constant so use
effect and U from the use effect we're going to set empty AR here
so we're going to check if user and workspace
then we're going to say constant member is equals to
workspace do
member do
find remember
so you're going to say [Music] member user ID is equals to user
ID sorry underscore
ID then we're going say if
member then set permissions
M row do [Music]
permissions and this is going to be set to
Mt then user workspace you can also redir the user if the user does not have any
permission so we can do that well can to leave that now and then we're going to
so we need to memorize this we're going to use use
Memo from react and let's pass here permission and let's put array of permission here so we
are done with a use permission H so we're going to have three two type of uh two ways to have
handle permission permission we're going to create a component we can use on our page a
we has component with the permission so Ed to block or guide a particular um component from
display and we can also have um a function that can also we can also get to determine the user
permission so to establish that we're going to copy this use permission hook let's go over to
uh context so inside the all we are going to create uh a function which we going to call
has has permission so has permission can be a function which we can call if you don't want to
render a component so I'm going to use that here so what we're going to do is below the use effect
B let's SC constant permission so we going to get permission from use permission from use permission
hook and then we're going to use permission H require us to pass
in the user and the workspace I'm going to pass in user and
workspace which we getting from this uh from workspace you see
data workspace and user that is got from data user so once you've gotten that we
can create a function so has permission so this will determine if the user has
permission and it return a Boolean for us I'm going to pass in [Music]
permission and this should be a typ of permission
amission type from constant and we going to get the return
Boolean and let's return permissions
this that
includes the permission we going to pass
and then this is what we're going to be using so if you let me scroll up and let's add this to
the type here so after workpace I can just put in has permission here and has permission taking the
value or argument of permission which has a type of permission type and the return value of then
let's pass this let's pass has permission here so I'm just going to pass it here and then we are
done with has permission which we can use inside any component so we can also create a a different
app a different way of handling permission again AP from the has permission we can have a component
and if you go into reusable components. reusable we see we have permission guard so permission
guard is a component which we require which have a type of the children show message and require
permission typing so this is just a single value so here we're going to implement it so what we're
going to do is we can get the has permission from a context here and we can do that by saying use um
what what cont
Tex and we can get the has permission here and here we're going to say if not has
permission then let's open this and let's get the let's get all this
required permission through message to
for children you can like this then we can pass the required permission
into this house permission so I'm going to remove this
here then if this return bull then we can return we can return
then we're going to say show message if if show message we can say
the you you do not have the the [Music] permission to view this now we can give this a
sty and then let's set this to nor or we can just set this use this instead and this is going to be
Center X small paring top it with full T muted foreground so let's save this and then we're
going to just [Music] return the children so we can use this is a mistake so we can use this
components to guide we can use this component to wrap in on other component so if it been wrapped
then and the user does not have the permission then this component will display but if the user
have then we can get the show children to save that and the last method of handling
uh handling this permission we can use to handle the permission you've created a function which has
has permission to passing the require permission and this will give us a Boolean we also have
permission guide which is a reusable component to use inside each component if you don't want to get
has permission from the use context and the last one is also on this uh if you come over to our on
the browser the settings want to avoid user from accessing the settings page so members can access
the settings page because if you look at if we go over to our back end we have um the if I go
over to you and the rul permission we should see that only admin and owner has managed workspace
and this is simply like manage or you can call it view workspace settings so the members can if you
go over to members members can view or manage settings we need to have vo user from accessing
this page we can use um either we can use the permission guard or has or the has permission
um function to hide this SP if user eventually try to access this on the browser route it will
still be navigated to that page so we need to create a higher order for a higher order
component so to implement High other components I have a folder which we've created and you should
see it on your own hoc and inside H you should see with permission so this with permission will
wrap the pages so I'm going to use this inside my settings if I go to workspace and I'm going
to use it to wrap this default then before then the um other um component we take this component
first do a check and if the user does not have the permission instead of taking this settings
position page going to navigate the user back to where we ask it to navigate user to so let's
Implement a higher order uh permission so I'm going to click on with permission
and inside with permission with permission is going
to take in so we're going to say WRA components so it's going to take in a
component which is going to be we at just components
type and we're going to also pass in the required required per
and this is going to be [Music]
permission so inside it we're going to create
with with [Music]
permission this is going to take any the props of
any and let me just import this here entire Pages then what we're going to
do is so we can get this from the user has permission from the use context or
context user
has
permission and um it's
loading so it's loading for the user then we can have we can import navigate so we
can navigate the user use navigate from and also get the work space ID so I think
I made a mistake here workpace ID this is going to be equals to use use workspace
ID then we're going to have a use effect we use to handle
this so inside user pH we're going to say if not user
or has uh permission we're going to pass in the
requireed permission then we're going to redirect the
user back to the workspace page we're going to say workspace and get the workspace ID and
pass it here then let's just see user let's pass in all the necessity user permission
navigate and workspace ID
yeah so it's loading I'm going to just bring this
inside if it's loading your show it's loading here then we need to check again
we going to check if the user have the require permission again here
so we're going to show the same thing
here so the reason why we set this here is in case of um like a fullback uh we
can also assign a fullback U here but we don't want it to give a glance of the
page before we dirting the user to that um to the workplace page so that's I have to do it
here again so then we need to uh return the rap components here so I'm going to just this let's
leave this return here so below after this this e statement we can give the return here
and return the r components here so once we are done with this let's get the which components
which uh permission components and let's return it here here and this is great this is it so we
are done with this so we are done with the hook the we are done with the um permission guide and
the HC so we have different option to handle the permission in uh in our project so let's
go let's go so the first one we're going to do is to let's go to the members all members
page and let's let's start with the invite member so not all user can invite member
so let's start with invite and hide um user that can see the the link to copy
so I'm going to try to let's try and log in with a different account so a memb account
so we can see that in action so I'm going to log out for the owners and let me log
with and if I go into members not this one is the owner I'm going to sales Ops and let's go
into members and we should able to hide this from members from seeing to invite user so
everything we do is based on the permission the user have so you can go back to back end
and look at the permission so I'm going to go to invite here and so we're going
to so we can use the permission guard to guide this component so what I'm going to do is from
the workspace loading I will just put [Music] permission we can import permission guard and
let's move this and this let's move everything inside here and let's say show message then the
required permission we can get we can say the require permission for this is to um
permissions from constant dot add member so we can add member so that is the process of
adding member so if I save this we should see you do not have permission to view this this is
great so now the the user which is buet can view this so also for this page so let's go
ahead and disable all hide all of these drop down and making this button not clickable for
a user user can change your row of of a member so right let's go ahead and so let's go to all
member all memb so for the all members I'm not going to use we use the uh component we can use
the Contex here I'm going to get as permission and inside here we can see constant can my change
member my CH member rule is going to be equals to
permission going to say
permission from constant dot change Member One and let's copy this so let's scroll
down let's go down to this pop over and then this button we are going to disable
this button here so I'm going to say disabled first of all this should be
when this is loading then we can say if not if not can change that means if I change it
foral then we're going to disable this we can also disable this say member member do user ID
idore ID is equals to user
IDE I can't do
that think so I think this is not wrong so let's go ahead and go to this page this Arrow we can
say uh if can change if can change member R and member is not equals user Ed then we can show this
so this will fter to only the owner then likewise here this content we going to going to say if and
change [Music] then you're going to go pop over content instead pop cont will to exist so I think
that is it if you try to you now you should see all are disabled but we can see all the
user but we can't make any changes here so that is great so likewise for the settings if we can
also do for the settings and let's quickly do for that so we can head over to work on the uh create
umate and edit project so I'm going to go to settings and let first go to settings page
and inside the settings page we are going to wrap the settings with the using the um
H order I'm going to this and say wait or let's leave this first let's first of all
do going to the edit workpace because if we do that Villers will not be able to see
the settings page and I want to see that the button have been hidden so inside the headit
uh workspace uh I'm going to hide the button here so we can get this from let's get it from
the context we can get as permission and we can say can edit workspace then we can just
import let's import permission for constant and we can just take
this and let's go scroll down we can set this [Music]
to what this you can also do this here what is disabled and here we can it here say if this
then we can show the update button and likewise for the delete so let's go to delete work delete
uh work space in settings so for the delete workspace we are going to use we not going
to use contest you can use the GU to block it so permission guard so I'm going to uh go to
where we have this is the heading I'm going to leave the heading there and I'm going to wrap
[Music] thisiss guard
components and I'm going to move this whole de inside
save this and let's say show
message required permission to uh [Music] permission from constant dot delete
workspace you can also bring this inside here if you want to you can move this inside this by using
fragment so I'm going to leave like this and then let's go over to so let's view this let's make
sure to see that this can't relate workpace the update is not visible and this is not it's just
readable so I shouldn't be able to view this uh settings page so
before we do okay let's do the view so I'm going to go to my settings
page and here we're going to say with with
permission we going to pass the component then we going to pass in the permission I'm say
permission from Context do manage workpace
and I think this is Str [Music] so so let me see let's fix this warning so he said
it required us to it required us to export so that we have refresh does not have issue
so what we're going to do is we're going to instead we're going to say constant
settings with permission and we're going to copy this put this out and pass it here
then let's remove this copy this and let's export default settings
permission and I think you're War a stop so let's try to access this page
um let me reload this page and we can see if I try to access this page I'm
being redirected to the overview page if I try to access it Now settings you see
I'm brought to dashboard so we're going to so let's go ahead and hide the uh settings and
also the create project and uh we might do that one after we we done with great
project so let's go ahead and just hide the settings first so I'll go to the Side
Bar uh let's go to now in minut is where we list out all the sidebar
so here we're going to do it for here so let's get the let's get the
contance use context sorry use all context
and let's get the last permission and then we can say and manage settings and let's import
manage settings for let's import permission from constant yeah and then what we going to
do is to hide this from the object so what we're going to do is come down and let's do structure
this that's
manage manage then put a question mark here we
going to put a list you're going to say else you're going to put a list
to and let's R
this so what we're going to do let's copy this and move it inside this so now if this is true
then we're going to destructure this array and this settings we return as object back
to it so if we try to view this now we should be able to not see settings from
the na menu so that is it so let's look out from from bilet and let's move to so
let's quickly hide the project button because we're already here so now project let's hide
the button for create create project here so so we're going to use the component so
I'm going to say per Mission guard let me en so permission guard we get permission
import permission from constant create project let me import this
then here we not going to show the message so we are just going to move
this plus button here and let's also do it for this create button
here let's move this inside it and should fix it so this user can't create a project
so this is so for if the user if I switch to belet which my workspace is the current
is the owner of this workspace if I click on my workpace now we can see
settings now if we move to settings we can view settings we can update we can update
this supposed to have a success tost we can delete and we can do
all sorts of thing we can cck on create project so we can go over to members and
we can see they join can also see on but we can change on uh row so that
is it so let me go over to the owner of sales Ops I'm going to sign out log with
gendo and let me go into sales UPS here sales UPS so you can
see the owner can view the settings and update this workspace can delete this
workspace and also view members and then also change R can change R thisas can can enable the
pH can change his own row so that is it for R and permission so we're going to also Implement that
once we like the edit we going to do for edit to once you implement so let's go over and work on
create project so let's work on the create project so I will go to if you go over to um let's come
over to sidebar and um now we get TX if we click on this let me go to sidebar and if I click on
CL here we should see um select emoji and this will give us a list of emoji here and we should
have uh um project title and pro description so so if you look at this the plus icon so we
have two here we have if the project length is zero then we display there's no project in thiss
you create we show up here and then we have the create button we also have this plus icon which
is this here on this side by here so so for the dialogue remember if you go over to the layout uh
you go scroll down to where we have layout go to app layout see and create dialog create dialog
is been controlled by using the create dialog hook so if we go into create dialog hook we
should see we are using Lo to handle it and if you try to click on it again click on this
create project you see new project and in the URL you should see new project is equals to
true and when you close it that should disappear here so let's go straight into uh create project
form so let me clear everything and let's going to create Pro Form and this is where
we're going to implement the form so before we go into the before we do anything the form
let's go to Li uh let me close this going to LEAP API and let's SC go to where you
see project and we have create project um mation so inside here we're going to have an object of
workspace ID and data and there we're going to have the type
of create projectad so import it from type and to go into it you should
see the type here inside under Pro your
types so also for the response we have promise and this is going to be project
response type so I'm going to let me import this
response type update that and let's a constant response it equals to await
API
post we have um SL projects SL
workpace SL workspace ID SL create and let's passing
data return
response data so let's copy this and let's go back to uh create project so here we're going
to get the because once we create we navigate the user to cre created project I'm going
navigate is equals to use navigate for re router done and then we need to get
the workspace ID so we need to import workspace ID from use workspace workpace
ID and then we can say
constants to use
mutation query and let's certain amutation function here and P create um project
function and let's import this let's get the mate and let's get it
spending so we're going to also uh okay let's just do this
first then for the mate we're going to um scroll down
unless cons say if is pending then return it we going to pass in so let's set pad
here this is going to equal to workspace ID and data is equals
to so if you look at here we have emoi and we have 100 selected Emoji scroll
down you can see our Emoji picker going to Emoji Pi this is it set from emoji mat we
setting the Emoji so I'm going to go back I have structure I to pass Theo here and
thenes let me pass the pillow
here let say on success
error and
error we get a tost post is ER and let me import
to and then inside here we're going to navigate the user so let's get
data one project this is going to be equals to data.
project now we're going to navigate the user to the project and details
if you go into your route route part let's go into route part we
you see workpace details is workspace workspace ID project and project ID
so that is where we navigating user here and we need to um let's set the timer to close un
close this dialogue so I'm going to pass in the UN close here I'm going to set this to
unclose void
so once we create we need to reload um
the okay let's we're going to reload the all work space but we've not implemented I all all
project we've not implemented the all project so we're going to keep that for now so let me
go into the dialogue so make sure everything here is complete let's also uh go to a loader
um create button I'm going to set here it's disabled disabled to is
pending and then we're going to display loader here and let's import loader from
lucat save that and I think we are done so let's go back to our create that look and let's pass
in let's pass in and
close yeah so let's create a pro project so I'm going to go over to my dashboard and let's
click on create new project and um this is for sales up and this is the owner of the project
so I'm going to click on this and let's select an emoji then let me select
sales let me select this blue one and let
me put sales pipeline tracker and let's like this and let's click on
Create and immediately we navigated to the project to the project so we can also add success here
so the user know that the project was created so I can add that
here success let say project created
successfully so we can create um one more project so let's create another
I'm going to see sales for analyzer and I'm going to put a description
here and let's click on create oh so we should change this to
success yeah so we successfully created two um two project I'm going to create up to 15 so we can
test the pation so let's go ahead and work on fing all um projects here here so let's go into the
Le folder API and let's go to get so we do this before this get workspace get project in workspace
so here we're going to pass in object we going to say project ID um not project ID sorry workspace
ID we're going to have page size
this is going to be equal to 10 and we have page number is to one and we going
to set the type here to all and project P type so you can also you can check it
inside okay I don't think we need keyword and this so okay I said it's optional yeah
so let's leave that there and um I'm going to also set the response
promise and the promise is going to be all to response
type then let's a constant response is equals to await API dot
get SL project slash
workspace remember we're going to put the workspace ID here workspace ID
slash all we're going to put in page size and page
number yeah so let's return
this return response. [Music] data and let's copy
this and let's head over to uh the sidebar and where we have nav project so we're going
to implement let's scroll up and let's go to so we have gotten this we have the
create uh use create project and we have the use confirm so this use confirm we're
going to use that for the delete project and I think the delete project is here
so we need to we forgot to wrap the delete progress in a with the permission guide here
so if I click here view project and this is U so we can use the permission guide
here and let's move these items here with the
separator yeah and
then let's do let's say required permission require permission
delete
project so that so let's scroll up
back so what we're going to do now is let's create a state for the um page
and Page size so I'm going to create a St here so I can move this up here
and let me move this side by here okay so here I'm going to use use States so
let's import States page number will be one unless we set this to
five and P satisfy so let say
constant
um so let say okay okay we we forgot we need to also use the API inside
the hook because we're going to also use this if you go to a dashboard similar to
what we have in the uh similar to what we have in dashboard we have
recent project so I'm going to create a hook for this so let's go and create a
hook so it can we use the same um use you can have a a reusable Endo so I'm going to
just click and let's create use use D all project or you should say use get
project um the TX
let me set this
xx and let's click inside it let's say um R
fce and this is going to be use get um
projects uh this get
Pro to make it small you can just say in workspace
here and this we just Tak in the workspace ID
size page
number
skip is equals to for so we're going to use this keep to avoid user from fetching this um we
calling the M the the get project in workspace end point so I'm going to just go here and let's say
constant we can set the type to all so all
payload and let's import this to our project payload
type we have constant query is going to be equal to use S
we have key and we're going to set this to all
projects workspace ID page number and Page
size
function this is going to be uh we're going to have um get project in work in workpace
quer function and let's import this from API and let's pass in the object workspace ID page
size and page
number so let's um so when we done with that let's say time infinity and there's um there's
something react query provide us with when you try to when you try to um reload the get it get
project in workspace uh query function we can set a placeholder so it doesn't show the Rel
load maybe once you create a new project of sh the Rel load it's going to just see leave
this and this is helpful when we try to do the pation the more so we click on more instead of
reloading the entire Endo is just going to uh keep the placeholder and then the new one
be added so I'm going to call this placeholder data and I want to skip this if uh if um if skip
is true I'm going to say on F you understand I'm using skip here this I'm going to use it for the
recent data recent project so for now I'm going to set it to for for all projects so I'm going
to say undefined and say keep prev import from query and then we're going to say [Music] enabled
Skip and then think we done
let's return let's return
quckly this [Music]
is okay I think I made a mistake here this should be an object
and then this should not be rest so move this inside here let me copy
this and inside the objects I do like this this should fix it so we can copy
this and let's head over to enough um this unless use constant P this let's import this
let's import get project in workspace from use get project and we're going to say the
workspace ID we've already imported workspace ID here we're going to in page size and page
number so we're going to say data is
pending and is fing
is error we can leave this here then we can guess the
project so if you go into um get work spaceace function and the all outut you should see we have
the project type and we have the pation type and if you select pation type you can see the pation
type here likewise you can see the project Ty so let's go back to now and we can just say
project project is the project or empty so I'm going to remove this D datas here and we can get
the pation here say pation data do pation or you can say as pation type so let's import pation type
from API and lastly we can calculate whether it has more by saying constant has more is equals to
pation do total to pag is uh greater than page
number yeah so let me remove this so once we let's scroll down to where
we can look through this so I'm going to scroll to project then inside the side menu
we are going to do check if there's an error we can display error or code then if there's a
loading at the first um instance we're going to just um show a loader and load is coming
from Luc so let's import Luc loader from Luc I say with height we five height fight and then
ler Center so once we done that we going to say um if not pending let's say if not
pending yeah so to avoid this from so if not pending and length is equals
to Z then we're going to show this components here which is there is no
project in this workpace yet project you create will show up here and then you can see the button
to create the project then if you come down to where we have the map for project you're
going to let's say um project URL I'm going to say slash workspace slash workspace ID
projects item
doore
ID so let's change this to [Music]
underscore and the project is there we can say project is equal to part
name it's going to set this to active then we have the more
button so okay this is this is just the uh this is not the more button this is an option
if we select the option we should have the view the view project which we pass the URL
to navigate the URL and also the delet which we going to work later on so if you go to uh
small if you go to house small button then what we're going to
do is we going to go to click on this house button and then let's
bring class name down and let's say um let me bring this disabl is equals to is fing
then we're going to have on click here which is going
to be assign to fetch next page which we going
to next page so we're going to implement that then we need to also change this form
if loading if it's fetching if it's fetching then you show um loading and else you show the more X
so let's go ahead and create the let's go ahead and create
the fness um function yes I'm going to scroll up and here we're going to say
constant F more is going to be equals
to we going to say if not as more
or is
fing return this then we can set the page
size so let's get the previous value for p size the previous state then you say previous plus
5 and that is it so let's try and check this should show all our all our
project let me reload
this and [Music] Sh let's check if this working
so I'm going to play this and
this I'm not able to see the the API
for for the project here
so let's look let's look at this why is not working let me go into the use i s this to
First yes
yes I think the problem is this should be not skip so it's not
working so I'm going to save this now we can see the project here so
and the on this so let me go ahead and create about 10 project so I'm going to
do that now so able to create or you can look able to create um project here I notice that
the project is not displaying here this is the reason is because once we click
to create a project here they we've not added it to reload this all or to invalid
the all project query key so let's go ahead and so let's go into um into the create project the
create project form project we have create project form and let's import the create
client so I'm going to just paste it
here now let me import it
so I'm going to scroll down to where we have the post are going
to just um in validate the query here so I'm going to
just client inv validate query all project and
just passing the workspace ID so if I try to create
now so let me so let me selecto here say
cut and this I'm going to past this say other tracker and destion monitor manage
customer if I click on R and then we can see all of uh all of the um project I've created
so you can other tracker sales tracker lead finder and if I try to click on more so let
me clear my let me create my inspect oh yeah and let me click on more and you should see
it doesn't increase this is great this is great we can see other um invoice manager
uh quotes generator and we also have more if I click on more again it's going to increase
and then we can see the more button so it has change the P from 10 to 15 and this is good so
let me close my network Tab and let's just click on uh let me click on order and this
is the ID phone here so let's go ahead and work on endpoint to get the project so I
could display the name and the Emoji so let's go into our API and let's scroll and we should see
get project by ID and I'm going to set this to object I'm going to pass some workspace ID and
project ID and let's say type to and project by ID P type you can import that from API type
and then for the response response types I'm going to to just move this and say
promise and let me pass in the type here project um response type so let me just import
this why is not picking
up so uh I think something's wrong
yeah we can't find it so let me just say constant [Music] response is equals to A API do
get we're going [Music] to slash um project id/
workpace SE workspace ID and then let's return respon to data okay so okay I've used this in my
cre project okay that is why so let's go ahead and make use of this Endo so let's go into our page
we should go over to project details and let's go into project headers and inside here we should
see so let me close this and pro see pars the the project ID the IM we can
set this and the render content here so so let's get the um let's get the workspace
ID [Music] from use workspace
ID there we have constant data let's just use Query from T query use Query not usey
we're going to set the qu key we're going to
single single
project we're going to pass in the project idea query
function and let's see gety function
and let's pass in the workspace ID the project ID and let me import
this change this single and um let's
Also let's also set this SL slate time Infinity enable um project then
Place holder data we can say keep keep previous data then let's is
pending this
eror so let me remove this and let's get the project
data so we have the project then we can say project
Mogi and then
project do name and then we have the expending loading and also the if you look at it now
let's reload this you can see other tracker if I click on lead finder we should see lead finder
document organizer and if you CH
change so let's go ahead and work on the edit um project and last we work on the delete um
project so let's go ahead and work on that so let's go to API and let's Implement set
of the API that is the edit project mutation function and this we just taking projects
ID Pro
id workpace
id and
data on this we have a type of edit and projects Val
type right this you also have prise we're going to say project response
type and then let's say constant response is equals to await API output
say SL
project project ID as workspace that's workspace ID and we going update and let's pass
data let's return the data
so we are done with this so let's go into
edit go to the component um component folder and ins workspace project you can see edit form so
click on it and let's just open this and inside here we are going so inside here we need to get
a project so let's go over to project um header and we should see the edit um project dialog we
need to pass in the project which we got from here so I'm going to remove this and
project and let's go into uh edit
form so we've passed it into the from the dialogue into the edit form edit project form so I go back
my project form and then inside we're going to use use effect to set that so I'm going to use
effect and we're going to say
ifet then let's set M first to projecto
so gu
hereo then we need to set the form set form for our name and also for
description and then let's set this to form SL project form comma project
and if you try to click on edit
now we should see and document organizer and the icons set here so let's um implement the mutation
function so for the mutation function I'm going to bring it at the top of this page
and let's say let's import client to so I'm going to move Qui line to the
top and we going to also get the um let's also set the project we
Al also get the workspace ID I'm going to get the workspace ID
here so if we get a workspace ID we get ack C so let me import
query client from uh stock query and then let's also import the workspace
ID then let's go and import the edit edit project mutation so let's scr
down to where we have the um submit and let's say let's set this to this if it's
pending then return return they we have
mes so let's say constant
payload is equals to project ID so let's go up and set the project ID
here so we going to get the project ID from this so I'm going to say
let me do it here project
iding from Project ID so we're going to pass this here and we're going to pass
in the workspace ID and data is going to be emoji
and the structure the value let's pass payload
here so inside we're going to have a success to so let me say is Success on success
why is
not oh we forgot to import the use mutation function here so on
sucess we going to have an
error for the on error we're going to show you're going to show a toast to display the error message
and then for the edit for the UN success we are going to um query client we're going to um we
going to invalidate the the uh what they call it the single project very key here so I'm going to
say where client and is to invalidate query single project and we just pass in the project idea then
we're going to also do that for the all project to you're going to also um we can reset the let's
use invalidate query here let me see invalidate queries all project and workspace ID and you can
get this U inv from now or yeah from the hook the all project and workspace ID so let me
scroll back to edit form and last we can also um close the dialog by setting a timer here time out
here and then setting it to let say 100 off here say 200 then we can also show a to This was um
successful
success success and then we say project we can get the data from here and they say um
data do
message and let's try to edit and lastly let's go over to um create I mean this should be update not
cre and let's set this
disabled so it's
pending and let's show our loader here for is spending and let's import loader from Luc
save that and let's test it out so I'm going to CH this to document organizer and let's
change the icon from document and let's select this one let's update and say project updated
successfully and we can see the M as change with the name on the Side Bar the Emoji has
changed so that it so the next 10 points we're going to implement is the analytics
so before we go ahead we need to also hide the edit for um for those member that does
not have the permission to edit project so let's go into the project um header
inside the project let's go to where we have this we can use the permission guide
here and let me import move this inside here and let me
import the permission card and let's import permission from constants Ed
project save that so we are done with so let's go ahead and work on go to my
API inside the leave folder and we have U get anal end point so let's pass in the workspace
ID and this should be
object space ID and project
ID I said let's set the type for this so I'm just going to set the type for workspace to ID to
string just copy that and paste it as change this to [Music] string then project ID so
string then we can just have
um so instead of this let me just use the type from uh project let's
say project IDE case is similar to um project ID function so I'm
going to use that instead and for the rest on we are going to say
promise and this we going to pass in the analytic correspon type here
similar to uh the workspace what we use on the workspace so I'm
going to say constant response this is going to equal to await api. get
and we're going to say project SL project slash reget ID SL workspace slash workspace ID and SL
analytics so let's just Recon sorry [Music] return response the data
I think I made a mistake this is response response data so we going to just copy this
and let's go scroll go to um our components inside the component for the workspace and
we should see project analytics here so we're going to implement same thing we did for the
um so let's get the let's get the par is equals to use
param from to we can get the project ID say project ID is equals to pram
doet ID as string
and then we can get the workspace ID
here it's going to be use workspace
ID from Hook from our hook and then we can use the [Music] constant use
Query and let's set our key here so our key is going to be
our key is going to be uh project analysis and project ID then we're going to have a project
uh query function here which we going to pass a project analysis query function and we're going
to pass in workspace and project ID then we can also put in this late time to zero and um any
if ID is available then let's get the data and it's
pending so we can get the analytics here and let me remove this one let's
remove this I remove this and let's let me go into workspace Analytics
let me just copy all of this project and this and let me copy this and paste
it here and this should solve the issue then if you go if you reload
this let's reload this let me reload and you can see that all are zeros so we are done with this
so next thing we're going to do is to work on the delete to delete a project so I'm going to
go into the if you go into our side bar which you see now project and um if you scroll down
we can see the delete here remember we add the permission to this permission guide to to uh
the delete and if you notice we have the open dialog for this so this is using the confirm
dialog which we use for the workspace we usable dialog and we have the context open open dialog
open close dialog and there is the dialog here so we will to say open un close handle confir
delete are you sure you want to delete this and this if you look at this we set the item
here inside the open dialogue so if I click on delete document organizer you can see are
you sure you want to delete document organizer so the item is been passed into the context if
you go into uh if you just go into the you see where we storing it in the context and we get
the Contex point it out here and get here so this is it so what we going to do is let's go ahead so
API and let's create and set the API so we can use them here the cre function here so I going
into my API and we have delete it's a motation so we're going to say we're going to pass in
the workspace ID workspace we say let's make this an object we're going to pass in Project
ID and um you're going to so pass in the workspace so I'm going to use this let's use this
type and [Music] then let's um this is going to have a promise of just
message so we can you can send that if you want
promise string so let's say constant [Music] response is equals to await API dot
delete SL project slash project ID slash workpace SL workspace ID then slash delete and then let's
return response do data and save that so let's copy this and we're
going to head over to the um let's to the
nav let me scroll up and let's go into na project and inside here we're going to
so let's handle the um delete mutation here so it's a constant is equals to use
mutation and we can set mutation function here or let's first import
this function and we going to pass in our delete project mutation function here and
let's import this from API let's get the data is
pending we can just set to loading so it does not
clash with this is pending and um will not be data sorry this will be [Music]
motates mes here so let's copy the motates and let's uh scroll down to
where we have confirm we're going to say um if if not context because we
going to get the the project ID from the context here return is then instead is
set motate you're going to pass in the workspace ID project ID is going to be um context
ID and you can put command open this and say on
success and also on on error
and as usual we're going to error here and we going to uh inside here we're going to see our
toast and let's import to from Ed
toast and um we can also set those for the uness too can get data unless is success
message so yeah we need to navigate the user away from the page if the user is
currently you're going to navigate the user back to the uh workspace so to do that I'm
going to uh think we have navate here so I'm going to say um navigate let me do it here
navigate SL
rockspace slash [Music] uh space ID
we're going to close the dialog Point navigate we use set time out so we can just ruce this 200
then we need to call um the invalidate query for all the all the projects so I'm going to
say query client invalidate query query key or project and we just passing the workspace
here so we need to um import the query client so I'm going to scroll up to here
and let me just import let's import Cent so let's import this from tan query and
I think we are done with this so let's get the loading from our delete mutation
um let's SC let's set this to default here and let's set St
here I think that is it so let's go ahead and test this end point here let's reload this and
let me delete this documents organiz let me cancel this let's delete this
is say
500
Network let's reload user is not
I think something is wrong
here let me look at I think okay yeah we're having undefined here
we having undefined we to project project is undefined so let me
scroll so this oh sorry this should be underscore ID that was a mistake
so let me delete this
now and successfully deleted you and if you go back where on the workspace and
dashboard so we have been able to um we done with projects so we can see all the projects
we can view projects we can delete project so that's it so let's go over to work on tax uh
tax page so we can a to create new tax and then pass in Project assign list of assign
big dat status and then priority so let's go and and work on the create um Ma so let's go
to API and let's um imps the set the API for create tax so I scroll down you can
see create tax mutation function and for the cre test we going to have workspace
ID um project
ID and data and we're going to set a type to create tax payload
let's import this and if we go into create tax pay type we should see we have the workspace
the title the description priorities status assigned to and due dates so I'm going to
cancel this and let's just uh constant [Music] response is equals to API do sorry I with
post we're going to have SL tax SL
project project
ID uh we have workpace workspace ID SL create and then let's let's pass in the
data and then let's return response ID and response. data so we're going to copy this
and let's head over to let's go over to tax page so click on tax and we should see create T dial
so let's navigate into C dialogue and inside c. dialogue we can see that um dialog is inside the
tax folder under workspace so we have tax create tax form so that is it think this is TR and error
here okay on close is missing so I think we need to change this to we need to set onclose for this
so let me just quickly use M State here to control this dialogue then I'm going to create a function
which I'm going to call onclose so I'm going to import uh react us stage from react so move
it to the top and then here we're going to say um open it's going to be is open and uh we are going
to say on open change is going to equals to set is open and then let's pass let's pass the close
here I think something to and get the project ID
okay and if you wondering why we are passing project ID so it creates and tax so if you go
into tax here uh tax you you see that we not passing project IDE the reason is because this
create T tax dialog is used in different places it is used here which we don't require to pass
umlo ID because we have project ID we're going to get project ID from the drop down
but once we navigate to a single um project then we have new tax so we don't need to start telling
the user to select tax in project so we get the project ID from the from this part and pass it
down to you so you can see there's no drop down for project here so that's the reason so if you go
to let's go to um project header if you see where we in the SC you should see create TX and you can
see we passing the project ID here so that is it so let's go back to tax tax dialog and let's go to
cre tax form and let's implement the so I'm going to go back to tax and inside tax you can see we
have the title T title description project so we need to list the project assigned to and also uh
yeah just these two so let's go ahead and um get list of projects in this so let's uh let's get the
project so remember we have a hook so I'm going to say use get um project project in workspace
query so let's open that and let's um open object we going to pass the workspace ID and here we can
pass in the skip so that is the reason we adding the skip in the previous so I'm going to add
Skip so I'm going to say skip if not um project here project
ID this is true so we can get data and is loading so let's remove this is loading from here and for
the data we can just set u project project data project or mty array so now what we are
going to do is to list the project here and the workspace project I'm going to just put
a a comment here and let's uncomment this so this is going to be uh we're going to map through the
project do [Music] map and we can see
project let's return um an object here and we're going to have label so label
we're going to have an object so we can show the project UMO so I'm going
to say d uh class name Flex item Center Gap [Music] one we going to um show the
project emoji and let's duplicate this and set name here then for the value
we can just say project
idore ID then will set the project options so we are using for the select we're using
select from shant shant we select I'll just scroll down to where we have project here
and you can see where we said if not project ID then don't display this so let's uh look
through this and then display the project here so what I'm going to do I'm going to
remove all of this here and I'm going to create a div here because I want to add screw to this
I'm going to add a class here I'm going to say class weight for and a Max height of 200 pixel
overflow
yo then we're going to add
scrollbar so scrollbar I scrollbar is if we go
into um index TS index uh think is it CSS or let say app. CSS
index CSS here you should see I added a custom scroll by here you can see
it here so I'm going to close this this is also the custom sty for the
Emoji so let me close this and let's go back here then we need to look through this I'm
going to look into p create [Music] option not map and we have [Music]
option then inside option we're going to say select
items we want to let's have a class first uh we're going to say capitalize
poter and let's have key equals to [Music] option do um value and let's pass in the
value here [Music] option do follow then we can pass in the label option [Music]
label and let's save that and if you click on new tax here and click on object you can see
this so I think um the div is not okay yeah I didn't put the a so Set Max and
we should see the scroll displaying so we can select any of the projects
so let's also go and do that for the uh members list of members I'm going to scroll up
back and you're going to do for members here I think we have a hook so here I'm
going to get the member hook use workspace member hook and let me
import this so uh while this is stilling I'm going to come down here and St constant uh
member members is equals to let's check
this so let's import this uh thing I think I'm making a mistake so let me
go into my hook okay yeah okay this is the wrong way get use get member
workspace so I'm going to go back to create form and let me place this
here and let me import this from the
hook let's import this here and then we say member member data
do members member members and we get the list so for the members
we're going to scroll down here and we can implement the member
option so for the member option let un commment this here I say members do
map remember
we're going to unless [Music]
return so inside there we're going to get the name
because we going to display the avatar for uh in the label so I'm going to say
label we have a
oh sorry this is not supposed to be like
this um [Music] label we have a
diff and then value we have member user ID
doore yeah uncore ID so we've got the name now we need to get the uh let's get the initial um
aat fallback initial for the name so I'm going to get that so let's import this
from okay let's import avatar for x and then let's import avat color so I'm going to um
import that here get avat color I pass in the name so I'm going to just import
this and inside here we're going to have the class name of flex item Center space
X2 then let's open this St and let's bring in Avatar form from components
make sure to import it from component UI and um not from Ric and we say height s we
seven so if the user have the member has an image we going to display image here so from the user
ID profile and we pass in the name then for the fallback um fallback um fallback we passing the
class name color we passing the initials and let's import Avatar image from components UI
and Avatar forb back from components U then we need to also show the name so the name will be
after the avat we use span name and then this is it so we are done with this so let's go over
to Lo through the let's go so where we have the member yeah remember assign so we are going to
look this through so I'm going to remove so I'm going to have diff and let me move this
inside and say let's this
here so we going to have um members option we're going to map through this and get
option we're going to get this let's this and let's move the select item to
the let's move it inside it we going to set the key to be the U [Music]
option option dots
value then we have the value here option
dos let's add a class
name pointer then we can display the label here option not uh
label then let's go up to project and let's copy the class for this and let's
come down and let's paste it here too and once we save that uh we should be able to
see if you click on new tax and click on assign user you can see all the user
here likewise for project here you can see all project so let's go ahead and implement the sign
so this um list of um status and privity is think is the right one so if you scroll down to uh where
I have status you can see I have status option here if I scroll up to where I implemented status
option you can see status option is coming from um so we have status uh status list and if I go
into the TX status in know you should see inside the constant you see the way we defined it here
the this is an object here and if we go back to we convert this to a list and you see that it's
now in a list also for the priority a list so now we need to transform this uh is into uh what the
label so we transform this in a way that we have convert the remove the underscore and have done
in Rie and make them capitalize and instead of all upper case so if you go into transform
option this is inside the helper helper um helper file in the leave folder you can see options here
P pass string there a list we have icon M icon Maps here we are going to uh see the reason why
we I added this Bo option now then from the option that map through this the label the value replace
this remove the underscore to M string lower case it and replace this and set this to upper case so
we're passing the value and the icon so I'm going to show you how we make this up and you can see
transform in and we still have a separate function to transform in I we still have for status to in
status up toer case replace uh this to underscore so we for back to underscore by passing the
underscore so you should see where we're going to use both of these and also this again so that's
how we set the we got the status option which is in label value and the priority option label value
you skip the icon so let's go ahead and um create a new t for this before we do let's let's get the
API the motation function here so I'm going to uh bring it here so let's do it at the top
here so we going to say mutation function uh mutation function create U tax mutation
function so I'm going to import this from Lo API and let's import
use motation from uh D query and we have the motate and expending so we're going to SC to
unsubmit and let's implement this so we're going to say if
this is loading if it's pending just return this and let's have our payload
uh p is going to be this we're going say workspace ID project ID so we're
going to get the project ID from um values if you look at this you set the project ID
here project ID project ID project ID
here so for the data we look to this and convert the dates to to ISO string so to
the string format then we we going to say mate and let's pass in the
payload we going to have un success success we're going to return this and let's also have on
error and then we're going to have our
error and then let's um get the toast here so I'm going to import
those from um use hook and also we're going to also tost if the user created
a TX successfully so we're going to um let's move the close into the uh
success then we are going to also uh we going to have to reload the analytics for project
because you might want to create tax inside a project or create a tax outside so I'm going
to reload the use Query cents reset query or let's just invalidate query so I'm going to
U import um the query client at the top here so let me scroll up to where and let's import query
client so I'm going to import let's P for this I'm going to import this now from use client I
mean from T query and let me scroll up SC down and then let's set this to invalidate query so
once we do the one for all T we going to come here and add the um the invalid query for all
Ts so we've not done that so let's just try this so let me scroll to where we have the
button and let's also set this to let's say the loader say if it's
pending let's and disable this button if it's pending
yeah so that is it so we are done with it so let's try and create a tax here so
let's click on the new tax so here we're going to right so I'm going to set this
to set up Sal data model and description we can have uh let say Define define and
database schema and record just put anything Matrix then project we can select Sal struct
assign assign to Lucid Gates or let's set to be J then due dat we can just pick let's say
14 priority we can set priority to high no we can set uh this is status we can set status to to do
and we can set priority to all and let's click create and then our tax is created successfully
so let's go ahead and create a list of fetch all Tas end points and I'm going to create more
Tas I display here so let's go ahead and create the Endo for that so let's go into
FBI inside the leave folder so here for the
all tax this is going to be an object here and we are going to get from the user since we're
going to do filter and also pation we're going to get workspace ID keyword project
ID assigned to Priority status due date page number and Page size and this is going to be
assigned to a type of all taxs payload T payload type so I'm going to import this form type and
if you go into all type type you should see this here and the keyword all the filters are
optional both with the page number except the workspace ID or project
ID is optional so we're going to also have a response here I'm going to say
uh is first let's paste in the all tax response type so I'm going to import
this unless so because we're going to pass on the to the m points we're going to first of all let's
set the base URL for the end point so this is going to be constant B URL going to be equals to
uh let's open this SL tax SL workpace yeah ID St so fing all tax then we
need to get say constant query query is going to be equals to new URL um sech
PR and then we're going to say if if keyword P keyword to this then if project ID you're going
to append project ID to say query par app project ID and pass the project ID you're going to do for
the assign to if assign to then assign to to assign um assign to and then the key and the
value then we have the priority here you're going to uh say if priority the same thing
you're going to do for status to here status you can duplicate this and paste and for due
dates so for due dates then we have um page number you're going to have to convert page
number to string another for it because um require string so convert page number to to
string and for page size similar to that since is a number we're going to convert
it to string and then that is it so now we are going to say constant URL is going
to equals to query parameter uh do to string if this we are going to [Music] to sign base
URL and we're going to pass in uh let's pass in question mark and query [Music] par space
URL you can try other um approach let me let me so there might be a different
way you can handle this you can try it out so I'm going to say constant
AR constant uh
response is equals to our we uh we're going to have API get
[Music] return [Music] response dat and then that is it so we're going to copy this for all tax and
then we are going to so let's go into all let's go to uh workspace and inside is TA you can see
tax table so you can go this table and look at what we've done here so tax table I'm
going tolick cont table and inside here we have the uh the P the p p size we have fter so set
fter and fter is from TX stable T so instead of using from no of using different we using
use St States use quy States so because we're going to handle multiple states on
the on the URL so I'm going to cancel that and let's record the column get column and
passing the project so now I'm going to just say constant this is going to be cl to use
um qu from D query you're going to have in the query key here the create key is going to be all
DX let's get the workspace ID okay we've not got
the workspace ID so I'm going to get the workpace ID here and let
me import this so let's see workspace ID here this is going to be type say p size
page
number sh and then project
ID so this is just for the key and now we going to do the query
function and this is going to be our get
Sor gu query uh gu all TX query function let's impose
this and S we're going to pass in the
workpace keyword is going to be filter do keyword we see
[Music]
fter as
priority we have a status you T
status you have project ID this is going to be project ID
or the
futter project ID so this is going to reason why we add project ID from here is in case we are um
in the project page you're in a single project we can instead of few Time by this we going to
just get the project because we're not going to show if there's a project ID here we're not going
to show that in the column if we are viewing a single project page the task column The Columns
has project we be hidden but if we on the all tax page then we see the project so I'm going
to um assign to fter to assign so this is going to be assign ID here page number and Page size
and then let's end this with zero so let's get the
tax so we say data and let's get this
loading let's import TX type from API type
and then we're going to get the total count from pation
so if you go into Data regation count and zero so if you want to see that you can go into this is a
Tex then let's go into type response you see all of it here so for the page we have done for page
and Page size so let's pass the TX in the data and let me pass is loading yeah so let me save
that and we should see uh and once this load so I think there's an issue
here let me
inspect
Network let me Rel
load and then we can see we can see our data
here see the project we can see the title of this um tax the assign the date the status and
the priority and also more option so let me go into my column and let me fix this
go into column and column is from you can see table column and I'm going to so so all this
here the status the height the priority is inside the column you can view them inside
the column see for the assign to see how we display the um the Avatar view dates
you convert that with date function also for this status you can see where we use for status
to after finding the status here from uh if we go into status here you can see where inside the
table we have data where we specify the status and the icon and how we transform them with the
icon so you see reason why we add icon to the transform because we have to pass icons here for
them so this is the batch and let me go to the title and let's let me
convert this to place colum and large you can say
FL or let me say FL
swap yeah so FL swp is okay so we are done with this so what we are going to
do now is to test the pation I'm 20 this should load pation is working
fine and there so I'm going to add more and this so to view the pation you can just see
position inside the data and also this is the fter the fter is title assign to all are in
this page scroll if you say the data filter you can see all of these components here we
can go over it so for the pation you scroll down into Data inside data table scroll down to data
pation you can see the pation being pass here and everything here the left right and that
so I've been able to do a lot here so you just go over it and you will understand
everything there so the next we going to do is let's work on the filter so this
you can hide some column if I enable the column here from the side from the color
so let's go ahead and show all assigned to we have the filter and you can see that it
works filter is working for priority for status is working for yeah for status is
working and if you select any backlog if you look at the URL can see it's added to the URL if
I select to do can see it's added to the URL and we can clear this byck on clear so let's go ahead
and work on the list the assigned to and also for the project so to handle that let's scroll
down to where we have the uh data table the data table filter to so I'm going to also pass loading
here so we passing project ID the futters and also the set futters yeah which is from
uh the use tax table filter so I'm going to scroll down inside here and let's get
our project option and the members or assign option so so this is going to be similar to
what we did in the create T so we can copy that from the create TX here so I'm going
to to first of all let me bring in my let's import the use workspace ID and let's the use
project in workspace I'm going to import this then let's also bring for data so we can copy
this inside you can quickly copy this inside the um create tax I'm going to copy this let's
go back to tax and let me paste this here and let me import members use workspace members
here then for the U project we can go to create tax form and let's copy
this unless you place this with this then for the members or we can call them assign let's go
to and create t for and let me copy this over to tax table and let's enable this and let me paste
this here yeah so we're going to have to import the bet for back text also the Avatar color the
Avatar import avat from UI Avatar import image AV image for component UI AV and also AV for
back from UI so we are done with this so let's get assign and I think we need to pass it here
so we have assign so I'm going to pass in my assign options here so let me see I options
now let me copy this and replace it here and let me copy the project options and scroll
down to where we have project option and you should see where we hide if the project ID does
not exist then we are going to if there's no we display this but if not we're going to hide this
and you can see that the futter value is splitted and this is how we going to select values on them
on filter so if you go into Data fter here table and you can look at how we implemented the whole
um pop over de cleare fter and also the check also we also differentiate multi select and then single
select here so you can just go through it so now if I save if I click on assign to you should
say if I you should see we should still return the the
tax so we are done listing of tax and the project is the last one you can see all projects here and
if i f by what is this project sales trer let me go to Project sales tracker if I saler you should
still see the project and this is selected as well other and let me clear it so I'm going to populate
this with a lot of P so we can look at the pagination if pation and also be able to filter
a lot of also last the keyword so let me go ahead and populate the the tax with a lot of data so
I've able to add some back sign notice that once I add a it does not reload this it does not refresh
this page because if we go because we didn't add um the um let's go over to tax table and then me
scroll up so we didn't add the U valid query for so let's let's add I'm going to just copy the and
workpace ID and then let's go into create um create TX form want to close this let go to
unsubmit and let's also add invalidate query I'm going toate this and I'm going to S this to all ta
and here to
workspace workspace ID so let's make sure that all tax is set here on workspace ID so I'm going
to save this and if I try to create a new tax I'm just going to create a random Tax
test let me select other tracker or let me a different finder me give it to gendo and
let me just any it let me select this to done no no let me this to to do okay let
me switch this to today set it to done and set it to high and let me click on
create now let's wait for it to
submit think TR some errors I'm going to inspect this and see why is St are
here so let me go to next now let me try I submit
again okay it's this time so I think you duplicate this um this finder from T and
say to so so we need to delete one we can see all the let me reload this and then the font is play
so you can see this and all the status so we can view this in um let's view this in larger screen
and I'm going to just reload this one here and we can see on the dashboard for we have
to Over N I think completed think this is uh wrong here
so let's go ahead and let me go and check [Music]
thisly so we have only
tax so let me try and inspect this uh let's inspect this and let's make sure
that this is so let me let me reload this for sales up and should click on Analytics
and this is
it completed tax is to I think we made a
mistake so we're going to let's go back and fix this
because it's showing completed Tas two instead of
n so I'm going to go to um workspace analytic let me fix that so inside the workspace let
me close this and we should see work space analytics here oh I think we made a mistake
here this should be overdue tax and this should be um completed so let's also go to analysis
and we also did the same thing here mistake here overdue tax and completed tax so if I go over to
dashboard and you can see this is nine zero overdue and two completed so let's um let's
move over to view this in full screen again and let me close this and uh we can able to
go over to tax and we can see this think we can create new tax so that this we
have so this is one of nine so let's quickly create two tax and I'm going to just quickly
do that so let me create a title for you say create other history page and then let me put
a description let me a project to other tracker assign to let me just pick anyone let me pick uh
any dat and let me say this to be in review or let me just set this to to do priority high and
let's save this and it ised and we can see it's change here if I click on so we can see the next
here if I click on next and immediately we should see this um 11 of 11 and you can see you have to
click on previous to move back you can also f by project so filter by sales tracker and only
sales tracker project is been filtered and you can see the sales tracker here if I filter by other
tracker can see list of other tracker likewise um you can filter by assign to J and new result I'm
going to filter by build I want yeah so we can so let let move to sales [Music] truer I see this I'm
going to f By Priority low low and high yeah low and high and you can set the St to do and you can
see everything is working fine so let me clear let's reset this so we can search for created
create now we can see the keyword here been set to create I'm going to remove this and all we show
so that is it for the futter so we're going to go to um dashboard and let's implement the um recent
project recent th000 recent members on this page so let's head over to our code and Implement that
so navigates there and inside this page so let's go ahead and work on the recent project so if you
go into project you should see recent project here so I'm going to click on that and let's implement
this so we're going to get the get projects from the um from the hook if you scroll on to where we
have the hook we have um use case projects and we have use get project in work space query so
let's cancel this and let's go over to the recent project and I'm going to bring it here so let's go
to import this so I'm going to import from you SK uh from the hook and we have data and pending so
we're going to get the project so from inside data we say project equals to data and let's remove
this D data here so inside the project we're going to show inside this we're going to show
the um let show the loader say it's spending we're going to give it import let's import loader from
Luc so once you import that we can have we eight height eight SP self self place
s Center and flex and save that then we can also have a display no project if uh
the length is equals to Z so we're going to say project L equal Z so we're going
to have font Bo semi Board t small T medium press enter py and that's it so if we map
this project Let's uh convert this to uh let me copy this let's C this and let's
return then we are going to um we going to get the name of CR so remember we want to
show the Avatar of the user who created this project so I'm going to uh show the
name here name is was Project by name and we're going to get the initials and also the
colum so we going to say initial get a for back text and this should be let's change this
to project here and let's change this to project we can change this to project idore ID and let's
remove this index let's import let's import this for folder and many last one is the avat color
so I'm going to import get avat color from the lip helper file so here we're going to say um
project project we're going to pass in Project here so for the for the
um link we're going to remove this and say project doore ID and let's change
project also the date to
project so for the dates we're going to set this to project created dates created
and we're going to check if this so let's say format and we're going to import format
from date function import that and let's pass in us and we're going to add in p p and say
now so after we done with this so let's get the project and we're going to set this so
for the Avatar we're going to set the Avatar image to project created by profile piure
then we're going to also have
project no not we're going to set this to initials and also say the class name
to and that should be all and that should be all so let's check it out
so if we go here we can see all of the projects created and we can click on this to navigate to
the project so let's go back then let's work on the recent um tax so for the recent tax
let's go into our tax folder close this project going to T fold you see recent
T click on recent T here and here we're going to first of all get the workspace
ID so let's import workspace
ID then we're going to um let's get let's use
constant let's import use Query from P query now we're going to say query key
where is going to be all ta we're going to pass in workspace ID then the qu [Music]
function the gr function is going to be we are going to import um get get Al function
and let's import this from API and let's just pass only workspace ID because we
not we don't have the F to pass so just little we're going to pass in data and it's
loading then can just pass in um this this two and then let's get the tax so we can get the tax there
so I'm going to remove this and let's also remove this data here and let's import tax tax
type then for when is loading we can just load
here you can copy that from recent project so let me import this
here so we can just import
this then if no tax we can just show no tax by set tax length is equals to zero
then we're going to show Tex more F semi boardy and no TX created and let's move
into TX so inside T we get the initials and everything so we're going to see tax assign to
name is it assign to okay yeah I think I made a mistake assign to do
name and it should stop so this should be underscore ID this should
be [Music] underscore no this should not be underscore this should be t that's
good so and this is title and for the due date we are going to use um format from um so from date
function so I'm going to import this function import format from date function here so thise
function and this is tax due date and know then we are going to s and for the batch we are using
the tax inam we passing the tax status and the inam is gotting from this um constant here and
we're transforming this from so we are passing ST which is going to be a capital letter pet
then we're going to transform this and remove any lines and replace to this then we're going
to also um we going to do for priority to and the last B is the Avatar so we going to set our
source directory to tax I mean SRC tax do assign to profile picture or M string and this two will
be changed to assign to do name and I think that is all let's go up and let's remove this and
this so let me remove this and then if you try to check a recent tax this should
load and we can see this so I think we need to set okay we can leave this like this the pass
code we can set that to
capitalize and that we change it so this is it so this is all our Tas then the last but
not the least we going to work on is the recent members so let's go and look so inside the recent
members so let me go into recent members MERS members folder and click on recent
member here and inside we're going to get the workpace ID here and let's import use workspace
ID and let's get uh use workspace I'm going say use get um I think this members
workspace members here and let's pass this and let's get the members here so I'm going
to scroll down and let's say members let's remove this D dator and this members here
you're going to also show the loader here similar to what we for recent tax
here and let's import loader from Lu
so I'm going to say save and from the members we are going to um let's comment this out let's
collapse this here and let's put this and let's return and P this so I going to my recent TX
and let's copy this initials here this um here I'm going to go into my recent member
and um here we're going to paste it so here we're going to say um member
dot user ID name and let's import fullback
X so we're going to the SS is going to be um user ID profile
or empty string then this is going to be let me remove this and let's say this to avat
color and this should be
initials remember the user ID do
name the member R member do um
m.
name and for the join date we're going to use the um format date for date function so for we to use
format from date function I'm going to import that here so let me import it from date function and
you see remember join that and and I think that is all so let's save this and let's view this you
gooll to recent members and this will give me all of the members here and there are rules so I think
that is it for all of our project for everything here so if I try to sign out I'm joining like let
me sign with admin account um let's say do see K log in and let me switch to sales Ops so since
theate is an admin you can view settings or can edit or can delete and can also add new project
you can just call this let weet and let's click on Create and you see it has created then we can
see test project if you move to dashboard you can see test byg and that is it so likewise let's try
and log out and log in with our member which is BU buets I'm just going to log with get and
immediately let's navigate to let's switch to um sales Ops and you see our permission is working we
can see the settings we can see the ad and if we move here we can see the delete reget but we can
view we can see all dashboard see dashboard we can see all who created this um project and also T who
assign to tax me recent member and on the all TX page you can see all TX now we can navigate we can
go the previous and we can filter by status and other so that is it for this video so so to deply
appro both the back end and the front end we are going to be using free services like render and
VC so the problem is we can't host this project using cookie session because cookie only works on
the same domain or subdomain and cannot be shared across multiple domain due to browser security
restriction so since we're using cooking and we don't have custom domain yet we can't deploy
that because it's not going to actually send any cookie it's going to be blocked by the browser
so the alternative is to use um JWT token instead so to do that we're going to have to modify some
part of our code removing most of the place we use cookie and session and using JWT so let's go ahead
and do that so the first thing we going to do is to go to uh so I'm in my back end let me clear
all of this so just go to the back end make sure you close the client first the back end so go to
your EMV and let me close this so we're going to get um going to put in JWT secret um and expiring
here I'm going to paste that here so we have jw2 secret JWT expires in one day and jw2 secret so
save this and what we're going to do now is let's go into our config so before we head to the config
go to your route inside the alt route and then we are going to set this because if I ising passport
passport we always send session so in order to um avoid the passport to s session to which we using
to save in our cookie we going to set session first so after the scope just put session and
set that to for and this will not send session so I'm going to copy this and go over to where
we have the call back and let's set let's also set the uh after the first R failure R so just
put first there so we've done that so let's go into the index of TX before we go to the config
and let's comment this out so we not going to be using session so let's comment passport session
and also comment this out so comment this let's comment let's comment the session out now so save
that and let's go over to where we have the config so if you go into config um passport or config we
if you can see we passing the pass request to call back because we're going to make use of
this request to set our JWT so before we do that let's scroll down to where we have uh I think it's
here so scroll down to where we have this local so let's set this to for instead so save that
and think uh so what we're going to do is we are going to create um JWT strategy here so I'm going
to close this there and here we are going to also send JWT token here so let's go ahead and create
the JWT UT so I'm going to go into my UT and let's create a file called JWT TX so if you watch my
previous NOS video you see how I implemented JWT here so I'm going to just copy that and paste it
so I'm going to paste that here so before make sure you've installed JWT here so if I scroll down
I think we didn't install JWT so I'm going to do that now so let me open my I've open my terminal
so let me see it into back end and let's do mpm install Jason web token and let's install that
and let's wait for this to install yes and also install the type so mpm let me close this so MPN
install and let's pting the type and this should install the depend dependency for us for Jason
web Tok so let's wait for that to install so that I've install completely we are going to go over to
so let's go back to JWT inside YouTu and and we're going to import that so I'm going to close all of
this first and at the top I'm going to first of all export a type for um the assess type payload
for the JW token so I'm going to to P you say access type and let's import the user documents
from user model so our J toking is going to have a user ID in it and this is going to be the type
access T payload and there we're going to set the type for the secret option and service and
secret and secret sign option and secret so guys I'm going to just do that here so we're going to
import sign option from JWT from Jason web token and we're going to use this init so we going to
also set a default so I'm going to say constant default this is going to be uh we're going to
set the sign options and let's uh open it we're going to say audence so this is going to be the
options so I'm going to say this to user then we are going to um export the we're going to set the
type the the um the config so I'm going to go into the config going to app config and let's
make sure we have set our JWT here so inside the app I'm going to just copy out and paste
it inside here so I'm going to just it down and let's paste it here so this is secrets
and default value here so if you've done that just go back to JWT and inside here we're going
to um get it from the config so I'm going to say export constant I say access token sign
option this is going to be now this assess to sign option is going to be of type sign option
secret and let's just open this so we're going to have expire in you can see that expire in
we're going to have config JWT so let's import config from app.config do JWT expire in and then
we're going to have the secret andt secret so just save that then we're going to sign JWT
here so I'm going to say I'm going to call a function sign JWT token and it's going to
have the payload which is the um access token payload the user ID and then this will have
have constants this is the option and the option is of type secret option you can see that your
secret options and Ian sign options and secrets and then we're going to destructure the options
if you option you can see that if you D structure it you can have the SE and the options and then
we can say oh you just get this from here then now we going to sign the J so sign we pass in
the payload which is the user ID we pass in the secrets and these are the options which
you can also set if you want but the default one is uh uh I think default one is okay this
is defa one then we have um the sign and secret so this is a secret here so I'm going to import JWT
here so so this is it so we are done with it so we're going to get this sign everything and let's
go into our config passport of config and we are going to do that first for the Google so remember
if you're signing with Google it's going to go is going to set passport is going to set session so
since we've set that to First we're going to use um session you're going to use thew tokens here so
I'm going to say Conant JWT is going to equals to so let's open let's import the sign JW token from
JWT and once you once you done that you're going to create
open this and let's pass in user ID so user ID is going to be gotten from user uncore ID and then
in order to set this send it to so we can access it if you try to do this like this you're going
to have problem uh we going to have problem with others here we're going to have a lot of problem
so instead I'm just going to leave the user here and just say request I set my own here
GWT is equal tot and this should fix the issue I think uh we need to set the type for this I'm
going to go into my type yes let's go into the type and let's set that so go into types inside
index. type and we going to set add it to the request so interface request J and if you don't
the error should stop so once we've done that now we are done with it so let's go below here and
let's set up our JWT strategy here so I'm going to scroll down and there we're going to set our
interface and we're going to say JWT payload you're going say the payload
is going to be user ID which is going to be string
and uh let's set the options here constant options and this is going to be strategy options so I'm
not going to be using request here so I'm going to just say stry option and let's import this
no it's not from gole I'm going to import that from and passport PT and let's confirm
us so we install passport jwc so I'm going to go into my packet Jon and I think we didn't
install that so let's install passport JWT so I'm going to open my terminal and uh let's mpm
install passport and let's wait for this so that's has install so let's also install the type so I'm
going to say types password JWT and that should install so let's wait for that so it has install
completely so let's go back to uh let me go back to the config passport config and then let's let's
import the passport and also import strategy so similar to how we did for Google and local
so I'm going to import that you can see strategy as JW strategy extract JWT and strategy option so
this has stop so then let's let's open this equals to so here we're
going to have DWT form request it's going to be
extract extract extract. form so you can see we have so many um
extractor here so I'm going to say header header as per token
and let's say secret op secret key this is going to be config
so make sure to import config dot um JWT secret audience is going to be
user Alm just going to set
this say this to H5 h hs256 hs256 and once you've done that now there's a passport do
use I new JWT strategy we're going to pass in the options
here say as in payload so payload is going to be equal JT payload
and uh we're going to also say comma done let's pass in the done function
then you're going to open this and once You' done let's use our Tri
catch and then let's do constants so we going to get the user
now constant user await
let's put it cl to here and let's say I always find uh find
user I think we did this here let me open Lo okay this is veryify
okay so we're going to create uh we going to create a service for this so I'm going to call
this find user by ID service let me just past it here and let's pass our P user ID I'm going
to say if not user then we're going to just return don't know and FSE then if there's a
user then we're going to just return done and user else if we have an error we catch
an error we going just return error and for and then lastly let's SC down below here and let's
create our midle where we're going to pass to all of our out we're going to call this
passport GWT and going to call this passport dot authenticate you're going to specify here
towt and then we're going to also set this to se
first so make sure to save that and I think that's it we're going to use that later on
so let's go ahead and create a service because we're done with our GWT so I'm going to go into
uh let's go into our out service so going to service going to out so we just going to just
create a simple function so I'm going to just scroll down let's just comment all of this all of
pleas verify user and let's just paste it here so I'm say export constant find user ID service a
sync we pass in user ID that we can find the user if not we just send it not or if there is a user
your same user so we're going to also set first password first to Avo it to return the password so
I'm just going to copy this and let's go into our passport config and let's import this immediately
so once we are done so we are done with our JWT now let's go ahead and use this passport
out so just copy this passport out authenticate and let's go to our index. TX and replace and
let's quickly replace all of this where we have is authenticate using the session it's Au and
let's replace it with this so I'm going to just uh passport authenticate and let's import that from
config paste this paste this paste this here and just paste this here so let's save that so lastly
we're going to go into our all rout uh let's go into our rout out rout and where we have our
Google call login call back so let's go into there and you should be brought into the alt control
so here we're going to modify this so since we going to modify so I'm going to scroll down here
and let's uh say JWT is equals to can get that from our request JWT and let say JWT
if not um if not JWT we can just replace it then we to first then we are going to also uh
we're going to also okay so since we are going to have to uh finding a way
for the clients to get the AWC and we using Google sign in here so I'm thinking that we
should add the uh your to the URL if there's a better approach to this you can put that in
the comment section so I'm going to comment this out and I'm going to just use this uh
config so I'm going to just do that here and you you see all I did I put status here to
success access token to JWT and then current workspace to the current workspace so this
is the way I was thinking can work for this but if you think there's a different way to
do this to avoid putting the access token to the URL just put that in the comment section
so once we have done that here we are done with the uh Google login callback
so I'm going to scroll down to our login controller so for the login we're going
to make some changes here so instead of using this uh request login from session
I'm going to just comment this out and instead we're going to your SC constants
access _ token it's going to be equals to sign uh JW token and let's pass in the user
ID and we can just get the user ID here like
this
okay so yes if we got that then we're going to pass it to the user so we're going to just return
you can just copy this here to return I'm going to just log sucessfully access to we can pass user
we not use it we going to even use the user here or we're going to use it here we're going to use
it to get the asset the current work just put it here so I'm going to save that and I think that
you can leave the log out yeah so I think that is it so let's go ahead and test this out let's
go ahead and test this so let's run the server and make sure everything is working so mpm run
Dev so my Postman I'm going to try to log in
first so I think we should wait for the so database to be connected so database
is connected so let's try is out and see if our assess token is working so I'm going to
click the the assess token and the user information here without the password
and current workspace so this is working so let's check for the current user to make sure
everything is working so I'm going to copy this the access token let's go to current get current
user and let's go and select to here
so I'm going to paste it inside here and let's try and get a current
user and then we can get the current user this is great lastly Let's test
for all workspace all user workspace because we loging withu so I'm going
to S token scroll up and I think uh let me place this to make sure let me
send and there there is a you go see everything is working very fine so we are done with um setting
up and replacing cookie with JWT so let's head over to the client side to update that to so
I'm going to close the back end and let's open the client so to handle the client we are going to use
uh we're going to find a way to store in the JWT so to store in the JWT we going to be using um
we're going to be using San so I have a course on a course I'll put the link I have a video the link
is going to be in the description to explain how Z work so I'm not going to really go details on how
Z work so is simply storing helping to store your ass to to your local storage or session storage
it's similar to Redux um using Redux but it's more easier than Redux so what we're
going to do is to go in and let's install that so I'm going to go to my packet Jon and let's
install so I've already install that you can see that so just install in your terminal and
you should have this so what I'm going to do is uh I'm going to create um store here
let me create a store but you can use in hooks you can make it I just want to go to the not a
simple flow so I'm going to just try to set it up here so so I'm going to just click on
TS so um I'm going to create store and let's Al create selector so for the selector I'm going to
copy some code here and paste that so to get this code you can just SC to my GB uh go to
my GB let me open that here if you go to Tech with email um YouTube YT if you go and scroll
down to where we have just find because this is not going to be in the in the repo so just go
down to where we have H Sant Focus so click on S Focus once you click on that just scroll down to
SLC and this should open so go to store and you should see selectors here so go into selectors and
just copy it because everything here is similar to this so inside here you can also go into this
store thex and I'm going to copy I'm going to also copy is here so because I'm going to be
storing this into session storage so that's what I'm going to do so let's go into our store and uh
let me let me copy it I'm going to just paste it inside here so we're going to import some
of these tools yeah so we're going to install the dep to dep is going to be coming from Z so
there's no point installing dep to so I'm going to import this from Z so let me just get that from Z
here you can see dep tools and persist and create we're going to import quate for
Zan so we're going to also uh get the create selector from selector and now is remaining
this two and this two so let's fix this so I'm going to go to the top and let's say type
user uh I don't think we need to store the user we don't need
to store the user details so I'm going to say type out all
state and this is going to be access
token and it's going to be string or no
you can just set a user to know you can choose to set the user if you want but I'm not going
to set the user so I'm going to just say clear set assess token and then clear access token
so once we've done that we're going to create our slice so constant creates all
slice this is going to be of type um States creator
so State Creator we're going to from and this is going to have a type of OD
States and let's set this to
set so I said access to default value for assess token is no then the default uh we're going to set
the state yeah say set access token to and set is going to be access token this St so if we use this
function we're going to pass in token and token will be set so this set will set the token for us
then likewise to clear it we're going to similar do the same thing here so clear is going to be
clear like this so let's just set the user to know so that to know so it to stop this error then
if you want to set the user you can simply do the same thing like this to set user
but since I'm not going to be using user so I'm going to just remove this and you
can set the type so so there a type store type is going to be equals to All State
and they should stop you can do that with other types here if you have other states
so once you are done with this we are done so let's install um this package so I'm going to
go into my package addressing and let me check if I've installed this yeah I've installed it
so just try to install this you going to say mpm let me let me open a new terminal
here we can just let me go away from the back end and navigate to the client
and you can just say MPA
install at you can use in version 10.1.1 and they should install so I already installed that so I'm
going to import that from start middle so let me just go into store and we're going to import
that from to Middle here and that should fix our error so if you still don't guess how to
use S no worries you can just check the YouTube channel and you should see in the link on in the
description you should see if a link to the video that will teach you full course on how to use Lon
an alternative to Redux so now let's go to into our leave folder into our API not API as you
client and we are going to modify this to set the assess toen to the
request so now we are going to also um let's commment this out we are not going to use
this so let me comment this out here and since this is API Interceptor response we
are going to create a new one called API dot Interceptor do request do use and at
this point is where we're going to set our we're going to set our JWT or assess token
so what we're going to do we're going to say config we're going to config all
this I'm going to say constant
assess to it's going to be equals to Ed store so we going to get Ed store from inside our
store remember we set the Ed store base with dep to and remember this P here is a important
because that's what is going to persist our data into the store into the local storage or session
storage and then we're going to wrap this with use selector so we can use this to get the the
access to user or other things you store in there that you set here so I'm going to go into my ass
client and let's say you store get not from s get out from store SL store and we're going to just
say do get so we have a function here say do get state do access token and then we can access the
ass token here so we're going to just say so let me close if assess token we're going to say config
do headers we are going to put on [Music] authorization it's going to be equals to
we can sell a like this this is fine this is okay then let's return the
config and that is it so we are done with it you can leave all of this like that it doesn't
have any effect so I think everything is okay so now we can go ahead and um so let's go ahead and
store this store set our assess token so the first place we're going to do we can do that
in the login so let's go into sign in sign in so out sign in so inside here we can do that so so
um below here we're going to let's call this as a constant going to get the uh use store
so please in import use store from store store not from Z not here but the second one store SL
SL store and let's get the set asset token so I'm going to copy this and let's scroll down
to where we have on success where we have the data. user so what we going to do we're going
to also get the access token constant access token is going to be equals to data do accessor
token so this is going to show some error so we need to go over to um our API so go into your
leave folder go to API and where we have go to where scroll up to login the login response so
go into here and let's set this here so say access token string we can save that so let's go back to
sign in and if you if you're going to use the user data which you got from the response you can just
add the name and email from here so I'm going to just go back to where we have this and then
let's set our assess token here let me remove this console and let me just set the assess token here
yeah so we've been able to set it here so if you're log in now you should be able to have
the access to conv set before I go ahead and test that I want to also also fix for the Google what
so remember we said we've added the if you go over to back end uh if you go to our Al controller for
Google login callback you should see that we set in the Callback we have success ass token and also
the current workspace so we're going to have to go over to our clients and let's modify this we can
modify this instead of setting Google o failure we can just just remove the failure there so now
we can we will use it to handle both success and failure so I'm going to just remove this failure
and let's change this to Google or and let's go to our route come on I think rout yes and let's
change it to Google o and let's replace this to Google o that's fine so let's go into our Google
o now and what we going to do we going to get the par query params so I'm going to say query use
search use search par so let's import that from RE and this is then we're going to get you can
get the status I don't think I need St here I just get the asset token so to make sure token is been
set and also the current current workspace so does get access to current workpace so we say re do use
effect I think uh let's UT
import we at I'm going to move this up to and then we are going to just say let's put an empty array
here and let's check if if assess token then we can set we can set the uh let's set assess
token so we're going to get that from um the Ed store so I'm going to get Ed store here so let me
bring it down here and let's import use store from store s store and let's set assess token
here and then we can also say if if current Works Space then we can navigate the user
to the current workpace else we just we just re the user to
now let me just change this to slash so we already to workspace current workspace else
this unless um add in the dependency here so update all of this so let's save that if not
is going to just show if there's if if there's no access token remember it's just going to
just fall back to the fail here and this we already user we can click on this to take us
back to log so I think that is all uh lastly we have the log out so let's go to our asset
I Side Bar going to log out dialog and inside the logout dialog we're going to get in the store so
constant say use store from SN store and let's get clear assess
token and if you scroll down I think
here I think is there we can just say C access token so I think that is it let's just save this
and let's try this out so let's run our our client server so I'm going to run this out so let me say
mpm run de and let's wait for it to run so this are started so I'm going
to just um open let me open my thing let's go to
local so we're going to first of all try with um login and then we're going
to try with um with Google so let me try with log now so I'm going to click
on loging and let me inspect this so we can see if the session was set or
not session I mean the access token was set so I'm going to go into my
application let's click on application here inside the inspect make sure to
select session storage and you can see that it has already set this to session storage access
token and user data not session storage is not does not have maximum size large
size to store data so I'm just going to use to just store access token because
access token is not large so I'm going to starty and loging so let me click on
login and we can see this login is sucessful if you look at it you can see that and we can
access current a current user V user for us and if you go into application if you go into State
you can see the assess token was been set here so that is it so if I click here and I go into
this a sales up engine call we can see all of the data which we have here so I'm going
to close this and then we can see everything is working fine and since you're is not um an
admin he can't see the settings page so you see everything works fine so I'm going to try to log
out and let's test with um Google so let's log out and we've navigated here if you try to answer
this it's taking us back to login so let me try with
Google and uh so we are going to I'm going to select my my account
and just look at the URL you should see that we
have so you can see it it redirect us to the current workspace and then we are done with
modifying our code so let's go ahead and start to deploy this to the so here we're going to
host it so I'm going to create a new two different uh two po which I've Creed here you can see one
I've call this m back and B2B team sync front end and also here I have the one I set has packed
so I'm going to push both of them and then we're going to first of all deploy that with v uh we're
going to deploy that to Vis first then before we deploy the back end using r if you click here you
can see just go to r.com render is a place to host your backend Services I just click on dashboard to
sign up already loging already you should see I'm already loging I have a workspace here and
you you see some of the things that I've I've already set up with this so let's first of all
um push our client then can set up with then push the back in so I'm going to clear all of
this so make sure to delete any geub uh G you have in this code so I'm just going to uh so I'm
done now so if we going into our client I have a file Ving so you need to create that since you're
hosting a client on Vu so to do that you're going to just put this code here write Source
destination index. HTML and this should um this will help us to fix the problem with react rter
on V try to access a page and V is going to be page 44 so this V that once we try to access A
Different Page just for back to index so that is it so let me go into my clients let me stop the
server so I've stopped the Ser for the client and let's do K in
it yeah so we're going to say get
hard let me clear and then we're going to commit our our code so I'm going to comit that using
the V using the vs Cod so I'm going to just select uh first comit or begin project anyone
I'm going to comit that then let's set let's go back to where we have
our K people so I'm going to scroll down and let me set this to Main
Branch let's also set the add the
origin and let's also push this to main
branch and this will push my client to the repo yeah so that is it so let me load
this and then this is it so let's go into I'm going to just uh going into my v and
let me create a new project here also remember we have EnV with the uh Bas API
so we're just going to just copy the API we're going to reiew this later on so
let's just copy the visu API B URL empty and just add it there so I'm going to import uh
this think you should import why is it taking time
okay yeah it has import this so now project name we can just set it to um
team team
sync yeah team sync team Sync here then this way invite of it then environment variable
can just set this later we're going to deploy it again and then let's deploy
this so it's deploying so let's wait for this you
can see the um Branch took it from the main branch and then this is installing
we can see that um it's building the to for production I think it said deploying
okay that's depl our code so let me try an assess okay so let's move continue to to
dashboard and we can click on let's click on the so if you click on this part here team sync
we can access the you can also change the domain for this if you don't like just go into
settings [Music] domain you can edit this domain and change it if you want so I'm just going to
leave like this so uh this is working fine so the next thing we're going to do we're going to use
this domain to replace our EMV so I'm going to go into my back end so let me close this
going to back end EMV let's just replace Local 8 no let's cost 8,000 let's replace
this with this and also let's replace this with this so the client side we're going
to just replace this this I'm going to just remove this and I think that
is all so let's go ahead and um push this to our back end repo so I'm going to open
my terminal and let me close this let me end my backend server and let's uh get in it get
add and let's com this so I'm going to just quickly come that here so let me come the back
end okay so I've I've done that so let's push this before I push
this I'm going to just change the branch to main then add remote Orion
and once you've done that we just going to uh you're going to push this
here let's push the to and this should push yeah so this has push
I think the EMV oh yeah here so let me reload this
and we can see that our back end is been set so so let's go ahead and then do that
in render so I'm going to go to render and we're going to create a new service
so remember just make sure to log in into your render let me close this one and close
this one let's close this one yeah and there this is so let me click on new we going to web
service so let's wait for it to load so yeah they will ask us ask to select a GitHub provider so
I'm using my team with em this is now where I push the code and use public and let's see
if this will work but you can go ahead and just connect it direct you can go ahead and
connect because you've not connected to gsub to just connect with kop so let me
try and use the public repo and let's see if it will work so I'm going to just P this and
connect andless it okay it's able to get my my data the name of the
rep I'm just going to change it set to API D
team or team SE back
then I'm going to just scroll down to where we have main branch then this should be empty so
we need to change the build command from mpm store so we are using uh Ty scripts and you should know
that um production mostly we install only the dep dependency and we need to install the dependency
so it's not going to install the dev dependency because it's not going to that so we need to be
able to set the build that to to install the dep dependency so you can compile our typescript to
Javas script and then access start our Command from this folder so I'm going to go into this
folder and if not this sorry guys just going to par your dressing if you scroll up you should see
node this index. JX so this is what we're going to supposed to set here so I'm going to just copy
this and paste this here then here we going to have to replace this with this so I'm going to say
mpm install D production for so we're going say production to First and mpm run build so it build
our code then access JavaScript inside this folder so let's select free so select free services so
you don't get ACC to pay so here we need to import our envir variable so I'm just going to click on
ADD from EMV so I'm going to choose a file so I'm going to just import that for my back end
and I'm going to select the EMV and you can see everything as I'm going to add them and then from
the port let me just remove the port development uh we can s to production or we can remove
this uh let just remove this so [ __ ] to secrets so you can use the better secret
here okay uh Google ID Google client Google calll so we're going to have to we're going
to replace this with the um with the pass so that is going to generate for us so once you do that
you're going to reild this again the front region is correct the front Google callback
is correct so let's deploy and then let's see if this bu so I'm going to just click on deploy web
service and this should deploy your code so let's scroll down to see
the log yeah so it's running our Command you can see it's
copy copied our packet into this folder uploading build yeah build successfully
and then deploying our code so let's let's copy you can see the part here
so we going to copy this and let's go ahead and edit once it press F then we
go ahead and edit our our EMV so let's so you can see that it has connected to
mongod database so before we go to our client side let me open this and let's go into our
environment and let's SC to where we have let's look for where we have the [Music] Google I think
it's Google uh yeah Google call back yes so let's edit this so I'm going to click
on edit here and let me scroll we have go call back let's replace this with with the
new API render API part so you can see API team SE Das random number with onrender Doc
so we're going to save that and deploy it again so make sure everything here is
correct so once once we do that so let's save and rebuild this save rebuild and deploy so
once it is deploying let's go over to our client so let's go back to the log and let's
see you should see that it's going to deploy that so let's go back to V and let's go back
to settings go back to um project settings click on environment variables so what we're going to
do is let's add it by ourself so I'm going to put in the API API here the part API let's go to our
client and then let's go to EMV let's copy vit vit p URL so copy that paste this here and let's save
this and this should add so let's go over to um deployment
and let's redeploy this so I'm going to click on redeploy use no redeploy
and they should redeploy our code our Branch again so let's check our render if our Rend
is BU yeah so our service is live so lastly let's copy this part and let's go into our
Google cloud cloud console Cloud Google because we will not be able to access Google if we don't
add this new API pass so going to your team SE which you've created let's go into our API
API and services and um let me click okay think it is
here let me scroll let me click on the Side Bar and let's open this and you should see
credential so click on credentials let me close this and click on web
clients so once that open just scroll down to where we have this so I'm going
to add a new U so this is um a different one that I use I think I can remove this
one I think that is even wrong so let me just put this this new
one we did here and let me copy API Google call back and let's past this
here let's see where this okay yeah sorry slash here so this is it API or Google PowerBack and
let's save this and this will up so we can be able to access Google with this part this API
part so that has save so let's check our V our Vu has install as Play click on the domain itself
so now let's try and log so I'm going to log in with jundo let me get the password from
login secure password one two three so I'm going to paste it here let me inspect so to
make sure that all of this is working fine application and network so let me click on
login and it work it work great great great so let's check our application
and if you see uh access token is been stalled so this is it so let me click let
me change this to a different workspace to engineer core so I'm going to log out from
jendo I noticed I made a mistake in the part I use a different um Google client ID and um
I made a mistake with the do with the [ __ ] U so that's reason you seeing a difference I
was a different one so I Creed the [ __ ] Ur but the client ID is still the same so let's
just test that if I log in again with J do uh you should able to see the right
letter so if you click here you can see sales up and sales up should be the one that has the data
and then we can see cover data which we use and if you to engine should be the one that is yeah
so that is it so let me log out from gendo and let me try with the Google account so I'm going to
click on loging with Google and then this should just take me straight to Google and then I'm going
to just select an account and then you can see that as direct me to the current workpace you can
see that it works fine so so that is it for the deployment um so make sure to like share subscribe
comment your thoughts in description and also join the membership which will also which we're
going to see exclusive content the link to join the membership is going to be in the description
Click on any text or timestamp to jump to that moment in the video
Share:
Most transcripts ready in under 5 seconds
One-Click Copy125+ LanguagesSearch ContentJump to Timestamps
Paste YouTube URL
Enter any YouTube video link to get the full transcript
Transcript Extraction Form
Most transcripts ready in under 5 seconds
Get Our Chrome Extension
Get transcripts instantly without leaving YouTube. Install our Chrome extension for one-click access to any video's transcript directly on the watch page.