/g, '\n').replace(/<\/p>/g, '\n\n');
@@ -26,12 +23,20 @@ export function normalizeFilterResult(result) {
export function normalizeStatus(status, normalOldStatus) {
const normalStatus = { ...status };
+
normalStatus.account = status.account.id;
if (status.reblog && status.reblog.id) {
normalStatus.reblog = status.reblog.id;
}
+ if (status.quote?.quoted_status ?? status.quote?.quoted_status_id) {
+ normalStatus.quote = {
+ ...status.quote,
+ quoted_status: status.quote.quoted_status?.id ?? status.quote?.quoted_status_id,
+ };
+ }
+
if (status.poll && status.poll.id) {
normalStatus.poll = status.poll.id;
}
@@ -80,6 +85,17 @@ export function normalizeStatus(status, normalOldStatus) {
normalStatus.contentHtml = emojify(normalStatus.content, emojiMap);
normalStatus.spoilerHtml = emojify(escapeTextContentForBrowser(spoilerText), emojiMap);
normalStatus.hidden = expandSpoilers ? false : spoilerText.length > 0 || normalStatus.sensitive;
+
+ if (normalStatus.url && !(normalStatus.url.startsWith('http://') || normalStatus.url.startsWith('https://'))) {
+ normalStatus.url = null;
+ }
+
+ normalStatus.url ||= normalStatus.uri;
+
+ normalStatus.media_attachments.forEach(item => {
+ if (item.remote_url && !(item.remote_url.startsWith('http://') || item.remote_url.startsWith('https://')))
+ item.remote_url = null;
+ });
}
if (normalOldStatus) {
@@ -112,38 +128,6 @@ export function normalizeStatusTranslation(translation, status) {
return normalTranslation;
}
-export function normalizePoll(poll, normalOldPoll) {
- const normalPoll = { ...poll };
- const emojiMap = makeEmojiMap(poll.emojis);
-
- normalPoll.options = poll.options.map((option, index) => {
- const normalOption = {
- ...option,
- voted: poll.own_votes && poll.own_votes.includes(index),
- titleHtml: emojify(escapeTextContentForBrowser(option.title), emojiMap),
- };
-
- if (normalOldPoll && normalOldPoll.getIn(['options', index, 'title']) === option.title) {
- normalOption.translation = normalOldPoll.getIn(['options', index, 'translation']);
- }
-
- return normalOption;
- });
-
- return normalPoll;
-}
-
-export function normalizePollOptionTranslation(translation, poll) {
- const emojiMap = makeEmojiMap(poll.get('emojis').toJS());
-
- const normalTranslation = {
- ...translation,
- titleHtml: emojify(escapeTextContentForBrowser(translation.title), emojiMap),
- };
-
- return normalTranslation;
-}
-
export function normalizeAnnouncement(announcement) {
const normalAnnouncement = { ...announcement };
const emojiMap = makeEmojiMap(normalAnnouncement.emojis);
diff --git a/app/javascript/mastodon/actions/importer/polls.ts b/app/javascript/mastodon/actions/importer/polls.ts
new file mode 100644
index 0000000000..5bbe7d57d6
--- /dev/null
+++ b/app/javascript/mastodon/actions/importer/polls.ts
@@ -0,0 +1,7 @@
+import { createAction } from '@reduxjs/toolkit';
+
+import type { Poll } from 'mastodon/models/poll';
+
+export const importPolls = createAction<{ polls: Poll[] }>(
+ 'poll/importMultiple',
+);
diff --git a/app/javascript/mastodon/actions/lists.js b/app/javascript/mastodon/actions/lists.js
index f9abc2e769..a4bbfff229 100644
--- a/app/javascript/mastodon/actions/lists.js
+++ b/app/javascript/mastodon/actions/lists.js
@@ -4,14 +4,12 @@ export const LIST_FETCH_REQUEST = 'LIST_FETCH_REQUEST';
export const LIST_FETCH_SUCCESS = 'LIST_FETCH_SUCCESS';
export const LIST_FETCH_FAIL = 'LIST_FETCH_FAIL';
-export const LISTS_FETCH_REQUEST = 'LISTS_FETCH_REQUEST';
-export const LISTS_FETCH_SUCCESS = 'LISTS_FETCH_SUCCESS';
-export const LISTS_FETCH_FAIL = 'LISTS_FETCH_FAIL';
-
export const LIST_DELETE_REQUEST = 'LIST_DELETE_REQUEST';
export const LIST_DELETE_SUCCESS = 'LIST_DELETE_SUCCESS';
export const LIST_DELETE_FAIL = 'LIST_DELETE_FAIL';
+export * from './lists_typed';
+
export const fetchList = id => (dispatch, getState) => {
if (getState().getIn(['lists', id])) {
return;
@@ -40,28 +38,6 @@ export const fetchListFail = (id, error) => ({
error,
});
-export const fetchLists = () => (dispatch) => {
- dispatch(fetchListsRequest());
-
- api().get('/api/v1/lists')
- .then(({ data }) => dispatch(fetchListsSuccess(data)))
- .catch(err => dispatch(fetchListsFail(err)));
-};
-
-export const fetchListsRequest = () => ({
- type: LISTS_FETCH_REQUEST,
-});
-
-export const fetchListsSuccess = lists => ({
- type: LISTS_FETCH_SUCCESS,
- lists,
-});
-
-export const fetchListsFail = error => ({
- type: LISTS_FETCH_FAIL,
- error,
-});
-
export const deleteList = id => (dispatch) => {
dispatch(deleteListRequest(id));
diff --git a/app/javascript/mastodon/actions/lists_typed.ts b/app/javascript/mastodon/actions/lists_typed.ts
index ccc5c11c89..f2c468e10a 100644
--- a/app/javascript/mastodon/actions/lists_typed.ts
+++ b/app/javascript/mastodon/actions/lists_typed.ts
@@ -1,4 +1,4 @@
-import { apiCreate, apiUpdate } from 'mastodon/api/lists';
+import { apiCreate, apiUpdate, apiGetLists } from 'mastodon/api/lists';
import type { List } from 'mastodon/models/list';
import { createDataLoadingThunk } from 'mastodon/store/typed_functions';
@@ -11,3 +11,7 @@ export const updateList = createDataLoadingThunk(
'list/update',
(list: Partial) => apiUpdate(list),
);
+
+export const fetchLists = createDataLoadingThunk('lists/fetch', () =>
+ apiGetLists(),
+);
diff --git a/app/javascript/mastodon/actions/modal.ts b/app/javascript/mastodon/actions/modal.ts
index ab03e46765..49af176a11 100644
--- a/app/javascript/mastodon/actions/modal.ts
+++ b/app/javascript/mastodon/actions/modal.ts
@@ -9,6 +9,7 @@ export type ModalType = keyof typeof MODAL_COMPONENTS;
interface OpenModalPayload {
modalType: ModalType;
modalProps: ModalProps;
+ previousModalProps?: ModalProps;
}
export const openModal = createAction('MODAL_OPEN');
diff --git a/app/javascript/mastodon/actions/navigation.ts b/app/javascript/mastodon/actions/navigation.ts
new file mode 100644
index 0000000000..663a1c1bce
--- /dev/null
+++ b/app/javascript/mastodon/actions/navigation.ts
@@ -0,0 +1,7 @@
+import { createAction } from '@reduxjs/toolkit';
+
+export const openNavigation = createAction('navigation/open');
+
+export const closeNavigation = createAction('navigation/close');
+
+export const toggleNavigation = createAction('navigation/toggle');
diff --git a/app/javascript/mastodon/actions/notification_groups.ts b/app/javascript/mastodon/actions/notification_groups.ts
index aa7f50da4e..4386325481 100644
--- a/app/javascript/mastodon/actions/notification_groups.ts
+++ b/app/javascript/mastodon/actions/notification_groups.ts
@@ -155,7 +155,7 @@ export const processNewNotificationForGroups = createAppAsyncThunk(
const showInColumn =
activeFilter === 'all'
- ? notificationShows[notification.type]
+ ? notificationShows[notification.type] !== false
: activeFilter === notification.type;
if (!showInColumn) return;
diff --git a/app/javascript/mastodon/actions/notifications.js b/app/javascript/mastodon/actions/notifications.js
index 4c6e27cd5f..2499b8da1d 100644
--- a/app/javascript/mastodon/actions/notifications.js
+++ b/app/javascript/mastodon/actions/notifications.js
@@ -1,69 +1,31 @@
import { IntlMessageFormat } from 'intl-messageformat';
import { defineMessages } from 'react-intl';
-import { List as ImmutableList } from 'immutable';
-
-import { compareId } from 'mastodon/compare_id';
-import { usePendingItems as preferPendingItems } from 'mastodon/initial_state';
-
-import api, { getLinks } from '../api';
import { unescapeHTML } from '../utils/html';
import { requestNotificationPermission } from '../utils/notifications';
import { fetchFollowRequests } from './accounts';
import {
importFetchedAccount,
- importFetchedAccounts,
- importFetchedStatus,
- importFetchedStatuses,
} from './importer';
import { submitMarkers } from './markers';
import { notificationsUpdate } from "./notifications_typed";
import { register as registerPushNotifications } from './push_notifications';
-import { saveSettings } from './settings';
export * from "./notifications_typed";
-export const NOTIFICATIONS_UPDATE_NOOP = 'NOTIFICATIONS_UPDATE_NOOP';
-
-export const NOTIFICATIONS_EXPAND_REQUEST = 'NOTIFICATIONS_EXPAND_REQUEST';
-export const NOTIFICATIONS_EXPAND_SUCCESS = 'NOTIFICATIONS_EXPAND_SUCCESS';
-export const NOTIFICATIONS_EXPAND_FAIL = 'NOTIFICATIONS_EXPAND_FAIL';
-
export const NOTIFICATIONS_FILTER_SET = 'NOTIFICATIONS_FILTER_SET';
-export const NOTIFICATIONS_SCROLL_TOP = 'NOTIFICATIONS_SCROLL_TOP';
-export const NOTIFICATIONS_LOAD_PENDING = 'NOTIFICATIONS_LOAD_PENDING';
-
-export const NOTIFICATIONS_MOUNT = 'NOTIFICATIONS_MOUNT';
-export const NOTIFICATIONS_UNMOUNT = 'NOTIFICATIONS_UNMOUNT';
-
-export const NOTIFICATIONS_MARK_AS_READ = 'NOTIFICATIONS_MARK_AS_READ';
-
export const NOTIFICATIONS_SET_BROWSER_SUPPORT = 'NOTIFICATIONS_SET_BROWSER_SUPPORT';
export const NOTIFICATIONS_SET_BROWSER_PERMISSION = 'NOTIFICATIONS_SET_BROWSER_PERMISSION';
-export const NOTIFICATION_REQUESTS_ACCEPT_REQUEST = 'NOTIFICATION_REQUESTS_ACCEPT_REQUEST';
-export const NOTIFICATION_REQUESTS_ACCEPT_SUCCESS = 'NOTIFICATION_REQUESTS_ACCEPT_SUCCESS';
-export const NOTIFICATION_REQUESTS_ACCEPT_FAIL = 'NOTIFICATION_REQUESTS_ACCEPT_FAIL';
-
-export const NOTIFICATION_REQUESTS_DISMISS_REQUEST = 'NOTIFICATION_REQUESTS_DISMISS_REQUEST';
-export const NOTIFICATION_REQUESTS_DISMISS_SUCCESS = 'NOTIFICATION_REQUESTS_DISMISS_SUCCESS';
-export const NOTIFICATION_REQUESTS_DISMISS_FAIL = 'NOTIFICATION_REQUESTS_DISMISS_FAIL';
-
defineMessages({
mention: { id: 'notification.mention', defaultMessage: '{name} mentioned you' },
group: { id: 'notifications.group', defaultMessage: '{count} notifications' },
});
-export const loadPending = () => ({
- type: NOTIFICATIONS_LOAD_PENDING,
-});
-
export function updateNotifications(notification, intlMessages, intlLocale) {
return (dispatch, getState) => {
- const activeFilter = getState().getIn(['settings', 'notifications', 'quickFilter', 'active']);
- const showInColumn = activeFilter === 'all' ? getState().getIn(['settings', 'notifications', 'shows', notification.type], true) : activeFilter === notification.type;
const showAlert = getState().getIn(['settings', 'notifications', 'alerts', notification.type], true);
const playSound = getState().getIn(['settings', 'notifications', 'sounds', notification.type], true);
@@ -85,25 +47,9 @@ export function updateNotifications(notification, intlMessages, intlLocale) {
dispatch(submitMarkers());
- if (showInColumn) {
- dispatch(importFetchedAccount(notification.account));
-
- if (notification.status) {
- dispatch(importFetchedStatus(notification.status));
- }
-
- if (notification.report) {
- dispatch(importFetchedAccount(notification.report.target_account));
- }
-
-
- dispatch(notificationsUpdate({ notification, preferPendingItems, playSound: playSound && !filtered}));
- } else if (playSound && !filtered) {
- dispatch({
- type: NOTIFICATIONS_UPDATE_NOOP,
- meta: { sound: 'boop' },
- });
- }
+ // `notificationsUpdate` is still used in `user_lists` and `relationships` reducers
+ dispatch(importFetchedAccount(notification.account));
+ dispatch(notificationsUpdate({ notification, playSound: playSound && !filtered}));
// Desktop notifications
if (typeof window.Notification !== 'undefined' && showAlert && !filtered) {
@@ -120,141 +66,8 @@ export function updateNotifications(notification, intlMessages, intlLocale) {
};
}
-const excludeTypesFromSettings = state => state.getIn(['settings', 'notifications', 'shows']).filter(enabled => !enabled).keySeq().toJS();
-
-const excludeTypesFromFilter = filter => {
- const allTypes = ImmutableList([
- 'follow',
- 'follow_request',
- 'favourite',
- 'reblog',
- 'mention',
- 'poll',
- 'status',
- 'update',
- 'admin.sign_up',
- 'admin.report',
- ]);
-
- return allTypes.filterNot(item => item === filter).toJS();
-};
-
const noOp = () => {};
-let expandNotificationsController = new AbortController();
-
-export function expandNotifications({ maxId = undefined, forceLoad = false }) {
- return async (dispatch, getState) => {
- const activeFilter = getState().getIn(['settings', 'notifications', 'quickFilter', 'active']);
- const notifications = getState().get('notifications');
- const isLoadingMore = !!maxId;
-
- if (notifications.get('isLoading')) {
- if (forceLoad) {
- expandNotificationsController.abort();
- expandNotificationsController = new AbortController();
- } else {
- return;
- }
- }
-
- const params = {
- max_id: maxId,
- exclude_types: activeFilter === 'all'
- ? excludeTypesFromSettings(getState())
- : excludeTypesFromFilter(activeFilter),
- };
-
- if (!params.max_id && (notifications.get('items', ImmutableList()).size + notifications.get('pendingItems', ImmutableList()).size) > 0) {
- const a = notifications.getIn(['pendingItems', 0, 'id']);
- const b = notifications.getIn(['items', 0, 'id']);
-
- if (a && b && compareId(a, b) > 0) {
- params.since_id = a;
- } else {
- params.since_id = b || a;
- }
- }
-
- const isLoadingRecent = !!params.since_id;
-
- dispatch(expandNotificationsRequest(isLoadingMore));
-
- try {
- const response = await api().get('/api/v1/notifications', { params, signal: expandNotificationsController.signal });
- const next = getLinks(response).refs.find(link => link.rel === 'next');
-
- dispatch(importFetchedAccounts(response.data.map(item => item.account)));
- dispatch(importFetchedStatuses(response.data.map(item => item.status).filter(status => !!status)));
- dispatch(importFetchedAccounts(response.data.filter(item => item.report).map(item => item.report.target_account)));
-
- dispatch(expandNotificationsSuccess(response.data, next ? next.uri : null, isLoadingMore, isLoadingRecent, isLoadingRecent && preferPendingItems));
- dispatch(submitMarkers());
- } catch(error) {
- dispatch(expandNotificationsFail(error, isLoadingMore));
- }
- };
-}
-
-export function expandNotificationsRequest(isLoadingMore) {
- return {
- type: NOTIFICATIONS_EXPAND_REQUEST,
- skipLoading: !isLoadingMore,
- };
-}
-
-export function expandNotificationsSuccess(notifications, next, isLoadingMore, isLoadingRecent, usePendingItems) {
- return {
- type: NOTIFICATIONS_EXPAND_SUCCESS,
- notifications,
- next,
- isLoadingRecent: isLoadingRecent,
- usePendingItems,
- skipLoading: !isLoadingMore,
- };
-}
-
-export function expandNotificationsFail(error, isLoadingMore) {
- return {
- type: NOTIFICATIONS_EXPAND_FAIL,
- error,
- skipLoading: !isLoadingMore,
- skipAlert: !isLoadingMore || error.name === 'AbortError',
- };
-}
-
-export function scrollTopNotifications(top) {
- return {
- type: NOTIFICATIONS_SCROLL_TOP,
- top,
- };
-}
-
-export function setFilter (filterType) {
- return dispatch => {
- dispatch({
- type: NOTIFICATIONS_FILTER_SET,
- path: ['notifications', 'quickFilter', 'active'],
- value: filterType,
- });
- dispatch(expandNotifications({ forceLoad: true }));
- dispatch(saveSettings());
- };
-}
-
-export const mountNotifications = () => ({
- type: NOTIFICATIONS_MOUNT,
-});
-
-export const unmountNotifications = () => ({
- type: NOTIFICATIONS_UNMOUNT,
-});
-
-
-export const markNotificationsAsRead = () => ({
- type: NOTIFICATIONS_MARK_AS_READ,
-});
-
// Browser support
export function setupBrowserNotifications() {
return dispatch => {
diff --git a/app/javascript/mastodon/actions/notifications_migration.tsx b/app/javascript/mastodon/actions/notifications_migration.tsx
deleted file mode 100644
index cd9f5ca3d6..0000000000
--- a/app/javascript/mastodon/actions/notifications_migration.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import { createAppAsyncThunk } from 'mastodon/store';
-
-import { fetchNotifications } from './notification_groups';
-
-export const initializeNotifications = createAppAsyncThunk(
- 'notifications/initialize',
- (_, { dispatch }) => {
- void dispatch(fetchNotifications());
- },
-);
diff --git a/app/javascript/mastodon/actions/notifications_typed.ts b/app/javascript/mastodon/actions/notifications_typed.ts
index 88d942d45e..3eb1230666 100644
--- a/app/javascript/mastodon/actions/notifications_typed.ts
+++ b/app/javascript/mastodon/actions/notifications_typed.ts
@@ -9,7 +9,6 @@ export const notificationsUpdate = createAction(
...args
}: {
notification: ApiNotificationJSON;
- usePendingItems: boolean;
playSound: boolean;
}) => ({
payload: args,
diff --git a/app/javascript/mastodon/actions/polls.js b/app/javascript/mastodon/actions/polls.js
deleted file mode 100644
index aa49341444..0000000000
--- a/app/javascript/mastodon/actions/polls.js
+++ /dev/null
@@ -1,61 +0,0 @@
-import api from '../api';
-
-import { importFetchedPoll } from './importer';
-
-export const POLL_VOTE_REQUEST = 'POLL_VOTE_REQUEST';
-export const POLL_VOTE_SUCCESS = 'POLL_VOTE_SUCCESS';
-export const POLL_VOTE_FAIL = 'POLL_VOTE_FAIL';
-
-export const POLL_FETCH_REQUEST = 'POLL_FETCH_REQUEST';
-export const POLL_FETCH_SUCCESS = 'POLL_FETCH_SUCCESS';
-export const POLL_FETCH_FAIL = 'POLL_FETCH_FAIL';
-
-export const vote = (pollId, choices) => (dispatch) => {
- dispatch(voteRequest());
-
- api().post(`/api/v1/polls/${pollId}/votes`, { choices })
- .then(({ data }) => {
- dispatch(importFetchedPoll(data));
- dispatch(voteSuccess(data));
- })
- .catch(err => dispatch(voteFail(err)));
-};
-
-export const fetchPoll = pollId => (dispatch) => {
- dispatch(fetchPollRequest());
-
- api().get(`/api/v1/polls/${pollId}`)
- .then(({ data }) => {
- dispatch(importFetchedPoll(data));
- dispatch(fetchPollSuccess(data));
- })
- .catch(err => dispatch(fetchPollFail(err)));
-};
-
-export const voteRequest = () => ({
- type: POLL_VOTE_REQUEST,
-});
-
-export const voteSuccess = poll => ({
- type: POLL_VOTE_SUCCESS,
- poll,
-});
-
-export const voteFail = error => ({
- type: POLL_VOTE_FAIL,
- error,
-});
-
-export const fetchPollRequest = () => ({
- type: POLL_FETCH_REQUEST,
-});
-
-export const fetchPollSuccess = poll => ({
- type: POLL_FETCH_SUCCESS,
- poll,
-});
-
-export const fetchPollFail = error => ({
- type: POLL_FETCH_FAIL,
- error,
-});
diff --git a/app/javascript/mastodon/actions/polls.ts b/app/javascript/mastodon/actions/polls.ts
new file mode 100644
index 0000000000..65a96e8f62
--- /dev/null
+++ b/app/javascript/mastodon/actions/polls.ts
@@ -0,0 +1,40 @@
+import { apiGetPoll, apiPollVote } from 'mastodon/api/polls';
+import type { ApiPollJSON } from 'mastodon/api_types/polls';
+import { createPollFromServerJSON } from 'mastodon/models/poll';
+import {
+ createAppAsyncThunk,
+ createDataLoadingThunk,
+} from 'mastodon/store/typed_functions';
+
+import { importPolls } from './importer/polls';
+
+export const importFetchedPoll = createAppAsyncThunk(
+ 'poll/importFetched',
+ (args: { poll: ApiPollJSON }, { dispatch, getState }) => {
+ const { poll } = args;
+
+ dispatch(
+ importPolls({
+ polls: [createPollFromServerJSON(poll, getState().polls[poll.id])],
+ }),
+ );
+ },
+);
+
+export const vote = createDataLoadingThunk(
+ 'poll/vote',
+ ({ pollId, choices }: { pollId: string; choices: string[] }) =>
+ apiPollVote(pollId, choices),
+ async (poll, { dispatch, discardLoadData }) => {
+ await dispatch(importFetchedPoll({ poll }));
+ return discardLoadData;
+ },
+);
+
+export const fetchPoll = createDataLoadingThunk(
+ 'poll/fetch',
+ ({ pollId }: { pollId: string }) => apiGetPoll(pollId),
+ async (poll, { dispatch }) => {
+ await dispatch(importFetchedPoll({ poll }));
+ },
+);
diff --git a/app/javascript/mastodon/actions/push_notifications/registerer.js b/app/javascript/mastodon/actions/push_notifications/registerer.js
index b3d3850e31..647a6bd9fb 100644
--- a/app/javascript/mastodon/actions/push_notifications/registerer.js
+++ b/app/javascript/mastodon/actions/push_notifications/registerer.js
@@ -33,7 +33,7 @@ const unsubscribe = ({ registration, subscription }) =>
subscription ? subscription.unsubscribe().then(() => registration) : registration;
const sendSubscriptionToBackend = (subscription) => {
- const params = { subscription };
+ const params = { subscription: { ...subscription.toJSON(), standard: true } };
if (me) {
const data = pushNotificationsSetting.get(me);
diff --git a/app/javascript/mastodon/actions/search.js b/app/javascript/mastodon/actions/search.js
deleted file mode 100644
index bde17ae0db..0000000000
--- a/app/javascript/mastodon/actions/search.js
+++ /dev/null
@@ -1,215 +0,0 @@
-import { fromJS } from 'immutable';
-
-import { searchHistory } from 'mastodon/settings';
-
-import api from '../api';
-
-import { fetchRelationships } from './accounts';
-import { importFetchedAccounts, importFetchedStatuses } from './importer';
-
-export const SEARCH_CHANGE = 'SEARCH_CHANGE';
-export const SEARCH_CLEAR = 'SEARCH_CLEAR';
-export const SEARCH_SHOW = 'SEARCH_SHOW';
-
-export const SEARCH_FETCH_REQUEST = 'SEARCH_FETCH_REQUEST';
-export const SEARCH_FETCH_SUCCESS = 'SEARCH_FETCH_SUCCESS';
-export const SEARCH_FETCH_FAIL = 'SEARCH_FETCH_FAIL';
-
-export const SEARCH_EXPAND_REQUEST = 'SEARCH_EXPAND_REQUEST';
-export const SEARCH_EXPAND_SUCCESS = 'SEARCH_EXPAND_SUCCESS';
-export const SEARCH_EXPAND_FAIL = 'SEARCH_EXPAND_FAIL';
-
-export const SEARCH_HISTORY_UPDATE = 'SEARCH_HISTORY_UPDATE';
-
-export function changeSearch(value) {
- return {
- type: SEARCH_CHANGE,
- value,
- };
-}
-
-export function clearSearch() {
- return {
- type: SEARCH_CLEAR,
- };
-}
-
-export function submitSearch(type) {
- return (dispatch, getState) => {
- const value = getState().getIn(['search', 'value']);
- const signedIn = !!getState().getIn(['meta', 'me']);
-
- if (value.length === 0) {
- dispatch(fetchSearchSuccess({ accounts: [], statuses: [], hashtags: [] }, '', type));
- return;
- }
-
- dispatch(fetchSearchRequest(type));
-
- api().get('/api/v2/search', {
- params: {
- q: value,
- resolve: signedIn,
- limit: 11,
- type,
- },
- }).then(response => {
- if (response.data.accounts) {
- dispatch(importFetchedAccounts(response.data.accounts));
- }
-
- if (response.data.statuses) {
- dispatch(importFetchedStatuses(response.data.statuses));
- }
-
- dispatch(fetchSearchSuccess(response.data, value, type));
- dispatch(fetchRelationships(response.data.accounts.map(item => item.id)));
- }).catch(error => {
- dispatch(fetchSearchFail(error));
- });
- };
-}
-
-export function fetchSearchRequest(searchType) {
- return {
- type: SEARCH_FETCH_REQUEST,
- searchType,
- };
-}
-
-export function fetchSearchSuccess(results, searchTerm, searchType) {
- return {
- type: SEARCH_FETCH_SUCCESS,
- results,
- searchType,
- searchTerm,
- };
-}
-
-export function fetchSearchFail(error) {
- return {
- type: SEARCH_FETCH_FAIL,
- error,
- };
-}
-
-export const expandSearch = type => (dispatch, getState) => {
- const value = getState().getIn(['search', 'value']);
- const offset = getState().getIn(['search', 'results', type]).size - 1;
-
- dispatch(expandSearchRequest(type));
-
- api().get('/api/v2/search', {
- params: {
- q: value,
- type,
- offset,
- limit: 11,
- },
- }).then(({ data }) => {
- if (data.accounts) {
- dispatch(importFetchedAccounts(data.accounts));
- }
-
- if (data.statuses) {
- dispatch(importFetchedStatuses(data.statuses));
- }
-
- dispatch(expandSearchSuccess(data, value, type));
- dispatch(fetchRelationships(data.accounts.map(item => item.id)));
- }).catch(error => {
- dispatch(expandSearchFail(error));
- });
-};
-
-export const expandSearchRequest = (searchType) => ({
- type: SEARCH_EXPAND_REQUEST,
- searchType,
-});
-
-export const expandSearchSuccess = (results, searchTerm, searchType) => ({
- type: SEARCH_EXPAND_SUCCESS,
- results,
- searchTerm,
- searchType,
-});
-
-export const expandSearchFail = error => ({
- type: SEARCH_EXPAND_FAIL,
- error,
-});
-
-export const showSearch = () => ({
- type: SEARCH_SHOW,
-});
-
-export const openURL = (value, history, onFailure) => (dispatch, getState) => {
- const signedIn = !!getState().getIn(['meta', 'me']);
-
- if (!signedIn) {
- if (onFailure) {
- onFailure();
- }
-
- return;
- }
-
- dispatch(fetchSearchRequest());
-
- api().get('/api/v2/search', { params: { q: value, resolve: true } }).then(response => {
- if (response.data.accounts?.length > 0) {
- dispatch(importFetchedAccounts(response.data.accounts));
- history.push(`/@${response.data.accounts[0].acct}`);
- } else if (response.data.statuses?.length > 0) {
- dispatch(importFetchedStatuses(response.data.statuses));
- history.push(`/@${response.data.statuses[0].account.acct}/${response.data.statuses[0].id}`);
- } else if (onFailure) {
- onFailure();
- }
-
- dispatch(fetchSearchSuccess(response.data, value));
- }).catch(err => {
- dispatch(fetchSearchFail(err));
-
- if (onFailure) {
- onFailure();
- }
- });
-};
-
-export const clickSearchResult = (q, type) => (dispatch, getState) => {
- const previous = getState().getIn(['search', 'recent']);
-
- if (previous.some(x => x.get('q') === q && x.get('type') === type)) {
- return;
- }
-
- const me = getState().getIn(['meta', 'me']);
- const current = previous.add(fromJS({ type, q })).takeLast(4);
-
- searchHistory.set(me, current.toJS());
- dispatch(updateSearchHistory(current));
-};
-
-export const forgetSearchResult = q => (dispatch, getState) => {
- const previous = getState().getIn(['search', 'recent']);
- const me = getState().getIn(['meta', 'me']);
- const current = previous.filterNot(result => result.get('q') === q);
-
- searchHistory.set(me, current.toJS());
- dispatch(updateSearchHistory(current));
-};
-
-export const updateSearchHistory = recent => ({
- type: SEARCH_HISTORY_UPDATE,
- recent,
-});
-
-export const hydrateSearch = () => (dispatch, getState) => {
- const me = getState().getIn(['meta', 'me']);
- const history = searchHistory.get(me);
-
- if (history !== null) {
- dispatch(updateSearchHistory(history));
- }
-};
diff --git a/app/javascript/mastodon/actions/search.ts b/app/javascript/mastodon/actions/search.ts
new file mode 100644
index 0000000000..1e57c30715
--- /dev/null
+++ b/app/javascript/mastodon/actions/search.ts
@@ -0,0 +1,153 @@
+import { createAction } from '@reduxjs/toolkit';
+
+import { apiGetSearch } from 'mastodon/api/search';
+import type { ApiSearchType } from 'mastodon/api_types/search';
+import type {
+ RecentSearch,
+ SearchType as RecentSearchType,
+} from 'mastodon/models/search';
+import { searchHistory } from 'mastodon/settings';
+import {
+ createDataLoadingThunk,
+ createAppAsyncThunk,
+} from 'mastodon/store/typed_functions';
+
+import { fetchRelationships } from './accounts';
+import { importFetchedAccounts, importFetchedStatuses } from './importer';
+
+export const SEARCH_HISTORY_UPDATE = 'SEARCH_HISTORY_UPDATE';
+
+export const submitSearch = createDataLoadingThunk(
+ 'search/submit',
+ async ({ q, type }: { q: string; type?: ApiSearchType }, { getState }) => {
+ const signedIn = !!getState().meta.get('me');
+
+ return apiGetSearch({
+ q,
+ type,
+ resolve: signedIn,
+ limit: 11,
+ });
+ },
+ (data, { dispatch }) => {
+ if (data.accounts.length > 0) {
+ dispatch(importFetchedAccounts(data.accounts));
+ dispatch(fetchRelationships(data.accounts.map((account) => account.id)));
+ }
+
+ if (data.statuses.length > 0) {
+ dispatch(importFetchedStatuses(data.statuses));
+ }
+
+ return data;
+ },
+ {
+ useLoadingBar: false,
+ },
+);
+
+export const expandSearch = createDataLoadingThunk(
+ 'search/expand',
+ async ({ type }: { type: ApiSearchType }, { getState }) => {
+ const q = getState().search.q;
+ const results = getState().search.results;
+ const offset = results?.[type].length;
+
+ return apiGetSearch({
+ q,
+ type,
+ limit: 10,
+ offset,
+ });
+ },
+ (data, { dispatch }) => {
+ if (data.accounts.length > 0) {
+ dispatch(importFetchedAccounts(data.accounts));
+ dispatch(fetchRelationships(data.accounts.map((account) => account.id)));
+ }
+
+ if (data.statuses.length > 0) {
+ dispatch(importFetchedStatuses(data.statuses));
+ }
+
+ return data;
+ },
+ {
+ useLoadingBar: true,
+ },
+);
+
+export const openURL = createDataLoadingThunk(
+ 'search/openURL',
+ ({ url }: { url: string }) =>
+ apiGetSearch({
+ q: url,
+ resolve: true,
+ limit: 1,
+ }),
+ (data, { dispatch }) => {
+ if (data.accounts.length > 0) {
+ dispatch(importFetchedAccounts(data.accounts));
+ } else if (data.statuses.length > 0) {
+ dispatch(importFetchedStatuses(data.statuses));
+ }
+
+ return data;
+ },
+ {
+ useLoadingBar: true,
+ },
+);
+
+export const clickSearchResult = createAppAsyncThunk(
+ 'search/clickResult',
+ (
+ { q, type }: { q: string; type?: RecentSearchType },
+ { dispatch, getState },
+ ) => {
+ const previous = getState().search.recent;
+
+ if (previous.some((x) => x.q === q && x.type === type)) {
+ return;
+ }
+
+ const me = getState().meta.get('me') as string;
+ const current = [{ type, q }, ...previous].slice(0, 4);
+
+ searchHistory.set(me, current);
+ dispatch(updateSearchHistory(current));
+ },
+);
+
+export const forgetSearchResult = createAppAsyncThunk(
+ 'search/forgetResult',
+ (
+ { q, type }: { q: string; type?: RecentSearchType },
+ { dispatch, getState },
+ ) => {
+ const previous = getState().search.recent;
+ const me = getState().meta.get('me') as string;
+ const current = previous.filter(
+ (result) => result.q !== q || result.type !== type,
+ );
+
+ searchHistory.set(me, current);
+ dispatch(updateSearchHistory(current));
+ },
+);
+
+export const updateSearchHistory = createAction(
+ 'search/updateHistory',
+);
+
+export const hydrateSearch = createAppAsyncThunk(
+ 'search/hydrate',
+ (_args, { dispatch, getState }) => {
+ const me = getState().meta.get('me') as string;
+ const history = searchHistory.get(me) as RecentSearch[] | null;
+
+ if (history !== null) {
+ dispatch(updateSearchHistory(history));
+ }
+ },
+);
diff --git a/app/javascript/mastodon/actions/settings.js b/app/javascript/mastodon/actions/settings.js
index fbd89f9d4b..7659fb5f98 100644
--- a/app/javascript/mastodon/actions/settings.js
+++ b/app/javascript/mastodon/actions/settings.js
@@ -29,7 +29,7 @@ const debouncedSave = debounce((dispatch, getState) => {
api().put('/api/web/settings', { data })
.then(() => dispatch({ type: SETTING_SAVE }))
.catch(error => dispatch(showAlertForError(error)));
-}, 5000, { trailing: true });
+}, 2000, { leading: true, trailing: true });
export function saveSettings() {
return (dispatch, getState) => debouncedSave(dispatch, getState);
diff --git a/app/javascript/mastodon/actions/statuses.js b/app/javascript/mastodon/actions/statuses.js
index 1e4e545d8c..42d0c1c0f1 100644
--- a/app/javascript/mastodon/actions/statuses.js
+++ b/app/javascript/mastodon/actions/statuses.js
@@ -4,8 +4,11 @@ import api from '../api';
import { ensureComposeIsVisible, setComposeToStatus } from './compose';
import { importFetchedStatus, importFetchedStatuses, importFetchedAccount } from './importer';
+import { fetchContext } from './statuses_typed';
import { deleteFromTimelines } from './timelines';
+export * from './statuses_typed';
+
export const STATUS_FETCH_REQUEST = 'STATUS_FETCH_REQUEST';
export const STATUS_FETCH_SUCCESS = 'STATUS_FETCH_SUCCESS';
export const STATUS_FETCH_FAIL = 'STATUS_FETCH_FAIL';
@@ -14,10 +17,6 @@ export const STATUS_DELETE_REQUEST = 'STATUS_DELETE_REQUEST';
export const STATUS_DELETE_SUCCESS = 'STATUS_DELETE_SUCCESS';
export const STATUS_DELETE_FAIL = 'STATUS_DELETE_FAIL';
-export const CONTEXT_FETCH_REQUEST = 'CONTEXT_FETCH_REQUEST';
-export const CONTEXT_FETCH_SUCCESS = 'CONTEXT_FETCH_SUCCESS';
-export const CONTEXT_FETCH_FAIL = 'CONTEXT_FETCH_FAIL';
-
export const STATUS_MUTE_REQUEST = 'STATUS_MUTE_REQUEST';
export const STATUS_MUTE_SUCCESS = 'STATUS_MUTE_SUCCESS';
export const STATUS_MUTE_FAIL = 'STATUS_MUTE_FAIL';
@@ -54,7 +53,7 @@ export function fetchStatus(id, forceFetch = false, alsoFetchContext = true) {
const skipLoading = !forceFetch && getState().getIn(['statuses', id], null) !== null;
if (alsoFetchContext) {
- dispatch(fetchContext(id));
+ dispatch(fetchContext({ statusId: id }));
}
if (skipLoading) {
@@ -138,7 +137,7 @@ export function deleteStatus(id, withRedraft = false) {
dispatch(deleteStatusRequest(id));
- api().delete(`/api/v1/statuses/${id}`).then(response => {
+ api().delete(`/api/v1/statuses/${id}`, { params: { delete_media: !withRedraft } }).then(response => {
dispatch(deleteStatusSuccess(id));
dispatch(deleteFromTimelines(id));
dispatch(importFetchedAccount(response.data.account));
@@ -178,50 +177,6 @@ export function deleteStatusFail(id, error) {
export const updateStatus = status => dispatch =>
dispatch(importFetchedStatus(status));
-export function fetchContext(id) {
- return (dispatch) => {
- dispatch(fetchContextRequest(id));
-
- api().get(`/api/v1/statuses/${id}/context`).then(response => {
- dispatch(importFetchedStatuses(response.data.ancestors.concat(response.data.descendants)));
- dispatch(fetchContextSuccess(id, response.data.ancestors, response.data.descendants));
-
- }).catch(error => {
- if (error.response && error.response.status === 404) {
- dispatch(deleteFromTimelines(id));
- }
-
- dispatch(fetchContextFail(id, error));
- });
- };
-}
-
-export function fetchContextRequest(id) {
- return {
- type: CONTEXT_FETCH_REQUEST,
- id,
- };
-}
-
-export function fetchContextSuccess(id, ancestors, descendants) {
- return {
- type: CONTEXT_FETCH_SUCCESS,
- id,
- ancestors,
- descendants,
- statuses: ancestors.concat(descendants),
- };
-}
-
-export function fetchContextFail(id, error) {
- return {
- type: CONTEXT_FETCH_FAIL,
- id,
- error,
- skipAlert: true,
- };
-}
-
export function muteStatus(id) {
return (dispatch) => {
dispatch(muteStatusRequest(id));
diff --git a/app/javascript/mastodon/actions/statuses_typed.ts b/app/javascript/mastodon/actions/statuses_typed.ts
new file mode 100644
index 0000000000..b98abbe122
--- /dev/null
+++ b/app/javascript/mastodon/actions/statuses_typed.ts
@@ -0,0 +1,18 @@
+import { apiGetContext } from 'mastodon/api/statuses';
+import { createDataLoadingThunk } from 'mastodon/store/typed_functions';
+
+import { importFetchedStatuses } from './importer';
+
+export const fetchContext = createDataLoadingThunk(
+ 'status/context',
+ ({ statusId }: { statusId: string }) => apiGetContext(statusId),
+ (context, { dispatch }) => {
+ const statuses = context.ancestors.concat(context.descendants);
+
+ dispatch(importFetchedStatuses(statuses));
+
+ return {
+ context,
+ };
+ },
+);
diff --git a/app/javascript/mastodon/actions/store.js b/app/javascript/mastodon/actions/store.js
index 8ab75cdc44..e8fec13453 100644
--- a/app/javascript/mastodon/actions/store.js
+++ b/app/javascript/mastodon/actions/store.js
@@ -1,4 +1,4 @@
-import { Iterable, fromJS } from 'immutable';
+import { fromJS, isIndexed } from 'immutable';
import { hydrateCompose } from './compose';
import { importFetchedAccounts } from './importer';
@@ -9,8 +9,7 @@ export const STORE_HYDRATE_LAZY = 'STORE_HYDRATE_LAZY';
const convertState = rawState =>
fromJS(rawState, (k, v) =>
- Iterable.isIndexed(v) ? v.toList() : v.toMap());
-
+ isIndexed(v) ? v.toList() : v.toMap());
export function hydrateStore(rawState) {
return dispatch => {
diff --git a/app/javascript/mastodon/actions/streaming.js b/app/javascript/mastodon/actions/streaming.js
index 30e643363a..478e0cae45 100644
--- a/app/javascript/mastodon/actions/streaming.js
+++ b/app/javascript/mastodon/actions/streaming.js
@@ -11,7 +11,7 @@ import {
} from './announcements';
import { updateConversations } from './conversations';
import { processNewNotificationForGroups, refreshStaleNotificationGroups, pollRecentNotifications as pollRecentGroupNotifications } from './notification_groups';
-import { updateNotifications, expandNotifications } from './notifications';
+import { updateNotifications } from './notifications';
import { updateStatus } from './statuses';
import {
updateTimeline,
@@ -107,9 +107,6 @@ export const connectTimelineStream = (timelineId, channelName, params = {}, opti
break;
}
case 'notifications_merged': {
- const state = getState();
- if (state.notifications.top || !state.notifications.mounted)
- dispatch(expandNotifications({ forceLoad: true, maxId: undefined }));
dispatch(refreshStaleNotificationGroups());
break;
}
diff --git a/app/javascript/mastodon/actions/tags.js b/app/javascript/mastodon/actions/tags.js
deleted file mode 100644
index 6e0c95288a..0000000000
--- a/app/javascript/mastodon/actions/tags.js
+++ /dev/null
@@ -1,81 +0,0 @@
-import api, { getLinks } from '../api';
-
-export const FOLLOWED_HASHTAGS_FETCH_REQUEST = 'FOLLOWED_HASHTAGS_FETCH_REQUEST';
-export const FOLLOWED_HASHTAGS_FETCH_SUCCESS = 'FOLLOWED_HASHTAGS_FETCH_SUCCESS';
-export const FOLLOWED_HASHTAGS_FETCH_FAIL = 'FOLLOWED_HASHTAGS_FETCH_FAIL';
-
-export const FOLLOWED_HASHTAGS_EXPAND_REQUEST = 'FOLLOWED_HASHTAGS_EXPAND_REQUEST';
-export const FOLLOWED_HASHTAGS_EXPAND_SUCCESS = 'FOLLOWED_HASHTAGS_EXPAND_SUCCESS';
-export const FOLLOWED_HASHTAGS_EXPAND_FAIL = 'FOLLOWED_HASHTAGS_EXPAND_FAIL';
-
-export const fetchFollowedHashtags = () => (dispatch) => {
- dispatch(fetchFollowedHashtagsRequest());
-
- api().get('/api/v1/followed_tags').then(response => {
- const next = getLinks(response).refs.find(link => link.rel === 'next');
- dispatch(fetchFollowedHashtagsSuccess(response.data, next ? next.uri : null));
- }).catch(err => {
- dispatch(fetchFollowedHashtagsFail(err));
- });
-};
-
-export function fetchFollowedHashtagsRequest() {
- return {
- type: FOLLOWED_HASHTAGS_FETCH_REQUEST,
- };
-}
-
-export function fetchFollowedHashtagsSuccess(followed_tags, next) {
- return {
- type: FOLLOWED_HASHTAGS_FETCH_SUCCESS,
- followed_tags,
- next,
- };
-}
-
-export function fetchFollowedHashtagsFail(error) {
- return {
- type: FOLLOWED_HASHTAGS_FETCH_FAIL,
- error,
- };
-}
-
-export function expandFollowedHashtags() {
- return (dispatch, getState) => {
- const url = getState().getIn(['followed_tags', 'next']);
-
- if (url === null) {
- return;
- }
-
- dispatch(expandFollowedHashtagsRequest());
-
- api().get(url).then(response => {
- const next = getLinks(response).refs.find(link => link.rel === 'next');
- dispatch(expandFollowedHashtagsSuccess(response.data, next ? next.uri : null));
- }).catch(error => {
- dispatch(expandFollowedHashtagsFail(error));
- });
- };
-}
-
-export function expandFollowedHashtagsRequest() {
- return {
- type: FOLLOWED_HASHTAGS_EXPAND_REQUEST,
- };
-}
-
-export function expandFollowedHashtagsSuccess(followed_tags, next) {
- return {
- type: FOLLOWED_HASHTAGS_EXPAND_SUCCESS,
- followed_tags,
- next,
- };
-}
-
-export function expandFollowedHashtagsFail(error) {
- return {
- type: FOLLOWED_HASHTAGS_EXPAND_FAIL,
- error,
- };
-}
diff --git a/app/javascript/mastodon/actions/tags_typed.ts b/app/javascript/mastodon/actions/tags_typed.ts
index 6dca32fd84..1f686f0c43 100644
--- a/app/javascript/mastodon/actions/tags_typed.ts
+++ b/app/javascript/mastodon/actions/tags_typed.ts
@@ -1,6 +1,30 @@
-import { apiGetTag, apiFollowTag, apiUnfollowTag } from 'mastodon/api/tags';
+import { createAction } from '@reduxjs/toolkit';
+
+import {
+ apiGetTag,
+ apiFollowTag,
+ apiUnfollowTag,
+ apiFeatureTag,
+ apiUnfeatureTag,
+ apiGetFollowedTags,
+} from 'mastodon/api/tags';
import { createDataLoadingThunk } from 'mastodon/store/typed_functions';
+export const fetchFollowedHashtags = createDataLoadingThunk(
+ 'tags/fetch-followed',
+ async ({ next }: { next?: string } = {}) => {
+ const response = await apiGetFollowedTags(next);
+ return {
+ ...response,
+ replace: !next,
+ };
+ },
+);
+
+export const markFollowedHashtagsStale = createAction(
+ 'tags/mark-followed-stale',
+);
+
export const fetchHashtag = createDataLoadingThunk(
'tags/fetch',
({ tagId }: { tagId: string }) => apiGetTag(tagId),
@@ -9,9 +33,22 @@ export const fetchHashtag = createDataLoadingThunk(
export const followHashtag = createDataLoadingThunk(
'tags/follow',
({ tagId }: { tagId: string }) => apiFollowTag(tagId),
+ (_, { dispatch }) => {
+ void dispatch(markFollowedHashtagsStale());
+ },
);
export const unfollowHashtag = createDataLoadingThunk(
'tags/unfollow',
({ tagId }: { tagId: string }) => apiUnfollowTag(tagId),
);
+
+export const featureHashtag = createDataLoadingThunk(
+ 'tags/feature',
+ ({ tagId }: { tagId: string }) => apiFeatureTag(tagId),
+);
+
+export const unfeatureHashtag = createDataLoadingThunk(
+ 'tags/unfeature',
+ ({ tagId }: { tagId: string }) => apiUnfeatureTag(tagId),
+);
diff --git a/app/javascript/mastodon/api.ts b/app/javascript/mastodon/api.ts
index f0663ded40..dc9c20b508 100644
--- a/app/javascript/mastodon/api.ts
+++ b/app/javascript/mastodon/api.ts
@@ -1,4 +1,9 @@
-import type { AxiosResponse, Method, RawAxiosRequestHeaders } from 'axios';
+import type {
+ AxiosError,
+ AxiosResponse,
+ Method,
+ RawAxiosRequestHeaders,
+} from 'axios';
import axios from 'axios';
import LinkHeader from 'http-link-header';
@@ -41,7 +46,7 @@ const authorizationTokenFromInitialState = (): RawAxiosRequestHeaders => {
// eslint-disable-next-line import/no-default-export
export default function api(withAuthorization = true) {
- return axios.create({
+ const instance = axios.create({
transitional: {
clarifyTimeoutError: true,
},
@@ -60,8 +65,25 @@ export default function api(withAuthorization = true) {
},
],
});
+
+ instance.interceptors.response.use(
+ (response: AxiosResponse) => {
+ if (response.headers.deprecation) {
+ console.warn(
+ `Deprecated request: ${response.config.method} ${response.config.url}`,
+ );
+ }
+ return response;
+ },
+ (error: AxiosError) => {
+ return Promise.reject(error);
+ },
+ );
+
+ return instance;
}
+type ApiUrl = `v${1 | 2}/${string}`;
type RequestParamsOrData = Record;
export async function apiRequest(
@@ -84,28 +106,28 @@ export async function apiRequest(
}
export async function apiRequestGet(
- url: string,
+ url: ApiUrl,
params?: RequestParamsOrData,
) {
return apiRequest('GET', url, { params });
}
export async function apiRequestPost(
- url: string,
+ url: ApiUrl,
data?: RequestParamsOrData,
) {
return apiRequest('POST', url, { data });
}
export async function apiRequestPut(
- url: string,
+ url: ApiUrl,
data?: RequestParamsOrData,
) {
return apiRequest('PUT', url, { data });
}
export async function apiRequestDelete(
- url: string,
+ url: ApiUrl,
params?: RequestParamsOrData,
) {
return apiRequest('DELETE', url, { params });
diff --git a/app/javascript/mastodon/api/accounts.ts b/app/javascript/mastodon/api/accounts.ts
index 717010ba74..fb99978cad 100644
--- a/app/javascript/mastodon/api/accounts.ts
+++ b/app/javascript/mastodon/api/accounts.ts
@@ -1,5 +1,10 @@
-import { apiRequestPost } from 'mastodon/api';
+import { apiRequestPost, apiRequestGet } from 'mastodon/api';
+import type {
+ ApiAccountJSON,
+ ApiFamiliarFollowersJSON,
+} from 'mastodon/api_types/accounts';
import type { ApiRelationshipJSON } from 'mastodon/api_types/relationships';
+import type { ApiHashtagJSON } from 'mastodon/api_types/tags';
export const apiSubmitAccountNote = (id: string, value: string) =>
apiRequestPost(`v1/accounts/${id}/note`, {
@@ -18,3 +23,19 @@ export const apiFollowAccount = (
export const apiUnfollowAccount = (id: string) =>
apiRequestPost(`v1/accounts/${id}/unfollow`);
+
+export const apiRemoveAccountFromFollowers = (id: string) =>
+ apiRequestPost(
+ `v1/accounts/${id}/remove_from_followers`,
+ );
+
+export const apiGetFeaturedTags = (id: string) =>
+ apiRequestGet(`v1/accounts/${id}/featured_tags`);
+
+export const apiGetEndorsedAccounts = (id: string) =>
+ apiRequestGet(`v1/accounts/${id}/endorsements`);
+
+export const apiGetFamiliarFollowers = (id: string) =>
+ apiRequestGet('v1/accounts/familiar_followers', {
+ id,
+ });
diff --git a/app/javascript/mastodon/api/compose.ts b/app/javascript/mastodon/api/compose.ts
new file mode 100644
index 0000000000..757e9961c9
--- /dev/null
+++ b/app/javascript/mastodon/api/compose.ts
@@ -0,0 +1,7 @@
+import { apiRequestPut } from 'mastodon/api';
+import type { ApiMediaAttachmentJSON } from 'mastodon/api_types/media_attachments';
+
+export const apiUpdateMedia = (
+ id: string,
+ params?: { description?: string; focus?: string },
+) => apiRequestPut(`v1/media/${id}`, params);
diff --git a/app/javascript/mastodon/api/domain_blocks.ts b/app/javascript/mastodon/api/domain_blocks.ts
new file mode 100644
index 0000000000..4e153b0ee9
--- /dev/null
+++ b/app/javascript/mastodon/api/domain_blocks.ts
@@ -0,0 +1,13 @@
+import api, { getLinks } from 'mastodon/api';
+
+export const apiGetDomainBlocks = async (url?: string) => {
+ const response = await api().request({
+ method: 'GET',
+ url: url ?? '/api/v1/domain_blocks',
+ });
+
+ return {
+ domains: response.data,
+ links: getLinks(response),
+ };
+};
diff --git a/app/javascript/mastodon/api/instance.ts b/app/javascript/mastodon/api/instance.ts
new file mode 100644
index 0000000000..764e8daab2
--- /dev/null
+++ b/app/javascript/mastodon/api/instance.ts
@@ -0,0 +1,15 @@
+import { apiRequestGet } from 'mastodon/api';
+import type {
+ ApiTermsOfServiceJSON,
+ ApiPrivacyPolicyJSON,
+} from 'mastodon/api_types/instance';
+
+export const apiGetTermsOfService = (version?: string) =>
+ apiRequestGet(
+ version
+ ? `v1/instance/terms_of_service/${version}`
+ : 'v1/instance/terms_of_service',
+ );
+
+export const apiGetPrivacyPolicy = () =>
+ apiRequestGet('v1/instance/privacy_policy');
diff --git a/app/javascript/mastodon/api/lists.ts b/app/javascript/mastodon/api/lists.ts
index a5586eb6d4..fa7e6e4554 100644
--- a/app/javascript/mastodon/api/lists.ts
+++ b/app/javascript/mastodon/api/lists.ts
@@ -13,6 +13,8 @@ export const apiCreate = (list: Partial) =>
export const apiUpdate = (list: Partial) =>
apiRequestPut(`v1/lists/${list.id}`, list);
+export const apiGetLists = () => apiRequestGet('v1/lists');
+
export const apiGetAccounts = (listId: string) =>
apiRequestGet(`v1/lists/${listId}/accounts`, {
limit: 0,
diff --git a/app/javascript/mastodon/api/polls.ts b/app/javascript/mastodon/api/polls.ts
new file mode 100644
index 0000000000..d1a97c53c5
--- /dev/null
+++ b/app/javascript/mastodon/api/polls.ts
@@ -0,0 +1,10 @@
+import { apiRequestGet, apiRequestPost } from 'mastodon/api';
+import type { ApiPollJSON } from 'mastodon/api_types/polls';
+
+export const apiGetPoll = (pollId: string) =>
+ apiRequestGet(`v1/polls/${pollId}`);
+
+export const apiPollVote = (pollId: string, choices: string[]) =>
+ apiRequestPost(`v1/polls/${pollId}/votes`, {
+ choices,
+ });
diff --git a/app/javascript/mastodon/api/search.ts b/app/javascript/mastodon/api/search.ts
new file mode 100644
index 0000000000..79b0385fe8
--- /dev/null
+++ b/app/javascript/mastodon/api/search.ts
@@ -0,0 +1,16 @@
+import { apiRequestGet } from 'mastodon/api';
+import type {
+ ApiSearchType,
+ ApiSearchResultsJSON,
+} from 'mastodon/api_types/search';
+
+export const apiGetSearch = (params: {
+ q: string;
+ resolve?: boolean;
+ type?: ApiSearchType;
+ limit?: number;
+ offset?: number;
+}) =>
+ apiRequestGet('v2/search', {
+ ...params,
+ });
diff --git a/app/javascript/mastodon/api/statuses.ts b/app/javascript/mastodon/api/statuses.ts
new file mode 100644
index 0000000000..921a7bfe63
--- /dev/null
+++ b/app/javascript/mastodon/api/statuses.ts
@@ -0,0 +1,5 @@
+import { apiRequestGet } from 'mastodon/api';
+import type { ApiContextJSON } from 'mastodon/api_types/statuses';
+
+export const apiGetContext = (statusId: string) =>
+ apiRequestGet(`v1/statuses/${statusId}/context`);
diff --git a/app/javascript/mastodon/api/tags.ts b/app/javascript/mastodon/api/tags.ts
index 2cb802800c..28694d3b2d 100644
--- a/app/javascript/mastodon/api/tags.ts
+++ b/app/javascript/mastodon/api/tags.ts
@@ -1,4 +1,4 @@
-import { apiRequestPost, apiRequestGet } from 'mastodon/api';
+import api, { getLinks, apiRequestPost, apiRequestGet } from 'mastodon/api';
import type { ApiHashtagJSON } from 'mastodon/api_types/tags';
export const apiGetTag = (tagId: string) =>
@@ -9,3 +9,22 @@ export const apiFollowTag = (tagId: string) =>
export const apiUnfollowTag = (tagId: string) =>
apiRequestPost(`v1/tags/${tagId}/unfollow`);
+
+export const apiFeatureTag = (tagId: string) =>
+ apiRequestPost(`v1/tags/${tagId}/feature`);
+
+export const apiUnfeatureTag = (tagId: string) =>
+ apiRequestPost(`v1/tags/${tagId}/unfeature`);
+
+export const apiGetFollowedTags = async (url?: string, limit?: number) => {
+ const response = await api().request({
+ method: 'GET',
+ url: url ?? '/api/v1/followed_tags',
+ params: { limit },
+ });
+
+ return {
+ tags: response.data,
+ links: getLinks(response),
+ };
+};
diff --git a/app/javascript/mastodon/api_types/accounts.ts b/app/javascript/mastodon/api_types/accounts.ts
index fdbd7523fc..b93054a1f6 100644
--- a/app/javascript/mastodon/api_types/accounts.ts
+++ b/app/javascript/mastodon/api_types/accounts.ts
@@ -19,7 +19,7 @@ export interface BaseApiAccountJSON {
avatar_static: string;
bot: boolean;
created_at: string;
- discoverable: boolean;
+ discoverable?: boolean;
indexable: boolean;
display_name: string;
emojis: ApiCustomEmojiJSON[];
@@ -54,3 +54,9 @@ export interface ApiMutedAccountJSON extends BaseApiAccountJSON {
// For now, we have the same type representing both `Account` and `MutedAccount`
// objects, but we should refactor this in the future.
export type ApiAccountJSON = ApiMutedAccountJSON;
+
+// See app/serializers/rest/familiar_followers_serializer.rb
+export type ApiFamiliarFollowersJSON = {
+ id: string;
+ accounts: ApiAccountJSON[];
+}[];
diff --git a/app/javascript/mastodon/api_types/instance.ts b/app/javascript/mastodon/api_types/instance.ts
new file mode 100644
index 0000000000..3a29684b70
--- /dev/null
+++ b/app/javascript/mastodon/api_types/instance.ts
@@ -0,0 +1,11 @@
+export interface ApiTermsOfServiceJSON {
+ effective_date: string;
+ effective: boolean;
+ succeeded_by: string | null;
+ content: string;
+}
+
+export interface ApiPrivacyPolicyJSON {
+ updated_at: string;
+ content: string;
+}
diff --git a/app/javascript/mastodon/api_types/polls.ts b/app/javascript/mastodon/api_types/polls.ts
index 8181f7b813..891a2faba7 100644
--- a/app/javascript/mastodon/api_types/polls.ts
+++ b/app/javascript/mastodon/api_types/polls.ts
@@ -13,11 +13,11 @@ export interface ApiPollJSON {
expired: boolean;
multiple: boolean;
votes_count: number;
- voters_count: number;
+ voters_count: number | null;
options: ApiPollOptionJSON[];
emojis: ApiCustomEmojiJSON[];
- voted: boolean;
- own_votes: number[];
+ voted?: boolean;
+ own_votes?: number[];
}
diff --git a/app/javascript/mastodon/api_types/search.ts b/app/javascript/mastodon/api_types/search.ts
new file mode 100644
index 0000000000..795cbb2b41
--- /dev/null
+++ b/app/javascript/mastodon/api_types/search.ts
@@ -0,0 +1,11 @@
+import type { ApiAccountJSON } from './accounts';
+import type { ApiStatusJSON } from './statuses';
+import type { ApiHashtagJSON } from './tags';
+
+export type ApiSearchType = 'accounts' | 'statuses' | 'hashtags';
+
+export interface ApiSearchResultsJSON {
+ accounts: ApiAccountJSON[];
+ statuses: ApiStatusJSON[];
+ hashtags: ApiHashtagJSON[];
+}
diff --git a/app/javascript/mastodon/api_types/statuses.ts b/app/javascript/mastodon/api_types/statuses.ts
index 2c59645ea7..09bd2349b3 100644
--- a/app/javascript/mastodon/api_types/statuses.ts
+++ b/app/javascript/mastodon/api_types/statuses.ts
@@ -119,3 +119,8 @@ export interface ApiStatusJSON {
card?: ApiPreviewCardJSON;
poll?: ApiPollJSON;
}
+
+export interface ApiContextJSON {
+ ancestors: ApiStatusJSON[];
+ descendants: ApiStatusJSON[];
+}
diff --git a/app/javascript/mastodon/api_types/tags.ts b/app/javascript/mastodon/api_types/tags.ts
index 0c16c8bd28..3066b4f1f1 100644
--- a/app/javascript/mastodon/api_types/tags.ts
+++ b/app/javascript/mastodon/api_types/tags.ts
@@ -10,4 +10,5 @@ export interface ApiHashtagJSON {
url: string;
history: [ApiHistoryJSON, ...ApiHistoryJSON[]];
following?: boolean;
+ featuring?: boolean;
}
diff --git a/app/javascript/mastodon/blurhash.ts b/app/javascript/mastodon/blurhash.ts
index cafe7b12dc..a1d1a0f4e1 100644
--- a/app/javascript/mastodon/blurhash.ts
+++ b/app/javascript/mastodon/blurhash.ts
@@ -96,13 +96,19 @@ export const decode83 = (str: string) => {
return value;
};
-export const intToRGB = (int: number) => ({
+export interface RGB {
+ r: number;
+ g: number;
+ b: number;
+}
+
+export const intToRGB = (int: number): RGB => ({
r: Math.max(0, int >> 16),
g: Math.max(0, (int >> 8) & 255),
b: Math.max(0, int & 255),
});
-export const getAverageFromBlurhash = (blurhash: string) => {
+export const getAverageFromBlurhash = (blurhash: string | null) => {
if (!blurhash) {
return null;
}
diff --git a/app/javascript/mastodon/common.js b/app/javascript/mastodon/common.ts
similarity index 67%
rename from app/javascript/mastodon/common.js
rename to app/javascript/mastodon/common.ts
index c61e02250c..e621a24e39 100644
--- a/app/javascript/mastodon/common.js
+++ b/app/javascript/mastodon/common.ts
@@ -1,8 +1,6 @@
import Rails from '@rails/ujs';
export function start() {
- require.context('../images/', true, /\.(jpg|png|svg)$/);
-
try {
Rails.start();
} catch {
diff --git a/app/javascript/mastodon/components/__tests__/__snapshots__/autosuggest_emoji-test.jsx.snap b/app/javascript/mastodon/components/__tests__/__snapshots__/autosuggest_emoji-test.jsx.snap
index dc955b7abe..9502accb73 100644
--- a/app/javascript/mastodon/components/__tests__/__snapshots__/autosuggest_emoji-test.jsx.snap
+++ b/app/javascript/mastodon/components/__tests__/__snapshots__/autosuggest_emoji-test.jsx.snap
@@ -1,6 +1,6 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
-exports[` renders emoji with custom url 1`] = `
+exports[` > renders emoji with custom url 1`] = `
@@ -17,7 +17,7 @@ exports[`
renders emoji with custom url 1`] = `
diff --git a/app/javascript/mastodon/components/__tests__/__snapshots__/avatar-test.jsx.snap b/app/javascript/mastodon/components/__tests__/__snapshots__/avatar-test.jsx.snap
index 124b50d8c7..c25dc59c86 100644
--- a/app/javascript/mastodon/components/__tests__/__snapshots__/avatar-test.jsx.snap
+++ b/app/javascript/mastodon/components/__tests__/__snapshots__/avatar-test.jsx.snap
@@ -1,6 +1,6 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
-exports[`
Autoplay renders a animated avatar 1`] = `
+exports[`
> Autoplay > renders a animated avatar 1`] = `
Autoplay renders a animated avatar 1`] = `
renders a overlay avatar 1`] = `
adds class "button-secondary" if props.secondary given 1`] = `
+exports[`
> adds class "button-secondary" if props.secondary given 1`] = `
adds class "button-secondary" if props.secondary given 1`] =
/>
`;
-exports[`
renders a button element 1`] = `
+exports[`
> renders a button element 1`] = `
renders a button element 1`] = `
/>
`;
-exports[`
renders a disabled attribute if props.disabled given 1`] = `
+exports[`
> renders a disabled attribute if props.disabled given 1`] = `
renders a disabled attribute if props.disabled given 1`] = `
/>
`;
-exports[`
renders class="button--block" if props.block given 1`] = `
+exports[`
> renders class="button--block" if props.block given 1`] = `
renders class="button--block" if props.block given 1`] = `
/>
`;
-exports[`
renders the children 1`] = `
+exports[`
> renders the children 1`] = `
renders the children 1`] = `
`;
-exports[`
renders the given text 1`] = `
+exports[`
> renders the given text 1`] = `
renders the given text 1`] = `
`;
-exports[`
renders the props.text instead of children 1`] = `
+exports[`
> renders the props.text instead of children 1`] = `
renders display name + account name 1`] = `
+exports[`
> renders display name + account name 1`] = `
', () => {
- const account = fromJS({
+ const account = createAccountFromServerJSON({
+ ...accountDefaultValues,
username: 'alice',
acct: 'alice',
display_name: 'Alice',
diff --git a/app/javascript/mastodon/components/__tests__/button-test.jsx b/app/javascript/mastodon/components/__tests__/button-test.jsx
index f38ff6a7dd..dcaf5f43a1 100644
--- a/app/javascript/mastodon/components/__tests__/button-test.jsx
+++ b/app/javascript/mastodon/components/__tests__/button-test.jsx
@@ -1,6 +1,6 @@
import renderer from 'react-test-renderer';
-import { render, fireEvent, screen } from 'mastodon/test_helpers';
+import { render, fireEvent, screen } from '@/testing/rendering';
import { Button } from '../button';
@@ -21,7 +21,7 @@ describe('
', () => {
});
it('handles click events using the given handler', () => {
- const handler = jest.fn();
+ const handler = vi.fn();
render(
);
fireEvent.click(screen.getByText('button'));
@@ -29,7 +29,7 @@ describe('
', () => {
});
it('does not handle click events if props.disabled given', () => {
- const handler = jest.fn();
+ const handler = vi.fn();
render(
);
fireEvent.click(screen.getByText('button'));
diff --git a/app/javascript/mastodon/components/account.tsx b/app/javascript/mastodon/components/account.tsx
deleted file mode 100644
index 00d3cf27ba..0000000000
--- a/app/javascript/mastodon/components/account.tsx
+++ /dev/null
@@ -1,235 +0,0 @@
-import { useCallback } from 'react';
-
-import { defineMessages, useIntl, FormattedMessage } from 'react-intl';
-
-import classNames from 'classnames';
-import { Link } from 'react-router-dom';
-
-import MoreHorizIcon from '@/material-icons/400-24px/more_horiz.svg?react';
-import {
- blockAccount,
- unblockAccount,
- muteAccount,
- unmuteAccount,
-} from 'mastodon/actions/accounts';
-import { initMuteModal } from 'mastodon/actions/mutes';
-import { Avatar } from 'mastodon/components/avatar';
-import { Button } from 'mastodon/components/button';
-import { FollowersCounter } from 'mastodon/components/counters';
-import { DisplayName } from 'mastodon/components/display_name';
-import { FollowButton } from 'mastodon/components/follow_button';
-import { RelativeTimestamp } from 'mastodon/components/relative_timestamp';
-import { ShortNumber } from 'mastodon/components/short_number';
-import { Skeleton } from 'mastodon/components/skeleton';
-import { VerifiedBadge } from 'mastodon/components/verified_badge';
-import DropdownMenu from 'mastodon/containers/dropdown_menu_container';
-import { me } from 'mastodon/initial_state';
-import { useAppSelector, useAppDispatch } from 'mastodon/store';
-
-const messages = defineMessages({
- follow: { id: 'account.follow', defaultMessage: 'Follow' },
- unfollow: { id: 'account.unfollow', defaultMessage: 'Unfollow' },
- cancel_follow_request: {
- id: 'account.cancel_follow_request',
- defaultMessage: 'Withdraw follow request',
- },
- unblock: { id: 'account.unblock_short', defaultMessage: 'Unblock' },
- unmute: { id: 'account.unmute_short', defaultMessage: 'Unmute' },
- mute_notifications: {
- id: 'account.mute_notifications_short',
- defaultMessage: 'Mute notifications',
- },
- unmute_notifications: {
- id: 'account.unmute_notifications_short',
- defaultMessage: 'Unmute notifications',
- },
- mute: { id: 'account.mute_short', defaultMessage: 'Mute' },
- block: { id: 'account.block_short', defaultMessage: 'Block' },
- more: { id: 'status.more', defaultMessage: 'More' },
-});
-
-export const Account: React.FC<{
- size?: number;
- id: string;
- hidden?: boolean;
- minimal?: boolean;
- defaultAction?: 'block' | 'mute';
- withBio?: boolean;
-}> = ({ id, size = 46, hidden, minimal, defaultAction, withBio }) => {
- const intl = useIntl();
- const account = useAppSelector((state) => state.accounts.get(id));
- const relationship = useAppSelector((state) => state.relationships.get(id));
- const dispatch = useAppDispatch();
-
- const handleBlock = useCallback(() => {
- if (relationship?.blocking) {
- dispatch(unblockAccount(id));
- } else {
- dispatch(blockAccount(id));
- }
- }, [dispatch, id, relationship]);
-
- const handleMute = useCallback(() => {
- if (relationship?.muting) {
- dispatch(unmuteAccount(id));
- } else {
- dispatch(initMuteModal(account));
- }
- }, [dispatch, id, account, relationship]);
-
- const handleMuteNotifications = useCallback(() => {
- dispatch(muteAccount(id, true));
- }, [dispatch, id]);
-
- const handleUnmuteNotifications = useCallback(() => {
- dispatch(muteAccount(id, false));
- }, [dispatch, id]);
-
- if (hidden) {
- return (
- <>
- {account?.display_name}
- {account?.username}
-
- );
- }
-
- let buttons;
-
- if (account && account.id !== me && relationship) {
- const { requested, blocking, muting } = relationship;
-
- if (requested) {
- buttons =
;
- } else if (blocking) {
- buttons = (
-
- );
- } else if (muting) {
- const menu = [
- {
- text: intl.formatMessage(
- relationship.muting_notifications
- ? messages.unmute_notifications
- : messages.mute_notifications,
- ),
- action: relationship.muting_notifications
- ? handleUnmuteNotifications
- : handleMuteNotifications,
- },
- ];
-
- buttons = (
- <>
-
-
-
-
- );
- } else if (defaultAction === 'mute') {
- buttons = (
-
- );
- } else if (defaultAction === 'block') {
- buttons = (
-
- );
- } else {
- buttons =
;
- }
- } else {
- buttons =
;
- }
-
- let muteTimeRemaining;
-
- if (account?.mute_expires_at) {
- muteTimeRemaining = (
- <>
- ·
-
- );
- }
-
- let verification;
-
- const firstVerifiedField = account?.fields.find((item) => !!item.verified_at);
-
- if (firstVerifiedField) {
- verification =
;
- }
-
- return (
-
-
-
-
- {account ? (
-
- ) : (
-
- )}
-
-
-
-
-
- {!minimal && (
-
- {account ? (
- <>
- {' '}
- {verification} {muteTimeRemaining}
-
- ) : (
-
- )}
-
- )}
-
-
-
- {!minimal &&
{buttons}
}
-
-
- {account &&
- withBio &&
- (account.note.length > 0 ? (
-
- ) : (
-
-
-
- ))}
-
- );
-};
diff --git a/app/javascript/mastodon/components/account/account.stories.tsx b/app/javascript/mastodon/components/account/account.stories.tsx
new file mode 100644
index 0000000000..3a3a255b7f
--- /dev/null
+++ b/app/javascript/mastodon/components/account/account.stories.tsx
@@ -0,0 +1,120 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { accountFactoryState, relationshipsFactory } from '@/testing/factories';
+
+import { Account } from './index';
+
+const meta = {
+ title: 'Components/Account',
+ component: Account,
+ argTypes: {
+ id: {
+ type: 'string',
+ description: 'ID of the account to display',
+ },
+ size: {
+ type: 'number',
+ description: 'Size of the avatar in pixels',
+ },
+ hidden: {
+ type: 'boolean',
+ description: 'Whether the account is hidden or not',
+ },
+ minimal: {
+ type: 'boolean',
+ description: 'Whether to display a minimal version of the account',
+ },
+ defaultAction: {
+ type: 'string',
+ control: 'select',
+ options: ['block', 'mute'],
+ description: 'Default action to take on the account',
+ },
+ withBio: {
+ type: 'boolean',
+ description: 'Whether to display the account bio or not',
+ },
+ withMenu: {
+ type: 'boolean',
+ description: 'Whether to display the account menu or not',
+ },
+ },
+ args: {
+ id: '1',
+ size: 46,
+ hidden: false,
+ minimal: false,
+ defaultAction: 'mute',
+ withBio: false,
+ withMenu: true,
+ },
+ parameters: {
+ state: {
+ accounts: {
+ '1': accountFactoryState(),
+ },
+ },
+ },
+} satisfies Meta
;
+
+export default meta;
+
+type Story = StoryObj;
+
+export const Primary: Story = {
+ args: {
+ id: '1',
+ },
+};
+
+export const Hidden: Story = {
+ args: {
+ hidden: true,
+ },
+};
+
+export const Minimal: Story = {
+ args: {
+ minimal: true,
+ },
+};
+
+export const WithBio: Story = {
+ args: {
+ withBio: true,
+ },
+};
+
+export const NoMenu: Story = {
+ args: {
+ withMenu: false,
+ },
+};
+
+export const Blocked: Story = {
+ args: {
+ defaultAction: 'block',
+ },
+ parameters: {
+ state: {
+ relationships: {
+ '1': relationshipsFactory({
+ blocking: true,
+ }),
+ },
+ },
+ },
+};
+
+export const Muted: Story = {
+ args: {},
+ parameters: {
+ state: {
+ relationships: {
+ '1': relationshipsFactory({
+ muting: true,
+ }),
+ },
+ },
+ },
+};
diff --git a/app/javascript/mastodon/components/account/index.tsx b/app/javascript/mastodon/components/account/index.tsx
new file mode 100644
index 0000000000..8397695a44
--- /dev/null
+++ b/app/javascript/mastodon/components/account/index.tsx
@@ -0,0 +1,357 @@
+import { useCallback, useMemo } from 'react';
+
+import { defineMessages, useIntl, FormattedMessage } from 'react-intl';
+
+import classNames from 'classnames';
+import { Link } from 'react-router-dom';
+
+import MoreHorizIcon from '@/material-icons/400-24px/more_horiz.svg?react';
+import {
+ blockAccount,
+ unblockAccount,
+ muteAccount,
+ unmuteAccount,
+ followAccountSuccess,
+ unpinAccount,
+ pinAccount,
+} from 'mastodon/actions/accounts';
+import { showAlertForError } from 'mastodon/actions/alerts';
+import { openModal } from 'mastodon/actions/modal';
+import { initMuteModal } from 'mastodon/actions/mutes';
+import { apiFollowAccount } from 'mastodon/api/accounts';
+import { Avatar } from 'mastodon/components/avatar';
+import { Button } from 'mastodon/components/button';
+import { FollowersCounter } from 'mastodon/components/counters';
+import { DisplayName } from 'mastodon/components/display_name';
+import { Dropdown } from 'mastodon/components/dropdown_menu';
+import { FollowButton } from 'mastodon/components/follow_button';
+import { RelativeTimestamp } from 'mastodon/components/relative_timestamp';
+import { ShortNumber } from 'mastodon/components/short_number';
+import { Skeleton } from 'mastodon/components/skeleton';
+import { VerifiedBadge } from 'mastodon/components/verified_badge';
+import { useIdentity } from 'mastodon/identity_context';
+import { me } from 'mastodon/initial_state';
+import type { MenuItem } from 'mastodon/models/dropdown_menu';
+import { useAppSelector, useAppDispatch } from 'mastodon/store';
+
+const messages = defineMessages({
+ follow: { id: 'account.follow', defaultMessage: 'Follow' },
+ unfollow: { id: 'account.unfollow', defaultMessage: 'Unfollow' },
+ cancel_follow_request: {
+ id: 'account.cancel_follow_request',
+ defaultMessage: 'Withdraw follow request',
+ },
+ unblock: { id: 'account.unblock_short', defaultMessage: 'Unblock' },
+ unmute: { id: 'account.unmute_short', defaultMessage: 'Unmute' },
+ mute_notifications: {
+ id: 'account.mute_notifications_short',
+ defaultMessage: 'Mute notifications',
+ },
+ unmute_notifications: {
+ id: 'account.unmute_notifications_short',
+ defaultMessage: 'Unmute notifications',
+ },
+ mute: { id: 'account.mute_short', defaultMessage: 'Mute' },
+ block: { id: 'account.block_short', defaultMessage: 'Block' },
+ more: { id: 'status.more', defaultMessage: 'More' },
+ addToLists: {
+ id: 'account.add_or_remove_from_list',
+ defaultMessage: 'Add or Remove from lists',
+ },
+ openOriginalPage: {
+ id: 'account.open_original_page',
+ defaultMessage: 'Open original page',
+ },
+});
+
+interface AccountProps {
+ size?: number;
+ id: string;
+ hidden?: boolean;
+ minimal?: boolean;
+ defaultAction?: 'block' | 'mute';
+ withBio?: boolean;
+ withMenu?: boolean;
+}
+
+export const Account: React.FC = ({
+ id,
+ size = 46,
+ hidden,
+ minimal,
+ defaultAction,
+ withBio,
+ withMenu = true,
+}) => {
+ const intl = useIntl();
+ const { signedIn } = useIdentity();
+ const account = useAppSelector((state) => state.accounts.get(id));
+ const relationship = useAppSelector((state) => state.relationships.get(id));
+ const dispatch = useAppDispatch();
+ const accountUrl = account?.url;
+ const isRemote = account?.acct !== account?.username;
+
+ const handleBlock = useCallback(() => {
+ if (relationship?.blocking) {
+ dispatch(unblockAccount(id));
+ } else {
+ dispatch(blockAccount(id));
+ }
+ }, [dispatch, id, relationship]);
+
+ const handleMute = useCallback(() => {
+ if (relationship?.muting) {
+ dispatch(unmuteAccount(id));
+ } else {
+ dispatch(initMuteModal(account));
+ }
+ }, [dispatch, id, account, relationship]);
+
+ const menu = useMemo(() => {
+ let arr: MenuItem[] = [];
+
+ if (defaultAction === 'mute') {
+ const handleMuteNotifications = () => {
+ dispatch(muteAccount(id, true));
+ };
+
+ const handleUnmuteNotifications = () => {
+ dispatch(muteAccount(id, false));
+ };
+
+ arr = [
+ {
+ text: intl.formatMessage(
+ relationship?.muting_notifications
+ ? messages.unmute_notifications
+ : messages.mute_notifications,
+ ),
+ action: relationship?.muting_notifications
+ ? handleUnmuteNotifications
+ : handleMuteNotifications,
+ },
+ ];
+ } else if (defaultAction !== 'block') {
+ if (isRemote && accountUrl) {
+ arr.push({
+ text: intl.formatMessage(messages.openOriginalPage),
+ href: accountUrl,
+ });
+ }
+
+ if (signedIn) {
+ const handleAddToLists = () => {
+ const openAddToListModal = () => {
+ dispatch(
+ openModal({
+ modalType: 'LIST_ADDER',
+ modalProps: {
+ accountId: id,
+ },
+ }),
+ );
+ };
+ if (relationship?.following || relationship?.requested || id === me) {
+ openAddToListModal();
+ } else {
+ dispatch(
+ openModal({
+ modalType: 'CONFIRM_FOLLOW_TO_LIST',
+ modalProps: {
+ accountId: id,
+ onConfirm: () => {
+ apiFollowAccount(id)
+ .then((relationship) => {
+ dispatch(
+ followAccountSuccess({
+ relationship,
+ alreadyFollowing: false,
+ }),
+ );
+ openAddToListModal();
+ })
+ .catch((err: unknown) => {
+ dispatch(showAlertForError(err));
+ });
+ },
+ },
+ }),
+ );
+ }
+ };
+
+ arr.push({
+ text: intl.formatMessage(messages.addToLists),
+ action: handleAddToLists,
+ });
+
+ if (id !== me && (relationship?.following || relationship?.requested)) {
+ const handleEndorseToggle = () => {
+ if (relationship.endorsed) {
+ dispatch(unpinAccount(id));
+ } else {
+ dispatch(pinAccount(id));
+ }
+ };
+ arr.push({
+ text: intl.formatMessage(
+ // Defined in features/account_timeline/components/account_header.tsx
+ relationship.endorsed
+ ? { id: 'account.unendorse' }
+ : { id: 'account.endorse' },
+ ),
+ action: handleEndorseToggle,
+ });
+ }
+ }
+ }
+
+ return arr;
+ }, [
+ dispatch,
+ intl,
+ id,
+ accountUrl,
+ relationship,
+ defaultAction,
+ isRemote,
+ signedIn,
+ ]);
+
+ if (hidden) {
+ return (
+ <>
+ {account?.display_name}
+ {account?.username}
+
+ );
+ }
+
+ let button: React.ReactNode;
+ let dropdown: React.ReactNode;
+
+ if (menu.length > 0 && withMenu) {
+ dropdown = (
+
+ );
+ }
+
+ if (defaultAction === 'block') {
+ button = (
+
+ );
+ } else if (defaultAction === 'mute') {
+ button = (
+
+ );
+ } else {
+ button = ;
+ }
+
+ let muteTimeRemaining: React.ReactNode;
+
+ if (account?.mute_expires_at) {
+ muteTimeRemaining = (
+ <>
+ ·
+
+ );
+ }
+
+ let verification: React.ReactNode;
+
+ const firstVerifiedField = account?.fields.find((item) => !!item.verified_at);
+
+ if (firstVerifiedField) {
+ verification = ;
+ }
+
+ return (
+
+
+
+
+
+ {account ? (
+
+ ) : (
+
+ )}
+
+
+
+
+
+ {!minimal && (
+
+ {account ? (
+ <>
+ {' '}
+ {verification} {muteTimeRemaining}
+
+ ) : (
+
+ )}
+
+ )}
+
+
+
+ {account &&
+ withBio &&
+ (account.note.length > 0 ? (
+
+ ) : (
+
+
+
+ ))}
+
+
+ {!minimal && (
+
+ {dropdown}
+ {button}
+
+ )}
+
+
+
+ {title && (
+
+ {formatIfNeeded(intl, title, values)}
+
+ )}
+
+
+ {formatIfNeeded(intl, message, values)}
+
+
+ {action && (
+
+ )}
+
+
+ {alerts.map((alert, idx) => (
+
+ ))}
+
-
diff --git a/app/javascript/mastodon/components/featured_carousel.tsx b/app/javascript/mastodon/components/featured_carousel.tsx
new file mode 100644
index 0000000000..195331ef9f
--- /dev/null
+++ b/app/javascript/mastodon/components/featured_carousel.tsx
@@ -0,0 +1,229 @@
+import type { ComponentPropsWithRef } from 'react';
+import {
+ useCallback,
+ useEffect,
+ useLayoutEffect,
+ useRef,
+ useState,
+ useId,
+} from 'react';
+
+import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
+
+import type { Map as ImmutableMap } from 'immutable';
+import { List as ImmutableList } from 'immutable';
+
+import type { AnimatedProps } from '@react-spring/web';
+import { animated, useSpring } from '@react-spring/web';
+import { useDrag } from '@use-gesture/react';
+
+import { expandAccountFeaturedTimeline } from '@/mastodon/actions/timelines';
+import { Icon } from '@/mastodon/components/icon';
+import { IconButton } from '@/mastodon/components/icon_button';
+import StatusContainer from '@/mastodon/containers/status_container';
+import { usePrevious } from '@/mastodon/hooks/usePrevious';
+import { useAppDispatch, useAppSelector } from '@/mastodon/store';
+import ChevronLeftIcon from '@/material-icons/400-24px/chevron_left.svg?react';
+import ChevronRightIcon from '@/material-icons/400-24px/chevron_right.svg?react';
+import PushPinIcon from '@/material-icons/400-24px/push_pin.svg?react';
+
+const messages = defineMessages({
+ previous: { id: 'featured_carousel.previous', defaultMessage: 'Previous' },
+ next: { id: 'featured_carousel.next', defaultMessage: 'Next' },
+ slide: {
+ id: 'featured_carousel.slide',
+ defaultMessage: '{index} of {total}',
+ },
+});
+
+export const FeaturedCarousel: React.FC<{
+ accountId: string;
+ tagged?: string;
+}> = ({ accountId, tagged }) => {
+ const intl = useIntl();
+ const accessibilityId = useId();
+
+ // Load pinned statuses
+ const dispatch = useAppDispatch();
+ useEffect(() => {
+ if (accountId) {
+ void dispatch(expandAccountFeaturedTimeline(accountId, { tagged }));
+ }
+ }, [accountId, dispatch, tagged]);
+ const pinnedStatuses = useAppSelector(
+ (state) =>
+ (state.timelines as ImmutableMap).getIn(
+ [`account:${accountId}:pinned${tagged ? `:${tagged}` : ''}`, 'items'],
+ ImmutableList(),
+ ) as ImmutableList,
+ );
+
+ // Handle slide change
+ const [slideIndex, setSlideIndex] = useState(0);
+ const wrapperRef = useRef(null);
+ const handleSlideChange = useCallback(
+ (direction: number) => {
+ setSlideIndex((prev) => {
+ const max = pinnedStatuses.size - 1;
+ let newIndex = prev + direction;
+ if (newIndex < 0) {
+ newIndex = max;
+ } else if (newIndex > max) {
+ newIndex = 0;
+ }
+ const slide = wrapperRef.current?.children[newIndex];
+ if (slide) {
+ setCurrentSlideHeight(slide.scrollHeight);
+ }
+ return newIndex;
+ });
+ },
+ [pinnedStatuses.size],
+ );
+
+ // Handle slide heights
+ const [currentSlideHeight, setCurrentSlideHeight] = useState(
+ wrapperRef.current?.scrollHeight ?? 0,
+ );
+ const previousSlideHeight = usePrevious(currentSlideHeight);
+ const observerRef = useRef(
+ new ResizeObserver(() => {
+ handleSlideChange(0);
+ }),
+ );
+ const wrapperStyles = useSpring({
+ x: `-${slideIndex * 100}%`,
+ height: currentSlideHeight,
+ // Don't animate from zero to the height of the initial slide
+ immediate: !previousSlideHeight,
+ });
+ useLayoutEffect(() => {
+ // Update slide height when the component mounts
+ if (currentSlideHeight === 0) {
+ handleSlideChange(0);
+ }
+ }, [currentSlideHeight, handleSlideChange]);
+
+ // Handle swiping animations
+ const bind = useDrag(({ swipe: [swipeX] }) => {
+ handleSlideChange(swipeX * -1); // Invert swipe as swiping left loads the next slide.
+ });
+ const handlePrev = useCallback(() => {
+ handleSlideChange(-1);
+ }, [handleSlideChange]);
+ const handleNext = useCallback(() => {
+ handleSlideChange(1);
+ }, [handleSlideChange]);
+
+ if (!accountId || pinnedStatuses.isEmpty()) {
+ return null;
+ }
+
+ return (
+
+
+
+
+
+
+ {pinnedStatuses.size > 1 && (
+ <>
+
+
+
+ {(text) => {text}}
+
+ {slideIndex + 1} / {pinnedStatuses.size}
+
+
+
+ )}
+
+
+ {pinnedStatuses.map((statusId, index) => (
+
+ ))}
+
+
- {chunks},
- }}
- />
-
+ {chunks},
+ }}
+ />
);
diff --git a/app/javascript/mastodon/components/follow_button.tsx b/app/javascript/mastodon/components/follow_button.tsx
index faf9d8bdb8..4a22bb1c3f 100644
--- a/app/javascript/mastodon/components/follow_button.tsx
+++ b/app/javascript/mastodon/components/follow_button.tsx
@@ -2,6 +2,8 @@ import { useCallback, useEffect } from 'react';
import { useIntl, defineMessages } from 'react-intl';
+import classNames from 'classnames';
+
import { useIdentity } from '@/mastodon/identity_context';
import { fetchRelationships, followAccount } from 'mastodon/actions/accounts';
import { openModal } from 'mastodon/actions/modal';
@@ -14,13 +16,13 @@ const messages = defineMessages({
unfollow: { id: 'account.unfollow', defaultMessage: 'Unfollow' },
follow: { id: 'account.follow', defaultMessage: 'Follow' },
followBack: { id: 'account.follow_back', defaultMessage: 'Follow back' },
- mutual: { id: 'account.mutual', defaultMessage: 'Mutual' },
- edit_profile: { id: 'account.edit_profile', defaultMessage: 'Edit profile' },
+ editProfile: { id: 'account.edit_profile', defaultMessage: 'Edit profile' },
});
export const FollowButton: React.FC<{
accountId?: string;
-}> = ({ accountId }) => {
+ compact?: boolean;
+}> = ({ accountId, compact }) => {
const intl = useIntl();
const dispatch = useAppDispatch();
const { signedIn } = useIdentity();
@@ -52,7 +54,7 @@ export const FollowButton: React.FC<{
);
}
- if (!relationship) return;
+ if (!relationship || !accountId) return;
if (accountId === me) {
return;
@@ -70,11 +72,9 @@ export const FollowButton: React.FC<{
if (!signedIn) {
label = intl.formatMessage(messages.follow);
} else if (accountId === me) {
- label = intl.formatMessage(messages.edit_profile);
+ label = intl.formatMessage(messages.editProfile);
} else if (!relationship) {
label = ;
- } else if (relationship.following && relationship.followed_by) {
- label = intl.formatMessage(messages.mutual);
} else if (relationship.following || relationship.requested) {
label = intl.formatMessage(messages.unfollow);
} else if (relationship.followed_by) {
@@ -88,8 +88,10 @@ export const FollowButton: React.FC<{
{label}
@@ -106,6 +108,7 @@ export const FollowButton: React.FC<{
(account?.suspended || !!account?.moved))
}
secondary={following}
+ compact={compact}
className={following ? 'button--destructive' : undefined}
>
{label}
diff --git a/app/javascript/mastodon/components/formatted_date.tsx b/app/javascript/mastodon/components/formatted_date.tsx
new file mode 100644
index 0000000000..cc927b0873
--- /dev/null
+++ b/app/javascript/mastodon/components/formatted_date.tsx
@@ -0,0 +1,26 @@
+import type { ComponentProps } from 'react';
+
+import { FormattedDate } from 'react-intl';
+
+export const FormattedDateWrapper = (
+ props: ComponentProps & { className?: string },
+) => (
+
+ {(date) => (
+
+ )}
+
+);
+
+const tryIsoString = (date?: string | number | Date): string => {
+ if (!date) {
+ return '';
+ }
+ try {
+ return new Date(date).toISOString();
+ } catch {
+ return date.toString();
+ }
+};
diff --git a/app/javascript/mastodon/components/gif.tsx b/app/javascript/mastodon/components/gif.tsx
index 8fbcb8c76b..1cc0881a5a 100644
--- a/app/javascript/mastodon/components/gif.tsx
+++ b/app/javascript/mastodon/components/gif.tsx
@@ -1,4 +1,4 @@
-import { useHovering } from '@/hooks/useHovering';
+import { useHovering } from 'mastodon/hooks/useHovering';
import { autoPlayGif } from 'mastodon/initial_state';
export const GIF: React.FC<{
diff --git a/app/javascript/mastodon/components/gifv.tsx b/app/javascript/mastodon/components/gifv.tsx
index c2be591128..8e3a434c14 100644
--- a/app/javascript/mastodon/components/gifv.tsx
+++ b/app/javascript/mastodon/components/gifv.tsx
@@ -1,70 +1,70 @@
-import { useCallback, useState } from 'react';
+import { useCallback, useState, forwardRef } from 'react';
interface Props {
src: string;
- key: string;
alt?: string;
lang?: string;
- width: number;
- height: number;
- onClick?: () => void;
+ width?: number;
+ height?: number;
+ onClick?: React.MouseEventHandler;
+ onMouseDown?: React.MouseEventHandler;
+ onTouchStart?: React.TouchEventHandler;
}
-export const GIFV: React.FC = ({
- src,
- alt,
- lang,
- width,
- height,
- onClick,
-}) => {
- const [loading, setLoading] = useState(true);
+export const GIFV = forwardRef(
+ (
+ { src, alt, lang, width, height, onClick, onMouseDown, onTouchStart },
+ ref,
+ ) => {
+ const [loading, setLoading] = useState(true);
- const handleLoadedData: React.ReactEventHandler =
- useCallback(() => {
+ const handleLoadedData = useCallback(() => {
setLoading(false);
}, [setLoading]);
- const handleClick: React.MouseEventHandler = useCallback(
- (e) => {
- if (onClick) {
+ const handleClick = useCallback(
+ (e: React.MouseEvent) => {
e.stopPropagation();
- onClick();
- }
- },
- [onClick],
- );
+ onClick?.(e);
+ },
+ [onClick],
+ );
- return (
-
- {loading && (
-
@@ -134,12 +153,14 @@ export const Hashtag: React.FC = ({
0)}
+ data={history ?? Array.from(Array(7)).map(() => 0)}
>
)}
+
+ {children &&
{children}
}
);
diff --git a/app/javascript/mastodon/components/hashtag_bar.tsx b/app/javascript/mastodon/components/hashtag_bar.tsx
index 1642ba6504..4f88385bef 100644
--- a/app/javascript/mastodon/components/hashtag_bar.tsx
+++ b/app/javascript/mastodon/components/hashtag_bar.tsx
@@ -20,6 +20,7 @@ export type StatusLike = Record<{
contentHTML: string;
media_attachments: List;
spoiler_text?: string;
+ account: Record<{ id: string }>;
}>;
function normalizeHashtag(hashtag: string) {
@@ -195,13 +196,19 @@ export function getHashtagBarForStatus(status: StatusLike) {
return {
statusContentProps,
- hashtagBar: ,
+ hashtagBar: (
+
+ ),
};
}
const HashtagBar: React.FC<{
hashtags: string[];
-}> = ({ hashtags }) => {
+ accountId: string;
+}> = ({ hashtags, accountId }) => {
const [expanded, setExpanded] = useState(false);
const handleClick = useCallback(() => {
setExpanded(true);
@@ -218,7 +225,11 @@ const HashtagBar: React.FC<{
return (
{revealedHashtags.map((hashtag) => (
-
+
#
{hashtag}
))}
diff --git a/app/javascript/mastodon/components/hover_card_account.tsx b/app/javascript/mastodon/components/hover_card_account.tsx
index 05033e4ac7..a6bdda2168 100644
--- a/app/javascript/mastodon/components/hover_card_account.tsx
+++ b/app/javascript/mastodon/components/hover_card_account.tsx
@@ -9,12 +9,18 @@ import { fetchAccount } from 'mastodon/actions/accounts';
import { AccountBio } from 'mastodon/components/account_bio';
import { AccountFields } from 'mastodon/components/account_fields';
import { Avatar } from 'mastodon/components/avatar';
-import { FollowersCounter } from 'mastodon/components/counters';
+import { AvatarGroup } from 'mastodon/components/avatar_group';
+import {
+ FollowersCounter,
+ FollowersYouKnowCounter,
+} from 'mastodon/components/counters';
import { DisplayName } from 'mastodon/components/display_name';
import { FollowButton } from 'mastodon/components/follow_button';
import { LoadingIndicator } from 'mastodon/components/loading_indicator';
import { ShortNumber } from 'mastodon/components/short_number';
+import { useFetchFamiliarFollowers } from 'mastodon/features/account_timeline/hooks/familiar_followers';
import { domain } from 'mastodon/initial_state';
+import { getAccountHidden } from 'mastodon/selectors/accounts';
import { useAppSelector, useAppDispatch } from 'mastodon/store';
export const HoverCardAccount = forwardRef<
@@ -26,6 +32,11 @@ export const HoverCardAccount = forwardRef<
const account = useAppSelector((state) =>
accountId ? state.accounts.get(accountId) : undefined,
);
+ const suspended = account?.suspended;
+ const hidden = useAppSelector((state) =>
+ accountId ? getAccountHidden(state, accountId) : undefined,
+ );
+ const isSuspendedOrHidden = Boolean(suspended || hidden);
const note = useAppSelector(
(state) =>
@@ -38,6 +49,21 @@ export const HoverCardAccount = forwardRef<
}
}, [dispatch, accountId, account]);
+ const { familiarFollowers } = useFetchFamiliarFollowers({ accountId });
+
+ const relationship = useAppSelector((state) =>
+ accountId ? state.relationships.get(accountId) : undefined,
+ );
+ const isMutual = relationship?.followed_by && relationship.following;
+ const isFollower = relationship?.followed_by;
+ const hasRelationshipLoaded = !!relationship;
+
+ const shouldDisplayFamiliarFollowers =
+ familiarFollowers.length > 0 &&
+ hasRelationshipLoaded &&
+ !isMutual &&
+ !isFollower;
+
return (
-
+
-
-
-
- {note && note.length > 0 && (
-
- -
-
-
- - {note}
-
- )}
-
+ {isSuspendedOrHidden ? (
+
+ {suspended ? (
+
+ ) : (
+
+ )}
+
+ ) : (
+ <>
+
+
+
+ {note && note.length > 0 && (
+
+ -
+
+
+ - {note}
+
+ )}
+
-
-
-
+
+
+ {shouldDisplayFamiliarFollowers && (
+ <>
+ ·
+
+
+
+ {familiarFollowers.slice(0, 3).map((account) => (
+
+ ))}
+
+
+
+ )}
+ {(isMutual || isFollower) && (
+ <>
+ ·
+ {isMutual ? (
+
+ ) : (
+
+ )}
+
+ )}
+
-
+
+
+ )}
) : (
diff --git a/app/javascript/mastodon/components/hover_card_controller.tsx b/app/javascript/mastodon/components/hover_card_controller.tsx
index 057ef1aaed..38c3306f30 100644
--- a/app/javascript/mastodon/components/hover_card_controller.tsx
+++ b/app/javascript/mastodon/components/hover_card_controller.tsx
@@ -8,8 +8,8 @@ import type {
UsePopperOptions,
} from 'react-overlays/esm/usePopper';
-import { useTimeout } from 'mastodon/../hooks/useTimeout';
import { HoverCardAccount } from 'mastodon/components/hover_card_account';
+import { useTimeout } from 'mastodon/hooks/useTimeout';
const offset = [-12, 4] as OffsetValue;
const enterDelay = 750;
diff --git a/app/javascript/mastodon/components/icon.tsx b/app/javascript/mastodon/components/icon.tsx
index f388380c44..165c214c10 100644
--- a/app/javascript/mastodon/components/icon.tsx
+++ b/app/javascript/mastodon/components/icon.tsx
@@ -13,14 +13,13 @@ interface Props extends React.SVGProps
{
children?: never;
id: string;
icon: IconProp;
- title?: string;
}
export const Icon: React.FC = ({
id,
icon: IconComponent,
className,
- title: titleProp,
+ 'aria-label': ariaLabel,
...other
}) => {
// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
@@ -34,18 +33,19 @@ export const Icon: React.FC = ({
IconComponent = CheckBoxOutlineBlankIcon;
}
- const ariaHidden = titleProp ? undefined : true;
+ const ariaHidden = ariaLabel ? undefined : true;
const role = !ariaHidden ? 'img' : undefined;
// Set the title to an empty string to remove the built-in SVG one if any
// eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
- const title = titleProp || '';
+ const title = ariaLabel || '';
return (
diff --git a/app/javascript/mastodon/components/icon_button.tsx b/app/javascript/mastodon/components/icon_button.tsx
index e38e387712..cd0234e39a 100644
--- a/app/javascript/mastodon/components/icon_button.tsx
+++ b/app/javascript/mastodon/components/icon_button.tsx
@@ -1,4 +1,4 @@
-import { PureComponent, createRef } from 'react';
+import { useState, useEffect, useCallback, forwardRef } from 'react';
import classNames from 'classnames';
@@ -15,99 +15,110 @@ interface Props {
onMouseDown?: React.MouseEventHandler;
onKeyDown?: React.KeyboardEventHandler;
onKeyPress?: React.KeyboardEventHandler;
- active: boolean;
+ active?: boolean;
expanded?: boolean;
style?: React.CSSProperties;
activeStyle?: React.CSSProperties;
- disabled: boolean;
+ disabled?: boolean;
inverted?: boolean;
- animate: boolean;
- overlay: boolean;
- tabIndex: number;
+ animate?: boolean;
+ overlay?: boolean;
+ tabIndex?: number;
counter?: number;
href?: string;
- ariaHidden: boolean;
+ ariaHidden?: boolean;
+ ariaControls?: string;
}
-interface States {
- activate: boolean;
- deactivate: boolean;
-}
-export class IconButton extends PureComponent {
- buttonRef = createRef();
- static defaultProps = {
- active: false,
- disabled: false,
- animate: false,
- overlay: false,
- tabIndex: 0,
- ariaHidden: false,
- };
-
- state = {
- activate: false,
- deactivate: false,
- };
-
- UNSAFE_componentWillReceiveProps(nextProps: Props) {
- if (!nextProps.animate) return;
-
- if (this.props.active && !nextProps.active) {
- this.setState({ activate: false, deactivate: true });
- } else if (!this.props.active && nextProps.active) {
- this.setState({ activate: true, deactivate: false });
- }
- }
-
- handleClick: React.MouseEventHandler = (e) => {
- e.preventDefault();
-
- if (!this.props.disabled && this.props.onClick != null) {
- this.props.onClick(e);
- }
- };
-
- handleKeyPress: React.KeyboardEventHandler = (e) => {
- if (this.props.onKeyPress && !this.props.disabled) {
- this.props.onKeyPress(e);
- }
- };
-
- handleMouseDown: React.MouseEventHandler = (e) => {
- if (!this.props.disabled && this.props.onMouseDown) {
- this.props.onMouseDown(e);
- }
- };
-
- handleKeyDown: React.KeyboardEventHandler = (e) => {
- if (!this.props.disabled && this.props.onKeyDown) {
- this.props.onKeyDown(e);
- }
- };
-
- render() {
- const style = {
- ...this.props.style,
- ...(this.props.active ? this.props.activeStyle : {}),
- };
-
- const {
- active,
+export const IconButton = forwardRef(
+ (
+ {
className,
- disabled,
expanded,
icon,
iconComponent,
inverted,
- overlay,
- tabIndex,
title,
counter,
href,
- ariaHidden,
- } = this.props;
+ style,
+ activeStyle,
+ onClick,
+ onKeyDown,
+ onKeyPress,
+ onMouseDown,
+ active = false,
+ disabled = false,
+ animate = false,
+ overlay = false,
+ tabIndex = 0,
+ ariaHidden = false,
+ ariaControls,
+ },
+ buttonRef,
+ ) => {
+ const [activate, setActivate] = useState(false);
+ const [deactivate, setDeactivate] = useState(false);
- const { activate, deactivate } = this.state;
+ useEffect(() => {
+ if (!animate) {
+ return;
+ }
+
+ if (activate && !active) {
+ setActivate(false);
+ setDeactivate(true);
+ } else if (!activate && active) {
+ setActivate(true);
+ setDeactivate(false);
+ }
+ }, [setActivate, setDeactivate, animate, active, activate]);
+
+ const handleClick: React.MouseEventHandler = useCallback(
+ (e) => {
+ e.preventDefault();
+
+ if (!disabled) {
+ onClick?.(e);
+ }
+ },
+ [disabled, onClick],
+ );
+
+ const handleKeyPress: React.KeyboardEventHandler =
+ useCallback(
+ (e) => {
+ if (!disabled) {
+ onKeyPress?.(e);
+ }
+ },
+ [disabled, onKeyPress],
+ );
+
+ const handleMouseDown: React.MouseEventHandler =
+ useCallback(
+ (e) => {
+ if (!disabled) {
+ onMouseDown?.(e);
+ }
+ },
+ [disabled, onMouseDown],
+ );
+
+ const handleKeyDown: React.KeyboardEventHandler =
+ useCallback(
+ (e) => {
+ if (!disabled) {
+ onKeyDown?.(e);
+ }
+ },
+ [disabled, onKeyDown],
+ );
+
+ const buttonStyle = {
+ ...style,
+ ...(active ? activeStyle : {}),
+ };
const classes = classNames(className, 'icon-button', {
active,
@@ -144,19 +155,22 @@ export class IconButton extends PureComponent {
aria-label={title}
aria-expanded={expanded}
aria-hidden={ariaHidden}
+ aria-controls={ariaControls}
title={title}
className={classes}
- onClick={this.handleClick}
- onMouseDown={this.handleMouseDown}
- onKeyDown={this.handleKeyDown}
- onKeyPress={this.handleKeyPress}
- style={style}
+ onClick={handleClick}
+ onMouseDown={handleMouseDown}
+ onKeyDown={handleKeyDown}
+ onKeyPress={handleKeyPress} // eslint-disable-line @typescript-eslint/no-deprecated
+ style={buttonStyle}
tabIndex={tabIndex}
disabled={disabled}
- ref={this.buttonRef}
+ ref={buttonRef}
>
{contents}
);
- }
-}
+ },
+);
+
+IconButton.displayName = 'IconButton';
diff --git a/app/javascript/mastodon/components/icon_with_badge.tsx b/app/javascript/mastodon/components/icon_with_badge.tsx
index c6ab34479c..3469fec338 100644
--- a/app/javascript/mastodon/components/icon_with_badge.tsx
+++ b/app/javascript/mastodon/components/icon_with_badge.tsx
@@ -7,7 +7,7 @@ interface Props {
id: string;
icon: IconProp;
count: number;
- issueBadge: boolean;
+ issueBadge?: boolean;
className: string;
}
export const IconWithBadge: React.FC = ({
diff --git a/app/javascript/mastodon/components/load_gap.tsx b/app/javascript/mastodon/components/load_gap.tsx
index 544b5e1461..6cbdee6ce5 100644
--- a/app/javascript/mastodon/components/load_gap.tsx
+++ b/app/javascript/mastodon/components/load_gap.tsx
@@ -1,9 +1,10 @@
-import { useCallback } from 'react';
+import { useCallback, useState } from 'react';
import { useIntl, defineMessages } from 'react-intl';
import MoreHorizIcon from '@/material-icons/400-24px/more_horiz.svg?react';
import { Icon } from 'mastodon/components/icon';
+import { LoadingIndicator } from 'mastodon/components/loading_indicator';
const messages = defineMessages({
load_more: { id: 'status.load_more', defaultMessage: 'Load more' },
@@ -17,10 +18,12 @@ interface Props {
export const LoadGap = ({ disabled, param, onClick }: Props) => {
const intl = useIntl();
+ const [loading, setLoading] = useState(false);
const handleClick = useCallback(() => {
+ setLoading(true);
onClick(param);
- }, [param, onClick]);
+ }, [setLoading, param, onClick]);
return (
);
};
diff --git a/app/javascript/mastodon/components/load_more.tsx b/app/javascript/mastodon/components/load_more.tsx
index 8b5746ad30..aee235bb09 100644
--- a/app/javascript/mastodon/components/load_more.tsx
+++ b/app/javascript/mastodon/components/load_more.tsx
@@ -1,24 +1,32 @@
import { FormattedMessage } from 'react-intl';
+import { LoadingIndicator } from './loading_indicator';
+
interface Props {
onClick: (event: React.MouseEvent) => void;
disabled?: boolean;
visible?: boolean;
+ loading?: boolean;
}
export const LoadMore: React.FC = ({
onClick,
disabled,
visible = true,
+ loading = false,
}) => {
return (
);
};
diff --git a/app/javascript/mastodon/components/loading_indicator.tsx b/app/javascript/mastodon/components/loading_indicator.tsx
index fcdbe80d8a..53d216a994 100644
--- a/app/javascript/mastodon/components/loading_indicator.tsx
+++ b/app/javascript/mastodon/components/loading_indicator.tsx
@@ -6,15 +6,34 @@ const messages = defineMessages({
loading: { id: 'loading_indicator.label', defaultMessage: 'Loading…' },
});
-export const LoadingIndicator: React.FC = () => {
+interface LoadingIndicatorProps {
+ /**
+ * Use role='none' to opt out of the current default role 'progressbar'
+ * and aria attributes which we should re-visit to check if they're appropriate.
+ * In Firefox the aria-label is not applied, instead an implied value of `50` is
+ * used as the label.
+ */
+ role?: string;
+}
+
+export const LoadingIndicator: React.FC = ({
+ role = 'progressbar',
+}) => {
const intl = useIntl();
+ const a11yProps =
+ role === 'progressbar'
+ ? ({
+ role,
+ 'aria-busy': true,
+ 'aria-live': 'polite',
+ } as const)
+ : undefined;
+
return (
diff --git a/app/javascript/mastodon/components/media_gallery.jsx b/app/javascript/mastodon/components/media_gallery.jsx
index 59963a0a9f..64250236d8 100644
--- a/app/javascript/mastodon/components/media_gallery.jsx
+++ b/app/javascript/mastodon/components/media_gallery.jsx
@@ -12,6 +12,7 @@ import { debounce } from 'lodash';
import { AltTextBadge } from 'mastodon/components/alt_text_badge';
import { Blurhash } from 'mastodon/components/blurhash';
+import { SpoilerButton } from 'mastodon/components/spoiler_button';
import { formatTime } from 'mastodon/features/video';
import { autoPlayGif, displayMedia, useBlurhash } from '../initial_state';
@@ -38,6 +39,7 @@ class Item extends PureComponent {
state = {
loaded: false,
+ error: false,
};
handleMouseEnter = (e) => {
@@ -81,6 +83,10 @@ class Item extends PureComponent {
this.setState({ loaded: true });
};
+ handleImageError = () => {
+ this.setState({ error: true });
+ };
+
render () {
const { attachment, lang, index, size, standalone, displayWidth, visible } = this.props;
@@ -106,7 +112,7 @@ class Item extends PureComponent {
if (attachment.get('type') === 'unknown') {
return (
-
+
);
@@ -167,7 +173,6 @@ class Item extends PureComponent {