From 5fc4b8d6edb031cd4a65f788f15832eb659fd2bf Mon Sep 17 00:00:00 2001
From: Miguel Ángel Moreno <mail@migalmoreno.com>
Date: Sat, 31 Dec 2022 11:57:10 +0100
Subject: feat: Add support for comment replies

---
 src/frontend/tau/components/comments.cljs | 39 ++++++++++++++++++++++---------
 src/frontend/tau/events.cljs              | 12 +++++++++-
 2 files changed, 39 insertions(+), 12 deletions(-)

(limited to 'src/frontend')

diff --git a/src/frontend/tau/components/comments.cljs b/src/frontend/tau/components/comments.cljs
index 9802647..6c64339 100644
--- a/src/frontend/tau/components/comments.cljs
+++ b/src/frontend/tau/components/comments.cljs
@@ -9,19 +9,21 @@
 (defn comment-item
   [{:keys [id text uploader-name uploader-avatar uploader-url
            upload-date uploader-verified? like-count hearted-by-uploader?
-           pinned? replies key]} author-name author-avatar]
-  [:div.flex.my-4
+           pinned? replies reply-count key show-replies author-name author-avatar]}]
+  [:div.flex.my-4 {:key key}
    (when uploader-avatar
      [:div.flex.items-center.py-3.box-border.h-12
-      [:div.w-12
-       [:a {:href (rfe/href :tau.routes/channel nil {:url uploader-url}) :title name}
-        [:img.rounded-full.object-cover.min-w-full.min-h-full {:src uploader-avatar}]]]])
+      (when uploader-url
+        [:div.w-12
+         [:a {:href (rfe/href :tau.routes/channel nil {:url uploader-url}) :title uploader-name}
+          [:img.rounded-full.object-cover.min-w-full.min-h-full {:src uploader-avatar}]]])])
    [:div.ml-4
     [:div.flex.items-center
      (when pinned?
        [:i.fa-solid.fa-thumbtack.mr-2.text-xs])
-     [:a {:href (rfe/href :tau.routes/channel nil {:url uploader-url}) :title name}
-      [:h1.text-gray-300.font-bold uploader-name]]
+     (when uploader-name
+       [:a {:href (rfe/href :tau.routes/channel nil {:url uploader-url}) :title uploader-name}
+        [:h1.text-gray-300.font-bold uploader-name]])
      (when uploader-verified?
        [:i.fa-solid.fa-circle-check.ml-2])]
     [:div.my-2
@@ -31,7 +33,7 @@
       [:p (if (-> upload-date js/Date.parse js/isNaN)
             upload-date
             (timeago/format upload-date))]]
-     (when like-count
+     (when (and like-count (> like-count 0))
        [:div.flex.items-center.my-2
         [:i.fa-solid.fa-thumbs-up.text-xs]
         [:p.mx-1 like-count]])
@@ -39,7 +41,17 @@
        [:div.relative.w-4.h-4.mx-2
         [:i.fa-solid.fa-heart.absolute.-bottom-1.-right-1.text-xs.text-red-500]
         [:img.rounded-full.object-covermax-w-full.min-h-full
-         {:src author-avatar :title (str author-name " hearted this comment")}]])]]])
+         {:src author-avatar :title (str author-name " hearted this comment")}]])]
+    [:div.flex.ml-8.items-center.cursor-pointer
+     {:on-click #(rf/dispatch [::events/toggle-comment-replies id])}
+     (when replies
+       (if show-replies
+         [:<>
+          [:p.font-bold "Hide replies"]
+          [:i.fa-solid.fa-turn-up.mx-2.text-xs]]
+         [:<>
+          [:p.font-bold (str reply-count (if (= reply-count 1) " reply" " replies"))]
+          [:i.fa-solid.fa-turn-down.mx-2.text-xs]]))]]])
 
 (defn comments
   [{:keys [comments next-page disabled?]} author-name author-avatar url]
@@ -47,8 +59,13 @@
         service-color @(rf/subscribe [:service-color])]
     [:div.flex.flex-col
      [:div
-      (for [[i comment] (map-indexed vector comments)]
-        [comment-item (assoc comment :key i) author-name author-avatar])]
+      (for [[i {:keys [replies show-replies] :as comment}] (map-indexed vector comments)]
+        [:div.flex.flex-col {:key i}
+         [comment-item (assoc comment :key i :author-name author-name :author-avatar author-avatar)]
+         (when (and replies show-replies)
+           [:div {:style {:marginLeft "32px"}}
+            (for [[i reply] (map-indexed vector (:items replies))]
+              [comment-item (assoc reply :key i :author-name author-name :author-avatar author-avatar)])])])]
      (when (:url next-page)
        (if pagination-loading?
          (loading/loading-icon service-color)
diff --git a/src/frontend/tau/events.cljs b/src/frontend/tau/events.cljs
index d6f9743..12404dc 100644
--- a/src/frontend/tau/events.cljs
+++ b/src/frontend/tau/events.cljs
@@ -210,9 +210,19 @@
 
 (rf/reg-event-db
  ::toggle-comments
- (fn [db [_ res]]
+ (fn [db _]
    (assoc-in db [:stream :show-comments] (not (-> db :stream :show-comments)))))
 
+(rf/reg-event-db
+ ::toggle-comment-replies
+ (fn [db [_ comment-id]]
+   (update-in db [:stream :comments-page :comments]
+              (fn [comments]
+                (map #(if (= (:id %) comment-id)
+                        (assoc % :show-replies (not (:show-replies %)))
+                        %)
+                     comments)))))
+
 (rf/reg-event-db
  ::load-paginated-comments
  (fn [db [_ res]]
-- 
cgit v1.2.3