1
00:00:00,440 --> 00:00:07,190
We've now had the opportunity to mess around a little bit with our join function and our handle in function.

2
00:00:07,310 --> 00:00:13,940
We're now going to kind of leave behind all this demo and exploration stuff and focus more on the real

3
00:00:13,940 --> 00:00:18,320
problem at hand, which is to just load our list of comments up onto the screen.

4
00:00:18,800 --> 00:00:23,370
So at this point, I'm going to find my handle in function inside the comments channel.

5
00:00:23,390 --> 00:00:28,490
I'm going to clear out all this log stuff that we have because I don't like having log statements laying

6
00:00:28,490 --> 00:00:29,240
around.

7
00:00:29,720 --> 00:00:34,550
Okay, So now we want to focus on loading up our list of comments and somehow getting them onto the

8
00:00:34,550 --> 00:00:35,400
screen.

9
00:00:35,420 --> 00:00:41,090
Now, something I want to make really clear to you, just in case it's not quite clear yet, is that

10
00:00:41,090 --> 00:00:46,970
we are going to use our WebSocket connection to fetch this list of comments and then we are going to

11
00:00:46,970 --> 00:00:48,850
render them on the client side.

12
00:00:48,860 --> 00:00:54,080
So we're not going to use an HTML template like we have previously for rendering this list of template

13
00:00:54,110 --> 00:01:00,930
of this list of comments, We're going to entirely rely upon our JavaScript code to fetch the list of

14
00:01:00,930 --> 00:01:03,360
comments and then render them to the screen.

15
00:01:03,540 --> 00:01:04,530
So that's the plan.

16
00:01:06,730 --> 00:01:12,970
Speaking of the list of comments on the screen, I want to mention one little issue that we haven't

17
00:01:12,970 --> 00:01:14,780
quite addressed just yet.

18
00:01:14,800 --> 00:01:21,940
As we know, the comments that we have created or the comment model that we have created is associated

19
00:01:21,940 --> 00:01:23,980
with a very particular topic.

20
00:01:24,250 --> 00:01:27,790
So when you leave comments, they are associated with a particular topic.

21
00:01:28,030 --> 00:01:35,450
Right now on our topic show page, we know what topic we're looking at based on the URL.

22
00:01:35,470 --> 00:01:43,330
So when the user goes to localhost colon 4000 slash six, that means that we want to show the topic

23
00:01:43,330 --> 00:01:47,140
and comments associated with topic ID six.

24
00:01:48,100 --> 00:01:53,950
So my question to you is, inside of this join function where we're saying that we're going to return

25
00:01:53,950 --> 00:01:57,300
back the list of all the comments associated with this topic.

26
00:01:57,310 --> 00:02:01,750
How can we figure out what topic we are trying to look at?

27
00:02:01,780 --> 00:02:08,240
How can we figure out what that we want to find like topic with ID six and find all the comments associated

28
00:02:08,240 --> 00:02:09,199
with that?

29
00:02:09,229 --> 00:02:16,130
We need to somehow when we join a channel, indicate what topic we are trying to learn more about.

30
00:02:16,310 --> 00:02:17,060
So that's our goal.

31
00:02:17,060 --> 00:02:19,760
That's what we have to kind of figure out how to do.

32
00:02:20,800 --> 00:02:22,600
So I've got a plan on how to do this.

33
00:02:22,600 --> 00:02:23,470
So let's talk about it.

34
00:02:23,470 --> 00:02:25,960
Let's talk about what the plan is, what the plan is going to be.

35
00:02:25,960 --> 00:02:31,240
I do want to mention to you one quick thing before we actually talk about this plan.

36
00:02:31,240 --> 00:02:36,760
I want to remind you that right now our socket file, our socket JS file, where we make some initial

37
00:02:36,760 --> 00:02:44,740
contact, is all code that is instantly executed the instant that we load up our our web page.

38
00:02:44,740 --> 00:02:44,980
Right?

39
00:02:44,980 --> 00:02:50,260
Like just as soon as web page loads, this code is executed and there's like nothing to stop it from

40
00:02:50,260 --> 00:02:50,950
running right now.

41
00:02:51,130 --> 00:02:52,780
So I just want to point that out really quick.

42
00:02:54,040 --> 00:02:54,340
Okay.

43
00:02:54,340 --> 00:02:55,390
So here's the plan.

44
00:02:56,320 --> 00:03:03,010
I'm going to suggest that we refactor all of that code that we just looked at, all that all that socket

45
00:03:03,010 --> 00:03:10,630
code on the JavaScript side into a single function or object or something that we will call our app

46
00:03:10,660 --> 00:03:12,310
on the JavaScript side.

47
00:03:12,640 --> 00:03:21,380
Then inside of our topic show template, we will add in a script tag in that script tags purpose will

48
00:03:21,380 --> 00:03:26,420
be to boot up our JavaScript app while passing in the topic ID.

49
00:03:26,930 --> 00:03:33,560
So that's what's going to kind of connect the dots here between the HTML template side and our JavaScript

50
00:03:33,560 --> 00:03:33,890
app.

51
00:03:33,890 --> 00:03:39,890
Knowing what topic it's trying to figure out or what what topic ID it's supposed to be showing, we're

52
00:03:39,890 --> 00:03:45,860
going to rely upon our template, adding a script tag that's going to start up our app and pass in the

53
00:03:45,860 --> 00:03:47,090
appropriate topic ID.

54
00:03:48,080 --> 00:03:55,820
Then once our client app, once our JavaScript app with ID gets booted up with a topic ID equal to one,

55
00:03:55,970 --> 00:04:02,930
our JavaScript app will attempt to join channel with comments Colon one and so one here is just a total

56
00:04:02,930 --> 00:04:03,680
example, right?

57
00:04:03,710 --> 00:04:06,200
Like whatever the topic id might be.

58
00:04:06,200 --> 00:04:08,540
One, two, three, four, five, six, whatever it might be.

59
00:04:08,630 --> 00:04:13,490
We will join comments colon whatever the topic ID is.

60
00:04:14,430 --> 00:04:19,320
Once we join that channel, the socket will be forwarded on to our comments channel.

61
00:04:20,190 --> 00:04:24,900
We will look at the string that was used to join that channel.

62
00:04:24,900 --> 00:04:26,670
We'll look at the ID on there.

63
00:04:26,670 --> 00:04:27,420
We'll notice.

64
00:04:27,480 --> 00:04:31,950
Okay, whatever this number is, this must be the ID of the record they were trying to fetch.

65
00:04:32,100 --> 00:04:38,160
We will find all the comments associated with that topic and then we'll send them back over to our JavaScript

66
00:04:38,160 --> 00:04:38,640
app.

67
00:04:38,640 --> 00:04:43,470
And our JavaScript app will be responsible for rendering our list of comments to the screen.

68
00:04:43,710 --> 00:04:45,150
So this is the overall plan.

69
00:04:45,150 --> 00:04:46,560
This is our overall goal.

70
00:04:46,560 --> 00:04:51,390
The real linchpin, the thing that makes it all work together is the fact that we are going to refactor

71
00:04:51,390 --> 00:04:58,020
our JavaScript app to be a function of sorts that is going to be that is going to expect to receive

72
00:04:58,020 --> 00:05:00,960
the ID of the topic that it needs to display.

73
00:05:01,230 --> 00:05:07,020
So let's take a quick break and come back and start refactoring our app to meet this type of contract.