Contacts' letters

src/status_im/contacts/screen.cljs

@@ -36,7 +36,7 @@
                                :handler (fn [])}}])
 
 (defview contact-list []
-  [contacts [:get-contacts]]
+  [contacts [:contacts-with-letters]]
    [drawer-view
     [view st/contacts-list-container
      [contact-list-toolbar]

src/status_im/contacts/styles.cljs

@@ -2,12 +2,11 @@
   (:require [status-im.components.styles :refer [font
                                                  title-font
                                                  text1-color
+                                                 text3-color
                                                  color-white
                                                  toolbar-background2
                                                  online-color]]))
 
-
-
 (def contacts-list-container
   {:flex            1
    :backgroundColor :white})
@@ -15,38 +14,26 @@
 (def contacts-list
   {:backgroundColor :white})
 
+(def letter-container
+  {:paddingTop  11
+   :paddingLeft 20
+   :width       56})
+
+(def letter-text
+  {:fontSize   24
+   :fontFamily font
+   :color      text3-color})
+
 (def contact-photo-container
   {:marginTop  4
    :marginLeft 12})
 
-(def photo-image
-  {:borderRadius 50
-   :width        40
-   :height       40})
-
-(def online-container
-  {:position        :absolute
-   :top             24
-   :left            24
-   :width           20
-   :height          20
-   :borderRadius    50
-   :backgroundColor online-color
-   :borderWidth     2
-   :borderColor     color-white})
-
 (def contact-container
   {:flexDirection :row
    :height        56})
 
-(def photo-container
-  {:marginTop  8
-   :marginLeft 16
-   :width      44
-   :height     44})
-
 (def name-container
-  {:marginLeft 12
+  {:marginLeft     12
    :justifyContent :center})
 
 (def name-text

src/status_im/contacts/subs.cljs

@@ -12,6 +12,23 @@
     (let [contacts (reaction (:contacts @db))]
       (reaction (sort-by :name (vals @contacts))))))
 
+(defn get-contact-letter [contact]
+  (when-let [letter (first (:name contact))]
+    (clojure.string/upper-case letter)))
+
+(register-sub :contacts-with-letters
+  (fn [db _]
+    (let [contacts (reaction (:contacts @db))]
+      (reaction
+        (let [ordered (sort-by :name (vals @contacts))]
+          (map (fn [prev cur]
+                 (let [prev-letter (get-contact-letter prev)
+                       cur-letter (get-contact-letter cur)]
+                   (if (not= prev-letter cur-letter)
+                     (assoc cur :letter cur-letter)
+                     cur)))
+               (cons nil ordered) ordered))))))
+
 (defn contacts-by-chat [fn db chat-id]
   (let [chat     (reaction (get-in @db [:chats chat-id]))
         contacts (reaction (:contacts @db))]

src/status_im/contacts/views/contact_inner.cljs

@@ -5,12 +5,19 @@
             [status-im.contacts.styles :as st]
             [status-im.i18n :refer [label]]))
 
+(defn letter-view [letter]
+  [view st/letter-container
+   (when letter
+     [text {:style st/letter-text}
+      letter])])
+
 (defn contact-photo [{:keys [whisper-identity]}]
   [view st/contact-photo-container
    [contact-icon-contacts-tab whisper-identity]])
 
-(defn contact-inner-view [{:keys [name] :as contact}]
+(defn contact-inner-view [{:keys [name letter] :as contact}]
   [view st/contact-container
+   [letter-view letter]
    [contact-photo contact]
    [view st/name-container
     [text {:style st/name-text}