[Glitch] Replace CancelToken to AbortSignal

Port 219c38b921 to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>

app/javascript/flavours/glitch/actions/compose.js

@@ -1,19 +1,21 @@
-import api from '../api';
+import { isCancel } from 'axios';
-import { CancelToken, isCancel } from 'axios';
 import { throttle } from 'lodash';
+import { defineMessages } from 'react-intl';
+import api from 'flavours/glitch/api';
 import { search as emojiSearch } from 'flavours/glitch/features/emoji/emoji_mart_search_light';
-import { useEmoji } from './emojis';
+import { tagHistory } from 'flavours/glitch/settings';
-import { tagHistory } from '../settings';
 import { recoverHashtags } from 'flavours/glitch/utils/hashtag';
 import resizeImage from 'flavours/glitch/utils/resize_image';
+import { showAlert, showAlertForError } from './alerts';
+import { useEmoji } from './emojis';
 import { importFetchedAccounts } from './importer';
-import { updateTimeline } from './timelines';
-import { showAlertForError } from './alerts';
-import { showAlert } from './alerts';
 import { openModal } from './modal';
-import { defineMessages } from 'react-intl';
+import { updateTimeline } from './timelines';
 
-let cancelFetchComposeSuggestionsAccounts, cancelFetchComposeSuggestionsTags;
+/** @type {AbortController | undefined} */
+let fetchComposeSuggestionsAccountsController;
+/** @type {AbortController | undefined} */
+let fetchComposeSuggestionsTagsController;
 
 export const COMPOSE_CHANGE          = 'COMPOSE_CHANGE';
 export const COMPOSE_CYCLE_ELEFRIEND = 'COMPOSE_CYCLE_ELEFRIEND';
@@ -472,8 +474,8 @@ export function undoUploadCompose(media_id) {
 };
 
 export function clearComposeSuggestions() {
-  if (cancelFetchComposeSuggestionsAccounts) {
+  if (fetchComposeSuggestionsAccountsController) {
-    cancelFetchComposeSuggestionsAccounts();
+    fetchComposeSuggestionsAccountsController.abort();
   }
   return {
     type: COMPOSE_SUGGESTIONS_CLEAR,
@@ -481,14 +483,14 @@ export function clearComposeSuggestions() {
 };
 
 const fetchComposeSuggestionsAccounts = throttle((dispatch, getState, token) => {
-  if (cancelFetchComposeSuggestionsAccounts) {
+  if (fetchComposeSuggestionsAccountsController) {
-    cancelFetchComposeSuggestionsAccounts();
+    fetchComposeSuggestionsAccountsController.abort();
   }
 
+  fetchComposeSuggestionsAccountsController = new AbortController();
+
   api(getState).get('/api/v1/accounts/search', {
-    cancelToken: new CancelToken(cancel => {
+    signal: fetchComposeSuggestionsAccountsController.signal,
-      cancelFetchComposeSuggestionsAccounts = cancel;
-    }),
 
     params: {
       q: token.slice(1),
@@ -511,16 +513,16 @@ const fetchComposeSuggestionsEmojis = (dispatch, getState, token) => {
 };
 
 const fetchComposeSuggestionsTags = throttle((dispatch, getState, token) => {
-  if (cancelFetchComposeSuggestionsTags) {
+  if (fetchComposeSuggestionsTagsController) {
-    cancelFetchComposeSuggestionsTags();
+    fetchComposeSuggestionsTagsController.abort();
   }
 
   dispatch(updateSuggestionTags(token));
 
+  fetchComposeSuggestionsTagsController = new AbortController();
+
   api(getState).get('/api/v2/search', {
-    cancelToken: new CancelToken(cancel => {
+    signal: fetchComposeSuggestionsTagsController.signal,
-      cancelFetchComposeSuggestionsTags = cancel;
-    }),
 
     params: {
       type: 'hashtags',

app/javascript/flavours/glitch/api.js

@@ -1,20 +1,31 @@
+// @ts-check
+
 import axios from 'axios';
 import LinkHeader from 'http-link-header';
 import ready from './ready';
 
+/**
+ * @param {import('axios').AxiosResponse} response
+ * @returns {LinkHeader}
+ */
 export const getLinks = response => {
   const value = response.headers.link;
 
   if (!value) {
-    return { refs: [] };
+    return new LinkHeader();
   }
 
   return LinkHeader.parse(value);
 };
 
+/** @type {import('axios').RawAxiosRequestHeaders} */
 const csrfHeader = {};
 
+/**
+ * @returns {void}
+ */
 const setCSRFHeader = () => {
+  /** @type {HTMLMetaElement | null} */
   const csrfToken = document.querySelector('meta[name=csrf-token]');
 
   if (csrfToken) {
@@ -24,6 +35,10 @@ const setCSRFHeader = () => {
 
 ready(setCSRFHeader);
 
+/**
+ * @param {() => import('immutable').Map} getState
+ * @returns {import('axios').RawAxiosRequestHeaders}
+ */
 const authorizationHeaderFromState = getState => {
   const accessToken = getState && getState().getIn(['meta', 'access_token'], '');
 
@@ -36,17 +51,25 @@ const authorizationHeaderFromState = getState => {
   };
 };
 
-export default getState => axios.create({
+/**
+ * @param {() => import('immutable').Map} getState
+ * @returns {import('axios').AxiosInstance}
+ */
+export default function api(getState) {
+  return axios.create({
     headers: {
       ...csrfHeader,
       ...authorizationHeaderFromState(getState),
     },
 
-  transformResponse: [function (data) {
+    transformResponse: [
+      function (data) {
         try {
           return JSON.parse(data);
-    } catch(Exception) {
+        } catch {
           return data;
         }
-  }],
+      },
+    ],
   });
+}

app/javascript/flavours/glitch/extra_polyfills.js

@@ -1,3 +1,4 @@
+import 'abortcontroller-polyfill/dist/abortcontroller-polyfill-only';
 import 'intersection-observer';
 import 'requestidlecallback';
 import objectFitImages  from 'object-fit-images';

app/javascript/flavours/glitch/load_polyfills.js

@@ -26,6 +26,7 @@ function loadPolyfills() {
   // Edge does not have requestIdleCallback and object-fit CSS property.
   // This avoids shipping them all the polyfills.
   const needsExtraPolyfills = !(
+    window.AbortController &&
     window.IntersectionObserver &&
     window.IntersectionObserverEntry &&
     'isIntersecting' in IntersectionObserverEntry.prototype &&