Let's Build with AdonisJS #1.9

Comment Likes & Unlikes

In this stream, we'll be adding the ability to like and unlike a comment on the new upcoming Jagr.Co site, built with AdonisJS.

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.

0:03

hey how's it going everybody my name is tom and welcome to our stream all right so today we're going to be uh

0:09

kind of adding in the ability to like and unlike comments on the new jager

0:15

site which the name will be changing here briefly as well so essentially if i dive into a lesson

0:22

here and i scroll on down to the comments uh note that i am logged in here as

0:29

myself and we take a look at the comments i've added this little heart icon here and the goal for today is to

0:36

rig this up to a like record in our database

0:42

anytime a user clicks on this and then should they click it again it would essentially do an unlike uh not a not a

0:48

dislike but an unlike so they can like the comment and then they can undo their like if they wish

0:55

and then we'll have a little count right here as well along with the comment so

1:01

uh that's what we're gonna be doing today uh so let's go ahead and just dive right in so to start with here

1:07

um oh boy i don't quite remember where i left off with this i know that if i

1:12

click on it i have that bound up to a handler that tells me what that particular comments id is

1:18

but it's not kicking anything out so let's go see whether or not i have anything in the database

1:24

for this um not quite sure

1:31

seals that just oh i did not mean to close at all i meant to okay there we go so let's

1:38

open up the local one here and let's see whether or not we have any comment votes okay i called it comment

1:45

votes so all we want to do is whenever the button's clicked for the first time for

1:51

the user let's plop a record in here with that comment id and the user's id and then should they click it again we

1:57

just delete that record out so we have this rigged up here i believe this is in

2:03

the base so you have the list of comments here

2:10

that button is let's see it would be down here along

2:16

with the actions oh yes right here so we have a heart

2:21

outline and just the heart so the heart outline is whenever it's not quite liked yet and then the heart would be the

2:27

filled in heart which would be whenever they have liked it so this is inside of a button [Music]

2:34

um and it looks like i have one

2:40

showing on hover what do we got going on here btn outline

2:46

absolutely top left okay

2:52

not quite sure what i have going on display wise with that but uh we'll take a look at here in a second main note is

2:57

we have this toggle like and that's what's kicking out to this alpine function within the comment base right

3:04

here so we need to rig this up to an api endpoint

3:11

um so let's first head into routes and then underneath the api section

3:19

let's go ahead and do kind of similar to this history

3:24

progression toggle let's go ahead and do a route post

3:32

comments um like

3:37

toggle and let's see we probably don't have a controller for this we could put it

3:44

inside of the comments controller let's see how filled up that is store update destroy

3:52

yeah we can do a a like function in there can always move it out

3:59

so that's comments controller and we'll call that like

4:06

as comments like

4:12

so we give that a save and that full url will be api comments like toggle

4:18

and let's come back into our comments controller and let's go ahead and get that set up so

4:24

public async let's see we call that like

4:30

http context contract okay so

4:36

we're going to want the response so that we can respond via

4:42

an api endpoint we're going to want off and

4:48

actually we want params as well so let's go back into that route definition

4:55

and instead of that let's do

5:01

id and uh like instead of that so do that

5:07

and then like itself will just be a toggle so

5:13

first and foremost here we will want to find the

5:19

comment i believe hang on a minute do i have that

5:25

uh with a off middleware yeah so the whole api prefix is off

5:30

middleware protected so that's good all right with that in mind now we are good to go

5:37

ahead and break this up so const comment equals i'm trying to think of

5:43

whether or not we even need the comment record or whether or not we can just plop this right on the

5:49

user comment votes user

5:57

uh well actually do i have that relationship set up i guess that would be step one wouldn't it

6:03

so let's take a look at the comment and let's see if we have anything in here

6:10

user votes okay so yes i do have it rigged up as user votes

6:15

and let's check the user because if it's in the user then we can easily just attach it to the user this way

6:21

since we already have the auth user it doesn't look like i filled this site in

6:27

got email history posts

6:33

hash no it's not in here so let's add that in here so it's going to be a minute of mini

6:39

i can probably just copy and paste it from this side and flip it so

6:45

okay let's copy you paste it there okay that's going to be

6:51

oh nope not cop yeah yeah comment

7:00

did that not import yeah it should have it's in there

7:06

um all right oh yeah i didn't change the other half of it now did i so right here

7:12

change that to comment and there we go okay so now that we have that in place let's

7:18

head back into our controller and we don't need to query the record um the only reason we might want to do

7:23

that is to verify that the comment or the uh yeah that the comment exists

7:29

um so that would be one benefit of doing it we could also just use the validator for

7:35

that um but let's go ahead and just get this

7:41

rigged up for right now so i keep wanting to do constant let's see off user

7:47

related and we should have user oh yeah no that name should change

7:52

because that's not specific to the comments so user uh to be comment votes there we go

8:02

so comment votes dot and then that should be attached

8:13

doesn't seem to want to update related comment oh i have an s on it oops

8:21

there we go votes dot attach

8:28

and then we should be able to do uh params.id right in there

8:34

and we await that and if that's good then we should be good to go ahead and return

8:41

response i'll do a status of 20204

8:49

well let's go ahead and return back whether or not it actually was liked

8:56

yeah so this is the toggle so yeah so let's go ahead and uh we let's go ahead and check for that record first

9:03

so const

9:15

let's see here

9:23

exists equals await off dot user dot

9:29

related comment votes

9:38

query dot i feel like i'm making this more difficult than it needs to be let's see

9:44

here where

10:02

yes let's inverse that i think it would be cleaner so const

10:07

exists equals await comment

10:14

dot and then we could also do the whether or not the comment itself exists this way

10:19

as well so comment dot query dot

10:30

let's see where has

10:38

user votes

10:54

now this still feels more difficult than it needs to be what am i missing

11:01

um

11:22

off user all right const a weight

11:29

user dot

11:38

related

11:45

comment votes dot

11:50

query dot where

11:57

id equals params.id yeah i think it was just the off dot

12:03

user that was throwing me off because most of the time i have my user plucked out um but yeah all right so there we go

12:12

so if exists

12:19

then we will want to remove it otherwise we'll want to create

12:25

it we could do this as a ternary

12:30

let's see so exists

12:37

await author i'm trying to do that again user dot

12:43

related comment votes dot

13:13

uh

13:30

took me way too long i'm going to blame it i'm being on it

13:36

being a friday evening um all right so otherwise we want to create it with

13:42

the [Music] see we're doing auth related so that would be the uh actual uh

13:48

not post id but

13:56

should be the comment id shouldn't

14:04

oh no not create sorry attach

14:11

params.id okay my goodness okay

14:18

so did exist or was removed or yeah was

14:26

removed so let's see what we get there

14:33

all right oh yeah now we need to bring it up on the front inside too let's go ahead in there and do that so

14:39

[Music] that was in the base

14:45

all right so const data equals

14:51

weight let's make this a sink

14:57

next year's post let's see we're going to need that to be

15:03

api comments comment id

15:12

like yeah yeah i don't know okay i don't know

15:18

why i made that a post we're not really posting anything else up um but all right

15:27

and then let's just console.log the data that we get back there for tests

15:34

all right so let's hit it

15:40

a 500 error that's what i always like to see what four

15:47

select comments comment votes user id as pivot user id

16:09

where's the end of it my id is ambiguous

16:14

all right what id would that be right here

16:22

so that would be

16:28

comments dot id right

16:34

i think let's try that again so let's clear that out click it

16:41

nope still getting the same thing or nope

16:46

this looks different does not exist relation comment votes does not ignore

16:53

column zero of relation

17:04

all right so this one's on the insert so query's good insert not good

17:22

all right let me read that one more time

17:32

is it coming up with a zero

17:37

it's got one two three it should just be two shouldn't it common id and user id

17:55

did i not make that id correctly on there should be

18:01

made this a while ago so who knows comment votes

18:08

right yeah table dot increments

18:20

okay looks right um

18:26

maybe the model no that should be right so pivot table get out there

18:32

comment votes that's mini user user here's over here

18:41

all right

18:51

oh man

19:21

oh okay all right i think i just needed that to be an array which is weird because i think

19:28

that specifies that it accepts either an array or

19:34

string number oh okay my bad i read that wrong yeah so array there

19:42

okay so that seems to be working we can go ahead into the database and verify that

19:50

cool okay user id one comment three

19:56

so that was my bad for being away from adonis for a little bit uh brain fart there so

20:01

now what we need to do is to get that to reflect on this side um and if i refresh

20:08

i don't even know if it would show so let me see it was the second comment down that i clicked on

20:15

so if we refresh here scroll all the way

20:20

down to that comment you can see it's showing up just the same as before despite it actually being liked one of

20:26

the issues is i bet i'm not querying it at all with comments so there's really nothing to even look

20:33

for right now so let's go ahead and go do that so that would i would want am i on here lessons all

20:39

right i don't know why i have these open

20:45

all right so lessons controller show

20:52

comments get for post you want to dive into there

21:00

all right

21:07

and it should just be a matter of preload

21:12

or well no that would be what so yeah no you do want to pre-load it specific to

21:18

this user but then you also want to get a count so user votes

21:26

query dot where and at this point we need the auth user

21:33

id as well so user id number

21:40

or null and

21:45

at that point we only want to preload this if we have the user so if

21:52

user id query and this will get a little messy so we'll

21:58

break this down here query dot where do we break it down at let's do it

22:04

here like so there we go where

22:10

user id or user votes

22:16

user

22:32

all right and we've already done our check up here to check and make sure that that exists so we know that that will be a number so

22:38

i'm just going to enforce that ah sorry

22:46

um getting my languages mixed up now shoot

22:52

was that not right number no

22:59

[Music] okay there we go

23:11

so i feel like this might be wrong i'm having a brain fart right now i can't quite think through what that

23:16

appropriate column selection might be it could be users.id like we had on the inverse side

23:24

over on the comments controller where we had the users related yeah i bet you it would be

23:30

so all right i had a feeling it might be so i'm gonna roll with that for right now so this is going to get the user

23:36

votes if this particular authenticated user

23:42

has voted on this particular comment otherwise this will just be null

23:47

so on the front side we want to check whether or not this exists if it does then we know the user has liked this

23:53

particular comment next what we want to do is actually get the

23:58

user votes as a whole the count of it for that particular comment so

24:05

instead of pre-loading for that we will do i believe there's a with count

24:10

yes and that should be as simple as just calling user votes

24:18

so we'll save that okay and so now we should at least have

24:24

something coming through on the front-end side to be able to select that particular comment

24:31

and we refreshed here to make sure everything's still working okay so let's jump back into our front end here and this will be

24:37

on our comment list and right here so i'm gonna make this

24:44

simple before we find out what is there let's go ahead and just

24:50

drop our count for the user likes on here so it'll be

24:55

comment dot extras dot and

25:01

user votes count i think

25:09

undefined so no that was not quite right um all right

25:15

let's go ahead and just drop it out so let's inspect comment dot extras and see exactly what

25:23

it is all right

25:28

user votes underscore count my bad okay

25:36

there we go so now we should at least get the fact that this one here has a one and whoa

25:45

okay so that was not unique to that particular comment whoops i don't want to print

25:52

all right so let's head back into here let's try to fix that so right in here

25:59

related post related comments query

26:14

why isn't that unique to that

26:30

interesting

26:39

because state id would just be applicable per

26:45

comment

26:50

hmm that is peculiar if i like a different comment will it

26:57

increment them all let's go down to this one it's like that one

27:04

refresh and see or without this changed to no it's still one so it's particular to this one still but

27:10

it's applying them to all it looks like i don't know whether or

27:16

not that's right or not um oh shoot what's that one thing that you need to call to scope things

27:23

like um like uh shoot

27:28

see what was that called

27:43

group yeah i think it was a group let's give see if there's a group version of that

27:49

no there is not okay group by but that would not be it

27:54

so um

28:03

that's i feel like that's weird

28:14

i don't know if it's me having a brain fart or if that is weird

28:34

okay tell you what let's go ahead

28:40

let's take this guy off for right now let's comment that out let's preload all user

28:46

votes all right for the particular comment and what we'll do

28:52

is see what count we're getting back for that so instead of doing this

28:58

i'm going to go ahead and comment that out and instead we'll do comment dot

29:07

uservotes.length let's see what that's coming back as i would imagine it should be zero one and that's correct

29:15

okay and then down here at the bottom it would be one again yeah so okay

29:21

this might be that bug i saw month or two ago it was i think it had

29:28

something to do with counting so it could be that in which case we'll find a work

29:34

around um

29:42

i forget can you alias these oops as

29:51

votes no okay i i wasn't quite sure

29:56

does it accept an alias no okay

30:05

so what i was looking for was to see whether or not the user vote here would be for the particular user but if it's

30:12

there we can do that on the front side so i'm just going to leave this like this for right now and

30:29

see if there's anything else that would be beneficial for that

30:43

having

30:54

yeah yeah we could just do aware exists no no no sorry

31:00

it would be like a

31:13

equimper asked do you like edge or using something like

31:18

react or do you like edge more or using something like react um

31:23

i tend to like to keep things on the servers like simplicity is nice for me um

31:32

if i don't need a whole bunch of stuff going on i like to just stick with the basics stick with edge

31:37

um if i need a bunch of you know

31:42

front end updates happening so that the user can immediately see stuff that's where i reach for react i tend not to

31:48

reach well i reach for view but i tend not to reach for a front end style package unless i absolutely need

31:55

to so if i don't i like to stick with edge it's the same focus at work i don't

32:00

get to work with adonis or anything like that um um at my day job i work with c sharp

32:08

so stick with that whenever i can if i if it you know

32:14

it doesn't quite do as much updating as i need it to do so like a simple blog like this or

32:19

something you know where most of the stuff is static you know you might update these every once in a while once

32:25

a user performs an action that's easy to do with just plain javascript that you don't really need to

32:31

reach for anything you know you attack alpine on it makes it even easier

32:36

but if i have like a ton of micro interactions within an application where

32:41

i need to pull stuff from the database uh after user interacts with a small thing update that little small thing and

32:48

i have that all over the place that's where i reach for something like viewer react so yeah

32:54

i don't like to add a whole lot of complexity to the stack if it's not needed so

33:00

um sorry that was a tangent let's see

33:05

okay so we need to find a workaround i guess

33:15

i asked you feel edges as good as blade or missing element

33:20

i saw the async and edge but not sure what this thing does

33:26

i like inertia.js lately um it's been forever since i've used blade so i really can't comment on that i do

33:33

like edge though i like i use comments or comments um components heavily

33:40

yes you can await things inside of edge that will work just fine

33:45

asynchronously loading things you can extend additional items via the database with

33:51

an edge there's a lot of availability of things that you can do within there um

33:56

inertia is what i i enjoy inertia too but again i don't reach for that unless i have a ton

34:02

of micro interactions going on within my user interface

34:08

so like i do have an application that i'm working on beside this where i am using inertia but it has

34:15

so if i touch a small button a particular row needs to update but everything else needs to stay in place

34:22

things like that it becomes a lot easier to use a

34:27

a javascript a front-end javascript library so that you can easily do that

34:35

instead of refreshing the whole page and things of that nature um so

34:49

ah all right uh equipper asked again but what async will

34:55

change in edge this will show the page and then start to fetch no so edge is

35:01

strictly back end so if i you know await something in edge it's to

35:08

load additional data for that first render so once i hit refresh here

35:13

once that page loads edge is done i can do an axios or an asynchronous

35:20

request for an additional html input from edge but

35:25

once that initial load is finished loading edge is done everything else is passed on to the

35:30

client side so if i click on reply here that's done with client side javascript not edge

35:38

click on cancel that again that so there's a separation between what edge is and what something like view is

35:51

alright so

35:59

i feel like there was a way to rename preloads but i don't quite remember it

36:04

there might might not be either relation callback

36:12

all right

36:25

so what we can do actually is take this and

36:31

i think we can drag that right onto the comment actually

36:38

well no because then we would need to add have that within here wouldn't we um

36:48

yeah because i was thinking on query you'd be able to do something like that but you

36:54

would need to know the id within the model

37:01

okay

37:08

let's see i'm gonna try to search for that

37:19

i i feel i don't know half of me says that you can and half me says you can't

37:24

um change the name of a preload here probably just recreate another preload specifically for this

37:32

because then that's specifically going to look oh wait no yeah no it's in the yeah

37:39

it's not in the name it's in the callback

37:48

um so let's do that as a user vote i guess i i had a feeling that there was a way to do it it just wasn't coming to

37:55

mind there we go so now we should have them both we can simplify this one since we

38:00

really only want the length but for some reason counts not coming back quite as i wanted to

38:07

um let's do query query dot select and let's just select the id let's simplify

38:14

that query a lot the result of that a lot easier so there we go so we have that let's go down into

38:21

the list well way too far down okay should be good to go ahead and no

38:28

won't be using that quite right now leave this as just a length check

38:34

and then take a look at the

38:41

see what i'm doing here so i it's definitely got something going on where i'm showing the whole thing is on hover

38:46

ah devtools doesn't want to work there we go

38:51

all right so we got the button div and so both

38:56

show

39:02

oh i did specific javascript or job uh css

39:07

for it so let me go find that uh because then i'll probably also want to tack on like an active

39:14

make it red something like that so let's go into the css that is called

39:20

btn filled and btn outline oops okay

39:25

so btn filled oh that's just okay

39:31

just the opacity so

39:36

on here we probably also want to btn hover phil

39:42

hover where the heck was my head at whenever i

39:49

wrote this btn hover fill oh okay

40:02

uh a month ago me what were you thinking or no that

40:07

sorry this was probably more like three months ago um let's see so all right

40:13

ptm filled

40:20

ptn over that weirdest name ever for that btm hover

40:25

filled dot active

40:31

opacity one and let's go ahead and get that make that red so color

40:39

[Music] what is that theme colors dot

40:45

no it's not coming up right i thought it was colors

40:51

maybe i don't have auto okay there they are they're coming through now see 700

40:58

and then over here make this back ticks

41:04

and let's see over here let's do

41:09

a um let's see comment

41:15

dot user like or no user vote

41:20

man my head was all over the place whenever i initially wrote this if i was doing it again now um i would

41:26

have named that table user or comment likes and this would have been user like

41:31

i don't know whatever i'm not gonna i'm not gonna

41:38

argue with uh three month ago me so let's see here comment user vote

41:44

and whether or not that exists so if that exists then we will go ahead and do active well so then we just do it

41:51

and in okay something like that

42:01

all right doesn't look like it's red and it doesn't look like it's filled in so let's see why

42:09

notice that the firefox devtools have been doing that anytime you have like an automated refresh the the element tree

42:16

just crashes

42:21

so it's coming through as undefined um

42:30

so let's see whether or not we are getting our user vote in there so let's do oh outside of the button so that it's

42:36

at least a little bit readable inspect

42:41

comment user vote see what we're getting here

42:50

guessing it would probably be undefined wouldn't it yep okay

42:59

let's verify that that's actually what i called it here it has user vote okay

43:11

so let's go ahead and just inspect the whole comment and see maybe that went into the extras or something like that

43:16

um i've never tried renaming a preload before so i'm not 100 certain

43:22

how that works so let's see all right

43:30

here's our attributes updated at original

43:43

preloads here's our user

43:49

user votes and no

43:57

no it did not go on

44:03

okay well so that's no biggie um

44:10

maybe that doesn't work i thought it would but i'm not certain

44:16

we actually don't need that query um

44:22

oh i never passed in the user id that could be why i added it but i never actually passed it in

44:29

all right i'm oi

44:38

let's see so where uh that's lessons controller

44:44

there we go all right auth user

44:52

id and

45:11

sorry um user id number or null so that's not the

45:16

undefined is what i meant to right there

45:29

there we go that should be correct now there we go so let's see whether or not

45:34

it's coming through now all right

45:40

user votes scroll up a little bit let's see whether or not it went in above here

45:49

looks like i'm on the user now yeah

45:58

okay well regardless we don't need that one um what we can do is an alternative since

46:03

we have all of the um all of the user or yeah all of the votes

46:11

for the particular comment preloaded um so if we go down to the bottom here

46:16

oh it was up there just showing oh no wait

46:22

user original user votes is

46:30

empty array okay so yeah i bet you that's messing with it so let's go ahead and just undo what we just did there

46:37

come back in here it was worth a shot i wasn't certain whether or not that was a thing

46:43

so let's get rid of this because we actually don't really need that we don't need to do an extra query for this

46:48

and so what we can do is we can just check it directly on the user votes so

46:54

if we come back down to our list here i'm gonna go ahead and refresh it again just so that i can see exactly what i need to grab

47:01

oh shoot i bet you i'm on the wrong one

47:07

yep you sure are all right well i might have been looking at the wrong one all along

47:16

all right let me try this one more time sorry

47:22

okay let's try this one more time let me make sure i'm looking at the right one this time too

47:29

all right all right so there's one

47:40

and this is the one so let's see whether or not it's in here

47:50

alright so here's our preloads there's our user user votes

47:56

and yeah so but regardless what i was saying before the reason why we don't need that is

48:01

because our user votes still despite us selecting just the id does come with those extras

48:08

and that's going to come with the pivot comment id and the pivot user id so what we need to do is really check to see

48:13

whether or not we have any user votes with the user id pivot user id present and if we

48:20

do then that means that the user liked it so

48:26

let's go ahead and get rid let's undo right no i guess redo

48:31

to get back to here come back over here and i'll undo that

48:36

and then come back into our list.edge

48:42

and we can make this a little bit cleaner for ourselves by going up to here

48:54

set a variable called user liked

49:00

oh indentation messed up between switching between um webstorm and this

49:06

i don't like that the each is on the same level all of the sets all right um so

49:13

comment dot user votes dot

49:18

find where v dot

49:23

extras dot pivot user id

49:29

equals off user id

49:40

and so now we can use our user liked

49:48

come down to i think i went past it yep right here

49:54

and instead of checking this

50:00

just checked whether or not user liked is there all right i'm seeing some red now

50:07

so we have not liked liked not liked and liked so that seems absolutely

50:14

correct um let's test our unlike so let's go ahead click again

50:20

looks like the console rigged up some errors for me got 500 so that is not quite working

50:28

delete from comments where id oops yeah no i don't want to delete the

50:33

comment i wrote that up wrong my bad

50:41

uh service no not service sorry controller

50:49

show no comments controller diesel yeah wow okay

50:59

so yeah so that would be

51:16

we can either go off of the user again or we could

51:22

so let's do user dot related comment votes

51:29

dot query where

51:35

comments dot id is params id

51:42

and delete it out give that a save

51:51

refresh or i guess i didn't need to refresh but all right did that anyway

51:57

click that again and all right now we're getting the 500 again

52:06

sorry ah

52:12

detach i don't know what the heck i'm doing all right there we go my goodness

52:20

remind me to stop streaming on friday nights and do it saturdays

52:25

all right so here we go so we got back a succ a successful response

52:31

so if i refresh that red heart should now be back to a gray with a zero count

52:39

should have picked a shorter article there we go it's back to that um

52:46

yeah so cool so now the next thing to do would be to get the front end here to immediately respond to that so if we

52:52

click it it should immediately go to red um

52:57

and that's only once we get a successful response so let's see here so being within our

53:17

i guess the best way to do that is to well no so i'm not quite looping through

53:25

them with um alpine doesn't actually know what the

53:30

comment itself is does it form list the list itself is all done in

53:43

yeah edge loops through the comments

53:49

so alpine doesn't know anything about that um so really all we need to do is just

53:55

directly reach for this particular

54:04

btn filled under the comment so on the comment itself right here oh i did give

54:11

it an id cool comment id so let's jump back into the base

54:17

and let's do a well so

54:24

what what was the variable i returned back from that api endpoint was it was deleted was removed okay

54:31

so if data dot was removed then what we want to do is

54:37

remove the active class otherwise we want to add the active

54:43

class and that's really all we need to do so let's first go ahead and grab the

54:49

comments element so we could do

55:00

document dot query selector

55:11

comment comment id dot and i cannot remember what it's called

55:19

heart filled filled btm filled my goodness okay

55:26

all right and then like icon dot

55:31

class list dot add or no sorry remove active

55:42

all right otherwise i should add it so here we go

55:51

okay so if we hit this all right it's red

55:58

uh we also need to increment the count click that bam it's gone all right

56:03

so let's do the count as well

56:10

let's jump back up to here where is my count here it is so let's put you inside of a span

56:23

just call it give it a class of bdn count and drop that back into there come back

56:31

over here

56:56

i know what did i call that you called that

57:03

you can do it btn count ah i think that's right

57:08

all right and don't forget the text l on the bottom of the back of these all right so

57:14

if we're removing then we want to do count l

57:22

um dot

57:29

text content equals

57:34

number count l dot text content

57:40

minus one uh count l dot

57:45

text content equals number count l dot

57:52

there's definitely a cleaner way to write this but we'll stick with it

57:58

for now okay and if we click not a number exactly what i wanted

58:05

perfect all right so

58:13

let me see what it's getting is text content here so

58:22

see what the count l is as well as the text content

58:37

oh it's got the new lines in it okay that's uh yeah that's the thing

58:44

all right that's easy fix

58:58

scroll down scroll down scroll down here we are not a number still

59:06

telling me zero is not a number

59:22

hmm

59:46

that's interesting

1:00:02

context oh my gosh

1:00:09

all right it's going to say 0 is definitely a number

1:00:15

there we go okay so now that we have one like there

1:00:21

and we know that this particular user can't you know like this

1:00:26

comment again let's make sure that the account is actually per user so let's go ahead and sign out

1:00:34

sign in as somebody different uh

1:00:39

just use the github account i guess

1:00:45

okay let's see it was this one scroll down

1:00:51

okay so no longer identifying that i liked it but that somebody has liked it being

1:00:58

that this is not red but it is gray and hollowed out meaning that i have not liked this with this account yet but it

1:01:05

does have the one signifying that somebody else has liked it and so if i click it again this should

1:01:10

go back for this user this should go to red and the count should go to two and there we go and if i click it again

1:01:16

it should go down to one and the heart should go boom cool

1:01:22

same thing with the other one cool and same thing with one that isn't

1:01:28

that one cool

1:01:36

hey tina thanks for stopping by uh enjoy your time off work happy friday

1:01:43

um so really the last thing that i would want to do is to get that

1:01:49

border off of there is that a border or make it a dark yeah that's some kind of a border looks

1:01:54

like it's going in and out like it goes away whenever however oh that's the um

1:02:00

btn outline

1:02:05

[Music] apologies about the car

1:02:11

uh so all right let's clean that up a little bit

1:02:18

and let's head in over here so outline hover i'd say don't get rid of

1:02:25

that because that looks a little funky and instead of doing that let's just um uh

1:02:32

let's just keep it there

1:02:37

and instead of adding the active class to this

1:02:43

let's add it to the parent

1:02:49

that way we can do i just removed it btn hover fill

1:02:54

active dot btn outline i think it was color

1:03:00

theme colors dot red 700

1:03:10

okay so now that border should just turn to red whenever you like it

1:03:21

oh right shoot you gotta switch the selector is it a base that was in base

1:03:29

all right so like icon l

1:03:34

dang man what was that called btn hover fill the uh weirdest name i think i've ever

1:03:41

given to a button i don't i don't really know where my head was at whenever i wrote that

1:03:48

but uh all right so boom back to that and there's no more

1:03:53

weird border action going on whenever i hover and unhover so that looks good to me so we've got

1:03:58

this working we have verified that it is unique per user didn't quite get it working

1:04:05

as i'd hoped but we got it working nonetheless so that's all that matters

1:04:10

i think this might be the last time i stream on a friday night [Laughter] uh it's kind of hard

1:04:17

your brain just wants to shut down but uh we're supposed to get some bad storms

1:04:23

tomorrow so i wanted to stream today instead of tomorrow because you never know

1:04:28

you never know um but uh yeah so we got this working i think tomorrow i'm going to actually

1:04:35

work on getting the site uh well it already is deployed so uh

1:04:40

it's already at its new domain but i think i'm going to work on actually making it the primary domain and

1:04:48

getting jaeger switched over to it and changing all of the names and all that fun stuff so thank you all so much for

1:04:54

watching i will see you all in the next one and hopefully with a different name

1:04:59

than jaeger and on a brand new site which we're looking at right now so long as i don't find any issues

1:05:05

between now and when i go to release it so alrighty have a good weekend everybody

Join The Discussion! (8 Comments)

Please sign in or sign up for free to join in on the dicussion.

  1. farhan-reizha
    Commented 11 months ago

    other than using .preload("commentVotes") is there any other way?

    0

    Please sign in or sign up for free to reply

    1. tomgobich
      Commented 11 months ago

      Yes, but it depends on what solution you're looking for.

      There's the direct alternative to preload, called load which can be used on a model instances:

      const comment = await Comment.findOrFail(1)
      await comment.load('commentVotes')

      You can also reach through the comment to grab the votes directly:

      const comment = await Comment.findOrFail(1)
      const votes = await comment.related('commentVotes').query()

      If you always want the votes to be preloaded anytime you query the comments, you could use a third-party package by Melchyore call "adonis-auto-preload".

      1

      Please sign in or sign up for free to reply

      1. farhan-reizha
        Commented 11 months ago

        i see, but if i want to grab just commentVotes count only, how is that?

        0

        Please sign in or sign up for free to reply

        1. tomgobich
          Commented 11 months ago

          Ah okay, you can do that one of the following ways

          // counting via relation, accessible within $extras
          const comments = await Comment.query()
            .withCount('commentVotes', query => query.as('commentVoteCount'))
          
          comments[0].$extras.commentVoteCount
          
          // counting on it's own
          const voteCount = await CommentVote.query().count('*').firstOrFail()
          
          // reaching through relation
          const comment = await Comment.findOrFail(1)
          const votes = await comment.related('commentVotes').query().count('*')

          I'm sure there are other ways as well, but this is what immediately comes to mind and should give you an idea.

          Here's a link to the with count documentation

          Here's a link to the count documentation

          1

          Please sign in or sign up for free to reply

          1. farhan-reizha
            Commented 11 months ago

            means if using withCount it should use $extras?

            0

            Please sign in or sign up for free to reply

            1. tomgobich
              Commented 11 months ago

              Yeah, if you use withCount the counted value will be placed on the model's $extras property.

              0

              Please sign in or sign up for free to reply

              1. farhan-reizha
                Commented 11 months ago

                ok, thanks for answering me, because I just tried this framework just a few weeks ago.

                0

                Please sign in or sign up for free to reply

                1. tomgobich
                  Commented 11 months ago

                  Anytime!! Hope you're enjoying it! 😊

                  0

                  Please sign in or sign up for free to reply