Comment Likes & Unlikes

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