[#10880] Expanded view with public chat categories

resources/chats.json

@@ -0,0 +1,134 @@
+{
+  "chats": [
+    ["Featured", [
+      "status",
+      "support",
+      "crypto",
+      "chitchat",
+      "defi",
+      "markets",
+      "dap-ps",
+      "devcon",
+      "eth2"
+    ]],
+
+    ["General", [
+      "chitchat",
+      "chitchat",
+      "hello",
+      "worldnews",
+      "status",
+      "support"
+    ]],
+
+    ["Entertainment", [
+      "music",
+      "movies",
+      "podcasts",
+      "books",
+      "gaming",
+      "adult",
+      "tv-shows"
+    ]],
+
+    ["Interests", [
+      "sports",
+      "travel",
+      "design",
+      "food",
+      "automotive"
+    ]],
+
+    ["Society", [
+      "climatechange",
+      "blacklivesmatter",
+      "politics",
+      "hongkong",
+      "privacy"
+    ]],
+
+    ["Crypto", [
+      "crypto",
+      "markets",
+      "crypto-education",
+      "ethereum",
+      "bitcoin",
+      "chainlink",
+      "avalanche",
+      "eth2",
+      "eips",
+      "dap-ps",
+      "cryptolife",
+      "governance",
+      "staking",
+      "defi",
+      "cryptopayments",
+      "tokenomics",
+      "web3",
+      "web3design",
+      "devcon",
+      "exchange",
+      "validators"
+    ]],
+
+    ["Technologies", [
+      "tech",
+      "ai",
+      "vr-ar",
+      "networks"
+    ]],
+
+    ["Status", [
+      "status",
+      "support",
+      "statusphere",
+      "status-townhall-questions",
+      "status-core-ui",
+      "status-keycard",
+      "nimbus-general",
+      "status-assemble",
+      "status-marketing",
+      "status-protocol",
+      "status-desktop",
+      "status-watercooler",
+      "status-security",
+      "waku",
+      "status-docs",
+      "status-general",
+      "status-design"
+    ]],
+
+    ["Development", [
+      "ethereum-clients",
+      "storage",
+      "indexing",
+      "sidechains",
+      "layer2",
+      "devops",
+      "smart-contracts",
+      "embark-community",
+      "subspace",
+      "open-source",
+      "security"
+    ]],
+
+    ["Languages", [
+      "status-spanish",
+      "statusbrasil",
+      "status-german",
+      "status-french",
+      "status-italiano",
+      "status-dutch",
+      "status-russian",
+      "status-chinese",
+      "status-korean",
+      "status-japanese",
+      "status-farsi",
+      "status-turkish",
+      "status-filipino",
+      "status-naija",
+      "status-indian",
+      "indonesian"
+    ]]
+  ]
+}

shadow-cljs.edn

@@ -48,7 +48,8 @@
                  ;; in the SHADOW_HOST env variable to make sure that
                  ;; it will use the right interface
                  :local-ip #shadow/env "SHADOW_HOST"}
-           :chunks {:fleets status-im.default-fleet/default-fleets}
+           :chunks {:fleets status-im.default-fleet/default-fleets
+                    :chats status-im.chat.default-chats/default-chats}
            :release {:compiler-options {:output-feature-set :es6
                                         ;;disable for android build as there
                                         ;;is an intermittent warning with deftype

src/mocks/js_dependencies.cljs

@@ -1,6 +1,7 @@
 (ns mocks.js-dependencies
   (:require-macros [status-im.utils.slurp :refer [slurp]])
-  (:require [status-im.default-fleet :refer (default-fleets)]))
+  (:require [status-im.default-fleet :refer (default-fleets)])
+  (:require [status-im.chat.default-chats :refer (default-chats)]))
 
 (def action-button          #js {:default #js {:Item #js {}}})
 (def config                 #js {:default #js {}})
@@ -202,6 +203,7 @@
     "react-native-image-resizer" image-resizer
     "react-native-haptic-feedback" react-native-haptic-feedback
     "./fleets.js" default-fleets
+    "./chats.js" default-chats
     "../translations/ar.json" (js/JSON.parse (slurp "./translations/ar.json"))
     "../translations/de.json" (js/JSON.parse (slurp "./translations/de.json"))
     "../translations/en.json" (js/JSON.parse (slurp "./translations/en.json"))

src/status_im/chat/default_chats.cljs

@@ -0,0 +1,5 @@
+(ns status-im.chat.default-chats
+  (:require-macros [status-im.utils.slurp :refer [slurp]]))
+
+(def default-chats
+  (slurp "resources/chats.json"))

src/status_im/chat/models.cljs

@@ -14,7 +14,11 @@
             [status-im.utils.clocks :as utils.clocks]
             [status-im.utils.fx :as fx]
             [status-im.utils.utils :as utils]
-            [status-im.chat.models.loading :as loading]))
+            [status-im.chat.models.loading :as loading]
+            [status-im.utils.types :as types]))
+
+(defn chats []
+  (:chats (types/json->clj (js/require "./chats.js"))))
 
 (defn- get-chat [cofx chat-id]
   (get-in cofx [:db :chats chat-id]))

src/status_im/ui/screens/add_new/new_public_chat/view.cljs

@@ -8,7 +8,9 @@
             [quo.core :as quo]
             [status-im.ui.components.topbar :as topbar]
             [status-im.ui.screens.add-new.new-public-chat.db :as db]
-            [status-im.ui.screens.add-new.new-public-chat.styles :as styles])
+            [status-im.chat.models :as chat.models]
+            [status-im.ui.components.styles :as components.styles]
+            [status-im.ui.components.icons.vector-icons :as icons])
   (:require-macros [status-im.utils.views :as views]))
 
 (defn- start-chat [topic]
@@ -16,10 +18,7 @@
   (re-frame/dispatch [:set :public-group-topic nil]))
 
 (defn- hash-icon []
-  [quo/text {:color  :secondary
+  [icons/icon :main-icons/channel {:color colors/gray}])
-             :weight :medium
-             :size   :x-large}
-   "#"])
 
 (defn- chat-name-input [topic error]
   [quo/text-input
@@ -41,37 +40,69 @@
   ^{:key topic}
   [react/touchable-highlight {:on-press            #(start-chat topic)
                               :accessibility-label :chat-item}
-   [react/view {:padding-horizontal 4 :padding-vertical 8}
+   [react/view {:padding-right 8 :padding-vertical 8}
     [react/view {:border-color colors/gray-lighter :border-radius 36 :border-width 1 :padding-horizontal 8 :padding-vertical 5}
      [react/text {:style {:color colors/blue :typography :main-medium}} (str "#" topic)]]]])
 
-(def lang-names {"zh" "chinese" "ja" "japanese" "ko" "korean" "ru" "russian" "es" "spanish" "fa" "farsi"})
+(def lang-names {"es" "status-spanish"
+                 "pt" "statusbrasil"
+                 "de" "status-german"
+                 "fr" "status-french"
+                 "it" "status-italiano"
+                 "ru" "status-russian"
+                 "zh" "status-chinese"
+                 "ko" "status-korean"
+                 "ja" "status-japanese"
+                 "fa" "status-farsi"
+                 "tr" "status-turkish"
+                 "id" "indonesian"
+                 "in" "indonesian"
+                 "hi" "status-indian"
+                 "fil" "status-filipino"
+                 "nl" "status-dutch"})
 
 (defn get-language-topic []
   (let [lang (subs (name i18n-resources/default-device-language) 0 2)
-        lang-name (get lang-names lang)]
+        lang3 (subs (name i18n-resources/default-device-language) 0 3)
+        lang-name (or (get lang-names lang3) (get lang-names lang))]
     (when-not (= lang "en")
-      [(str "status-" (or lang-name lang))])))
+      (or lang-name (str "status-" lang)))))
 
-(def default-public-chats
+(def section-featured "Featured")
-  (concat
+
-   ["introductions" "chitchat" "status"]
+(defn featured-public-chats []
-   (get-language-topic)
+  (let [lang-topic (get-language-topic)
-   ["crypto" "tech" "music" "movies" "support"]))
+        chats (some #(when (= section-featured (first %)) (second %)) (chat.models/chats))]
+    (if lang-topic
+      (conj chats lang-topic)
+      chats)))
 
 (views/defview new-public-chat []
   (views/letsubs [topic [:public-group-topic]
                   error [:public-chat.new/topic-error-message]]
-    [react/view {:style styles/group-container}
+    [react/view components.styles/flex
      [topbar/topbar {:title :t/new-public-group-chat :modal? true}]
      [react/scroll-view {:style {:flex 1}}
       [react/view {:padding-horizontal 16}
-       [react/view {:align-items :center :padding-vertical 12}
+       [react/view {:align-items :center :padding-vertical 8}
         [react/image {:source (:new-chat-header resources/ui)
                       :style  {:width 160 :height 160}}]]
-       [react/text {:style {:text-align :center :margin-bottom 32 :line-height 22}}
+       [react/text {:style {:text-align :center :margin-bottom 16 :line-height 22}}
         (i18n/label :t/public-chat-description)]
        [chat-name-input topic error]]
-      [react/view {:flex-direction :row :flex-wrap :wrap :margin-top 24 :padding-horizontal 12}
+      [react/view {:margin-top 32}
-       (for [chat default-public-chats]
+       (for [[section chats] (chat.models/chats)]
-         (render-topic chat))]]]))
+         [react/view
+          [react/view {:margin-right               16 :padding-left 16 :padding-vertical 3
+                       :border-bottom-width        1 :border-bottom-color colors/gray-lighter
+                       :border-top-width           1 :border-top-color colors/gray-lighter
+                       :border-right-width         1 :border-right-color colors/gray-lighter
+                       :border-bottom-right-radius 14 :border-top-right-radius 14}
+           [quo/text {:weight :medium} section]]
+          [react/view {:flex-direction :row :flex-wrap :wrap :margin-vertical 8 :padding-horizontal 16}
+           (let [lang-topic (get-language-topic)
+                 chats (if (and (= section-featured section) lang-topic)
+                         (conj chats lang-topic)
+                         chats)]
+             (for [chat chats]
+               (render-topic chat)))]])]]]))

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

@@ -74,7 +74,7 @@
                       :key   :follow-your-interests}]
     [react/view {:style styles/tags-wrapper}
      [react/view {:flex-direction :row :flex-wrap :wrap :justify-content :center}
-      (for [chat new-public-chat/default-public-chats]
+      (for [chat (new-public-chat/featured-public-chats)]
         (new-public-chat/render-topic chat))]]]])
 
 (defn welcome-blank-page []

src/status_im/ui/screens/routing/main.cljs

@@ -76,6 +76,7 @@
        :component  new-chat/new-contact}
       {:name       :new-public-chat
        :transition :presentation-ios
+       :insets     {:bottom true}
        :component  new-public-chat/new-public-chat}
       {:name       :edit-group-chat-name
        :transition :presentation-ios

translations/en.json

@@ -1161,5 +1161,6 @@
     "continue-anyway": "Continue anyway",
     "private-notifications": "Private notifications",
     "private-notifications-descr": "Status will notify you about new messages. You can edit your notification preferences later in settings.",
-    "maybe-later": "Maybe later"
+    "maybe-later": "Maybe later",
+    "join": "Join"
 }