From 4f8f4327fd06eb9e294ee3b23e9f3c6b32aa9828 Mon Sep 17 00:00:00 2001 From: RAR Date: Fri, 13 Jan 2023 02:33:21 +0100 Subject: [PATCH] fix: Separated cardIds, filteredCardIds, IsFiltered selectors --- client/src/components/List/List.jsx | 18 ++++---- .../src/containers/BoardActionsContainer.js | 4 +- client/src/containers/ListContainer.js | 10 +++-- client/src/models/List.js | 16 ++++--- client/src/selectors/core.js | 2 +- client/src/selectors/lists.js | 45 ++++++++++++++++--- 6 files changed, 68 insertions(+), 27 deletions(-) diff --git a/client/src/components/List/List.jsx b/client/src/components/List/List.jsx index ba22317..f56e1f3 100755 --- a/client/src/components/List/List.jsx +++ b/client/src/components/List/List.jsx @@ -16,7 +16,7 @@ import styles from './List.module.scss'; const List = React.memo( // eslint-disable-next-line prettier/prettier - ({ id, index, name, isPersisted, isCollapsed, isFiltered, cardIds, cardIdsFull, canEdit, onUpdate, onDelete, onCardCreate }) => { + ({ id, index, name, isPersisted, isCollapsed, cardIds, isFiltered, filteredCardIds, canEdit, onUpdate, onDelete, onCardCreate }) => { const [t] = useTranslation(); const [isAddCardOpened, setIsAddCardOpened] = useState(false); @@ -66,7 +66,7 @@ const List = React.memo( if (isAddCardOpened) { listWrapper.current.scrollTop = listWrapper.current.scrollHeight; } - }, [cardIds, isAddCardOpened]); + }, [filteredCardIds, isAddCardOpened]); const cardsNode = (
- {cardIds.map((cardId, cardIndex) => ( + {filteredCardIds.map((cardId, cardIndex) => ( ))} {placeholder} @@ -99,9 +99,9 @@ const List = React.memo( return ( [ isFiltered - ? `${cardIds.length} ${t('common.of')} ${cardIdsFull.length} ` - : `${cardIdsFull.length} `, - ] + [cardIdsFull.length !== 1 ? t('common.cards') : t('common.card')] + ? `${filteredCardIds.length} ${t('common.of')} ${cardIds.length} ` + : `${cardIds.length} `, + ] + [cardIds.length !== 1 ? t('common.cards') : t('common.card')] ); }; @@ -210,7 +210,7 @@ const List = React.memo( > - {cardIds.length > 0 ? t('action.addAnotherCard') : t('action.addCard')} + {filteredCardIds.length > 0 ? t('action.addAnotherCard') : t('action.addCard')} )} @@ -228,9 +228,9 @@ List.propTypes = { name: PropTypes.string.isRequired, isCollapsed: PropTypes.bool.isRequired, isPersisted: PropTypes.bool.isRequired, - isFiltered: PropTypes.bool.isRequired, cardIds: PropTypes.array.isRequired, // eslint-disable-line react/forbid-prop-types - cardIdsFull: PropTypes.array.isRequired, // eslint-disable-line react/forbid-prop-types + isFiltered: PropTypes.bool.isRequired, + filteredCardIds: PropTypes.array.isRequired, // eslint-disable-line react/forbid-prop-types canEdit: PropTypes.bool.isRequired, onUpdate: PropTypes.func.isRequired, onDelete: PropTypes.func.isRequired, diff --git a/client/src/containers/BoardActionsContainer.js b/client/src/containers/BoardActionsContainer.js index 76c904d..b7d568e 100644 --- a/client/src/containers/BoardActionsContainer.js +++ b/client/src/containers/BoardActionsContainer.js @@ -8,9 +8,7 @@ import BoardActions from '../components/BoardActions'; const mapStateToProps = (state) => { const listIds = selectors.selectListIdsForCurrentBoard(state); - const listCardsCount = listIds.map( - (list) => selectors.selectCardIdsByListId(state, list).cardIdsFull.length, - ); + const listCardsCount = listIds.map((list) => selectors.selectCardIdsByListId(state, list).length); const cardCount = listCardsCount.reduce((sum, count) => sum + count, 0); const allUsers = selectors.selectUsers(state); const isCurrentUserManager = selectors.selectIsCurrentUserManagerForCurrentProject(state); diff --git a/client/src/containers/ListContainer.js b/client/src/containers/ListContainer.js index 8f1ae22..498fe2b 100755 --- a/client/src/containers/ListContainer.js +++ b/client/src/containers/ListContainer.js @@ -9,10 +9,14 @@ import List from '../components/List'; const makeMapStateToProps = () => { const selectListById = selectors.makeSelectListById(); const selectCardIdsByListId = selectors.makeSelectCardIdsByListId(); + const selectIsFilteredByListId = selectors.makeSelectIsFilteredByListId(); + const selectFilteredCardIdsByListId = selectors.makeSelectFilteredCardIdsByListId(); return (state, { id, index }) => { const { name, isPersisted, isCollapsed } = selectListById(state, id); - const { cardIds, cardIdsFull, isFiltered } = selectCardIdsByListId(state, id); + const cardIds = selectCardIdsByListId(state, id); + const isFiltered = selectIsFilteredByListId(state, id); + const filteredCardIds = selectFilteredCardIdsByListId(state, id); const currentUserMembership = selectors.selectCurrentUserMembershipForCurrentBoard(state); const isCurrentUserEditor = @@ -24,9 +28,9 @@ const makeMapStateToProps = () => { name, isCollapsed, isPersisted, - isFiltered, cardIds, - cardIdsFull, + isFiltered, + filteredCardIds, canEdit: isCurrentUserEditor, }; }; diff --git a/client/src/models/List.js b/client/src/models/List.js index 6f61416..b9973f1 100755 --- a/client/src/models/List.js +++ b/client/src/models/List.js @@ -85,18 +85,25 @@ export default class extends BaseModel { return this.cards.orderBy('position'); } + getOrderedCardsModelArray() { + return this.getOrderedCardsQuerySet().toModelArray(); + } + + getIsFiltered() { + const filterUserIds = this.board.filterUsers.toRefArray().map((user) => user.id); + const filterLabelIds = this.board.filterLabels.toRefArray().map((label) => label.id); + return filterUserIds.length > 0 || filterLabelIds.length > 0; + } + getFilteredOrderedCardsModelArray() { let cardModels = this.getOrderedCardsQuerySet().toModelArray(); - const cardModelsFull = cardModels; const filterUserIds = this.board.filterUsers.toRefArray().map((user) => user.id); const filterLabelIds = this.board.filterLabels.toRefArray().map((label) => label.id); - let isFiltered = false; if (filterUserIds.length > 0) { cardModels = cardModels.filter((cardModel) => { const users = cardModel.users.toRefArray(); - isFiltered = true; return users.some((user) => filterUserIds.includes(user.id)); }); } @@ -104,12 +111,11 @@ export default class extends BaseModel { if (filterLabelIds.length > 0) { cardModels = cardModels.filter((cardModel) => { const labels = cardModel.labels.toRefArray(); - isFiltered = true; return labels.some((label) => filterLabelIds.includes(label.id)); }); } - return { cardModels, cardModelsFull, isFiltered }; + return cardModels; } deleteRelated() { diff --git a/client/src/selectors/core.js b/client/src/selectors/core.js index 65099d3..1d15a1c 100755 --- a/client/src/selectors/core.js +++ b/client/src/selectors/core.js @@ -94,7 +94,7 @@ export const selectNextCardPosition = createSelector( } // eslint-disable-next-line prettier/prettier - return nextPosition(listModel.getFilteredOrderedCardsModelArray().cardModels, index, excludedId); + return nextPosition(listModel.getFilteredOrderedCardsModelArray(), index, excludedId); }, ); diff --git a/client/src/selectors/lists.js b/client/src/selectors/lists.js index 4ab0abf..e918241 100644 --- a/client/src/selectors/lists.js +++ b/client/src/selectors/lists.js @@ -34,20 +34,53 @@ export const makeSelectCardIdsByListId = () => return listModel; } - const cardsModelArray = listModel.getFilteredOrderedCardsModelArray(); - return { - cardIds: cardsModelArray.cardModels.map((cardModel) => cardModel.id), - cardIdsFull: cardsModelArray.cardModelsFull.map((cardModel) => cardModel.id), - isFiltered: cardsModelArray.isFiltered, - }; + return listModel.getOrderedCardsModelArray().map((cardModel) => cardModel.id); }, ); export const selectCardIdsByListId = makeSelectCardIdsByListId(); +export const makeSelectIsFilteredByListId = () => + createSelector( + orm, + (_, id) => id, + ({ List }, id) => { + const listModel = List.withId(id); + + if (!listModel) { + return listModel; + } + + return listModel.getIsFiltered(); + }, + ); + +export const selectIsFilteredByListId = makeSelectIsFilteredByListId(); + +export const makeSelectFilteredCardIdsByListId = () => + createSelector( + orm, + (_, id) => id, + ({ List }, id) => { + const listModel = List.withId(id); + + if (!listModel) { + return listModel; + } + + return listModel.getFilteredOrderedCardsModelArray().map((cardModel) => cardModel.id); + }, + ); + +export const selectFilteredCardIdsByListId = makeSelectFilteredCardIdsByListId(); + export default { makeSelectListById, selectListById, makeSelectCardIdsByListId, selectCardIdsByListId, + makeSelectIsFilteredByListId, + selectIsFilteredByListId, + makeSelectFilteredCardIdsByListId, + selectFilteredCardIdsByListId, };