add buggy, basic message list

api/v1/gateway/index.js

@@ -55,6 +55,7 @@ GatewayServer.prototype.eventSetup = function() {
             if (permissionLevel < config.roleMap.USER) return this.authDisconnect(socket, callback);
 
             socket.username = data.username;
+            socket.userId = user._id;
             console.log(`[*] [gateway] [handshake] User ${data.username} has successfully authenticated`);
             return callback();
         });
@@ -69,14 +70,18 @@ GatewayServer.prototype.eventSetup = function() {
 
             socket.on('message', ({ categoryId, content }) => {
                 // TODO: URGENT: Check if the category exists and if the user has access to it (access coming soon)
-                socket.to(categoryId).emit('message', {
+                const msgConfig = {
                     username: socket.username,
+                    creatorId: socket.userId,
                     categoryId: categoryId,
                     content: content
-                });
+                };
+                
+                socket.to(categoryId).emit('message', msgConfig);
+                socket.emit('message', msgConfig);
             });
 
-            socket.on('subscribe', (categories) => {
+            socket.on('subscribe', async (categories) => {
                 for (let v of categories) {
                     // TODO: URGENT: Check if the category exists and if the user has access to it (access coming soon)
                     socket.join(v);

app/app.html

@@ -92,12 +92,12 @@
             <md-toolbar v-show="selection.category.browsing" class="md-dense" md-elevation="5">
                 <h3 v-if="selection.category.isCategory" class="md-title" style="flex: 1">Browsing category: {{ selection.category.title }}</h3>
                 <h3 v-if="!selection.category.isCategory" class="md-title" style="flex: 1">Browsing {{ selection.category.title }}</h3>
-                <md-button @click="browseCategories()" v-if="selection.category.isCategory">Back</md-button>
+                <md-button @click="browseCategories()" v-if="selection.category.isCategory || selection.category.isChatContext">Back</md-button>
-                <md-button @click="refresh()">Refresh</md-button>
+                <md-button @click="refresh()" v-if="!selection.category.isChatContext">Refresh</md-button>
             </md-toolbar>
 
             <div id="posts-container" v-if="selection.category.browsing">
-                <md-card v-for="post in selection.posts" v-bind:key="post._id">
+                <md-card v-for="post in selection.posts" v-bind:key="post._id" v-if="!selection.category.isChatContext">
                     <md-card-header>
                         <div class="md-title" v-html="post.title"></div>
                         <span>by <a class="md-dense cursor" v-on:click="viewProfile(post.creator._id)">{{ post.creator.username }}</a></span>
@@ -109,6 +109,16 @@
                         <md-button v-for="button in cardButtons" v-bind:key="button.text" @click="button.click(post)">{{ button.text }}</md-button>
                     </md-card-actions>
                 </md-card>
+                <div v-for="post,k in messages[selection.category._id]" v-if="selection.category.isChatContext" :key="post.content + post.creatorId + k">
+                    <md-card>
+                        <md-card-header>
+                            <a class="md-dense cursor md-title" v-on:click="viewProfile(post.creatorId)"><span>{{ post.username }}</span></a>
+                        </md-card-header>
+    
+                        <md-card-content v-html="post.content"></md-card-content>
+                    </md-card>
+                    <br>
+                </div>
             </div>
 
             <md-speed-dial class="md-fixed md-bottom-right" md-direction="top" md-elevation="5" style="z-index: 4000;">

app/resources/js/app.js

@@ -125,7 +125,8 @@ const app = new Vue({
                 title: '',
                 browsing: false,
                 _id: undefined,
-                isCategory: false
+                isCategory: false,
+                isChatContext: false
             },
             posts: []
         },
@@ -152,10 +153,6 @@ const app = new Vue({
             role: ''
         },
         gateway: new GatewayConnection(),
-        viewingChat: {
-            show: false,
-            categoryId: 'X'
-        },
         messages: {
             'X': [ { username: 'NONEXISTENT_TEST_ACCOUNT', content: 'TEST MSG' } ]
         }
@@ -226,18 +223,18 @@ const app = new Vue({
                 this.notification('ERROR: You have been disconnected from the gateway. Realtime features such as chat will not work and unexpected errors may occur.');
             };
             this.gateway.onConnect = () => {
-                this.gateway.socket.on('message', ({ username, categoryId, content }) => {
+                this.gateway.socket.on('message', ({ username, categoryId, content, creatorId }) => {
-                    this.showMessageNotification(categoryId, username, content);
+                    this.showMessageNotification(categoryId, username, creatorId, content);
                 })
             };
             this.gateway.connect(this.loggedInUser.token);
         },
-        showMessageNotification: async function(categoryId, username, content) {
+        showMessageNotification: async function(categoryId, username, creatorId, content) {
+            if (!this.messages[categoryId]) this.messages[categoryId] = []
+            this.messages[categoryId].push({ username, content, creatorId });
+            
             this.resetSnackbarButton();
             this.notification(`${username}: ${content}`);
-
-            if (!this.messages[categoryId]) this.messages[categoryId] = []
-            this.messages[categoryId].push({ username, content });
         },
         button: function(text, click) {
             this.cardButtons.push({ text, click });
@@ -394,6 +391,7 @@ const app = new Vue({
                 this.selection.category._id = _id;
                 this.selection.category.browsing = true;
                 this.selection.category.isCategory = true;
+                this.selection.category.isChatContext = false;
                 this.selection.posts = [];
 
                 this.cardButtons = [];
@@ -408,7 +406,12 @@ const app = new Vue({
             }
         },
         openChatForCategory: async function(categoryId) {
+            this.gateway.subscribeToCategoryChat(categoryId);
             
+            this.selection.category.isChatContext = true;
+            this.selection.category.browsing = true;
+            this.selection.category.title = 'Chat';
+            this.selection.category._id = categoryId;
         },
         browseCategories: async function() {
             const res = await fetch(`${window.location.origin}/api/v1/content/category/list?count=50`, {
@@ -425,13 +428,14 @@ const app = new Vue({
                 this.selection.category.title = 'categories';
                 this.selection.category.browsing = true;
                 this.selection.category.isCategory = false;
+                this.selection.category.isChatContext = false;
                 this.selection.posts = [];
 
                 this.cardButtons = [];
 
                 this.button('Chat', (post) => {
                     if (post._id) {
-                        this.gateway.subscribeToCategoryChat(post._id);
+                        this.openChatForCategory(post._id);
                         this.gateway.sendMessage(post._id, 'yoooo');
                     }
                 });