Coding

Laravel 5.2 PHP Build a social network – Likes & Dislikes (3/3 – Updating the View)

  • 00:00:00 welcome back we got all the
  • 00:00:03 functionality we need to like or dislike
  • 00:00:05 posts now what I want to do is I want to
  • 00:00:08 update our or Dom I want to update what
  • 00:00:12 we actually see here because right now
  • 00:00:14 we get no way of seeing if we like or
  • 00:00:16 dislike this post I will start in the
  • 00:00:19 dashboard to update it when we reload
  • 00:00:22 this page as I said you also want to
  • 00:00:25 implement the functionality to update it
  • 00:00:27 directly after we get back
  • 00:00:30 well the info that we successfully
  • 00:00:35 finished our Ajax request but also of
  • 00:00:38 course once you display the correct
  • 00:00:40 thing when this view is loaded now this
  • 00:00:46 will be a or will probably look a bit
  • 00:00:48 more complicated but I will explain
  • 00:00:51 detailed what we're doing now I'm
  • 00:00:53 replacing this like text here with a
  • 00:00:57 literal template expression and I will
  • 00:01:00 say off user which is the currently
  • 00:01:04 authenticated user I want to access all
  • 00:01:06 likes this user did so all the Liza's
  • 00:01:12 user did yeah and then I will again
  • 00:01:16 search for a post ID which matches the
  • 00:01:20 post ID of the current post we're
  • 00:01:23 looping through here now I want to say
  • 00:01:25 one thing right away this is fine for
  • 00:01:29 this app to do it like that a better way
  • 00:01:32 for a bigger app would certainly be
  • 00:01:35 besides other options you might have to
  • 00:01:38 do this in a controller and just added
  • 00:01:41 this posts array to attach info to each
  • 00:01:44 post that well this post is liked by the
  • 00:01:49 currently authenticated user or not so
  • 00:01:52 basically what we're doing here you
  • 00:01:54 would have to attach to each post
  • 00:01:55 element in the post array in the
  • 00:01:57 controller to have all the logic there
  • 00:02:00 and not do it here inside the post or
  • 00:02:03 this you rendering but it's fine for now
  • 00:02:07 and I really just want to show you how
  • 00:02:09 can how you can do such queries
  • 00:02:12 inside of you itself so what I'm doing
  • 00:02:16 here is I'm getting if it exists there
  • 00:02:24 like for this post here of this user
  • 00:02:29 disel fennekin user that is the same
  • 00:02:34 code as we ran in the post controller
  • 00:02:39 here where we got well the like or the
  • 00:02:46 info if this user liked or disliked this
  • 00:02:49 post so if we get something back here we
  • 00:02:53 know yep this user is actually liking or
  • 00:02:57 disliking this post therefore I will
  • 00:03:01 then copy this and now this is the part
  • 00:03:05 where it certainly is not optimal so as
  • 00:03:10 I said you might want to outsource this
  • 00:03:12 to post controller so now um during this
  • 00:03:16 but now accessing the like property of
  • 00:03:19 this like we got back and I can't do
  • 00:03:21 this here at the beginning because we
  • 00:03:22 could it would get an error if label is
  • 00:03:25 not able to find a post therefore we
  • 00:03:27 have to Tora like excuse me therefore we
  • 00:03:29 have to first check if a like exists
  • 00:03:32 before we can access this like property
  • 00:03:35 on this like and if this exists now we
  • 00:03:42 are accessing this property and if this
  • 00:03:43 is equal to 1 we know the usual likes
  • 00:03:46 this post therefore I will then output
  • 00:03:50 let's say you like this post
  • 00:03:54 otherwise I will output like so that
  • 00:03:59 well our links has just like it gives us
  • 00:04:03 the options you like it I will have
  • 00:04:07 another out statement here which also
  • 00:04:09 says like in the case we did not find a
  • 00:04:12 like on this post in the first place so
  • 00:04:18 I will save this reload click like
  • 00:04:22 reload again you like this post click on
  • 00:04:26 this and it's back to like those
  • 00:04:30 basically what I want to help now will
  • 00:04:33 copy all of that and do the same here
  • 00:04:37 for the dislike but of course here I'm
  • 00:04:40 checking if this is 0 so if it is a
  • 00:04:42 dislike and then I say let's say you
  • 00:04:45 don't escape it with a backslash escaped
  • 00:04:48 a quotation mark here you don't like
  • 00:04:51 this post or say dislike ok so let's
  • 00:04:58 load this again and I say dislike I load
  • 00:05:01 this
  • 00:05:02 you don't like this post and click on
  • 00:05:03 this I am going back to neutral state I
  • 00:05:07 can say dislike you don't like this post
  • 00:05:10 now click on like reload and you see you
  • 00:05:14 don't like to spoil change back just
  • 00:05:16 like but like change to you like this
  • 00:05:19 post so this looks exactly the way I
  • 00:05:21 wanted to work now the next thing is I
  • 00:05:24 want to trigger these changes from the
  • 00:05:27 callback of my HX request here in this
  • 00:05:31 done function so first thing I do is
  • 00:05:36 inside here I will use my event target
  • 00:05:41 which is just the anchor tag on which
  • 00:05:44 was clicked and I yeah I then went to
  • 00:05:50 change the inner text of this element so
  • 00:05:56 where it basically says like or dislike
  • 00:06:00 now what should this be equal to I will
  • 00:06:04 check that if is like so if we're
  • 00:06:10 clicking on the like button then I want
  • 00:06:14 you well either rename it to you like
  • 00:06:20 this post because we clicked unlike when
  • 00:06:22 it said like and we didn't already like
  • 00:06:24 it that I want to change it you to you
  • 00:06:27 like this post or if it already said
  • 00:06:30 this
  • 00:06:31 because we already liked the post I want
  • 00:06:34 to change it back to like now I will
  • 00:06:37 just check this by using II went target
  • 00:06:40 again or and let me just went to try it
  • 00:06:45 again and then I will again say in our
  • 00:06:50 text it's not a nurse if inner text is
  • 00:06:55 equal to like so currently it's saying
  • 00:07:00 like and we clicked on it so we didn't
  • 00:07:03 like it before but now we do like it in
  • 00:07:05 this case I want to say you like this
  • 00:07:11 post same text as here in the dashboard
  • 00:07:15 you like this post right it might be
  • 00:07:17 copied too if the same text because it
  • 00:07:20 should really be the same as it says
  • 00:07:22 when loading this or refreshing this
  • 00:07:24 page otherwise I know I can say like
  • 00:07:30 because it didn't have the inner text
  • 00:07:33 like to be like before that means it had
  • 00:07:36 to say you like this post which means we
  • 00:07:39 already liked it we undid it now and
  • 00:07:42 therefore now it has to say like again
  • 00:07:45 okay so now this is the first condition
  • 00:07:50 block here where we check if it says
  • 00:07:53 like but this is only relevant if we're
  • 00:07:58 any is live mode to begin with if we
  • 00:08:01 already or if we clicked on the like
  • 00:08:05 button now we define the same for the
  • 00:08:08 case that we're in the dislike mode
  • 00:08:13 we're clicking the dislike button so I
  • 00:08:16 will therefore again use you went target
  • 00:08:20 inner text and check if it is equal to
  • 00:08:26 dislike in that case I want to say you
  • 00:08:31 don't
  • 00:08:34 like this post otherwise I'm saying
  • 00:08:41 dislike and that is exactly the same
  • 00:08:44 logic as in the light case we're
  • 00:08:46 checking if it currently says dislike if
  • 00:08:49 it does and we clicked on this like we
  • 00:08:52 know we're now disliking this post and
  • 00:08:54 therefore we're changing the text of the
  • 00:08:56 anchor – you don't like the post if it
  • 00:08:59 didn't say dislike at the beginning we
  • 00:09:02 already dislike the post and now we
  • 00:09:04 undid it we deleted this entry so we
  • 00:09:07 change the text back to dislike let's
  • 00:09:10 save this reload click on you like this
  • 00:09:14 post and you can see it changes back
  • 00:09:16 like without me reloading this page
  • 00:09:19 click on like again and yeah we can
  • 00:09:22 toggle between these two states click on
  • 00:09:24 this like you don't like this post and
  • 00:09:27 so on click on like ok now you can see
  • 00:09:31 we're not changing back to dislike text
  • 00:09:35 in this case this only changes after
  • 00:09:37 refreshing certainly not what we want to
  • 00:09:39 do now to fix this little problem I will
  • 00:09:43 add another statement here where a check
  • 00:09:45 if I clicked on the like button and if I
  • 00:09:48 did this I want to change the other
  • 00:09:52 anchor so if I clicked on like I know
  • 00:09:55 this is the first anchor element so I
  • 00:09:58 will get the next element sibling which
  • 00:10:01 you know will be the dislike anchor and
  • 00:10:04 I will change its inner tacks to dislike
  • 00:10:10 because I know I clicked on like so it
  • 00:10:12 doesn't matter if I undid it or change
  • 00:10:16 it from this light to like this button
  • 00:10:19 always has to say dislike in this way or
  • 00:10:22 in this case because we're never be able
  • 00:10:25 to like and dislike a post at the same
  • 00:10:27 time otherwise if I did not click on the
  • 00:10:32 like button I will also get my event
  • 00:10:36 target but now it's – oops the previous
  • 00:10:39 element sibling so the anchor tag before
  • 00:10:42 the dislike button which is the like
  • 00:10:44 button and I will set
  • 00:10:46 dis siblings innertext – like so let me
  • 00:10:52 save this reload you like this post okay
  • 00:10:57 dislike like dislike so now it is a
  • 00:11:01 switch incorrectly and this is the like
  • 00:11:05 functionally built in with a checks with
  • 00:11:08 the updating of the dom without
  • 00:11:10 refreshing the page and with the
  • 00:11:14 functionality to not only like or not
  • 00:11:17 like a post but like not like dislike or
  • 00:11:20 not dislike a post so this is this now I
  • 00:11:24 will see you in the next videos bye