Merge pull request #2205 from neotyk/dev/block-types-ui-extension-points

Block view/edit reusability

.carve/ignore

@@ -40,3 +40,4 @@ athens.common-events.graph.schema/valid-atomic-op?
 athens.common-events.graph.schema/explain-atomic-op
 athens.style/unzoom
 athens.self-hosted.fluree.test-helpers/query
+athens.views.jetsam/jetsam-component

src/cljs/athens/db.cljs

@@ -629,10 +629,9 @@
 
 (defn transact-state-for-uid
   "uid -> Current block
-   state -> Look at state atom in block-el
+   new-string -> new `:block/string` value
    source -> reporting source"
-  [uid state source]
-  (let [{:string/keys [local]} @state]
-    (rf/dispatch [:block/save {:uid    uid
-                               :string local
-                               :source source}])))
+  [uid new-string source]
+  (rf/dispatch [:block/save {:uid    uid
+                             :string new-string
+                             :source source}]))

src/cljs/athens/events/dragging.cljs

@@ -0,0 +1,21 @@
+(ns athens.events.dragging
+  (:require
+    [re-frame.core :as rf]))
+
+
+(rf/reg-event-db
+  ::cleanup!
+  (fn [db [_ uid]]
+    (update db :dragging dissoc uid)))
+
+
+(rf/reg-event-db
+  ::set-dragging!
+  (fn [db [_ uid dragging?]]
+    (assoc-in db [:dragging uid :dragging?] dragging?)))
+
+
+(rf/reg-event-db
+  ::set-drag-target!
+  (fn [db [_ uid drag-target]]
+    (assoc-in db [:dragging uid :drag-target] drag-target)))

src/cljs/athens/events/inline_refs.cljs

@@ -0,0 +1,52 @@
+(ns athens.events.inline-refs
+  (:require
+    [re-frame.core :as rf]))
+
+
+(rf/reg-event-db
+  ::cleanup!
+  (fn [db [_ uid]]
+    (update db :inline-refs dissoc uid)))
+
+
+(rf/reg-event-db
+  ::set-open!
+  (fn [db [_ uid open?]]
+    (assoc-in db [:inline-refs uid :open?] open?)))
+
+
+(rf/reg-event-db
+  ::toggle-open!
+  (fn [db [_ uid]]
+    (update-in db [:inline-refs uid :open?] not)))
+
+
+(rf/reg-event-db
+  ::set-state!
+  (fn [db [_ uid state]]
+    (assoc-in db [:inline-refs uid :state] state)))
+
+
+(rf/reg-event-db
+  ::toggle-state-open!
+  (fn [db [_ uid]]
+    (update-in db [:inline-refs uid :state :open?] not)))
+
+
+(rf/reg-event-db
+  ::set-block!
+  (fn [db [_ uid block]]
+    (assoc-in db [:inline-refs uid :state :block] block)))
+
+
+(rf/reg-event-db
+  ::set-parents!
+  (fn [db [_ uid parents]]
+    (assoc-in db [:inline-refs uid :state :parents] parents)))
+
+
+(rf/reg-event-db
+  ::set-focus!
+  (fn [db [_ uid focus?]]
+    (assoc-in db [:inline-refs uid :state :focus?] focus?)))
+

src/cljs/athens/events/inline_search.cljs

@@ -0,0 +1,46 @@
+(ns athens.events.inline-search
+  "Inline Search Events"
+  (:require
+    [re-frame.core :as rf]))
+
+
+(rf/reg-event-db
+  ::set-type!
+  (fn [db [_ uid type]]
+    (assoc-in db [:inline-search uid :type] type)))
+
+
+(rf/reg-event-db
+  ::close!
+  (fn [db [_ uid]]
+    (assoc-in db [:inline-search uid :type] nil)))
+
+
+(rf/reg-event-db
+  ::set-index!
+  (fn [db [_ uid index]]
+    (assoc-in db [:inline-search uid :index] index)))
+
+
+(rf/reg-event-db
+  ::set-results!
+  (fn [db [_ uid results]]
+    (assoc-in db [:inline-search uid :results] results)))
+
+
+(rf/reg-event-db
+  ::clear-results!
+  (fn [db [_ uid]]
+    (assoc-in db [:inline-search uid :results] [])))
+
+
+(rf/reg-event-db
+  ::set-query!
+  (fn [db [_ uid query]]
+    (assoc-in db [:inline-search uid :query] query)))
+
+
+(rf/reg-event-db
+  ::clear-query!
+  (fn [db [_ uid]]
+    (assoc-in db [:inline-search uid :query] "")))

src/cljs/athens/events/linked_refs.cljs

@@ -0,0 +1,21 @@
+(ns athens.events.linked-refs
+  (:require
+    [re-frame.core :as rf]))
+
+
+(rf/reg-event-db
+  ::cleanup!
+  (fn [db [_ uid]]
+    (update db :linked-ref dissoc uid)))
+
+
+(rf/reg-event-db
+  ::set-open!
+  (fn [db [_ uid open?]]
+    (assoc-in db [:linked-ref uid] open?)))
+
+
+(rf/reg-event-db
+  ::toggle-open!
+  (fn [db [_ uid]]
+    (update-in db [:linked-ref uid] (fnil not false))))

src/cljs/athens/subs/dragging.cljs

@@ -0,0 +1,15 @@
+(ns athens.subs.dragging
+  (:require
+    [re-frame.core :as rf]))
+
+
+(rf/reg-sub
+  ::drag-target
+  (fn [db [_ uid]]
+    (get-in db [:dragging uid :drag-target])))
+
+
+(rf/reg-sub
+  ::dragging?
+  (fn [db [_ uid]]
+    (get-in db [:dragging uid :dragging?])))

src/cljs/athens/subs/inline_refs.cljs

@@ -0,0 +1,40 @@
+(ns athens.subs.inline-refs
+  (:require
+    [re-frame.core :as rf]))
+
+
+(rf/reg-sub
+  ::open?
+  (fn [db [_ uid]]
+    (get-in db [:inline-refs uid :open?] false)))
+
+
+(rf/reg-sub
+  ::state-open?
+  (fn [db [_ uid]]
+    (get-in db [:inline-refs uid :state :open?] false)))
+
+
+(rf/reg-sub
+  ::state-focus?
+  (fn [db [_ uid]]
+    (get-in db [:inline-refs uid :state :focus?] false)))
+
+
+(rf/reg-sub
+  ::state-block
+  (fn [db [_ uid]]
+    (get-in db [:inline-refs uid :state :block])))
+
+
+(rf/reg-sub
+  ::state-parents
+  (fn [db [_ uid]]
+    (get-in db [:inline-refs uid :state :parents])))
+
+
+(rf/reg-sub
+  ::state-embed-id
+  (fn [db [_ uid]]
+    (get-in db [:inline-refs uid :state :focus?])))
+

src/cljs/athens/subs/inline_search.cljs

@@ -0,0 +1,27 @@
+(ns athens.subs.inline-search
+  (:require
+    [re-frame.core :as rf]))
+
+
+(rf/reg-sub
+  ::type
+  (fn [db [_ uid]]
+    (get-in db [:inline-search uid :type])))
+
+
+(rf/reg-sub
+  ::index
+  (fn [db [_ uid]]
+    (get-in db [:inline-search uid :index])))
+
+
+(rf/reg-sub
+  ::results
+  (fn [db [_ uid]]
+    (get-in db [:inline-search uid :results])))
+
+
+(rf/reg-sub
+  ::query
+  (fn [db [_ uid]]
+    (get-in db [:inline-search uid :query])))

src/cljs/athens/subs/linked_refs.cljs

@@ -0,0 +1,9 @@
+(ns athens.subs.linked-refs
+  (:require
+    [re-frame.core :as rf]))
+
+
+(rf/reg-sub
+  ::open?
+  (fn [db [_ uid]]
+    (get-in db [:linked-ref uid] false)))

src/cljs/athens/views.cljs

@@ -9,6 +9,7 @@
     [athens.views.app-toolbar :as app-toolbar]
     [athens.views.athena :refer [athena-component]]
     [athens.views.help :refer [help-popup]]
+    #_[athens.views.jetsam :as jetsam]
     [athens.views.left-sidebar :as left-sidebar]
     [athens.views.pages.core :as pages]
     [athens.views.right-sidebar :as right-sidebar]
@@ -70,4 +71,5 @@
                   [app-toolbar/app-toolbar]
                   [left-sidebar/left-sidebar]
                   [pages/view]
+                  #_[jetsam/jetsam-component]
                   [right-sidebar/right-sidebar]]])]])))

src/cljs/athens/views/blocks/autocomplete_search.cljs

@@ -2,41 +2,48 @@
   (:require
     ["/components/Block/Autocomplete" :refer [Autocomplete AutocompleteButton]]
     ["@chakra-ui/react" :refer [Text]]
+    [athens.events.inline-search :as inline-search.events]
+    [athens.subs.inline-search :as inline-search.subs]
     [athens.views.blocks.textarea-keydown :as textarea-keydown]
-    [clojure.string :as string]))
+    [clojure.string :as string]
+    [re-frame.core :as rf]))
 
 
 (defn inline-item-click
-  [state uid expansion]
+  [state-hooks uid expansion]
   (let [id     (str "#editable-uid-" uid)
         target (.. js/document (querySelector id))
-        f      (case (:search/type @state)
+        type   (rf/subscribe [::inline-search.subs/type uid])
+        f      (case @type
                  :hashtag  textarea-keydown/auto-complete-hashtag
                  :template textarea-keydown/auto-complete-template
                  textarea-keydown/auto-complete-inline)]
-    (f state target expansion)))
+    (f uid state-hooks target expansion)))
 
 
 (defn inline-search-el
-  [_block]
-  (fn [block state]
-    (let [{:keys [last-e]} @state
-          {:search/keys [index results type query]} @state
-          is-open (some #(= % type) [:page :block :hashtag :template])]
-      [:> Autocomplete {:event last-e
-                        :isOpen is-open
-                        :onClose #(swap! state assoc :search/type false)}
-       (when is-open
-         (if (or (string/blank? query)
-                 (empty? results))
-           [:> Text {:py "0.4rem"
-                     :px "0.8rem"
-                     :fontStyle "italics"}
-            (str "Search for a " (symbol type))]
-           (doall
-             (for [[i {:keys [node/title block/string block/uid]}] (map-indexed list results)]
-               [:> AutocompleteButton {:key (str "inline-search-item" uid)
-                                       :isActive (= i index)
-                                       :onClick (fn [_] (inline-item-click state (:block/uid block) (or title uid)))
-                                       :id (str "inline-search-item" uid)}
-                (or title string)]))))])))
+  [block {:as state-hooks} last-event]
+  (let [block-uid             (:block/uid block)
+        inline-search-type    (rf/subscribe [::inline-search.subs/type block-uid])
+        inline-search-index   (rf/subscribe [::inline-search.subs/index block-uid])
+        inline-search-results (rf/subscribe [::inline-search.subs/results block-uid])
+        inline-search-query   (rf/subscribe [::inline-search.subs/query block-uid])]
+    (fn [block {:as _state-hooks} _last-event _state]
+      (let [is-open (some #(= % @inline-search-type) [:page :block :hashtag :template])]
+        [:> Autocomplete {:event   @last-event
+                          :isOpen  is-open
+                          :onClose #(rf/dispatch [::inline-search.events/close! block-uid])}
+         (when is-open
+           (if (or (string/blank? @inline-search-query)
+                   (empty? @inline-search-results))
+             [:> Text {:py        "0.4rem"
+                       :px        "0.8rem"
+                       :fontStyle "italics"}
+              (str "Search for a " (symbol @inline-search-type))]
+             (doall
+               (for [[i {:keys [node/title block/string block/uid]}] (map-indexed list @inline-search-results)]
+                 [:> AutocompleteButton {:key      (str "inline-search-item" uid)
+                                         :isActive (= i @inline-search-index)
+                                         :onClick  (fn [_] (inline-item-click state-hooks (:block/uid block) (or title uid)))
+                                         :id       (str "inline-search-item" uid)}
+                  (or title string)]))))]))))