Feat: text pagination.

- Add[dx]: seed fn for article on empty db (in dev).
- Add[db]: "current_page" to article schema (default to 0)
- Add[db]: pagination when attaching words to an article.
- Add[ui]: pagination buttons in article.
- Add[ui]: settings for "words-per-page"
- Add[db]: "hook" to run whenever settings are updated.

Author: teesloane

src/app/main/db.cljs

@@ -4,6 +4,7 @@
    [app.shared.specs :as specs]
    ["better-sqlite3" :as sqlite]
    [clojure.string :as str]
+   [clojure.data :as data]
    ["electron" :refer [app]]
    ["fs" :as fs]
    ["path" :as path]))
@@ -12,15 +13,6 @@
 (def db-path (.join path (.getPath app "userData") db-name))
 (def db (sqlite. db-path))
 
-(defn wipe!
-  "Wipes the database and relaunches the application."
-  []
-  (.exec db "DROP TABLE words;
-             DROP TABLE articles;
-             DROP TABLE phrases;
-             DROP TABLE settings;" #(println %))
-  (.relaunch app)
-  (.quit app))
 
 ;; (defn remove-db-file! []
 ;;   (.unlink fs db-path #(when % (prn "Failed to delete db file") %)))
@@ -73,7 +65,8 @@
     word_ids TEXT,
     language TEXT,
     date_created INTEGER,
-    last_opened INTEGER
+    last_opened INTEGER,
+    current_page INTEGER DEFAULT 0
   );
 
   CREATE TABLE IF NOT EXISTS settings (
@@ -110,7 +103,65 @@
       js->clj
       (get "version")))
 
-;; -- DB calls -----------------------------------------------------------------
+
+(defn read-sample-file
+  [name]
+  (-> (.readFileSync ^:export fs (.join path js/__dirname ".." "test/sample_texts/" name) "utf8")))
+
+
+
+;; -- DB: Settings -------------------------------------------------------------
+;; Settings are handled in JSON. For better or worse: ¯\_(ツ)_/¯
+;; All settings updates/inserts need to be jsonified.
+
+
+(defn- settings->json
+  [s]
+  (-> s clj->js js/JSON.stringify))
+
+(defn- settings->edn
+  [json-from-db]
+  (-> json-from-db js/JSON.parse js->clj))
+
+(defn settings-get
+  []
+  (let [res (sql {:op :get :stmt "SELECT user FROM settings"})]
+    (-> res :user settings->edn)))
+
+(defn settings-hook!
+  "since we batch update settings as json (for better or worse)) we need to
+    sometimes handle side-effectful things, so we diff the new settings
+    against the old, and run 'hooks' based on what changed."
+  [new-settings-from-fe]
+  (let [old-settings             (settings-get)
+        ;; normalize new-settings to look like it came from the db before we diff it.
+        new-settings             (-> new-settings-from-fe settings->json settings->edn)
+        [old-diff new-diff both] (data/diff new-settings old-settings)]
+    (cond
+      (contains? new-diff "page-size")
+      (sql {:op :run :params [] :stmt "UPDATE articles SET current_page = 0"})
+
+      :else nil
+      )))
+
+(defn settings-update
+  [settings]
+    (settings-hook! settings)
+    (sql {:op :run
+          :stmt "UPDATE settings SET user = ? WHERE settings_id = 1"
+          :params [(settings->json settings)]}))
+
+(defn settings-init
+  "If there are no rows in the settings table, initialize it."
+  []
+  (let [default-settings (settings->json (specs/make-default-settings trunk-version))
+        existing-settings (settings-get)]
+    (when-not existing-settings
+      (sql {:op :run
+            :stmt "INSERT INTO settings(user) VALUES (?)"
+            :params [default-settings]}))))
+
+;; -- DB: Articles -------------------------------------------------------------
 
 (defn article-get-by-id
   [{:keys [article_id language]}]
@@ -131,24 +182,31 @@
         :op :all}))
 
 (defn article-update-last-opened
-  [{:keys [article_id]}]
-  (sql {:stmt "UPDATE articles SET last_opened = ? WHERE article_ID = ?"
-        :op :run
-        :params [(js/Date.now) article_id]}))
+  [{:keys [article_id current_page]}]
+  (let [current_page (if (< current_page 0) 0 current_page)]
+    (sql {:stmt "UPDATE articles SET last_opened = ?, current_page = ? WHERE article_ID = ?"
+          :op :run
+          :params [(js/Date.now) current_page article_id]})))
 
 (defn article-attach-words
   "When given an article, it fetches the word data for each word from the DB and
   attaches it back to the article."
   [article]
-  (let [word-ids      (get article :word_ids)
+  (let [page-size     (get (settings-get) "page-size" 1000) ; aka 'limit'
+        curr-page     (get article :current_page 0)
+        word-ids      (get article :word_ids)
         words-ids-vec (u/split-delimited-article word-ids)
+        total-pages   (/ (count words-ids-vec) page-size)
+        ;; paginate the words we return.
+        words-ids-slice (u/paginate-vector words-ids-vec page-size curr-page)
         words-out     (atom [])]
-    (doseq [word-id words-ids-vec]
+    (doseq [word-id words-ids-slice]
       (let [res (sql {:stmt   "SELECT * FROM words WHERE id = ?"
                       :params [word-id]
                       :op     :get})]
         (swap! words-out conj res)))
-    (assoc article :word-data @words-out)))
+    (assoc article :word-data @words-out :total-pages (js/Math.ceil total-pages)))
+  )
 
 (defn article-insert
   "Creates a new article. Requirements:
@@ -286,45 +344,53 @@
       (assoc article :word-data @new-word-data))))
 
 
-;; -- DB: Settings -------------------------------------------------------------
-;; All settings updates/inserts need to be jsonified.
-(defn- settings->json
-  [s]
-  (-> s clj->js js/JSON.stringify))
 
-(defn- settings->edn
-  [json-from-db]
-  (-> json-from-db js/JSON.parse js->clj))
+;; ----------------------------------------------------------------------------------------
+;; Seed fns
 
-(defn settings-get
+
+(defn seed-article
   []
-  (let [res (sql {:op :get :stmt "SELECT user FROM settings"})]
-    (-> res :user settings->edn)))
+  (let [
+        data             {:article (read-sample-file "fr_compte2.txt") :title "Compte, Ch 2", :source "..", :language "fr"}
+        _                (words-insert data)
+        word-ids-str     (words-get-ids-for-article data)
+        inserted-article (article-insert (merge data {:word_ids word-ids-str}))])
+  )
 
-(defn settings-update
-  [settings]
-  (sql {:op :run
-        :stmt "UPDATE settings SET user = ? WHERE settings_id = 1"
-        :params [(settings->json settings)]}))
+(defn run-seeds
 
-(defn settings-init
-  "If there are no rows in the settings table, initialize it."
   []
-  (let [default-settings (settings->json (specs/make-default-settings trunk-version))
-        existing-settings (settings-get)]
-    (when-not existing-settings
-      (sql {:op :run
-            :stmt "INSERT INTO settings(user) VALUES (?)"
-            :params [default-settings]}))))
+  (let [articles       (sql {:op :get :stmt "SELECT * FROM articles" :params []})
+        words          (sql {:op :get :stmt "SELECT * FROM words" :params []})
+        no-content-yet (and (= (count articles) 0)
+                            (= (count words) 0))]
+    (when no-content-yet
+      (seed-article))))
+
+
+;; Wipe / Init -----------------------------------------------------------------------------
+
+(defn wipe!
+  "Wipes the database and relaunches the application."
+  []
+  (.exec db "DROP TABLE words;
+             DROP TABLE articles;
+             DROP TABLE phrases;
+             DROP TABLE settings;" #(println %))
+  (.relaunch app)
+  (.quit app)
+  )
 
-;; -----------------------------------------------------------------------------
 
 (defn init
   []
   (.exec db db-seed
          (fn [err]
            (when err
              (throw (js/Error. (str "Failed db" err))))))
-  (settings-init))
+  (settings-init)
+  (when u/debug? (run-seeds))
+  )
 
 ;; FIXME: when do I run "db.close()"?

src/app/main/ipc.cljs

@@ -64,6 +64,20 @@
        (catch js/Error e
          (reply-err! event "Failed to get article."  e))))
 
+   ;; TODO dedupe with article-get
+   (s-ev :article-change-page)
+   (fn [event data]
+     (try
+       (db/article-update-last-opened data)
+       (->> data
+            db/article-get-by-id
+            db/article-attach-words
+            db/article-attach-phrases
+            (reply! event (s-ev :article-received)))
+       (catch js/Error e
+         (reply-err! event "Failed to get article."  e)))
+     )
+
    ;; -- WORDS HANDLERS ---------------------------
 
    (s-ev :words-get)

src/app/renderer/components.cljs

@@ -24,7 +24,6 @@
   (let [styles "mt-2 mb-2 flex border w-64 py-1 rounded dark:bg-gray-800 dark:text-white outline-none"]
     [:select (merge {:class styles} props) options]))
 
-
 (defn erase-db
   "Button for erasing the database"
   []
@@ -96,15 +95,22 @@
 (defn ext-link
   [{:keys [link text]}]
   (let [handle-click (fn [e]
-                       (.preventDefault e )
+                       (.preventDefault e)
                        (.openExternal (.-shell (js/require "electron")) link))]
     [:a.text-blue-600.dark:text-blue-400.cursor-pointer {:on-click handle-click} text]))
 
 (defn button
-  [{:keys [on-click text icon-name icon-size]}]
-  (let [styles "dark:bg-gray-800 dark:text-white dark:hover:bg-gray-700 self-start text-xs bg-white hover:bg-gray-100 text-gray-800 py-1 px-2 border border-gray-400 rounded shadow"]
+  [{:keys [on-click text icon-name icon-size disabled? style]
+    :or   {disabled? false style ""}}]
+  (let [style  (case style
+                 "primary" "bg-blue-400 hover:bg-blue-500 text-white border-none font-bold"
+                 ""        "bg-white text-gray-800 hover:bg-gray-100 dark:text-white dark:bg-gray-800 dark:hover:bg-gray-700")
+        styles (str style " self-start text-xs py-1 px-2 border border-gray-400 rounded shadow " (when disabled? "cursor-not-allowed"))]
+        ;; styles (str "dark:bg-gray-800 dark:text-white dark:hover:bg-gray-700 self-start text-xs bg-white hover:bg-gray-100 text-gray-800 py-1 px-2 border border-gray-400 rounded shadow " (when disabled? "cursor-not-allowed"))]
     [:button
-     {:class styles :on-click on-click}
+     {:class    styles
+      :on-click on-click
+      :disabled disabled?}
      (if icon-name
        [:span [icon {:icon icon-name :size (or icon-size 18)}] [:span text]]
        text)]))
@@ -245,10 +251,10 @@
         is-phrase                 (or currently-selected-phrase
                                       (u/is-phrase word-or-phrase))
         handle-submit             (fn [e]
-                              (.preventDefault e)
-                              (if is-phrase
-                                (|> [(s-ev :phrase-update) @form])
-                                (|> [(s-ev :word-update) @form])))]
+                                    (.preventDefault e)
+                                    (if is-phrase
+                                      (|> [(s-ev :phrase-update) @form])
+                                      (|> [(s-ev :word-update) @form])))]
     [:div {:class "bg-gray-50 w-full border-t md:border-t-0 md:flex md:w-2/5 md:relative border-l dark:border-gray-900 dark:bg-gray-800 dark:border-gray-700"}
      (when word-or-phrase
        [:div {:class "dark:bg-gray-800 w-full p-8 flex flex-col mx-auto"}

src/app/renderer/events.cljs

@@ -161,6 +161,22 @@
         {:db (assoc db :loading? true)
          ::ipc-send! (with-lang db event)}))
 
+(r-fx (s-ev :article-change-page)
+      (fn [{:keys [db]} [ev-name dir]]
+        (let [curr-a      (-> db :current-article (dissoc :word-data))
+              dir-fn      (if (= dir :next) inc dec)
+              success-out {:db         (assoc db :loading? true)
+                           ::ipc-send! [ev-name
+                                        (update curr-a :current_page dir-fn)]}
+
+              {:keys [current_page total-pages]} (db :current-article)
+              current_page                       (inc current_page)
+              ]
+          (cond
+            (and (= dir :next) (< current_page total-pages)) success-out
+            (and (= dir :prev) (> current_page 1))           success-out
+            :else                                            {:db db}))))
+
 (r-fx (s-ev :article-delete)
       (fn [{:keys [db]} event]
         {:db         (-> db (assoc :loading? true))

src/app/renderer/views/article.cljs

@@ -7,6 +7,20 @@
    [reagent.core :as r]
    [app.shared.util :as u]))
 
+(defn pagination
+  [{:keys [current_page total-pages]}]
+  (let [curr-page (inc current_page)]
+    [:div.text-sm.flex.items-center.justify-between.border-t.border-gray-300.dark:border-gray-700
+     [:div.p-3
+      [component/button {:text "← Previous page"
+                         :disabled? (= curr-page 1)
+                         :on-click #(|> [(s-ev :article-change-page) :prev])}]]
+     [:div "Page " curr-page " / " total-pages]
+     [:div.p-3
+      [component/button {:text "Next page →"
+                         :disabled? (= curr-page total-pages)
+                         :on-click #(|> [(s-ev :article-change-page) :next])}]]]))
+
 (defn view
   "Displays a single article."
   []
@@ -24,9 +38,9 @@
               form                (r/atom word-or-phrase)
               total-words         (count (get current-article :word-data))
               words-known         (count (filter (fn [word-data]
-                                                (or (not= 0 (word-data :comfort))
-                                                    (not= nil (word-data :translation))))
-                                              (-> current-article :word-data)))
+                                                   (or (not= 0 (word-data :comfort))
+                                                       (not= nil (word-data :translation))))
+                                                 (-> current-article :word-data)))
               ;; -- handlers -----
 
               handle-mark-all-known (fn []
@@ -54,15 +68,16 @@
                 (case @sure-mark? 0 "Mark all known?" 1 "You sure?")])]
 
             [:article {:key "view-article" :class "flex overflow-auto flex-col flex-1 bg-white dark:bg-gray-900"}
-            [:div.leading-8.p-8.flex.flex-wrap.max-w-5xl.mx-auto
-             {:style {:user-select (if shift-held? "none" "inherit")}}
-             (map-indexed (fn [index word]
-                            ^{:key (str word "-" index)}
-                            [component/article-word
-                             {:word                word
-                              :current-word        current-word
-                              :on-click            #(handle-word-click word index)
-                              :index               index
-                              :current-phrase-idxs current-phrase-idxs
-                              :current-word-idx    current-word-idx}]) word-data)]]]
+             [:div.leading-8.p-8.flex.flex-wrap.max-w-5xl.mx-auto
+              {:style {:user-select (if shift-held? "none" "inherit")}}
+              (map-indexed (fn [index word]
+                             ^{:key (str word "-" index)}
+                             [component/article-word
+                              {:word                word
+                               :current-word        current-word
+                               :on-click            #(handle-word-click word index)
+                               :index               index
+                               :current-phrase-idxs current-phrase-idxs
+                               :current-word-idx    current-word-idx}]) word-data)]]
+            [pagination current-article]]
            [component/view-current-word {:current-word current-word :form form}]])))))