From a4d0666bcc49cea07672ad208bdcc9bed462fb04 Mon Sep 17 00:00:00 2001
From: thezjy <45989292+thezjy@users.noreply.github.com>
Date: Thu, 25 Mar 2021 11:45:31 +0800
Subject: [PATCH] feat: use a button to load more journals (#1529)

* feat: use a button to load more journals

* feat: preserve the "scroll to load more" behavior

* ignore .clj-kondo all together

* enhance: load latest two journals by default

Co-authored-by: Tienson Qin <tiensonqin@gmail.com>
---
 .gitignore                                |  2 +-
 resources/css/common.css                  |  4 ++++
 src/main/frontend/components/header.cljs  |  2 +-
 src/main/frontend/components/journal.cljs |  5 +++--
 src/main/frontend/components/journal.css  |  9 ++++-----
 src/main/frontend/dicts.cljs              |  6 ++++++
 src/main/frontend/handler/page.cljs       | 18 +++++++++++-------
 src/main/frontend/handler/route.cljs      |  2 +-
 src/main/frontend/state.cljs              |  2 +-
 src/main/frontend/ui.cljs                 | 15 ++++++++++-----
 src/main/frontend/ui.css                  |  6 +++---
 11 files changed, 45 insertions(+), 26 deletions(-)

diff --git a/.gitignore b/.gitignore
index f6300c8428..904dc1ac80 100644
--- a/.gitignore
+++ b/.gitignore
@@ -29,5 +29,5 @@ strings.csv
 
 .calva
 resources/electron.js
-.clj-kondo/.cache
+.clj-kondo/
 .lsp/
diff --git a/resources/css/common.css b/resources/css/common.css
index 6581d1583b..93d4aede29 100644
--- a/resources/css/common.css
+++ b/resources/css/common.css
@@ -802,3 +802,7 @@ a.tooltip-priority {
 .excalidraw hr {
     margin: 0;
 }
+
+.text-link {
+    color: var(--ls-primary-text-color);
+}
diff --git a/src/main/frontend/components/header.cljs b/src/main/frontend/components/header.cljs
index 319d612540..35bc9c3092 100644
--- a/src/main/frontend/components/header.cljs
+++ b/src/main/frontend/components/header.cljs
@@ -27,7 +27,7 @@
    {:href     (rfe/href :home)
     :on-click (fn []
                 (util/scroll-to-top)
-                (state/set-journals-length! 1))}
+                (state/set-journals-length! 2))}
    (if-let [logo (and config/publishing?
                       (get-in (state/get-config) [:project :logo]))]
      [:img.cp__header-logo-img {:src logo}]
diff --git a/src/main/frontend/components/journal.cljs b/src/main/frontend/components/journal.cljs
index e25c8e6b88..b1e8a1181c 100644
--- a/src/main/frontend/components/journal.cljs
+++ b/src/main/frontend/components/journal.cljs
@@ -110,14 +110,15 @@
 
      (when intro? (onboarding/intro))]))
 
-(rum/defc journals
+(rum/defc journals < rum/reactive
   [latest-journals]
   [:div#journals
    (ui/infinite-list
     (for [[journal-name format] latest-journals]
       [:div.journal-item.content {:key journal-name}
        (journal-cp [journal-name format])])
-    {:on-load (fn []
+    {:has-more (page-handler/has-more-journals?)
+     :on-load (fn []
                 (page-handler/load-more-journals!))})])
 
 (rum/defc all-journals < rum/reactive db-mixins/query
diff --git a/src/main/frontend/components/journal.css b/src/main/frontend/components/journal.css
index d0ced915e0..f87e7e6306 100644
--- a/src/main/frontend/components/journal.css
+++ b/src/main/frontend/components/journal.css
@@ -1,6 +1,4 @@
 #journals {
-  margin-bottom: 70vh;
-
   textarea {
     word-break: break-word;
     overflow: hidden;
@@ -10,12 +8,13 @@
   .journal-item {
     border-top: 1px solid;
     border-top-color: var(--ls-border-color, #738694);
-    padding: 48px 0;
-    margin: 24px 0 128px 0;
+    margin: 24px 0;
+    padding: 24px 0;
+    min-height: 250px;
 
     &:first-child {
+      padding-top: 0;
       border-top: none;
-      padding: 0;
       min-height: 500px;
     }
   }
diff --git a/src/main/frontend/dicts.cljs b/src/main/frontend/dicts.cljs
index 001a3973f0..a21f2348e4 100644
--- a/src/main/frontend/dicts.cljs
+++ b/src/main/frontend/dicts.cljs
@@ -243,6 +243,8 @@ title: How to take dummy notes?
         :page/name "Page name"
         :page/last-modified "Last modified at"
         :page/new-title "What's your new page title?"
+        :page/earlier "Earlier"
+        :page/no-more-journals "No more journals"
         :publishing/pages "Pages"
         :publishing/page-name "Page name"
         :publishing/current-project "Current Project"
@@ -973,6 +975,8 @@ title: How to take dummy notes?
            :page/name "页面名称"
            :page/last-modified "最后更改于"
            :page/new-title "请输入新页面的名字:"
+           :page/earlier "之前"
+           :page/no-more-journals "没有更多了"
            :publishing/pages "页面"
            :publishing/page-name "页面名"
            :publishing/current-project "当前项目"
@@ -1245,6 +1249,8 @@ title: How to take dummy notes?
              :page/name "頁面名稱："
              :page/last-modified "最後更改於"
              :page/new-title "請輸入新頁面的名字:"
+             :page/load-more-journals "載入更多"
+             :page/no-more-journals "沒有更多了"
              :publishing/pages "頁面"
              :publishing/page-name "頁面名稱"
              :publishing/current-project "當前項目"
diff --git a/src/main/frontend/handler/page.cljs b/src/main/frontend/handler/page.cljs
index 3c7919cd36..3db7645d71 100644
--- a/src/main/frontend/handler/page.cljs
+++ b/src/main/frontend/handler/page.cljs
@@ -38,8 +38,8 @@
 (defn- get-file-name
   [journal? title]
   (when-let [s (if journal?
-            (date/journal-title->default title)
-            (util/page-name-sanity (string/lower-case title)))]
+                 (date/journal-title->default title)
+                 (util/page-name-sanity (string/lower-case title)))]
     ;; Win10 file path has a length limit of 260 chars
     (util/safe-subs s 0 200)))
 
@@ -424,11 +424,15 @@
       :new-level 2
       :current-page "Contents"})))
 
-(defn load-more-journals!
+(defn has-more-journals?
   []
   (let [current-length (:journals-length @state/state)]
-    (when (< current-length (db/get-journals-length))
-      (state/update-state! :journals-length inc))))
+    (< current-length (db/get-journals-length))))
+
+(defn load-more-journals!
+  []
+  (when (has-more-journals?)
+    (state/update-state! :journals-length inc)))
 
 (defn update-public-attribute!
   [page-name value]
@@ -516,8 +520,8 @@
 (defn ls-dir-files!
   []
   (web-nfs/ls-dir-files-with-handler!
-    (fn []
-      (init-commands!))))
+   (fn []
+     (init-commands!))))
 
 
 ;; TODO: add use :file/last-modified-at
diff --git a/src/main/frontend/handler/route.cljs b/src/main/frontend/handler/route.cljs
index 8d979f7b30..57f8e99291 100644
--- a/src/main/frontend/handler/route.cljs
+++ b/src/main/frontend/handler/route.cljs
@@ -98,7 +98,7 @@
 
 (defn go-to-journals!
   []
-  (state/set-journals-length! 1)
+  (state/set-journals-length! 2)
   (let [route (if (state/custom-home-page?)
                 :all-journals
                 :home)]
diff --git a/src/main/frontend/state.cljs b/src/main/frontend/state.cljs
index 90d58890a9..1bc64fc9a9 100644
--- a/src/main/frontend/state.cljs
+++ b/src/main/frontend/state.cljs
@@ -38,7 +38,7 @@
     :draw? false
     :db/restoring? nil
 
-    :journals-length 1
+    :journals-length 2
 
     :search/q ""
     :search/result nil
diff --git a/src/main/frontend/ui.cljs b/src/main/frontend/ui.cljs
index 3b99234986..35c8929de9 100644
--- a/src/main/frontend/ui.cljs
+++ b/src/main/frontend/ui.cljs
@@ -97,7 +97,7 @@
                      [:div {:style {:margin-right "8px"}} title]
                       ;; [:div {:style {:position "absolute" :right "8px"}}
                       ;;  icon]
-]]
+                     ]]
           (rum/with-key
             (menu-link new-options child)
             title)))
@@ -280,7 +280,6 @@
         (.removeEventListener viewport "resize" handler)
         (.removeEventListener viewport "scroll" handler)))))
 
-;; FIXME: compute the right scroll position when scrolling back to the top
 (defn on-scroll
   [on-load on-top-reached]
   (let [node js/document.documentElement
@@ -306,9 +305,15 @@
 (rum/defcs infinite-list <
   (mixins/event-mixin attach-listeners)
   "Render an infinite list."
-  [state body {:keys [on-load on-top-reached]
-               :as   opts}]
-  body)
+  [state body {:keys [on-load has-more]}]
+  (rum/with-context [[t] i18n/*tongue-context*]
+    (rum/fragment
+     body
+     [:a.fade-link.text-link.font-bold.text-4xl
+      {:on-click on-load
+       :disabled (not has-more)
+       :class (when (not has-more) "cursor-not-allowed ")}
+      (t (if has-more :page/earlier :page/no-more-journals))])))
 
 (rum/defcs auto-complete <
   (rum/local 0 ::current-idx)
diff --git a/src/main/frontend/ui.css b/src/main/frontend/ui.css
index c88bfc24aa..62f6b7f6ed 100644
--- a/src/main/frontend/ui.css
+++ b/src/main/frontend/ui.css
@@ -93,7 +93,7 @@
     align-items: center;
     font-size: 14px;
 
-    input[type=checkbox] {
+    input[type='checkbox'] {
       margin-right: 8px;
     }
   }
@@ -105,7 +105,7 @@
   focus:outline-none transition ease-in-out duration-150 mt-1;
 
   &:disabled {
-    opacity: .5;
+    opacity: 0.5;
   }
 
   &.is-link {
@@ -134,7 +134,7 @@
   width: 0;
   height: 0;
   vertical-align: middle;
-  content: "";
+  content: '';
   border-top-style: solid;
   border-top-width: 4px;
   border-right: 4px solid transparent;