From 71f38a822a7c4c0aabc82772eedcac594b51391b Mon Sep 17 00:00:00 2001 From: Dhaval Dodiya Date: Mon, 20 Feb 2023 19:25:39 +0530 Subject: [PATCH 01/36] feat: select all on lists --- src/carbonio-ui-commons | 2 +- src/hooks/useSelection.jsx | 42 +++++++++-- src/store/tests/messages-slice.test.js | 3 - .../select-panel-action-message.tsx | 65 ++++++++++++++-- src/ui-actions/select-panel-action.tsx | 75 ++++++++++++++++--- src/ui-actions/tests/message-action.test.tsx | 4 +- .../edit/tests/edit-view.test.tsx | 14 ++-- src/views/app/folder-panel/breadcrumbs.tsx | 35 ++++++--- .../app/folder-panel/conversation-list.tsx | 25 +++++-- src/views/app/folder-panel/message-list.tsx | 32 ++++++-- translations/en.json | 4 + 11 files changed, 236 insertions(+), 65 deletions(-) diff --git a/src/carbonio-ui-commons b/src/carbonio-ui-commons index 49ee6b3d8..f3115dd9c 160000 --- a/src/carbonio-ui-commons +++ b/src/carbonio-ui-commons @@ -1 +1 @@ -Subproject commit 49ee6b3d86cd4e4fe098d3424dd763f32400fdb9 +Subproject commit f3115dd9c12a2b6b792adf331e66ecf3b6c1fd9d diff --git a/src/hooks/useSelection.jsx b/src/hooks/useSelection.jsx index 494f0b5fa..4beb07049 100644 --- a/src/hooks/useSelection.jsx +++ b/src/hooks/useSelection.jsx @@ -3,24 +3,24 @@ * * SPDX-License-Identifier: AGPL-3.0-only */ -import { useCallback, useEffect, useState } from 'react'; -import { omit, isEmpty } from 'lodash'; +import { useCallback, useEffect, useMemo, useState } from 'react'; +import { omit, isEmpty, map } from 'lodash'; -export const useSelection = (currentFolderId, setCount) => { +export const useSelection = (currentFolderId, setCount, count, items = []) => { const [selected, setSelected] = useState({}); - const [isSelecting, setIsSelecting] = useState(false); const [folderId, setFolderId] = useState(currentFolderId); - + const [isSelectModeOn, setIsSelectModeOn] = useState(false); useEffect(() => { - setIsSelecting(!isEmpty(selected)); + setIsSelectModeOn(!isEmpty(selected)); if (currentFolderId !== folderId) { setSelected({}); setFolderId(currentFolderId); - setIsSelecting(false); + setIsSelectModeOn(false); setCount(0); } }, [currentFolderId, folderId, selected, setCount]); + const isAllSelected = useMemo(() => count === items.length, [count, items.length]); const selectItem = useCallback( (id) => { if (selected[id]) { @@ -35,9 +35,35 @@ export const useSelection = (currentFolderId, setCount) => { ); const deselectAll = useCallback(() => { + setIsSelectModeOn(false); + setSelected({}); + setCount(0); + }, [setCount]); + + const selectAll = useCallback(() => { + map(items, (conv) => { + if (!selected[conv.id]) { + selectItem(conv.id); + } + }); + }, [items, selectItem, selected]); + + const selectAllModeOff = useCallback(() => { setSelected({}); setCount(0); + setTimeout(() => { + setIsSelectModeOn(true); + }); }, [setCount]); - return { selected, isSelecting, toggle: selectItem, deselectAll }; + return { + selected, + toggle: selectItem, + deselectAll, + isSelectModeOn, + setIsSelectModeOn, + selectAll, + isAllSelected, + selectAllModeOff + }; }; diff --git a/src/store/tests/messages-slice.test.js b/src/store/tests/messages-slice.test.js index 982e52aaf..8dfe864e3 100644 --- a/src/store/tests/messages-slice.test.js +++ b/src/store/tests/messages-slice.test.js @@ -3,12 +3,9 @@ * * SPDX-License-Identifier: AGPL-3.0-only */ -import React from 'react'; -import fetchMock from 'jest-fetch-mock'; import { getMsg } from '../actions'; import { selectMessage, selectMessages } from '../messages-slice'; import { generateStore } from '../../tests/generators/store'; -import { getSetupServer } from '../../carbonio-ui-commons/test/jest-setup'; describe('Messages Slice', () => { describe('GetMsg', () => { diff --git a/src/ui-actions/select-panel-action-message.tsx b/src/ui-actions/select-panel-action-message.tsx index d42d2fe37..baa9e68bc 100644 --- a/src/ui-actions/select-panel-action-message.tsx +++ b/src/ui-actions/select-panel-action-message.tsx @@ -3,9 +3,15 @@ * * SPDX-License-Identifier: AGPL-3.0-only */ -import React, { FC, ReactElement, useMemo } from 'react'; -import { Container, Dropdown, IconButton } from '@zextras/carbonio-design-system'; -import { FOLDERS, useTags } from '@zextras/carbonio-shell-ui'; +import React, { FC, ReactElement, useContext, useMemo } from 'react'; +import { + Button, + Container, + Dropdown, + IconButton, + SnackbarManagerContext +} from '@zextras/carbonio-design-system'; +import { FOLDERS, t, useTags } from '@zextras/carbonio-shell-ui'; import { map, every, filter, some } from 'lodash'; import { useDispatch } from 'react-redux'; @@ -25,14 +31,21 @@ type SelectMessagesPanelActionsPropType = { folderId: string; selectedIds: Array; deselectAll: () => void; + selectAll: () => void; + isAllSelected: boolean; + selectAllModeOff: () => void; }; const SelectMessagesPanelActions: FC = ({ messages, folderId, selectedIds, - deselectAll + deselectAll, + selectAll, + isAllSelected, + selectAllModeOff }) => { const dispatch = useDispatch(); + const createSnackbar = useContext(SnackbarManagerContext); const ids = useMemo(() => Object.keys(selectedIds ?? []), [selectedIds]); const selectedConversation = filter(messages, (convo) => ids.indexOf(convo.id ?? '') !== -1); const tags = useTags(); @@ -197,8 +210,16 @@ const SelectMessagesPanelActions: FC = ({ onClick={deselectAll} data-testid="action-button-deselect-all" /> - {/* Uncomment this line to show the `Select all` Button */} - {/*