Merge pull request #51 from klinker-apps/contact_store

Persist contact storage

src/components/Compose/RecipientBar.vue

@@ -18,21 +18,23 @@ import Vue from 'vue'
 
 import '@/lib/auto-complete.min.js'
 import ContactChip from './ContactChip.vue'
-import { Api, Crypto, Util } from "@/utils/"
+import { Api, Crypto, Util, SessionCache } from "@/utils/"
 
 export default {
     name: 'RecipientBar',
     props: ['onContactListChanged'],
 
     mounted () {
-        Api.fetchContacts()
-            .then((resp) => this.processContacts(resp));
+        this.queryContacts();
+        this.$store.state.msgbus.$on('refresh-btn', this.refresh);
     },
 
     beforeDestroy () {
         if (this.autocomplete != null) {
             this.autocomplete.destroy();
         }
+
+        this.$store.state.msgbus.$off('refresh-btn');
     },
 
     data () {
@@ -45,6 +47,21 @@ export default {
     },
 
     methods: {
+        refresh() {
+            console.log("refresh compose");
+            this.queryContacts(true);
+        },
+        /**
+         * query contacts from backend or cache.
+         */
+        queryContacts (clearCache = false) {
+            if (clearCache) {
+                Util.snackbar("Downloading contacts... This may take a minute.");
+                SessionCache.invalidateContacts();
+            }
+
+            Api.fetchContacts().then((resp) => this.processContacts(resp));
+        },
         /**
         * Process contacts received from server
         * Saves contacts in contacts array
@@ -94,23 +111,36 @@ export default {
                 minChars: 2,
                 source: function(term, suggest) { suggest(matcher(term)); },
                 renderItem: function (contact, search) {
-                    return '<div class="autocomplete-suggestion" data-val="' + contact.name + '" data-id="' + contact.id + '" data-name="' + contact.name + '" data-phone="' + contact.phone + '">' + contact.name + ' (' + contact.phone + ')' + '</div>';
+                    if (contact.id == null) {
+                        return '<div class="autocomplete-suggestion">Can\'t find your contact?</div>';
+                    } else {
+                        return '<div class="autocomplete-suggestion" data-val="' + contact.name + '" data-id="' + contact.id + '" data-name="' + contact.name + '" data-phone="' + contact.phone + '">' + contact.name + ' (' + contact.phone + ')' + '</div>';
+                    }
                 },
                 onSelect: function(e, term, rendered) {
-                    addContact({
-                        'id': rendered.getAttribute('data-id'),
-                        'name': rendered.getAttribute('data-name'),
-                        'phone': rendered.getAttribute('data-phone')
-                    });
+                    let id = rendered.getAttribute('data-id');
+                    if (id == null) {
+                        window.open("https://github.com/klinker-apps/messenger-issues/issues/740", '_blank');
+                    } else {
+                        addContact({
+                            'id': id,
+                            'name': rendered.getAttribute('data-name'),
+                            'phone': rendered.getAttribute('data-phone')
+                        });
+                    }
                 }
             });
         },
         matchContact (input) {
             input = input.toLowerCase()
-            return Object.values(this.contacts).filter((data) => {
+            let list = Object.values(this.contacts).filter((data) => {
                 if (data.name.toLowerCase().indexOf(input) > -1 || data.phone.indexOf(input) > -1)
                     return data;
             });
+
+            // the blank object will be used to tell the search to add the "Can't find your contact?" text
+            list[list.length] = { }
+            return list;
         },
         /**
          * This takes in the input that is currently in the input box, and converts it to chips.

src/store/plugins.js

@@ -4,6 +4,7 @@ import { KEYS, state } from '@/store/state.js'
 // called when the store is initialize
 const localStoreSync = store => {
     const local_items = {
+        'compose_contacts': KEYS.COMPOSE_CONTACTS,
         'contacts': KEYS.CONTACTS,
         'conversations': KEYS.CONVERSATIONS,
         'clearContacts': KEYS.CONTACTS,

src/store/state.js

@@ -5,6 +5,7 @@ export const KEYS  = {
     HASH: 'hash',
     SALT: 'salt',
     CONTACTS: 'contacts',
+    COMPOSE_CONTACTS: 'compose_contacts',
     CONVERSATIONS: 'conversations',
     NOTIFICATIONS: 'notifications',
     ENTER_TO_SEND: 'enter_to_send',
@@ -26,6 +27,7 @@ export const state = {
     hash: JSON.parse( window.localStorage.getItem(KEYS.HASH) || empty_str ),
     salt: JSON.parse( window.localStorage.getItem(KEYS.SALT) || empty_str ),
     contacts: JSON.parse( window.localStorage.getItem(KEYS.CONTACTS) || '{}' ),
+    compose_contacts: JSON.parse( window.localStorage.getItem(KEYS.COMPOSE_CONTACTS) || '{}' ),
     conversations: JSON.parse( window.localStorage.getItem(KEYS.CONVERSATIONS) || '{}' ),
 
     theme_base: JSON.parse( window.localStorage.getItem(KEYS.THEME.BASE) || "\"light\"" ),
@@ -61,8 +63,7 @@ export const state = {
     last_passcode_entry: null,
 
     session_conversations: { },
-    session_messages: { },
-    session_contacts: { },
+    session_messages: { }
 }
 
 export const getters = {
@@ -83,6 +84,7 @@ export const mutations = {
     hash: (state, hash) => state.hash = hash,
     salt: (state, salt) => state.salt = salt,
     aes: (state, aes) => state.aes = aes,
+    compose_contacts: (state, compose_contacts) => state.compose_contacts = compose_contacts,
     theme_base: (state, theme_base) => state.theme_base = theme_base,
     theme_global_default: (state, theme_global_default) => state.theme_global_default = theme_global_default,
     theme_global_dark: (state, theme_global_dark) => state.theme_global_dark = theme_global_dark,
@@ -101,7 +103,6 @@ export const mutations = {
     last_passcode_entry: (state, last_passcode_entry) => state.last_passcode_entry = last_passcode_entry,
     session_conversations: (state, session_conversations) => state.session_conversations = session_conversations,
     session_messages: (state, session_messages) => state.session_messages = session_messages,
-    session_contacts: (state, session_contacts) => state.session_contacts = session_contacts,
     theme_global: (state, colors) => {
         // this mutation wasn't getting pushed through the plugin to write to the local storage
         // so the global theme was being queried every time.
@@ -137,7 +138,7 @@ export const mutations = {
     },
     clearContacts: (state, payload) => {
         state.contacts = {};
-    },
+    }
 }
 
 export const actions = {

src/utils/api_manager.js

@@ -796,7 +796,7 @@ export default class Api {
                             contacts.push(contact);
                     }
 
-                    if (response.length == pageLimit && contacts.length < totalLimit) {
+                    if (response.length == pageLimit/* && contacts.length < totalLimit*/) {
                         queryContacts(pageLimit, totalLimit);
                     } else {
                         finishQuery(contacts);

src/utils/cache_manager.js

@@ -50,7 +50,7 @@ export default class SessionCache {
     }
 
     static getContacts () {
-        return store.state.session_contacts;
+        return store.state.compose_contacts;
     }
 
     static putConversations (conversations, index = 'index_public_unarchived') {
@@ -68,7 +68,7 @@ export default class SessionCache {
     }
 
     static putContacts (contacts) {
-        store.commit('session_contacts', contacts);
+        store.commit('compose_contacts', contacts);
     }
 
     static hasConversations (index = 'index_public_unarchived') {
@@ -107,7 +107,7 @@ export default class SessionCache {
     }
 
     static invalidateContacts() {
-        store.commit('session_contacts', { });
+        store.commit('compose_contacts', { });
     }
 
     static removeConversation (conversation_id, index = 'index_public_unarchived') {