Merge #1041

1041: Add support for multiple sort attributes r=bidoubiwa a=fitimvata

# Pull Request

I created a new pull request with changes that `@bidoubiwa` requested in pull request  #1024.


## Related issue
Fixes #539

## What does this PR do?
 - [x] Implement multiple sorting
 - [x] Add tests
 - [x] Update docs

## PR checklist
Please check if your PR fulfills the following requirements:
- [x] Does this PR fix an existing issue, or have you listed the changes applied in the PR description (and why they are needed)?
- [x] Have you read the contributing guidelines?
- [x] Have you made sure that the title is accurate and descriptive of the changes?



Co-authored-by: Fitim Vata <[email protected]>

Author: meili-bors[bot]

.changeset/red-fans-cross.md

@@ -0,0 +1,5 @@
+---
+"@meilisearch/instant-meilisearch": minor
+---
+
+Add support for multiple sort attributes

README.md

@@ -1032,6 +1032,19 @@ Example:
 
 In this scenario, in the `clothes` index, we want the price to be sorted in an ascending way. For this formula to be valid, `price` must be added to the `sortableAttributes` settings of the `clothes` index.
 
+#### Sort by multiple attributes
+When sorting by mutiple fields sort formula is expressed like this: `index:attribute:order,attribute2:order`. 
+
+Example:
+```js
+[
+  { label: 'Sort By Price And Title', value: 'clothes:price:asc,title:asc' }
+]
+```
+
+⚠️ Attributes with comma in their name are not allowed.
+
+
 #### Relevancy
 
 The impact sorting has on the returned hits is determined by the [`ranking-rules`](https://docs.meilisearch.com/learn/core_concepts/relevancy.html#ranking-rules) ordered list of each index. The `sort` ranking-rule position in the list makes sorting documents more or less important than other rules. If you want to change the sort impact on the relevancy, it is possible to change it in the [ranking-rule setting](https://docs.meilisearch.com/learn/core_concepts/relevancy.html#relevancy). For example, to favor exhaustivity over relevancy.

packages/instant-meilisearch/__tests__/sort.test.ts

@@ -0,0 +1,51 @@
+import {
+  searchClient,
+  dataset,
+  Movies,
+  meilisearchClient,
+} from './assets/utils'
+
+describe('Sort browser test', () => {
+  beforeAll(async () => {
+    const deleteTask = await meilisearchClient.deleteIndex('movies')
+    await meilisearchClient.waitForTask(deleteTask.taskUid)
+    await meilisearchClient.index('movies').updateSettings({
+      sortableAttributes: ['release_date', 'title'],
+    })
+
+    const documentsTask = await meilisearchClient
+      .index('movies')
+      .addDocuments(dataset)
+    await meilisearchClient.index('movies').waitForTask(documentsTask.taskUid)
+  })
+
+  test('sort-by one field', async () => {
+    const response = await searchClient.search<Movies>([
+      {
+        indexName: 'movies:release_date:desc',
+        params: {
+          query: '',
+          hitsPerPage: 1,
+        },
+      },
+    ])
+
+    const hits = response.results[0].hits
+    expect(hits.length).toBe(1)
+  })
+
+  test('sort-by mutiple fields', async () => {
+    const response = await searchClient.search<Movies>([
+      {
+        indexName: 'movies:release_date:desc,title:asc',
+        params: {
+          query: '',
+          hitsPerPage: 1,
+        },
+      },
+    ])
+
+    const hits = response.results[0].hits
+    expect(hits.length).toBe(1)
+  })
+})

packages/instant-meilisearch/src/adapter/search-request-adapter/search-params-adapter.ts

@@ -166,7 +166,7 @@ export function MeiliParamsCreator(searchContext: SearchContext) {
     },
     addSort() {
       if (sort?.length) {
-        meiliSearchParams.sort = [sort]
+        meiliSearchParams.sort = Array.isArray(sort) ? sort : [sort]
       }
     },
     addGeoSearchRules() {

packages/instant-meilisearch/src/contexts/search-context.ts

@@ -5,6 +5,7 @@ import {
 } from '../types'
 
 import { createPaginationState } from './pagination-context'
+import { createSortState } from './sort-context'
 
 /**
  * @param  {AlgoliaMultipleQueriesQuery} searchRequest
@@ -25,10 +26,12 @@ export function createSearchContext(
     instantSearchParams?.page
   )
 
+  const sortState = createSortState(sortByArray.join(':'))
+
   const searchContext: SearchContext = {
     ...options,
     ...instantSearchParams,
-    sort: sortByArray.join(':') || '',
+    sort: sortState,
     indexUid,
     pagination: paginationState,
     placeholderSearch: options.placeholderSearch !== false, // true by default

packages/instant-meilisearch/src/contexts/sort-context.ts

@@ -0,0 +1,10 @@
+/**
+ * @param {string} rawSort
+ * @returns {string[]}
+ */
+export function createSortState(rawSort: string): string[] {
+  return rawSort
+    .split(',')
+    .map((sort) => sort.trim())
+    .filter((sort) => !!sort)
+}

packages/instant-meilisearch/src/types/types.ts

@@ -71,7 +71,7 @@ export type SearchContext = Omit<InstantSearchParams, 'insideBoundingBox'> &
     keepZeroFacets: boolean
     insideBoundingBox?: InsideBoundingBox
     cropMarker?: string
-    sort?: string
+    sort?: string | string[]
     primaryKey?: string
     matchingStrategy?: MatchingStrategies
   }