Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-03-13 16:21:57 -05:00
Code Issues Activity

🐛 Fix dashboard grid thumbnails cache invalidation.

Browse source
This commit is contained in:
Andrey Antukh 2022-01-18 12:10:30 +01:00 • committed by Alonso Torres
parent 7afb3e2c6d
commit eb4e7e0f0c
2 changed files with 35 additions and 27 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
backend/src/app/rpc/queries/files.clj
View file

@ -165,6 +165,7 @@
f.created_at,
f.modified_at,
f.name,
f.revn,
f.is_shared
from file as f
where f.project_id = ?
@ -214,9 +215,6 @@
(some-> (retrieve-file cfg id)
(assoc :permissions perms)))))
(s/def ::page
(s/keys :req-un [::profile-id ::file-id]))
(defn remove-thumbnails-frames
"Removes from data the children for frames that have a thumbnail set up"
[data]
@ -244,7 +242,12 @@
(update data :objects update-objects)))
(s/def ::page
(s/keys :req-un [::profile-id ::file-id]))
(sv/defmethod ::page
"Retrieves the first page of the file. Used mainly for render
thumbnails on dashboard."
[{:keys [pool] :as cfg} {:keys [profile-id file-id strip-thumbnails]}]
(db/with-atomic [conn pool]
(check-read-permissions! conn profile-id file-id)

53
frontend/src/app/main/ui/dashboard/grid.cljs
View file

@ -6,6 +6,7 @@
(ns app.main.ui.dashboard.grid
(:require
[app.common.logging :as log]
[app.common.math :as mth]
[app.main.data.dashboard :as dd]
[app.main.data.messages :as dm]
@ -30,6 +31,8 @@
[promesa.core :as p]
[rumext.alpha :as mf]))
(log/set-level! :warn)
;; --- Grid Item Thumbnail
(def ^:const CACHE-NAME "penpot")
@ -40,9 +43,10 @@
[file]
(let [cache-url (str CACHE-URL (:id file) "/" (:revn file) ".svg")
get-thumbnail
(mf/use-callback
(mf/deps file)
(mf/deps cache-url)
(fn []
(p/let [response (.match js/caches cache-url)]
(when (some? response)
@ -58,50 +62,51 @@
cache-thumbnail
(mf/use-callback
(mf/deps file)
(mf/deps cache-url)
(fn [{:keys [svg fonts]}]
(p/let [cache (.open js/caches CACHE-NAME)
blob (js/Blob. #js [svg] #js {:type "image/svg"})
fonts (str/join "," fonts)
headers (js/Headers. #js {"X-PENPOT-FONTS" fonts})
response (js/Response. blob #js {:headers headers})]
(.put cache cache-url response))))
(.put cache cache-url response))))]
generate-thumbnail
(mf/use-callback
(mf/deps file)
(fn []
(->> (rx/from (get-thumbnail))
(rx/merge-map
(fn [thumb-data]
(if (some? thumb-data)
(rx/of thumb-data)
(->> (wrk/ask! {:cmd :thumbnails/generate
:file-id (:id file)
:page-id (get-in file [:data :pages 0])})
(rx/tap cache-thumbnail)))))
(mf/use-callback
(mf/deps (:id file) (:revn file))
(fn []
(->> (rx/from (get-thumbnail))
(rx/merge-map
(fn [thumb-data]
(log/debug :msg "retrieve thumbnail" :file (:id file) :revn (:revn file)
:cache (if (some? thumb-data) :hit :miss))
;; If we have a problem we delegate to the thumbnail generation
(rx/catch #(wrk/ask! {:cmd :thumbnails/generate
:file-id (:id file)
:page-id (get-in file [:data :pages 0])})))))]
(if (some? thumb-data)
(rx/of thumb-data)
(->> (wrk/ask! {:cmd :thumbnails/generate
:file-id (:id file)
:page-id (get-in file [:data :pages 0])})
(rx/tap cache-thumbnail)))))
generate-thumbnail))
;; If we have a problem we delegate to the thumbnail generation
(rx/catch #(wrk/ask! {:cmd :thumbnails/generate
:file-id (:id file)
:page-id (get-in file [:data :pages 0])})))))))
(mf/defc grid-item-thumbnail
{::mf/wrap [mf/memo]}
[{:keys [file] :as props}]
(let [container (mf/use-ref)
generate-thumbnail (use-thumbnail-cache file)]
generate (use-thumbnail-cache file)]
(mf/use-effect
(mf/deps file)
(fn []
(->> (generate-thumbnail)
(->> (generate)
(rx/subs (fn [{:keys [svg fonts]}]
(run! fonts/ensure-loaded! fonts)
(when-let [node (mf/ref-val container)]
(set! (.-innerHTML ^js node) svg)))))))
(dom/set-html! node svg)))))))
[:div.grid-item-th {:style {:background-color (get-in file [:data :options :background])}
:ref container}
i/loader-pencil]))