Merge pull request #35 from CMU-17313Q/userStory1BackEnd

Implemented back-end to retrieve and showcase users' available chats

node_modules_real/topics_list.tpl

@@ -1,5 +1,5 @@
 <ul component="category" class="topics-list list-unstyled" itemscope itemtype="http://www.schema.org/ItemList" data-nextstart="{nextStart}" data-set="{set}">
-    #
+
     {{{ each topics }}}
     <li component="category/topic" class="category-item hover-parent border-bottom py-3 py-lg-4 d-flex flex-column flex-lg-row align-items-start {function.generateTopicClass}" <!-- IMPORT partials/data/category.tpl -->>
         <link itemprop="url" content="{config.relative_path}/topic/{./slug}" />
@@ -48,7 +48,7 @@
                         <i class="fa fa-arrow-circle-right"></i>
                         <span>[[topic:moved]]</span>
                     </span>
-                    {{{each ./icons}}}<span class="lh-1">{@value}</span>{{{end}}}
+                    {{{ each ./icons }}}<span class="lh-1">{@value}</span>{{{ end }}}
 
                     {{{ if !template.category }}}
                     {function.buildCategoryLabel, ./category, "a", "border"}
@@ -135,9 +135,8 @@
             </div>
         </div>
     </li>
-    {{{end}}}
+    {{{ end }}}
 </ul>
-
 <!-- Share to Chat Modal (placed outside the loop) -->
 <div class="modal fade" id="shareToChatModal" tabindex="-1" aria-labelledby="shareToChatModalLabel" aria-hidden="true">
   <div class="modal-dialog modal-dialog-centered">
@@ -156,3 +155,136 @@
     </div>
   </div>
 </div>
+
+<!-- Event Handler Script (placed outside the loop) -->
+<script>
+  $(function () {
+    var selectedTid;
+
+    // Handle "Share Post to Chat" button click
+    $(document).on('click', 'button[component="topic/share-to-chat"]', function (e) {
+      e.stopPropagation();
+      e.preventDefault();
+
+      selectedTid = $(this).data('tid');
+      console.log('Selected Topic ID:', selectedTid);
+
+      // Open the modal
+      $('#shareToChatModal').modal('show');
+
+      // Fetch user's chats
+      fetchUserChats();
+    });
+
+    // Function to fetch user's chats
+    function fetchUserChats() {
+      var chatListContainer = $('.chat-list-container');
+      chatListContainer.html('<p class="text-muted text-center my-3">Loading your chats...</p>');
+
+      if (!app.user || !app.user.uid) {
+        chatListContainer.html('<p class="text-muted text-center my-3">You must be logged in to view your chats.</p>');
+        return;
+      }
+
+      $.ajax({
+        url: config.relative_path + '/api/user/' + app.user.userslug + '/chats',
+        method: 'GET',
+        success: function (data) {
+          if (data && data.rooms && data.rooms.length > 0) {
+            populateChatList(data.rooms);
+          } else {
+            chatListContainer.html('<p class="text-muted text-center my-3">You have no chats.</p>');
+          }
+        },
+        error: function (err) {
+          console.error('Error fetching chats:', err);
+          chatListContainer.html('<p class="text-danger text-center my-3">Unable to fetch your chats.</p>');
+        }
+      });
+    }
+
+    // Function to populate the chat list in the modal
+    function populateChatList(rooms) {
+      var chatListContainer = $('.chat-list-container');
+      chatListContainer.empty();
+
+      var listGroup = $('<ul class="list-group"></ul>');
+      rooms.forEach(function (room) {
+        var chatName = room.roomName || room.usernames.join(', ');
+
+        var listItem = $('<li class="list-group-item d-flex justify-content-between align-items-center"></li>');
+        listItem.text(chatName);
+
+        var shareButton = $('<button class="btn btn-primary btn-sm">Share</button>');
+		shareButton.on('click', function () {
+			var topicId = selectedTid;  // Use the selected topic ID
+			fetchTopicTitle(topicId, function(topicTitle) {
+				sharePostToChat(room.roomId, topicId, topicTitle);  // Pass both topicId and topicTitle
+			});
+		});
+
+
+        listItem.append(shareButton);
+        listGroup.append(listItem);
+      });
+
+      chatListContainer.append(listGroup);
+    }
+// Function to send the post content to the chat room via POST request
+function sendPostToChat(roomId, postContent) {
+    var csrfToken = config.csrf_token;  // Assuming CSRF token is available in the config
+
+    $.ajax({
+        url: config.relative_path + '/api/v3/chats/' + roomId,  // Assuming API v3
+        method: 'POST',
+        contentType: 'application/json',
+        headers: {
+            'x-csrf-token': csrfToken // Add CSRF token to the request headers
+        },
+        data: JSON.stringify({
+            message: postContent
+        }),
+        success: function (data) {
+            console.log('Message sent successfully to Room ID:', roomId);
+            // Close the modal after sending
+            $('#shareToChatModal').modal('hide');
+        },
+        error: function (err) {
+            console.error('Error sending message to chat room:', err);
+        }
+    });
+}
+
+// Function to share the post to the selected chat
+function sharePostToChat(roomId, tid, title) {
+    var postLink = 'http://localhost:4567' + '/topic/' + tid;
+    var postContent = 'Check out this topic: "' + title + '", ID: ' + tid + '. Here is the link: ' + postLink;
+
+    console.log('Sharing to Room ID:', roomId);
+    console.log('Post Content:', postContent);
+
+    // Send the post content to the chat room
+    sendPostToChat(roomId, postContent);
+}
+
+function fetchTopicTitle(tid, callback) {
+    $.ajax({
+        url: config.relative_path + '/api/topic/' + tid,  // NodeBB API to fetch topic details
+        method: 'GET',
+        success: function (data) {
+            if (data && data.title) {
+                callback(data.title);  // Return the title via the callback
+            } else {
+                callback("Unknown Topic");
+            }
+        },
+        error: function (err) {
+            console.error('Error fetching topic title:', err);
+            callback("Unknown Topic");
+        }
+    });
+}
+###
+
+ });
+</script>