Abort asynchronous calls using AbortController

Author: leoraba

components/pages/submission/Environmental/Details/index.tsx

@@ -60,9 +60,10 @@ const SubmissionDetails = ({ ID }: SubmissionDetailsProps): ReactElement => {
 
 	// gets the initial status for all the uploads
 	useEffect(() => {
+		const controller = new AbortController();
 		async function getDetailsSubmission() {
 			try {
-				const submissionResponse = await fetchSubmissionById(ID);
+				const submissionResponse = await fetchSubmissionById(ID, { signal: controller.signal });
 
 				if (!submissionResponse?.data || !('inserts' in submissionResponse.data)) {
 					console.error('Unexpected response getting submission details', submissionResponse);
@@ -109,21 +110,28 @@ const SubmissionDetails = ({ ID }: SubmissionDetailsProps): ReactElement => {
 		if (token && totalUploads === 0) {
 			getDetailsSubmission();
 		}
+		return () => {
+			// Abort the request when the component unmounts or when a dependency changes
+			controller.abort();
+		};
 	}, [token, ID]);
 
 	// get status updates if any are available from Submission Service
 	useEffect(() => {
+		const controller = new AbortController();
 		async function commit() {
 			// Commit submission
-			const commitSubmissionResponse = await commitSubmission(ID);
+			const commitSubmissionResponse = await commitSubmission(ID, { signal: controller.signal });
 			if (commitSubmissionResponse.status === UploadStatus.PROCESSING) {
 				setSubmissionStatus(SubmissionStatus.COMMITTED);
 			}
 		}
 
 		async function trackPendingData() {
 			try {
-				const analysisIds = await getAnalysisIds(organization, submissionDetails.PROCESSING);
+				const analysisIds = await getAnalysisIds(organization, submissionDetails.PROCESSING, {
+					signal: controller.signal,
+				});
 
 				analysisIds.forEach((analysis) => {
 					submissionDetailsDispatch({
@@ -154,6 +162,10 @@ const SubmissionDetails = ({ ID }: SubmissionDetailsProps): ReactElement => {
 					break;
 			}
 		}
+		return () => {
+			// Abort the request when the component unmounts or when a dependency changes
+			controller.abort();
+		};
 	}, [dataIsPending, submissionStatus, ID]);
 
 	return (

components/pages/submission/Environmental/PreviousSubmissions/index.tsx

@@ -40,15 +40,21 @@ const PreviousSubmissions = (): ReactElement => {
 	const [previousSubmissions, setPreviousSubmissions] = useState<DataRecord[]>([]);
 
 	useEffect(() => {
+		const controller = new AbortController();
 		token &&
 			userHasWriteScopes &&
-			fetchPreviousSubmissions()
+			fetchPreviousSubmissions({ signal: controller.signal })
 				.then((response) => {
 					response.data && setPreviousSubmissions(response.data);
 				})
 				.catch((error) => {
 					console.error('Error fetching previous submissions:', error);
 				});
+
+		return () => {
+			// Abort the request when the component unmounts or when a dependency changes
+			controller.abort();
+		};
 	}, [token]);
 
 	return (

global/hooks/useEnvironmentalData/index.ts

@@ -52,11 +52,13 @@ const useEnvironmentalData = (origin: string) => {
 		method = 'GET',
 		headers,
 		body,
+		signal,
 	}: {
 		url: string;
 		headers?: HeadersInit;
 		method: string;
 		body?: BodyInit;
+		signal?: AbortSignal;
 	}) => {
 		setAwaitingResponse(true);
 
@@ -65,6 +67,7 @@ const useEnvironmentalData = (origin: string) => {
 				headers,
 				method,
 				body,
+				signal,
 			});
 			const stream = response?.body;
 			return stream?.constructor?.name === 'ReadableStream'
@@ -85,7 +88,10 @@ const useEnvironmentalData = (origin: string) => {
 		}
 	};
 
-	const commitSubmission = async (id: string): Promise<CommitSubmissionResult> => {
+	const commitSubmission = async (
+		id: string,
+		{ signal }: { signal?: AbortSignal } = {},
+	): Promise<CommitSubmissionResult> => {
 		return handleRequest({
 			url: urlJoin(
 				NEXT_PUBLIC_ENVIRONMENTAL_SUBMISSION_API_URL,
@@ -96,6 +102,7 @@ const useEnvironmentalData = (origin: string) => {
 				id,
 			),
 			method: 'POST',
+			signal,
 		});
 	};
 
@@ -104,14 +111,20 @@ const useEnvironmentalData = (origin: string) => {
 	 * @param id
 	 * @returns
 	 */
-	const fetchSubmissionById = async (id: string): Promise<Submission> => {
+	const fetchSubmissionById = async (
+		id: string,
+		{ signal }: { signal?: AbortSignal } = {},
+	): Promise<Submission> => {
 		return handleRequest({
 			url: urlJoin(NEXT_PUBLIC_ENVIRONMENTAL_SUBMISSION_API_URL, 'submission', id),
 			method: 'GET',
+			signal,
 		});
 	};
 
-	const fetchPreviousSubmissions = async (): Promise<{ data: DataRecord[] }> => {
+	const fetchPreviousSubmissions = async ({ signal }: { signal?: AbortSignal } = {}): Promise<{
+		data: DataRecord[];
+	}> => {
 		const response = await handleRequest({
 			url: urlJoin(
 				NEXT_PUBLIC_ENVIRONMENTAL_SUBMISSION_API_URL,
@@ -120,6 +133,7 @@ const useEnvironmentalData = (origin: string) => {
 				NEXT_PUBLIC_ENVIRONMENTAL_SUBMISSION_CATEGORY_ID,
 			),
 			method: 'GET',
+			signal,
 		});
 
 		return { data: response.records };
@@ -181,7 +195,11 @@ const useEnvironmentalData = (origin: string) => {
 	 * @param records
 	 * @returns
 	 */
-	const getAnalysisIds = async (organization: string, records: UploadData[]) => {
+	const getAnalysisIds = async (
+		organization: string,
+		records: UploadData[],
+		{ signal }: { signal?: AbortSignal } = {},
+	) => {
 		// Construct query parameters
 		const queryParams = new URLSearchParams({
 			entityName: 'sample',
@@ -217,6 +235,7 @@ const useEnvironmentalData = (origin: string) => {
 			method: 'POST',
 			headers: { 'Content-Type': 'application/json' },
 			body: JSON.stringify(sqonFilter),
+			signal,
 		});
 
 		if (!queryResponse.records) {