📜 Transcript:
y how's it going everybody um so today we're going to be continuing along with the changelog application
that we started in our last live stream um essentially through the last live stream we got authentication set up and
we got our models rigged up as well at least anything that I think that we're going to need out of the start so
um so we can sign in I think it's user one and then um
ah all right well authentication does work I can't remember the um
credentials at the moment but we can go ahead and continue on with today's purpose of the stream and that's
getting a actual team set up after you uh register so after somebody signs up
we want to create them a default team that they'll be assigned to that they can add additional members to or invite additional members to
um and we already have the model for that set up but one thing I did notice
shortly after ending the last stream I set these two relationships up as many to many for our posts and categories
from the team but these should be belonged too you can see if we go into the category model we have a team ID and
then the same with the uh where's it post we have a team ID on here as well so those aren't minute to menu I
got lost to my head on that one so that should be a has many there so I'm gonna go ahead and fix that
right there and right there
all right so now that should be good um so the next after a user signs up so
we don't need to worry about login just the registration step we want to create
a default team for the user um so that would want to happen you can
either do it after we log them in or just after we create the user I guess
we'll go ahead and do it after they're logged in just in case any issue happens for whatever reason they will already be
logged in so we can do this in line or we can create a service for this I think I might go ahead and just create a service
for this so
actually let's go ahead and just yeah let's just go and create a service
book so app file services
team service TS export default class
all right and I'm going to put a public make this static async method and we'll go ahead and call
this uh
stub default team except in a user
and I think that should be all that we need so we can do const
team equals await team dot create
let's see I can't remember what all properties we have on here but um just name this your new team
and I think that might be all that we need to provide out of the get go for a
default team oh we do need to set up the slug so in order to
create a team we'll want a generic slug to also be generated so let's go ahead and pull in
uh Adonis logify for that so slugify
or lucid slugify and let's get that rigged up so that
that automatically does that for us so I'm just going to copy this jump into my terminal which opened up on
the wrong screen right here okay make sure this is the right project yeah
cool let me paste that in there we go working on Windows all day
so I put the Ctrl C instead of or control V instead of command C and I put
down a weird 200 for whatever reason all right now we need to configure it
foreign so that should be all that we need to do there
then let's see it looks like we just need to import it so I'm just going to go ahead and copy that line right there
uh DB increment would be the strategy that I want so we'll go ahead and just copy those there as well
um so let's paste that import up here at the top and then
copy U H all right paste that right there
and instead of looking at the title that will be name and that should be all we
need to do there um doesn't look like that's picking that up let me try restarting the
typescript servers there yep cool just looks like that's good now let's go and boot the server server back
up
already so our server is now back up and running so it should be good to go ahead and
well we didn't actually create it yet so let's jump back into our team service here and finish what our thought was
so name seems to be really the only thing here that we have we'll add in some additional details as we go so we
should suffice by just providing in a name here and we'll just set it to your default team
that should work for now and then all we want to do is assign the user the team so actually I might create this a
different way so let's do constant team equals awaituser Dot and then let's grab the related
teams property off of it and just create it off of there that we won't need to worry about creating the relationship just whenever we create the actual team
that will happen your new team okay
and all right I guess that's really all that we have going on there for right now so let's go and just return back that team
and we don't need to wait um I imagine we will expand upon this further which is why I went ahead and
put it in a service so and we can just await
teamservice dot stub default team provide in user
and now we should have a team created whenever we actually register up a user
so if we go ahead and register up a user so sign up username
let's do me
and okay relation team user does not exist
oh it's team users yes so let me go back into the team
and on users let me specify the pivot table
as team users let me copy that configuration there and
paste it for the user as well on the team relationship I think I might also need to do that for
the we have another pivot table for category and posts so we'll do that there as well
um right here so pivot table
and uh category posts I think was the name of that one
so it's just looking for a singular name and I name that I'd name them um plural I get that right I think I got that
right okay and we need to do that on the
inverse side of the category there as well so we have the belongs to maybe I didn't
register the oh posts it was the post not the category
no maybe I didn't register any other side of this so we have posts for category posts
on the user um
yeah I think I'm going to put that on the team it's kind of out of it when at the end of the last stream
so okay that does look like that should be on the team instead
no that's posts I'm out of it right now by trying to put that on there
all right so should that even be a many-to-many Let's see we have posts
there which has a user ID so no it should not so users this should be a has many
there we go alrighty there we are all right so then
I'm looking for the category post so that would be on the posts and all right that's a relationship I
just didn't create so there we go so at Mini too many let's go ahead and Define this we're on the post right now so that
would be to the category pivot table
category posts public uh on posts that would be
categories mini to Mini type of and that would be category
all right I'm assuming I probably didn't um do the inverse side of that either correct so at many to many
post pivot table
category posts public posts
many to many type of
post okie dokie so should we get there
um let's go and try giving this another go so insert into team user so that should
mean that our user created but the team did not
so
if we try to redo that we're going to get
yeah let me just go and delete that record out probably be good to also put that in
a transaction Maybe
still getting that issue let's see insert into team users column team ID of
relation team users does not exist
team users okay
oh geez database migrations team users
it's there that I just not migrate it team users
I get I guess I just didn't migrate it all right let's go ahead and just drop the table and re-migrate it so
node Ace migration let's try refresh okay
so now we should be at a blank slate here um let's go back oh I gotta reboot the
server there we go
let's try this one more time
okay we still don't have a okay that's weird
team users we still have the relationships that we Define there
so why it has the ID
but not these
that is bizarre
relationships weren't fine for the category posts hmm
the team's table exists by the time this migration runs the users table exists the rules table exists
I feel like this is one of those things where I'm just different looking something but I don't know that's weird that the ID
and the created and updated I will get yep I didn't save
all right oh my gosh this is going swimmingly so far I can't run Dev
okay back to a clean slate here let's try this one more time
there we go remember to save your files
um so all right so we're back at the home page so we should now have our user and
we should now have that user with a default team and that user should now have a relationship record
um yeah the role ID is one other thing that we would want to apply into that because you don't want them to be just
they created the account they should be the administrator instead of just a normal user so let's go and take care of
that next so the default for that is to put them into a user so that if you bind any
future users they would be defaulted to just a basic user but if one's if a role is not
defined um let's see here trying to remember how you uh
create onto a pivot table that is
hmm
yep that's not coming into my brain right now let me go take a look
database orn relationships we are working with a mini to many
additional pivot columns yep we do need to add that into the relationship whenever we actually want
to go and pull it back let's see
might need to use um sink or the
apply I cannot remember it's driving me nuts that I can't remember
try taking a look at the reference here foreign
create ah there it is the second object
all right so that would be roll ID so I need to go
I can't remember if that needs to go in as a database or if it can just go in like this we'll try like this first
admin all right let me try using the command here to just refresh
foreign which database do you want to migrate
leave empty if using the default no okay cool that seem to do everything
uh Darius says hi Tom silent off is is selling off able to redirect to login
screen when guest is trying to get to a specific restricted page
um I would do a separate middleware for that uh so like
do do a separate off middleware actually I think one comes with Adonis so like with the default yeah right here so use
the auth middleware for that so you would just go into the kernel register this off middleware and then this has this reader redirect to just change this
to whatever your actual login page is and then apply this middleware to whatever protected pages that you want
and this will be what's in charge of redirecting them to whatever login page you have the silent auth is more just to
propagate any authenticated user you might already have on the session so there is a difference in purpose for
those being separated out all right so I'm going to go ahead and
give this a try again I can't remember if that needs to be roll underscore ID or if I can camel case it like this uh
with it being a pivot column that's where my question's coming in so I think I just refreshed our database yeah I'm
signed out so let's go ahead and try signing up again
all right yeah all right so it doesn't need to be roll underscore ID go ahead and refresh
again okay
come back into here let's go back let's try that one more time
I was sorry I slam the enter key um all right so we're back at the home
page so it seems like it might have worked let's go take a look team user roll ID of one so that did indeed work
so now the user is creating their account they're signing up and then we're creating a team a default team for
them and they're being sent to the administrator for that team so additionally what we would want to do is
instead of just making them ride or die with that default name that we gave their new team we'd want to take them to
a page where they can customize any of those teams details we'll expand upon this as we stream for right now that we
have is a name on there and then a slug so today our primary focus and then
we'll see how much time we have left at the end of the stream is to take them to a page to where they can update those
that name detail get the slug to where it will update with name change
um and then if we have time we will look at adding
in maybe a description or a bio and then Avatar depending on how much time we
have so let's go ahead and
take them to a new page that would be responsible for
editing their team so put this inside of a teams
directory here and we'll call this
Let's do let's do a singular page meant to update the team as a whole and then
we can add in an additional query string if you want to add in like a welcome message or whatever to welcome in brand new users so we'll do team slash
um edit so just make this a generic edit page for it
I'm going to go ahead and just copy a page that we have yeah this will work
or let's copy one that already has a four minute it'll be a little bit easier probably paste this in here
okay and then
we'll go ahead and stroll along with this so here we'll expect to have the team's
details so we can do edit team
team.name there as the title and then right now although we would have is just
the name field so we can get rid of all of those and just have the name here so name and then name would be name and
then we would also want to do the default value I think I set that up as a value here so we could do team.name
there and then I will go ahead and just set the action to an empty string for right now just so we can take a look at the
page and make sure everything's rendering okay and then update team there
give that a save we do need to register this route and rig it up to a controller
so route dot get slash teams slash
edit sorry ID slash edit
uh do we already have a teams controller we do
teams controller Dot edit as teams edit and then we'll want to put a
middleware on there so that only admins admins so that we can edit this route
but we'll take care of that here momentarily let's just make sure that everything's rendering up okay so far go
into our teams page here let's get our HTTP context uncommented public
I might recreate this as a resource I'm just going to go ahead and delete it
and recreate it as a resource that we already have all of those methods so Ace
make controller team
yes it is a resource there we go that's what I'm looking for so that we already have all the different methods that we
need there so edits the one that we're currently in so let's just grab view for that
um
foreign Edwin says hi Tom about the video you made on user roles the at if and the at
end can make the code kind of messy when you have a lot of user roles with
different screens is there a way to make that simpler I would need to actually take a look at
that and see um I I don't remember what exactly we did for that so
uh is there a particular page on that that's on probably the welcome page
probably
here yeah probably here um yeah you can simplify that
um that it really depends on what all
uh so instead of doing like a
is admin checked there I would extract it out into like a component and then
have the component render a slot that does the check for you
um I don't want to go into that and get too sidelined on the stream but trying to think if I have anything I
don't think I have anything like that so far but like so you do your If instead of a component that way you only need to
use one of these and then you can just do your component so it would be like at
uh roll check or whatever you call it and then you would have your at end for that
particular component sorry it wouldn't have a exclamation point there and then you could use the slots so at slot to
apply various different HTML for the particular um
role that you want to bind that to and then you can set that up kind of like case statements as well so if you need to show something for multiple roles you
can do that as well so that's one different way that you could take a look at structuring that that's what comes to
mind at the top of my head but if you sit and think about that for a little bit longer you might be able to come up
with something a little bit cleaner as well so uh hopefully that helps a little bit
if you render and then I named this teams edit I think oh and this is also
inside of pages so Pages teams edit okay cool that did take me to the page
so this seems to work all right and then we need to get the team um
I haven't used it yet but I have always meant to
there's a route model route model binding I can't speak tonight that we can give a go
so this will just automatically pull in our team here let me actually walk through this
just make sure that it's not going to take a second to bind
okay yeah let's go ahead and give it a go see if it works well it will work but let's see if I can
get it working why do I keep doing that foreign
can't get my key bindings right so I work on a Windows computer all day and I work on a Mac
for my personal stuff and it is so hard to train your mind to do one thing for eight hours and then to go and do
something else for another yeah no problem Edwin hopefully that uh
hopefully that does help you out not the best at coming up with things off the top of my head I normally have
to sit and think about them for a little bit all right so we have that installed
let's go ahead and get it configured all right and then just oh there
I'm just gonna copy copy it
all right there we go I did it twice to make sure I got the right key binding there okay
terminal is fine all right so server middleware looks like we need to do RMB middleware
so let me go ahead and copy that that is global server register
okay kernel yep right here
um yeah we'll do silent off before it there we go
all right and then
once we get that up I think since we do have the slug that we would want to look up off of
um we would want to go with we'll try about ID first just to make sure everything's okay so let's go ahead and see if we can
get it working so let's go into here okay good my AC just kicked on I was
making sure that the AC the heat just kicked on I was making sure that it wasn't getting picked up so let's apply bind there
and I guess I I think that comes in as the second argument so that would be
team there as team and then we can just apply that into the
page like so no need to query it ourselves so the way that we have that currently
though I believe we need to provide in the ID and edit and I didn't start my server
back up there we go I need to use the second
terminal for other commands Okay so
that looks like it can't find the route maybe I didn't save the route file
oh I didn't well okay yeah it is slash teams slash
hey there we go so we have our team so it is working um so what I want to do is swap the ID out for the slug
and then we also need to make sure that this is unique uh for the select
so we would want to
come in here or no actually I think it's the route well it's a model it's the model I remember
seeing it but let's go take a look and make sure that we get the right thing so it is
change lookup logic nope that uh maybe that was an interesting to scroll down a little bit
no I don't remember seeing all that scroll up there it is that's what I'm looking for right here the lookup key
just change that slug from the ID default so jump back into here and go into our
model scroll up to the top paste that in there all right so now that should look up off of the ID
another fun thing that might be good is to just instead of doing your new team just give it a generic random name
um I'm using something I'm using a pack package for that on
the addocast site sorry I didn't need to resize that so the fits
so let me go take a look and see what that package is uh that is in one of my services
and then identity search is on it yeah unique
unique names generator I cannot speak apologies so let me go ahead and install that I'm gonna
just grab out array of different uh generic names that you can give anything so
I'm going to go ahead and just let me go over here finally instead of restarting the server every time
tutorials this is changelog something there we go and
PMI there we go cool so
I'm gonna go ahead and just uh copy that whole import
and then jump over to the changelog app again and we can do
um naming service
just in case we need to do this for anything else down the road public
static and I have to assume that's probably going to be async um
get random name okay pop that import up there and then
I'm gonna just instead of looking at the documentation I'm just going to look and see what I'm using this for so
right here just passing in the dictionaries and okay so I'm just gonna
paste that in here be a little bit easier than digging through the documentation for that
and we just return the name there switch the length so this will be like
the word length I think and then the separator you can make that a space style capital I don't know whether or
not that's all cap or just Capital case but uh we'll do that all right looks like we have a naming
differentiation here I'm gonna go ahead and just get rid of that we don't need that just do some
random name okey-doke all right so that should give us a
random name so we can go ahead and go into our team service now and import
const name equals and then we can do uh what did I just call that naming service
dot get random name I'm going to double check and see whether or not that does actually return back a promise yeah it
just said well I think that's because I put async on it now that looks like it's synchronous so
I'm going to go ahead and get rid of the async and then we should get our name there we
can get rid of that value and
yeah so that's no that's fine all right let's go ahead and try that once more
just to see whether or not it works so I'm going to go ahead and refresh the
database and come back into our application come
over here yeah of course that doesn't exist anymore so it's not found
sign in sorry sign up
there we go hopefully I spelled that right let's try and spell password zero one it's so hard
um Okay so let's go take a look at what the actual name that came out for the team was
shrew martitta so yeah that's
that'll that'll work um cool so what we want to do is take the
users directly to well no I didn't finish my original thought which was to or yeah we did we did change that so now
it should be slash teams slash the shrewd Martina
Slugger whatever that slope value there is I'm going to copy that because I know I'm
going to misspell it come back in here so then we paste that in there and then we can edit and there we go so now we
just replaced out the ID value there for the slug and the route model binding is working just fine there
uh Darius says in your previous live we can see you are creating custom button
components I want to know if it was simply to use
bonjour BTM primary on htrs except custom components to save time and
perform um it's just so that I don't have to remember the class names and go back to
the actual documentation every time that I want to try and remember um and it's for things I mostly do that for
things beyond the button so like if you want variations so like is it BTM primary ghost or what what have you
um and then for inputs it comes in handy as well because you have some additional markup there but one thing that I really
like doing with my components especially for buttons is to have a base layer that
takes in all of the arguments that all of the different variations of the component might accept and then it
handles them so like here I have I think I might have done this off screen while I was trying to fix some of the style
stuff but it has an if href so it can accept a link as well as just a normal
button and submit buttons so if you provided an href it'll apply that button
class to an anchor tag instead of a button otherwise it will go to a button default default so another great reason
why you might want to do that as well so you don't have to worry about applying the same thing over and over again and
then if you go to do something with unpolly or whatever you can use that to abstract that away
as well so I I like it for abstraction because I'm a forgetful person and I you
know I admittedly whenever I go to think of a form I can't remember if it's
form control form input and then I either have to do a 50 50 guess and get
a probably come up wrong or something of the sort
so that's what the button looks like and then each individual one is just a simple it calls that base button and passes in each of the arguments so that
that's this type of thing that I like to do there and then for the form components that comes in even further because then you add in the method
spoofing on top of it so there's a lot of fun things that you can do with components to save yourself just time down the road just by the simple setup
that you can do at the very start of a project or whenever you're pulling a new component so I really like
componentizing stuff instead of having the actual markup all throughout so it it can be a personal preference it's
kind of like do you like Tailwind or don't you like Tailwind or do you like a bootstrap or don't you like bootstrap so
it's a personal preference thing but I like abstracting out components as much as possible so
especially if I know I'm going to use it more than once so come back into this page here
and so we verified that we got that working what we want to do is
allow the user to update it so we can do just basic update first and then we can start taking a look at making sure that
things are unique as they're typing so let's go ahead and get the update so
let's start with a route so route Dot uh we'll do a put because technically this
is an update and although we are only updating one property right for right now it will be more in the future so
teams um that should actually should that still be ID or should that be slow
I mean ID worked but yeah I guess that should still be ID
okay ID there
um and then that can just be like that teams controller
updates is teams update
give that a save jump into there and so the same sort of thing here we're just going to get the team right here we
don't have to manually query for it and then request a response be two things that I
know we'll need so I'm gonna go ahead and make a validator
um is validator we will call this team
I'll separate it out as a sub one separate one so yeah no actually just yeah because we'll
automatically well no yeah we'll do team update just in case because you'll want you'll
want to allow the user to add in additional teams down the roads instead of just being restricted to the single
team that they're automatically created whenever they register so all right here we have this right now
it's just going to be a name schema string it will be required rules
dot oh I need to import rules
okay that I'm going to apply a Min length of
this to and we'll do three and then rules dot a unique check here for table
that will be teams column will be I
the no no sorry that's a slug I'm thinking of the slug
we don't need to do a unique check it can be named the same thing as
another and then the slug of vacation will take care of DB incrementing it if it is the same as something else
so in length of three and then a max length I guess would be
although we need there max length uh what did I give it in the database we'll make sure that we adhere
to that teams name I didn't give it a links okay
so maybe maybe 100 because if it's any longer than that it probably won't run into display issues on the pages and so
that should suffice for right now for the validator it's not much but it's all that we have so const data equals awaits request dot
validate uh team update validator
and then team merge data
add a weight in there and we can just call Save right off of that and then return response Dot
redirect and we can either redirect them back to the form or we can redirect them to the team
display page that we don't currently have so I guess for right now we'll just do
the home page
actually we could yeah yeah let's just do the home page
for right now so okay so if we come into this form here and I change it to
something that I can actually spell um and then we hit update there
I it looks like I didn't actually update the post or the action
to match the route so let's go do that I did indeed not
so route teams.update and then we also need to
provide in the ID of the team dot slug
okay let's try that again
oh right it's a post so I can change this put or get that to
a put let's try that one more time
Okay so can't read merge which means that team's
not defined which means that it is something I did wrong with I didn't save
something on my checkbox let me go ahead and do that um teams controller so it means that
something isn't working here with that with the lookup so
should if it worked for the display it should work for that right
that's what my thought is so teams shrew margarita
put comes into here
we go into the routes I named it the same
hmm I'll try slug
see if it needs to be called the yeah I didn't think didn't think that
all right let me double check make sure that well yeah no we are actually on that page right now so it is indeed
working um so
um let me try the ID and see if the ID will
work we're just trying various things right now let's see if I can pinpoint what's wrong exactly
so we we did name the param ID let's try
team ID there
hmm
see what we're getting let me change back to how I had it by providing in the slog there
actually let me try it slug there as well and change that before I just changed it on the route
okay
see what we got
yeah it's undefined at least for that one let me change a bag to how it was
try that one more time keep going there we go okay
yep that's undefined too interesting
um so I added that in
see you gotta read so they recommend using the model name
as a route param because we're no longer dealing with the ID which makes sense
so I guess this would be team and this would be team
I don't know why that ID one works for the get though but see if this works first
oh wait why is that an ID did I change that
no I have it as slug why is that 90
now there we go hmm
okay I might dig into that in my non-streaming hours so that you're not
just seeing me going back and forth going huh um so let's just go ahead and um
try one more thing there let's try the individualized one yeah okay
okay make sure that the team exists but yeah it does your opponent didn't explain it
on the page so all right so okay I'm gonna replace this with just
slug I'll Circle back I'll Circle back on that
and so then we can get params there and const team equals await team Dot
find buy or fail slug params slug
now if this doesn't work then I need to just go to bed
okay there we go all right so let's go back and let's change this to actually
something else and I will dig into why that route model bonding there was not
working for me what I did wrong I'll figure it out and let you guys know in the next stream that we do um
I need to do a lesson on that as well so um yeah so now our team name should be
Auto casts and it would be great to actually display that somewhere so why don't we add in next to this change log
a little slash and then the team name there
so it would be in the header and this is one thing that I updated so I changed it we just had the change log
over here and then the buttons over here on the right hand side um I figured you guys didn't want to see me mess around with the header so I went
ahead and just did that off stream um so we have now a mobile and a desktop
version as well and I just need to find where the
actual change log name is I think that's on the mobile one we'll just worry about desktop
oh you know what mobile and desktop probably is the same one
yep okay cool so that would be that so let's go ahead and just change this
to a div class Flex um it should probably actually be an
inline Flex so that's not taking up too much of the box and then we'll do just I'll change that
here momentarily but for right now we just do a basic slash and then we will do a button
drop down to a drop down button so we come into
our components here I don't think we've done a drop down button at all yet no we have not so let's go add one come into
here I'll need to find it
right there alrighty go ahead and copy one
and let's do component new file drop downs slash
do this one as the base since it doesn't have a whole lot going on um
slots main actually I'm going to copy that oh it's just a listing a okay never mind there's not much there
um and then this will be the trigger so we'll do
slots Dot trigger and we'll actually wrap this up so at if
slots dot trigger at else at end if
so if we have that slot then we'll use the slot otherwise
we will just apply in some Trigger text so that should suffice
for right now come back into here
and let's do at
drop down stop base trigger will be and then we need to
actually use add the team name so right now just hard code some team at
and and then inside of here as the options what we would want to do is list out any
additional team that the actual user might belong to as well as give them the
option to create a new team
uh Darius says the sign out route why do you choose get them post or delete to prevent csrf attack
um
no particular reason I can change that to a post it's a good point
so we can go into the header and
then on here change this to
a button type equals submit
and the button
for post action route off
I can't remember if I called that logout or sign out
now I don't have csrf enabled yet on this so I can't do csrf on it but
actually let me look and verify because I probably called it sign out let's sign in and all that stuff yeah call this
sign up okay
and all right looks like I got a rogue end if
oh it's the um the drop down that we're adding I didn't no I did end it
oh boy where's my end if Rogue
okay so it does look like it's something with that hmm
that's forms there we go all right so let me try that
yep there we go thank you for that recommendation Darius
oh there we go alrighty
and Edwin says do I have to install both the Tailwind CSS and Daisy before I can
use Daisy UI components yeah I think Daisy's just like a rapper it will create actual classes
um
yeah so you'll actually apply daisy as a
Tailwind CSS plugin so I think at the end of the day they use like the uh the
decorators that Tailwind provides so like the apply and all that and then I use the theming system as well so like I
was taking a look at this earlier if you change the theme which they come with a number of different themes out here you
can apply that within your tail and CSS or you can change the colors manually within the Tailwind CSS as well so I
think it is pretty heavily bound to Tailwind um
but there might be a configuration where it works the same as something like bootstrap I'm not 100 certain
this is actually the first project I'm using it on so
that button looks big let me change the size of it see if there's a smaller drop down
I guess it'll just be the button wouldn't it
let's see
right here BTN
all right so that comes into the button
really small BTN smart okay
now that's too small all right let's see if that changed the size of the header at all
now I think the size of the header is staying the same it just looks really big to me because the screen scaled
okay all right so we'll leave it as that so that the text is the same size all
right so next I wanted to take a look and see how the
different options looked for the drop down so I saw a little further down here there was an option to have grouped
stuff maybe it was this one no um I know I saw it
drop down right line drop down left all right well if I can't find it then I
would just put some basic let's put some basic stuff in there first
so um it would be header and we don't have
this route created yet but we'll put it in here so that we know that we need to create it and that this is where it goes
that's the wrong thing up here
create new team something like that
so boom okay
and so if they had any other teams that would show up down here and now we need to actually propagate the team in itself
throughout this as well so there's a couple of different ways that we could do that I tend to do it via
middleware so I'm going to go ahead and create a middleware here
and let's call this
App State okey-doke
let's go ahead and configure it um we'll put it in here as a global
and we'll come in here and just limit it to get requests so we'll get it
or get request there and so we can do
since we're just going to be sharing stuff to the view we can do this after next I think that I think there's any reason to do it before so method request
Dot method to get the method if
method equals get I think that comes in as uppercase
well we'll make sure so if method equals get or if actually
let's make that a little bit cleaner and do does not equal get then we'll just return out
um
exit if not get request okay and then down here we can do Let's see
we will need so then it comes time to think how do
you want to persist the user's currently active team and
that's where you would probably typically hold it within the URL you
could put it in the session if you wanted to but then you take the ability for the user
to say here is a link to something I'm looking at on this specific page
and then so long as the user is a member of that team you can just copy the URL and paste it to them so they can go directly to it so that
the heck did I just click on that's oh
I yeah all right Tailwind hides the classes and I guess I clicked on something random here
um all right so yeah so now we want to house that
um I didn't think about this before I started the stream on how I wanted the
do this with y'all but uh let's see here so we can do another middleware that
verifies that if they're authentic so this is where we
would want to separate out the app from like the welcome page so like we will do an actual app home page here
and we'll do Global here so route dot get group sorry about that group
prefix this with the
team ID
is app and then inside of here we'll have these
individual URLs and we'll also want a home page so route.get slash
and then I guess we'll call that dashboard
controller so make controller dashboard I can change it later on if
that's not the name I'm wanting to go with since I
didn't put too much prior thought into this particular portion of this so public
async index HTTP context contract
okay you turn view dot render
Pages slash dashboard
and we'll just have that be an empty page there but we won't provide anything to it right now and then here we'll do
dashboard controller dot index as
dashboard so now the whole app path would be app dot dashboard
app.teams.edit app.teens dot edit or update um and then we actually need to go and
create that app page and then go through and update the names of any routes that I already put in here
actually I don't think we put any this is a really long tangent from the original Quest that I started on to
actually just take a user to the edit page after they've signed in after they've registered
doing a big old Circle here um I just realized that's what got us on this tangent so okay
So within our Pages we'll just do a dashboard.edge and I'm just going to copy what we have in the welcome page
and then I'll just replace it with this as your dashboard or something like that for right now um I'll need to think through what all we
want to put in there so H1
your dashboard so that we know that we're on the dashboard page there cool
um and then um
so then see we run the middleware that's what caused me to create that so App State
so if it's not a get we'll return out if it is a get but there is not a
team ID in the params so let's also grab the params
then what we'll want to do is grab the user's last used or their first or just some team to send them to the way I've
done this in the past is on the actual user record I would say if their last accessed
in this case team and then save that into the record so that if they ever just came directly into the application
we just forward them off to their last used one instead of just whatever first one they have in their account so we can
do that here as well so user table Dot
this would be a relationship so we wanted to do integer
see what will be a good name for this last accessed team did I spell access right
there ID nullable because
there's a brief moment where the user has been created but the team has not
and then unsigned actually let's put that first
because it is a relationship unsigned dot references ID
in
okay yeah and then we do last access team ID on the actual user
so put that up here and column public last
access team ID and it's going to be either a number or null
and down here that's going to be a belongs to
and that would be a team I don't think we'll actually ever preload the
team this way well actually yeah we could probably just reach right through it to get it so I take that back
nevermind team and then belongs to type of
team and we do need to provide the local key for this relationship I think
is local I think no
I think belongs to the one that's normally backwards with how I with how my brain thinks anyway
um so and then we just need to provide in the table name for that the table column
name for that so that b lessed access team ID
oh shoot that is Kim okay snake case sorry from the snake kits there we go just
punch my mouse give that a save so that should I think work and then after
they authenticate I'll come back into this and they stub that default team what we can do there is take that team
ID so where do we have that return right here so const team equals
a weight don't forget the await and now we already have the user so we can do
but wait dang wait user dot merge
and that last access team ID as the team.id so that
that since we're going to take them directly to that team after they've uh signed up anyway
uh we just set that automatically to the last access team for them give that a save and then we can return
that team back okay
so
home no longer applies we want to instead take them to that we can finally do it the edit page
for the B app dot teams dot edit
and the ID for that is
I gotta get the team back from here so constant team equals
team.id er no sorry it is Slug
give that a save and then we can jump into
foreign query
Qs Qs so let me break this down because it's getting ugly
we can provide some query string in there so that we can inform ourselves this is a brand new user so that we
could display some message like welcome set up your team account or whatever
and then uh trying to remember if I forgot anything in that yeah the App State
so I don't think this particular trick to make sure that we have a team
in the URL should be here I think it should probably be in its own
middleware but we can go ahead and add in what this one was for which was to do const
team equals await team Dot
find by and since we want to ensure that there
is a team we can do or fail there I think that should work params Dot
team and I call it ID but I think we'll change the name of that to slug
okay and then we would want to do view so we'll grab view out of our HTTP context
as well and do share
the team and so now we'll have the team accessible on our page
so we can do
trying to find it oh that's the right here
team dot name as the trigger string give that a save and
oh right okay
all right let me make sure that we're getting a team coming out the header
oh yeah yeah of course doesn't exist it's not in there
all right there we go so now we're getting the row not found here
so let me go check and make sure that the foreign
's working all right so
give that a save back into the browser give it a refresh let's take a look at the terminal
and it is there all right oh never change slugify to update the slug
so it's still that really weird string I bet you really weird string true Margarita
Martita I just can't say it it's not weird I just can't say it all right
so yeah so we do we do want to update that as well so instead it's this so there we go
all right still getting undefined there though
okay so we can give that a go and
try getting rid of that yeah I think so
all right foreign
what is my brain missing here
let me back into our layout let me comment the
header out all together let's go into
our dashboard
oh yep okay
that is my bad we do need to do this before next because after next The View has already been
rendered so apologies about that
let's move that up let's move this up and then instead of we'll just flip the search or this here
so that it contains inside of it so instead of returning there we'll just
propagate that only if that's in there
okay and change that to an equals
and now there's our team okay my goodness
so if we go back into our main page here
there there we go now it's up there man sorry about that
foreign Journey there
so okay so our slash is definitely not in an
appropriate position but we do have our um new drop down here to where you would be
able to create a new team which will do at a later point in time right now we do want to get that uh slug up here to
where it will update with the change and we also want to add in and edit
see where we're at a good place to put that be inside of here or over here probably in like a
hmm well let's actually re let's finish our thought with that
redirect first so creation refresh
yeah that makes sense nowadays migration fresh
oh oh that was a running error okay
because the team does not exist yeah that that makes
sense as well
hmm just full of brain farts tonight let's see here so I put that on the T on the user
maybe I didn't uh yeah
maybe I don't usually make it a foreign key
no I think it's usually an alteration ad yeah so instead of adding it in here let me
do an alteration ad that way you can still have the form key because the table will have been created so make
migration users add last
team
okie dokie there we go and we'll just drop that in there so now it will be an alteration ad
um and then we can go ahead and table dot drop
foreign
table dot drop column
all right give that a save and I guess we don't need well I yeah I already
tried I already dropped everything in the database so let's just go ahead and do node as migration
brush just to drop everything and rerun okay there we go
so now on our user we should have a last access team ID on there that we set to
the actual value after we create the user and then we'll do that in addition anytime that they switch whenever we get
to that point in the project um so if I refresh here we'll be logged out
and actually I will get unable to connect because I forgot to restart the server
okay so now if we refresh okay we're not found because we're trying to find this true Martita
here we're going to find buyer fail because
of that App State middleware we want to limit that to just here so instead of
making that Global I'm going to change out the name
so put an app state that way it doesn't run on any of the authentication or anything like that so we'll scroll back down to our kernel
take that out of here and scroll down to the name middleware
and give it a name App State in there
there we go why are you giving me squigglies
oh yeah okay
so now we should be able to refresh here again and we won't get that fine by our fail because that middleware won't run
but we do we do get that because we're not logged in and we don't have a team set up so we
can go into our header and where we have this
we do at if user
and well yeah just for safety sick let's also do in team
yeah so give that a save and now that should do that and then once we get going these
here will also we won't want to show we'll just want the two
um so we can wrap this in an if as well
I think yeah I think I got everything there I think we'd want to leave the nav bar Center I imagine that's probably
needed to justify between um so we'll leave that there
so if auth user and if
give that a save and then while we're here we'll go ahead and do the mobile version as well
yeah there's a UL end right here
okey-doke wow the stream went on longer than I thought I was going to do 90 minutes but
what are we at now I don't know where to find the time I don't remember when I started uh okay oh
there it is oh okay I just don't know time we're at an hour and 22.
so um well we'll finish all of our big
circle here so that we at least have a concluding thigh here at the end so okay now if we come in here we just have the
sign up sign in if we go ahead and sign no we need to sign up because I
just finished migrating the database so we can go ahead and do this we should get taken back to the edit page for the
new project that we're about to be created so let me go in here
uh shoot can I make route URL team slug param is required that's right yep it is
auth controller I'm gonna have to look and see what I did in my other project where I
have something very similar to this setup to so that I didn't have to um apply
this parameter over time or maybe I didn't I just don't remember but I don't I don't feel like I am team Slug and
this would just be that team dot slug that's repetitive isn't it all right
well I guess we could take those out of that
App State since those would be specific to
nah we'll go ahead and just leave it in because then we have the team slug to return them back to once they're done
with whatever well no you would probably want to return them back to the team that they've just finished editing so yeah we
can take that out that makes sense all right and then after that put we
will return them back to whatever this team page would be um or I guess it would just be this dashboard here so
let's go and do that before I forget so in here return to
route was it just that was just that app dot dashboard
team slog it's team dot i sorry team dot slug
okay give that a save so now after we update we should be taking back to that particular team's dashboard and now for
the auth the redirect here we just want to return back team.edit instead since we took
that out give that a save
all right jump in here
okay we're gonna run into an issue because that already
yeah I'm gonna I'm gonna refresh because I want to make sure that redirect works no I don't want to open affinity
clicked um okay creation
refresh there we go
okay come in here go back to sign up no I don't want to resend sorry but I want to go back
instead okay nope that's
I misspelled it there we go
oh I caught it team okay so we we okay I see it yeah open the URL we did get redirected to I'm pointing to it I need
to hoverboard we did get redirected to the right URL there so everything worked there we even got the new user query
string um the issue is just within the uh where I was messing with the uh route model
binding down here so we need to jump back into the team edit so team slash
edit and change this to slug and that should fix the display issue
there there we go all right I think we're almost at the full circle we do need to change this so
that whenever you edit the team the slug updates as well so I need to that's not that one that's
this one um updating slugs
yep
gotcha yeah that does make sense because you know if you change the slug name then it's going
to um so maybe we added an additional field to allow them to update the slog that way
they have you know the manual ability to update that
so we can add in at inputs text
actually let's add that in as a checkbox to update regenerate slog or something of the sort
so at inputs check box
label regenerate slug
name
well actually it no I don't know whether or not this package can support an
on-the-fly termination on that because it's just right there within the
slug of Phi
I'm sure it can but I don't know whether or not I want to sit here and dig through the documentation to figure it out at this present point in time
yeah why don't we leave this slug as is
since in most common cases well yeah you do want to change it on the very first one though
mm-hmm
I'll leave it as is for right now and I'll think about that we'll come back to it in the next lesson Earth next stream
um the issue I'm thinking of is so we've generated a name for them automatically
duck taiwania and so it got a slug from that
do slugs really even matter at this for the team I think so so
because you know you're going to have a public-facing page as well with a change log to be able to point people to it so
it would be good to be able to support you know your Brand's naming um
I'm gonna double check and see how other places support this and then I'll get back to it I'm pretty sure
manual field would be the ideal solution and I'll need to look and see exactly how Lucid sluggify would support that on
the Fly determination there might just be nullifying out yeah actually let's go and try that let's try nullifying out
the value first and then re-emerging it well that's not a not not that's a not knowledgeable column though isn't it
yeah but if you set at the null before you save it might update it we'll see
let's put it in there
all right let's give it a go sorry I Thinking Out Loud
it's probably good to do on stream but hopefully it all makes sense slow schema
string optional
125 give that a save and let's see what none of this would work so we'll come
back up into our team controller where we're doing our updates
so we have the data here
if data dot Slug and
then
yeah I think that's just the issue with uh so if we come in
I'm going to ignore that and just see if this works if it does then that answers the
question of whether or not package would allow that so
yeah yeah that worked we got redirected the DuckTales um so cool so
then the issue becomes do we just ignore that because it's definitely required but I
don't want to make it optional on the model and have it be optional everywhere
you know come through as possible team
yeah so I guess that would probably be the appropriate thing to do is to put that in there so that
because if something were to go wrong well if something were to go wrong that's
nothing gets saved between here and there so I don't think anything would go wrong
but we'll put it there just in case all right and so let's put a link back to editing
here I guess we'll just put that in that little header box for right now
something like that right Dylan's ID in it
that probably makes more sense to be on actual ID there turn that off let's go into the team
well I'm just gonna undo that there there's somewhere else that I need to
update that though is that here
okay and then come back down into the header give that a save
okay
now let's change it to something I actually want
and there we go Okay cool so we've changed the name and we've changed the slug
um let me sign out sign up with a different person and let's test that flow one more time make sure that we got
everything working okay there so um test user one
all right we got redirected here um since we do have that new user query string we could add in some message
Barber right here and thinking about it so that is
um Pages teams edits
my brain got ahead of itself I was trying to think of what I would need to grab to get the params
let's see so we have at if
I feel like you have the route data I think that's a thing let me go ahead and just inspect route
so we get oh function yep oh yeah yeah yeah yeah
let's try request route undefined I know it's in there I know it's provided I can't remember how it's provided
let's take a look at the views and templates should be available in the globals or something of the sort here those are all the helpers
you get those I don't want to dig through the state
that's a mess to do that uh let's see we got the session flash route here we go
round options clear string yeah that's all for that function params
okay foreign
can't quite remember where so instead what I'm going to do is just
go up to the teams controller and we have it here
ah
yeah remembered it there we go that's what we want to do and then so we can do at if
um so I come back as an object yes it does very nice if
request Qs dot new user
um looks like we have alerts in here already let me see what the name of probably success oh I just put error in
here how fun let's go into our alert
yeah we can do this one copy that
alerts call that info put it in there
let's see if I kept that span on the air one that did okay we'll keep it true to
itself and put the spam back okay come back into here we can do at
Welcome to our changelog because I don't really have much to say right there for right now but there you go
and in the class name addition onto that as well so right here
last name and I probably didn't put it on there I did not
last name there we go cool so now we have Welcome to our change log
um
default team please
Bill three two update it as you wish I really don't
know I'm just spitballing so yeah let's just
that'll do for now um okay cool
so we have a little bit more going on here um in between now and the next stream I
will figure out what's up with the uh route model binding that I set up and
see why it's not quite working the way that I anticipated uh read through the actual documentation because I haven't
done that yet um so that's probably why it's not working for me so it's usually a good
indicator um and then yeah we'll continue on this with the next stream where we will start adding
in the ability to invite other people uh and all that fun stuff so thank you all for joining me with this live stream uh
thank you to those of you who posted your questions on the stream and I will see you all in our next lesson which
will be coming out on Sunday um it was meant for today but I stopped and re-edited the whole thing yesterday
and I wasn't quite done with it so I just had a little bit more that I need to do today um so it should be out Sunday at 9 00
a.m eastern time all right thank you all for watching and I'll see y'all later
Join The Discussion! (0 Comments)
Please sign in or sign up for free to join in on the dicussion.
Be the first to Comment!