From 404fae9c7c4ebad688eb85d6187aa21e53f58b8d Mon Sep 17 00:00:00 2001 From: Andrey Antukh Date: Mon, 25 Jan 2021 17:33:20 +0100 Subject: [PATCH] :sparkles: Improve loading state on dashboard. --- frontend/resources/locales.json | 7 +++ frontend/src/app/main/data/dashboard.cljs | 44 +++++++------------ frontend/src/app/main/ui/dashboard.cljs | 2 +- frontend/src/app/main/ui/dashboard/grid.cljs | 28 +++++++++--- .../src/app/main/ui/dashboard/projects.cljs | 8 ++-- 5 files changed, 51 insertions(+), 38 deletions(-) diff --git a/frontend/resources/locales.json b/frontend/resources/locales.json index 55ecd6c2a..72d89fc6e 100644 --- a/frontend/resources/locales.json +++ b/frontend/resources/locales.json @@ -351,6 +351,13 @@ "es" : "Todavía no hay ningún archivo aquí" } }, + "dashboard.loading-files" : { + "used-in" : [ "src/app/main/ui/dashboard/grid.cljs:189" ], + "translations" : { + "en" : "loading your files ...", + "es" : "cargando tus ficheros ..." + } + }, "dashboard.invite-profile" : { "used-in" : [ "src/app/main/ui/dashboard/team.cljs:72" ], "translations" : { diff --git a/frontend/src/app/main/data/dashboard.cljs b/frontend/src/app/main/data/dashboard.cljs index e6a307cc6..e819e3f05 100644 --- a/frontend/src/app/main/data/dashboard.cljs +++ b/frontend/src/app/main/data/dashboard.cljs @@ -117,25 +117,9 @@ ptk/WatchEvent (watch [_ state stream] (let [profile (:profile state)] - (->> (rx/merge (ptk/watch (fetch-team params) state stream) - (ptk/watch (fetch-projects {:team-id id}) state stream) - (ptk/watch (du/fetch-users {:team-id id}) state stream)) - (rx/catch (fn [{:keys [type code] :as error}] - (cond - (and (= :not-found type) - (not= id (:default-team-id profile))) - (rx/of (rt/nav :dashboard-projects {:team-id (:default-team-id profile)}) - (dm/error "Team does not found")) - - (and (= :validation type) - (= :not-authorized code) - (not= id (:default-team-id profile))) - (rx/of (rt/nav :dashboard-projects {:team-id (:default-team-id profile)}) - (dm/error "Team does not found")) - - :else - (rx/throw error))))))))) - + (rx/merge (ptk/watch (fetch-team params) state stream) + (ptk/watch (fetch-projects {:team-id id}) state stream) + (ptk/watch (du/fetch-users {:team-id id}) state stream)))))) ;; --- Search Files @@ -197,23 +181,29 @@ [{:keys [team-id] :as params}] (us/assert ::us/uuid team-id) (ptk/reify ::fetch-recent-files + ptk/UpdateEvent + (update [_ state] + (dissoc state :files :recent-files)) + ptk/WatchEvent (watch [_ state stream] (let [params {:team-id team-id}] (->> (rp/query :recent-files params) - (rx/map recent-files-fetched)))))) + (rx/map #(recent-files-fetched team-id %))))))) (defn recent-files-fetched - [files] + [team-id files] (ptk/reify ::recent-files-fetched ptk/UpdateEvent (update [_ state] - (reduce-kv (fn [state project-id files] - (-> state - (update-in [:files project-id] merge (d/index-by :id files)) - (assoc-in [:recent-files project-id] (into #{} (map :id) files)))) - state - (group-by :project-id files))))) + (let [projects (keys (get-in state [:projects team-id]))] + (reduce (fn [state project-id] + (let [files (filter #(= project-id (:project-id %)) files)] + (-> state + (update-in [:files project-id] merge (d/index-by :id files)) + (assoc-in [:recent-files project-id] (into #{} (map :id) files))))) + state + projects))))) ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; ;; Data Modification diff --git a/frontend/src/app/main/ui/dashboard.cljs b/frontend/src/app/main/ui/dashboard.cljs index c360fb6e2..702bc1c25 100644 --- a/frontend/src/app/main/ui/dashboard.cljs +++ b/frontend/src/app/main/ui/dashboard.cljs @@ -112,7 +112,7 @@ :profile profile :section section :search-term search-term}] - (when team + (when (and team (seq projects)) [:& dashboard-content {:projects projects :profile profile :project project diff --git a/frontend/src/app/main/ui/dashboard/grid.cljs b/frontend/src/app/main/ui/dashboard/grid.cljs index 7aa852318..50c67d187 100644 --- a/frontend/src/app/main/ui/dashboard/grid.cljs +++ b/frontend/src/app/main/ui/dashboard/grid.cljs @@ -183,16 +183,25 @@ (mf/defc empty-placeholder [] - (let [locale (mf/deref i18n/locale)] - [:div.grid-empty-placeholder - [:div.icon i/file-html] - [:div.text (t locale "dashboard.empty-files")]])) + [:div.grid-empty-placeholder + [:div.icon i/file-html] + [:div.text (tr "dashboard.empty-files")]]) + +(mf/defc loading-placeholder + [] + [:div.grid-empty-placeholder + [:div.icon i/loader] + [:div.text (tr "dashboard.loading-files")]]) (mf/defc grid [{:keys [id opts files] :as props}] (let [locale (mf/deref i18n/locale)] [:section.dashboard-grid - (if (pos? (count files)) + (cond + (nil? files) + [:& loading-placeholder] + + (seq files) [:div.grid-row (for [item files] [:& grid-item @@ -200,6 +209,7 @@ :file item :key (:id item)}])] + :else [:& empty-placeholder])])) (mf/defc line-grid-row @@ -255,9 +265,15 @@ [{:keys [project-id opts files on-load-more] :as props}] (let [locale (mf/deref i18n/locale)] [:section.dashboard-grid - (if (pos? (count files)) + (cond + (nil? files) + [:& loading-placeholder] + + (seq files) [:& line-grid-row {:files files :on-load-more on-load-more :locale locale}] + + :else [:& empty-placeholder])])) diff --git a/frontend/src/app/main/ui/dashboard/projects.cljs b/frontend/src/app/main/ui/dashboard/projects.cljs index b2fee3984..98e114af7 100644 --- a/frontend/src/app/main/ui/dashboard/projects.cljs +++ b/frontend/src/app/main/ui/dashboard/projects.cljs @@ -50,10 +50,10 @@ files-map (mf/deref files-ref) recent-ids (mf/deref recent-ref) - files (->> recent-ids - (map #(get files-map %)) - (sort-by :modified-at) - (reverse)) + files (some->> recent-ids + (map #(get files-map %)) + (sort-by :modified-at) + (reverse)) project-id (:id project) team-id (:team-id project)