feat: Splits search api by resources to improve query time [cw-47] (#6942)

* feat: Splits search api by resources to improve query time * Review fixes * Spacing fixes * Update app/javascript/dashboard/modules/search/components/SearchView.vue Co-authored-by: Sivin Varghese <64252451+iamsivin@users.noreply.github.com> * Review fixes * Refactor searchview --------- Co-authored-by: Sivin Varghese <64252451+iamsivin@users.noreply.github.com> Co-authored-by: Muhsin Keloth <muhsinkeramam@gmail.com>
2025-11-02 12:08:01 +00:00 · 2023-04-25 17:59:38 +05:30
parent 5600b518ac
commit 402428fb4d
9 changed files with 222 additions and 78 deletions
--- a/app/javascript/dashboard/api/search.js
+++ b/app/javascript/dashboard/api/search.js
@@ -13,6 +13,30 @@ class SearchAPI extends ApiClient {
      },
    });
  }
+
+  contacts({ q }) {
+    return axios.get(`${this.url}/contacts`, {
+      params: {
+        q,
+      },
+    });
+  }
+
+  conversations({ q }) {
+    return axios.get(`${this.url}/conversations`, {
+      params: {
+        q,
+      },
+    });
+  }
+
+  messages({ q }) {
+    return axios.get(`${this.url}/messages`, {
+      params: {
+        q,
+      },
+    });
+  }
 }

 export default new SearchAPI();
--- a/app/javascript/dashboard/modules/search/components/SearchHeader.vue
+++ b/app/javascript/dashboard/modules/search/components/SearchHeader.vue
@@ -16,6 +16,7 @@
      :title="$t('SEARCH.PLACEHOLDER_KEYBINDING')"
      :show-close="false"
      small
+      class="helper-label"
    />
  </div>
 </template>
@@ -101,4 +102,8 @@ export default {
    color: var(--s-400);
  }
 }
+
+.helper-label {
+  margin: 0;
+}
 </style>
--- a/app/javascript/dashboard/modules/search/components/SearchResultContactsList.vue
+++ b/app/javascript/dashboard/modules/search/components/SearchResultContactsList.vue
@@ -3,6 +3,8 @@
    :title="$t('SEARCH.SECTION.CONTACTS')"
    :empty="!contacts.length"
    :query="query"
+    :show-title="showTitle"
+    :is-fetching="isFetching"
  >
    <ul class="search-list">
      <li v-for="contact in contacts" :key="contact.id">
@@ -39,6 +41,14 @@ export default {
      type: String,
      default: '',
    },
+    isFetching: {
+      type: Boolean,
+      default: false,
+    },
+    showTitle: {
+      type: Boolean,
+      default: true,
+    },
  },
  computed: {
    ...mapGetters({
--- a/app/javascript/dashboard/modules/search/components/SearchResultConversationsList.vue
+++ b/app/javascript/dashboard/modules/search/components/SearchResultConversationsList.vue
@@ -3,6 +3,8 @@
    :title="$t('SEARCH.SECTION.CONVERSATIONS')"
    :empty="!conversations.length"
    :query="query"
+    :show-title="showTitle || isFetching"
+    :is-fetching="isFetching"
  >
    <ul class="search-list">
      <li v-for="conversation in conversations" :key="conversation.id">
@@ -37,6 +39,14 @@ export default {
      type: String,
      default: '',
    },
+    isFetching: {
+      type: Boolean,
+      default: false,
+    },
+    showTitle: {
+      type: Boolean,
+      default: true,
+    },
  },
  computed: {
    ...mapGetters({
--- a/app/javascript/dashboard/modules/search/components/SearchResultMessagesList.vue
+++ b/app/javascript/dashboard/modules/search/components/SearchResultMessagesList.vue
@@ -3,6 +3,8 @@
    :title="$t('SEARCH.SECTION.MESSAGES')"
    :empty="!messages.length"
    :query="query"
+    :show-title="showTitle"
+    :is-fetching="isFetching"
  >
    <ul class="search-list">
      <li v-for="message in messages" :key="message.id">
@@ -45,6 +47,14 @@ export default {
      type: String,
      default: '',
    },
+    isFetching: {
+      type: Boolean,
+      default: false,
+    },
+    showTitle: {
+      type: Boolean,
+      default: true,
+    },
  },
  computed: {
    ...mapGetters({
--- a/app/javascript/dashboard/modules/search/components/SearchResultSection.vue
+++ b/app/javascript/dashboard/modules/search/components/SearchResultSection.vue
@@ -1,10 +1,11 @@
 <template>
  <section class="result-section">
-    <div class="header">
+    <div v-if="showTitle" class="header">
      <h3 class="text-block-title">{{ title }}</h3>
    </div>
-    <slot />
-    <div v-if="empty" class="empty">
+    <woot-loading-state v-if="isFetching" :message="'Searching'" />
+    <slot v-else />
+    <div v-if="empty && !isFetching" class="empty">
      <fluent-icon icon="info" size="16px" class="icon" />
      <p class="empty-state__text">
        {{ $t('SEARCH.EMPTY_STATE', { item: titleCase, query }) }}
@@ -28,6 +29,14 @@ export default {
      type: String,
      default: '',
    },
+    showTitle: {
+      type: Boolean,
+      default: true,
+    },
+    isFetching: {
+      type: Boolean,
+      default: true,
+    },
  },
  computed: {
    titleCase() {
@@ -39,7 +48,7 @@ export default {

 <style scoped lang="scss">
 .result-section {
-  margin-bottom: var(--space-normal);
+  margin: var(--space-small) 0;
 }
 .search-list {
  list-style: none;
@@ -60,7 +69,7 @@ export default {
  align-items: center;
  justify-content: center;
  padding: var(--space-medium) var(--space-normal);
-  margin: 0 var(--space-small);
+  margin: var(--space-small);
  background: var(--s-25);
  border-radius: var(--border-radius-medium);
  .icon {
--- a/app/javascript/dashboard/modules/search/components/SearchView.vue
+++ b/app/javascript/dashboard/modules/search/components/SearchView.vue
@@ -21,39 +21,44 @@
        />
      </header>
      <div class="search-results">
-        <woot-loading-state v-if="uiFlags.isFetching" :message="'Searching'" />
-        <div v-else>
-          <div v-if="all.length">
-            <search-result-contacts-list
-              v-if="filterContacts"
-              :contacts="contacts"
-              :query="query"
-            />
-            <search-result-messages-list
-              v-if="filterMessages"
-              :messages="messages"
-              :query="query"
-            />
-            <search-result-conversations-list
-              v-if="filterConversations"
-              :conversations="conversations"
-              :query="query"
-            />
-          </div>
-          <div v-else-if="showEmptySearchResults && !all.length" class="empty">
-            <fluent-icon icon="info" size="16px" class="icon" />
-            <p class="empty-state__text">
-              {{ $t('SEARCH.EMPTY_STATE_FULL', { query }) }}
-            </p>
-          </div>
-          <div v-else class="empty text-center">
-            <p class="text-center margin-bottom-0">
-              <fluent-icon icon="search" size="24px" class="icon" />
-            </p>
-            <p class="empty-state__text">
-              {{ $t('SEARCH.EMPTY_STATE_DEFAULT') }}
-            </p>
-          </div>
+        <div v-if="all.length">
+          <search-result-contacts-list
+            v-if="filterContacts"
+            :is-fetching="uiFlags.contact.isFetching"
+            :contacts="contacts"
+            :query="query"
+            :show-title="isSelectedTabAll"
+          />
+
+          <search-result-messages-list
+            v-if="filterMessages"
+            :is-fetching="uiFlags.message.isFetching"
+            :messages="messages"
+            :query="query"
+            :show-title="isSelectedTabAll"
+          />
+
+          <search-result-conversations-list
+            v-if="filterConversations"
+            :is-fetching="uiFlags.conversation.isFetching"
+            :conversations="conversations"
+            :query="query"
+            :show-title="isSelectedTabAll"
+          />
+        </div>
+        <div v-else-if="showEmptySearchResults && !all.length" class="empty">
+          <fluent-icon icon="info" size="16px" class="icon" />
+          <p class="empty-state__text">
+            {{ $t('SEARCH.EMPTY_STATE_FULL', { query }) }}
+          </p>
+        </div>
+        <div v-else class="empty text-center">
+          <p class="text-center margin-bottom-0">
+            <fluent-icon icon="search" size="24px" class="icon" />
+          </p>
+          <p class="empty-state__text">
+            {{ $t('SEARCH.EMPTY_STATE_DEFAULT') }}
+          </p>
        </div>
      </div>
    </section>
@@ -66,7 +71,6 @@ import SearchTabs from './SearchTabs.vue';
 import SearchResultConversationsList from './SearchResultConversationsList.vue';
 import SearchResultMessagesList from './SearchResultMessagesList.vue';
 import SearchResultContactsList from './SearchResultContactsList.vue';
-import { isEmptyObject } from 'dashboard/helper/commons.js';

 import { mixin as clickaway } from 'vue-clickaway';
 import { mapGetters } from 'vuex';
@@ -89,47 +93,40 @@ export default {

  computed: {
    ...mapGetters({
-      fullSearchRecords: 'conversationSearch/getFullSearchRecords',
+      contactRecords: 'conversationSearch/getContactRecords',
+      conversationRecords: 'conversationSearch/getConversationRecords',
+      messageRecords: 'conversationSearch/getMessageRecords',
      uiFlags: 'conversationSearch/getUIFlags',
    }),
    contacts() {
-      if (this.fullSearchRecords.contacts) {
-        return this.fullSearchRecords.contacts.map(contact => ({
-          ...contact,
-          type: 'contact',
-        }));
-      }
-      return [];
+      return this.contactRecords.map(contact => ({
+        ...contact,
+        type: 'contact',
+      }));
    },
    conversations() {
-      if (this.fullSearchRecords.conversations) {
-        return this.fullSearchRecords.conversations.map(conversation => ({
-          ...conversation,
-          type: 'conversation',
-        }));
-      }
-      return [];
+      return this.conversationRecords.map(conversation => ({
+        ...conversation,
+        type: 'conversation',
+      }));
    },
    messages() {
-      if (this.fullSearchRecords.messages) {
-        return this.fullSearchRecords.messages.map(message => ({
-          ...message,
-          type: 'message',
-        }));
-      }
-      return [];
+      return this.messageRecords.map(message => ({
+        ...message,
+        type: 'message',
+      }));
    },
    all() {
      return [...this.contacts, ...this.conversations, ...this.messages];
    },
    filterContacts() {
-      return this.selectedTab === 'contacts' || this.selectedTab === 'all';
+      return this.selectedTab === 'contacts' || this.isSelectedTabAll;
    },
    filterConversations() {
-      return this.selectedTab === 'conversations' || this.selectedTab === 'all';
+      return this.selectedTab === 'conversations' || this.isSelectedTabAll;
    },
    filterMessages() {
-      return this.selectedTab === 'messages' || this.selectedTab === 'all';
+      return this.selectedTab === 'messages' || this.isSelectedTabAll;
    },
    totalSearchResultsCount() {
      return (
@@ -162,10 +159,12 @@ export default {
    },
    showEmptySearchResults() {
      return (
-        this.totalSearchResultsCount === 0 &&
-        !isEmptyObject(this.fullSearchRecords)
+        this.totalSearchResultsCount === 0 && this.uiFlags.isSearchCompleted
      );
    },
+    isSelectedTabAll() {
+      return this.selectedTab === 'all';
+    },
  },
  beforeDestroy() {
    this.query = '';
--- a/app/javascript/dashboard/store/modules/conversationSearch.js
+++ b/app/javascript/dashboard/store/modules/conversationSearch.js
@@ -2,9 +2,15 @@ import SearchAPI from '../../api/search';
 import types from '../mutation-types';
 export const initialState = {
  records: [],
-  fullSearchRecords: {},
+  contactRecords: [],
+  conversationRecords: [],
+  messageRecords: [],
  uiFlags: {
    isFetching: false,
+    isSearchCompleted: false,
+    contact: { isFetching: false },
+    conversation: { isFetching: false },
+    message: { isFetching: false },
  },
 };

@@ -12,8 +18,14 @@ export const getters = {
  getConversations(state) {
    return state.records;
  },
-  getFullSearchRecords(state) {
-    return state.fullSearchRecords;
+  getContactRecords(state) {
+    return state.contactRecords;
+  },
+  getConversationRecords(state) {
+    return state.conversationRecords;
+  },
+  getMessageRecords(state) {
+    return state.messageRecords;
  },
  getUIFlags(state) {
    return state.uiFlags;
@@ -40,23 +52,67 @@ export const actions = {
      });
    }
  },
-  async fullSearch({ commit }, { q }) {
-    commit(types.FULL_SEARCH_SET, []);
+  async fullSearch({ commit, dispatch }, { q }) {
    if (!q) {
      return;
    }
-    commit(types.FULL_SEARCH_SET_UI_FLAG, { isFetching: true });
+    commit(types.FULL_SEARCH_SET_UI_FLAG, {
+      isFetching: true,
+      isSearchCompleted: false,
+    });
    try {
-      const { data } = await SearchAPI.get({ q });
-      commit(types.FULL_SEARCH_SET, data.payload);
+      dispatch('contactSearch', { q });
+      dispatch('conversationSearch', { q });
+      dispatch('messageSearch', { q });
    } catch (error) {
      // Ignore error
    } finally {
-      commit(types.FULL_SEARCH_SET_UI_FLAG, { isFetching: false });
+      commit(types.FULL_SEARCH_SET_UI_FLAG, {
+        isFetching: false,
+        isSearchCompleted: true,
+      });
+    }
+  },
+  async contactSearch({ commit }, { q }) {
+    commit(types.CONTACT_SEARCH_SET, []);
+    commit(types.CONTACT_SEARCH_SET_UI_FLAG, { isFetching: true });
+    try {
+      const { data } = await SearchAPI.contacts({ q });
+      commit(types.CONTACT_SEARCH_SET, data.payload.contacts);
+    } catch (error) {
+      // Ignore error
+    } finally {
+      commit(types.CONTACT_SEARCH_SET_UI_FLAG, { isFetching: false });
+    }
+  },
+  async conversationSearch({ commit }, { q }) {
+    commit(types.CONVERSATION_SEARCH_SET, []);
+    commit(types.CONVERSATION_SEARCH_SET_UI_FLAG, { isFetching: true });
+    try {
+      const { data } = await SearchAPI.conversations({ q });
+      commit(types.CONVERSATION_SEARCH_SET, data.payload.conversations);
+    } catch (error) {
+      // Ignore error
+    } finally {
+      commit(types.CONVERSATION_SEARCH_SET_UI_FLAG, { isFetching: false });
+    }
+  },
+  async messageSearch({ commit }, { q }) {
+    commit(types.MESSAGE_SEARCH_SET, []);
+    commit(types.MESSAGE_SEARCH_SET_UI_FLAG, { isFetching: true });
+    try {
+      const { data } = await SearchAPI.messages({ q });
+      commit(types.MESSAGE_SEARCH_SET, data.payload.messages);
+    } catch (error) {
+      // Ignore error
+    } finally {
+      commit(types.MESSAGE_SEARCH_SET_UI_FLAG, { isFetching: false });
    }
  },
  async clearSearchResults({ commit }) {
-    commit(types.FULL_SEARCH_SET, {});
+    commit(types.MESSAGE_SEARCH_SET, []);
+    commit(types.CONVERSATION_SEARCH_SET, []);
+    commit(types.CONTACT_SEARCH_SET, []);
  },
 };

@@ -64,8 +120,14 @@ export const mutations = {
  [types.SEARCH_CONVERSATIONS_SET](state, records) {
    state.records = records;
  },
-  [types.FULL_SEARCH_SET](state, records) {
-    state.fullSearchRecords = records;
+  [types.CONTACT_SEARCH_SET](state, records) {
+    state.contactRecords = records;
+  },
+  [types.CONVERSATION_SEARCH_SET](state, records) {
+    state.conversationRecords = records;
+  },
+  [types.MESSAGE_SEARCH_SET](state, records) {
+    state.messageRecords = records;
  },
  [types.SEARCH_CONVERSATIONS_SET_UI_FLAG](state, uiFlags) {
    state.uiFlags = { ...state.uiFlags, ...uiFlags };
@@ -73,6 +135,15 @@ export const mutations = {
  [types.FULL_SEARCH_SET_UI_FLAG](state, uiFlags) {
    state.uiFlags = { ...state.uiFlags, ...uiFlags };
  },
+  [types.CONTACT_SEARCH_SET_UI_FLAG](state, uiFlags) {
+    state.uiFlags.contact = { ...state.uiFlags.contact, ...uiFlags };
+  },
+  [types.CONVERSATION_SEARCH_SET_UI_FLAG](state, uiFlags) {
+    state.uiFlags.conversation = { ...state.uiFlags.conversation, ...uiFlags };
+  },
+  [types.MESSAGE_SEARCH_SET_UI_FLAG](state, uiFlags) {
+    state.uiFlags.message = { ...state.uiFlags.message, ...uiFlags };
+  },
 };

 export default {
--- a/app/javascript/dashboard/store/mutation-types.js
+++ b/app/javascript/dashboard/store/mutation-types.js
@@ -269,6 +269,12 @@ export default {

  // Full Search
  FULL_SEARCH_SET: 'FULL_SEARCH_SET',
+  CONTACT_SEARCH_SET: 'CONTACT_SEARCH_SET',
+  CONTACT_SEARCH_SET_UI_FLAG: 'CONTACT_SEARCH_SET_UI_FLAG',
+  CONVERSATION_SEARCH_SET: 'CONVERSATION_SEARCH_SET',
+  CONVERSATION_SEARCH_SET_UI_FLAG: 'CONVERSATION_SEARCH_SET_UI_FLAG',
+  MESSAGE_SEARCH_SET: 'MESSAGE_SEARCH_SET',
+  MESSAGE_SEARCH_SET_UI_FLAG: 'MESSAGE_SEARCH_SET_UI_FLAG',
  FULL_SEARCH_SET_UI_FLAG: 'FULL_SEARCH_SET_UI_FLAG',
  SET_CONVERSATION_PARTICIPANTS_UI_FLAG:
    'SET_CONVERSATION_PARTICIPANTS_UI_FLAG',