From e301cfb4637ff0ef75de066d929d52c39ddfb7ea Mon Sep 17 00:00:00 2001 From: Yamagishi Kazutoshi Date: Fri, 14 Oct 2022 10:16:37 +0900 Subject: [PATCH] [Glitch] Replace `CancelToken` to `AbortSignal` Port 219c38b9217d6dbb1621c27f64e9bf86bf92ec19 to glitch-soc Signed-off-by: Claire --- .../flavours/glitch/actions/compose.js | 44 +++++++-------- app/javascript/flavours/glitch/api.js | 53 +++++++++++++------ .../flavours/glitch/extra_polyfills.js | 1 + .../flavours/glitch/load_polyfills.js | 1 + 4 files changed, 63 insertions(+), 36 deletions(-) diff --git a/app/javascript/flavours/glitch/actions/compose.js b/app/javascript/flavours/glitch/actions/compose.js index 02aa4f144c..56a3b7b5ff 100644 --- a/app/javascript/flavours/glitch/actions/compose.js +++ b/app/javascript/flavours/glitch/actions/compose.js @@ -1,19 +1,21 @@ -import api from '../api'; -import { CancelToken, isCancel } from 'axios'; +import { 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 '../settings'; +import { tagHistory } from 'flavours/glitch/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) { - cancelFetchComposeSuggestionsAccounts(); + if (fetchComposeSuggestionsAccountsController) { + fetchComposeSuggestionsAccountsController.abort(); } return { type: COMPOSE_SUGGESTIONS_CLEAR, @@ -481,14 +483,14 @@ export function clearComposeSuggestions() { }; const fetchComposeSuggestionsAccounts = throttle((dispatch, getState, token) => { - if (cancelFetchComposeSuggestionsAccounts) { - cancelFetchComposeSuggestionsAccounts(); + if (fetchComposeSuggestionsAccountsController) { + fetchComposeSuggestionsAccountsController.abort(); } + fetchComposeSuggestionsAccountsController = new AbortController(); + api(getState).get('/api/v1/accounts/search', { - cancelToken: new CancelToken(cancel => { - cancelFetchComposeSuggestionsAccounts = cancel; - }), + signal: fetchComposeSuggestionsAccountsController.signal, params: { q: token.slice(1), @@ -511,16 +513,16 @@ const fetchComposeSuggestionsEmojis = (dispatch, getState, token) => { }; const fetchComposeSuggestionsTags = throttle((dispatch, getState, token) => { - if (cancelFetchComposeSuggestionsTags) { - cancelFetchComposeSuggestionsTags(); + if (fetchComposeSuggestionsTagsController) { + fetchComposeSuggestionsTagsController.abort(); } dispatch(updateSuggestionTags(token)); + fetchComposeSuggestionsTagsController = new AbortController(); + api(getState).get('/api/v2/search', { - cancelToken: new CancelToken(cancel => { - cancelFetchComposeSuggestionsTags = cancel; - }), + signal: fetchComposeSuggestionsTagsController.signal, params: { type: 'hashtags', diff --git a/app/javascript/flavours/glitch/api.js b/app/javascript/flavours/glitch/api.js index 645ef65006..6bbddbef66 100644 --- a/app/javascript/flavours/glitch/api.js +++ b/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({ - headers: { - ...csrfHeader, - ...authorizationHeaderFromState(getState), - }, - - transformResponse: [function (data) { - try { - return JSON.parse(data); - } catch(Exception) { - return data; - } - }], -}); +/** + * @param {() => import('immutable').Map} getState + * @returns {import('axios').AxiosInstance} + */ +export default function api(getState) { + return axios.create({ + headers: { + ...csrfHeader, + ...authorizationHeaderFromState(getState), + }, + + transformResponse: [ + function (data) { + try { + return JSON.parse(data); + } catch { + return data; + } + }, + ], + }); +} diff --git a/app/javascript/flavours/glitch/extra_polyfills.js b/app/javascript/flavours/glitch/extra_polyfills.js index 3acc55abd6..0d45c23b04 100644 --- a/app/javascript/flavours/glitch/extra_polyfills.js +++ b/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'; diff --git a/app/javascript/flavours/glitch/load_polyfills.js b/app/javascript/flavours/glitch/load_polyfills.js index 73eedc9dcc..cc5bcd18f1 100644 --- a/app/javascript/flavours/glitch/load_polyfills.js +++ b/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 &&