feat: use backend search for accessible and children (#1383)

* feat: use backend search for accessible and children

* refactor: apply PR requested changes

* refactor: fix ordering in folder content

cypress/e2e/item/home/home.cy.ts

@@ -7,7 +7,7 @@ import { SortingOptions } from '@/components/table/types';
 import { ITEM_PAGE_SIZE } from '@/config/constants';
 
 import i18n from '../../../../src/config/i18n';
-import { HOME_PATH, ITEMS_PATH } from '../../../../src/config/paths';
+import { HOME_PATH } from '../../../../src/config/paths';
 import {
   ACCESSIBLE_ITEMS_ONLY_ME_ID,
   CREATE_ITEM_BUTTON_ID,
@@ -37,16 +37,6 @@ const FOLDER2 = PackedFolderItemFactory();
 
 const ITEMS = [IMAGE_ITEM, FOLDER, FOLDER2, FOLDER_CHILD, IMAGE_ITEM_CHILD];
 
-// register a custom one time interceptor to listen specifically
-// to the request made with the search parameter we want
-const interceptAccessibleItemsSearch = (searchTerm: string) =>
-  cy
-    .intercept({
-      pathname: `/${ITEMS_PATH}/accessible`,
-      query: { name: searchTerm },
-    })
-    .as('getAccessibleSearch');
-
 describe('Home', () => {
   it('visit Home on map by default', () => {
     cy.setUpApi({
@@ -127,7 +117,6 @@ describe('Home', () => {
 
       it('Search on second page should reset page number', () => {
         const searchText = 'mysearch';
-        interceptAccessibleItemsSearch(searchText);
 
         cy.wait('@getAccessibleItems');
         // navigate to second page
@@ -140,8 +129,8 @@ describe('Home', () => {
 
         // using our custom interceptor with the search parameter we can distinguish the complete
         // search request from possibly other incomplete search requests
-        cy.wait('@getAccessibleSearch').then(({ request: { query } }) => {
-          expect(query.name).to.eq(searchText);
+        cy.wait('@getAccessibleItems').then(({ request: { query } }) => {
+          expect(query.keywords).to.eq(searchText);
           expect(query.page).to.eq('1');
         });
         cy.get(`#${buildItemCard(ownItems[0].id)}`).should('be.visible');

cypress/e2e/item/view/viewFolder.cy.ts

@@ -89,15 +89,28 @@ describe('View Folder', () => {
 
   it('search', () => {
     const { id } = parentItem;
+    const searchText = child1.name;
     cy.visit(buildItemPath(id, { mode: ItemLayoutMode.Grid }));
+    // initial call in the page
+    cy.wait(['@getChildren', '@getChildren']);
 
     cy.get(`#${buildItemCard(child1.id)}`).should('be.visible');
 
-    cy.get(`#${ITEM_SEARCH_INPUT_ID}`).type(child1.name);
+    cy.get(`#${ITEM_SEARCH_INPUT_ID}`).type(searchText);
+
+    cy.wait('@getChildren').then(({ request: { query } }) => {
+      // eslint-disable-next-line no-unused-expressions
+      expect(
+        (query.keywords as unknown as string[]).every((k) =>
+          searchText.includes(k),
+        ),
+      ).to.be.true;
+    });
+
     cy.get(`#${buildItemCard(child1.id)}`).should('be.visible');
   });
 
-  it('Sorting & Ordering', () => {
+  it.only('Sorting & Ordering', () => {
     const { id } = parentItem;
     cy.visit(buildItemPath(id));
 

package.json

@@ -22,7 +22,7 @@
     "@emotion/styled": "11.13.0",
     "@graasp/chatbox": "3.1.0",
     "@graasp/map": "1.17.0",
-    "@graasp/query-client": "3.16.0",
+    "@graasp/query-client": "3.19.0",
     "@graasp/sdk": "4.21.0",
     "@graasp/translations": "1.32.0",
     "@graasp/ui": "4.23.0",

src/components/item/FolderContent.tsx

@@ -115,34 +115,28 @@ const Content = ({ item, searchText, items, sortBy }: Props) => {
  */
 const FolderContent = ({ item }: { item: PackedItem }): JSX.Element => {
   const { t: translateEnums } = useEnumsTranslation();
-  const { shouldDisplayItem } = useFilterItemsContext();
+  const { itemTypes } = useFilterItemsContext();
   const { t: translateBuilder } = useBuilderTranslation();
   const { selectedIds } = useSelectionContext();
+  const itemSearch = useItemSearch();
 
   const {
     data: children,
     isLoading,
     isError,
   } = hooks.useChildren(item.id, {
     ordered: true,
+    keywords: itemSearch.text,
+    types: itemTypes,
   });
 
-  const itemSearch = useItemSearch();
-
   const { ordering, setOrdering, setSortBy, sortBy, sortFn } =
     useSorting<SortingOptionsForFolder>({
       sortBy: SortingOptionsForFolder.Order,
       ordering: Ordering.ASC,
     });
 
-  // TODO: use hook's filter when available
-  const folderChildren = children
-    ?.filter(
-      (f) =>
-        shouldDisplayItem(f.type) &&
-        f.name.toLowerCase().includes(itemSearch.text.toLowerCase()),
-    )
-    .sort(sortFn);
+  const sortedChildren = children?.sort(sortFn);
 
   const sortingOptions = Object.values(SortingOptionsForFolder).sort((t1, t2) =>
     translateEnums(t1).localeCompare(translateEnums(t2)),
@@ -183,8 +177,8 @@ const FolderContent = ({ item }: { item: PackedItem }): JSX.Element => {
           gap={1}
           width="100%"
         >
-          {selectedIds.length && folderChildren?.length ? (
-            <FolderToolbar items={folderChildren} />
+          {selectedIds.length && sortedChildren?.length ? (
+            <FolderToolbar items={sortedChildren} />
           ) : (
             <Stack
               spacing={1}
@@ -211,7 +205,7 @@ const FolderContent = ({ item }: { item: PackedItem }): JSX.Element => {
         <Content
           sortBy={sortBy}
           item={item}
-          items={folderChildren}
+          items={sortedChildren}
           searchText={itemSearch.text}
         />
       </>

src/components/pages/home/HomeScreen.tsx

@@ -57,10 +57,10 @@ const HomeScreenContent = ({ searchText }: { searchText: string }) => {
       {
         // todo: in the future this can be any member from creators
         creatorId: showOnlyMe ? currentMember?.id : undefined,
-        name: searchText,
         sortBy,
         ordering,
         types: itemTypes,
+        keywords: searchText,
       },
       // todo: adapt page size given the user window height
       { pageSize: ITEM_PAGE_SIZE },

yarn.lock

@@ -1873,9 +1873,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@graasp/query-client@npm:3.16.0":
-  version: 3.16.0
-  resolution: "@graasp/query-client@npm:3.16.0"
+"@graasp/query-client@npm:3.19.0":
+  version: 3.19.0
+  resolution: "@graasp/query-client@npm:3.19.0"
   dependencies:
     "@tanstack/react-query": "npm:4.36.1"
     "@tanstack/react-query-devtools": "npm:4.36.1"
@@ -1885,7 +1885,7 @@ __metadata:
     "@graasp/sdk": ^4.0.0
     "@graasp/translations": "*"
     react: ^18.0.0
-  checksum: 10/cf24eebd6ab11a6f12d8b9ff3f198bcfd141ccb73884e142320a7a81d689f15708dd5169bde31ce3dfc860819883f0439e5381e4d8afc490bb9abd1df675e069
+  checksum: 10/da50eed4589e9513f1e70812c589ec533ea6045f7f8df7da7c3262ed270f7edc0f5b027ecd1faa065e01981966e155754fd1ffb68c6cad2cc495da6b3dbdd6a0
   languageName: node
   linkType: hard
 
@@ -8151,7 +8151,7 @@ __metadata:
     "@emotion/styled": "npm:11.13.0"
     "@graasp/chatbox": "npm:3.1.0"
     "@graasp/map": "npm:1.17.0"
-    "@graasp/query-client": "npm:3.16.0"
+    "@graasp/query-client": "npm:3.19.0"
     "@graasp/sdk": "npm:4.21.0"
     "@graasp/translations": "npm:1.32.0"
     "@graasp/ui": "npm:4.23.0"