fix: useOwnItems hook to receive page number

src/api/item.ts

@@ -7,11 +7,10 @@ import {
 } from '@graasp/sdk';
 
 import { DEFAULT_THUMBNAIL_SIZE } from '../config/constants';
-import { QueryClientConfig } from '../types';
+import { OwnItemsQuery, QueryClientConfig } from '../types';
 import { getParentsIdsFromPath } from '../utils/item';
 import configureAxios, { verifyAuthentication } from './axios';
 import {
-  GET_OWN_ITEMS_ROUTE,
   GET_RECYCLED_ITEMS_DATA_ROUTE,
   SHARED_ITEM_WITH_ROUTE,
   buildCopyItemsRoute,
@@ -25,6 +24,7 @@ import {
   buildGetItemParents,
   buildGetItemRoute,
   buildGetItemsRoute,
+  buildGetOwnItemsRoute,
   buildMoveItemsRoute,
   buildPostEtherpadRoute,
   buildPostItemRoute,
@@ -43,9 +43,14 @@ export const getItems = async (
 ): Promise<ResultOf<Item>> =>
   axios.get(`${API_HOST}/${buildGetItemsRoute(ids)}`).then(({ data }) => data);
 
-export const getOwnItems = async ({ API_HOST }: QueryClientConfig) =>
+export const getOwnItems = async (
+  { API_HOST }: QueryClientConfig,
+  { page = 1, all = false, name = '', limit }: OwnItemsQuery,
+) =>
   verifyAuthentication(() =>
-    axios.get(`${API_HOST}/${GET_OWN_ITEMS_ROUTE}`).then(({ data }) => data),
+    axios
+      .get(`${API_HOST}/${buildGetOwnItemsRoute({ page, name, all, limit })}`)
+      .then(({ data }) => data),
   );
 
 export type PostItemPayloadType = Partial<DiscriminatedItem> &

src/api/routes.ts

@@ -3,7 +3,7 @@ import { DiscriminatedItem, ItemTag, ItemTagType, UUID } from '@graasp/sdk';
 import qs from 'qs';
 
 import { DEFAULT_THUMBNAIL_SIZE } from '../config/constants';
-import { SearchFields } from '../types';
+import { OwnItemsQuery, SearchFields } from '../types';
 import { AggregateActionsArgs } from '../utils/action';
 
 export const APPS_ROUTE = 'app-items';
@@ -21,6 +21,27 @@ export const ETHERPAD_ROUTE = `${ITEMS_ROUTE}/etherpad`;
 export const COLLECTIONS_ROUTE = `collections`;
 export const buildAppListRoute = `${APPS_ROUTE}/list`;
 
+export const buildGetOwnItemsRoute = ({
+  page,
+  all,
+  name,
+  limit,
+}: OwnItemsQuery) => {
+  let url = `${GET_OWN_ITEMS_ROUTE}?page=${page}`;
+
+  if (all) {
+    url += `&all=${all}`;
+  }
+  if (name) {
+    url += `&name=${name}`;
+  }
+  if (limit) {
+    url += `&limit=${limit}`;
+  }
+
+  return url;
+};
+
 export const buildPostItemRoute = (parentId?: UUID) => {
   let url = ITEMS_ROUTE;
   if (parentId) {
@@ -490,4 +511,5 @@ export const API_ROUTES = {
   SIGN_OUT_ROUTE,
   SIGN_UP_ROUTE,
   VALIDATION_ROUTE,
+  buildGetOwnItemsRoute,
 };

src/config/keys.ts

@@ -1,13 +1,21 @@
 import { UUID } from '@graasp/sdk';
 
-import { SearchFields } from '../types';
+import { OwnItemsQuery, SearchFields } from '../types';
 import { AggregateActionsArgs } from '../utils/action';
 import { hashItemsIds } from '../utils/item';
 import { DEFAULT_THUMBNAIL_SIZE } from './constants';
 
 export const APPS_KEY = 'apps';
 export const ITEMS_KEY = 'items';
 export const OWN_ITEMS_KEY = [ITEMS_KEY, 'own'];
+export const buildOwnItemsKey = ({ page, name, all, limit }: OwnItemsQuery) => [
+  ITEMS_KEY,
+  'own',
+  page,
+  name,
+  all,
+  limit,
+];
 export const ETHERPADS_KEY = 'etherpads';
 export const SUBSCRIPTION_KEY = 'subscriptions';
 
@@ -286,4 +294,5 @@ export const DATA_KEYS = {
   buildPlanKey,
   buildPublishedItemsKey,
   buildEtherpadKey,
+  buildOwnItemsKey,
 };

src/hooks/item.test.ts

@@ -28,14 +28,14 @@ import {
   splitEndpointByIds,
 } from '../../test/utils';
 import {
-  GET_OWN_ITEMS_ROUTE,
   SHARED_ITEM_WITH_ROUTE,
   buildDownloadFilesRoute,
   buildDownloadItemThumbnailRoute,
   buildGetChildrenRoute,
   buildGetItemParents,
   buildGetItemRoute,
   buildGetItemsRoute,
+  buildGetOwnItemsRoute,
 } from '../api/routes';
 import {
   OWN_ITEMS_KEY,
@@ -46,6 +46,7 @@ import {
   buildItemParentsKey,
   buildItemThumbnailKey,
   buildItemsKey,
+  buildOwnItemsKey,
 } from '../config/keys';
 
 const { hooks, wrapper, queryClient } = setUpTest();
@@ -58,25 +59,20 @@ describe('Items Hooks', () => {
   });
 
   describe('useOwnItems', () => {
-    const route = `/${GET_OWN_ITEMS_ROUTE}`;
-    const hook = () => hooks.useOwnItems();
+    const route = `/${buildGetOwnItemsRoute({ page: 1, name: '' })}`;
+    const hook = () => hooks.useOwnItems({ page: 1, name: '' });
 
     it(`Receive own items`, async () => {
       const response = ITEMS;
       const endpoints = [{ route, response }];
       const { data } = await mockHook({ endpoints, hook, wrapper });
-
-      expect(data).toEqualImmutable(response);
+      expect(JSON.stringify(data)).toEqual(JSON.stringify(response));
 
       // verify cache keys
-      expect(queryClient.getQueryData(OWN_ITEMS_KEY)).toEqualImmutable(
-        response,
+      const res = await queryClient.getQueryData(
+        buildOwnItemsKey({ page: 1, name: '' }),
       );
-      for (const item of response) {
-        expect(
-          queryClient.getQueryData(buildItemKey(item.id)),
-        ).toEqualImmutable(item);
-      }
+      expect(JSON.stringify(res)).toEqual(JSON.stringify(response));
     });
 
     it(`Unauthorized`, async () => {

src/hooks/item.ts

@@ -31,7 +31,6 @@ import {
 } from '../config/constants';
 import { UndefinedArgument } from '../config/errors';
 import {
-  OWN_ITEMS_KEY,
   RECYCLED_ITEMS_DATA_KEY,
   SHARED_ITEMS_KEY,
   buildEtherpadKey,
@@ -43,9 +42,10 @@ import {
   buildItemParentsKey,
   buildItemThumbnailKey,
   buildItemsKey,
+  buildOwnItemsKey,
 } from '../config/keys';
 import { getOwnItemsRoutine } from '../routines';
-import { QueryClientConfig } from '../types';
+import { OwnItemsQuery, QueryClientConfig } from '../types';
 import { isPaginatedChildrenDataEqual, paginate } from '../utils/util';
 import { configureWsItemHooks } from '../ws';
 import { WebsocketClient } from '../ws/ws-client';
@@ -63,21 +63,31 @@ export default (
       : undefined;
 
   return {
-    useOwnItems: (options?: { getUpdates?: boolean }) => {
+    useOwnItems: (
+      { page, all, name, limit }: OwnItemsQuery,
+      options?: { getUpdates?: boolean },
+    ) => {
       const queryClient = useQueryClient();
       const getUpdates = options?.getUpdates ?? enableWebsocket;
 
       const { data: currentMember } = useCurrentMember();
       itemWsHooks?.useOwnItemsUpdates(getUpdates ? currentMember?.id : null);
 
       return useQuery({
-        queryKey: OWN_ITEMS_KEY,
+        queryKey: buildOwnItemsKey({ page, name, all, limit }),
         queryFn: (): Promise<List<ItemRecord>> =>
-          Api.getOwnItems(queryConfig).then((data) => convertJs(data)),
-        onSuccess: async (items: List<ItemRecord>) => {
+          Api.getOwnItems(queryConfig, { page, name, all, limit }).then(
+            (data) => convertJs(data),
+          ),
+        onSuccess: async ({
+          data,
+        }: {
+          data: List<ItemRecord>;
+          totalCount: number;
+        }) => {
           // save items in their own key
           // eslint-disable-next-line no-unused-expressions
-          items?.forEach(async (item) => {
+          data?.forEach(async (item) => {
             const { id } = item;
             queryClient.setQueryData(buildItemKey(id), item);
           });

src/hooks/membership.ts

@@ -83,8 +83,11 @@ export default (
             throw new UndefinedArgument();
           }
 
-          return splitRequestByIds(ids, MAX_TARGETS_FOR_READ_REQUEST, (chunk) =>
-            Api.getMembershipsForItems(chunk, queryConfig),
+          return splitRequestByIds(
+            ids,
+            MAX_TARGETS_FOR_READ_REQUEST,
+            (chunk) => Api.getMembershipsForItems(chunk, queryConfig),
+            true,
           );
         },
         onSuccess: async (memberships) => {

src/types.ts

@@ -43,3 +43,10 @@ export type SearchFields = {
   name?: string;
   creator?: string;
 };
+
+export type OwnItemsQuery = {
+  page?: number;
+  name?: string;
+  all?: boolean;
+  limit?: number;
+};