[#7445] Sticker detail view in chat

Signed-off-by: Julien Eluard <julien.eluard@gmail.com>

src/status_im/chat/models/input.cljs

@@ -148,12 +148,13 @@
                                                             :text    message-text})})))
 
 (fx/defn send-sticker-fx
-  [{:keys [db] :as cofx} uri current-chat-id]
+  [{:keys [db] :as cofx} {:keys [uri pack]} current-chat-id]
   (when-not (string/blank? uri)
     (chat.message/send-message cofx {:chat-id      current-chat-id
                                      :content-type constants/content-type-sticker
                                      :content      (cond-> {:chat-id current-chat-id
                                                             :uri     uri
+                                                            :pack    pack
                                                             :text    "Update to latest version to see a nice sticker here!"})})))
 
 (fx/defn send-current-message

src/status_im/events.cljs

@@ -793,11 +793,11 @@
 
 (handlers/register-handler-fx
  :chat/send-sticker
- (fn [{{:keys [current-chat-id] :account/keys [account]} :db :as cofx} [_ {:keys [uri]}]]
+ (fn [{{:keys [current-chat-id] :account/keys [account]} :db :as cofx} [_ {:keys [uri] :as sticker}]]
    (fx/merge
     cofx
     (accounts/update-recent-stickers (conj (remove #(= uri %) (:recent-stickers account)) uri))
-    (chat.input/send-sticker-fx uri current-chat-id))))
+    (chat.input/send-sticker-fx sticker current-chat-id))))
 
 (handlers/register-handler-fx
  :chat/disable-cooldown
@@ -1656,9 +1656,8 @@
 
 (handlers/register-handler-fx
  :stickers/load-sticker-pack-success
- (fn [{:keys [db]} [_ edn-string]]
+ (fn [cofx [_ edn-string uri open?]]
-   (let [{{:keys [id] :as pack} 'meta} (edn/read-string edn-string)]
+   (stickers/load-sticker-pack-success cofx edn-string uri open?)))
-     {:db (-> db (assoc-in [:stickers/packs id] (assoc pack :edn edn-string)))})))
 
 (handlers/register-handler-fx
  :stickers/install-pack
@@ -1671,7 +1670,7 @@
    {;;TODO request list of packs from contract
     :http-get-n (mapv (fn [uri] {:url                   uri
                                  :success-event-creator (fn [o]
-                                                          [:stickers/load-sticker-pack-success o])
+                                                          [:stickers/load-sticker-pack-success o uri])
                                  :failure-event-creator (fn [o] nil)})
                       ;;TODO for testing ONLY
                       ["https://ipfs.infura.io/ipfs/QmRKmQjXyqpfznQ9Y9dTnKePJnQxoJATivPbGcCAKRsZJq/"])}))
@@ -1680,3 +1679,8 @@
  :stickers/select-pack
  (fn [{:keys [db]} [_ id]]
    {:db (assoc db :stickers/selected-pack id)}))
+
+(handlers/register-handler-fx
+ :stickers/open-sticker-pack
+ (fn [cofx [_ uri]]
+   (stickers/open-sticker-pack cofx uri)))

src/status_im/stickers/core.cljs

@@ -1,10 +1,11 @@
 (ns status-im.stickers.core
   (:require [status-im.utils.fx :as fx]
             [cljs.reader :as edn]
-            [status-im.accounts.core :as accounts]))
+            [status-im.accounts.core :as accounts]
+            [status-im.ui.screens.navigation :as navigation]))
 
 (fx/defn init-stickers-packs [{:keys [db]}]
-  (let [sticker-packs (map #(get (edn/read-string %) 'meta) (get-in db [:account/account :stickers]))]
+  (let [sticker-packs (map edn/read-string (get-in db [:account/account :stickers]))]
     {:db (assoc db :stickers/packs-installed (into {} (map #(vector (:id %) %) sticker-packs)))}))
 
 (fx/defn install-stickers-pack [{{:account/keys [account] :as db} :db :as cofx} id]
@@ -14,4 +15,26 @@
      {:db (-> db
               (assoc-in [:stickers/packs-installed id] pack)
               (assoc :stickers/selected-pack id))}
-     (accounts/update-stickers (conj (:stickers account) (:edn pack))))))
+     (accounts/update-stickers (conj (:stickers account) (pr-str pack))))))
+
+(fx/defn load-sticker-pack-success [{:keys [db] :as cofx} edn-string uri open?]
+  (let [{{:keys [id] :as pack} 'meta} (edn/read-string edn-string)
+        pack' (assoc pack :uri uri)]
+    (fx/merge cofx
+              {:db (-> db (assoc-in [:stickers/packs id] pack'))}
+              #(when open? (navigation/navigate-to-cofx % :stickers-pack-modal pack')))))
+
+(defn find-pack [pack-uri]
+  (fn [{:keys [uri] :as pack}]
+    (when (= pack-uri uri)
+      pack)))
+
+(fx/defn open-sticker-pack [{{:stickers/keys [packs packs-installed]} :db :as cofx} uri]
+  (when uri
+    (let [pack (some (find-pack uri) (concat (vals packs-installed) (vals packs)))]
+      (if pack
+        (navigation/navigate-to-cofx cofx :stickers-pack-modal pack)
+        {:http-get {:url                   uri
+                    :success-event-creator (fn [o]
+                                             [:stickers/load-sticker-pack-success o uri true])
+                    :failure-event-creator (fn [o] nil)}}))))

src/status_im/transport/db.cljs

@@ -65,6 +65,7 @@
 (spec/def :message.content/response-to-v2 string?)
 (spec/def :message.content/command-path (spec/tuple string? (spec/coll-of (spec/or :scope keyword? :chat-id string?) :kind set? :min-count 1)))
 (spec/def :message.content/uri (spec/and string? (complement s/blank?)))
+(spec/def :message.content/pack (spec/and string? (complement s/blank?)))
 (spec/def :message.content/params (spec/map-of keyword? any?))
 
 (spec/def ::content-type #{constants/content-type-text constants/content-type-command

src/status_im/ui/screens/chat/message/message.cljs

@@ -144,7 +144,7 @@
 (defmethod message-content constants/content-type-sticker
   [wrapper {:keys [content] :as message}]
   [wrapper message
-   [react/image {:style {:margin 10 :width 100 :height 100}
+   [react/image {:style {:margin 10 :width 140 :height 140}
                  :source {:uri (:uri content)}}]])
 
 (defmethod message-content :default
@@ -275,6 +275,8 @@
 (defn chat-message [{:keys [message-id old-message-id outgoing group-chat modal? current-public-key content-type content] :as message}]
   [react/view
    [react/touchable-highlight {:on-press      (fn [_]
+                                                (when (= content-type constants/content-type-sticker)
+                                                  (re-frame/dispatch [:stickers/open-sticker-pack (:pack content)]))
                                                 (re-frame/dispatch [:chat.ui/set-chat-ui-props {:messages-focused? true
                                                                                                 :show-stickers? false}])
                                                 (react/dismiss-keyboard!))

src/status_im/ui/screens/chat/stickers/views.cljs

@@ -39,7 +39,7 @@
 (defview recent-stickers-panel []
   (letsubs [stickers [:stickers/recent]]
     (if (seq stickers)
-      [stickers-panel (map #(hash-map :uri %) stickers)]
+      [stickers-panel stickers]
       [react/view {:style {:flex 1 :align-items :center :justify-content :center}}
        [vector-icons/icon :stickers-icons/stickers-big {:color colors/gray}]
        [react/text {:style {:margin-top 8 :font-size 17}} (i18n/label :t/recently-used-stickers)]])))
@@ -55,8 +55,9 @@
     [react/view {:style {:margin-bottom 5 :height 2 :width 16 :border-radius 1
                          :background-color (if selected? colors/blue colors/white)}}]]])
 
-(defn pack-for [packs id]
+(defn pack-stickers [packs id]
-  (some #(when (= id (:id %)) %) packs))
+  (let [{:keys [stickers uri]} (some #(when (= id (:id %)) %) packs)]
+    (map #(assoc % :pack uri) stickers)))
 
 (defn show-panel-anim
   [bottom-anim-value alpha-value]
@@ -83,7 +84,7 @@
        (= selected-pack :recent) [recent-stickers-panel]
        (not (seq installed-packs)) [no-stickers-yet-panel]
        (nil? selected-pack) [recent-stickers-panel]
-       :else [stickers-panel (:stickers (pack-for installed-packs selected-pack))])
+       :else [stickers-panel (pack-stickers installed-packs selected-pack)])
      [react/view {:style {:flex-direction :row :padding-horizontal 4}}
       [pack-icon {:on-press #(do
                                (re-frame/dispatch [:stickers/load-packs])

src/status_im/ui/screens/stickers/subs.cljs

@@ -31,8 +31,15 @@
  (fn [[{:keys [id]} packs]]
    (first (filter #(= (:id %) id) packs))))
 
+(defn find-pack-id-for-uri [sticker-uri packs]
+  (some (fn [{:keys [stickers uri]}]
+          (when (some #(= sticker-uri (:uri %)) stickers)
+            uri))
+        packs))
+
 (re-frame/reg-sub
  :stickers/recent
  :<- [:account/account]
- (fn [{:keys [recent-stickers]}]
+ :<- [:stickers/installed-packs-vals]
-   recent-stickers))
+ (fn [[{:keys [recent-stickers]} packs]]
+   (map (fn [uri] {:uri uri :pack (find-pack-id-for-uri uri packs)}) recent-stickers)))

src/status_im/ui/screens/stickers/views.cljs

@@ -63,12 +63,12 @@
 
 (def sticker-icon-size 60)
 
-(defview pack []
+(defview pack-main [modal?]
   (letsubs [{:keys [id name author price thumbnail stickers installed]} [:stickers/get-current-pack]]
     [react/view styles/screen
      [status-bar/status-bar]
      [react/keyboard-avoiding-view components.styles/flex
-      [toolbar/simple-toolbar]
+      [toolbar/simple-toolbar nil modal?]
       [react/view {:height 74 :align-items :center :flex-direction :row :padding-horizontal 16}
        [thumbnail-icon thumbnail 64]
        [react/view {:padding-horizontal 16 :flex 1}
@@ -84,3 +84,9 @@
            ^{:key uri}
            [react/image {:style (styles/sticker-image sticker-icon-size)
                          :source {:uri uri}}])]]]]]))
+
+(defview pack []
+  [pack-main false])
+
+(defview pack-modal []
+  [pack-main true])

src/status_im/ui/screens/views.cljs

@@ -163,8 +163,7 @@
       (stack-screens
        {:main-stack
         {:screens
-         (cond->
+         (cond-> {:home                         (main-tabs/get-main-tab :home)
-          {:home                         (main-tabs/get-main-tab :home)
                   :chat                         chat
                   :profile                      profile.contact/profile
                   :new                          add-new
@@ -199,6 +198,9 @@
         :show-extension-modal
         (wrap-modal :show-extension-modal show-extension-modal)
 
+        :stickers-pack-modal
+        (wrap-modal :stickers-pack-modal stickers/pack-modal)
+
         :wallet-send-modal-stack
         {:screens
          {:wallet-send-transaction-modal