diff options
author | Miguel Ángel Moreno <mail@migalmoreno.com> | 2022-12-29 02:26:20 +0100 |
---|---|---|
committer | Miguel Ángel Moreno <mail@migalmoreno.com> | 2022-12-29 02:26:20 +0100 |
commit | 8c46de38348c421c0c9f102d604fcfc18807c0bb (patch) | |
tree | 3174b4392ca3eadd24c1da06929830b220764e38 /src/frontend/tau/components/comments.cljs | |
parent | dfcc61063822dfb0fe699896da312249e93d5439 (diff) |
feat(frontend): Add further features and address quirks
Diffstat (limited to 'src/frontend/tau/components/comments.cljs')
-rw-r--r-- | src/frontend/tau/components/comments.cljs | 59 |
1 files changed, 59 insertions, 0 deletions
diff --git a/src/frontend/tau/components/comments.cljs b/src/frontend/tau/components/comments.cljs new file mode 100644 index 0000000..8f9300b --- /dev/null +++ b/src/frontend/tau/components/comments.cljs @@ -0,0 +1,59 @@ +(ns tau.components.comments + (:require + [re-frame.core :as rf] + [reitit.frontend.easy :as rfe] + [tau.components.loading :as loading] + [tau.events :as events] + ["timeago.js" :as timeago])) + +(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 + (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}]]]]) + [:div.ml-2 + [:div.flex.items-center + (when pinned? + [:i.fa-solid.fa-thumbtack.mr-2]) + [:a {:href (rfe/href :tau.routes/channel nil {:url uploader-url}) :title name} + [:h1.text-gray-300.font-bold uploader-name]] + (when uploader-verified? + [:i.fa-solid.fa-circle-check.ml-2])] + [:div.my-2 + [:p text]] + [:div..flex.items-center.my-2 + [:div.mr-4 + [:p (if (-> upload-date js/Date.parse js/isNaN) + upload-date + (timeago/format upload-date))]] + (when like-count + [:div.flex.items-center.my-2 + [:i.fa-solid.fa-thumbs-up] + [:p.mx-1 like-count]]) + (when hearted-by-uploader? + [: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")}]])]]]) + +(defn comments + [{:keys [comments next-page disabled?]} author-name author-avatar url] + (let [pagination-loading? @(rf/subscribe [:show-pagination-loading]) + 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])] + (when (:url next-page) + (if pagination-loading? + (loading/comments-pagination-loading-icon service-color) + [:div.flex.items-center.justify-center + {:style {:cursor "pointer"} + :on-click #(rf/dispatch [::events/comments-pagination url (:url next-page)])} + [:i.fa-solid.fa-plus] + [:p.px-2 "Show more comments"]]))])) |