mirror of https://github.com/mastodon/mastodon
Convert polls to Typescript / Immutable Records (#29789)
Renaud Chaput
2 weeks ago
committed by
GitHub
parent
e4e35ab134
commit
ded799f913
@ -0,0 +1,7 @@
|
||||
import { createAction } from '@reduxjs/toolkit';
|
||||
|
||||
import type { Poll } from 'mastodon/models/poll';
|
||||
|
||||
export const importPolls = createAction<{ polls: Poll[] }>(
|
||||
'poll/importMultiple',
|
||||
);
|
||||
@ -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,
|
||||
});
|
||||
@ -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.get(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 }));
|
||||
},
|
||||
);
|
||||
@ -0,0 +1,10 @@
|
||||
import { apiRequestGet, apiRequestPost } from 'mastodon/api';
|
||||
import type { ApiPollJSON } from 'mastodon/api_types/polls';
|
||||
|
||||
export const apiGetPoll = (pollId: string) =>
|
||||
apiRequestGet<ApiPollJSON>(`/v1/polls/${pollId}`);
|
||||
|
||||
export const apiPollVote = (pollId: string, choices: string[]) =>
|
||||
apiRequestPost<ApiPollJSON>(`/v1/polls/${pollId}/votes`, {
|
||||
data: { choices },
|
||||
});
|
||||
@ -1,15 +1,32 @@
|
||||
import type { RecordOf } from 'immutable';
|
||||
import { Record } from 'immutable';
|
||||
import type { RecordOf, List as ImmutableList } from 'immutable';
|
||||
import { Record as ImmutableRecord, isList } from 'immutable';
|
||||
|
||||
import type { ApiCustomEmojiJSON } from 'mastodon/api_types/custom_emoji';
|
||||
|
||||
type CustomEmojiShape = Required<ApiCustomEmojiJSON>; // no changes from server shape
|
||||
export type CustomEmoji = RecordOf<CustomEmojiShape>;
|
||||
|
||||
export const CustomEmojiFactory = Record<CustomEmojiShape>({
|
||||
export const CustomEmojiFactory = ImmutableRecord<CustomEmojiShape>({
|
||||
shortcode: '',
|
||||
static_url: '',
|
||||
url: '',
|
||||
category: '',
|
||||
visible_in_picker: false,
|
||||
});
|
||||
|
||||
export type EmojiMap = Record<string, ApiCustomEmojiJSON>;
|
||||
|
||||
export function makeEmojiMap(
|
||||
emojis: ApiCustomEmojiJSON[] | ImmutableList<CustomEmoji>,
|
||||
) {
|
||||
if (isList(emojis)) {
|
||||
return emojis.reduce<EmojiMap>((obj, emoji) => {
|
||||
obj[`:${emoji.shortcode}:`] = emoji.toJS();
|
||||
return obj;
|
||||
}, {});
|
||||
} else
|
||||
return emojis.reduce<EmojiMap>((obj, emoji) => {
|
||||
obj[`:${emoji.shortcode}:`] = emoji;
|
||||
return obj;
|
||||
}, {});
|
||||
}
|
||||
|
||||
@ -0,0 +1,109 @@
|
||||
import type { RecordOf } from 'immutable';
|
||||
import { Record, List } from 'immutable';
|
||||
|
||||
import escapeTextContentForBrowser from 'escape-html';
|
||||
|
||||
import type { ApiPollJSON, ApiPollOptionJSON } from 'mastodon/api_types/polls';
|
||||
import emojify from 'mastodon/features/emoji/emoji';
|
||||
|
||||
import { CustomEmojiFactory, makeEmojiMap } from './custom_emoji';
|
||||
import type { CustomEmoji, EmojiMap } from './custom_emoji';
|
||||
|
||||
interface PollOptionTranslationShape {
|
||||
title: string;
|
||||
titleHtml: string;
|
||||
}
|
||||
|
||||
export type PollOptionTranslation = RecordOf<PollOptionTranslationShape>;
|
||||
|
||||
export const PollOptionTranslationFactory = Record<PollOptionTranslationShape>({
|
||||
title: '',
|
||||
titleHtml: '',
|
||||
});
|
||||
|
||||
interface PollOptionShape extends Required<ApiPollOptionJSON> {
|
||||
voted: boolean;
|
||||
titleHtml: string;
|
||||
translation: PollOptionTranslation | null;
|
||||
}
|
||||
|
||||
export function createPollOptionTranslationFromServerJSON(
|
||||
translation: { title: string },
|
||||
emojiMap: EmojiMap,
|
||||
) {
|
||||
return PollOptionTranslationFactory({
|
||||
...translation,
|
||||
titleHtml: emojify(
|
||||
escapeTextContentForBrowser(translation.title),
|
||||
emojiMap,
|
||||
),
|
||||
});
|
||||
}
|
||||
|
||||
export type PollOption = RecordOf<PollOptionShape>;
|
||||
|
||||
export const PollOptionFactory = Record<PollOptionShape>({
|
||||
title: '',
|
||||
votes_count: 0,
|
||||
voted: false,
|
||||
titleHtml: '',
|
||||
translation: null,
|
||||
});
|
||||
|
||||
interface PollShape
|
||||
extends Omit<ApiPollJSON, 'emojis' | 'options' | 'own_votes'> {
|
||||
emojis: List<CustomEmoji>;
|
||||
options: List<PollOption>;
|
||||
own_votes?: List<number>;
|
||||
}
|
||||
export type Poll = RecordOf<PollShape>;
|
||||
|
||||
export const PollFactory = Record<PollShape>({
|
||||
id: '',
|
||||
expires_at: '',
|
||||
expired: false,
|
||||
multiple: false,
|
||||
voters_count: 0,
|
||||
votes_count: 0,
|
||||
voted: false,
|
||||
emojis: List<CustomEmoji>(),
|
||||
options: List<PollOption>(),
|
||||
own_votes: List(),
|
||||
});
|
||||
|
||||
export function createPollFromServerJSON(
|
||||
serverJSON: ApiPollJSON,
|
||||
previousPoll?: Poll,
|
||||
) {
|
||||
const emojiMap = makeEmojiMap(serverJSON.emojis);
|
||||
|
||||
return PollFactory({
|
||||
...serverJSON,
|
||||
emojis: List(serverJSON.emojis.map((emoji) => CustomEmojiFactory(emoji))),
|
||||
own_votes: serverJSON.own_votes ? List(serverJSON.own_votes) : undefined,
|
||||
options: List(
|
||||
serverJSON.options.map((optionJSON, index) => {
|
||||
const option = PollOptionFactory({
|
||||
...optionJSON,
|
||||
voted: serverJSON.own_votes?.includes(index) || false,
|
||||
titleHtml: emojify(
|
||||
escapeTextContentForBrowser(optionJSON.title),
|
||||
emojiMap,
|
||||
),
|
||||
});
|
||||
|
||||
const prevOption = previousPoll?.options.get(index);
|
||||
if (prevOption?.translation && prevOption.title === option.title) {
|
||||
const { translation } = prevOption;
|
||||
|
||||
option.set(
|
||||
'translation',
|
||||
createPollOptionTranslationFromServerJSON(translation, emojiMap),
|
||||
);
|
||||
}
|
||||
|
||||
return option;
|
||||
}),
|
||||
),
|
||||
});
|
||||
}
|
||||
@ -1,45 +0,0 @@
|
||||
import { Map as ImmutableMap, fromJS } from 'immutable';
|
||||
|
||||
import { POLLS_IMPORT } from 'mastodon/actions/importer';
|
||||
|
||||
import { normalizePollOptionTranslation } from '../actions/importer/normalizer';
|
||||
import { STATUS_TRANSLATE_SUCCESS, STATUS_TRANSLATE_UNDO } from '../actions/statuses';
|
||||
|
||||
const importPolls = (state, polls) => state.withMutations(map => polls.forEach(poll => map.set(poll.id, fromJS(poll))));
|
||||
|
||||
const statusTranslateSuccess = (state, pollTranslation) => {
|
||||
return state.withMutations(map => {
|
||||
if (pollTranslation) {
|
||||
const poll = state.get(pollTranslation.id);
|
||||
|
||||
pollTranslation.options.forEach((item, index) => {
|
||||
map.setIn([pollTranslation.id, 'options', index, 'translation'], fromJS(normalizePollOptionTranslation(item, poll)));
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const statusTranslateUndo = (state, id) => {
|
||||
return state.withMutations(map => {
|
||||
const options = map.getIn([id, 'options']);
|
||||
|
||||
if (options) {
|
||||
options.forEach((item, index) => map.deleteIn([id, 'options', index, 'translation']));
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const initialState = ImmutableMap();
|
||||
|
||||
export default function polls(state = initialState, action) {
|
||||
switch(action.type) {
|
||||
case POLLS_IMPORT:
|
||||
return importPolls(state, action.polls);
|
||||
case STATUS_TRANSLATE_SUCCESS:
|
||||
return statusTranslateSuccess(state, action.translation.poll);
|
||||
case STATUS_TRANSLATE_UNDO:
|
||||
return statusTranslateUndo(state, action.pollId);
|
||||
default:
|
||||
return state;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,67 @@
|
||||
import type { Reducer } from '@reduxjs/toolkit';
|
||||
import { Map as ImmutableMap } from 'immutable';
|
||||
|
||||
import { importPolls } from 'mastodon/actions/importer/polls';
|
||||
import { makeEmojiMap } from 'mastodon/models/custom_emoji';
|
||||
import { createPollOptionTranslationFromServerJSON } from 'mastodon/models/poll';
|
||||
import type { Poll } from 'mastodon/models/poll';
|
||||
|
||||
import {
|
||||
STATUS_TRANSLATE_SUCCESS,
|
||||
STATUS_TRANSLATE_UNDO,
|
||||
} from '../actions/statuses';
|
||||
|
||||
const initialState = ImmutableMap<string, Poll>();
|
||||
type PollsState = typeof initialState;
|
||||
|
||||
const statusTranslateSuccess = (
|
||||
state: PollsState,
|
||||
pollTranslation: Poll | undefined,
|
||||
) => {
|
||||
if (!pollTranslation) return state;
|
||||
|
||||
return state.withMutations((map) => {
|
||||
const poll = state.get(pollTranslation.id);
|
||||
|
||||
if (!poll) return;
|
||||
|
||||
const emojiMap = makeEmojiMap(poll.emojis);
|
||||
|
||||
pollTranslation.options.forEach((item, index) => {
|
||||
map.setIn(
|
||||
[pollTranslation.id, 'options', index, 'translation'],
|
||||
createPollOptionTranslationFromServerJSON(item, emojiMap),
|
||||
);
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
const statusTranslateUndo = (state: PollsState, id: string) => {
|
||||
return state.withMutations((map) => {
|
||||
const options = map.get(id)?.options;
|
||||
|
||||
if (options) {
|
||||
options.forEach((item, index) =>
|
||||
map.deleteIn([id, 'options', index, 'translation']),
|
||||
);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
export const pollsReducer: Reducer<PollsState> = (
|
||||
state = initialState,
|
||||
action,
|
||||
) => {
|
||||
if (importPolls.match(action)) {
|
||||
return state.withMutations((polls) => {
|
||||
action.payload.polls.forEach((poll) => polls.set(poll.id, poll));
|
||||
});
|
||||
} else if (action.type === STATUS_TRANSLATE_SUCCESS)
|
||||
return statusTranslateSuccess(
|
||||
state,
|
||||
(action.translation as { poll?: Poll }).poll,
|
||||
);
|
||||
else if (action.type === STATUS_TRANSLATE_UNDO)
|
||||
return statusTranslateUndo(state, action.pollId as string);
|
||||
else return state;
|
||||
};
|
||||
Loading…
Reference in New Issue