import escapeTextContentForBrowser from 'escape-html'; import { Map as ImmutableMap, List as ImmutableList } from 'immutable'; import DOMPurify from 'isomorphic-dompurify'; import emojify from 'soapbox/features/emoji'; import { normalizeStatus } from 'soapbox/normalizers'; import { simulateEmojiReact, simulateUnEmojiReact } from 'soapbox/utils/emoji-reacts'; import { stripCompatibilityFeatures, unescapeHTML } from 'soapbox/utils/html'; import { makeEmojiMap, normalizeId } from 'soapbox/utils/normalizers'; import { EMOJI_REACT_REQUEST, UNEMOJI_REACT_REQUEST, } from '../actions/emoji-reacts'; import { EVENT_JOIN_REQUEST, EVENT_JOIN_FAIL, EVENT_LEAVE_REQUEST, EVENT_LEAVE_FAIL, } from '../actions/events'; import { STATUS_IMPORT, STATUSES_IMPORT } from '../actions/importer'; import { REBLOG_REQUEST, REBLOG_FAIL, UNREBLOG_REQUEST, UNREBLOG_FAIL, FAVOURITE_REQUEST, UNFAVOURITE_REQUEST, FAVOURITE_FAIL, DISLIKE_REQUEST, UNDISLIKE_REQUEST, DISLIKE_FAIL, } from '../actions/interactions'; import { STATUS_CREATE_REQUEST, STATUS_CREATE_FAIL, STATUS_DELETE_REQUEST, STATUS_DELETE_FAIL, STATUS_HIDE, STATUS_MUTE_SUCCESS, STATUS_REVEAL, STATUS_TRANSLATE_FAIL, STATUS_TRANSLATE_REQUEST, STATUS_TRANSLATE_SUCCESS, STATUS_TRANSLATE_UNDO, STATUS_UNFILTER, STATUS_UNMUTE_SUCCESS, STATUS_LANGUAGE_CHANGE, } from '../actions/statuses'; import { TIMELINE_DELETE } from '../actions/timelines'; import type { AnyAction } from 'redux'; import type { APIEntity } from 'soapbox/types/entities'; const domParser = new DOMParser(); type StatusRecord = ReturnType; type APIEntities = Array; type State = ImmutableMap; interface ReducerStatus extends StatusRecord { reblog: string | null; poll: string | null; quote: string | null; } const minifyStatus = (status: StatusRecord): ReducerStatus => status.mergeWith((o, n) => n || o, { reblog: normalizeId(status.getIn(['reblog', 'id'])), poll: normalizeId(status.getIn(['poll', 'id'])), quote: normalizeId(status.getIn(['quote', 'id'])), }) as ReducerStatus; // Gets titles of poll options from status const getPollOptionTitles = ({ poll }: StatusRecord): readonly string[] => { if (poll && typeof poll === 'object') { return poll.options.map(({ title }) => title); } else { return []; } }; // Gets usernames of mentioned users from status const getMentionedUsernames = (status: StatusRecord): ImmutableList => status.mentions.map(({ acct }) => `@${acct}`); // Creates search text from the status const buildSearchContent = (status: StatusRecord): string => { const pollOptionTitles = getPollOptionTitles(status); const mentionedUsernames = getMentionedUsernames(status); const fields = ImmutableList([ status.spoiler_text, status.content, ]).concat(pollOptionTitles).concat(mentionedUsernames); return unescapeHTML(fields.join('\n\n')) || ''; }; const calculateContent = (text: string, emojiMap: any) => DOMPurify.sanitize(stripCompatibilityFeatures(emojify(text, emojiMap)), { USE_PROFILES: { html: true } }); const calculateSpoiler = (text: string, emojiMap: any) => DOMPurify.sanitize(emojify(escapeTextContentForBrowser(text), emojiMap), { USE_PROFILES: { html: true } }); // Only calculate these values when status first encountered // Otherwise keep the ones already in the reducer const calculateStatus = ( status: StatusRecord, oldStatus?: StatusRecord, ): StatusRecord => { if (oldStatus && oldStatus.content === status.content && oldStatus.spoiler_text === status.spoiler_text) { const { search_index, contentHtml, spoilerHtml, contentMapHtml, spoilerMapHtml, hidden, translation, currentLanguage, } = oldStatus; return status.merge({ search_index, contentHtml, spoilerHtml, contentMapHtml, spoilerMapHtml, hidden, translation, currentLanguage, }); } else { const searchContent = buildSearchContent(status); const emojiMap = makeEmojiMap(status.emojis); return status.merge({ search_index: domParser.parseFromString(searchContent, 'text/html').documentElement.textContent || '', contentHtml: calculateContent(status.content, emojiMap), spoilerHtml: calculateSpoiler(status.spoiler_text, emojiMap), contentMapHtml: status.content_map?.map(value => calculateContent(value, emojiMap)), spoilerMapHtml: status.spoiler_text_map?.map(value => calculateSpoiler(value, emojiMap)), }); } }; // Check whether a status is a quote by secondary characteristics const isQuote = (status: StatusRecord) => Boolean(status.pleroma.get('quote_url')); // Preserve translation if an existing status already has it const fixTranslation = (status: StatusRecord, oldStatus?: StatusRecord): StatusRecord => { if (oldStatus?.translation && !status.translation) { return status .set('translation', oldStatus.translation); } else { return status; } }; // Preserve quote if an existing status already has it const fixQuote = (status: StatusRecord, oldStatus?: StatusRecord): StatusRecord => { if (oldStatus && !status.quote && isQuote(status)) { return status .set('quote', oldStatus.quote) .updateIn(['pleroma', 'quote_visible'], visible => visible || oldStatus.pleroma.get('quote_visible')); } else { return status; } }; const fixStatus = (state: State, status: APIEntity): ReducerStatus => { const oldStatus = state.get(status.id); return normalizeStatus(status).withMutations(status => { fixTranslation(status, oldStatus); fixQuote(status, oldStatus); calculateStatus(status, oldStatus); minifyStatus(status); }) as ReducerStatus; }; const importStatus = (state: State, status: APIEntity): State => state.set(status.id, fixStatus(state, status)); const importStatuses = (state: State, statuses: APIEntities): State => state.withMutations(mutable => statuses.forEach(status => importStatus(mutable, status))); const deleteStatus = (state: State, id: string, references: Array) => { references.forEach(ref => { state = deleteStatus(state, ref[0], []); }); return state.delete(id); }; const incrementReplyCount = (state: State, { in_reply_to_id, quote_id }: APIEntity) => { if (in_reply_to_id) { state = state.updateIn([in_reply_to_id, 'replies_count'], 0, count => typeof count === 'number' ? count + 1 : 0, ); } if (quote_id) { state = state.updateIn([quote_id, 'quotes_count'], 0, count => typeof count === 'number' ? count + 1 : 0, ); } return state; }; const decrementReplyCount = (state: State, { in_reply_to_id, quote_id }: APIEntity) => { if (in_reply_to_id) { state = state.updateIn([in_reply_to_id, 'replies_count'], 0, count => typeof count === 'number' ? Math.max(0, count - 1) : 0, ); } if (quote_id) { state = state.updateIn([quote_id, 'quotes_count'], 0, count => typeof count === 'number' ? Math.max(0, count - 1) : 0, ); } return state; }; /** Simulate favourite/unfavourite of status for optimistic interactions */ const simulateFavourite = ( state: State, statusId: string, favourited: boolean, ): State => { const status = state.get(statusId); if (!status) return state; const delta = favourited ? +1 : -1; const updatedStatus = status.merge({ favourited, favourites_count: Math.max(0, status.favourites_count + delta), }); return state.set(statusId, updatedStatus); }; /** Simulate dislike/undislike of status for optimistic interactions */ const simulateDislike = ( state: State, statusId: string, disliked: boolean, ): State => { const status = state.get(statusId); if (!status) return state; const delta = disliked ? +1 : -1; const updatedStatus = status.merge({ disliked, dislikes_count: Math.max(0, status.dislikes_count + delta), }); return state.set(statusId, updatedStatus); }; interface Translation { content: string; detected_source_language: string; provider: string; } /** Import translation from translation service into the store. */ const importTranslation = (state: State, statusId: string, translation: Translation) => { const map = ImmutableMap(translation); const emojiMap = makeEmojiMap(state.get(statusId)!.emojis); const result = map.set('content', stripCompatibilityFeatures(emojify(map.get('content', ''), emojiMap))); return state .setIn([statusId, 'translation'], result) .setIn([statusId, 'translating'], false); }; /** Delete translation from the store. */ const deleteTranslation = (state: State, statusId: string) => state.deleteIn([statusId, 'translation']); const initialState: State = ImmutableMap(); const statuses = (state = initialState, action: AnyAction): State => { switch (action.type) { case STATUS_IMPORT: return importStatus(state, action.status); case STATUSES_IMPORT: return importStatuses(state, action.statuses); case STATUS_CREATE_REQUEST: return action.editing ? state : incrementReplyCount(state, action.params); case STATUS_CREATE_FAIL: return action.editing ? state : decrementReplyCount(state, action.params); case FAVOURITE_REQUEST: return simulateFavourite(state, action.status.id, true); case UNFAVOURITE_REQUEST: return simulateFavourite(state, action.status.id, false); case DISLIKE_REQUEST: return simulateDislike(state, action.status.id, true); case UNDISLIKE_REQUEST: return simulateDislike(state, action.status.id, false); case EMOJI_REACT_REQUEST: return state .updateIn( [action.status.id, 'reactions'], emojiReacts => simulateEmojiReact(emojiReacts as any, action.emoji, action.custom), ); case UNEMOJI_REACT_REQUEST: return state .updateIn( [action.status.id, 'reactions'], emojiReacts => simulateUnEmojiReact(emojiReacts as any, action.emoji), ); case FAVOURITE_FAIL: return state.get(action.status.id) === undefined ? state : state.setIn([action.status.id, 'favourited'], false); case DISLIKE_FAIL: return state.get(action.status.id) === undefined ? state : state.setIn([action.status.id, 'disliked'], false); case REBLOG_REQUEST: return state.setIn([action.status.id, 'reblogged'], true); case REBLOG_FAIL: return state.get(action.status.id) === undefined ? state : state.setIn([action.status.id, 'reblogged'], false); case UNREBLOG_REQUEST: return state.setIn([action.status.id, 'reblogged'], false); case UNREBLOG_FAIL: return state.get(action.status.id) === undefined ? state : state.setIn([action.status.id, 'reblogged'], true); case STATUS_MUTE_SUCCESS: return state.setIn([action.id, 'muted'], true); case STATUS_UNMUTE_SUCCESS: return state.setIn([action.id, 'muted'], false); case STATUS_REVEAL: return state.withMutations(map => { action.ids.forEach((id: string) => { if (!(state.get(id) === undefined)) { map.setIn([id, 'hidden'], false); } }); }); case STATUS_HIDE: return state.withMutations(map => { action.ids.forEach((id: string) => { if (!(state.get(id) === undefined)) { map.setIn([id, 'hidden'], true); } }); }); case STATUS_DELETE_REQUEST: return decrementReplyCount(state, action.params); case STATUS_DELETE_FAIL: return incrementReplyCount(state, action.params); case STATUS_TRANSLATE_REQUEST: return state.setIn([action.id, 'translating'], true); case STATUS_TRANSLATE_SUCCESS: return importTranslation(state, action.id, action.translation); case STATUS_TRANSLATE_FAIL: return state .setIn([action.id, 'translating'], false) .setIn([action.id, 'translation'], false); case STATUS_TRANSLATE_UNDO: return deleteTranslation(state, action.id); case STATUS_UNFILTER: return state.setIn([action.id, 'showFiltered'], false); case STATUS_LANGUAGE_CHANGE: return state.setIn([action.id, 'currentLanguage'], action.language); case TIMELINE_DELETE: return deleteStatus(state, action.id, action.references); case EVENT_JOIN_REQUEST: return state.setIn([action.id, 'event', 'join_state'], 'pending'); case EVENT_JOIN_FAIL: case EVENT_LEAVE_REQUEST: return state.setIn([action.id, 'event', 'join_state'], null); case EVENT_LEAVE_FAIL: return state.setIn([action.id, 'event', 'join_state'], action.previousState); default: return state; } }; export { type ReducerStatus, calculateStatus, statuses as default, };