From 246f9628e7b3b1385291dd6496cbca090822fbdb Mon Sep 17 00:00:00 2001
From: Junyu Zhan <thezjy@gmail.com>
Date: Tue, 20 Jul 2021 16:15:34 +0800
Subject: [PATCH] feat: searching loader

---
 src/main/frontend/extensions/zotero.cljs | 50 ++++++++++++------------
 1 file changed, 24 insertions(+), 26 deletions(-)

diff --git a/src/main/frontend/extensions/zotero.cljs b/src/main/frontend/extensions/zotero.cljs
index 0719331f5..517ff7354 100644
--- a/src/main/frontend/extensions/zotero.cljs
+++ b/src/main/frontend/extensions/zotero.cljs
@@ -4,12 +4,13 @@
             [frontend.extensions.zotero.api :as api]
             [frontend.extensions.zotero.handler :as zotero-handler]
             [frontend.extensions.zotero.extractor :as extractor]
+            [frontend.components.svg :as svg]
             [frontend.state :as state]
             [frontend.util :as util]
             [rum.core :as rum]))
 
 (defonce term-chan (chan))
-(defonce debounce-chan  (api/debounce term-chan 5000))
+(defonce debounce-chan  (api/debounce term-chan 200))
 
 
 (rum/defc zotero-search-item [{:keys [data] :as item} handle-command-zotero]
@@ -52,42 +53,39 @@
     (let [[term set-term!]                   (rum/use-state "")
           [search-result set-search-result!] (rum/use-state [])
           [search-error set-search-error!]   (rum/use-state nil)
-          [is-searching set-is-searching!]   (rum/use-state false)
-          term-chan                          (chan)
-          debounce-chan                      (api/debounce term-chan 500)]
+          [is-searching set-is-searching!]   (rum/use-state false)]
 
+      (println search-error)
 
-      (rum/use-effect!
-       (fn []
-         (go
-           (let [term   (<! debounce-chan)]
-             (when-not (str/blank? term)
-               (set-is-searching! true)
-               (set-search-result!
-                (<! (api/query-items "journalArticle" term)))
-               (set-is-searching! false)))))
-       [term])
 
       (go
         (let [d-term   (<! debounce-chan)]
-          ;; (js/console.log "xxx term:::" d-term)
           (when-not (str/blank? d-term)
-            (set-search-result!
-             (<! (api/query-items "journalArticle" d-term))))))
+            (set-is-searching! true)
+
+
+            (let [result (<! (api/query-items "journalArticle" d-term))]
+              (if (false? (:success result))
+                (set-search-error! (:body result))
+                (set-search-result! result)))
+
+            (set-is-searching! false))))
 
       [:div.zotero-search.p-4
        {:style {:width 600}}
 
-       [:input.p-2.border.block.w-full.mb-2
-        {:autoFocus   true
-         :placeholder "Search for your Zotero journal article (title, author, text, anything)"
-         :value       term :on-change (fn [e]
-                                        (go
-                                          (js/console.log "sending term-chan!!" (util/evalue e))
-                                          (>! term-chan (util/evalue e)))
-                                        (set-term! (util/evalue e)))}]
+       [:div.flex
+        [[:input.p-2.border.block.w-full.mb-2
+          {:autoFocus   true
+           :placeholder "Search for your Zotero journal article (title, author, text, anything)"
+           :value       term :on-change (fn [e]
+                                          (go
+                                            (js/console.log "sending term-chan!!" (util/evalue e))
+                                            (>! term-chan (util/evalue e)))
+                                          (set-term! (util/evalue e)))}]
+
+         [:span {:class (when is-searching "loader-reverse")} svg/refresh]]]
 
-       [:div.h-2.text-sm.mb-2 (when is-searching "loading...")]
 
        [:div
         (map