blob: 044f87aa509400e7f1f96080058dca6aa6a1f258 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
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/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"]]))]))
|
