Add "load more" button and fix pagination
This commit is contained in:
parent
80d0a6e258
commit
f984e9b14d
2 changed files with 170 additions and 87 deletions
|
|
@ -86,6 +86,11 @@
|
|||
background: rgba(255, 255, 255, 0.8);
|
||||
}
|
||||
|
||||
button[disabled] {
|
||||
opacity: 0.6;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
section.login label,
|
||||
section.login input {
|
||||
display: block;
|
||||
|
|
@ -100,6 +105,11 @@
|
|||
|
||||
section.posts .controls {
|
||||
padding: 0 0 36px;
|
||||
display: grid;
|
||||
grid-template:
|
||||
"a"
|
||||
"b"
|
||||
"c";
|
||||
}
|
||||
|
||||
section.posts .controls .search-form input {
|
||||
|
|
@ -137,14 +147,19 @@
|
|||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 640px) {
|
||||
section.posts .controls {
|
||||
display: grid;
|
||||
grid-template:
|
||||
"a a"
|
||||
"b c";
|
||||
}
|
||||
section.posts .controls .post-info {
|
||||
grid-area: b;
|
||||
}
|
||||
|
||||
section.posts .controls .search-form {
|
||||
grid-area: c;
|
||||
}
|
||||
|
||||
section.posts .controls .buttons {
|
||||
grid-area: a;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 640px) {
|
||||
section.posts .controls .post-info {
|
||||
grid-area: a;
|
||||
}
|
||||
|
|
@ -159,14 +174,12 @@
|
|||
|
||||
section.posts .controls .buttons {
|
||||
grid-area: c;
|
||||
display: flex;
|
||||
justify-content: end;
|
||||
}
|
||||
}
|
||||
|
||||
section.posts .controls .control-button {
|
||||
padding: 6px;
|
||||
margin: 6px 0;
|
||||
margin: 6px 0 6px 12px;
|
||||
background: #f5e6ab;
|
||||
color: #444;
|
||||
cursor: pointer;
|
||||
|
|
@ -212,14 +225,12 @@
|
|||
margin: 24px 0 0;
|
||||
padding: 0;
|
||||
list-style-type: none;
|
||||
display: flex;
|
||||
justify-content: end;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 640px) {
|
||||
section.posts .post .controls {
|
||||
display: flex;
|
||||
justify-content: end
|
||||
}
|
||||
|
||||
section.posts .post .controls .control-element a {
|
||||
margin: 0 0 0 12px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,7 +4,8 @@
|
|||
[clojure.string :as str]
|
||||
[clojure.pprint :as pprint]
|
||||
[computersandblues.lodestone.database :as db]
|
||||
[computersandblues.lodestone.match :refer [query->matching-fn]]))
|
||||
[computersandblues.lodestone.match :refer [query->matching-fn]]
|
||||
[applied-science.js-interop :as j]))
|
||||
|
||||
(def posts-init-state
|
||||
{:query nil
|
||||
|
|
@ -27,13 +28,21 @@
|
|||
:section/posts posts-init-state}))
|
||||
|
||||
; TODO Ensure that cached data is up to date
|
||||
; TODO Manually fetch older / newer favorites
|
||||
; TODO Handle 429
|
||||
; TODO Search for tags (`#foo`) and handles (`@bar`)
|
||||
; TODO Explain which kind of search currently is possible
|
||||
|
||||
;; Mastodon API helpers
|
||||
|
||||
(defn- promise-all [xs]
|
||||
(js/Promise.all (clj->js xs)))
|
||||
|
||||
(defn- promise-resolve [val]
|
||||
(js/Promise.resolve val))
|
||||
|
||||
(defn- promise-reject [val]
|
||||
(js/Promise.reject val))
|
||||
|
||||
(defn- link-header
|
||||
"Given a JS `Response` object, will parse the `link` header and find a link of
|
||||
a given `link-type` if present. Useful for paginating API requests."
|
||||
|
|
@ -59,26 +68,27 @@
|
|||
"Small helper function to send authorized requests to mastodon-compatible APIs"
|
||||
[{:keys [url method bearer-token payload]
|
||||
:or {method :get}}]
|
||||
(js/Promise.
|
||||
(fn [resolve reject]
|
||||
(. (js/fetch url
|
||||
(clj->js (cond-> {:method (str/upper-case (name method))}
|
||||
bearer-token (assoc-in [:headers :authorization] (str "Bearer " bearer-token))
|
||||
payload (->
|
||||
(assoc-in [:headers :content-type] "application/json; charset=utf-8")
|
||||
(assoc :body (js/JSON.stringify (clj->js payload)))))))
|
||||
(then (fn [res]
|
||||
(if (.-ok res)
|
||||
(-> (.json res)
|
||||
(.then
|
||||
(fn [body]
|
||||
(resolve {:raw res
|
||||
:body (js->clj body {:keywordize-keys true})}))))
|
||||
(reject res))))))))
|
||||
(. (js/fetch url
|
||||
(clj->js (cond-> {:method (str/upper-case (name method))}
|
||||
bearer-token (assoc-in [:headers :authorization] (str "Bearer " bearer-token))
|
||||
payload (->
|
||||
(assoc-in [:headers :content-type] "application/json; charset=utf-8")
|
||||
(assoc :body (js/JSON.stringify (clj->js payload)))))))
|
||||
(then (fn [res]
|
||||
(if (.-ok res)
|
||||
(-> (.json res)
|
||||
(.then
|
||||
(fn [body]
|
||||
(promise-resolve {:raw res
|
||||
:body (js->clj body {:keywordize-keys true})}))))
|
||||
(promise-reject res))))))
|
||||
|
||||
(defn- search-params [params]
|
||||
(defn- ->search-params [params]
|
||||
(js/URLSearchParams. (clj->js params)))
|
||||
|
||||
(defn- url->search-params [url]
|
||||
(.-searchParams (js/URL. url)))
|
||||
|
||||
;; all of the app's sections (i.e. different views / pieces of functionality)
|
||||
|
||||
;; login & application setup
|
||||
|
|
@ -99,24 +109,26 @@
|
|||
(set! (.-location js/window)
|
||||
(str (:instance_url application)
|
||||
"/oauth/authorize?"
|
||||
(search-params {:response_type "code"
|
||||
:client_id (:client_id application)
|
||||
:redirect_uri (:redirect_uri application) ; TODO handle multiple reidrect uris?
|
||||
:scope "read:favourites"}))))
|
||||
(->search-params {:response_type "code"
|
||||
:client_id (:client_id application)
|
||||
:redirect_uri (:redirect_uri application) ; TODO handle multiple reidrect uris?
|
||||
:scope "read:favourites"}))))
|
||||
|
||||
(defn oauth-authorization-code [location]
|
||||
(.get (js/URLSearchParams. (.-search location)) "code"))
|
||||
(-> (.-search location)
|
||||
(js/URLSearchParams.)
|
||||
(.get "code")))
|
||||
|
||||
(defn handle-oauth-authorization-code! [{:keys [application code]}]
|
||||
(->
|
||||
(mastodon-request! {:method :post
|
||||
:url (str (:instance_url application)
|
||||
"/oauth/token?"
|
||||
(search-params {:grant_type "authorization_code"
|
||||
:code code
|
||||
:client_id (:client_id application)
|
||||
:client_secret (:client_secret application)
|
||||
:redirect_uri (:redirect_uri application)}))})
|
||||
(->search-params {:grant_type "authorization_code"
|
||||
:code code
|
||||
:client_id (:client_id application)
|
||||
:client_secret (:client_secret application)
|
||||
:redirect_uri (:redirect_uri application)}))})
|
||||
(.then (fn [res]
|
||||
(let [bearer-token (-> res :body :access_token)
|
||||
application (assoc application :bearer_token bearer-token)]
|
||||
|
|
@ -143,6 +155,12 @@
|
|||
(declare fetch-posts!)
|
||||
(declare refresh-displayed-posts!)
|
||||
|
||||
(defn- fetch-application-settings []
|
||||
(-> (db/open-cursor! ::db/application db/all)
|
||||
(db/transduce-cursor (comp (take 1)
|
||||
(map #(js->clj % :keywordize-keys true)))
|
||||
(fn [_ x] x))))
|
||||
|
||||
(defn setup-application!
|
||||
"Handles Mastodon application setup on the client side"
|
||||
[]
|
||||
|
|
@ -156,14 +174,11 @@
|
|||
; the last case is not handled in this function, but is handled by the
|
||||
; `create-remote-application!` function that is called once the user submits
|
||||
; the form with their instance URL.
|
||||
(-> (db/open-cursor! ::db/application db/all)
|
||||
(db/transduce-cursor (comp (take 1)
|
||||
(map #(js->clj % :keywordize-keys true))))
|
||||
(.then (fn [[application]]
|
||||
(-> (fetch-application-settings)
|
||||
(.then (fn [application]
|
||||
(let [code (oauth-authorization-code (.-location js/window))]
|
||||
(cond
|
||||
(:bearer_token application)
|
||||
(js/Promise.resolve application)
|
||||
(:bearer_token application) (js/Promise.resolve application)
|
||||
|
||||
(and application code)
|
||||
(handle-oauth-authorization-code!
|
||||
|
|
@ -181,16 +196,12 @@
|
|||
(.then (fn [application]
|
||||
(when application
|
||||
(swap! state assoc :section :posts)
|
||||
(js/Promise.all #js [application (db/count! ::db/posts)]))))
|
||||
(promise-all [application (db/count! ::db/posts)]))))
|
||||
(.then (fn [[application post-count]]
|
||||
(when post-count
|
||||
(if (zero? post-count)
|
||||
(fetch-posts! {:instance-url (:instance_url application)
|
||||
:bearer-token (:bearer_token application)
|
||||
:continue?
|
||||
(fn [response]
|
||||
(and (seq (:body response))
|
||||
(< (count (:favorites @state)) 500)))})
|
||||
:bearer-token (:bearer_token application)})
|
||||
(refresh-displayed-posts! (:section/posts @state))))))))
|
||||
|
||||
;;; views
|
||||
|
|
@ -223,34 +234,36 @@
|
|||
|
||||
;;; api interaction
|
||||
|
||||
(defn- favorites-url [{:keys [instance-url limit max-id]
|
||||
(defn- favorites-url [{:keys [instance-url limit max-id min-id]
|
||||
:or {limit 40}}]
|
||||
(let [params (search-params (cond-> {:limit limit}
|
||||
max-id (assoc :max_id max-id)))]
|
||||
(let [params (->search-params (cond-> {:limit limit}
|
||||
max-id (assoc :max_id max-id)
|
||||
min-id (assoc :min_id min-id)))]
|
||||
(str instance-url "/api/v1/favourites?" params)))
|
||||
|
||||
(defn fetch-favorites!
|
||||
[{:keys [instance-url bearer-token max-id
|
||||
(defn paginate-posts!
|
||||
[{:keys [instance-url bearer-token
|
||||
max-id min-id
|
||||
on-response on-error continue?]
|
||||
:or {continue? (fn [response]
|
||||
(seq (:body response)))
|
||||
on-response on-response
|
||||
on-error on-error}}]
|
||||
(js/console.log 'fetch-favorites! instance-url max-id bearer-token)
|
||||
((fn fetch-favorites' [url]
|
||||
((fn paginate! [url]
|
||||
(let [req-id (js/Date.now)]
|
||||
(println :calling url)
|
||||
(js/console.log :paginate! url :max-id max-id :min-id min-id)
|
||||
(swap! state update-in [:section/posts :loading] conj req-id)
|
||||
(-> (mastodon-request! {:url url :bearer-token bearer-token})
|
||||
(.then (fn [response]
|
||||
(on-response response)
|
||||
(if (continue? response)
|
||||
(js/setTimeout #(fetch-favorites' (link-header "next" (:raw response))) 500)
|
||||
(swap! state update-in [:section/posts :loading] disj req-id))))
|
||||
(let [next-url (link-header "next" (:raw response))]
|
||||
(swap! state update-in [:section/posts :loading] disj req-id)
|
||||
(on-response response)
|
||||
(when (and (continue? response) next-url)
|
||||
(js/setTimeout #(paginate! next-url) 500)))))
|
||||
(.catch (fn [response]
|
||||
(swap! state update-in [:section/posts :loading] disj req-id)
|
||||
(on-error response))))))
|
||||
(favorites-url {:instance-url instance-url :max-id max-id})))
|
||||
(favorites-url {:instance-url instance-url :max-id max-id :min-id min-id})))
|
||||
|
||||
;;; views
|
||||
|
||||
|
|
@ -341,6 +354,14 @@
|
|||
(js/navigator.clipboard.writeText (:url post)))} "◎ Copy URL to clipboard"]]]]
|
||||
#_[debug post]])
|
||||
|
||||
#_(defn logging [f]
|
||||
(let [n (volatile! 0)]
|
||||
(fn [& args]
|
||||
(when (< @n 10)
|
||||
(vswap! n inc)
|
||||
(js/console.log :logging args)
|
||||
(apply f args)))))
|
||||
|
||||
(defn- refresh-displayed-posts!
|
||||
[posts-section]
|
||||
(let [{:keys [per-page query]} posts-section
|
||||
|
|
@ -352,42 +373,90 @@
|
|||
(map #(js->clj % :keywordize-keys true)))
|
||||
refresh-id (js/Date.now)]
|
||||
(swap! state update-in [:section/posts :loading] conj refresh-id)
|
||||
(-> (js/Promise.all #js [(db/count! ::db/posts)
|
||||
(-> (db/open-cursor! ::db/posts ::db/post-created-at db/all "prev")
|
||||
(db/transduce-cursor xform))])
|
||||
(.then (fn [[total displayed-posts]]
|
||||
(swap! state update :section/posts #(-> (assoc % :total total)
|
||||
(assoc :displayed-posts displayed-posts)
|
||||
(update :loading disj refresh-id))))))))
|
||||
(. (promise-all [(db/count! ::db/posts)
|
||||
(-> (db/open-cursor! ::db/posts ::db/post-created-at db/all "prev")
|
||||
(db/transduce-cursor xform))])
|
||||
(then (fn [[total displayed-posts]]
|
||||
(swap! state update :section/posts #(-> (assoc % :total total)
|
||||
(assoc :displayed-posts displayed-posts)
|
||||
(update :loading disj refresh-id))))))))
|
||||
|
||||
(def debounced-refresh! (debounce 20 (partial refresh-displayed-posts!)))
|
||||
(def debounced-refresh! (debounce 40 refresh-displayed-posts!))
|
||||
|
||||
(defn- fetch-posts! [opts]
|
||||
(let [defaults {:max-id nil
|
||||
:on-response (fn [response]
|
||||
(doseq [post (:body response)]
|
||||
(db/put! ::db/posts post))
|
||||
(let [url-params (url->search-params (.-url (:raw response)))]
|
||||
(js/console.log :on-response
|
||||
:max_id (.get url-params "max_id")
|
||||
:min_id (.get url-params "min_id"))
|
||||
(doseq [post (:body response)]
|
||||
(db/put! ::db/posts (cond-> post
|
||||
; these IDs are internal server ids and it looks like
|
||||
; they are not returned in any response; they are
|
||||
; required for pagination, so we're storing them to be
|
||||
; able to abort and continue pagination if we want or
|
||||
; if outer circumstances decide so (for example if the
|
||||
; tab is closed)
|
||||
(.get url-params "max_id")
|
||||
(assoc :internal_id (.get url-params "max_id"))
|
||||
|
||||
(.get url-params "min_id")
|
||||
(assoc :internal_id (.get url-params "min_id"))))))
|
||||
(debounced-refresh! (:section/posts @state)))}]
|
||||
(fetch-favorites! (merge defaults opts))))
|
||||
(paginate-posts! (merge defaults opts))))
|
||||
|
||||
(defn- internal-post-id [max-or-min]
|
||||
(-> (db/open-cursor! ::db/posts ::db/post-created-at db/all (if (= max-or-min :min)
|
||||
"next"
|
||||
"prev"))
|
||||
(db/transduce-cursor (comp (keep (j/get :internal_id))
|
||||
(take 1))
|
||||
(fn [_ x] x))))
|
||||
|
||||
(defn fetch-more-posts! [e]
|
||||
(.preventDefault e)
|
||||
(. (promise-all [(fetch-application-settings) (internal-post-id :min) (internal-post-id :max)])
|
||||
(then (fn [[application min-id max-id]]
|
||||
(when min-id
|
||||
(fetch-posts! {:instance-url (:instance_url application)
|
||||
:bearer-token (:bearer_token application)
|
||||
:min-id min-id}))
|
||||
(when max-id
|
||||
(fetch-posts! {:instance-url (:instance_url application)
|
||||
:bearer-token (:bearer_token application)
|
||||
:max-id max-id}))
|
||||
(when-not (or min-id max-id)
|
||||
(fetch-posts! {:instance-url (:instance_url application)
|
||||
:bearer-token (:bearer_token application)}))))))
|
||||
|
||||
(defn- disconnect-account! [e]
|
||||
(.preventDefault e)
|
||||
(when (js/confirm "Are you sure? This will log you out and clear your local cache.")
|
||||
(. (js/Promise.all #js [(db/clear! ::db/posts)
|
||||
(db/clear! ::db/application)])
|
||||
(. (promise-all [(db/clear! ::db/posts) (db/clear! ::db/application)])
|
||||
(then (fn [_]
|
||||
(swap! state #(-> (assoc % :section :login)
|
||||
(assoc :section/posts posts-init-state))))))))
|
||||
|
||||
(defn loading-indicator [{:keys [loading]}]
|
||||
(when (seq loading)
|
||||
; see https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/d#elliptical_arc_curve
|
||||
[:svg.loading-indicator {:viewBox "-10 -10 120 120" :xmlns "http://www.w3.org/2000/svg"}
|
||||
[:path.arc {:d "M50,0 A50,50 180 0,1 100,50"}]]))
|
||||
|
||||
(defn posts-section [{:keys [posts]}]
|
||||
(let [{:keys [per-page query total displayed-posts loading]} posts]
|
||||
(let [{:keys [per-page query total displayed-posts]} posts
|
||||
n-displayed (count displayed-posts)]
|
||||
[:section.posts
|
||||
[:h2 "Favorites"]
|
||||
[:header.controls
|
||||
[:p.display-info
|
||||
(str "Loaded " total " posts"
|
||||
(when (or query (> total per-page))
|
||||
(str ", displaying " (count displayed-posts) (when query " matches"))))]
|
||||
(str ", displaying " n-displayed (when query
|
||||
(if (= 1 n-displayed)
|
||||
" match"
|
||||
" matches")))))]
|
||||
[:section.search-form
|
||||
[search]
|
||||
[loading-indicator (select-keys posts [:loading])]
|
||||
|
|
@ -443,7 +512,7 @@
|
|||
|
||||
;; database
|
||||
|
||||
(def db-version 2)
|
||||
(def db-version 3)
|
||||
|
||||
(def migrations
|
||||
{1 (fn migration-0001 [db _]
|
||||
|
|
@ -451,7 +520,10 @@
|
|||
(db/create-object-store! db ::db/posts {:keyPath "id"}))
|
||||
2 (fn migration-0002 [_ txn]
|
||||
(-> (db/open-store txn ::db/posts "readwrite")
|
||||
(db/create-index! ::db/post-created-at "created_at" {:unique false})))})
|
||||
(db/create-index! ::db/post-created-at "created_at" {:unique false})))
|
||||
3 (fn migration-0003 [_ txn]
|
||||
(-> (db/open-store txn ::db/posts "readwrite")
|
||||
(db/create-index! ::db/post-internal-id "internal_id" {:unique false})))})
|
||||
|
||||
;; go go go
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue