refactor: remove features in recycled page

cypress/e2e/item/trash/viewTrash.cy.ts

@@ -5,19 +5,14 @@ import {
   PackedRecycledItemDataFactory,
 } from '@graasp/sdk';
 
-import { SortingOptions } from '@/components/table/types';
 import { BUILDER } from '@/langs/constants';
 
 import i18n, { BUILDER_NAMESPACE } from '../../../../src/config/i18n';
 import { RECYCLE_BIN_PATH } from '../../../../src/config/paths';
 import {
-  ITEM_SEARCH_INPUT_ID,
   PREVENT_GUEST_MESSAGE_ID,
   RECYCLED_ITEMS_ERROR_ALERT_ID,
   RECYCLED_ITEMS_ROOT_CONTAINER,
-  SORTING_ORDERING_SELECTOR_ASC,
-  SORTING_ORDERING_SELECTOR_DESC,
-  SORTING_SELECT_SELECTOR,
   buildItemCard,
 } from '../../../../src/config/selectors';
 import { CURRENT_USER } from '../../../fixtures/members';
@@ -61,46 +56,11 @@ describe('View trash', () => {
       cy.visit(RECYCLE_BIN_PATH);
     });
 
-    it('Empty search', () => {
-      i18n.changeLanguage(CURRENT_USER.extra.lang as string);
-      const searchText = 'mysearch';
-      cy.get(`#${ITEM_SEARCH_INPUT_ID}`).type(searchText);
-      const text = i18n.t(BUILDER.ITEM_SEARCH_NOTHING_FOUND, {
-        search: searchText,
-        ns: BUILDER_NAMESPACE,
-      });
-      cy.get(`#${RECYCLED_ITEMS_ROOT_CONTAINER}`).should('contain', text);
-    });
-
     it('check recycled item layout', () => {
       for (const { item } of recycledItemData) {
         cy.get(`#${buildItemCard(item.id)}`).should('be.visible');
       }
     });
-
-    it('Sorting & Ordering', () => {
-      cy.wait('@getOwnRecycledItemData');
-
-      cy.get(`${SORTING_SELECT_SELECTOR} input`).should(
-        'have.value',
-        SortingOptions.ItemUpdatedAt,
-      );
-      cy.get(SORTING_ORDERING_SELECTOR_DESC).should('be.visible');
-
-      cy.get(SORTING_SELECT_SELECTOR).click();
-      cy.get('li[data-value="item.name"]').click();
-      cy.wait('@getOwnRecycledItemData').then(({ request: { url } }) => {
-        expect(url).to.contain('item.name');
-        expect(url).to.contain('desc');
-      });
-
-      // change ordering
-      cy.get(SORTING_ORDERING_SELECTOR_DESC).click();
-      cy.get(SORTING_ORDERING_SELECTOR_ASC).should('be.visible');
-      cy.wait('@getOwnRecycledItemData').then(({ request: { url } }) => {
-        expect(url).to.contain('asc');
-      });
-    });
   });
 
   describe('Error Handling', () => {

src/components/pages/RecycledItemsScreen.tsx

@@ -1,9 +1,8 @@
-import { Stack } from '@mui/material';
+import { Stack, Typography } from '@mui/material';
 
 import { Button } from '@graasp/ui';
 
 import { ITEM_PAGE_SIZE } from '@/config/constants';
-import { Ordering } from '@/enums';
 
 import { useBuilderTranslation } from '../../config/i18n';
 import { hooks } from '../../config/queryClient';
@@ -15,10 +14,6 @@ import { BUILDER } from '../../langs/constants';
 import DeleteButton from '../common/DeleteButton';
 import ErrorAlert from '../common/ErrorAlert';
 import RestoreButton from '../common/RestoreButton';
-import SelectTypes from '../common/SelectTypes';
-import { useFilterItemsContext } from '../context/FilterItemsContext';
-import { useItemSearch } from '../item/ItemSearch';
-import ModeButton from '../item/header/ModeButton';
 import LoadingScreen from '../layout/LoadingScreen';
 import {
   SelectionContextProvider,
@@ -29,41 +24,20 @@ import {
   useDragSelection,
 } from '../main/list/useDragSelection';
 import ItemCard from '../table/ItemCard';
-import SortingSelect from '../table/SortingSelect';
-import { SortingOptions } from '../table/types';
-import { useSorting, useTranslatedSortingOptions } from '../table/useSorting';
-import NoItemFilters from './NoItemFilters';
 import PageWrapper from './PageWrapper';
 import RecycleBinToolbar from './recycleBin/RecycleBinSelectionToolbar';
 
 const CONTAINER_ID = 'recycle-items-container';
 
-const RecycledItemsScreenContent = ({
-  searchText,
-}: {
-  searchText: string;
-}): JSX.Element => {
+const RecycledItemsScreenContent = (): JSX.Element => {
   const { t: translateBuilder } = useBuilderTranslation();
-  const { itemTypes } = useFilterItemsContext();
-  const { sortBy, setSortBy, ordering, setOrdering } =
-    useSorting<SortingOptions>({
-      sortBy: SortingOptions.ItemUpdatedAt,
-      ordering: Ordering.DESC,
-    });
 
   const { data, fetchNextPage, isLoading, isFetching } =
     hooks.useInfiniteOwnRecycledItemData(
-      {
-        sortBy,
-        ordering,
-        types: itemTypes,
-        keywords: searchText,
-      },
       // todo: adapt page size given the user window height
       { pageSize: ITEM_PAGE_SIZE },
     );
 
-  const options = useTranslatedSortingOptions();
   const { selectedIds, toggleSelection } = useSelectionContext();
 
   const DragSelection = useDragSelection({ containerId: CONTAINER_ID });
@@ -80,7 +54,7 @@ const RecycledItemsScreenContent = ({
         ? data.pages.map(({ data: d }) => d.length).reduce((a, b) => a + b, 0)
         : 0;
 
-      const hasSelection = selectedIds.length && filteredData?.length;
+      const hasSelection = Boolean(selectedIds.length && filteredData?.length);
       return (
         <>
           <Stack gap={1} height="100%">
@@ -93,26 +67,11 @@ const RecycledItemsScreenContent = ({
               {hasSelection ? (
                 <RecycleBinToolbar items={filteredData} />
               ) : (
-                <Stack
-                  spacing={1}
-                  direction="row"
-                  justifyContent="space-between"
-                  alignItems="center"
-                >
-                  <SelectTypes />
-                  <Stack direction="row" gap={1}>
-                    {sortBy && setSortBy && (
-                      <SortingSelect
-                        sortBy={sortBy}
-                        options={options}
-                        setSortBy={setSortBy}
-                        ordering={ordering}
-                        setOrdering={setOrdering}
-                      />
-                    )}
-                    <ModeButton />
-                  </Stack>
-                </Stack>
+                <Typography variant="body1">
+                  {translateBuilder(BUILDER.TRASH_COUNT, {
+                    count: data.pages[0].totalCount,
+                  })}
+                </Typography>
               )}
             </Stack>
             <DragContainerStack id={CONTAINER_ID}>
@@ -149,9 +108,6 @@ const RecycledItemsScreenContent = ({
         </>
       );
     }
-    if (itemTypes.length || searchText) {
-      return <NoItemFilters searchText={searchText} />;
-    }
   }
 
   if (isLoading) {
@@ -163,25 +119,14 @@ const RecycledItemsScreenContent = ({
 
 const RecycledItemsScreen = (): JSX.Element | null => {
   const { t: translateBuilder } = useBuilderTranslation();
-  const itemSearch = useItemSearch();
 
   return (
     <PageWrapper
       title={translateBuilder(BUILDER.RECYCLE_BIN_TITLE)}
       id={RECYCLED_ITEMS_ROOT_CONTAINER}
-      options={
-        <Stack
-          direction="row"
-          alignItems="center"
-          justifyContent="flex-end"
-          spacing={1}
-        >
-          {itemSearch.input}
-        </Stack>
-      }
     >
       <SelectionContextProvider>
-        <RecycledItemsScreenContent searchText={itemSearch.text} />
+        <RecycledItemsScreenContent />
       </SelectionContextProvider>
     </PageWrapper>
   );

src/langs/constants.ts

@@ -594,4 +594,5 @@ export const BUILDER = {
   ACCESS_MANAGEMENT_TITLE: 'ACCESS_MANAGEMENT_TITLE',
   ITEM_LOGIN_SCHEMA_DISABLED_GUEST_ACCESS_MESSAGE:
     'ITEM_LOGIN_SCHEMA_DISABLED_GUEST_ACCESS_MESSAGE',
+  TRASH_COUNT: 'TRASH_COUNT',
 };

src/langs/en.json

@@ -491,5 +491,7 @@
   "REQUEST_ACCESS_BUTTON": "Request access",
   "REQUEST_ACCESS_SENT_BUTTON": "Request sent",
   "ACCESS_MANAGEMENT_TITLE": "Access Management",
-  "ITEM_LOGIN_SCHEMA_DISABLED_GUEST_ACCESS_MESSAGE": "This guest cannot login because pseudonymized access is disabled."
+  "ITEM_LOGIN_SCHEMA_DISABLED_GUEST_ACCESS_MESSAGE": "This guest cannot login because pseudonymized access is disabled.",
+  "TRASH_COUNT_one": "You have one item in your trash.",
+  "TRASH_COUNT_other": "You have {{count}} items in your trash."
 }

src/langs/fr.json

@@ -490,5 +490,7 @@
   "REQUEST_ACCESS_TITLE": "Demander l'accès à cet élément",
   "REQUEST_ACCESS_BUTTON": "Demander l'accès",
   "REQUEST_ACCESS_SENT_BUTTON": "Demande envoyée",
-  "ACCESS_MANAGEMENT_TITLE": "Gestion des accès"
+  "ACCESS_MANAGEMENT_TITLE": "Gestion des accès",
+  "TRASH_COUNT_one": "Il y a un élément dans la poubelle.",
+  "TRASH_COUNT_other": "Il y a {{count}} éléments dans la poubelle."
 }

yarn.lock

@@ -1639,7 +1639,7 @@ __metadata:
 
 "@graasp/query-client@github:graasp/graasp-query-client#942-recycled-pagination":
   version: 3.26.0
-  resolution: "@graasp/query-client@https://github.com/graasp/graasp-query-client.git#commit=06a7a368457c7a990ea1a2d53a0a8f0e1ea01a28"
+  resolution: "@graasp/query-client@https://github.com/graasp/graasp-query-client.git#commit=1764f820018958ce77152e8924bde3be673704cf"
   dependencies:
     "@tanstack/react-query": "npm:5.59.0"
     "@tanstack/react-query-devtools": "npm:5.59.0"
@@ -1649,7 +1649,7 @@ __metadata:
     "@graasp/sdk": ^4.0.0
     "@graasp/translations": "*"
     react: ^18.0.0
-  checksum: 10/050db33a3da837ea81f88a7dc477288acb1ef0fa4bee8c25f29674aec7315a1c1128a4cf8866542e26053aae89818a20170c794501f930f00204850437a4ad65
+  checksum: 10/eb166ad99f1de0e5577ced686e68cb4f933b280f6110c12f42c7ec5918963e2ce2b755a47a261b1f6275cf17d64dee949250c47437aa93b663a9711a5af41055
   languageName: node
   linkType: hard