Build & Deploy a MERN Team Project Management App | Google Auth, Roles, Workspaces & Analytics 2/2 | TechWithEmma

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

YouTube TranscriptPreparing your results…

YouTube Transcript:
Build & Deploy a MERN Team Project Management App | Google Auth, Roles, Workspaces & Analytics 2/2

AutoDub

Video Transcript

Summary

Core Theme

Paste YouTube URL

Get Our Chrome Extension

Get Instant Transcripts: Just Edit the Domain in Your Address Bar!