update total pages pagination on new group task creation

src/Contexts/GroupTasksContext.js

@@ -5,6 +5,10 @@ const preview = {
   groupTasks: [],
   groupTasksSteps: [],
   startGroupTasksOpenModalRememberIdRef: null,
+  paginationPage: 1,
+  totalPages: 0,
+  previousParamCategory: null,
+  paginationPageRef: null,
 };
 
 const GroupTasksContext = createContext(preview);
@@ -19,6 +23,11 @@ export function GroupTasksProvider({ children }) {
   // will be set on viewing the steps of a group task
   const [groupTasksSteps, setGroupTasksSteps] = useState([]);
   const startGroupTasksOpenModalRememberIdRef = useRef(null);
+  // pagination
+  const [paginationPage, setPaginationPage] = useState(1);
+  const paginationPageRef = useRef(paginationPage);
+  const [totalPages, setTotalPages] = useState(0);
+  const previousParamCategory = useRef(null);
 
   return (
     <GroupTasksContext.Provider
@@ -30,6 +39,12 @@ export function GroupTasksProvider({ children }) {
         groupTasksSteps,
         setGroupTasksSteps,
         startGroupTasksOpenModalRememberIdRef,
+        paginationPage,
+        setPaginationPage,
+        totalPages,
+        setTotalPages,
+        previousParamCategory,
+        paginationPageRef,
       }}
     >
       {children}

src/Handlers/WebSocketMessageHandler.js

@@ -98,14 +98,29 @@ export function handleWebSocketMessage(
       sideBarContext.setConnectedUsers(body);
       break;
     case ReceivedMessagesCommands.NewGroupTaskStarted:
-      groupTasksContext.setGroupTasks((arr) => [...arr, body]);
+      // add new group task to list and remove latest group task if list length will be greater than 5
+      if (groupTasksContext.paginationPageRef.current === 1) {
+        groupTasksContext.setGroupTasks((arr) => {
+          const newArr = [...arr];
+
+          if (newArr.length === 5) {
+            newArr.pop();
+          }
+
+          newArr.unshift(body.GroupTask);
+
+          return newArr;
+        });
+      }
+
+      groupTasksContext.setTotalPages(body.TotalPages);
 
       if (
-        body.RememberId ===
+        body.GroupTask.RememberId ===
         groupTasksContext.startGroupTasksOpenModalRememberIdRef.current
       ) {
         navigate(
-          `${Constants.ROUTE_PATHS.GROUP_TASKS}${body.Category}/view/${body.Id}`
+          `${Constants.ROUTE_PATHS.GROUP_TASKS}${body.GroupTask.Category}/view/${body.GroupTask.Id}`
         );
       }
       break;

src/Pages/GroupTasks/Overview/GroupTasksViewModal.js

@@ -552,6 +552,57 @@ export default function GroupTasksViewModal({ isOpen }) {
     return stepItems;
   };
 
+  const GlobalInputs = () => {
+    if (
+      currentGroupTask.current.GlobalInputs === null ||
+      currentGroupTask.current.GlobalInputs === "[]"
+    )
+      return <></>;
+
+    return (
+      <>
+        <h2
+          style={{
+            fontWeight: "bold",
+            color: Constants.COLORS.SECONDARY,
+          }}
+        >
+          {t("groupTasks.groupTasksViewModal.popover.specifiedGlobalInputs")}
+        </h2>
+
+        <span>
+          {JSON.parse(currentGroupTask.current.GlobalInputs).map(
+            (globalInput) => {
+              return (
+                <span key={globalInput.parameterName + globalInput.value}>
+                  <span style={{ fontWeight: "bold" }}>
+                    {
+                      groupTasksContext.categoryGroup.groups
+                        .find(
+                          (group) =>
+                            group.id === currentGroupTask.current.GroupId
+                        )
+                        .globalInputs.find(
+                          (gI) => gI.parameterName === globalInput.parameterName
+                        ).displayName
+                    }
+                    :{" "}
+                  </span>
+                  <span>
+                    {globalInput.value !== ""
+                      ? globalInput.value
+                      : Constants.TEXT_EMPTY_PLACEHOLDER}
+                  </span>
+                  <br />
+                </span>
+              );
+            }
+          )}
+        </span>
+      </>
+    );
+  };
+
   return (
     <MyModal isOpen={isOpen} onCancel={handleCancel}>
       {notificationContextHolder}
@@ -617,57 +668,7 @@ export default function GroupTasksViewModal({ isOpen }) {
                     )}
                   </p>
 
-                  {currentGroupTask.current.GlobalInputs !== "[]" ? (
+                  <GlobalInputs />
-                    <>
-                      <h2
-                        style={{
-                          fontWeight: "bold",
-                          color: Constants.COLORS.SECONDARY,
-                        }}
-                      >
-                        {t(
-                          "groupTasks.groupTasksViewModal.popover.specifiedGlobalInputs"
-                        )}
-                      </h2>
-
-                      <span>
-                        {JSON.parse(currentGroupTask.current.GlobalInputs).map(
-                          (globalInput) => {
-                            return (
-                              <span
-                                key={
-                                  globalInput.parameterName + globalInput.value
-                                }
-                              >
-                                <span style={{ fontWeight: "bold" }}>
-                                  {
-                                    groupTasksContext.categoryGroup.groups
-                                      .find(
-                                        (group) =>
-                                          group.id ===
-                                          currentGroupTask.current.GroupId
-                                      )
-                                      .globalInputs.find(
-                                        (gI) =>
-                                          gI.parameterName ===
-                                          globalInput.parameterName
-                                      ).displayName
-                                  }
-                                  :{" "}
-                                </span>
-                                <span>
-                                  {globalInput.value !== ""
-                                    ? globalInput.value
-                                    : Constants.TEXT_EMPTY_PLACEHOLDER}
-                                </span>
-                                <br />
-                              </span>
-                            );
-                          }
-                        )}
-                      </span>
-                    </>
-                  ) : null}
                 </>
               }
             >

src/Pages/GroupTasks/Overview/index.js

@@ -25,9 +25,6 @@ export default function GroupTasks({ isGroupTasksViewModalOpen }) {
   const [currentSelectedModalGroupType, setCurrentSelectedModalGroupType] =
     useState();
   const { t } = useTranslation();
-  const [paginationPage, setPaginationPage] = useState(1);
-  const totalPages = useRef(0);
-  const previousParamCategory = useRef(null);
 
   const showGroupTypeSelectionModal = (categoryGroup) => {
     setCurrentCategoryGroup(categoryGroup);
@@ -51,36 +48,44 @@ export default function GroupTasks({ isGroupTasksViewModalOpen }) {
 
   const fetchGroupTasks = (page) => {
     myFetch(`/grouptasks/${paramCategory}?page=${page}`, "GET").then((data) => {
-      totalPages.current = data.TotalPages;
+      groupTasksContext.setTotalPages(data.TotalPages);
 
       groupTasksContext.setCategoryGroup(data.CategoryGroup);
       groupTasksContext.setGroupTasks(data.GroupTasks);
     });
   };
 
+  const onPaginationChange = (page) => {
+    groupTasksContext.setPaginationPage(page);
+    groupTasksContext.paginationPageRef.current = page;
+  };
+
   useEffect(() => {
     // initially previousParamCategory.current is null on first render
-    if (previousParamCategory.current === null) {
+    if (groupTasksContext.previousParamCategory.current === null) {
-      previousParamCategory.current = paramCategory;
+      groupTasksContext.previousParamCategory.current = paramCategory;
       return;
     }
 
-    if (paramCategory !== previousParamCategory.current) {
+    if (paramCategory !== groupTasksContext.previousParamCategory.current) {
-      previousParamCategory.current = paramCategory;
+      groupTasksContext.previousParamCategory.current = paramCategory;
 
-      if (paginationPage === 1) {
+      if (groupTasksContext.paginationPage === 1) {
         // if we are on page 1, we need to fetch the new category group
         fetchGroupTasks(1);
       } else {
         // if we are not on page 1, we need to reset the page to 1 and this will trigger the useEffect below
-        setPaginationPage(1);
+        onPaginationChange(1);
       }
     } else {
-      fetchGroupTasks(paginationPage);
+      fetchGroupTasks(groupTasksContext.paginationPage);
     }
   }, [paramCategory]);
 
-  useEffect(() => fetchGroupTasks(paginationPage), [paginationPage]);
+  useEffect(
+    () => fetchGroupTasks(groupTasksContext.paginationPage),
+    [groupTasksContext.paginationPage]
+  );
 
   return (
     <>
@@ -127,9 +132,9 @@ export default function GroupTasks({ isGroupTasksViewModalOpen }) {
               />
 
               <MyPagination
-                paginationPage={paginationPage}
+                paginationPage={groupTasksContext.paginationPage}
-                setPaginationPage={(page) => setPaginationPage(page)}
+                setPaginationPage={(page) => onPaginationChange(page)}
-                totalPages={totalPages.current}
+                totalPages={groupTasksContext.totalPages}
               />
 
               {hasPermission(

src/utils.js

@@ -74,6 +74,8 @@ export const Constants = {
     MAX_ROLE_DESCRIPTION: 80,
     MAX_EQUIPMENT_DOCUMENTATION_TITLE_LENGTH: 60,
     MAX_EQUIPMENT_DOCUMENTATION_NOTE_LENGTH: 2000,
+    EQUIPMENT_DOCUMENTATIONS_PAGINATION_LIMIT: 3,
+    GROUP_TASKS_PAGINATION_LIMIT: 5,
   },
   MAX_AVATAR_SIZE: 5 * 1024 * 1024,
   ACCEPTED_AVATAR_FILE_TYPES: [