diff --git a/src/quo2/components/community/community_card_view.cljs b/src/quo2/components/community/community_card_view.cljs index ce0bd83376..938220ce45 100644 --- a/src/quo2/components/community/community_card_view.cljs +++ b/src/quo2/components/community/community_card_view.cljs @@ -2,41 +2,75 @@ (:require [quo2.components.community.community-view :as community-view] [quo2.components.community.icon :as icon] [quo2.components.community.style :as style] + [quo2.theme :as quo.theme] [react-native.core :as rn])) -(defn community-card-view-item - [{:keys [name description locked images cover - status tokens tags width]} on-press] - [rn/touchable-without-feedback - {:accessibility-label :community-card-item - :on-press on-press} - [rn/view {:style (style/community-card 20)} +(defn- loading-card-view + [{:keys [width theme]}] + [rn/view {:style (style/loading-card width theme)} + [rn/view (style/loading-cover-container theme)] + [rn/view (style/loading-content-container theme) + [rn/view (style/loading-avatar theme)] + [rn/view (style/loading-lock theme)] [rn/view - {:style {:width width - :height 230 - :border-radius 20} - :on-press on-press} - [rn/view {:style style/detail-container} - [rn/view (style/community-cover-container 60) - [rn/image - {:source cover - :style {:flex 1 - :border-top-right-radius 20 - :border-top-left-radius 20}}]] - [rn/view (style/card-view-content-container 12) - [rn/view (style/card-view-chat-icon 48) - [icon/community-icon {:images images} 48]] - (when (= status :gated) - [rn/view (style/permission-tag-styles) - [community-view/permission-tag-container - {:locked locked - :status status - :tokens tokens}]]) - [community-view/community-title - {:title name - :description description}] - [rn/view {:style (style/card-stats-position)} - [community-view/community-stats-column - {:type :card-view}]] - [rn/view {:style (style/community-tags-position)} - [community-view/community-tags {:tags tags}]]]]]]]) + {:style style/loading-card-content-container} + [rn/view {:style (style/loading-content-line {:theme theme :width 84 :margin-top 0})}] + [rn/view {:style (style/loading-content-line {:theme theme :width 311 :margin-top 8})}] + [rn/view {:style (style/loading-content-line {:theme theme :width 271 :margin-top 8})}]] + [rn/view + {:style style/loading-stats-container} + [rn/view {:style (style/loading-stat-circle theme 0)}] + [rn/view {:style (style/loading-stat-line theme 4)}] + [rn/view {:style (style/loading-stat-circle theme 12)}] + [rn/view {:style (style/loading-stat-line theme 4)}]] + [rn/view + {:style style/loading-tags-container} + [rn/view {:style (style/loading-tag theme 0)}] + [rn/view {:style (style/loading-tag theme 8)}] + [rn/view {:style (style/loading-tag theme 8)}]]]]) + +(defn- community-card-view + [{:keys [community on-press width theme]}] + (let [{:keys [name description locked? images cover + status tokens tags]} community] + [rn/touchable-without-feedback + {:accessibility-label :community-card-item + :on-press on-press} + [rn/view {:style (style/community-card 20 theme)} + [rn/view + {:style {:width width + :height 230 + :border-radius 20} + :on-press on-press} + [rn/view {:style style/detail-container} + [rn/view (style/community-cover-container 60) + [rn/image + {:source cover + :style {:flex 1 + :border-top-right-radius 20 + :border-top-left-radius 20}}]] + [rn/view (style/card-view-content-container 12 theme) + [rn/view (style/card-view-chat-icon 48 theme) + [icon/community-icon {:images images} 48]] + (when (= status :gated) + [rn/view (style/permission-tag-styles) + [community-view/permission-tag-container + {:locked? locked? + :status status + :tokens tokens}]]) + [community-view/community-title + {:title name + :description description}] + [rn/view {:style (style/card-stats-position)} + [community-view/community-stats-column + {:type :card-view}]] + [rn/view {:style (style/community-tags-position)} + [community-view/community-tags {:tags tags}]]]]]]])) + +(defn- internal-view + [{:keys [loading?] :as props}] + (if-not loading? + [community-card-view props] + [loading-card-view props])) + +(def view (quo.theme/with-theme internal-view)) diff --git a/src/quo2/components/community/community_list_view.cljs b/src/quo2/components/community/community_list_view.cljs index 097d8ca1ed..cf591d76fd 100644 --- a/src/quo2/components/community/community_list_view.cljs +++ b/src/quo2/components/community/community_list_view.cljs @@ -46,7 +46,7 @@ community-icon tokens]}] [rn/view - {:style (merge (style/community-card 16) + {:style (merge (style/community-card 16 theme) {:margin-bottom 12})} [rn/touchable-highlight (merge {:style {:height 56 diff --git a/src/quo2/components/community/style.cljs b/src/quo2/components/community/style.cljs index ab350d1c11..ee0472991f 100644 --- a/src/quo2/components/community/style.cljs +++ b/src/quo2/components/community/style.cljs @@ -1,8 +1,9 @@ (ns quo2.components.community.style - (:require [quo2.foundations.colors :as colors])) + (:require [quo2.foundations.colors :as colors] + [quo2.foundations.shadows :as shadows])) (defn community-card - [radius] + [radius theme] {:shadow-offset {:width 0 :height 2} :shadow-radius radius @@ -13,7 +14,8 @@ :justify-content :space-between :background-color (colors/theme-colors colors/white - colors/neutral-90)}) + colors/neutral-90 + theme)}) (def detail-container {:flex 1}) @@ -48,7 +50,7 @@ :left 12}) (defn card-view-content-container - [padding-horizontal] + [padding-horizontal theme] {:position :absolute :top 40 :bottom 0 @@ -60,10 +62,11 @@ :border-top-left-radius 16 :background-color (colors/theme-colors colors/white - colors/neutral-90)}) + colors/neutral-90 + theme)}) (defn card-view-chat-icon - [icon-size] + [icon-size theme] {:border-radius 48 :position :absolute :top (- (/ icon-size 2)) @@ -71,7 +74,8 @@ :padding 2 :background-color (colors/theme-colors colors/white - colors/neutral-90)}) + colors/neutral-90 + theme)}) (defn list-info-container [] @@ -120,21 +124,23 @@ {:padding-horizontal 12}))) (defn token-row-or-text - [padding?] + [padding? theme] (merge {:margin-top 4 :color (colors/theme-colors colors/neutral-50 - colors/neutral-40)} + colors/neutral-40 + theme)} (when padding? {:padding-left 12}))) (defn token-row-or-border - [] + [theme] {:height 1 :background-color (colors/theme-colors colors/neutral-20 - colors/neutral-80)}) + colors/neutral-80 + theme)}) (defn channel-action-touch [big?] @@ -154,3 +160,95 @@ {:flex-direction :row :justify-content :space-between :align-items :center}) + +(defn loading-card + [width theme] + (merge + {:width width + :height 230 + :border-radius 16 + :background-color (colors/theme-colors colors/neutral-10 colors/neutral-80 theme)} + (shadows/get 2 theme))) + +(defn loading-avatar + [theme] + {:width 48 + :height 48 + :border-radius 24 + :position :absolute + :top -24 + :left 12 + :background-color (colors/theme-colors colors/neutral-20 colors/neutral-70 theme) + :border-color (colors/theme-colors colors/white colors/neutral-90 theme) + :border-width 2}) + +(defn loading-lock + [theme] + {:width 48 + :height 24 + :border-radius 20 + :position :absolute + :top 8 + :right 8 + :background-color (colors/theme-colors colors/neutral-10 colors/neutral-80 theme)}) + + +(defn loading-cover-container + [theme] + {:flex-direction :row + :height 64 + :border-top-right-radius 16 + :border-top-left-radius 16 + :background-color (colors/theme-colors colors/neutral-10 colors/neutral-80 theme)}) + +(defn loading-content-container + [theme] + {:position :absolute + :heigth 190 + :top 40 + :bottom 0 + :left 0 + :right 0 + :padding-horizontal 12 + :border-radius 16 + :background-color (colors/theme-colors colors/white colors/neutral-90 theme)}) + +(def loading-tags-container + {:margin-top 20 :flex-direction :row :align-items :center}) + +(def loading-stats-container + {:margin-top 20 :flex-direction :row :align-items :center}) + +(defn loading-stat-circle + [theme margin-left] + {:height 14 + :width 14 + :border-radius 7 + :background-color (colors/theme-colors colors/neutral-20 colors/neutral-70 theme) + :margin-left margin-left}) + +(defn loading-stat-line + [theme margin-left] + {:height 12 + :width 50 + :border-radius 5 + :background-color (colors/theme-colors colors/neutral-20 colors/neutral-80 theme) + :margin-left margin-left}) + +(defn loading-tag + [theme margin-left] + {:height 24 + :width 76 + :border-radius 20 + :background-color (colors/theme-colors colors/neutral-10 colors/neutral-80 theme) + :margin-left margin-left}) + +(defn loading-content-line + [{:keys [theme width margin-top]}] + {:width width + :height 16 + :background-color (colors/theme-colors colors/neutral-20 colors/neutral-70 theme) + :border-radius 5 + :margin-top margin-top}) + +(def loading-card-content-container {:margin-top 36}) diff --git a/src/quo2/components/community/token_gating.cljs b/src/quo2/components/community/token_gating.cljs index 328386bd05..29db46a212 100644 --- a/src/quo2/components/community/token_gating.cljs +++ b/src/quo2/components/community/token_gating.cljs @@ -4,6 +4,7 @@ [react-native.core :as rn] [utils.i18n :as i18n] [clojure.string :as string] + [quo2.theme :as quo.theme] [quo2.components.community.style :as style])) (defn token-requirement-list-row @@ -25,8 +26,8 @@ :img-src img-src}]])) tokens))]) -(defn token-requirement-list - [{:keys [tokens padding?]}] +(defn- internal-view + [{:keys [tokens padding? theme]}] [:<> (if (> (count tokens) 1) (doall @@ -35,11 +36,13 @@ ^{:key token-requirement-index} [rn/view {:margin-bottom 12} (when-not (= token-requirement-index 0) - [rn/view {:style (style/token-row-or-border)}]) + [rn/view {:style (style/token-row-or-border theme)}]) (when-not (= token-requirement-index 0) [text/text - {:style (style/token-row-or-text padding?) + {:style (style/token-row-or-text padding? theme) :size :label} (string/lower-case (i18n/label :t/or))]) [token-requirement-list-row tokens padding?]]) tokens)) [token-requirement-list-row (first tokens) padding?])]) + +(def token-requirement-list (quo.theme/with-theme internal-view)) diff --git a/src/quo2/core.cljs b/src/quo2/core.cljs index 54523ee968..0f95b70dd7 100644 --- a/src/quo2/core.cljs +++ b/src/quo2/core.cljs @@ -148,7 +148,7 @@ (def picker-colors quo2.components.colors.color-picker.view/picker-colors) ;;;; COMMUNITY -(def community-card-view-item quo2.components.community.community-card-view/community-card-view-item) +(def community-card-view-item quo2.components.community.community-card-view/view) (def communities-membership-list-item quo2.components.community.community-list-view/communities-membership-list-item) (def community-stats-column quo2.components.community.community-view/community-stats-column) diff --git a/src/status_im/signals/core.cljs b/src/status_im/signals/core.cljs index 0ee86298e9..c25a095865 100644 --- a/src/status_im/signals/core.cljs +++ b/src/status_im/signals/core.cljs @@ -11,7 +11,8 @@ [status-im2.constants :as constants] [quo2.foundations.colors :as colors] [status-im2.contexts.profile.login.events :as profile.login] - [utils.transforms :as transforms])) + [utils.transforms :as transforms] + [status-im2.contexts.communities.discover.events])) (rf/defn summary [{:keys [db] :as cofx} peers-summary] @@ -95,50 +96,54 @@ ^js event-js (.-event data) type (.-type data)] (case type - "node.login" (profile.login/login-node-signal cofx (transforms/js->clj event-js)) - "backup.performed" {:db (assoc-in db - [:profile/profile :last-backup] - (.-lastBackup event-js))} - "envelope.sent" (transport.message/update-envelopes-status cofx - (:ids + "node.login" (profile.login/login-node-signal cofx (transforms/js->clj event-js)) + "backup.performed" {:db (assoc-in db + [:profile/profile :last-backup] + (.-lastBackup event-js))} + "envelope.sent" (transport.message/update-envelopes-status cofx + (:ids + (js->clj event-js + :keywordize-keys + true)) + :sent) + "envelope.expired" (transport.message/update-envelopes-status cofx + (:ids + (js->clj event-js + :keywordize-keys + true)) + :not-sent) + "message.delivered" (let [{:keys [chatID messageID]} (js->clj event-js + :keywordize-keys + true)] + (models.message/update-db-message-status cofx + chatID + messageID + :delivered)) + "mailserver.changed" (mailserver/handle-mailserver-changed cofx (.-id event-js)) + "mailserver.available" (mailserver/handle-mailserver-available cofx (.-id event-js)) + "mailserver.not.working" (mailserver/handle-mailserver-not-working cofx) + "discovery.summary" (summary cofx (js->clj event-js :keywordize-keys true)) + "mediaserver.started" {:db (assoc db :mediaserver/port (.-port event-js))} + "wakuv2.peerstats" (wakuv2-peer-stats cofx (js->clj event-js :keywordize-keys true)) + "messages.new" (transport.message/sanitize-messages-and-process-response cofx + event-js + true) + "wallet" (ethereum.subscriptions/new-wallet-event cofx (js->clj event-js :keywordize-keys true)) - :sent) - "envelope.expired" (transport.message/update-envelopes-status cofx - (:ids - (js->clj event-js - :keywordize-keys - true)) - :not-sent) - "message.delivered" (let [{:keys [chatID messageID]} (js->clj event-js - :keywordize-keys - true)] - (models.message/update-db-message-status cofx - chatID - messageID - :delivered)) - "mailserver.changed" (mailserver/handle-mailserver-changed cofx (.-id event-js)) - "mailserver.available" (mailserver/handle-mailserver-available cofx (.-id event-js)) - "mailserver.not.working" (mailserver/handle-mailserver-not-working cofx) - "discovery.summary" (summary cofx (js->clj event-js :keywordize-keys true)) - "mediaserver.started" {:db (assoc db :mediaserver/port (.-port event-js))} - "wakuv2.peerstats" (wakuv2-peer-stats cofx (js->clj event-js :keywordize-keys true)) - "messages.new" (transport.message/sanitize-messages-and-process-response cofx - event-js - true) - "wallet" (ethereum.subscriptions/new-wallet-event cofx - (js->clj event-js - :keywordize-keys - true)) - "local-notifications" (local-notifications/process cofx - (js->clj event-js :keywordize-keys true)) - "community.found" (link-preview/cache-community-preview-data (js->clj event-js - :keywordize-keys - true)) - "status.updates.timedout" (visibility-status-updates/handle-visibility-status-updates - cofx - (js->clj event-js :keywordize-keys true)) - "localPairing" (handle-local-pairing-signals cofx - (js->clj event-js :keywordize-keys true)) + "local-notifications" (local-notifications/process cofx + (js->clj event-js :keywordize-keys true)) + "community.found" (link-preview/cache-community-preview-data (js->clj event-js + :keywordize-keys + true)) + "status.updates.timedout" (visibility-status-updates/handle-visibility-status-updates + cofx + (js->clj event-js :keywordize-keys true)) + "localPairing" (handle-local-pairing-signals + cofx + (js->clj event-js :keywordize-keys true)) + "curated.communities.update" (rf/dispatch [:fetched-contract-communities + (js->clj event-js :keywordize-keys true)]) + (log/debug "Event " type " not handled")))) diff --git a/src/status_im2/contexts/communities/discover/view.cljs b/src/status_im2/contexts/communities/discover/view.cljs index dfb506027f..34639ee5d9 100644 --- a/src/status_im2/contexts/communities/discover/view.cljs +++ b/src/status_im2/contexts/communities/discover/view.cljs @@ -27,8 +27,10 @@ (get mock-community-item-data :data)) cover {:uri (get-in (:images item) [:banner :uri])}] (if (= view-type :card-view) - [quo/community-card-view-item (assoc item :width width :cover cover) - #(rf/dispatch [:communities/navigate-to-community (:id item)])] + [quo/community-card-view-item + {:community (assoc item :cover cover) + :width width + :on-press #(rf/dispatch [:communities/navigate-to-community (:id item)])}] [quo/community-list-item {:on-press (fn [] (rf/dispatch [:communities/load-category-states (:id item)]) @@ -88,9 +90,18 @@ :label (i18n/label :t/gated) :accessibility-label :gated-communities-tab}]}]]) +(defn loading-community-item + [_ _ _ {:keys [width]}] + [quo/community-card-view-item + {:width width + :loading? true}]) + +(def loading-instances-to-show 3) + (defn featured-list [communities view-type] - (let [view-size (reagent/atom 0)] + (let [view-size (reagent/atom 0) + loaded? (and communities (pos? (count communities)))] (fn [] [rn/view {:style style/featured-list-container @@ -105,8 +116,8 @@ :shows-horizontal-scroll-indicator false :nestedScrollEnabled true :separator [rn/view {:width 12}] - :data communities - :render-fn community-list-item + :data (if loaded? communities (range loading-instances-to-show)) + :render-fn (if loaded? community-list-item loading-community-item) :render-data {:width @view-size :view-type view-type} :content-container-style style/flat-list-container}])]))) @@ -126,31 +137,37 @@ (defn other-communities-list [{:keys [communities communities-ids view-type]}] [rn/view {:style style/other-communities-container} - (map-indexed - (fn [inner-index item] - (let [community-id (when communities-ids item) - community (if communities - item - (rf/sub [:communities/home-item community-id])) - cover {:uri (get-in (:images item) [:banner :uri])}] - [rn/view - {:key (str inner-index (:id community)) - :margin-bottom 16} - (if (= view-type :card-view) - [quo/community-card-view-item - (merge community - (get mock-community-item-data :data) - {:cover cover}) - #(rf/dispatch [:communities/navigate-to-community (:id community)])] - [quo/community-list-item - {:on-press (fn [] - (rf/dispatch [:communities/load-category-states (:id community)]) - (rf/dispatch [:dismiss-keyboard]) - (rf/dispatch [:communities/navigate-to-community (:id community)])) - :on-long-press #(js/alert "TODO: to be implemented")} - (merge community - (get mock-community-item-data :data))])])) - (if communities communities communities-ids))]) + (if (and communities (pos? (count communities))) + (map-indexed + (fn [inner-index item] + (let [community-id (when communities-ids item) + community (if communities + item + (rf/sub [:communities/home-item community-id])) + cover {:uri (get-in (:images item) [:banner :uri])}] + [rn/view + {:key (str inner-index (:id community)) + :margin-bottom 16} + (if (= view-type :card-view) + [quo/community-card-view-item + {:community (merge community + (get mock-community-item-data :data) + {:cover cover}) + :on-press #(rf/dispatch [:communities/navigate-to-community (:id community)])}] + + [quo/community-list-item + {:on-press (fn [] + (rf/dispatch [:communities/load-category-states (:id community)]) + (rf/dispatch [:dismiss-keyboard]) + (rf/dispatch [:communities/navigate-to-community (:id community)])) + :on-long-press #(js/alert "TODO: to be implemented")} + (merge community + (get mock-community-item-data :data))])])) + (if communities communities communities-ids)) + [:<> + [rn/view {:margin-bottom 16} [quo/community-card-view-item {:loading? true}]] + [rn/view {:margin-bottom 16} [quo/community-card-view-item {:loading? true}]] + [quo/community-card-view-item {:loading? true}]])]) (defn communities-lists [selected-tab view-type] diff --git a/src/status_im2/contexts/profile/login/events.cljs b/src/status_im2/contexts/profile/login/events.cljs index a7d0b7422d..46c788b77c 100644 --- a/src/status_im2/contexts/profile/login/events.cljs +++ b/src/status_im2/contexts/profile/login/events.cljs @@ -13,7 +13,6 @@ [status-im.notifications.core :as notifications] [status-im2.config :as config] [status-im.data-store.settings :as data-store.settings] - [status-im2.contexts.communities.discover.events :as contract-communities] [status-im.communities.core :as communities] [status-im2.common.log :as logging] [status-im2.contexts.shell.activity-center.events :as activity-center] @@ -87,7 +86,6 @@ (re-frame/dispatch [:profile.login/get-chats-callback]))}) (profile.config/get-node-config) (communities/fetch) - (contract-communities/fetch-contract-communities) (communities/fetch-collapsed-community-categories) (communities/check-and-delete-pending-request-to-join) (logging/set-log-level (:log-level settings)) diff --git a/src/status_im2/contexts/quo_preview/community/community_card_view.cljs b/src/status_im2/contexts/quo_preview/community/community_card_view.cljs index 31cd549caf..37774ca912 100644 --- a/src/status_im2/contexts/quo_preview/community/community_card_view.cljs +++ b/src/status_im2/contexts/quo_preview/community/community_card_view.cljs @@ -17,13 +17,15 @@ :community-icon (resources/get-mock-image :status-logo) :color (rand-nth quo.colors/chat-colors) :tokens [{:id 1 :group [{:id 1 :token-icon (resources/get-mock-image :status-logo)}]}] - :tags [{:id 1 :tag-label (i18n/label :t/music) :resource (resources/get-image :music)} + :tags [{:id 1 + :tag-label (i18n/label :t/music) + :emoji (resources/get-image :music)} {:id 2 :tag-label (i18n/label :t/lifestyle) - :resource (resources/get-image :lifestyle)} + :emoji (resources/get-image :lifestyle)} {:id 3 :tag-label (i18n/label :t/podcasts) - :resource (resources/get-image :podcasts)}]}) + :emoji (resources/get-image :podcasts)}]}) (def descriptor [{:label "Status:" @@ -33,14 +35,18 @@ :value "Gated"} {:key :open :value "Open"}]} - {:label "Locked:" + {:label "Locked?" :key :locked? + :type :boolean} + {:label "Loading?" + :key :loading? :type :boolean}]) (defn cool-preview [] - (let [state (reagent/atom {:status :gated - :locked? true})] + (let [state (reagent/atom {:status :gated + :locked? true + :loading? false})] (fn [] [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!} [rn/view {:padding-bottom 150} @@ -51,7 +57,9 @@ [rn/view {:padding-vertical 60 :justify-content :center} - [community-card-view/community-card-view-item (merge @state community-data)]]]]))) + [community-card-view/view + {:community (merge @state community-data) + :loading? (:loading? @state)}]]]]))) (defn preview-community-card [] diff --git a/status-go-version.json b/status-go-version.json index 36599d269f..27e6ccaf0c 100644 --- a/status-go-version.json +++ b/status-go-version.json @@ -3,7 +3,7 @@ "_comment": "Instead use: scripts/update-status-go.sh ", "owner": "status-im", "repo": "status-go", - "version": "v0.162.14", - "commit-sha1": "60143556ff942e24f4641dc741049e8ad4fef619", - "src-sha256": "0b8rk8v9fmsf36611c3frzdgq6y09pzy83h4zbz50fccphzrcxcf" + "version": "v0.162.15", + "commit-sha1": "363494f6e48e310936d5de9b11bf7e7682fd2d4b", + "src-sha256": "19qamr372k586v574zf9a84rgvx6vg59xmaacj0s6g7rr88kziil" }