feat(search): orderby search results (#2794)

components/views/chat/search/SearchUtil.test.ts

@@ -29,13 +29,6 @@ describe('SearchUtil.default.getSearchResultGroupList', () => {
   })
 })
 
-describe('SearchUtil.default.getSearchOrderTypeList', () => {
-  test('0', () => {
-    const result: any = SearchUtil.default.getSearchOrderTypeList()
-    expect(result).toMatchSnapshot()
-  })
-})
-
 describe('SearchUtil.default.getCommandMeta', () => {
   test('0', () => {
     const result: any = SearchUtil.default.getCommandMeta(

components/views/chat/search/SearchUtil.ts

@@ -4,7 +4,6 @@ import {
   SearchCommandType,
   SearchCommandTypeParam,
   SearchOption,
-  SearchOrderType,
   SearchQueryItem,
   SearchRecommend,
   SearchRecommendResultItem,
@@ -98,22 +97,6 @@ export const searchCommandMetaList = [
   },
 ] as SearchCommandMeta[]
 
-const searchOrderTypeList = [
-  {
-    type: SearchOrderType.New,
-    title: 'New',
-  },
-
-  {
-    type: SearchOrderType.Old,
-    title: 'Old',
-  },
-  {
-    type: SearchOrderType.Relevant,
-    title: 'Relevant',
-  },
-]
-
 const searchResultGroupList = [
   {
     type: SearchResultGroupType.Messages,
@@ -142,7 +125,6 @@ const SearchUtil = {
   getCommandTypeParams: () => searchCommandTypeParams,
   getCommandMetaList: () => searchCommandMetaList,
   getSearchResultGroupList: () => searchResultGroupList,
-  getSearchOrderTypeList: () => searchOrderTypeList,
   /**
    * @method getCommandMeta DocsTODO
    * @description

components/views/chat/search/__snapshots__/SearchUtil.test.ts.snap

@@ -169,23 +169,6 @@ Object {
 }
 `;
 
-exports[`SearchUtil.default.getSearchOrderTypeList 0 1`] = `
-Array [
-  Object {
-    "title": "New",
-    "type": "new",
-  },
-  Object {
-    "title": "Old",
-    "type": "old",
-  },
-  Object {
-    "title": "Relevant",
-    "type": "relevant",
-  },
-]
-`;
-
 exports[`SearchUtil.default.getSearchResultGroupList 0 1`] = `
 Array [
   Object {

components/views/chat/search/result/Result.html

@@ -5,10 +5,10 @@
       <InteractablesClose class="close" :action="toggle" />
     </div>
     <!-- <SearchResultGroup
-    :groupList="groupList"
-    :groupBy="groupBy"
-    @toggleGroup="toggleGroupBy"
-  /> -->
+      :groupList="groupList"
+      :groupBy="groupBy"
+      @toggleGroup="toggleGroupBy"
+    /> -->
     <!-- <div class="search-result-filters">
     <div class="container-filter user-options">
       <multiselect
@@ -65,7 +65,6 @@
   </div> -->
     <SearchResultMeta
       :result="result"
-      :items="orderTypeList"
       :orderBy="orderBy"
       :page="page"
       :perPage="queryOptions.perPage"

components/views/chat/search/result/Result.vue

@@ -29,7 +29,6 @@ export default Vue.extend({
   data() {
     return {
       groupList: SearchUtil.getSearchResultGroupList(),
-      orderTypeList: SearchUtil.getSearchOrderTypeList(),
       query: '' as string,
       groupBy: SearchResultGroupType.Messages as SearchResultGroupType,
       orderBy: SearchOrderType.New as SearchOrderType,
@@ -76,19 +75,19 @@ export default Vue.extend({
   },
   watch: {
     date: {
-      handler(newDateValue) {
+      handler(newValue) {
         this.queryOptions = {
           ...this.queryOptions,
           dateRange: {
-            start: newDateValue,
-            end: newDateValue,
+            start: newValue,
+            end: newValue,
           },
         }
       },
     },
   },
   mounted() {
-    this.fetchResult(this.searchQuery)
+    this.fetchResult()
   },
   methods: {
     /**
@@ -113,33 +112,30 @@ export default Vue.extend({
      */
     toggleOrderBy(state: SearchOrderType) {
       this.orderBy = state
+      this.fetchResult()
     },
     /**
      * @method fetchResult DocsTODO
      * @description
      * @param query
      */
-    async fetchResult(query: string): Promise<void> {
+    async fetchResult(): Promise<void> {
       this.isLoading = DataStateType.Loading
       this.queryOptions = {
         ...this.queryOptions,
         accounts: [...this.friends.all, this.accounts.details],
-        queryString: query,
+        queryString: this.searchQuery,
       }
       this.result = await this.$store.dispatch('textile/searchConversations', {
         query: this.queryOptions,
         page: this.page,
+        orderBy: this.orderBy,
       })
       this.isLoading = DataStateType.Ready
     },
-    async handleClickPaginate(pageNum: number) {
-      this.isLoading = DataStateType.Loading
+    handleClickPaginate(pageNum: number) {
       this.page = pageNum
-      this.result = await this.$store.dispatch('textile/searchConversations', {
-        query: this.queryOptions,
-        page: this.page,
-      })
-      this.isLoading = DataStateType.Ready
+      this.fetchResult()
     },
     onChange(value: any) {
       this.queryOptions = {

components/views/chat/search/result/meta/Meta.html

@@ -1,12 +1,14 @@
 <div class="meta">
   <div class="result-count">{{ resultsText }}</div>
-  <!-- <div class="result-orderby">
+  <div class="result-orderby">
     <div
-      v-for="item in items"
-      :class="{'orderby-item': true, 'active': item.type === orderBy}"
-      @click="$emit('toggleOrder',item.type)"
+      v-if="result.totalRows"
+      v-for="item in Object.keys(SearchOrderType)"
+      class="orderby-item"
+      :class="{ 'active': SearchOrderType[item] === orderBy }"
+      @click="$emit('toggleOrder', SearchOrderType[item])"
     >
-      {{item.title}}
+      {{item}}
     </div>
-  </div> -->
+  </div>
 </div>

components/views/chat/search/result/meta/Meta.less

@@ -8,11 +8,12 @@
   }
   .result-orderby {
     display: flex;
+    gap: @normal-spacing;
     .orderby-item {
+      &:extend(.font-muted);
       cursor: pointer;
-      padding: 2px 8px;
       &.active {
-        font-weight: bold;
+        &:extend(.font-secondary);
       }
     }
   }

components/views/chat/search/result/meta/Meta.vue

@@ -6,10 +6,6 @@ import { SearchOrderType, UISearchResult } from '~/types/search/search'
 
 export default Vue.extend({
   props: {
-    items: {
-      type: Array,
-      required: true,
-    },
     result: {
       type: Object as PropType<UISearchResult>,
       required: true,
@@ -28,6 +24,7 @@ export default Vue.extend({
     },
   },
   computed: {
+    SearchOrderType: () => SearchOrderType,
     resultsText(): TranslateResult {
       // if 0 results
       if (this.result.totalRows === 0) {

libraries/SatelliteDB/SearchIndex.ts

@@ -1,5 +1,6 @@
 import MiniSearch, { Options } from 'minisearch'
 import type { SearchOptions } from 'minisearch'
+import { UISearchResultData } from '~/types/search/search'
 
 export type SearchIndexOptions = {
   schema: Options<any>
@@ -74,7 +75,10 @@ export default class SearchIndex {
     this.addAll(records)
   }
 
-  search(query: string, options?: SearchOptions | undefined) {
+  search(
+    query: string,
+    options?: SearchOptions | undefined,
+  ): UISearchResultData[] {
     return this.index
       .search(query, options)
       .map((doc) => ({ ...doc, ...this.getById(doc[this.idField]) }))

store/textile/actions.ts

@@ -20,7 +20,12 @@ import { AccountsError } from '~/store/accounts/types'
 import GroupChatsProgram from '~/libraries/Solana/GroupChatsProgram/GroupChatsProgram'
 import SolanaManager from '~/libraries/Solana/SolanaManager/SolanaManager'
 import { Group } from '~/store/groups/types'
-import { UISearchResult, QueryOptions } from '~/types/search/search'
+import {
+  UISearchResult,
+  QueryOptions,
+  SearchOrderType,
+  UISearchResultData,
+} from '~/types/search/search'
 
 const getGroupChatProgram = (): GroupChatsProgram => {
   const $SolanaManager: SolanaManager = Vue.prototype.$SolanaManager
@@ -920,9 +925,11 @@ export default {
     {
       query,
       page,
+      orderBy,
     }: {
       query: QueryOptions
       page: number
+      orderBy: SearchOrderType
     },
   ): Promise<UISearchResult> {
     const { queryString, accounts, dateRange, perPage } = query
@@ -937,7 +944,7 @@ export default {
       await db.initializeSearchIndexes()
     }
 
-    const result = db.search.conversationMessages.search(
+    const result: UISearchResultData[] = db.search.conversationMessages.search(
       `${queryString}${
         startDate && endDate
           ? ` AND at >= ${startDate} AND at <= ${endDate}`
@@ -953,6 +960,17 @@ export default {
       ...match,
       user: accounts.find((acct) => acct?.textilePubkey === match.from),
     }))
+    if (orderBy === SearchOrderType.New) {
+      data.sort((a: UISearchResultData, b: UISearchResultData) => b.at - a.at)
+    }
+    if (orderBy === SearchOrderType.Old) {
+      data.sort((a: UISearchResultData, b: UISearchResultData) => a.at - b.at)
+    }
+    if (orderBy === SearchOrderType.Relevant) {
+      data.sort(
+        (a: UISearchResultData, b: UISearchResultData) => b.score - a.score,
+      )
+    }
     return { data: data.slice(skip, perPage * page), totalRows: result?.length }
   },
 }

types/search/search.ts

@@ -1,4 +1,5 @@
 import { MatchInfo } from 'minisearch'
+import { MessageTypes } from '../textile/mailbox'
 import { Friend } from '../ui/friends'
 import { User } from '../ui/user'
 
@@ -132,14 +133,23 @@ export type SearchParam = {
   orderby: SearchOrderType
 }
 
+export interface UISearchResultData {
+  at: number
+  conversation: string
+  from: string
+  id: string
+  match: MatchInfo
+  payload: 'ay'
+  readAt: number
+  score: number
+  terms: string[]
+  to: string
+  type: MessageTypes
+  user?: User
+}
+
 export interface UISearchResult {
-  data: {
-    user?: User
-    id: any
-    terms: string[]
-    score: number
-    match: MatchInfo
-  }[]
+  data: UISearchResultData[]
   totalRows: number
 }