fix: prevent other tab to open the modal by using ref instead of local storage

src/Pages/GroupTasks/GroupTasksViewModal.js

@@ -13,11 +13,7 @@ export default function GroupTasksViewModal({ isOpen }) {
   const navigate = useNavigate();
   let { groupTaskId } = useParams();
 
-  const handleCancel = () => {
-    console.log("handleCancel", isOpen);
-    navigate(Constants.ROUTE_PATHS.GROUP_TASKS);
-  };
-
+  const handleCancel = () => navigate(Constants.ROUTE_PATHS.GROUP_TASKS);
   let currentGroupTask;
 
   webSocketContext.GroupTasks.forEach((groupTask) => {
@@ -95,8 +91,6 @@ export default function GroupTasksViewModal({ isOpen }) {
   };
 
   const handleTaskFailedTryAgainRunTaskStep = (taskStepId, step) => {
-    console.log("handleTaskFailedTryAgainRunTaskStep ", taskStepId);
-
     webSocketContext.SendSocketMessage(
       SentMessagesCommands.TaskFailedTryAgainRunTaskStep,
       {
@@ -121,9 +115,6 @@ export default function GroupTasksViewModal({ isOpen }) {
 
     groupTaskSteps.sort((a, b) => a.Step - b.Step);
 
-    console.log("currentGroupTask", currentGroupTask);
-    console.log("groupTaskSteps", groupTaskSteps);
-
     webSocketContext.CategoryGroups.forEach((categoryGroup) => {
       if (categoryGroup.category === currentGroupTask.Category) {
         categoryGroup.groups.forEach((group) => {
@@ -136,11 +127,7 @@ export default function GroupTasksViewModal({ isOpen }) {
 
     let stepItems = [];
 
-    console.log("groupTasks", groupTasks);
-
     groupTasks.forEach((groupTask, index) => {
-      console.log("groupTask123", groupTask, groupTaskSteps[index]);
-
       stepItems.push({
         key: index,
         title: groupTask.name,
@@ -207,12 +194,10 @@ export default function GroupTasksViewModal({ isOpen }) {
     >
       {webSocketContext.GroupTasks.map((groupTask) => {
         if (groupTask.Id === groupTaskId) {
-          console.log("groupTask", groupTask);
-
           let currentGroupTask = groupTask;
 
           return (
-            <>
+            <div key={groupTaskId}>
               <h1 style={{ color: "#e67e22", fontWeight: "bold" }}>
                 {currentGroupTask.GroupName}
               </h1>
@@ -226,7 +211,7 @@ export default function GroupTasksViewModal({ isOpen }) {
                 {FormatDatetime(currentGroupTask.StartedAt)}
               </p>
               <Steps direction="vertical" items={stepsItemHandler()} />
-            </>
+            </div>
           );
         }
         return "";

src/Pages/GroupTasks/GroupTypeSelectionModal.js

@@ -155,13 +155,7 @@ export default function GroupTypeSelectionModal({
 
     const rememberId = window.crypto.randomUUID();
 
-    localStorage.setItem("rememberId", rememberId);
-
-    console.log(
-      "starting task",
-      currentSelectedModalGroupType,
-      webSocketContext.groupTypeSelectionModalRememberId
-    );
+    webSocketContext.StartGroupTasksOpenModalRememberIdRef.current = rememberId;
 
     webSocketContext.SendSocketMessage(SentMessagesCommands.StartGroupTasks, {
       category: categoryGroup.category,

src/utils.js

@@ -95,6 +95,7 @@ export function WebSocketProvider({ children, userSession, setUserSession }) {
   const [groupTasks, setGroupTasks] = useState([]);
   const [groupTasksSteps, setGroupTasksSteps] = useState([]);
   const navigate = useNavigate();
+  const StartGroupTasksOpenModalRememberIdRef = useRef(null);
 
   let socket = null;
   const ws = useRef(null);
@@ -131,9 +132,10 @@ export function WebSocketProvider({ children, userSession, setUserSession }) {
         case ReceivedMessagesCommands.NewGroupTaskStarted:
           setGroupTasks((arr) => [...arr, body]);
 
-          if (body.RememberId === localStorage.getItem("rememberId")) {
+          if (
+            body.RememberId === StartGroupTasksOpenModalRememberIdRef.current
+          ) {
             navigate(`${Constants.ROUTE_PATHS.GROUP_TASKS}/${body.Id}`);
-            localStorage.removeItem("rememberId");
           }
           break;
         case ReceivedMessagesCommands.NewGroupTaskStep:
@@ -208,6 +210,8 @@ export function WebSocketProvider({ children, userSession, setUserSession }) {
         SendSocketMessage: SendSocketMessage,
         GroupTasksSteps: groupTasksSteps,
         setGroupTasksSteps: setGroupTasksSteps,
+        StartGroupTasksOpenModalRememberIdRef:
+          StartGroupTasksOpenModalRememberIdRef,
       }}
     >
       {children}