Refactor task action pages to use react-query

- Added error boundaries to enhance error handling on map and validation action pages. The route error boundary now covers locked tasks, project summary, and project tasks. Also  replaces the previous toast implementation for locked tasks.
- Improved API interactions in the `CompletionTabForMapping` and `CompletionTabForValidation` components by migrating all POST requests to utilize the `useMutation hook` from `@tanstack/react-query`.
- Implemented error toasting for failed POST operations. Now, when any POST request encounters an error, an error toast will be displayed. For split operations, the previous modal error message will be shown only if the error `SubCode` matches the specific condition `SmallToSplit`.
- When fetching priority areas encounters an error, an error toast will be displayed.

frontend/src/api/projects.js

@@ -158,6 +158,33 @@ export const useTaskDetail = (projectId, taskId, shouldRefetch) => {
   });
 };
 
+// MAPPING
+export const stopMapping = (projectId, taskId, comment, token, locale = 'en') => {
+  return api(token, locale).post(`projects/${projectId}/tasks/actions/stop-mapping/${taskId}/`, {
+    comment,
+  });
+};
+
+export const splitTask = (projectId, taskId, token, locale) => {
+  return api(token, locale).post(`projects/${projectId}/tasks/actions/split/${taskId}/`);
+};
+
+export const submitMappingTask = (url, payload, token, locale) => {
+  return api(token, locale).post(url, payload);
+};
+
+// VALIDATION
+export const stopValidation = (projectId, payload, token, locale = 'en') => {
+  return api(token, locale).post(`projects/${projectId}/tasks/actions/stop-validation/`, payload);
+};
+
+export const submitValidationTask = (projectId, payload, token, locale) => {
+  return api(token, locale).post(
+    `projects/${projectId}/tasks/actions/unlock-after-validation/`,
+    payload,
+  );
+};
+
 const backendToQueryConversion = {
   difficulty: 'difficulty',
   campaign: 'campaign',

frontend/src/api/user.js

@@ -18,5 +18,6 @@ export const useLockedTasksQuery = () => {
     queryFn: fetchLockedTasks,
     select: (data) => data.data?.tasks,
     cacheTime: 0,
+    useErrorBoundary: true,
   });
 };

frontend/src/components/taskSelection/action.js

@@ -3,6 +3,7 @@ import { useSelector } from 'react-redux';
 import { useNavigate, useLocation } from 'react-router-dom';
 import ReactPlaceholder from 'react-placeholder';
 import Popup from 'reactjs-popup';
+import toast from 'react-hot-toast';
 import { FormattedMessage, useIntl } from 'react-intl';
 
 import messages from './messages';
@@ -80,7 +81,9 @@ export function TaskMapAction({ project, tasks, activeTasks, getTasks, action, e
   timer.setSeconds(timer.getSeconds() + activeTask.autoUnlockSeconds);
   //eslint-disable-next-line
   const { data: taskDetail } = useTaskDetail(project.projectId, tasksIds[0]);
-  const { data: priorityArea } = usePriorityAreasQuery(project.projectId);
+  const { data: priorityArea, isError: isPriorityAreaError } = usePriorityAreasQuery(
+    project.projectId,
+  );
 
   const contributors = taskDetail?.taskHistory
     ? getTaskContributors(taskDetail.taskHistory, userDetails.username)
@@ -158,6 +161,12 @@ export function TaskMapAction({ project, tasks, activeTasks, getTasks, action, e
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
+  useEffect(() => {
+    isPriorityAreaError &&
+      !['ID', 'RAPID'].includes(editor) &&
+      toast.error(<FormattedMessage {...messages.priorityAreasLoadingError} />);
+  }, [editor, isPriorityAreaError]);
+
   const callEditor = async (arr) => {
     setIsJosmError(false);
     if (!disabled) {
@@ -366,6 +375,12 @@ export function TaskMapAction({ project, tasks, activeTasks, getTasks, action, e
                             )}
                             closeOnEscape={true}
                             closeOnDocumentClick={true}
+                            onOpen={() => {
+                              isPriorityAreaError &&
+                                toast.error(
+                                  <FormattedMessage {...messages.priorityAreasLoadingError} />,
+                                );
+                            }}
                           >
                             {(close) => (
                               <div className="vh-75">