From 42cd116aeeac486b07e76dc1573382895a26e2fd Mon Sep 17 00:00:00 2001 From: kim Date: Thu, 3 Oct 2024 17:27:47 +0200 Subject: [PATCH] refactor: remove features in recycled page --- cypress/e2e/item/trash/delete.cy.ts | 1 - cypress/e2e/item/trash/restore.cy.ts | 1 - cypress/e2e/item/trash/viewTrash.cy.ts | 40 ----------- cypress/support/server.ts | 13 ++-- src/components/pages/RecycledItemsScreen.tsx | 73 +++----------------- src/langs/constants.ts | 1 + src/langs/en.json | 4 +- src/langs/fr.json | 4 +- yarn.lock | 38 +++++----- 9 files changed, 41 insertions(+), 134 deletions(-) diff --git a/cypress/e2e/item/trash/delete.cy.ts b/cypress/e2e/item/trash/delete.cy.ts index ed970696e..bc705094c 100644 --- a/cypress/e2e/item/trash/delete.cy.ts +++ b/cypress/e2e/item/trash/delete.cy.ts @@ -40,7 +40,6 @@ describe('Delete Items', () => { cy.wait('@deleteItems').then(({ request: { url } }) => { expect(url).to.contain(id); }); - cy.wait('@getRecycledItems'); }); it('delete many items', () => { diff --git a/cypress/e2e/item/trash/restore.cy.ts b/cypress/e2e/item/trash/restore.cy.ts index 55e00a214..573074237 100644 --- a/cypress/e2e/item/trash/restore.cy.ts +++ b/cypress/e2e/item/trash/restore.cy.ts @@ -36,7 +36,6 @@ describe('Restore Items', () => { cy.wait('@restoreItems').then(({ request: { url } }) => { expect(url).to.contain(id); }); - cy.wait('@getRecycledItems'); }); it('restore many items', () => { diff --git a/cypress/e2e/item/trash/viewTrash.cy.ts b/cypress/e2e/item/trash/viewTrash.cy.ts index aa8f682e1..60e598389 100644 --- a/cypress/e2e/item/trash/viewTrash.cy.ts +++ b/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', () => { diff --git a/cypress/support/server.ts b/cypress/support/server.ts index 569feea8b..065bad88c 100644 --- a/cypress/support/server.ts +++ b/cypress/support/server.ts @@ -69,7 +69,7 @@ const { buildGetItemMembershipsForItemsRoute, buildGetItemTagsRoute, buildPostItemTagRoute, - buildPatchMemberRoute, + buildPatchCurrentMemberRoute, buildEditItemMembershipRoute, buildDeleteItemMembershipRoute, buildPostItemFlagRoute, @@ -207,12 +207,11 @@ export const mockGetOwnRecycledItemData = ( const page = parseInt(params.get('page') ?? '1', 10); const pageSize = parseInt(params.get('pageSize') ?? '10', 10); - const rawKeywords = params.get('keywords'); - const keywords = Array.isArray(rawKeywords) ? rawKeywords : [rawKeywords]; - const result = recycledItemData - .filter(({ item }) => keywords.some((k) => item.name.includes(k))) - .slice((page - 1) * pageSize, page * pageSize); + const result = recycledItemData.slice( + (page - 1) * pageSize, + page * pageSize, + ); reply({ data: result, @@ -757,7 +756,7 @@ export const mockEditMember = ( cy.intercept( { method: HttpMethod.Patch, - url: new RegExp(`${API_HOST}/${buildPatchMemberRoute(ID_FORMAT)}`), + url: new RegExp(`${API_HOST}/${buildPatchCurrentMemberRoute()}`), }, ({ reply }) => { if (shouldThrowError) { diff --git a/src/components/pages/RecycledItemsScreen.tsx b/src/components/pages/RecycledItemsScreen.tsx index 752b481e4..8e52362aa 100644 --- a/src/components/pages/RecycledItemsScreen.tsx +++ b/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({ - 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 ( <> @@ -93,26 +67,11 @@ const RecycledItemsScreenContent = ({ {hasSelection ? ( ) : ( - - - - {sortBy && setSortBy && ( - - )} - - - + + {translateBuilder(BUILDER.TRASH_COUNT, { + count: data.pages[0].totalCount, + })} + )} @@ -149,9 +108,6 @@ const RecycledItemsScreenContent = ({ ); } - if (itemTypes.length || searchText) { - return ; - } } if (isLoading) { @@ -163,25 +119,14 @@ const RecycledItemsScreenContent = ({ const RecycledItemsScreen = (): JSX.Element | null => { const { t: translateBuilder } = useBuilderTranslation(); - const itemSearch = useItemSearch(); return ( - {itemSearch.input} - - } > - + ); diff --git a/src/langs/constants.ts b/src/langs/constants.ts index 841793b23..54f75d3e6 100644 --- a/src/langs/constants.ts +++ b/src/langs/constants.ts @@ -603,4 +603,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', }; diff --git a/src/langs/en.json b/src/langs/en.json index ce29d45a7..757841199 100644 --- a/src/langs/en.json +++ b/src/langs/en.json @@ -496,5 +496,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." } diff --git a/src/langs/fr.json b/src/langs/fr.json index ddec0540d..da2751f2c 100644 --- a/src/langs/fr.json +++ b/src/langs/fr.json @@ -495,5 +495,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." } diff --git a/yarn.lock b/yarn.lock index 6cc0d55b3..c2bcefde3 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1638,18 +1638,18 @@ __metadata: linkType: hard "@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" + version: 4.1.0 + resolution: "@graasp/query-client@https://github.com/graasp/graasp-query-client.git#commit=2209d08e1151ebc2daa32de49a17a3ecf3ed57b9" dependencies: - "@tanstack/react-query": "npm:5.59.0" - "@tanstack/react-query-devtools": "npm:5.59.0" + "@tanstack/react-query": "npm:5.59.8" + "@tanstack/react-query-devtools": "npm:5.59.8" axios: "npm:1.7.7" http-status-codes: "npm:2.3.0" peerDependencies: "@graasp/sdk": ^4.0.0 "@graasp/translations": "*" react: ^18.0.0 - checksum: 10/050db33a3da837ea81f88a7dc477288acb1ef0fa4bee8c25f29674aec7315a1c1128a4cf8866542e26053aae89818a20170c794501f930f00204850437a4ad65 + checksum: 10/e6edc1bdc6eb2bcbd6c5a3b337efb34e1d9f25d1fd640b8100cafc8ebfd8a1e38be57e485d14546572a9afb0a81de8b4cdd09d592759867f7adda9bbb4c882c9 languageName: node linkType: hard @@ -2560,10 +2560,10 @@ __metadata: languageName: node linkType: hard -"@tanstack/query-core@npm:5.59.0": - version: 5.59.0 - resolution: "@tanstack/query-core@npm:5.59.0" - checksum: 10/2e8fd7d9bdd62cabc1a2b20b2cf0c9275174ee5550170f224bd4e30fe2d01cc8d39a0dd03caae55ddb8aea259d991966bb54b581b4046fd67c621c081f4b0ba7 +"@tanstack/query-core@npm:5.59.6": + version: 5.59.6 + resolution: "@tanstack/query-core@npm:5.59.6" + checksum: 10/4cd634f957175dde80ed8f2b47eb14803d959073b6dccb7868f5dd6ddce26e41820b2dfc879dfc799de0726ae640201440c7d1d95113813bbcb25b03ec05949e languageName: node linkType: hard @@ -2574,26 +2574,26 @@ __metadata: languageName: node linkType: hard -"@tanstack/react-query-devtools@npm:5.59.0": - version: 5.59.0 - resolution: "@tanstack/react-query-devtools@npm:5.59.0" +"@tanstack/react-query-devtools@npm:5.59.8": + version: 5.59.8 + resolution: "@tanstack/react-query-devtools@npm:5.59.8" dependencies: "@tanstack/query-devtools": "npm:5.58.0" peerDependencies: - "@tanstack/react-query": ^5.59.0 + "@tanstack/react-query": ^5.59.8 react: ^18 || ^19 - checksum: 10/a4deb3fe97355fcb98febd3b9cd5e871f3756771eb9eb15a2a226a0a9fb0314502522f70d12f54c25aec7985eae77b82b39bce37f86ee0312da046f4f1822bcf + checksum: 10/1e84af45cd6c722b296aef39ac2e7c98ef0db8c963bc43ebd802adc7077d514d06189862b02351e85878616542877af64266965147d75470cf834a23a9ee07ea languageName: node linkType: hard -"@tanstack/react-query@npm:5.59.0": - version: 5.59.0 - resolution: "@tanstack/react-query@npm:5.59.0" +"@tanstack/react-query@npm:5.59.8": + version: 5.59.8 + resolution: "@tanstack/react-query@npm:5.59.8" dependencies: - "@tanstack/query-core": "npm:5.59.0" + "@tanstack/query-core": "npm:5.59.6" peerDependencies: react: ^18 || ^19 - checksum: 10/48963e7d0603958390db0087c018b71e87187ad84dea03279716b4869de83509027c37f65f3c6c4a1cd7b6f9f14250afffc2aeee5d481528e2308d937422ae41 + checksum: 10/246cfa18e991782c97631ab30fc95987be81c7a25b057b65c3530a06f9e8acc98475ce8def29486be8d4c8f9ad391b9cfa2195b89e11dcd82f43a4ca172154f6 languageName: node linkType: hard