feature #1999 - discover screen, empty states for recent statuses and popular hashtags

react-native/src/status_im/react_native/resources.cljs

@@ -18,3 +18,7 @@
 
 (def assets
   {:ethereum       (js/require "./resources/images/assets/ethereum.png")})
+
+(def ui
+  {:empty-hashtags (js/require "./resources/images/ui/empty-hashtags.png")
+   :empty-recent   (js/require "./resources/images/ui/empty-recent.png")})

src/status_im/translations/en.cljs

@@ -164,7 +164,6 @@
    :search-tags                           "Type your search tags here"
    :popular-tags                          "Popular hashtags"
    :recent                                "Recent statuses"
-   :no-statuses-discovered                "No statuses discovered"
    :no-statuses-found                     "No statuses found"
    :chat                                  "Chat"
    :all                                   "All"
@@ -172,6 +171,10 @@
    :soon                                  "Soon"
    :public-chat-user-count                "{{count}} people"
    :dapps                                 "DApps"
+   :no-statuses-discovered                "No statuses discovered"
+   :no-statuses-discovered-body           "When somebody posts a status\nyou will see it here."
+   :no-hashtags-discovered-title          "No hashtags discovered"
+   :no-hashtags-discovered-body           "When a hashtag becomes popular\nyou will see it here."
 
    ;;settings
    :settings                              "Settings"

src/status_im/ui/screens/discover/styles.cljs

@@ -348,3 +348,23 @@
   {:background-color styles/color-white
    :padding-left     10
    :padding-right    10})
+
+(def empty-section-container
+  {:flex-direction   :row
+   :margin-left      32
+   :padding-vertical 50})
+
+(def empty-section-image
+  {:height 70
+   :width  70})
+
+(def empty-section-description
+  {:flex-direction :column
+   :margin-left    12})
+
+(def empty-section-title-text
+  {:font-size 15})
+
+(def empty-section-body-text
+  {:margin-top 2
+   :font-size  14})

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

@@ -15,7 +15,19 @@
     [status-im.i18n :as i18n]
     [status-im.ui.screens.discover.styles :as styles]
     [status-im.ui.screens.contacts.styles :as contacts-st]
-    [status-im.components.list.views :as components.list]))
+    [status-im.components.list.views :as components.list]
+    [status-im.react-native.resources :as resources]))
+
+(defn empty-section [image-kw title-kw body-kw]
+  [react/view styles/empty-section-container
+   [react/image {:source (image-kw resources/ui)
+                 :style  styles/empty-section-image}]
+   [react/view styles/empty-section-description
+    [react/text {:font  :medium
+                 :style styles/empty-section-title-text}
+     (i18n/label title-kw)]
+    [react/text {:style styles/empty-section-body-text}
+     (i18n/label body-kw)]]])
 
 (defn get-hashtags [status]
   (let [hashtags (map #(str/lower-case (str/replace % #"#" "")) (re-seq #"[^ !?,;:.]+" status))]
@@ -73,15 +85,7 @@
           [top-status-for-popular-hashtag {:tag             name
                                            :contacts        contacts
                                            :current-account current-account}])]
-       [react/text (i18n/label :t/none)])]))
+       [empty-section :empty-hashtags :t/no-hashtags-discovered-title :t/no-hashtags-discovered-body])]))
-
-
-(defn empty-discoveries []
-  [react/view contacts-st/empty-contact-groups
-   ;; todo change the icon
-   [vi/icon :icons/group-big {:style contacts-st/empty-contacts-icon}]
-   [react/text {:style contacts-st/empty-contacts-text}
-    (i18n/label :t/no-statuses-discovered)]])
 
 (defn recent-statuses-preview [current-account discoveries]
   [react/view styles/recent-statuses-preview-container
@@ -96,7 +100,7 @@
          [components/discover-list-item {:message         discovery
                                          :show-separator? false
                                          :current-account current-account}]])]
-     [react/text (i18n/label :t/none)])])
+     [empty-section :empty-recent :t/no-statuses-discovered :t/no-statuses-discovered-body])])
 
 (def public-chats-mock-data
   [{:name  "Status team"
@@ -143,11 +147,9 @@
     [react/view styles/discover-container
      [toolbar-view (and current-view?
                         (= show-search :discover)) search-text]
-     (if discoveries
        [react/scroll-view styles/list-container
         [recent-statuses-preview current-account discoveries]
         [popular-hashtags-preview {:contacts        contacts
                                    :current-account current-account}]
         [all-dapps/preview all-dapps]
-        [public-chats-teaser]]
+        [public-chats-teaser]]]))
-       [empty-discoveries])]))