Merge branch 'feature/tomg/new-discussions' of github.com:MITx/mitx into…

Merge branch 'feature/tomg/new-discussions' of github.com:MITx/mitx into feature/tomg/new-discussions

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) ->
+      @discussion = options['discussion']
+      @nav = new DiscussionThreadListView(collection: @discussion, el: $(".post-list"))
+      @nav.on "thread:selected", @navigateToThread
+      @nav.render()
+
+  allThreads: ->
+      true
+
+  showThread: (forum_name, thread_id) ->
+    @nav.setActiveThread(thread_id)
+    thread = @discussion.get(thread_id)
+    view = new DiscussionThreadView(el: $(".discussion-column"), model: thread)
+    view.render()
+
+  navigateToThread: (thread_id) =>
+    thread = @discussion.get(thread_id)
+    @navigate("#{thread.get("commentable_id")}/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,15 @@ 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) =>
+    @setActiveThread(thread_id)
+    @trigger("thread:selected", thread_id)
+
+  setActiveThread: (thread_id) ->
+    @$("a").removeClass("active")
+    @$("a[data-id='#{thread_id}']").addClass("active")
+

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

@@ -2,22 +2,35 @@ 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"])
 
   render: ->
-    if @user.following(@model)
+    if window.user.following(@model)
       @$(".dogear").addClass("is-followed")
 
-    if @user.voted(@model)
+    if window.user.voted(@model)
       @$(".vote-btn").addClass("is-cast")
-
+    @$("span.timeago").timeago()
+    @renderResponses()
     @
 
+  renderResponses: ->
+    $.ajax @model.id, success: (data, textStatus, xhr) =>
+      comments = new Comments(data['content']['children'])
+      comments.each @renderResponse
+
+  renderResponse: (response) =>
+      view = new ThreadResponseView(model: response)
+      view.render()
+      @$(".responses").append(view.el)
+
   toggleVote: ->
     @$(".vote-btn").toggleClass("is-cast")
     if @$(".vote-btn").hasClass("is-cast")

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

+class @ResponseCommentView extends Backbone.View
+  tagName: "li"
+  template: _.template($("#response-comment-template").html())
+  render: ->
+    @$el.html(@template(@model.toJSON()))
+    @

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()))
+    if window.user.following(@model)
+      @$("a").addClass("followed")
     @
+  threadSelected: ->
+    @trigger("thread:selected", @model.id)
+    false

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

+class @ThreadResponseView extends Backbone.View
+  tagName: "li"
+  template: _.template($("#thread-response-template").html())
+  render: ->
+    @$el.html(@template(@model.toJSON()))
+    @renderComments()
+    @
+
+  renderComments: ->
+      @model.get("comments").each @renderComment
+
+  renderComment: (comment) =>
+    view = new ResponseCommentView(model: comment)
+    view.render()
+    @$(".comments").append(view.el)

lms/templates/discussion/_single_thread.html

@@ -30,4 +30,3 @@
 </article>
 
 <%include file="_js_data.html" />
-<script type="text/javascript">$(document).ready(function() { $("span.timeago").timeago() })</script>

lms/templates/discussion/single_thread.html

@@ -59,7 +59,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>
@@ -98,30 +98,56 @@
       </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-response-template">
+  <div class="response-body">${"<%= body %>"}</div>
+  <ol class="comments">
+  </ol>
+</script>
+
+<script type="text/template" id="response-comment-template">
+  <p>${'<%= body %>'}</p>
+</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 %>'}" data-id="${'<%= 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}"));
+        window.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({discussion: discussion})
+        Backbone.history.start({pushState: true, root: "/courses/${course_id}/discussion/forum/"})
     });
 </script>