bigbuffet/bigbuffet-rw
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge branch 'announcements' into 'main'

Browse source 
Use react-query and zod for announcements

See merge request soapbox-pub/soapbox!2990
This commit is contained in:
marcin mikołajczak 2024-04-15 20:39:35 +00:00
commit fa34fa3652
28 changed files with 391 additions and 905 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

147
src/actions/admin.ts
View file

@ -1,19 +1,15 @@
import { defineMessages } from 'react-intl';
import { fetchRelationships } from 'soapbox/actions/accounts'; import { fetchRelationships } from 'soapbox/actions/accounts';
import { importFetchedAccount, importFetchedAccounts, importFetchedStatuses } from 'soapbox/actions/importer'; import { importFetchedAccount, importFetchedAccounts, importFetchedStatuses } from 'soapbox/actions/importer';
import { accountIdsToAccts } from 'soapbox/selectors'; import { accountIdsToAccts } from 'soapbox/selectors';
import toast from 'soapbox/toast';
import { filterBadges, getTagDiff } from 'soapbox/utils/badges'; import { filterBadges, getTagDiff } from 'soapbox/utils/badges';
import { getFeatures } from 'soapbox/utils/features'; import { getFeatures } from 'soapbox/utils/features';
import api, { getLinks } from '../api'; import api, { getLinks } from '../api';
import { openModal } from './modals';
import type { AxiosResponse } from 'axios'; import type { AxiosResponse } from 'axios';
import type { AppDispatch, RootState } from 'soapbox/store'; import type { AppDispatch, RootState } from 'soapbox/store';
import type { APIEntity, Announcement } from 'soapbox/types/entities'; import type { APIEntity } from 'soapbox/types/entities';
const ADMIN_CONFIG_FETCH_REQUEST = 'ADMIN_CONFIG_FETCH_REQUEST'; const ADMIN_CONFIG_FETCH_REQUEST = 'ADMIN_CONFIG_FETCH_REQUEST';
const ADMIN_CONFIG_FETCH_SUCCESS = 'ADMIN_CONFIG_FETCH_SUCCESS'; const ADMIN_CONFIG_FETCH_SUCCESS = 'ADMIN_CONFIG_FETCH_SUCCESS';
@ -81,35 +77,6 @@ const ADMIN_USER_INDEX_FETCH_SUCCESS = 'ADMIN_USER_INDEX_FETCH_SUCCESS';
const ADMIN_USER_INDEX_QUERY_SET = 'ADMIN_USER_INDEX_QUERY_SET'; const ADMIN_USER_INDEX_QUERY_SET = 'ADMIN_USER_INDEX_QUERY_SET';
const ADMIN_ANNOUNCEMENTS_FETCH_FAIL = 'ADMIN_ANNOUNCEMENTS_FETCH_FAILS';
const ADMIN_ANNOUNCEMENTS_FETCH_REQUEST = 'ADMIN_ANNOUNCEMENTS_FETCH_REQUEST';
const ADMIN_ANNOUNCEMENTS_FETCH_SUCCESS = 'ADMIN_ANNOUNCEMENTS_FETCH_SUCCESS';
const ADMIN_ANNOUNCEMENTS_EXPAND_FAIL = 'ADMIN_ANNOUNCEMENTS_EXPAND_FAILS';
const ADMIN_ANNOUNCEMENTS_EXPAND_REQUEST = 'ADMIN_ANNOUNCEMENTS_EXPAND_REQUEST';
const ADMIN_ANNOUNCEMENTS_EXPAND_SUCCESS = 'ADMIN_ANNOUNCEMENTS_EXPAND_SUCCESS';
const ADMIN_ANNOUNCEMENT_CHANGE_CONTENT = 'ADMIN_ANNOUNCEMENT_CHANGE_CONTENT';
const ADMIN_ANNOUNCEMENT_CHANGE_START_TIME = 'ADMIN_ANNOUNCEMENT_CHANGE_START_TIME';
const ADMIN_ANNOUNCEMENT_CHANGE_END_TIME = 'ADMIN_ANNOUNCEMENT_CHANGE_END_TIME';
const ADMIN_ANNOUNCEMENT_CHANGE_ALL_DAY = 'ADMIN_ANNOUNCEMENT_CHANGE_ALL_DAY';
const ADMIN_ANNOUNCEMENT_CREATE_REQUEST = 'ADMIN_ANNOUNCEMENT_CREATE_REQUEST';
const ADMIN_ANNOUNCEMENT_CREATE_SUCCESS = 'ADMIN_ANNOUNCEMENT_CREATE_REQUEST';
const ADMIN_ANNOUNCEMENT_CREATE_FAIL = 'ADMIN_ANNOUNCEMENT_CREATE_FAIL';
const ADMIN_ANNOUNCEMENT_DELETE_REQUEST = 'ADMIN_ANNOUNCEMENT_DELETE_REQUEST';
const ADMIN_ANNOUNCEMENT_DELETE_SUCCESS = 'ADMIN_ANNOUNCEMENT_DELETE_REQUEST';
const ADMIN_ANNOUNCEMENT_DELETE_FAIL = 'ADMIN_ANNOUNCEMENT_DELETE_FAIL';
const ADMIN_ANNOUNCEMENT_MODAL_INIT = 'ADMIN_ANNOUNCEMENT_MODAL_INIT';
const messages = defineMessages({
announcementCreateSuccess: { id: 'admin.edit_announcement.created', defaultMessage: 'Announcement created' },
announcementDeleteSuccess: { id: 'admin.edit_announcement.deleted', defaultMessage: 'Announcement deleted' },
announcementUpdateSuccess: { id: 'admin.edit_announcement.updated', defaultMessage: 'Announcement edited' },
});
const fetchConfig = () => const fetchConfig = () =>
(dispatch: AppDispatch, getState: () => RootState) => { (dispatch: AppDispatch, getState: () => RootState) => {
dispatch({ type: ADMIN_CONFIG_FETCH_REQUEST }); dispatch({ type: ADMIN_CONFIG_FETCH_REQUEST });
@ -572,92 +539,6 @@ const expandUserIndex = () =>
}); });
}; };
const fetchAdminAnnouncements = () =>
(dispatch: AppDispatch, getState: () => RootState) => {
dispatch({ type: ADMIN_ANNOUNCEMENTS_FETCH_REQUEST });
return api(getState)
.get('/api/v1/pleroma/admin/announcements', { params: { limit: 50 } })
.then(({ data }) => {
dispatch({ type: ADMIN_ANNOUNCEMENTS_FETCH_SUCCESS, announcements: data });
return data;
}).catch(error => {
dispatch({ type: ADMIN_ANNOUNCEMENTS_FETCH_FAIL, error });
});
};
const expandAdminAnnouncements = () =>
(dispatch: AppDispatch, getState: () => RootState) => {
const page = getState().admin_announcements.page;
dispatch({ type: ADMIN_ANNOUNCEMENTS_EXPAND_REQUEST });
return api(getState)
.get('/api/v1/pleroma/admin/announcements', { params: { limit: 50, offset: page * 50 } })
.then(({ data }) => {
dispatch({ type: ADMIN_ANNOUNCEMENTS_EXPAND_SUCCESS, announcements: data });
return data;
}).catch(error => {
dispatch({ type: ADMIN_ANNOUNCEMENTS_EXPAND_FAIL, error });
});
};
const changeAnnouncementContent = (content: string) => ({
type: ADMIN_ANNOUNCEMENT_CHANGE_CONTENT,
value: content,
});
const changeAnnouncementStartTime = (time: Date | null) => ({
type: ADMIN_ANNOUNCEMENT_CHANGE_START_TIME,
value: time,
});
const changeAnnouncementEndTime = (time: Date | null) => ({
type: ADMIN_ANNOUNCEMENT_CHANGE_END_TIME,
value: time,
});
const changeAnnouncementAllDay = (allDay: boolean) => ({
type: ADMIN_ANNOUNCEMENT_CHANGE_ALL_DAY,
value: allDay,
});
const handleCreateAnnouncement = () =>
(dispatch: AppDispatch, getState: () => RootState) => {
dispatch({ type: ADMIN_ANNOUNCEMENT_CREATE_REQUEST });
const { id, content, starts_at, ends_at, all_day } = getState().admin_announcements.form;
return api(getState)[id ? 'patch' : 'post'](
id ? `/api/v1/pleroma/admin/announcements/${id}` : '/api/v1/pleroma/admin/announcements',
{ content, starts_at, ends_at, all_day },
).then(({ data }) => {
dispatch({ type: ADMIN_ANNOUNCEMENT_CREATE_SUCCESS, announcement: data });
toast.success(id ? messages.announcementUpdateSuccess : messages.announcementCreateSuccess);
dispatch(fetchAdminAnnouncements());
return data;
}).catch(error => {
dispatch({ type: ADMIN_ANNOUNCEMENT_CREATE_FAIL, error });
});
};
const deleteAnnouncement = (id: string) =>
(dispatch: AppDispatch, getState: () => RootState) => {
dispatch({ type: ADMIN_ANNOUNCEMENT_DELETE_REQUEST, id });
return api(getState).delete(`/api/v1/pleroma/admin/announcements/${id}`).then(({ data }) => {
dispatch({ type: ADMIN_ANNOUNCEMENT_DELETE_SUCCESS, id });
toast.success(messages.announcementDeleteSuccess);
dispatch(fetchAdminAnnouncements());
return data;
}).catch(error => {
dispatch({ type: ADMIN_ANNOUNCEMENT_DELETE_FAIL, id, error });
});
};
const initAnnouncementModal = (announcement?: Announcement) =>
(dispatch: AppDispatch) => {
dispatch({ type: ADMIN_ANNOUNCEMENT_MODAL_INIT, announcement });
dispatch(openModal('EDIT_ANNOUNCEMENT'));
};
export { export {
ADMIN_CONFIG_FETCH_REQUEST, ADMIN_CONFIG_FETCH_REQUEST,
@ -709,23 +590,6 @@ export {
ADMIN_USER_INDEX_FETCH_REQUEST, ADMIN_USER_INDEX_FETCH_REQUEST,
ADMIN_USER_INDEX_FETCH_SUCCESS, ADMIN_USER_INDEX_FETCH_SUCCESS,
ADMIN_USER_INDEX_QUERY_SET, ADMIN_USER_INDEX_QUERY_SET,
ADMIN_ANNOUNCEMENTS_FETCH_FAIL,
ADMIN_ANNOUNCEMENTS_FETCH_REQUEST,
ADMIN_ANNOUNCEMENTS_FETCH_SUCCESS,
ADMIN_ANNOUNCEMENTS_EXPAND_FAIL,
ADMIN_ANNOUNCEMENTS_EXPAND_REQUEST,
ADMIN_ANNOUNCEMENTS_EXPAND_SUCCESS,
ADMIN_ANNOUNCEMENT_CHANGE_CONTENT,
ADMIN_ANNOUNCEMENT_CHANGE_START_TIME,
ADMIN_ANNOUNCEMENT_CHANGE_END_TIME,
ADMIN_ANNOUNCEMENT_CHANGE_ALL_DAY,
ADMIN_ANNOUNCEMENT_CREATE_FAIL,
ADMIN_ANNOUNCEMENT_CREATE_REQUEST,
ADMIN_ANNOUNCEMENT_CREATE_SUCCESS,
ADMIN_ANNOUNCEMENT_DELETE_FAIL,
ADMIN_ANNOUNCEMENT_DELETE_REQUEST,
ADMIN_ANNOUNCEMENT_DELETE_SUCCESS,
ADMIN_ANNOUNCEMENT_MODAL_INIT,
fetchConfig, fetchConfig,
updateConfig, updateConfig,
updateSoapboxConfig, updateSoapboxConfig,
@ -750,13 +614,4 @@ export {
setUserIndexQuery, setUserIndexQuery,
fetchUserIndex, fetchUserIndex,
expandUserIndex, expandUserIndex,
fetchAdminAnnouncements,
expandAdminAnnouncements,
changeAnnouncementContent,
changeAnnouncementStartTime,
changeAnnouncementEndTime,
changeAnnouncementAllDay,
handleCreateAnnouncement,
deleteAnnouncement,
initAnnouncementModal,
}; };

113
src/actions/announcements.test.ts
View file

@ -1,113 +0,0 @@
import { List as ImmutableList } from 'immutable';
import announcements from 'soapbox/__fixtures__/announcements.json';
import { fetchAnnouncements, dismissAnnouncement, addReaction, removeReaction } from 'soapbox/actions/announcements';
import { __stub } from 'soapbox/api';
import { buildInstance } from 'soapbox/jest/factory';
import { mockStore, rootState } from 'soapbox/jest/test-helpers';
import { normalizeAnnouncement } from 'soapbox/normalizers';
import type { APIEntity } from 'soapbox/types/entities';
describe('fetchAnnouncements()', () => {
describe('with a successful API request', () => {
it('should fetch announcements from the API', async() => {
const state = rootState
.set('instance', buildInstance({ version: '3.5.3' }));
const store = mockStore(state);
__stub((mock) => {
mock.onGet('/api/v1/announcements').reply(200, announcements);
});
const expectedActions = [
{ type: 'ANNOUNCEMENTS_FETCH_REQUEST', skipLoading: true },
{ type: 'ANNOUNCEMENTS_FETCH_SUCCESS', announcements, skipLoading: true },
{ type: 'POLLS_IMPORT', polls: [] },
{ type: 'ACCOUNTS_IMPORT', accounts: [] },
{ type: 'STATUSES_IMPORT', statuses: [], expandSpoilers: false },
];
await store.dispatch(fetchAnnouncements());
const actions = store.getActions();
expect(actions).toEqual(expectedActions);
});
});
});
describe('dismissAnnouncement', () => {
describe('with a successful API request', () => {
it('should mark announcement as dismissed', async() => {
const store = mockStore(rootState);
__stub((mock) => {
mock.onPost('/api/v1/announcements/1/dismiss').reply(200);
});
const expectedActions = [
{ type: 'ANNOUNCEMENTS_DISMISS_REQUEST', id: '1' },
{ type: 'ANNOUNCEMENTS_DISMISS_SUCCESS', id: '1' },
];
await store.dispatch(dismissAnnouncement('1'));
const actions = store.getActions();
expect(actions).toEqual(expectedActions);
});
});
});
describe('addReaction', () => {
let store: ReturnType<typeof mockStore>;
beforeEach(() => {
const state = rootState
.setIn(['announcements', 'items'], ImmutableList((announcements).map((announcement: APIEntity) => normalizeAnnouncement(announcement))))
.setIn(['announcements', 'isLoading'], false);
store = mockStore(state);
});
describe('with a successful API request', () => {
it('should add reaction to a post', async() => {
__stub((mock) => {
mock.onPut('/api/v1/announcements/2/reactions/📉').reply(200);
});
const expectedActions = [
{ type: 'ANNOUNCEMENTS_REACTION_ADD_REQUEST', id: '2', name: '📉', skipLoading: true },
{ type: 'ANNOUNCEMENTS_REACTION_ADD_SUCCESS', id: '2', name: '📉', skipLoading: true },
];
await store.dispatch(addReaction('2', '📉'));
const actions = store.getActions();
expect(actions).toEqual(expectedActions);
});
});
});
describe('removeReaction', () => {
let store: ReturnType<typeof mockStore>;
beforeEach(() => {
const state = rootState
.setIn(['announcements', 'items'], ImmutableList((announcements).map((announcement: APIEntity) => normalizeAnnouncement(announcement))))
.setIn(['announcements', 'isLoading'], false);
store = mockStore(state);
});
describe('with a successful API request', () => {
it('should remove reaction from a post', async() => {
__stub((mock) => {
mock.onDelete('/api/v1/announcements/2/reactions/📉').reply(200);
});
const expectedActions = [
{ type: 'ANNOUNCEMENTS_REACTION_REMOVE_REQUEST', id: '2', name: '📉', skipLoading: true },
{ type: 'ANNOUNCEMENTS_REACTION_REMOVE_SUCCESS', id: '2', name: '📉', skipLoading: true },
];
await store.dispatch(removeReaction('2', '📉'));
const actions = store.getActions();
expect(actions).toEqual(expectedActions);
});
});
});

196
src/actions/announcements.ts
View file

@ -1,196 +0,0 @@
import api from 'soapbox/api';
import { getFeatures } from 'soapbox/utils/features';
import { importFetchedStatuses } from './importer';
import type { AppDispatch, RootState } from 'soapbox/store';
import type { APIEntity } from 'soapbox/types/entities';
export const ANNOUNCEMENTS_FETCH_REQUEST = 'ANNOUNCEMENTS_FETCH_REQUEST';
export const ANNOUNCEMENTS_FETCH_SUCCESS = 'ANNOUNCEMENTS_FETCH_SUCCESS';
export const ANNOUNCEMENTS_FETCH_FAIL = 'ANNOUNCEMENTS_FETCH_FAIL';
export const ANNOUNCEMENTS_UPDATE = 'ANNOUNCEMENTS_UPDATE';
export const ANNOUNCEMENTS_DELETE = 'ANNOUNCEMENTS_DELETE';
export const ANNOUNCEMENTS_DISMISS_REQUEST = 'ANNOUNCEMENTS_DISMISS_REQUEST';
export const ANNOUNCEMENTS_DISMISS_SUCCESS = 'ANNOUNCEMENTS_DISMISS_SUCCESS';
export const ANNOUNCEMENTS_DISMISS_FAIL = 'ANNOUNCEMENTS_DISMISS_FAIL';
export const ANNOUNCEMENTS_REACTION_ADD_REQUEST = 'ANNOUNCEMENTS_REACTION_ADD_REQUEST';
export const ANNOUNCEMENTS_REACTION_ADD_SUCCESS = 'ANNOUNCEMENTS_REACTION_ADD_SUCCESS';
export const ANNOUNCEMENTS_REACTION_ADD_FAIL = 'ANNOUNCEMENTS_REACTION_ADD_FAIL';
export const ANNOUNCEMENTS_REACTION_REMOVE_REQUEST = 'ANNOUNCEMENTS_REACTION_REMOVE_REQUEST';
export const ANNOUNCEMENTS_REACTION_REMOVE_SUCCESS = 'ANNOUNCEMENTS_REACTION_REMOVE_SUCCESS';
export const ANNOUNCEMENTS_REACTION_REMOVE_FAIL = 'ANNOUNCEMENTS_REACTION_REMOVE_FAIL';
export const ANNOUNCEMENTS_REACTION_UPDATE = 'ANNOUNCEMENTS_REACTION_UPDATE';
export const ANNOUNCEMENTS_TOGGLE_SHOW = 'ANNOUNCEMENTS_TOGGLE_SHOW';
const noOp = () => {};
export const fetchAnnouncements = (done = noOp) =>
(dispatch: AppDispatch, getState: () => RootState) => {
const { instance } = getState();
const features = getFeatures(instance);
if (!features.announcements) return null;
dispatch(fetchAnnouncementsRequest());
return api(getState).get('/api/v1/announcements').then(response => {
dispatch(fetchAnnouncementsSuccess(response.data));
dispatch(importFetchedStatuses(response.data.map(({ statuses }: APIEntity) => statuses)));
}).catch(error => {
dispatch(fetchAnnouncementsFail(error));
}).finally(() => {
done();
});
};
export const fetchAnnouncementsRequest = () => ({
type: ANNOUNCEMENTS_FETCH_REQUEST,
skipLoading: true,
});
export const fetchAnnouncementsSuccess = (announcements: APIEntity) => ({
type: ANNOUNCEMENTS_FETCH_SUCCESS,
announcements,
skipLoading: true,
});
export const fetchAnnouncementsFail = (error: unknown) => ({
type: ANNOUNCEMENTS_FETCH_FAIL,
error,
skipLoading: true,
skipAlert: true,
});
export const updateAnnouncements = (announcement: APIEntity) => ({
type: ANNOUNCEMENTS_UPDATE,
announcement: announcement,
});
export const dismissAnnouncement = (announcementId: string) =>
(dispatch: AppDispatch, getState: () => RootState) => {
dispatch(dismissAnnouncementRequest(announcementId));
return api(getState).post(`/api/v1/announcements/${announcementId}/dismiss`).then(() => {
dispatch(dismissAnnouncementSuccess(announcementId));
}).catch(error => {
dispatch(dismissAnnouncementFail(announcementId, error));
});
};
export const dismissAnnouncementRequest = (announcementId: string) => ({
type: ANNOUNCEMENTS_DISMISS_REQUEST,
id: announcementId,
});
export const dismissAnnouncementSuccess = (announcementId: string) => ({
type: ANNOUNCEMENTS_DISMISS_SUCCESS,
id: announcementId,
});
export const dismissAnnouncementFail = (announcementId: string, error: unknown) => ({
type: ANNOUNCEMENTS_DISMISS_FAIL,
id: announcementId,
error,
});
export const addReaction = (announcementId: string, name: string) =>
(dispatch: AppDispatch, getState: () => RootState) => {
const announcement = getState().announcements.items.find(x => x.get('id') === announcementId);
let alreadyAdded = false;
if (announcement) {
const reaction = announcement.reactions.find(x => x.name === name);
if (reaction && reaction.me) {
alreadyAdded = true;
}
}
if (!alreadyAdded) {
dispatch(addReactionRequest(announcementId, name, alreadyAdded));
}
return api(getState).put(`/api/v1/announcements/${announcementId}/reactions/${name}`).then(() => {
dispatch(addReactionSuccess(announcementId, name, alreadyAdded));
}).catch(err => {
if (!alreadyAdded) {
dispatch(addReactionFail(announcementId, name, err));
}
});
};
export const addReactionRequest = (announcementId: string, name: string, alreadyAdded?: boolean) => ({
type: ANNOUNCEMENTS_REACTION_ADD_REQUEST,
id: announcementId,
name,
skipLoading: true,
});
export const addReactionSuccess = (announcementId: string, name: string, alreadyAdded?: boolean) => ({
type: ANNOUNCEMENTS_REACTION_ADD_SUCCESS,
id: announcementId,
name,
skipLoading: true,
});
export const addReactionFail = (announcementId: string, name: string, error: unknown) => ({
type: ANNOUNCEMENTS_REACTION_ADD_FAIL,
id: announcementId,
name,
error,
skipLoading: true,
});
export const removeReaction = (announcementId: string, name: string) =>
(dispatch: AppDispatch, getState: () => RootState) => {
dispatch(removeReactionRequest(announcementId, name));
return api(getState).delete(`/api/v1/announcements/${announcementId}/reactions/${name}`).then(() => {
dispatch(removeReactionSuccess(announcementId, name));
}).catch(err => {
dispatch(removeReactionFail(announcementId, name, err));
});
};
export const removeReactionRequest = (announcementId: string, name: string) => ({
type: ANNOUNCEMENTS_REACTION_REMOVE_REQUEST,
id: announcementId,
name,
skipLoading: true,
});
export const removeReactionSuccess = (announcementId: string, name: string) => ({
type: ANNOUNCEMENTS_REACTION_REMOVE_SUCCESS,
id: announcementId,
name,
skipLoading: true,
});
export const removeReactionFail = (announcementId: string, name: string, error: unknown) => ({
type: ANNOUNCEMENTS_REACTION_REMOVE_FAIL,
id: announcementId,
name,
error,
skipLoading: true,
});
export const updateReaction = (reaction: APIEntity) => ({
type: ANNOUNCEMENTS_REACTION_UPDATE,
reaction,
});
export const toggleShowAnnouncements = () => ({
type: ANNOUNCEMENTS_TOGGLE_SHOW,
});
export const deleteAnnouncement = (id: string) => ({
type: ANNOUNCEMENTS_DELETE,
id,
});

43
src/actions/streaming.ts
View file

@ -1,21 +1,18 @@
import { getLocale, getSettings } from 'soapbox/actions/settings'; import { getLocale, getSettings } from 'soapbox/actions/settings';
import { updateReactions } from 'soapbox/api/hooks/announcements/useAnnouncements';
import { importEntities } from 'soapbox/entity-store/actions'; import { importEntities } from 'soapbox/entity-store/actions';
import { Entities } from 'soapbox/entity-store/entities'; import { Entities } from 'soapbox/entity-store/entities';
import { selectEntity } from 'soapbox/entity-store/selectors'; import { selectEntity } from 'soapbox/entity-store/selectors';
import messages from 'soapbox/messages'; import messages from 'soapbox/messages';
import { ChatKeys, IChat, isLastMessage } from 'soapbox/queries/chats'; import { ChatKeys, IChat, isLastMessage } from 'soapbox/queries/chats';
import { queryClient } from 'soapbox/queries/client'; import { queryClient } from 'soapbox/queries/client';
import { announcementSchema, type Announcement, type Relationship } from 'soapbox/schemas';
import { getUnreadChatsCount, updateChatListItem, updateChatMessage } from 'soapbox/utils/chats'; import { getUnreadChatsCount, updateChatListItem, updateChatMessage } from 'soapbox/utils/chats';
import { removePageItem } from 'soapbox/utils/queries'; import { removePageItem } from 'soapbox/utils/queries';
import { play, soundCache } from 'soapbox/utils/sounds'; import { play, soundCache } from 'soapbox/utils/sounds';
import { connectStream } from '../stream'; import { connectStream } from '../stream';
import {
deleteAnnouncement,
updateAnnouncements,
updateReaction as updateAnnouncementsReaction,
} from './announcements';
import { updateConversations } from './conversations'; import { updateConversations } from './conversations';
import { fetchFilters } from './filters'; import { fetchFilters } from './filters';
import { MARKER_FETCH_SUCCESS } from './markers'; import { MARKER_FETCH_SUCCESS } from './markers';
@ -29,7 +26,6 @@ import {
} from './timelines'; } from './timelines';
import type { IStatContext } from 'soapbox/contexts/stat-context'; import type { IStatContext } from 'soapbox/contexts/stat-context';
import type { Relationship } from 'soapbox/schemas';
import type { AppDispatch, RootState } from 'soapbox/store'; import type { AppDispatch, RootState } from 'soapbox/store';
import type { APIEntity, Chat } from 'soapbox/types/entities'; import type { APIEntity, Chat } from 'soapbox/types/entities';
@ -66,6 +62,35 @@ const updateChatQuery = (chat: IChat) => {
queryClient.setQueryData<Chat>(ChatKeys.chat(chat.id), newChat as any); queryClient.setQueryData<Chat>(ChatKeys.chat(chat.id), newChat as any);
}; };
const updateAnnouncementReactions = ({ announcement_id: id, name, count }: APIEntity) => {
queryClient.setQueryData(['announcements'], (prevResult: Announcement[]) =>
prevResult.map(value => {
if (value.id !== id) return value;
return announcementSchema.parse({
...value,
reactions: updateReactions(value.reactions, name, -1, true),
});
}),
);
};
const updateAnnouncement = (announcement: APIEntity) =>
queryClient.setQueryData(['announcements'], (prevResult: Announcement[]) => {
let updated = false;
const result = prevResult.map(value => value.id === announcement.id
? (updated = true, announcementSchema.parse(announcement))
: value);
if (!updated) return [announcementSchema.parse(announcement), ...result];
});
const deleteAnnouncement = (id: string) =>
queryClient.setQueryData(['announcements'], (prevResult: Announcement[]) =>
prevResult.filter(value => value.id !== id),
);
interface TimelineStreamOpts { interface TimelineStreamOpts {
statContext?: IStatContext; statContext?: IStatContext;
enabled?: boolean; enabled?: boolean;
@ -164,13 +189,13 @@ const connectTimelineStream = (
dispatch(updateFollowRelationships(JSON.parse(data.payload))); dispatch(updateFollowRelationships(JSON.parse(data.payload)));
break; break;
case 'announcement': case 'announcement':
dispatch(updateAnnouncements(JSON.parse(data.payload))); updateAnnouncement(JSON.parse(data.payload));
break; break;
case 'announcement.reaction': case 'announcement.reaction':
dispatch(updateAnnouncementsReaction(JSON.parse(data.payload))); updateAnnouncementReactions(JSON.parse(data.payload));
break; break;
case 'announcement.delete': case 'announcement.delete':
dispatch(deleteAnnouncement(data.payload)); deleteAnnouncement(data.payload);
break; break;
case 'marker': case 'marker':
dispatch({ type: MARKER_FETCH_SUCCESS, marker: JSON.parse(data.payload) }); dispatch({ type: MARKER_FETCH_SUCCESS, marker: JSON.parse(data.payload) });

89
src/api/hooks/admin/useAnnouncements.ts Normal file
View file

@ -0,0 +1,89 @@
import { useMutation, useQuery } from '@tanstack/react-query';
import { useApi } from 'soapbox/hooks';
import { queryClient } from 'soapbox/queries/client';
import { adminAnnouncementSchema, type AdminAnnouncement } from 'soapbox/schemas';
import { useAnnouncements as useUserAnnouncements } from '../announcements';
import type { AxiosResponse } from 'axios';
interface CreateAnnouncementParams {
content: string;
starts_at?: string | null;
ends_at?: string | null;
all_day?: boolean;
}
interface UpdateAnnouncementParams extends CreateAnnouncementParams {
id: string;
}
const useAnnouncements = () => {
const api = useApi();
const userAnnouncements = useUserAnnouncements();
const getAnnouncements = async () => {
const { data } = await api.get<AdminAnnouncement[]>('/api/v1/pleroma/admin/announcements');
const normalizedData = data.map((announcement) => adminAnnouncementSchema.parse(announcement));
return normalizedData;
};
const result = useQuery<ReadonlyArray<AdminAnnouncement>>({
queryKey: ['admin', 'announcements'],
queryFn: getAnnouncements,
placeholderData: [],
});
const {
mutate: createAnnouncement,
isPending: isCreating,
} = useMutation({
mutationFn: (params: CreateAnnouncementParams) => api.post('/api/v1/pleroma/admin/announcements', params),
retry: false,
onSuccess: ({ data }: AxiosResponse) =>
queryClient.setQueryData(['admin', 'announcements'], (prevResult: ReadonlyArray<AdminAnnouncement>) =>
[...prevResult, adminAnnouncementSchema.parse(data)],
),
onSettled: () => userAnnouncements.refetch(),
});
const {
mutate: updateAnnouncement,
isPending: isUpdating,
} = useMutation({
mutationFn: ({ id, ...params }: UpdateAnnouncementParams) => api.patch(`/api/v1/pleroma/admin/announcements/${id}`, params),
retry: false,
onSuccess: ({ data }: AxiosResponse) =>
queryClient.setQueryData(['admin', 'announcements'], (prevResult: ReadonlyArray<AdminAnnouncement>) =>
prevResult.map((announcement) => announcement.id === data.id ? adminAnnouncementSchema.parse(data) : announcement),
),
onSettled: () => userAnnouncements.refetch(),
});
const {
mutate: deleteAnnouncement,
isPending: isDeleting,
} = useMutation({
mutationFn: (id: string) => api.delete(`/api/v1/pleroma/admin/announcements/${id}`),
retry: false,
onSuccess: (_, id) =>
queryClient.setQueryData(['admin', 'announcements'], (prevResult: ReadonlyArray<AdminAnnouncement>) =>
prevResult.filter(({ id: announcementId }) => announcementId !== id),
),
onSettled: () => userAnnouncements.refetch(),
});
return {
...result,
createAnnouncement,
isCreating,
updateAnnouncement,
isUpdating,
deleteAnnouncement,
isDeleting,
};
};
export { useAnnouncements };

1
src/api/hooks/announcements/index.ts Normal file
View file

@ -0,0 +1 @@
export { useAnnouncements } from './useAnnouncements';

95
src/api/hooks/announcements/useAnnouncements.ts Normal file
View file

@ -0,0 +1,95 @@
import { useMutation, useQuery } from '@tanstack/react-query';
import { useApi } from 'soapbox/hooks';
import { queryClient } from 'soapbox/queries/client';
import { announcementReactionSchema, announcementSchema, type Announcement, type AnnouncementReaction } from 'soapbox/schemas';
const updateReaction = (reaction: AnnouncementReaction, count: number, me?: boolean, overwrite?: boolean) => announcementReactionSchema.parse({
...reaction,
me: typeof me === 'boolean' ? me : reaction.me,
count: overwrite ? count : (reaction.count + count),
});
export const updateReactions = (reactions: AnnouncementReaction[], name: string, count: number, me?: boolean, overwrite?: boolean) => {
const idx = reactions.findIndex(reaction => reaction.name === name);
if (idx > -1) {
reactions = reactions.map(reaction => reaction.name === name ? updateReaction(reaction, count, me, overwrite) : reaction);
}
return [...reactions, updateReaction(announcementReactionSchema.parse({ name }), count, me, overwrite)];
};
const useAnnouncements = () => {
const api = useApi();
const getAnnouncements = async () => {
const { data } = await api.get<Announcement[]>('/api/v1/announcements');
const normalizedData = data?.map((announcement) => announcementSchema.parse(announcement));
return normalizedData;
};
const { data, ...result } = useQuery<ReadonlyArray<Announcement>>({
queryKey: ['announcements'],
queryFn: getAnnouncements,
placeholderData: [],
});
const {
mutate: addReaction,
} = useMutation({
mutationFn: ({ announcementId, name }: { announcementId: string; name: string }) =>
api.put<Announcement>(`/api/v1/announcements/${announcementId}/reactions/${name}`),
retry: false,
onMutate: ({ announcementId: id, name }) => {
queryClient.setQueryData(['announcements'], (prevResult: Announcement[]) =>
prevResult.map(value => value.id !== id ? value : announcementSchema.parse({
...value,
reactions: updateReactions(value.reactions, name, 1, true),
})),
);
},
onError: (_, { announcementId: id, name }) => {
queryClient.setQueryData(['announcements'], (prevResult: Announcement[]) =>
prevResult.map(value => value.id !== id ? value : announcementSchema.parse({
...value,
reactions: updateReactions(value.reactions, name, -1, false),
})),
);
},
});
const {
mutate: removeReaction,
} = useMutation({
mutationFn: ({ announcementId, name }: { announcementId: string; name: string }) =>
api.delete<Announcement>(`/api/v1/announcements/${announcementId}/reactions/${name}`),
retry: false,
onMutate: ({ announcementId: id, name }) => {
queryClient.setQueryData(['announcements'], (prevResult: Announcement[]) =>
prevResult.map(value => value.id !== id ? value : announcementSchema.parse({
...value,
reactions: updateReactions(value.reactions, name, -1, false),
})),
);
},
onError: (_, { announcementId: id, name }) => {
queryClient.setQueryData(['announcements'], (prevResult: Announcement[]) =>
prevResult.map(value => value.id !== id ? value : announcementSchema.parse({
...value,
reactions: updateReactions(value.reactions, name, 1, true),
})),
);
},
});
return {
data: data?.toSorted((a, b) => new Date(a.starts_at || a.published_at).getDate() - new Date(b.starts_at || b.published_at).getDate()),
...result,
addReaction,
removeReaction,
};
};
export { useAnnouncements };

4
src/api/hooks/streaming/useUserStream.ts
View file

@ -1,4 +1,3 @@
import { fetchAnnouncements } from 'soapbox/actions/announcements';
import { expandNotifications } from 'soapbox/actions/notifications'; import { expandNotifications } from 'soapbox/actions/notifications';
import { expandHomeTimeline } from 'soapbox/actions/timelines'; import { expandHomeTimeline } from 'soapbox/actions/timelines';
import { useStatContext } from 'soapbox/contexts/stat-context'; import { useStatContext } from 'soapbox/contexts/stat-context';
@ -24,8 +23,7 @@ function useUserStream() {
/** Refresh home timeline and notifications. */ /** Refresh home timeline and notifications. */
function refresh(dispatch: AppDispatch, done?: () => void) { function refresh(dispatch: AppDispatch, done?: () => void) {
return dispatch(expandHomeTimeline({}, () => return dispatch(expandHomeTimeline({}, () =>
dispatch(expandNotifications({}, () => dispatch(expandNotifications({}, done))));
dispatch(fetchAnnouncements(done))))));
} }
export { useUserStream }; export { useUserStream };

4
src/components/announcements/announcement-content.tsx
View file

@ -3,7 +3,7 @@ import { useHistory } from 'react-router-dom';
import { getTextDirection } from 'soapbox/utils/rtl'; import { getTextDirection } from 'soapbox/utils/rtl';
import type { Announcement as AnnouncementEntity, Mention as MentionEntity } from 'soapbox/types/entities'; import type { Announcement as AnnouncementEntity, Mention as MentionEntity } from 'soapbox/schemas';
interface IAnnouncementContent { interface IAnnouncementContent {
announcement: AnnouncementEntity; announcement: AnnouncementEntity;
@ -67,7 +67,7 @@ const AnnouncementContent: React.FC<IAnnouncementContent> = ({ announcement }) =
} else if (link.textContent?.charAt(0) === '#' || (link.previousSibling?.textContent?.charAt(link.previousSibling.textContent.length - 1) === '#')) { } else if (link.textContent?.charAt(0) === '#' || (link.previousSibling?.textContent?.charAt(link.previousSibling.textContent.length - 1) === '#')) {
link.addEventListener('click', onHashtagClick.bind(link, link.text), false); link.addEventListener('click', onHashtagClick.bind(link, link.text), false);
} else { } else {
const status = announcement.statuses.get(link.href); const status = announcement.statuses[link.href];
if (status) { if (status) {
link.addEventListener('click', onStatusClick.bind(this, status), false); link.addEventListener('click', onStatusClick.bind(this, status), false);
} }

8
src/components/announcements/announcement.tsx
View file

@ -9,16 +9,14 @@ import AnnouncementContent from './announcement-content';
import ReactionsBar from './reactions-bar'; import ReactionsBar from './reactions-bar';
import type { Map as ImmutableMap } from 'immutable'; import type { Map as ImmutableMap } from 'immutable';
import type { Announcement as AnnouncementEntity } from 'soapbox/types/entities'; import type { Announcement as AnnouncementEntity } from 'soapbox/schemas';
interface IAnnouncement { interface IAnnouncement {
announcement: AnnouncementEntity; announcement: AnnouncementEntity;
addReaction: (id: string, name: string) => void;
removeReaction: (id: string, name: string) => void;
emojiMap: ImmutableMap<string, ImmutableMap<string, string>>; emojiMap: ImmutableMap<string, ImmutableMap<string, string>>;
} }
const Announcement: React.FC<IAnnouncement> = ({ announcement, addReaction, removeReaction, emojiMap }) => { const Announcement: React.FC<IAnnouncement> = ({ announcement, emojiMap }) => {
const features = useFeatures(); const features = useFeatures();
const startsAt = announcement.starts_at && new Date(announcement.starts_at); const startsAt = announcement.starts_at && new Date(announcement.starts_at);
@ -64,8 +62,6 @@ const Announcement: React.FC<IAnnouncement> = ({ announcement, addReaction, remo
<ReactionsBar <ReactionsBar
reactions={announcement.reactions} reactions={announcement.reactions}
announcementId={announcement.id} announcementId={announcement.id}
addReaction={addReaction}
removeReaction={removeReaction}
emojiMap={emojiMap} emojiMap={emojiMap}
/> />
)} )}

20
src/components/announcements/announcements-panel.tsx
View file

@ -5,9 +5,9 @@ import { FormattedMessage } from 'react-intl';
import ReactSwipeableViews from 'react-swipeable-views'; import ReactSwipeableViews from 'react-swipeable-views';
import { createSelector } from 'reselect'; import { createSelector } from 'reselect';
import { addReaction as addReactionAction, removeReaction as removeReactionAction } from 'soapbox/actions/announcements'; import { useAnnouncements } from 'soapbox/api/hooks/announcements';
import { Card, HStack, Widget } from 'soapbox/components/ui'; import { Card, HStack, Widget } from 'soapbox/components/ui';
import { useAppDispatch, useAppSelector } from 'soapbox/hooks'; import { useAppSelector } from 'soapbox/hooks';
import Announcement from './announcement'; import Announcement from './announcement';
@ -16,36 +16,30 @@ import type { RootState } from 'soapbox/store';
const customEmojiMap = createSelector([(state: RootState) => state.custom_emojis], items => (items as ImmutableList<ImmutableMap<string, string>>).reduce((map, emoji) => map.set(emoji.get('shortcode')!, emoji), ImmutableMap<string, ImmutableMap<string, string>>())); const customEmojiMap = createSelector([(state: RootState) => state.custom_emojis], items => (items as ImmutableList<ImmutableMap<string, string>>).reduce((map, emoji) => map.set(emoji.get('shortcode')!, emoji), ImmutableMap<string, ImmutableMap<string, string>>()));
const AnnouncementsPanel = () => { const AnnouncementsPanel = () => {
const dispatch = useAppDispatch();
const emojiMap = useAppSelector(state => customEmojiMap(state)); const emojiMap = useAppSelector(state => customEmojiMap(state));
const [index, setIndex] = useState(0); const [index, setIndex] = useState(0);
const announcements = useAppSelector((state) => state.announcements.items); const { data: announcements } = useAnnouncements();
const addReaction = (id: string, name: string) => dispatch(addReactionAction(id, name)); if (!announcements || announcements.length === 0) return null;
const removeReaction = (id: string, name: string) => dispatch(removeReactionAction(id, name));
if (announcements.size === 0) return null;
const handleChangeIndex = (index: number) => { const handleChangeIndex = (index: number) => {
setIndex(index % announcements.size); setIndex(index % announcements.length);
}; };
return ( return (
<Widget title={<FormattedMessage id='announcements.title' defaultMessage='Announcements' />}> <Widget title={<FormattedMessage id='announcements.title' defaultMessage='Announcements' />}>
<Card className='relative black:rounded-xl black:border black:border-gray-800' size='md' variant='rounded'> <Card className='relative black:rounded-xl black:border black:border-gray-800' size='md' variant='rounded'>
<ReactSwipeableViews animateHeight index={index} onChangeIndex={handleChangeIndex}> <ReactSwipeableViews animateHeight index={index} onChangeIndex={handleChangeIndex}>
{announcements.map((announcement) => ( {announcements!.map((announcement) => (
<Announcement <Announcement
key={announcement.id} key={announcement.id}
announcement={announcement} announcement={announcement}
emojiMap={emojiMap} emojiMap={emojiMap}
addReaction={addReaction}
removeReaction={removeReaction}
/> />
)).reverse()} )).reverse()}
</ReactSwipeableViews> </ReactSwipeableViews>
{announcements.size > 1 && ( {announcements.length > 1 && (
<HStack space={2} alignItems='center' justifyContent='center' className='relative'> <HStack space={2} alignItems='center' justifyContent='center' className='relative'>
{announcements.map((_, i) => ( {announcements.map((_, i) => (
<button <button

13
src/components/announcements/reaction.tsx
View file

@ -1,31 +1,32 @@
import clsx from 'clsx'; import clsx from 'clsx';
import React, { useState } from 'react'; import React, { useState } from 'react';
import { useAnnouncements } from 'soapbox/api/hooks/announcements';
import AnimatedNumber from 'soapbox/components/animated-number'; import AnimatedNumber from 'soapbox/components/animated-number';
import unicodeMapping from 'soapbox/features/emoji/mapping'; import unicodeMapping from 'soapbox/features/emoji/mapping';
import Emoji from './emoji'; import Emoji from './emoji';
import type { Map as ImmutableMap } from 'immutable'; import type { Map as ImmutableMap } from 'immutable';
import type { AnnouncementReaction } from 'soapbox/types/entities'; import type { AnnouncementReaction } from 'soapbox/schemas';
interface IReaction { interface IReaction {
announcementId: string; announcementId: string;
reaction: AnnouncementReaction; reaction: AnnouncementReaction;
emojiMap: ImmutableMap<string, ImmutableMap<string, string>>; emojiMap: ImmutableMap<string, ImmutableMap<string, string>>;
addReaction: (id: string, name: string) => void;
removeReaction: (id: string, name: string) => void;
style: React.CSSProperties; style: React.CSSProperties;
} }
const Reaction: React.FC<IReaction> = ({ announcementId, reaction, addReaction, removeReaction, emojiMap, style }) => { const Reaction: React.FC<IReaction> = ({ announcementId, reaction, emojiMap, style }) => {
const [hovered, setHovered] = useState(false); const [hovered, setHovered] = useState(false);
const { addReaction, removeReaction } = useAnnouncements();
const handleClick = () => { const handleClick = () => {
if (reaction.me) { if (reaction.me) {
removeReaction(announcementId, reaction.name); removeReaction({ announcementId, name: reaction.name });
} else { } else {
addReaction(announcementId, reaction.name); addReaction({ announcementId, name: reaction.name });
} }
}; };

22
src/components/announcements/reactions-bar.tsx
View file

@ -2,28 +2,28 @@ import clsx from 'clsx';
import React from 'react'; import React from 'react';
import { TransitionMotion, spring } from 'react-motion'; import { TransitionMotion, spring } from 'react-motion';
import { useAnnouncements } from 'soapbox/api/hooks/announcements';
import EmojiPickerDropdown from 'soapbox/features/emoji/containers/emoji-picker-dropdown-container'; import EmojiPickerDropdown from 'soapbox/features/emoji/containers/emoji-picker-dropdown-container';
import { useSettings } from 'soapbox/hooks'; import { useSettings } from 'soapbox/hooks';
import Reaction from './reaction'; import Reaction from './reaction';
import type { List as ImmutableList, Map as ImmutableMap } from 'immutable'; import type { Map as ImmutableMap } from 'immutable';
import type { Emoji, NativeEmoji } from 'soapbox/features/emoji'; import type { Emoji, NativeEmoji } from 'soapbox/features/emoji';
import type { AnnouncementReaction } from 'soapbox/types/entities'; import type { AnnouncementReaction } from 'soapbox/schemas';
interface IReactionsBar { interface IReactionsBar {
announcementId: string; announcementId: string;
reactions: ImmutableList<AnnouncementReaction>; reactions: AnnouncementReaction[];
emojiMap: ImmutableMap<string, ImmutableMap<string, string>>; emojiMap: ImmutableMap<string, ImmutableMap<string, string>>;
addReaction: (id: string, name: string) => void;
removeReaction: (id: string, name: string) => void;
} }
const ReactionsBar: React.FC<IReactionsBar> = ({ announcementId, reactions, addReaction, removeReaction, emojiMap }) => { const ReactionsBar: React.FC<IReactionsBar> = ({ announcementId, reactions, emojiMap }) => {
const { reduceMotion } = useSettings(); const { reduceMotion } = useSettings();
const { addReaction } = useAnnouncements();
const handleEmojiPick = (data: Emoji) => { const handleEmojiPick = (data: Emoji) => {
addReaction(announcementId, (data as NativeEmoji).native.replace(/:/g, '')); addReaction({ announcementId, name: (data as NativeEmoji).native.replace(/:/g, '') });
}; };
const willEnter = () => ({ scale: reduceMotion ? 1 : 0 }); const willEnter = () => ({ scale: reduceMotion ? 1 : 0 });
@ -36,25 +36,23 @@ const ReactionsBar: React.FC<IReactionsBar> = ({ announcementId, reactions, addR
key: reaction.name, key: reaction.name,
data: reaction, data: reaction,
style: { scale: reduceMotion ? 1 : spring(1, { stiffness: 150, damping: 13 }) }, style: { scale: reduceMotion ? 1 : spring(1, { stiffness: 150, damping: 13 }) },
})).toArray(); }));
return ( return (
<TransitionMotion styles={styles} willEnter={willEnter} willLeave={willLeave}> <TransitionMotion styles={styles} willEnter={willEnter} willLeave={willLeave}>
{items => ( {items => (
<div className={clsx('flex flex-wrap items-center gap-1', { 'reactions-bar--empty': visibleReactions.isEmpty() })}> <div className={clsx('flex flex-wrap items-center gap-1', { 'reactions-bar--empty': visibleReactions.length === 0 })}>
{items.map(({ key, data, style }) => ( {items.map(({ key, data, style }) => (
<Reaction <Reaction
key={key} key={key}
reaction={data} reaction={data}
style={{ transform: `scale(${style.scale})`, position: style.scale < 0.5 ? 'absolute' : 'static' }} style={{ transform: `scale(${style.scale})`, position: style.scale < 0.5 ? 'absolute' : 'static' }}
announcementId={announcementId} announcementId={announcementId}
addReaction={addReaction}
removeReaction={removeReaction}
emojiMap={emojiMap} emojiMap={emojiMap}
/> />
))} ))}
{visibleReactions.size < 8 && <EmojiPickerDropdown onPickEmoji={handleEmojiPick} />} {visibleReactions.length < 8 && <EmojiPickerDropdown onPickEmoji={handleEmojiPick} />}
</div> </div>
)} )}
</TransitionMotion> </TransitionMotion>

39
src/features/admin/announcements.tsx
View file

@ -1,38 +1,43 @@
import React, { useEffect } from 'react'; import React from 'react';
import { FormattedDate, FormattedMessage, defineMessages, useIntl } from 'react-intl'; import { FormattedDate, FormattedMessage, defineMessages, useIntl } from 'react-intl';
import { deleteAnnouncement, fetchAdminAnnouncements, initAnnouncementModal } from 'soapbox/actions/admin';
import { openModal } from 'soapbox/actions/modals'; import { openModal } from 'soapbox/actions/modals';
import { useAnnouncements } from 'soapbox/api/hooks/admin/useAnnouncements';
import ScrollableList from 'soapbox/components/scrollable-list'; import ScrollableList from 'soapbox/components/scrollable-list';
import { Button, Column, HStack, Stack, Text } from 'soapbox/components/ui'; import { Button, Column, HStack, Stack, Text } from 'soapbox/components/ui';
import { useAppDispatch, useAppSelector } from 'soapbox/hooks'; import { useAppDispatch } from 'soapbox/hooks';
import { Announcement as AnnouncementEntity } from 'soapbox/types/entities'; import { AdminAnnouncement } from 'soapbox/schemas';
import toast from 'soapbox/toast';
const messages = defineMessages({ const messages = defineMessages({
heading: { id: 'column.admin.announcements', defaultMessage: 'Announcements' }, heading: { id: 'column.admin.announcements', defaultMessage: 'Announcements' },
deleteConfirm: { id: 'confirmations.admin.delete_announcement.confirm', defaultMessage: 'Delete' }, deleteConfirm: { id: 'confirmations.admin.delete_announcement.confirm', defaultMessage: 'Delete' },
deleteHeading: { id: 'confirmations.admin.delete_announcement.heading', defaultMessage: 'Delete announcement' }, deleteHeading: { id: 'confirmations.admin.delete_announcement.heading', defaultMessage: 'Delete announcement' },
deleteMessage: { id: 'confirmations.admin.delete_announcement.message', defaultMessage: 'Are you sure you want to delete the announcement?' }, deleteMessage: { id: 'confirmations.admin.delete_announcement.message', defaultMessage: 'Are you sure you want to delete the announcement?' },
deleteSuccess: { id: 'admin.edit_announcement.deleted', defaultMessage: 'Announcement deleted' },
}); });
interface IAnnouncement { interface IAnnouncement {
announcement: AnnouncementEntity; announcement: AdminAnnouncement;
} }
const Announcement: React.FC<IAnnouncement> = ({ announcement }) => { const Announcement: React.FC<IAnnouncement> = ({ announcement }) => {
const intl = useIntl(); const intl = useIntl();
const dispatch = useAppDispatch(); const dispatch = useAppDispatch();
const { deleteAnnouncement } = useAnnouncements();
const handleEditAnnouncement = (announcement: AnnouncementEntity) => () => { const handleEditAnnouncement = () => {
dispatch(initAnnouncementModal(announcement)); dispatch(openModal('EDIT_ANNOUNCEMENT', { announcement }));
}; };
const handleDeleteAnnouncement = (id: string) => () => { const handleDeleteAnnouncement = () => {
dispatch(openModal('CONFIRM', { dispatch(openModal('CONFIRM', {
heading: intl.formatMessage(messages.deleteHeading), heading: intl.formatMessage(messages.deleteHeading),
message: intl.formatMessage(messages.deleteMessage), message: intl.formatMessage(messages.deleteMessage),
confirm: intl.formatMessage(messages.deleteConfirm), confirm: intl.formatMessage(messages.deleteConfirm),
onConfirm: () => dispatch(deleteAnnouncement(id)), onConfirm: () => deleteAnnouncement(announcement.id, {
onSuccess: () => toast.success(messages.deleteSuccess),
}),
})); }));
}; };
@ -68,10 +73,10 @@ const Announcement: React.FC<IAnnouncement> = ({ announcement }) => {
</HStack> </HStack>
)} )}
<HStack justifyContent='end' space={2}> <HStack justifyContent='end' space={2}>
<Button theme='primary' onClick={handleEditAnnouncement(announcement)}> <Button theme='primary' onClick={handleEditAnnouncement}>
<FormattedMessage id='admin.announcements.edit' defaultMessage='Edit' /> <FormattedMessage id='admin.announcements.edit' defaultMessage='Edit' />
</Button> </Button>
<Button theme='primary' onClick={handleDeleteAnnouncement(announcement.id)}> <Button theme='primary' onClick={handleDeleteAnnouncement}>
<FormattedMessage id='admin.announcements.delete' defaultMessage='Delete' /> <FormattedMessage id='admin.announcements.delete' defaultMessage='Delete' />
</Button> </Button>
</HStack> </HStack>
@ -84,15 +89,11 @@ const Announcements: React.FC = () => {
const intl = useIntl(); const intl = useIntl();
const dispatch = useAppDispatch(); const dispatch = useAppDispatch();
const announcements = useAppSelector((state) => state.admin_announcements.items); const { data: announcements, isLoading } = useAnnouncements();
const isLoading = useAppSelector((state) => state.admin_announcements.isLoading);
useEffect(() => {
dispatch(fetchAdminAnnouncements());
}, []);
const handleCreateAnnouncement = () => { const handleCreateAnnouncement = () => {
dispatch(initAnnouncementModal()); dispatch(openModal('EDIT_ANNOUNCEMENT'));
}; };
const emptyMessage = <FormattedMessage id='empty_column.admin.announcements' defaultMessage='There are no announcements yet.' />; const emptyMessage = <FormattedMessage id='empty_column.admin.announcements' defaultMessage='There are no announcements yet.' />;
@ -114,9 +115,9 @@ const Announcements: React.FC = () => {
emptyMessage={emptyMessage} emptyMessage={emptyMessage}
itemClassName='py-3 first:pt-0 last:pb-0' itemClassName='py-3 first:pt-0 last:pb-0'
isLoading={isLoading} isLoading={isLoading}
showLoading={isLoading && !announcements.count()} showLoading={isLoading && !announcements?.length}
> >
{announcements.map((announcement) => ( {announcements!.map((announcement) => (
<Announcement key={announcement.id} announcement={announcement} /> <Announcement key={announcement.id} announcement={announcement} />
))} ))}
</ScrollableList> </ScrollableList>

60
src/features/ui/components/modals/edit-announcement-modal.tsx
View file

@ -1,52 +1,80 @@
import React from 'react'; import React, { useState } from 'react';
import { FormattedMessage, defineMessages, useIntl } from 'react-intl'; import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
import { changeAnnouncementAllDay, changeAnnouncementContent, changeAnnouncementEndTime, changeAnnouncementStartTime, handleCreateAnnouncement } from 'soapbox/actions/admin';
import { closeModal } from 'soapbox/actions/modals'; import { closeModal } from 'soapbox/actions/modals';
import { useAnnouncements } from 'soapbox/api/hooks/admin/useAnnouncements';
import { Form, FormGroup, HStack, Modal, Stack, Text, Textarea, Toggle } from 'soapbox/components/ui'; import { Form, FormGroup, HStack, Modal, Stack, Text, Textarea, Toggle } from 'soapbox/components/ui';
import { DatePicker } from 'soapbox/features/ui/util/async-components'; import { DatePicker } from 'soapbox/features/ui/util/async-components';
import { useAppDispatch, useAppSelector } from 'soapbox/hooks'; import { useAppDispatch } from 'soapbox/hooks';
import toast from 'soapbox/toast';
import type { AdminAnnouncement } from 'soapbox/schemas';
const messages = defineMessages({ const messages = defineMessages({
save: { id: 'admin.edit_announcement.save', defaultMessage: 'Save' }, save: { id: 'admin.edit_announcement.save', defaultMessage: 'Save' },
announcementContentPlaceholder: { id: 'admin.edit_announcement.fields.content_placeholder', defaultMessage: 'Announcement content' }, announcementContentPlaceholder: { id: 'admin.edit_announcement.fields.content_placeholder', defaultMessage: 'Announcement content' },
announcementStartTimePlaceholder: { id: 'admin.edit_announcement.fields.start_time_placeholder', defaultMessage: 'Announcement starts on:' }, announcementStartTimePlaceholder: { id: 'admin.edit_announcement.fields.start_time_placeholder', defaultMessage: 'Announcement starts on:' },
announcementEndTimePlaceholder: { id: 'admin.edit_announcement.fields.end_time_placeholder', defaultMessage: 'Announcement ends on:' }, announcementEndTimePlaceholder: { id: 'admin.edit_announcement.fields.end_time_placeholder', defaultMessage: 'Announcement ends on:' },
announcementCreateSuccess: { id: 'admin.edit_announcement.created', defaultMessage: 'Announcement created' },
announcementUpdateSuccess: { id: 'admin.edit_announcement.updated', defaultMessage: 'Announcement edited' },
}); });
interface IEditAnnouncementModal { interface IEditAnnouncementModal {
onClose: (type?: string) => void; onClose: (type?: string) => void;
announcement?: AdminAnnouncement;
} }
const EditAnnouncementModal: React.FC<IEditAnnouncementModal> = ({ onClose }) => { const EditAnnouncementModal: React.FC<IEditAnnouncementModal> = ({ onClose, announcement }) => {
const dispatch = useAppDispatch(); const dispatch = useAppDispatch();
const { createAnnouncement, updateAnnouncement } = useAnnouncements();
const intl = useIntl(); const intl = useIntl();
const id = useAppSelector((state) => state.admin_announcements.form.id); const [content, setContent] = useState(announcement?.content || '');
const content = useAppSelector((state) => state.admin_announcements.form.content); const [startTime, setStartTime] = useState(announcement?.starts_at ? new Date(announcement.starts_at) : null);
const startTime = useAppSelector((state) => state.admin_announcements.form.starts_at); const [endTime, setEndTime] = useState(announcement?.ends_at ? new Date(announcement.ends_at) : null);
const endTime = useAppSelector((state) => state.admin_announcements.form.ends_at); const [allDay, setAllDay] = useState(announcement?.all_day || false);
const allDay = useAppSelector((state) => state.admin_announcements.form.all_day);
const onChangeContent: React.ChangeEventHandler<HTMLTextAreaElement> = ({ target }) => const onChangeContent: React.ChangeEventHandler<HTMLTextAreaElement> = ({ target }) => setContent(target.value);
dispatch(changeAnnouncementContent(target.value));
const onChangeStartTime = (date: Date | null) => dispatch(changeAnnouncementStartTime(date)); const onChangeStartTime = (date: Date | null) => setStartTime(date);
const onChangeEndTime = (date: Date | null) => dispatch(changeAnnouncementEndTime(date)); const onChangeEndTime = (date: Date | null) => setEndTime(date);
const onChangeAllDay: React.ChangeEventHandler<HTMLInputElement> = ({ target }) => dispatch(changeAnnouncementAllDay(target.checked)); const onChangeAllDay: React.ChangeEventHandler<HTMLInputElement> = ({ target }) => setAllDay(target.checked);
const onClickClose = () => { const onClickClose = () => {
onClose('EDIT_ANNOUNCEMENT'); onClose('EDIT_ANNOUNCEMENT');
}; };
const handleSubmit = () => dispatch(handleCreateAnnouncement()).then(() => dispatch(closeModal('EDIT_ANNOUNCEMENT'))); const handleSubmit = () => {
const form = {
content,
starts_at: startTime?.toISOString() || null,
ends_at: endTime?.toISOString() || null,
all_day: allDay,
};
if (announcement) {
updateAnnouncement({ ...form, id: announcement.id }, {
onSuccess: () => {
dispatch(closeModal('EDIT_ANNOUNCEMENT'));
toast.success(messages.announcementUpdateSuccess);
},
});
} else {
createAnnouncement(form, {
onSuccess: () => {
dispatch(closeModal('EDIT_ANNOUNCEMENT'));
toast.success(messages.announcementCreateSuccess);
},
});
}
};
return ( return (
<Modal <Modal
onClose={onClickClose} onClose={onClickClose}
title={id title={announcement
? <FormattedMessage id='column.admin.edit_announcement' defaultMessage='Edit announcement' /> ? <FormattedMessage id='column.admin.edit_announcement' defaultMessage='Edit announcement' />
: <FormattedMessage id='column.admin.create_announcement' defaultMessage='Create announcement' />} : <FormattedMessage id='column.admin.create_announcement' defaultMessage='Create announcement' />}
confirmationAction={handleSubmit} confirmationAction={handleSubmit}

3
src/features/ui/index.tsx
View file

@ -4,7 +4,6 @@ import { Switch, useHistory, useLocation, Redirect } from 'react-router-dom';
import { fetchFollowRequests } from 'soapbox/actions/accounts'; import { fetchFollowRequests } from 'soapbox/actions/accounts';
import { fetchReports, fetchUsers, fetchConfig } from 'soapbox/actions/admin'; import { fetchReports, fetchUsers, fetchConfig } from 'soapbox/actions/admin';
import { fetchAnnouncements } from 'soapbox/actions/announcements';
import { fetchCustomEmojis } from 'soapbox/actions/custom-emojis'; import { fetchCustomEmojis } from 'soapbox/actions/custom-emojis';
import { fetchFilters } from 'soapbox/actions/filters'; import { fetchFilters } from 'soapbox/actions/filters';
import { fetchMarker } from 'soapbox/actions/markers'; import { fetchMarker } from 'soapbox/actions/markers';
@ -418,8 +417,6 @@ const UI: React.FC<IUI> = ({ children }) => {
.then(() => dispatch(fetchMarker(['notifications']))) .then(() => dispatch(fetchMarker(['notifications'])))
.catch(console.error); .catch(console.error);
dispatch(fetchAnnouncements());
if (account.staff) { if (account.staff) {
dispatch(fetchReports({ resolved: false })); dispatch(fetchReports({ resolved: false }));
dispatch(fetchUsers(['local', 'need_approval'])); dispatch(fetchUsers(['local', 'need_approval']));

22
src/normalizers/announcement-reaction.ts
View file

@ -1,22 +0,0 @@
/**
* Announcement reaction normalizer:
* Converts API announcement emoji reactions into our internal format.
* @see {@link https://docs.joinmastodon.org/entities/announcementreaction/}
*/
import { Map as ImmutableMap, Record as ImmutableRecord, fromJS } from 'immutable';
// https://docs.joinmastodon.org/entities/announcement/
export const AnnouncementReactionRecord = ImmutableRecord({
name: '',
count: 0,
me: false,
url: null as string | null,
static_url: null as string | null,
announcement_id: '',
});
export const normalizeAnnouncementReaction = (announcementReaction: Record<string, any>, announcementId?: string) => {
return AnnouncementReactionRecord(ImmutableMap(fromJS(announcementReaction)).withMutations(reaction => {
reaction.set('announcement_id', announcementId as any);
}));
};

89
src/normalizers/announcement.ts
View file

@ -1,89 +0,0 @@
/**
* Announcement normalizer:
* Converts API announcements into our internal format.
* @see {@link https://docs.joinmastodon.org/entities/announcement/}
*/
import {
Map as ImmutableMap,
List as ImmutableList,
Record as ImmutableRecord,
fromJS,
} from 'immutable';
import emojify from 'soapbox/features/emoji';
import { normalizeEmoji } from 'soapbox/normalizers/emoji';
import { makeEmojiMap } from 'soapbox/utils/normalizers';
import { normalizeAnnouncementReaction } from './announcement-reaction';
import { normalizeMention } from './mention';
import type { AnnouncementReaction, Emoji, Mention } from 'soapbox/types/entities';
// https://docs.joinmastodon.org/entities/announcement/
export const AnnouncementRecord = ImmutableRecord({
id: '',
content: '',
starts_at: null as Date | null,
ends_at: null as Date | null,
all_day: false,
read: false,
published_at: Date,
reactions: ImmutableList<AnnouncementReaction>(),
statuses: ImmutableMap<string, string>(),
mentions: ImmutableList<Mention>(),
tags: ImmutableList<ImmutableMap<string, any>>(),
emojis: ImmutableList<Emoji>(),
updated_at: Date,
pleroma: ImmutableMap<string, any>(),
// Internal fields
contentHtml: '',
});
const normalizeMentions = (announcement: ImmutableMap<string, any>) => {
return announcement.update('mentions', ImmutableList(), mentions => {
return mentions.map(normalizeMention);
});
};
// Normalize reactions
const normalizeReactions = (announcement: ImmutableMap<string, any>) => {
return announcement.update('reactions', ImmutableList(), reactions => {
return reactions.map((reaction: ImmutableMap<string, any>) => normalizeAnnouncementReaction(reaction, announcement.get('id')));
});
};
// Normalize emojis
const normalizeEmojis = (announcement: ImmutableMap<string, any>) => {
return announcement.update('emojis', ImmutableList(), emojis => {
return emojis.map(normalizeEmoji);
});
};
const normalizeContent = (announcement: ImmutableMap<string, any>) => {
const emojiMap = makeEmojiMap(announcement.get('emojis'));
const contentHtml = emojify(announcement.get('content'), emojiMap);
return announcement.set('contentHtml', contentHtml);
};
const normalizeStatuses = (announcement: ImmutableMap<string, any>) => {
const statuses = announcement
.get('statuses', ImmutableList())
.reduce((acc: ImmutableMap<string, string>, curr: ImmutableMap<string, any>) => acc.set(curr.get('url'), `/@${curr.getIn(['account', 'acct'])}/${curr.get('id')}`), ImmutableMap());
return announcement.set('statuses', statuses);
};
export const normalizeAnnouncement = (announcement: Record<string, any>) => {
return AnnouncementRecord(
ImmutableMap(fromJS(announcement)).withMutations(announcement => {
normalizeMentions(announcement);
normalizeReactions(announcement);
normalizeEmojis(announcement);
normalizeContent(announcement);
normalizeStatuses(announcement);
}),
);
};

2
src/normalizers/index.ts
View file

@ -1,8 +1,6 @@
export { AccountRecord, FieldRecord, normalizeAccount } from './account'; export { AccountRecord, FieldRecord, normalizeAccount } from './account';
export { AdminAccountRecord, normalizeAdminAccount } from './admin-account'; export { AdminAccountRecord, normalizeAdminAccount } from './admin-account';
export { AdminReportRecord, normalizeAdminReport } from './admin-report'; export { AdminReportRecord, normalizeAdminReport } from './admin-report';
export { AnnouncementRecord, normalizeAnnouncement } from './announcement';
export { AnnouncementReactionRecord, normalizeAnnouncementReaction } from './announcement-reaction';
export { AttachmentRecord, normalizeAttachment } from './attachment'; export { AttachmentRecord, normalizeAttachment } from './attachment';
export { ChatRecord, normalizeChat } from './chat'; export { ChatRecord, normalizeChat } from './chat';
export { ChatMessageRecord, normalizeChatMessage } from './chat-message'; export { ChatMessageRecord, normalizeChatMessage } from './chat-message';

85
src/reducers/admin-announcements.ts
View file

@ -1,85 +0,0 @@
import { List as ImmutableList, Record as ImmutableRecord } from 'immutable';
import {
ADMIN_ANNOUNCEMENT_CHANGE_ALL_DAY,
ADMIN_ANNOUNCEMENT_CHANGE_CONTENT,
ADMIN_ANNOUNCEMENT_CHANGE_END_TIME,
ADMIN_ANNOUNCEMENT_CHANGE_START_TIME,
ADMIN_ANNOUNCEMENT_CREATE_FAIL,
ADMIN_ANNOUNCEMENT_CREATE_REQUEST,
ADMIN_ANNOUNCEMENT_CREATE_SUCCESS,
ADMIN_ANNOUNCEMENT_DELETE_SUCCESS,
ADMIN_ANNOUNCEMENT_MODAL_INIT,
ADMIN_ANNOUNCEMENTS_FETCH_FAIL,
ADMIN_ANNOUNCEMENTS_FETCH_REQUEST,
ADMIN_ANNOUNCEMENTS_FETCH_SUCCESS,
} from 'soapbox/actions/admin';
import { normalizeAnnouncement } from 'soapbox/normalizers';
import type { AnyAction } from 'redux';
import type { Announcement, APIEntity } from 'soapbox/types/entities';
const AnnouncementFormRecord = ImmutableRecord({
id: null as string | null,
content: '',
starts_at: null as Date | null,
ends_at: null as Date | null,
all_day: false,
is_submitting: false,
});
const ReducerRecord = ImmutableRecord({
items: ImmutableList<Announcement>(),
isLoading: false,
page: -1,
form: AnnouncementFormRecord(),
});
export default function adminAnnouncementsReducer(state = ReducerRecord(), action: AnyAction) {
switch (action.type) {
case ADMIN_ANNOUNCEMENTS_FETCH_REQUEST:
return state.set('isLoading', true);
case ADMIN_ANNOUNCEMENTS_FETCH_SUCCESS:
return state.withMutations(map => {
const items = ImmutableList<Announcement>((action.announcements).map((announcement: APIEntity) => normalizeAnnouncement(announcement)));
map.set('items', items);
map.set('isLoading', false);
});
case ADMIN_ANNOUNCEMENTS_FETCH_FAIL:
return state.set('isLoading', false);
case ADMIN_ANNOUNCEMENT_DELETE_SUCCESS:
return state.update('items', list => {
const idx = list.findIndex(x => x.id === action.id);
if (idx > -1) {
return list.delete(idx);
}
return list;
});
case ADMIN_ANNOUNCEMENT_CHANGE_CONTENT:
return state.setIn(['form', 'content'], action.value);
case ADMIN_ANNOUNCEMENT_CHANGE_START_TIME:
return state.setIn(['form', 'starts_at'], action.value);
case ADMIN_ANNOUNCEMENT_CHANGE_END_TIME:
return state.setIn(['form', 'ends_at'], action.value);
case ADMIN_ANNOUNCEMENT_CHANGE_ALL_DAY:
return state.setIn(['form', 'all_day'], action.value);
case ADMIN_ANNOUNCEMENT_CREATE_REQUEST:
return state.setIn(['form', 'is_submitting'], true);
case ADMIN_ANNOUNCEMENT_CREATE_SUCCESS:
case ADMIN_ANNOUNCEMENT_CREATE_FAIL:
return state.setIn(['form', 'is_submitting'], true);
case ADMIN_ANNOUNCEMENT_MODAL_INIT:
return state.set('form', action.announcement ? AnnouncementFormRecord({
id: action.announcement.id,
content: action.announcement.content,
starts_at: action.announcement.starts_at ? new Date(action.announcement.starts_at) : null,
ends_at: action.announcement.ends_at ? new Date(action.announcement.ends_at) : null,
all_day: action.announcement.all_day,
}) : AnnouncementFormRecord());
default:
return state;
}
}

42
src/reducers/announcements.test.ts
View file

@ -1,42 +0,0 @@
import { List as ImmutableList, Record as ImmutableRecord, Set as ImmutableSet } from 'immutable';
import announcements from 'soapbox/__fixtures__/announcements.json';
import {
ANNOUNCEMENTS_FETCH_SUCCESS,
ANNOUNCEMENTS_UPDATE,
} from 'soapbox/actions/announcements';
import reducer from './announcements';
describe('accounts reducer', () => {
it('should return the initial state', () => {
expect(reducer(undefined, {} as any)).toMatchObject({
items: ImmutableList(),
isLoading: false,
show: false,
unread: ImmutableSet(),
});
});
describe('ANNOUNCEMENTS_FETCH_SUCCESS', () => {
it('parses announcements as Records', () => {
const action = { type: ANNOUNCEMENTS_FETCH_SUCCESS, announcements };
const result = reducer(undefined, action).items;
expect(result.every((announcement) => ImmutableRecord.isRecord(announcement))).toBe(true);
});
});
describe('ANNOUNCEMENTS_UPDATE', () => {
it('updates announcements', () => {
const state = reducer(undefined, { type: ANNOUNCEMENTS_FETCH_SUCCESS, announcements: [announcements[0]] });
const action = { type: ANNOUNCEMENTS_UPDATE, announcement: { ...announcements[0], content: '<p>Updated to Soapbox v3.0.0.</p>' } };
const result = reducer(state, action).items;
expect(result.size === 1);
expect(result.first()?.content === '<p>Updated to Soapbox v3.0.0.</p>');
});
});
});

110
src/reducers/announcements.ts
View file

@ -1,110 +0,0 @@
import { List as ImmutableList, Record as ImmutableRecord, Set as ImmutableSet } from 'immutable';
import {
ANNOUNCEMENTS_FETCH_REQUEST,
ANNOUNCEMENTS_FETCH_SUCCESS,
ANNOUNCEMENTS_FETCH_FAIL,
ANNOUNCEMENTS_UPDATE,
ANNOUNCEMENTS_REACTION_UPDATE,
ANNOUNCEMENTS_REACTION_ADD_REQUEST,
ANNOUNCEMENTS_REACTION_ADD_FAIL,
ANNOUNCEMENTS_REACTION_REMOVE_REQUEST,
ANNOUNCEMENTS_REACTION_REMOVE_FAIL,
ANNOUNCEMENTS_TOGGLE_SHOW,
ANNOUNCEMENTS_DELETE,
ANNOUNCEMENTS_DISMISS_SUCCESS,
} from 'soapbox/actions/announcements';
import { normalizeAnnouncement, normalizeAnnouncementReaction } from 'soapbox/normalizers';
import type { AnyAction } from 'redux';
import type { Announcement, AnnouncementReaction, APIEntity } from 'soapbox/types/entities';
const ReducerRecord = ImmutableRecord({
items: ImmutableList<Announcement>(),
isLoading: false,
show: false,
unread: ImmutableSet<string>(),
});
type State = ReturnType<typeof ReducerRecord>;
const updateReaction = (state: State, id: string, name: string, updater: (a: AnnouncementReaction) => AnnouncementReaction) => state.update('items', list => list.map(announcement => {
if (announcement.id === id) {
return announcement.update('reactions', reactions => {
const idx = reactions.findIndex(reaction => reaction.name === name);
if (idx > -1) {
return reactions.update(idx, reaction => updater(reaction!));
}
return reactions.push(updater(normalizeAnnouncementReaction({ name, count: 0 })));
});
}
return announcement;
}));
const updateReactionCount = (state: State, reaction: AnnouncementReaction) => updateReaction(state, reaction.announcement_id, reaction.name, x => x.set('count', reaction.count));
const addReaction = (state: State, id: string, name: string) => updateReaction(state, id, name, (x: AnnouncementReaction) => x.set('me', true).update('count', y => y + 1));
const removeReaction = (state: State, id: string, name: string) => updateReaction(state, id, name, (x: AnnouncementReaction) => x.set('me', false).update('count', y => y - 1));
const sortAnnouncements = (list: ImmutableList<Announcement>) => list.sortBy(x => x.starts_at || x.published_at);
const updateAnnouncement = (state: State, announcement: Announcement) => {
const idx = state.items.findIndex(x => x.id === announcement.id);
if (idx > -1) {
// Deep merge is used because announcements from the streaming API do not contain
// personalized data about which reactions have been selected by the given user,
// and that is information we want to preserve
return state.update('items', list => sortAnnouncements(list.update(idx, x => x!.mergeDeep(announcement))));
}
return state.update('items', list => sortAnnouncements(list.unshift(announcement)));
};
export default function announcementsReducer(state = ReducerRecord(), action: AnyAction) {
switch (action.type) {
case ANNOUNCEMENTS_TOGGLE_SHOW:
return state.withMutations(map => {
map.set('show', !map.show);
});
case ANNOUNCEMENTS_FETCH_REQUEST:
return state.set('isLoading', true);
case ANNOUNCEMENTS_FETCH_SUCCESS:
return state.withMutations(map => {
const items = ImmutableList<Announcement>((action.announcements).map((announcement: APIEntity) => normalizeAnnouncement(announcement)));
map.set('items', items);
map.set('isLoading', false);
});
case ANNOUNCEMENTS_FETCH_FAIL:
return state.set('isLoading', false);
case ANNOUNCEMENTS_UPDATE:
return updateAnnouncement(state, normalizeAnnouncement(action.announcement));
case ANNOUNCEMENTS_REACTION_UPDATE:
return updateReactionCount(state, action.reaction);
case ANNOUNCEMENTS_REACTION_ADD_REQUEST:
case ANNOUNCEMENTS_REACTION_REMOVE_FAIL:
return addReaction(state, action.id, action.name);
case ANNOUNCEMENTS_REACTION_REMOVE_REQUEST:
case ANNOUNCEMENTS_REACTION_ADD_FAIL:
return removeReaction(state, action.id, action.name);
case ANNOUNCEMENTS_DISMISS_SUCCESS:
return updateAnnouncement(state, normalizeAnnouncement({ id: action.id, read: true }));
case ANNOUNCEMENTS_DELETE:
return state.update('items', list => {
const idx = list.findIndex(x => x.id === action.id);
if (idx > -1) {
return list.delete(idx);
}
return list;
});
default:
return state;
}
}

4
src/reducers/index.ts
View file

@ -7,10 +7,8 @@ import entities from 'soapbox/entity-store/reducer';
import accounts_meta from './accounts-meta'; import accounts_meta from './accounts-meta';
import admin from './admin'; import admin from './admin';
import admin_announcements from './admin-announcements';
import admin_user_index from './admin-user-index'; import admin_user_index from './admin-user-index';
import aliases from './aliases'; import aliases from './aliases';
import announcements from './announcements';
import auth from './auth'; import auth from './auth';
import backups from './backups'; import backups from './backups';
import chat_message_lists from './chat-message-lists'; import chat_message_lists from './chat-message-lists';
@ -66,10 +64,8 @@ import user_lists from './user-lists';
const reducers = { const reducers = {
accounts_meta, accounts_meta,
admin, admin,
admin_announcements,
admin_user_index, admin_user_index,
aliases, aliases,
announcements,
auth, auth,
backups, backups,
chat_message_lists, chat_message_lists,

17
src/schemas/announcement-reaction.ts Normal file
View file

@ -0,0 +1,17 @@
import { z } from 'zod';
import type { Resolve } from 'soapbox/utils/types';
// https://docs.joinmastodon.org/entities/announcement/
const announcementReactionSchema = z.object({
name: z.string().catch(''),
count: z.number().int().nonnegative().catch(0),
me: z.boolean().catch(false),
url: z.string().nullable().catch(null),
static_url: z.string().nullable().catch(null),
announcement_id: z.string().catch(''),
});
type AnnouncementReaction = Resolve<z.infer<typeof announcementReactionSchema>>;
export { announcementReactionSchema, type AnnouncementReaction };

58
src/schemas/announcement.ts Normal file
View file

@ -0,0 +1,58 @@
import { z } from 'zod';
import emojify from 'soapbox/features/emoji';
import { announcementReactionSchema } from './announcement-reaction';
import { customEmojiSchema } from './custom-emoji';
import { mentionSchema } from './mention';
import { tagSchema } from './tag';
import { dateSchema, filteredArray, makeCustomEmojiMap } from './utils';
import type { Resolve } from 'soapbox/utils/types';
const transformAnnouncement = (announcement: Resolve<z.infer<typeof baseAnnouncementSchema>>) => {
const emojiMap = makeCustomEmojiMap(announcement.emojis);
const contentHtml = emojify(announcement.content, emojiMap);
return {
...announcement,
contentHtml,
};
};
// https://docs.joinmastodon.org/entities/announcement/
const baseAnnouncementSchema = z.object({
id: z.string(),
content: z.string().catch(''),
starts_at: z.string().datetime().nullable().catch(null),
ends_at: z.string().datetime().nullable().catch(null),
all_day: z.boolean().catch(false),
read: z.boolean().catch(false),
published_at: dateSchema,
reactions: filteredArray(announcementReactionSchema),
statuses: z.preprocess(
(statuses: any) => Array.isArray(statuses)
? Object.fromEntries(statuses.map((status: any) => [status.url, status.account?.acct]) || [])
: statuses,
z.record(z.string(), z.string()),
),
mentions: filteredArray(mentionSchema),
tags: filteredArray(tagSchema),
emojis: filteredArray(customEmojiSchema),
updated_at: dateSchema,
});
const announcementSchema = baseAnnouncementSchema.transform(transformAnnouncement);
type Announcement = Resolve<z.infer<typeof announcementSchema>>;
const adminAnnouncementSchema = baseAnnouncementSchema.extend({
pleroma: z.object({
raw_content: z.string().catch(''),
}),
}).transform(transformAnnouncement);
type AdminAnnouncement = Resolve<z.infer<typeof adminAnnouncementSchema>>;
export { announcementSchema, adminAnnouncementSchema, type Announcement, type AdminAnnouncement };

2
src/schemas/index.ts
View file

@ -1,4 +1,6 @@
export { accountSchema, type Account } from './account'; export { accountSchema, type Account } from './account';
export { announcementSchema, adminAnnouncementSchema, type Announcement, type AdminAnnouncement } from './announcement';
export { announcementReactionSchema, type AnnouncementReaction } from './announcement-reaction';
export { attachmentSchema, type Attachment } from './attachment'; export { attachmentSchema, type Attachment } from './attachment';
export { bookmarkFolderSchema, type BookmarkFolder } from './bookmark-folder'; export { bookmarkFolderSchema, type BookmarkFolder } from './bookmark-folder';
export { cardSchema, type Card } from './card'; export { cardSchema, type Card } from './card';

6
src/types/entities.ts
View file

@ -1,8 +1,6 @@
import { import {
AdminAccountRecord, AdminAccountRecord,
AdminReportRecord, AdminReportRecord,
AnnouncementRecord,
AnnouncementReactionRecord,
AttachmentRecord, AttachmentRecord,
ChatRecord, ChatRecord,
ChatMessageRecord, ChatMessageRecord,
@ -27,8 +25,6 @@ import type { LegacyMap } from 'soapbox/utils/legacy';
type AdminAccount = ReturnType<typeof AdminAccountRecord>; type AdminAccount = ReturnType<typeof AdminAccountRecord>;
type AdminReport = ReturnType<typeof AdminReportRecord>; type AdminReport = ReturnType<typeof AdminReportRecord>;
type Announcement = ReturnType<typeof AnnouncementRecord>;
type AnnouncementReaction = ReturnType<typeof AnnouncementReactionRecord>;
type Attachment = ReturnType<typeof AttachmentRecord>; type Attachment = ReturnType<typeof AttachmentRecord>;
type Chat = ReturnType<typeof ChatRecord>; type Chat = ReturnType<typeof ChatRecord>;
type ChatMessage = ReturnType<typeof ChatMessageRecord>; type ChatMessage = ReturnType<typeof ChatMessageRecord>;
@ -61,8 +57,6 @@ export {
Account, Account,
AdminAccount, AdminAccount,
AdminReport, AdminReport,
Announcement,
AnnouncementReaction,
Attachment, Attachment,
Chat, Chat,
ChatMessage, ChatMessage,

2
src/utils/features.ts
View file

@ -231,7 +231,7 @@ const getInstanceFeatures = (instance: Instance) => {
* @see DELETE /api/v1/announcements/:id/reactions/:name * @see DELETE /api/v1/announcements/:id/reactions/:name
* @see {@link https://docs.joinmastodon.org/methods/announcements/} * @see {@link https://docs.joinmastodon.org/methods/announcements/}
*/ */
announcementsReactions: v.software === MASTODON && gte(v.compatVersion, '3.1.0'), announcementsReactions: true, // v.software === MASTODON && gte(v.compatVersion, '3.1.0'),
/** /**
* Pleroma backups. * Pleroma backups.