Join me live as I begin rebuilding Jagr.Co with AdonisJS. In this livestream we cover adding the ability to sign in using either a username or email address. We also dig into setting up the ability to create, read, update, and delete our posts.
Transcript
Looking for something specific? Feel free to search the page for keywords to find a specific portion of the live stream that interests you most.
okay so i did a little bit of extra work not too much um since we last left off you'll
notice that the inputs um for well the input components are a little
bit different looking i went through kind of copied through my typical input edge component so it uses
alpine to kind of track the internal value and to be able to set max and mint lengths
for those values so that's the main thing this will be up
on github within the new jagerko repository if you want to take a look at it but it also sets you know if the type
is password it's going to allow you to toggle on and off the password settings so like for example if i have testing here we
can toggle it on and off things like that
so i believe that's the gist of what i've changed so far i also set up
the theme that i want to test out at least starting out for the code base so that's just all
tailwind changes so i just set brands and some default typography settings and
things like that but to start this video out i actually want to start with a comment that i got
on the last stream which uh danang commented
on the js framework can we use just the username slash password instead of using email password to log in
um yeah absolutely this is actually something that i don't have written up for the previous jaeger site which
there's no excuse for it because it's actually really really easy to add in so let's go ahead and add that into the new
code base so first and foremost we just want to go into config and then within the auth config there is this uids array
which defaults to email so this is what allows us to log in with the email so whenever
within our auth controller you know whatever we try to authenticate it's going to use that
uid array to check what the uid value is that we
pass into the attempt call so if we want to add
just the username so you users can just log in with the username then we would just replace email with username here
but in my case i'd like it to be username or email so i can just add username and email to this uids array
and now if we come back to the login and last lesson we created testuser1 and
testuser2 so
oh youtube's telling me i'm streaming in 4k which is not optimal but that seems to be going okay
um okay oh well we'll try it out we'll see how it goes um but yeah so test user one
so we'll just leave that as that um actually this input is an email so it
will block so let's go to the sign in here and change the input
type from email to text and then we'll do username slash email for the label there
and i'll still grab it the value on the back end as email so i'll just leave that as that
so now we have username or email enter
here's your name or email so now we can do test user one instead
of test user one on gmail.com and we should be able to log in now with just the email just like that
and we can confirm that using the email still works so we can do test user one at
gmail.com and there we go so we have that working
a-okay so that's really all that you need to do config off
add in whatever uid you want the user to be able to log in with now of course you want to make sure that that's going to
be a unique value on your database um so that you know
it's unique per user so that a user can't log into another account or get accounts mix match and stuff like
that so that's one thing to consider there um but
let me go ahead and log back in here
okay and since we have the basic authentication working now uh let's go ahead and start with getting
basic posts working so believe we set all of that stuff up in
the last lesson or last stream yep
cool cool cool so really all that we need to do is set up the environment to be able to handle that so uh what i like
to do is place everything admin based for stuff like this within a particular
namespace and so that could either be admin or if
it's going to be more than just admins you can name it something like studio or
panel or something like that i tend to go for studio so i'm going to
see all right over here on the right make a new controller so node is
make controller and then if i remember correctly you can just prefix your
controller name with whatever namespace you want to place it in so studio
and that would be like post controller so now this yep so there it created it within app controllers http studio post
controllers so now we have this nice new studio controller your studio folder with a
post controller within it and so now let's do public
async index and we will just return back let's see we're
going to want a view for this so we'll do view let me comment out the http
context contract there we go and for right now let's just return view
dot render and then i'm going to name space this within the view as well so this will be
views studio posts index so views or no sorry that's not
needed studio posts index and for right now we'll just pass
it an empty state so we'll define a route for that and
we'll name space everything within the route as well so we'll do route dot group
dot name space is studio sorry
use the whole path app
controllers http studio alternatively i could have
name-spaced it like this where it's app studio controllers but i i kind of prefer this approach so
that's personal preference and then i'm going to go ahead and prefix everything within this with
studio as well as studio and prefix the name as well
so we'll do route dot and then i'm going to do another group specific to posts
so dot prefix
posts as posts
and then we'll do wrap.get and we'll leave that blank um well all right up here i was doing
slashes on my other project i'm excluding the slashes but i i'll stick with slashes on this one it is a little
bit easier to read and since we have the namespace set we should be able to reference everything
just the same as though it wasn't in a namespace since the namespace is set on this group so
this would be posts controller dot index
as index
so last thing to do is actually set up that view so we will do a new file within views
this will be studio posts index dot edge
all right and uh let's do layout we will create a new layout for this
called studio.edge but for right now let's just do main
layout slash main there we go section content
and let's just plopping each one in there of working
so let's go ahead and test that out so now we should be able to go to
studio posts and there we get working so that's working all right
so next thing to do is to be able to create a post so
in order to be able to show our posts within our index view we need to actually have some posts so let's go ahead and cover the creation
so async create we'll want view for that one as well since this will be
viewing not viewing rendering the creation form
so there we go render out studio post create sounds good and then
we'll leave that as an empty state for now as well and i'm just going to go ahead and
copy and paste my index and rename it
to create and then while i'm here i'm going to go
ahead and copy and paste my main.edge and rename that to studio.edge2 before
we get too many files using the main layout so paste that in there
rename and instead of main we'll name that studio
currently there's going to be no difference here i'll go ahead and rename the title just so i know where i'm at
and that i'm actually using the studio one currently there will be no difference but there will be a difference later on
so i'm going to go ahead and make that file now before we get too many things relying on layouts main within our
studio so there we go so there should be absolutely no change
to this page all right cool and for our create page we should uh no
i didn't make the route4 yet so it shouldn't work so let's go ahead and make the route for it
brow.getcreatepostcontroller.create as create sounds good and you'll notice i'm not using a resource i tend to prefer to manually
define all of my routes again that's a personal preference i could absolutely just do route.resource
for posts here and it would work just fine just a personal preference of mine to
manually define everything and
let's see so now now that we have that let's go ahead and verify that that is working just before we start doing anything and
all right make sure that it is actually the create page by changing that yep okay cool
so now we need to actually start on our form we're going to keep this pretty
basic to start with let's see what all we have that is not nullable within our database
first so i'm going to just open up the schema structure within my database if i can find it so
posts and then change it over to structure
so title slug not nullable and state is not nullable everything
else is nullable so to start with i'm going to take care of everything that is not nullable so
in this case slug we're going to have as something that you can manually
define uh but it should automatically set if it's left empty uh title is
absolutely required and state we will set as a default if it's not provided
so we'll take care of all of the default states first
and then we will take care of being able to manually provide a value for those so
first and foremost let's go ahead and just get our well let's go ahead and plot an h1 of
something up here just so that we can confirm that that's the page that we are on and then we will have form
method post action equals
and we will do route studio dot posts dots
yeah this will be store we haven't created it yet actually we need to create it since we are referencing its path so we'll go
ahead and end our form here and go ahead and create that because since this route currently doesn't exist but we're trying
to grab it we should be getting an error yeah
so we'll go ahead and create that so that we are not getting that error there we won't do anything with it yet but it will exist so
public async not post store and again i could have created this as a
resource controller i probably should have but i didn't here i can
probably go ahead and just grab one of these
there we go okay so for this one
we will want the request and for right now we'll just leave it as that actually and let's just
go ahead and define the route for it so this will be route.post and everything there looks right so
we'll stick with that okay so now if we
go back to our page since we got an error we need to refresh but there we go we refreshed and we no longer have an
error which is what we want so
let's see let's go ahead and take care of the title well yes thank you uh co-pilot i do need to see our csrf field
so we'll go ahead and add that in csrf field
and that will add in a hidden input containing the csrf value from there let's go ahead and do
a component components.input
see label will be title name will be titled value will just be
flash messages dot get title in case something errors out flash
smashes it the old value will come back within the flash flash messages
and we can grab it using get title so that the value is exactly as we left it
prior to submission errors we can again get off of flash messages
this time at errors.title what else what else what else required
true these are all things that i've set to be applicable
on my input component so these are all things that are used so like um let's see we have a placeholder
i could define rows if it's a text area if it's not i can define it as a group
which will just place whatever i have in a slot of the component within there handles selects inputs
all that fun stuff max length min length um
arya attributes so these are all just things that are applicable to that particular component
and i think that should do it for right now
so we'll just save that actually we need a button so i'm just going to do a button type equals
submit
save post good enough right now save that so now we should have a form
with csrf field is not a function do i have csrf
enabled and installed shield
see is it csp no
oh wait a minute i think that was wrong i think it's
camel cased i think i think that's it
no okay i'm gonna go take a look at the documentation real quick
over here
yep that's how i have it okay so something in my project is
missing the csrf portion so i'm gonna make sure that i have
adonis shield installed and configured so
got shield config so it should be but we'll double check it um let's see nope not kernel where does that go down src
there's the shield provider
okay
let's see if maybe csrf token works oh need to copy that whole thing
let's just hit the copy button all right go back to here place that in there
let's see what we get for that
ooh that's an ugly form page that's all right we can fix it up here
in a second so yeah we get undefined so something with that's definitely missing
let's see let's see let's see
no dmv should not be testing
nope let's take a look and see if we're getting the cookie
nope all right
well for right now let's go ahead and just remove csrf and see if it even checks for it
so we'll remove that and then we will just check on our back end
to see whether or not we are getting our title so we will do const title equals
request only title nope not return title um
just console.logging out for right now
i don't have view plugged out of my http context here
view dot render let's see [Music]
hmm how do i go back nope i'm thinking about this wrong it's response dot
redirect back that's what it is
okay because for right now i just want to go back to the form after submission just to see whether or not we are getting the
title here or to see if we're going to run into a csrf issue
so refresh here post up testing okay
check out the console and so yeah so csrf just isn't enabled or configured
correctly so we'll go ahead and just move forward for
right now i will take a look at that in a little bit so let's see so we have our title
within here i'm going to go ahead and create a
validator so node ace make validator uh
post store validator
okay and within here whoops within here
let's go ahead and define the title
and i need to import rules okay
rules max length is what is my max length
100 okay and then
everything else we'll go ahead and define in here as well so page title description meta
description all are going to be pretty similar to this so
page title description
met a description the max length on those will vary so we have 100 for page title
and 255 for description of meta description so 100 remains for page title
i don't have commas so we get red squigglies let's add those commas in and then this one goes to 255 and this
one goes to 255. and let's copy that once more because i saw canonical as the next one
there is canonical then we have body which will not have a max length
video url which will have a max length of 255. so body schema string
uh and no rules for that one and video url
yes video url schema dots do we have url is that a
thing no that's a rule okay so string
yep rules.max length 255 rules.url
okay and then we have is featured in this person i'm going to
leave off right now i am not currently actually using those um view count is not something that
will be set whenever you create uh let's see i'm going to take the time
zone and publish that user and publish that get that as well actually i don't
remember what i was doing for that so i'm going to take a look real quick
okay so we have time zone is just a string schema.string
and then we have publish at
which is
dot optional actually all of these need to be optional
oh the afterthought okay and then we have let's see publish that
user all right let's just be published
publish at user schema dot and this one is just a
string okay and then i'll tack optional on everything but the
title
okay there we go um actually post type id needs to come
up with this too although if it's not set we will have a default ready for it so that will
just be let's see we should have an enum that i copy and paste it over yeah post type so
what we can do here is we can do schema.enum
object keys of that enum which should be post
type which will auto import and then
no not keys values there we go
thought something felt off about that okay so that should be good so also that needs to be optional
okay so now it should be good so we should be just fine just passing in the title everything should validate just
fine i'm not going to actually create this yet i'm just going to verify validation succeeds so we will take the
request dot only off and instead we will do const data equals await
request validate post store validator
and instead of console.logging title we can go ahead and just console.log data and redirect back so we'll come back
into our form send off testing again and validation
should succeed
the fact that we got to our console log actually did did we yes we did okay because i was last up
there so yes we actually have data with a title in it so the fact that we got to the console log means that the validation succeeded otherwise it would
have thrown an error and we never never would have gotten to the console log
so that all should be good we need to go ahead and take care of the
[Music] slug create actually we need to add slug into the validator because
we should be able to manually set it but if it's not going to be manually set then we need to set the default so let's
do schema string since it has additional hyphens and
everything in there i think the default for that is 150 or or 255 okay
so there we go uh and make that optional
okay so now if that's not provided then we want to create it so
let's see
looking real quick
looking looking looking there it is okay
so let's go into our post model and we can add a hook
onto the before create
and call this create slug
and this will take in an instance of our post
so if the post has a slug then we just want to return because we don't need to
do anything because we manually defined the slug otherwise
i'm going to install a package let's see what package do i use
slugify there is also a adonis package for sluggification um
i i i i'd recommend using that if you're just getting started
um i don't remember my reasoning for using this package but i'm going to stick with this package
so whatever that guy's username is slash slogify
and let's go ahead and well let's see if it'll auto import
no okay so import
slugify from
there we go
and
go back down so i can see how this package is actually used and it looks like you're just passing the value to a slogify method so we'll do const slug
equals yeah i don't think that's actually in there
all right and then const cur there's only one r in there and it
says there we go oh wait and
let me use the database module here query from
posts where
actually let's do a where raw
slug are like i don't know this might be
i'm pulling this off of my previous writing of the code base
so this may be specifically for
my sql but we'll see if it'll work if i can type it right zero through nine
nope dollar sign there we go so do i have that all right
yes okay
and then the question mark will be our slug
oh i got something wrong oh i didn't start the string it would help if i start the string
and then where did this guy come from
oh oh okay my bad that is a member of the actual
string so we need to wrap that in that there we go
okay and then that takes in not just a value but an
array there we go all right i think that's right
and then we set the slug to
occurrences.length whatever the slug is
whatever the occurrences of the slug are
or if there are no occurrences then we just use the slug
okay so very curious to see whether or not that's my sequel specific or if it will
work in postgres mainly i'm not sure about the r like i would assume it would be okay but we'll
see uh so that should now run whenever this is created so we should be okay to go
ahead and try to create a post record so we will do const post equals await
post dot create
our data and then
we will redirect instead of back
to route yep studio posts index
uh actually we don't need the post to come back so we'll just do oh wait postdoc creed okay
so let's test that out so come back into our ugly
post form refresh to make sure everything and yep all right what do we got here
oh no did i spell his name wrong
it did install yeah yeah installed okay
let's go back to our post model
all right let me take another look
let's see we have s-i-n
and i'm covering it up d-r-e-s
huh yeah got it right okay
interesting did i spell it right here
yep all right
[Music]
just try to just copy and paste it
here it is see if it did change at all
nope i did have it right okay well then let's take a look at the package maybe we will be changing packages for this
rewrite
go ahead and try to reinstall it using a copy and paste version in case i did spell it wrong
okay nope looks like it was installed
that does appear to be how i'm using it
let's go confirm
yep all right well it's on the arizona import so it wouldn't be how it's being
used
just to change the require of index.js so i wonder
i mean i am using a newer node version i wonder if the way that they're
exporting their package here is no longer supported
hmm
okay well let me go ahead and i don't know try to find a different one
it should work though i don't think anything should have broken between
this version and that version
did i save maybe i forgot to save
make sure that we're getting a value to pass it well it's on import so yeah but all right well let's see if we
get there for whatever reason let's try this again
oh right i just refreshed so yeah we didn't even submit okay
and it is specifically that package that's causing it yeah
yeah okay
uh let's see uh maybe i will just use the adonis version
see is it lucid slugify i think it is
okay
and let's uninstall you okay
all right and for the most part that looks like exactly what i want
so instead of doing this via a before create hook instead it looks like adonis will take
care of all of that logic for me which is nice and let's see that goes on the slug
not the title right yes okay so plop that in there i'll retype it
since it'll need imported didn't offer to auto import
outcome
all right let's test this out so testing save post
oh yeah all right so it seems to be working um or
at least we're failing out on a different error so state id
needs a default uh
so we can either do that in a before create i don't recall exactly where i
was doing it before
let's see i think i was just doing that within the data so instead of
doing this it would be what is that state id
equals state dot nope not is it state enums states is
it the stadium that i want here nope
it is oh i was in status yes it is states
sorry state dot
public is that the default one that i use um
let's see that'll do for now and then we need to spread our data so
now if state id is within our data it will get overwritten with whatever that state id is
um and so now we should be good to go ahead and retry this so since i submitted i'm
going to go back and refresh to make sure that i got latest
testing save it off and okay cool so there we go it seemed to have saved we will jump
into the database to verify that sorry i had to jump through some hoops
there to get it to actually go and so there our slug is populating we can go
ahead and test it out by trying to create another post with a title of testing to
make sure that it's doing what i want refresh oh yeah that's exactly how i was
trying to write it with the other package so that's that's perfect cool
all right so now all that we need to do is kind of fill in the void with all of these other fields
um yeah
so let's see let's go back to our post
nope that's the model i want the view post create all right
and let's make this a little nicer on the eyes so let's do
div class flex um
negative mx now let's do six
okay and nope nope don't quite paste yet let's also do flex wrap on that
let's do two thirds okay and now we can paste that in
and then we will do another div
and we also need a padding on these so px let's see ah three
okay and let's actually limit that to lg
no yeah i need to be in the crete all right
all right so that does need to be six oh that i need to change the negative
to three there we go all right
and then let's set
actually i'm gonna set yeah and we'll just leave it here right now oh
okay yeah that that works uh so i will move this off into
i guess the studio wrap it with the component
did i copy the whole class yes okay
all right cool so that looks good um so we have our title let's see we
also need janet
dog's saying hi did you write in the mic uh let's see
so back to our post create so we also need in addition to this we need to be able
to manually set our slug
so we will do slug
and this is not required so i can just leave that off
and then we also need to be able to do
our uh seo stuff so i want to put this in
what is it details i think and this takes
a summary
all right and we'll put these fields in here so we'll have two one well
really would be three i guess one for um page title
uh page title page title page title
one for meta description
and one for our canonical so can cool there we go
what yeah no that's the name and then actually for the meta description i want to change this to
type text area set it as rows of three i can't remember
what the default i set on that is so we'll stick with rows three um
and let's see canonical
canonical and then we're gonna need some kind of a wysiwyg editor for the body uh normally
i use tip tap um prefer to have more of a all-in-one solution as opposed to rebuilding it but
i might just copy and paste that over but let's go ahead and save this check and see what we got so far so we have
our title our slug search engine stuff goes inside of there i'm gonna
cut back on this a little bit so if we go take a look at
because i actually rather like the way that the post creation form is set up
currently so if we go into posts and
see i go to edit this one so i've got it to where
everything's just kind of cleanish um
and then yeah everything with the yeah so i might stick with this
approach
as opposed to for the most part we're sticking pretty
close to it it's just the inputs need a different styling um see i think all of this is using
inertia so this is all in view but we don't need view for this so for the rebuild i'm
keeping it nice simple and we're going to just sprinkle in
view where we need it let's see i actually have alpine all throughout here so maybe we can find an alpine solution i doubt that there's any alpine wysiwygs
out there though and tip tap is just in view all right
well we'll we'll move forward with just plopping things on here for now sorry i'm rambling
um so let's just outside of the details now
copy the meta description we'll just plot this in there as the body
for right now sorry no that doesn't need to remain text area
and replace this with a wysiwyg editor later on i need to find
one that i want to use okay and
i believe that's oh yeah no sorry
so we have a meta description but we also need the actual description so is that description or is that summary
that's description okay so i already have the meta description
copied so i will just paste that in up here
that is also going to be a text area and just get rid of meta
okay
there we go um put some spacing on the details here
there we go that's a little bit better and then off to the right hand side i'm going to skip over the
thumbnail input but i will go ahead and keep the video url over there for right
now and then i think i might go ahead and copy this input style for this so we'll have a secondary input
component of some kind to mimic that style so
let's see go ahead and copy one of these
and paste that over on the right hand side so this one will be video
url
and to demonstrate the purpose that i have this flash messages get the name
here uh if since our title is required if i leave the title off and i just
type in some stuff in these other fields
right and i go ahead and save what will happen is the validation will fail and it will redirect back with those
these values that i already have propagated within the flash messages so all that i'm doing is getting that value
out of there and reapplying it to those fields so if we hit save here we should come back to the page exactly as it
appears right here and there we go so that's that's what that is doing
right there so this little value setting of the flash messages
um all right so it's not pretty but it should
allow us to do everything that we need so far so we can do this as test post i should be
able to manually define some slug here and not have it
be auto set although i actually since i'm not the one that's doing the
slug validation anymore i don't know whether or not that will actually work but we will test it and see and then i'm just gonna yeah that works
for the description body and video url um actually
i already have a video open so let's why not just go ahead and copy that there we go all right so let's save
that seemed to work we'll get those listed out here in a second refresh this so
awesome yeah so the actual the actual slug so it seems like adonis's sluggify
package was doing exactly what i was manually doing which is super nice so if the slug is provided it remains
as you provided it if it's not provided then it will auto increment with a hyphen and the version
uh and then we got oh i forgot to expand my seo to test that but we got the description the body and the video url
set as we set it as well so we have although it's not very nice we have a
couple of dummy posts here to go ahead and list out on our index page
so we'll just get that going with a very simplistic table and then i'll go in later on and style it up a little bit
so within our index well first and foremost we have to query it oh shoot i have no
modules open
okay so let's go ahead and query for it so within our index const posts equals
we only want the authenticated users post so we'll get off off
user and i'm going to put an authentication middleware on this here in a second
so authuser related posts
and let's go ahead and paginate it as well
see what's what's the first argument there is it per page or is it the page i think it's the page
that is my one gripe about github copilot is it kind of breaks the
tooltip oh well i broke it i didn't do query dot paginate so that is my bad
yeah okay so the first argument is the page i'll manually pass it in as one for right now and then per page
yeah yeah 20 is fine and then we can
either get this off of the query string or the params i'm going to go ahead and do the
params so const page equals
params.page otherwise one
and pass that in as page there and then we will return back to our view
e posts and then i'm gonna go ahead and add that optional param
onto the route so here on index we have the optional param
of page and then i'm going to do where page
route matchers and number so that it validates that it's a number
and we'll actually cast it to a number for me within my controller so that should all be good let's go ahead
and plop it out on our index page just to verify everything so i'm going to put this
inside of a pre okay
and then i'm going to do inspect and
adonis passes everything to edge unserialized whenever we're using it
like this so i'm going to go ahead and do posts dots
serialize so that i only print out the actual data that we get
[Music] oh no my bad all right let's try it just as posts first
oh i killed it
there we go all right yeah so we're not getting back our posts so i did something wrong on the back end let's go see what i did wrong
okay let's try taking the paginate off
it could be how i have the relation shut up set up sorry can't speak
okay that seems to be getting it
so let's go ahead and take a look um instead of getting back oh i don't have a weight that's let's see
and the reason i noticed that is because i'm still having an instance of the connect query object here not an
instance of my posts so now that we have the await there if we actually take a look at what we get
back okay that's fair
so i have something set up with my relationship wrong
relation post user does not exist is that trying to use that as a table or
a column as a table so let's go back into our
models take a look at how i'm defining that relationship here
so user to post is a many-to-many relationship via the table
author posts so yeah that's absolutely wrong i forgot the outcome so for one we're calling it author post
or our authors on our post so we need to set that so not table name pivot table
is author posts yeah yep
and we need to do that on the inverse side as well but first is there any pivot columns no oh author type id
i don't remember why i put that in there but all right we'll go ahead and
type id so now we'll copy this and let's define that on the inverse side as well
so over on our post let's find our authors there it is
okay now let's give that another go
that's fair so we created the posts
but we didn't assign the posts any authors so we also need to do that so i'm going to go ahead and delete all of
these posts here well now let's leave them here for a second to verify that they don't come through whenever we
actually do query for the actual authors so what we need to do
is within our post controller whenever we create
and i can either do this on create or i can do this just within the creation logic i think i'll go ahead and do it
within on create because we always want it to happen on create
so before create public static async
set initial author i guess set off and let's
just do set author
right that will take back the post of type post
post there no this needs to happen after doesn't it
after create since we already need a post id
uh to assign to the mini mini relationship and let's see i'm also going to yeah so
let's not do it as a hook i also need my authenticated user i could pass that
in um but at that point i would feel better just not having it within there
so let's go back to here on store
let's do our const post equals await and then we want to grab our auth from here
and we can do the yeah that looks
is that right that looks right no it's not right off user i think that
needs to be related posts
all right attach and attach ticks in array
so now that should be good i believe so we need to go back i'm gonna go ahead
and just plop a button on here so i don't have to keep manually altering the url
a href route studio posts
create
okay now we got a button all right so let's test this again
test with author and go ahead and just type something in
there type something in there plop something in here
and save all right so now we came back to our index page and now we no longer have an
empty array so we have something coming back and it looks like it's our test with author so that is working
as we'd like and we can verify that in the database for sanity's sake and there we go
so instead of just returning back an array of all
posts let's go ahead and paginate with the page
and we'll manually set the limit to 20. so now this will be
slightly different i believe
well once we serialized it would be but yeah so paginate still applies the attributes
and everything on there but we can also reference everything via rows and then somewhere on here we should
have yeah our pagination data so there we go
so now we can go back to our index page and get some kind of a table going on here so
let's see
just do title for right now
that's the wrong syntax but that's pretty close stick with it
okay for each
post in posts instead of doing dollar sign posts we want to post that title
and we can also do rows there as well if we'd like so
yeah okay that way we're using the paginated data so
nope what do we got wrong reading title
i think this is each isn't it
co-pilot was more wrong than i went on to believe yeah so there we go now we got that
working so we can get rid of our inspect and i did not end the table
okay so there is our junky table telling us that we have
a single post to this author so let's see what else do we want to be on
here we do the author we can do the status we
can do the type number of views the publish date so we actually need to add the publish date
into the form as well so let's see so
go ahead and add this stuff here first so yeah we can put the slug underneath the
title so here we can do the title itself
is an anchor
and this will go to the edit so route studio
posts we haven't created it yet so we're going to get an error here for a little bit but we'll do edit
and then this takes in as the post.id
and then underneath that we do another anchor that actually goes to the uh
actual post itself which we don't have this route created yet either so i'm actually just going to leave that as an empty anchor
because we're not quite ready to get to that yet and this will be the post dot slog that
renders out in there so go ahead save this it's going to cause
an error because studio post edit doesn't exist yet but we can go ahead and make it exist
so let's say we're going to want view and params
const post equals awaits
looks good to me return view dot render
studio posts edit and of course i could do this in a
single view so it would be like add or edit um
which actually yeah let's go ahead and do that
add or edit why make things harder for yourself right
so it should be good to go ahead and save that let's define the route
so route.get posts this will be the id
oops and edit or do we need it is anything
else going to live there and we'll leave edit in there okay and this will be posts
controller dot edit as edit
go ahead and clean this group up here so far
okay
we'll leave it there all right and then we need to alter the view name for our create
from just create to really should be creator
edit yeah yeah i like that better than add or edit it
fits better with the naming so let's go with that and then on all of these
where we have the flash flash messages that get um
we also need to just try to get it off the post as well so
let's see what so let's see we could do a turn area i guess since i already have this
defaulting back i let's see do i need that default because then we could just do
does the post internally default to an empty string or the input internally
yes it does okay so we should be able to just do
post dot well i'm gonna actually leave that empty for a second here just to test so let's
go back into here refresh let me fix that error should be
able to go into the edit okay cool yeah so it comes back and we don't get any errors about well let's
open up the terminal i guess to make sure there's no javascript errors either
yeah cool so it should be good to go ahead and add in
post dot title otherwise that let's test that out so
whenever we're creating post won't exist so i'm going to place a question mark here so that we don't get an error
whenever we try to reference title and if post.title does not exist and it will fall back to trying to get the flash
message i really cannot say that word and then if our flash
flash messages don't have the title on it then our input component
misclicked will check for that and it will default its internal value to an empty string if
a value is not provided so that's the flow going on there so if we come back into here
bam there is our post title so now we just need to do that for all of the inputs
so post slug that should allow us to alter the slug
if it did not get created to our liking or if for some reason we changed the title and we also need to reflect a new
slug for that post dot description
post dot page title
i forgot to do the question mark up here
post dot meet description
meta meta description there we go
post dot canonical
post up body and [Music] post dot
video url and just like magic there's everything
within our form so one last thing to change
the submission so first and foremost i don't believe by
default the um what's it called um
uh method spoofing is i don't think that's enabled by default let me see if i can remember where that is is that an
app yeah so i'm gonna allow method spoofing
set that to true so that i can do underscore is it a single underscore
yeah underscore method uh as a query program on the url to define that it should send up as either
a put or delete on the form um so that's what that's for so
instead of just doing route post store we could do
a store or update here but i'm going to keep these separate because i feel like in the end once i'm
done with everything the difference between storing and updating is going to be great enough that it deserves a separate endpoint
as for the page that's going to be pretty much similar for both so we can use the same page for that so
let's do post if we have a post then we're going to want to update actually let's do post id be a little bit more
specific so if we have a post id studio
posts update otherwise go ahead and use store
now in addition to this let's also add on a query string i've
i've never done it adding a query string like this via the object so
bear with me here for a second let's see um
actually let's clean this up even more let's use an internal edge component or not
component variable so at set
action post dot id
no it's defaulted to store
trying this out too i've never tried resetting a edge variable inside of an if but let's
try so if post
id at set the action so change the action
variable to
route again i've never tried this so i don't know whether or not this will work so let but yeah you never know unless
you try right so query string and then i think we want no just one method equals
put so let's try that out let's see what that gets us
all right and then we'll plop action in there so give that a save come back to
here unexpected token something i got wrong writing it or is
it that it does not expect this
i've never tried the query string set in there so maybe i got that wrong so i'm going to try taking that off just to see
oh oh yeah no it does need the um the id doesn't it
so id is post dot id
all right now so it's at least getting in there um let's define that route
better define the action no okay let's go and do that real quick
so i want the response we want the request so that we can validate it
and want the param so that we can get the id i think that's it
so we'll do const post equals awaits post finder fail
for right now we'll just leave all of the extra data off of it like the um
like the images the authors and all that and we'll just update the post so merge oh we need to validate first so
here we go uh yeah we'll use the post store validator
up until it doesn't become relevant if it does ever become irrelevant
if it might end up just changing that to be post validator instead we'll see if it
can be used for both and then we will await
no post.merge i don't think that also saves i think
yeah no that doesn't also save pass in the data await post dot save to
save that and then return response
redirect to route the post index page okay
so there's a simplistic update so let's do route dot put
id posts controller updates as update
okay so now that route should exist
so we can refresh here and let's check out what the generated route for our action is
studio post 5. so this is working exactly as i hoped it
did cool let's plop the query string in there
nope i believe that goes in as an object
yeah something like that it starts with an underscore yeah i think that's valid
try it out so now if we refresh we should have studio post 5 with a query string of
method equals put so now this should send up it well it will send up as a post via html but the back end adonis
will use this method spoofing to then change it into a put and use
our put route that we have here so let's test it so let's try to change
something so we'll put edit on the title
and we'll do it for the description as well so there we go so this just isn't
rendering right so this is the title and this is the slug so the edit did work we can go back into the edit form
to verify so cool everything's working there so far um
what to do next well we can make that a little bit better so it's easier to see
index
oh stomach's starting to grow sorry about that
i'm just gonna flex it
okay
and then in between all of the data i'm also going to have the actions over here to
the right so that we can edit and we can delete them um so let's go ahead and do that so i have
another td over here
spot on and we also want one for deleting
so we can use method spoofing for this as
well so we can do this as a form action equals or
method equals post action is and we don't have this route
created yet either but studio dot posts dot
destroy and we need the post id to come up with that as well
okay
and then here all we would need to do is a
button type submit or actually we could put this form off somewhere else and then have
the button reference the form but that this this works button type submit delete
yeah gotta define the route so let's go make the delete functionality first
so let's see we're going to need our request our response
and our params
so that is actually
pretty much correct good job um so yeah no we actually don't need request we don't need to validate
anything we're just using the id passed in from the param however we are not cascading the
deletion of our post authors so we need to kind of remove
that as well prior to deletion
so whenever we get our post we will do await post dot
related authors yes
and detach which will detach all relations for this particular post
so we're good to go ahead and save that that should do everything that we need to currently do
and we'll build from there as we go so route dot delete id post controller dot destroy destroy perfect
all right and uh now we should be good to go ahead and test it
so refresh this it's not beautiful but it's something uh
so go ahead and click delete and it should get rid of well let's create a new post
here so let's do test delete
okay save this one off again not beautiful but it's something
hit delete and oh oh yeah i forgot the method spoofing um
so let's tack on clear string
underscore method delete
okay so now whenever we hit delete we should be redirected back well it should delete
the record and then we should be redirected back to this page minus our record so delete and there we
go so that's working just fine as well
uh let's see i can immediately tell that the table's not taking off the full width because it's
wrapping so let's go ahead and make it take up the full width
there we go and change this to be text small so class
equals text extra smallest extra small and then
and let's not do space x3 because it adds spacing to the end of it as well i just want it in between see so
or maybe it doesn't okay either way this works so
this route here i guess we can step out of studio real quick and get those routes working as
well um at least partially maybe man let's see
so we have our creating the post working we have our editing and post working deleting the post working
we do need to go ahead and do the publish app
um yeah let's go ahead and do that so i don't remember why i have publish
at user as a column so i'm going to go take a look see if
i can find that being stubborn i know if i go back far enough i find my project again there we
go all right so let's see what i'm using that for so
app controller studio
post controller store
do do do data standardies public data.publish at
diff now seconds is less than zero publish app becomes the present
time oh here it is so publish that is date time from iso date time at user zone so i'm resetting
the user zone to whatever the user selects as their time zone to utc and then
re-saving it back with their time zone okay gotcha
so back within our create or edit
i think the one thing that i'm doing is i'm adding a hidden field so input type equals
hidden with the user's time zone as that value so name would be
time zone and the value would be whatever the user's time zone is
so we might need to use javascript to populate that i think that's what i was doing in this project
so i'm going to open this up in another tab go take a look real quick
pretty sure that's what i was doing let's see studio is within here because it's an
inertia well yeah okay that makes more sense that everything was in javascript here
post adder edit
do
yeah maybe i didn't have it in here maybe i was probably patching it up with
the yeah right here so it's patching out with the form data all right
regardless we can go ahead and take care of that since adonis isn't aware of what the
user's time zone is we can either make adonis aware or we can just pop it pop
propagate this populate this with the value so i'm going to just do that
so we'll add another section to studio
so do at section
as scripts so that it's always down at the bottom in case we need to add anything else before it
so then outside of this section we can now do another section called scripts
and let's take in a script here just do this in line it's not gonna be
much so document.forms dots let's give our form a name so that
we can access it post form
dot time zone dot value and there we go
so that's all that we need to do so now that should auto populate with whatever the user's time zone is
and then what was i using i think i was just using the
browser's default date and time inputs
for the publishing
let's try it out i don't know how that's going to appear in this component but let's try so let's see i think it's date
is the date type
and name is date the value would be
post dot publish at
dot uh
date that sounds wrong we'll leave that off for right now we'll come back to it i need to look at lux
and see exactly how you probably just to string with a format um [Music]
and then this would change the date i might merge this all into a date
time and then that's
date types let's see if that even renders yeah yeah it's got some
weird padding on the bottom but yeah it's there okay and then let's make use of the
group actually so at component
components input
type group
and component plop that in there
plop it in there again and i think the time input is just
called time we can take the label off of this
time time time
and take the label off of this one as well and i might need to wrap these
and probably do so let's do div class equals
flex item center
see how that looks where'd it go
okay
so something's going wrong there
all right check out the input components type
group to see what i'm doing here so
well did i give the group a label let's first try that because that should show up i did not let's give the group a
label
publish it and yep there's our label so it's definitely something with the group
slots dot input
so i named the slot so then what the heck do i have is the default slot is there a
default slider can i change this to the default slot
um what is the name of the default slot is it main it is oh i used it for select
okay i guess that makes sense so then let's see how do i name a slot i forget
is it section i'm gonna go take a look i'm not gonna guess i'm gonna go take a look
components slot
ah at slot that makes sense okay
so then it would be at slot input
and slot increment that and then we should get
our date time inputs oh ew what do we have going on here
okay bad refresh so
that is funky default styling for it um
but now right surely that's not the actual default styling right
no i i overrode it i yeah okay well
that's all right it's not pretty but it'll do fine for now so
we go ahead and test this so if we save this one to be published on say the 17th at
3 o'clock p.m um it should at least save as this because
it's going to send up as part of the data actually no it won't because we're expecting publish at
as a single string so we can either change it to where we
expect the date and the time separate
or i can have a concatenated version
it has like a hidden input somewhere
i'm going to say let's handle it separate that make things a little bit easier i think so we'll have
instead of i think we can get rid of publish that user and just do that as a time zone
we can mutate the publish app if need be so
publish at date will take as a date
publish at time
is there a way to first is their time i doubt it
probably if it if there is it's probably built in with date let's go take a look
let's see validator take a look at the date options
so we do format so
this i believe is the default format
for the html5 um or html inputs for the date and time
so we should maybe be able to do format
of this for the date so format
of that for the date and then optional format
of this for the time
did that twice oops all right so i'm not 100 certain whether or not those codes are correct for the default
uh html date and time inputs but we'll try it and see if it comes through so now we have published that date
publish at time within our validator so now we need to go up to here
and prior to and we can either do this as a before save
or we could do it directly in here before
the save and before the update i'm gonna go ahead and just console.log
out whatever we get for the data first just to make sure that it comes through and that it's actually
correct so let's let's do publish at um
date as publish at date and publish that times publish that time and make sure it comes through okay
okay so i'll come back into here
refresh you change you to the 17th and you too let's do 5 p.m something a
little bit further away from the time that it is right now and
save post let's take a look at our console log see what we got yeah so and to find it undefined so
either the format is wrong or something else
i'm going to be stubborn instead of going and looking to see what the actual format i need to use is i'm going to
change these to strings and we'll see what it actually come back as
we'll just take that off because that's not a valid string option and go back into here back into edit
yeah we don't need to change anything with it just checking to see what it comes through as and uh oh undefined and not defined
still
hey felipe uh yes this code will be up on github um and the code from the
previous stream is also up on github um
it's at jagerko and it should be this one right here
jager dot co and it's public so you should be able to find it
um so
it could be that these were defaults that the reason that they didn't come up it could be
i spelt something wrong it could be that the name isn't right that i have in the form so let's check
the name setting first i guess oh yeah yeah i've got date and time
i guess we could use that and publish at date be a little bit more descriptive i guess
and publish at time
so let's do 17th go to 5 o'clock again
try this one more time so it could be that the format was right oh cannot define publish that date on post
model since it's not oh yeah well that makes sense we have to delete it out before we try to save it so go into nope not there go
into here and instead of including it as a portion of our data we will take data spread it
out and prior to spreading out the data we will grab the publish at date and publish at time
so that they're no longer a member of our data so that we're not going to get this error saying that you know publish
that date's not a member of post you can't can't try to make it one um
and now instead of console.logging amount like this we can just do it like this
as well okay let's try this one more time 17 5 p.m
save okay cool so what did we get 2021 11 17 and the time just
didn't work so yeah i do believe the format that we had on that date validator was correct
time though why are you not coming through i changed the name wrong
publish that time so now that should be correct
hmm
publish that time as a string yep okay
and publish at time so looks like everything is referencing publish at time
we can
i don't remember if all gets data off of the body or not
let's see let's see what sends
up okay try this one more time five o'clock save
see what we got oh yeah cool so publish at times going up is
null interesting let's see why would you be null
why would you be null
let's check out the actual input on here to make sure i mean based off of how that's rendering it's
definitely a time input let's make sure that the name got onto it correctly
yep publish that time
and we're trying to pass it up as a string so that shouldn't be any issue with the formatting
i wonder if it's something with the model
let's see five o'clock going to the console here
all right well you're printing it out here but uh not really familiar with safari so i'm
gonna go ahead document dot forms dot
what did i name my post form i should just be able to do forms dot
post form make sure that's something nope
okay dot
publish at time all right dot
value yeah it's an empty string
oh gosh yeah see that's the thing that i hate about chrome 2 is it gives you the tree of it i want the
actual properties
okay so it's just that we're not getting back the actual value of the input
or the value is not setting um
remember the sign in i don't have any um authentication checks yet
so i just need to remember to sign in okay see yeah okay so it's something with safari with the reason that those
are so massive they look perfectly fine on firefox
um all right so let's take a look here so five o'clock
p.m maybe safari like shows you the defaults but it's not actually set
maybe that's just like a placeholder i don't know so document dot forms dot
publish at time dot
oh
no yeah skipped a step dot post form dot publisher time dot value
yeah there we go 1700 hours so
i'm gonna go back to safari here
and finish that up let's type everything in it if that is just a placeholder and that's not like a
default value that is super misleading yeah now it's coming through so that's
just a placeholder wow
like firefox's placeholder a lot better it's just dashes like i
i i assumed that that was going to be a default because i didn't set any placeholder on it but okay
so we can go ahead and actually work with this now that we know what we're getting back
so let's see so within our validator
publish that date i'm going to go ahead undo um
we're getting back 1700
so that would be hours hours minutes minutes no seconds
and i believe the dates right so we can change these back to dates
test to see whether or not they come through now so post controller console.log we can get rid of i believe
all in just in case and give this a save to test and see what we get now so
i didn't need to refresh but i just did uh set this to sure and we'll do five
o'clock p.m save
take a look at our console log see what we get all right so now we get a datetime object
for the time it defaults to
hours 17 minute is zero so that seems to be working and for the day
month is 11 days 18 so that seems to be working so now we just need to group them
together until one date time and plop it onto our data prior to our save
so const publish at equals
and we can either build this out as a string or i would say let's use one and alter it
to make it the other so publish at date dot set
hour is publish at time dot yep hour and minute and that's giving me red
squigglies why probably because it's optional and it's nullable yes
so well this is nullable 2. so we would
want to set an overall default so if
so const publish at equals
date time now need to import date time actually okay
if publish at date
then we will do publish at dot or no equals because it's immutable
publish at set is there a better way to merge two locks
and dates hmm
i don't know off the top of my head i'm going to go ahead and just stick with this because i know that this will work
and i put this as a const which is a no no because i'm changing it so we'll do let
why are you red squiggling now cannot redeclare block scope to variable
oh because it's also defined down here okay and if publish at time we'll do the same
thing not pretty but it'll at least work for right now so hours minutes we do not get
any seconds so we'll take that off and then last thing to do is data dot
publish at equals publish at
trying to decide whether or not that's going to try to throw an error or not okay well we'll go ahead and save try it
out see if it works we can get rid of this all now oops one two four there we go yep so publish
that's not a member of data so instead of doing that we can actually simplify this even further actually by doing dot
dot dot and then after we set the data set publisher i don't know why i didn't
do that initially that's a lot cleaner okay so come back into here
try to set the date to the 18th we'll leave the time empty
to verify that you know it just sets to whatever now is which would be for me 1102 am
so go ahead and save come back in and it should now still be the 17th to the oh i didn't do not have
it populating i do not all right i wasn't sure how it
was going to okay well we have the formats so we already know
what that is um we can actually populate that
see on our post
i don't know if it's worth it but we can do a computed property here
nope what am i doing that's completely wrong computed public
get publish at date string
uh for the most part that's right i'm gonna go ahead and copy the date as it's defined
on the validator though no clue what ll does
all right and we'll do another one again not sure if this is worth it might end up changing it but publish that time
string return pull chat to format perfect
is hours hours uh the 24 hour clock or is that the 12.
well we'll we'll we'll see it should be the 24 actually because we can't log stuff out and it went at 17.
so it should be okay okay and then we should be able to just use those two to actually set the
default value for these so we do post dot publish at
date string otherwise that and we do post dot
publish at time string otherwise the flash
so back in here and perfect so we can see that we got 11 18 20 21 at 1102 am which
was the time that i last saved this uh and if we change this to five
o'clock p.m now that should save two
perfect so that seems to be working
okay um
what else what else what else did i miss anything
see we need to find a wysiwyg editor which i will do off stream we need to get images at some point but
i need to add in
my environment variables to be able to do that and i
store all of my assets within a single bucket for all projects so i that's not a
secret that i want to share it is a super secret so i'm going to hold on to that [Music]
we could get it to where it just saves locally onto the disk but that's vastly different from
how i need to save it so we'll skip that for right now uh let's see
we can go ahead and start rendering stuff out i guess um
see so we have those posts that we that i accidentally created earlier that have no author let's go whoops go ahead
and delete those okay and then
oh you know what we could do the states so there's various states here
um if i can find my enum for it so states
so we have whether it's a draft whether it's in review unlisted public private archived or
declined which i've yet to use but it's there just in case i need it so we can set up kind of like a save as
and then allow the user to select between these five values here so to show you what i'm
currently doing for that if we come into here i've got a publish now button save as
draft save as unlisted save as private so if i save this one as private you would no longer be able to find this
post anywhere on the site however since i am logged in and am an administrator
it would still did i leave it there with me no yeah no it would still show for me
uh unlisted i believe i have that set to where it would still show everywhere on the site
no no it wouldn't show anywhere on the site but you would still be able to view it that's what that is and then draft would be it would go as a work in
progress so it wouldn't be anywhere um
so let's go ahead and set those states up
so that we have them ready to test whenever we actually query out outside of our studio
so let's see
how do i want to incorporate that so i think we'll do another hidden input
is state id the default value for this will be post
dot state id
otherwise probably draft um so the other thing
that would be good is to provide those states into the
update and create page so let's go ahead and do that so const states equals
uh we'll just do state we'll do it as the actual enum right
and then consts no i don't think we need state descriptions at all so we'll just leave
it as states and plop that in there and then we'll do the same thing
for edit
so now on our creator edit we should be able to do states dot
draft and have that pre-populate with whatever
that state ideas which actually uh we have them setting to use the default of five
so i don't remember if that was a database default
state id no no no it doesn't have a default so it must have been something that i
temporarily plopped in the controller earlier today so
let's go ahead and test this out with a new post so that we can verify that it actually does show up
with the states.draft value so coming in here create new post
let's go into inspect and i don't need all of that
shrink how do i get that back over there this one yeah all right and go into our form
and there's our hidden input with a value of one is one
yes so that is the state of draft perfect
so now i guess we'll keep this pretty similar to how i currently have it where it's just four buttons um and then the user can
select between them and then clicking on a particular button will change
um well let's think about that for a second because if we do it that way i've done
this before how did i do it see so now the issue with having the buttons separate is that
the they'll still need to be submit buttons that kick off this request i think that's how i did it i didn't have
them as submit buttons i just had them as buttons that changed that value
and then submitted the form afterward so it would be something like this so
let's see no what am i doing
function uh save
state id switch
the state id that is eerily close yes
uh it's a little off but it's all right so what all states do i have let's go ahead and post plop those over on the right
hand side so states
okay so we have draft right there instead of published
see there is no in review state to be had so we'll do unlisted
and then instead yeah no that's fine well hold on a minute is there really a purpose to have this if
no if you're providing the state idea there's no purpose to have that so you just do
this i just realized that all of those case statements were going to have the same output
so there we go so now we just overwrite that value and then yep submit the form
so then we have our buttons which we will place outside of the form as
non-submit buttons so this would be button type equals button
do unclick save as
states dot public and this would be the
publish button okay and we're going to have something very similar for
unlisted uh draft unlisted and private yeah
so draft unlisted
and private
okay
so now that should change the state id and
then kick off the submission of the post form
so we'll save that all right we have our unstyled buttons here looking all fancy
so we can see create a new test post
and we had the others default to public so first we'll go ahead and try draft
so we'll save post as the draft if i can find the button save as draft right here so go ahead and
click that all right nothing happened uh we're using a nurse or no not inertia
um alpine so i don't know why i'm not using that here
definitely could if i can remember how that works it's changed since i last used it used
it there's really no need to what
see if we're getting there
it's been a minute since i've done direct attribute actions
so we're not getting an error so i guess i'm doing that right but
this probably needs to like be different somehow
oh man let's see
i know that's doable maybe it's not on click
i don't like w3schools but i'm gonna yeah see i'm sure
they're they're doing it i should be able to do it too yeah so we got unclick maybe it's not called
save as no it's called save well i like savios better let's call that save as
okay test draft save as draft there we go now we have
test draft there let's verify that its state id is one where's my refresh button there it is
where's my state id nope it came through as five
is that because of how i'm setting the state id temporarily or is that because it didn't
send up with the correct state id let's take a look so store
state id public so all right let's first well let's leave it as public right now because
we're still testing so it must not have gone up as a member of data
either that or our well know if our validation plugged it out
then i'm either not sending it up with the right name or our validation came back as an error
and we went to the index page so our validation didn't error out so state id is just oh it's not in there
at all i thought i did it i didn't know you got post type id
all right so i didn't do state id in my band let's see state id
it'll be very similar to post type id so this will be enum type optional because we have a default
that we're going to set on the back end object values
[Music]
okay now that should work and um we'll leave i want to change the spec to
why are you ready now state id is specified more than once
ah we'll look at you okay
well then we will do this oops if
not data dots date id then state id equals
i do want to ultimately use draft for this but while we test out that we're able to set
draft whoops that needs to be data.state id i'm going to set it to public if it
doesn't exist so now we can just change this to be data
and now that hasn't read squiggly so why do you have a red squiggly
state id are incompatible so i think that comes back to i didn't use
the enum type to describe where is state id it's number or null so
really instead of number here that should be the enum
let's see if that fixes it
types of state idea incompatible type stream state or undefined is not assignable to stipe type
state null or undefined okay so we have it's nullable
uh
okay
well so the issue is so i could fix this on my model
um what i think i think putting null or undefined
there would probably fix it maybe or probably need to also handle the string portion of that
which i don't want it to be a string so um but whoops instead of
doing that approach how do i open up my terminal is that ben open my bad
um i'm instead just going to
really i don't think that should have been nullable in the first place it's definitely required because of a postdoc of a state i have no clue what to do
with it so that really should be required
so that takes care of one portion of that i don't know why that's still saying that's undefinable
um state or undefined oh because it's re
all right well i'm going to change the validator regardless because we are definitely sending up some form of a state with it so i'm going to change
that from well really that just needs to be a numbered not necessarily
let's see let's see sorry i'm thinking out loud uh
[Music] type string or state now so yeah we need
it to be a number not a string that's the underlying issue
is that coming through with how i'm setting it here i don't think so because that's definitely a number that i have
set
objective values enum uh yep there's where it's coming through
string or state i want that to be number or state
let's take a look at the validator documentation here i don't know if there's a way to do that
i feel like i've come across this before but i don't remember what my solution for it was or if i had a look that's the
wrong one validator you know you know you know where are you
okay
does that fix it no
you know it's under because it comes back with the data all right
well now i have it set as a const which i don't want and it's no longer a member of my data
all right let's go ahead and just keep it simple so
dot number optional
is there a rule where i can say is in there's not in
no i can make that rule
but for right now just to test and make sure everything is working okay
saving wise let's go ahead and just save the state id as a number probably going to run into the same
issue with the post type id so i'm going to go ahead and just change that to a number right now as well
okay and
oh no still red squiggly argument of type number is not assignable to a perimeter of type string
so number on identify well
all right which makes that redundant which makes that valid okay there we go
so let's go ahead and test this out so our
draft did not save as a draft but we can go ahead and edit it and then save as a draft and it should
no i didn't put that in that i just put that in store dang it all right so then we'll go ahead and delete test
draft and we'll recreate it test draft
save as draft now if we check it out there we go now the state id is one
so
let's go ahead and apply that to the edit as well
so all we need to really do is add that check to it no
that's not needed because it will already have a state id on it so if a state id is not
provided then we don't need to do anything with it so really edit or update should already be
taken care of on that front so if we edit our test draft
to test unlisted
and we save as unlisted now it should be what two
three three all right so it's three let's verify that that's actually correct
so go find state all right it's right over here just click on
unlisted is three yes so and then we'll test private which is four
which is working all right and then we will test finally
our making it public again so test public as publish which should now make
it five all right so that all seems to be working so
not pretty but working cool so i think that is where we are going to
end it off today i've got to start my saturday so thank you all for watching uh
hopefully it actually went okay um
i know youtube told me to check my video resolution because it's 4k which is not optimal but
it seems like the stream from when i can tell went okay i'll check back hopefully it went okay
but yeah thank you all for watching i appreciate your support and have
Join The Discussion! (0 Comments)
Please sign in or sign up for free to join in on the dicussion.
Be the first to Comment!