matty/ncd-fe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Use react-query and zod for announcements

Browse Source 
Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
This commit is contained in:
marcin mikołajczak
2024-04-09 23:38:09 +02:00
parent d4beb15d71
commit 161db37ba0
28 changed files with 391 additions and 905 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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 { deleteAnnouncement, fetchAdminAnnouncements, initAnnouncementModal } from 'soapbox/actions/admin';
import { openModal } from 'soapbox/actions/modals';
import { useAnnouncements } from 'soapbox/api/hooks/admin/useAnnouncements';
import ScrollableList from 'soapbox/components/scrollable-list';
import { Button, Column, HStack, Stack, Text } from 'soapbox/components/ui';
import { useAppDispatch, useAppSelector } from 'soapbox/hooks';
import { Announcement as AnnouncementEntity } from 'soapbox/types/entities';
import { useAppDispatch } from 'soapbox/hooks';
import { AdminAnnouncement } from 'soapbox/schemas';
import toast from 'soapbox/toast';
const messages = defineMessages({
heading: { id: 'column.admin.announcements', defaultMessage: 'Announcements' },
deleteConfirm: { id: 'confirmations.admin.delete_announcement.confirm', defaultMessage: 'Delete' },
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?' },
deleteSuccess: { id: 'admin.edit_announcement.deleted', defaultMessage: 'Announcement deleted' },
});
interface IAnnouncement {
announcement: AnnouncementEntity;
announcement: AdminAnnouncement;
}
const Announcement: React.FC<IAnnouncement> = ({ announcement }) => {
const intl = useIntl();
const dispatch = useAppDispatch();
const { deleteAnnouncement } = useAnnouncements();
const handleEditAnnouncement = (announcement: AnnouncementEntity) => () => {
dispatch(initAnnouncementModal(announcement));
const handleEditAnnouncement = () => {
dispatch(openModal('EDIT_ANNOUNCEMENT', { announcement }));
};
const handleDeleteAnnouncement = (id: string) => () => {
const handleDeleteAnnouncement = () => {
dispatch(openModal('CONFIRM', {
heading: intl.formatMessage(messages.deleteHeading),
message: intl.formatMessage(messages.deleteMessage),
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 justifyContent='end' space={2}>
<Button theme='primary' onClick={handleEditAnnouncement(announcement)}>
<Button theme='primary' onClick={handleEditAnnouncement}>
<FormattedMessage id='admin.announcements.edit' defaultMessage='Edit' />
</Button>
<Button theme='primary' onClick={handleDeleteAnnouncement(announcement.id)}>
<Button theme='primary' onClick={handleDeleteAnnouncement}>
<FormattedMessage id='admin.announcements.delete' defaultMessage='Delete' />
</Button>
</HStack>
@ -84,15 +89,11 @@ const Announcements: React.FC = () => {
const intl = useIntl();
const dispatch = useAppDispatch();
const announcements = useAppSelector((state) => state.admin_announcements.items);
const isLoading = useAppSelector((state) => state.admin_announcements.isLoading);
const { data: announcements, isLoading } = useAnnouncements();
useEffect(() => {
dispatch(fetchAdminAnnouncements());
}, []);
const handleCreateAnnouncement = () => {
dispatch(initAnnouncementModal());
dispatch(openModal('EDIT_ANNOUNCEMENT'));
};
const emptyMessage = <FormattedMessage id='empty_column.admin.announcements' defaultMessage='There are no announcements yet.' />;
@ -114,9 +115,9 @@ const Announcements: React.FC = () => {
emptyMessage={emptyMessage}
itemClassName='py-3 first:pt-0 last:pb-0'
isLoading={isLoading}
showLoading={isLoading && !announcements.count()}
showLoading={isLoading && !announcements?.length}
>
{announcements.map((announcement) => (
{announcements!.map((announcement) => (
<Announcement key={announcement.id} announcement={announcement} />
))}
</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 { changeAnnouncementAllDay, changeAnnouncementContent, changeAnnouncementEndTime, changeAnnouncementStartTime, handleCreateAnnouncement } from 'soapbox/actions/admin';
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 { 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({
save: { id: 'admin.edit_announcement.save', defaultMessage: 'Save' },
announcementContentPlaceholder: { id: 'admin.edit_announcement.fields.content_placeholder', defaultMessage: 'Announcement content' },
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:' },
announcementCreateSuccess: { id: 'admin.edit_announcement.created', defaultMessage: 'Announcement created' },
announcementUpdateSuccess: { id: 'admin.edit_announcement.updated', defaultMessage: 'Announcement edited' },
});
interface IEditAnnouncementModal {
onClose: (type?: string) => void;
announcement?: AdminAnnouncement;
}
const EditAnnouncementModal: React.FC<IEditAnnouncementModal> = ({ onClose }) => {
const EditAnnouncementModal: React.FC<IEditAnnouncementModal> = ({ onClose, announcement }) => {
const dispatch = useAppDispatch();
const { createAnnouncement, updateAnnouncement } = useAnnouncements();
const intl = useIntl();
const id = useAppSelector((state) => state.admin_announcements.form.id);
const content = useAppSelector((state) => state.admin_announcements.form.content);
const startTime = useAppSelector((state) => state.admin_announcements.form.starts_at);
const endTime = useAppSelector((state) => state.admin_announcements.form.ends_at);
const allDay = useAppSelector((state) => state.admin_announcements.form.all_day);
const [content, setContent] = useState(announcement?.content || '');
const [startTime, setStartTime] = useState(announcement?.starts_at ? new Date(announcement.starts_at) : null);
const [endTime, setEndTime] = useState(announcement?.ends_at ? new Date(announcement.ends_at) : null);
const [allDay, setAllDay] = useState(announcement?.all_day || false);
const onChangeContent: React.ChangeEventHandler<HTMLTextAreaElement> = ({ target }) =>
dispatch(changeAnnouncementContent(target.value));
const onChangeContent: React.ChangeEventHandler<HTMLTextAreaElement> = ({ target }) => setContent(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 = () => {
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 (
<Modal
onClose={onClickClose}
title={id
title={announcement
? <FormattedMessage id='column.admin.edit_announcement' defaultMessage='Edit announcement' />
: <FormattedMessage id='column.admin.create_announcement' defaultMessage='Create announcement' />}
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 { fetchReports, fetchUsers, fetchConfig } from 'soapbox/actions/admin';
import { fetchAnnouncements } from 'soapbox/actions/announcements';
import { fetchCustomEmojis } from 'soapbox/actions/custom-emojis';
import { fetchFilters } from 'soapbox/actions/filters';
import { fetchMarker } from 'soapbox/actions/markers';
@ -414,8 +413,6 @@ const UI: React.FC<IUI> = ({ children }) => {
.then(() => dispatch(fetchMarker(['notifications'])))
.catch(console.error);
dispatch(fetchAnnouncements());
if (account.staff) {
dispatch(fetchReports({ resolved: false }));
dispatch(fetchUsers(['local', 'need_approval']));