Skip to content

Commit

Permalink
Merge pull request #2269 from shanberg/leaner-reactions
Browse files Browse the repository at this point in the history 
perf: leaner reactions
  • Loading branch information
@shanberg
shanberg authored Aug 10, 2022
2 parents d40699e + ea38f5b commit 1e5799d
Show file tree
Hide file tree
Showing 3 changed files with 58 additions and 46 deletions.
69 changes: 26 additions & 43 deletions src/cljs/athens/views/blocks/core.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,10 +5,9 @@
["/components/Block/PropertyName" :refer [PropertyName]]
["/components/Block/Reactions" :refer [Reactions]]
["/components/Block/Toggle" :refer [Toggle]]
["/components/EmojiPicker/EmojiPicker" :refer [EmojiPickerPopoverContent]]
["/components/Icons/Icons" :refer [BlockEmbedIcon TextIcon ChatIcon ThumbUpFillIcon ArchiveIcon]]
["/components/Icons/Icons" :refer [BlockEmbedIcon TextIcon ChatIcon ArchiveIcon]]
["/components/References/InlineReferences" :refer [ReferenceGroup ReferenceBlock]]
["@chakra-ui/react" :refer [Box Breadcrumb BreadcrumbItem BreadcrumbLink Button Divider HStack MenuItem MenuList Popover PopoverAnchor VStack]]
["@chakra-ui/react" :refer [Box Breadcrumb BreadcrumbItem BreadcrumbLink Button Divider HStack MenuDivider MenuItem MenuList VStack]]
[athens.common-db :as common-db]
[athens.common.logging :as log]
[athens.db :as db]
Expand Down Expand Up @@ -326,9 +325,7 @@
show-comments? (rf/subscribe [:comment/show-comments?])
show-textarea? (rf/subscribe [:comment/show-editor? block-uid])
inline-refs-open? (rf/subscribe [::inline-refs.subs/open? block-uid])
enable-properties? (rf/subscribe [:feature-flags/enabled? :properties])
show-emoji-picker? (r/atom false)
hide-emoji-picker-fn #(reset! show-emoji-picker? false)]
enable-properties? (rf/subscribe [:feature-flags/enabled? :properties])]
(rf/dispatch [::linked-ref.events/set-open! block-uid (or (false? linked-ref) initial-open)])
(rf/dispatch [::inline-refs.events/set-open! block-uid false])
(r/create-class
Expand All @@ -354,8 +351,6 @@
comments-enabled? (:comments @feature-flags)
reactions-enabled? (:reactions @feature-flags)
notifications-enabled? (:notifications @feature-flags)
show-emoji-picker? (r/atom false)
show-emoji-picker-fn #(reset! show-emoji-picker? true)
uid-sanitized-block (s/transform
(util/specter-recursive-path #(contains? % :block/uid))
(fn [{:block/keys [original-uid uid] :as block}]
Expand All @@ -382,9 +377,9 @@
:onClick #(ctx-menu/handle-click-comment % uid)
:icon (r/as-element [:> ChatIcon])}])
(when reactions-enabled?
[:> MenuItem {:children "Add reaction"
:onClick show-emoji-picker-fn
:icon (r/as-element [:> ThumbUpFillIcon])}])
[:<>
[:> MenuDivider]
[block-reaction/reactions-menu-list uid user-id]])

(when (and notifications-enabled? (actions/is-block-inbox? properties))
[:<>
Expand Down Expand Up @@ -465,38 +460,26 @@
(block-bullet/bullet-drag-end e uid))}])


[:> Popover {:isOpen @show-emoji-picker?
:placement "bottom-end"
:onOpen #(js/console.log "tried to open")
:onClose hide-emoji-picker-fn}

[:> PopoverAnchor
[:> Anchor {:isClosedWithChildren (when (and (seq children)
(or (and (true? linked-ref) (not @linked-ref-open?))
(and (false? linked-ref) (not open))))
"closed-with-children")
:uidSanitizedBlock uid-sanitized-block
:shouldShowDebugDetails (util/re-frame-10x-open?)
:menu menu
:onClick (fn [e]
(let [shift? (.-shiftKey e)]
(rf/dispatch [:reporting/navigation {:source :block-bullet
:target :block
:pane (if shift?
:right-pane
:main-pane)}])
(router/navigate-uid uid e)))
:on-drag-start (fn [e]
(block-bullet/bullet-drag-start e uid))
:on-drag-end (fn [e]
(block-bullet/bullet-drag-end e uid))
:unreadNotification (actions/unread-notification? properties)}]]
(when reactions-enabled?
[:> EmojiPickerPopoverContent {:onClose hide-emoji-picker-fn
:onEmojiSelected (fn [e]
(block-reaction/toggle-reaction [:block/uid uid]
(.. e -detail -unicode)
user-id))}])]
[:> Anchor {:isClosedWithChildren (when (and (seq children)
(or (and (true? linked-ref) (not @linked-ref-open?))
(and (false? linked-ref) (not open))))
"closed-with-children")
:uidSanitizedBlock uid-sanitized-block
:shouldShowDebugDetails (util/re-frame-10x-open?)
:menu menu
:onClick (fn [e]
(let [shift? (.-shiftKey e)]
(rf/dispatch [:reporting/navigation {:source :block-bullet
:target :block
:pane (if shift?
:right-pane
:main-pane)}])
(router/navigate-uid uid e)))
:on-drag-start (fn [e]
(block-bullet/bullet-drag-start e uid))
:on-drag-end (fn [e]
(block-bullet/bullet-drag-end e uid))
:unreadNotification (actions/unread-notification? properties)}]

;; `BlockTypeProtocol` dispatch placement
[:> Box {:gridArea "content"}
Expand Down
32 changes: 31 additions & 1 deletion src/cljs/athens/views/blocks/reactions.cljs
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,20 @@
(ns athens.views.blocks.reactions
(:require
["@chakra-ui/react" :refer [Box
Tooltip
VStack
HStack
MenuItem
MenuGroup
Text]]
[athens.common-db :as common-db]
[athens.common-events.graph.ops :as graph-ops]
[athens.db :as db]
[re-frame.core :as rf]))
[re-frame.core :as rf]
[reagent.core :as r]))


(def common-reactions ["❤️" "💔" "😐" "😕" "😡"])


(defn toggle-reaction
Expand Down Expand Up @@ -57,3 +68,22 @@
(sort-by first)
(into [])))


(defn reactions-menu-list-item
[props]
(let [{:keys [icon fn command]} props]
[:> Box {:display "inline-flex" :flex 1}
[:> Tooltip {:closeOnMouseDown true
:label (r/as-element [:> VStack {:align "center"}
[:> Text "React with '" icon "'"]
(when command [:> Text command])])}
[:> MenuItem {:justifyContent "center" :on-click #(fn)} icon]]]))


(defn reactions-menu-list
[uid user-id]
[:> MenuGroup {:title "Add reaction"}
[:> HStack {:spacing 0 :justifyContent "stretch"}
(for [reaction-icon common-reactions]
^{:key reaction-icon}
[reactions-menu-list-item {:icon reaction-icon :fn #(toggle-reaction uid reaction-icon user-id)}])]])
3 changes: 1 addition & 2 deletions src/js/theme/theme.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -449,9 +449,8 @@ const components = {
},
groupTitle: {
color: "foreground.secondary",
textTransform: "uppercase",
fontSize: "0.75em",
fontWeight: "bold",
fontWeight: "700",
},
item: {
"&.isActive": {
Expand Down

0 comments on commit 1e5799d

Please sign in to comment.