From 6b7e8d9d1d6e7915008258a15a60a65ac88d56e6 Mon Sep 17 00:00:00 2001
From: kim <kim.phanhoang@epfl.ch>
Date: Wed, 16 Oct 2024 12:18:06 +0200
Subject: [PATCH] refactor: apply PR requested changes

---
 cypress/e2e/item/trash/viewTrash.cy.ts       |  6 ++----
 package.json                                 |  2 +-
 src/components/pages/RecycledItemsScreen.tsx | 20 ++++++++++----------
 yarn.lock                                    | 10 +++++-----
 4 files changed, 18 insertions(+), 20 deletions(-)

diff --git a/cypress/e2e/item/trash/viewTrash.cy.ts b/cypress/e2e/item/trash/viewTrash.cy.ts
index 60e598389..d53d2c36f 100644
--- a/cypress/e2e/item/trash/viewTrash.cy.ts
+++ b/cypress/e2e/item/trash/viewTrash.cy.ts
@@ -64,7 +64,7 @@ describe('View trash', () => {
   });
 
   describe('Error Handling', () => {
-    it.only('check recycled item layout with server error', () => {
+    it('check recycled item layout with server error', () => {
       cy.setUpApi({
         items: recycledItemData.map(({ item }) => item),
         recycledItemData,
@@ -72,9 +72,7 @@ describe('View trash', () => {
       });
       cy.visit(RECYCLE_BIN_PATH);
 
-      cy.get(`#${RECYCLED_ITEMS_ERROR_ALERT_ID}`, { timeout: 10000 }).should(
-        'exist',
-      );
+      cy.get(`#${RECYCLED_ITEMS_ERROR_ALERT_ID}`).should('exist');
     });
   });
 });
diff --git a/package.json b/package.json
index d3a16ae52..995b60fe5 100644
--- a/package.json
+++ b/package.json
@@ -20,7 +20,7 @@
     "@emotion/styled": "11.13.0",
     "@graasp/chatbox": "3.3.0",
     "@graasp/map": "1.19.0",
-    "@graasp/query-client": "github:graasp/graasp-query-client#942-recycled-pagination",
+    "@graasp/query-client": "4.2.0",
     "@graasp/sdk": "4.31.0",
     "@graasp/stylis-plugin-rtl": "2.2.0",
     "@graasp/translations": "1.39.0",
diff --git a/src/components/pages/RecycledItemsScreen.tsx b/src/components/pages/RecycledItemsScreen.tsx
index 8e52362aa..f20c0efa0 100644
--- a/src/components/pages/RecycledItemsScreen.tsx
+++ b/src/components/pages/RecycledItemsScreen.tsx
@@ -1,4 +1,4 @@
-import { Stack, Typography } from '@mui/material';
+import { Alert, Stack, Typography } from '@mui/material';
 
 import { Button } from '@graasp/ui';
 
@@ -45,16 +45,13 @@ const RecycledItemsScreenContent = (): JSX.Element => {
   // render this when there is data from the query
   if (data?.pages?.length) {
     if (data.pages[0].data.length) {
-      const filteredData = data.pages
-        .map((p) => p.data)
-        ?.flat()
+      const fetchedItems = data.pages
+        .flatMap((p) => p.data)
         ?.map((p) => p.item);
 
-      const totalFetchedItems = data
-        ? data.pages.map(({ data: d }) => d.length).reduce((a, b) => a + b, 0)
-        : 0;
+      const totalFetchedItems = fetchedItems.length;
 
-      const hasSelection = Boolean(selectedIds.length && filteredData?.length);
+      const hasSelection = Boolean(selectedIds.length && fetchedItems?.length);
       return (
         <>
           <Stack gap={1} height="100%">
@@ -65,7 +62,7 @@ const RecycledItemsScreenContent = (): JSX.Element => {
               width="100%"
             >
               {hasSelection ? (
-                <RecycleBinToolbar items={filteredData} />
+                <RecycleBinToolbar items={fetchedItems} />
               ) : (
                 <Typography variant="body1">
                   {translateBuilder(BUILDER.TRASH_COUNT, {
@@ -75,7 +72,7 @@ const RecycledItemsScreenContent = (): JSX.Element => {
               )}
             </Stack>
             <DragContainerStack id={CONTAINER_ID}>
-              {filteredData.map((item) => (
+              {fetchedItems.map((item) => (
                 <Stack mb={1}>
                   <ItemCard
                     item={item}
@@ -108,6 +105,9 @@ const RecycledItemsScreenContent = (): JSX.Element => {
         </>
       );
     }
+    return (
+      <Alert severity="info">{translateBuilder(BUILDER.TRASH_NO_ITEM)}</Alert>
+    );
   }
 
   if (isLoading) {
diff --git a/yarn.lock b/yarn.lock
index c2bcefde3..3b93698ce 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1637,9 +1637,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@graasp/query-client@github:graasp/graasp-query-client#942-recycled-pagination":
-  version: 4.1.0
-  resolution: "@graasp/query-client@https://github.com/graasp/graasp-query-client.git#commit=2209d08e1151ebc2daa32de49a17a3ecf3ed57b9"
+"@graasp/query-client@npm:4.2.0":
+  version: 4.2.0
+  resolution: "@graasp/query-client@npm:4.2.0"
   dependencies:
     "@tanstack/react-query": "npm:5.59.8"
     "@tanstack/react-query-devtools": "npm:5.59.8"
@@ -1649,7 +1649,7 @@ __metadata:
     "@graasp/sdk": ^4.0.0
     "@graasp/translations": "*"
     react: ^18.0.0
-  checksum: 10/e6edc1bdc6eb2bcbd6c5a3b337efb34e1d9f25d1fd640b8100cafc8ebfd8a1e38be57e485d14546572a9afb0a81de8b4cdd09d592759867f7adda9bbb4c882c9
+  checksum: 10/fdf06272486d4c9979459c00f7cb0d9f98c027deef0c948ff734679b46435658076aeede49d54730922f0d12e572cf9d3bac045e346ab38629a15fab6b30d00d
   languageName: node
   linkType: hard
 
@@ -6472,7 +6472,7 @@ __metadata:
     "@emotion/styled": "npm:11.13.0"
     "@graasp/chatbox": "npm:3.3.0"
     "@graasp/map": "npm:1.19.0"
-    "@graasp/query-client": "github:graasp/graasp-query-client#942-recycled-pagination"
+    "@graasp/query-client": "npm:4.2.0"
     "@graasp/sdk": "npm:4.31.0"
     "@graasp/stylis-plugin-rtl": "npm:2.2.0"
     "@graasp/translations": "npm:1.39.0"