Navigating threads.

lms/djangoapps/django_comment_client/forum/views.py

@@ -224,17 +224,13 @@ def single_thread(request, course_id, discussion_id, thread_id):
             course_id,
         )
 
-
         user_info = cc.User.from_django_user(request.user).to_dict()
-        thread = cc.Thread.find(thread_id).retrieve(recursive=True)
-        annotated_content_info = utils.get_annotated_content_infos(course_id, thread=thread, user=request.user, user_info=user_info)
-
 
         context = {
             'discussion_id': discussion_id,
             'csrf': csrf(request)['csrf_token'],
             'init': '',
-            'annotated_content_info': json.dumps(annotated_content_info),
+            'user_info': json.dumps(user_info),
             'content': render_single_thread(request, discussion_id, course_id, thread_id),
             'course': course,
             'recent_active_threads': recent_active_threads,

lms/static/coffee/src/discussion/discussion_router.coffee

+class @DiscussionRouter extends Backbone.Router
+  routes:
+    "": "allThreads"
+    ":forum_name/threads/:thread_id" : "showThread"
+
+  initialize: (options) ->
+      @user = options['user']
+      @discussion = options['discussion']
+      @displayNav()
+      @forum = null
+
+  allThreads: ->
+      true
+
+  showThread: (forum_name, thread_id) ->
+    @forum = forum_name
+    thread = @discussion.get(thread_id)
+    view = new DiscussionThreadView(el: $(".discussion-column"), model: thread, user: @user)
+    view.render()
+
+  displayNav: ->
+    view = new DiscussionThreadListView(collection: @discussion, el: $(".post-list"))
+    view.on "thread:selected", @navigateToThread
+    view.render()
+
+  navigateToThread: (thread_id) =>
+    @navigate("#{@forum}/threads/#{thread_id}", trigger: true)

lms/static/coffee/src/discussion/models/discussion_user.coffee

@@ -3,8 +3,7 @@ class @DiscussionUser
         @content_info = content_info
 
     following: (thread) ->
-        @content_info[thread.id]['subscribed'] == true
+        _.include(@content_info['subscribed_thread_ids'], thread.id)
 
     voted: (thread) ->
-        @content_info[thread.id]['voted'] == 'up'
-
+        _.include(@content_info['upvoted_ids'], thread.id)

lms/static/coffee/src/discussion/views/discussion_thread_list_view.coffee

@@ -4,5 +4,9 @@ class @DiscussionThreadListView extends Backbone.View
     @
   renderThreadListItem: (thread) =>
     view = new ThreadListItemView(model: thread)
+    view.on "thread:selected", @threadSelected
     view.render()
     @$el.append(view.el)
+
+  threadSelected: (thread_id) =>
+    @trigger("thread:selected", thread_id)

lms/static/coffee/src/discussion/views/discussion_thread_view.coffee

@@ -2,9 +2,12 @@ class @DiscussionThreadView extends Backbone.View
   events:
     "click .discussion-vote-up": "toggleVote"
     "click .dogear": "toggleFollowing"
+  template: _.template($("#thread-template").html())
+
   initialize: (options) ->
     @user = options['user']
     @model.bind "change", @updateModelDetails
+    @$el.html(@template(@model.toJSON()))
 
   updateModelDetails: =>
     @$(".votes-count-number").html(@model.get("votes")["up_count"])

lms/static/coffee/src/discussion/views/thread_list_item_view.coffee

 class @ThreadListItemView extends Backbone.View
   tagName: "li"
   template: _.template($("#thread-list-item-template").html())
+  events:
+    "click a": "threadSelected"
   initialize: ->
     @model.on "change", @render
   render: =>
     @$el.html(@template(@model.toJSON()))
     @
+  threadSelected: ->
+    @trigger("thread:selected", @model.id)
+    false

lms/templates/discussion/single_thread.html

@@ -58,7 +58,7 @@
         <div class="browse is-open">
           <a href="#" class="board-drop-icon"></a>
           <a href="#" class="board-drop-btn"><span class="current-board">Homework / Week 1</span> <span class="drop-arrow">▾</span></a>
-        </div>            
+        </div>
         <ul class="board-drop-menu">
           <li><a href="#"><span class="board-name">All</span> <span class="unread">1,248</span></a></li>
           <li><a href="#"><span class="board-name">Following</span></a></li>
@@ -97,30 +97,46 @@
       </div>
     </div>
 
-    <div class="discussion-column">      
+    <div class="discussion-column">
 
-      ${content.decode('utf-8')}
 
     </div>
   </div>
 </div>
 
+<script type="text/template" id="thread-template">
+  <article class="discussion-article" data-id="${'<%= id %>'}">
+    <a href="#" class="dogear"></a>
+    <div class="discussion-post">
+      <header>
+        <a href="#" class="vote-btn discussion-vote discussion-vote-up"><span class="plus-icon">+</span> <span class='votes-count-number'>${'<%= votes["up_count"] %>'}</span></a>
+        <h1>${'<%= title %>'}</h1>
+        <p class="posted-details">
+          <span class="timeago" title="${'<%= created_at %>'}">sometime</span> by
+          <a href="${'<%= user_id %>'}">${'<%= username %>'}</a>
+        </p>
+      </header>
+      <div class="post-body">
+        ${'<%= body %>'}
+      </div>
+    </div>
+    <ol class="responses">
+    </ol>
+  </article>
+</script>
+
 <script type="text/template" id="thread-list-item-template">
-    <a href="#"><span class="title">${"<%= title %>"}</span> <span class="comments-count">${"<%= comments_count %>"}</span><span class="votes-count">+${"<%= votes['up_count'] %>"}</span></a>
+    <a href="${'<%= id %>'}"><span class="title">${"<%= title %>"}</span> <span class="comments-count">${"<%= comments_count %>"}</span><span class="votes-count">+${"<%= votes['up_count'] %>"}</span></a>
 </script>
 
 <script>
     $$contents = {}
     $$discussions = {}
     $(document).ready(function() {
-        var user = new DiscussionUser(JSON.parse("${annotated_content_info | escapejs}"));
+        var user = new DiscussionUser(JSON.parse("${user_info | escapejs}"));
         var discussion = new Discussion(JSON.parse("${threads | escapejs}"));
 
-        list_view = new DiscussionThreadListView({collection: discussion, el: $(".post-list")});
-        list_view.render();
-
-        var thread = discussion.get("${thread_id | escapejs}")
-        view = new DiscussionThreadView({el: $(".discussion-article"), model: thread, user: user});
-        view.render();
+        var app = new DiscussionRouter({user: user, discussion: discussion})
+        Backbone.history.start({pushState: true, root: "/courses/${course_id}/discussion/forum/"})
     });
 </script>