@zeniai/client-epic-state 5.2.75 → 5.2.76-betaNB1

package/lib/view/taskManager/taskListView/taskListSelector.js

@@ -7,6 +7,7 @@ exports.getAllTasks = exports.getTaskListGroupedByPriority = exports.getTaskList
 const toolkit_1 = require("@reduxjs/toolkit");
 const orderBy_1 = __importDefault(require("lodash/orderBy"));
 const sortOrderPayload_1 = require("../../../commonPayloadTypes/sortOrderPayload");
+const common_1 = require("../../../commonStateTypes/common");
 const reduceFetchState_1 = require("../../../commonStateTypes/reduceFetchState");
 const tagSelector_1 = require("../../../entity/tag/tagSelector");
 const taskSelector_1 = require("../../../entity/task/taskSelector");
@@ -23,14 +24,18 @@ const taskList_1 = require("./taskList");
 const taskListFilterHelpers_1 = require("./taskListFilterHelpers");
 const sortTasksList = (tagState, tasksList, sortKey, sortOrder) => {
     const tasksInOrder = (0, orderBy_1.default)(tasksList, (task) => {
-        const tagsByIds = (0, tagSelector_1.getTagsByIds)(tagState, task.tagIds);
         switch (sortKey) {
             case 'dueDate':
                 return task.dueDate;
             case 'creationDate':
                 return task.createTime;
             case 'tag':
-                return tagsByIds[0]?.name ?? ''; // only one tag is supported
+                // Resolved HERE, not above the switch. Hoisted, it allocated a fresh
+                // array per task on every sort key, which made `tagState` a real
+                // dependency of the whole pipeline: tags arriving after first paint
+                // then rebuilt every group and re-rendered every row, moving that
+                // work out from behind the skeleton and into the user's hands.
+                return (0, tagSelector_1.getTagsByIds)(tagState, task.tagIds)[0]?.name ?? ''; // only one tag is supported
             case 'status':
                 return task.status.name;
             case 'priority':
@@ -75,8 +80,7 @@ const getTasksWithUserDetails = ({ taskListState, taskState, userState, userRole
     const sortedTaskList = sortTasksList(tagState, filteredTaskList, sortKey, sortOrder);
     return sortedTaskList;
 };
-const getTaskListGroupedByGroupName = ({ taskListState, taskState, taskGroupState, taskGroupViewState, userState, userRoleState, addressState, tagState, userGroupsState, }) => {
-    const { taskGroupsIds } = taskGroupViewState;
+const getTaskListGroupedByGroupName = ({ taskListState, taskState, taskGroupState, taskGroupsIds, userState, userRoleState, addressState, tagState, userGroupsState, }) => {
     const taskGroupsWithTasksList = taskGroupsIds
         .map((taskGroupId) => {
         const taskGroup = (0, taskGroupSelector_1.getTaskGroupById)(taskGroupState, taskGroupId);
@@ -118,6 +122,7 @@ const getTaskListGroupedByGroupName = ({ taskListState, taskState, taskGroupStat
     if (defaultTaskGroup != null) {
         sortedTaskGroupsWithTasksList.push(defaultTaskGroup);
     }
+    // Also hides deleted groups, which are empty as a side effect.
     return sortedTaskGroupsWithTasksList.filter((group) => group.tasks.length > 0);
 };
 const getTaskListGroupedByAssignees = ({ taskListState, taskState, userState, userRoleState, addressState, tagState, userGroupsState, }) => {
@@ -249,7 +254,7 @@ const getTaskListGroupedByDueDate = ({ taskListState, taskState, userState, user
     });
     return taskGroupsWithTasksList.filter((group) => group.tasks.length > 0);
 };
-const getTaskGroupsWithTaskList = ({ taskListState, taskState, userState, userRoleState, addressState, taskGroupState, taskGroupViewState, tagState, userGroupsState, }) => {
+const getTaskGroupsWithTaskList = ({ taskListState, taskState, userState, userRoleState, addressState, taskGroupState, taskGroupsIds, tagState, userGroupsState, }) => {
     const { groupByKey } = taskListState.uiState;
     if (groupByKey === 'groupName') {
         return getTaskListGroupedByGroupName({
@@ -259,7 +264,7 @@ const getTaskGroupsWithTaskList = ({ taskListState, taskState, userState, userRo
             userRoleState,
             addressState,
             taskGroupState,
-            taskGroupViewState,
+            taskGroupsIds,
             tagState,
             userGroupsState,
         });
@@ -318,24 +323,70 @@ const getTaskGroupsWithTaskList = ({ taskListState, taskState, userState, userRo
         userGroupsState,
     });
 };
-exports.getAllTasks = (0, toolkit_1.createSelector)((state) => state.taskListState, (state) => state.taskState, (state) => state.userState, (state) => state.userRoleState, (state) => state.userListViewState, (state) => state.addressState, (state) => state.taskGroupState, (state) => state.taskGroupViewState, (state) => state.tagViewState, (state) => state.tagState, (state) => state.taskGroupTemplateState, (state) => state.taskGroupTemplateViewState, (state) => state.userGroupsState, (state) => state.userGroupListViewState, (_state, isTaskTemplatesEnabled) => isTaskTemplatesEnabled, (taskListState, taskState, userState, userRoleState, userListViewState, addressState, taskGroupState, taskGroupViewState, tagViewState, tagState, taskGroupTemplateState, taskGroupTemplateViewState, userGroupsState, userGroupListViewState, isTaskTemplatesEnabled) => {
+/**
+ * Tags are STRUCTURAL only when they name a group or order the rows. Anywhere
+ * else they are decoration on a row that has already rendered.
+ */
+const tagsAreStructural = (uiState) => uiState.groupByKey === 'tag' || uiState.sortKey === 'tag';
+/** One frozen instance, so the "tags are not structural" input never changes. */
+const EMPTY_TAG_STATE = { tagByID: {} };
+/** Inputs are listed field by field, not as the slice: immer keeps each one
+ *  referentially stable when `localData` changes, so the memo holds. */
+const getTaskGroupsWithTaskListMemoized = (0, toolkit_1.createSelector)((state) => state.taskListState.uiState, (state) => state.taskListState.filters, (state) => state.taskListState.taskIdsByGroupsIds, (state) => state.taskListState.taskIdsByAssignees, (state) => state.taskListState.taskIdsByPriority, (state) => state.taskListState.taskIdsByStatus, (state) => state.taskListState.taskIdsByTags, (state) => state.taskListState.taskIdsByDueDate, (state) => state.taskState, (state) => state.userState, (state) => state.userRoleState, (state) => state.addressState, (state) => state.taskGroupState, 
+// `taskGroupsIds`, not the whole slice. `TaskGroupViewState` also carries
+// taskGroupCreationStatus / DeleteStatus / UpdateStatus and fetchState, and
+// none of them reach the board — but each transition produces a fresh slice
+// reference, so an inline group rename alone rebuilt the entire grouped list
+// twice (In-Progress, then Completed). That is the same needless rebuild this
+// change removes for the other slices.
+(state) => state.taskGroupViewState.taskGroupsIds, 
+// Only when tags are STRUCTURAL — they name a group or order the rows.
+// Otherwise a stable empty slice, so tags landing after first paint cannot
+// invalidate this memo and rebuild a board the user is already using.
+(state) => tagsAreStructural(state.taskListState.uiState)
+    ? state.tagState
+    : EMPTY_TAG_STATE, (state) => state.userGroupsState, (uiState, filters, taskIdsByGroupsIds, taskIdsByAssignees, taskIdsByPriority, taskIdsByStatus, taskIdsByTags, taskIdsByDueDate, taskState, userState, userRoleState, addressState, taskGroupState, taskGroupsIds, tagState, userGroupsState) => getTaskGroupsWithTaskList({
+    taskListState: {
+        uiState,
+        filters,
+        taskIdsByGroupsIds,
+        taskIdsByAssignees,
+        taskIdsByPriority,
+        taskIdsByStatus,
+        taskIdsByTags,
+        taskIdsByDueDate,
+    },
+    taskState,
+    userState,
+    userRoleState,
+    addressState,
+    taskGroupState,
+    taskGroupsIds,
+    tagState,
+    userGroupsState,
+}));
+exports.getAllTasks = (0, toolkit_1.createSelector)(
+// `taskState`, `taskGroupState`, `addressState` and `tagState` are gone from
+// here: the grouped list was their only consumer and it is memoised
+// separately now, so a tag edit or an address arriving no longer rebuilds
+// this view.
+(state) => state.taskListState, (state) => state.userState, (state) => state.userRoleState, (state) => state.userListViewState, (state) => state.taskGroupViewState, (state) => state.tagViewState, 
+// A BOOLEAN, not the tag slice: reselect compares primitives by value, so
+// this invalidates only when the map goes empty <-> non-empty.
+(state) => (0, common_1.hasAnyKey)(state.tagState.tagByID), (state) => state.taskGroupTemplateState, (state) => state.taskGroupTemplateViewState, (state) => state.userGroupsState, (state) => state.userGroupListViewState, getTaskGroupsWithTaskListMemoized, (_state, isTaskTemplatesEnabled) => isTaskTemplatesEnabled, (taskListState, userState, userRoleState, userListViewState, taskGroupViewState, tagViewState, hasAnyTag, taskGroupTemplateState, taskGroupTemplateViewState, userGroupsState, userGroupListViewState, taskGroupsWithTasksList, isTaskTemplatesEnabled) => {
     const { localData } = taskListState;
-    const taskGroupsWithTasksList = getTaskGroupsWithTaskList({
-        taskListState,
-        taskState,
-        userState,
-        userRoleState,
-        addressState,
-        taskGroupState,
-        taskGroupViewState,
-        tagState,
-        userGroupsState,
-    });
+    // Only the data the list is BUILT from. Tags decorate a row that can
+    // already be drawn.
     const fetchStateVariables = [
         taskListState,
         taskGroupViewState,
-        tagViewState,
     ];
+    // Structural tags are waited on. A failed fetch is bypassed only when tags
+    // are already in the store, because then the headers still render.
+    if (tagsAreStructural(taskListState.uiState) &&
+        !(hasAnyTag && tagViewState.fetchState === 'Error')) {
+        fetchStateVariables.push(tagViewState);
+    }
     if (isTaskTemplatesEnabled) {
         fetchStateVariables.push(taskGroupTemplateViewState);
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zeniai/client-epic-state",
-  "version": "5.2.75",
+  "version": "5.2.76-betaNB1",
   "description": "Shared module between Web & Mobile containing required abstractions for state management, async network communication. ",
   "main": "lib/index.js",
   "module": "lib/esm/index.js",