fix: Separated cardIds, filteredCardIds, IsFiltered selectors

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 = (
       <Droppable
@@ -78,7 +78,7 @@ const List = React.memo(
           // eslint-disable-next-line react/jsx-props-no-spreading
           <div {...droppableProps} ref={innerRef}>
             <div className={styles.cards}>
-              {cardIds.map((cardId, cardIndex) => (
+              {filteredCardIds.map((cardId, cardIndex) => (
                 <CardContainer key={cardId} id={cardId} index={cardIndex} />
               ))}
               {placeholder}
@@ -99,9 +99,9 @@ const List = React.memo(
       return (
         [
           isFiltered
-            ? `${cardIds.length} ${t('common.of')} ${cardIdsFull.length} `
+            ? `${filteredCardIds.length} ${t('common.of')} ${cardIds.length} `
-            : `${cardIdsFull.length} `,
+            : `${cardIds.length} `,
-        ] + [cardIdsFull.length !== 1 ? t('common.cards') : t('common.card')]
+        ] + [cardIds.length !== 1 ? t('common.cards') : t('common.card')]
       );
     };
 
@@ -210,7 +210,7 @@ const List = React.memo(
                 >
                   <PlusMathIcon className={styles.addCardButtonIcon} />
                   <span className={styles.addCardButtonText}>
-                    {cardIds.length > 0 ? t('action.addAnotherCard') : t('action.addCard')}
+                    {filteredCardIds.length > 0 ? t('action.addAnotherCard') : t('action.addCard')}
                   </span>
                 </button>
               )}
@@ -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,

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(
+  const listCardsCount = listIds.map((list) => selectors.selectCardIdsByListId(state, list).length);
-    (list) => selectors.selectCardIdsByListId(state, list).cardIdsFull.length,
-  );
   const cardCount = listCardsCount.reduce((sum, count) => sum + count, 0);
   const allUsers = selectors.selectUsers(state);
   const isCurrentUserManager = selectors.selectIsCurrentUserManagerForCurrentProject(state);

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,
     };
   };

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() {

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);
   },
 );
 

client/src/selectors/lists.js

@@ -34,20 +34,53 @@ export const makeSelectCardIdsByListId = () =>
         return listModel;
       }
 
-      const cardsModelArray = listModel.getFilteredOrderedCardsModelArray();
+      return listModel.getOrderedCardsModelArray().map((cardModel) => cardModel.id);
-      return {
-        cardIds: cardsModelArray.cardModels.map((cardModel) => cardModel.id),
-        cardIdsFull: cardsModelArray.cardModelsFull.map((cardModel) => cardModel.id),
-        isFiltered: cardsModelArray.isFiltered,
-      };
     },
   );
 
 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,
 };