pl-fe: move around some files
Signed-off-by: Nicole Mikołajczyk <git@mkljczk.pl>
This commit is contained in:
Nicole Mikołajczyk
@ -1,135 +0,0 @@
|
||||
import React from 'react';
|
||||
import { FormattedDate, FormattedMessage, defineMessages, useIntl } from 'react-intl';
|
||||
|
||||
import { ParsedContent } from 'pl-fe/components/parsed-content';
|
||||
import ScrollableList from 'pl-fe/components/scrollable-list';
|
||||
import Button from 'pl-fe/components/ui/button';
|
||||
import Column from 'pl-fe/components/ui/column';
|
||||
import HStack from 'pl-fe/components/ui/hstack';
|
||||
import Stack from 'pl-fe/components/ui/stack';
|
||||
import Text from 'pl-fe/components/ui/text';
|
||||
import { useAnnouncements, useDeleteAnnouncementMutation } from 'pl-fe/queries/admin/use-announcements';
|
||||
import { useModalsStore } from 'pl-fe/stores/modals';
|
||||
import toast from 'pl-fe/toast';
|
||||
|
||||
import type { AdminAnnouncement } from 'pl-api';
|
||||
|
||||
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: AdminAnnouncement;
|
||||
}
|
||||
|
||||
const Announcement: React.FC<IAnnouncement> = ({ announcement }) => {
|
||||
const intl = useIntl();
|
||||
const { mutate: deleteAnnouncement } = useDeleteAnnouncementMutation();
|
||||
const { openModal } = useModalsStore();
|
||||
|
||||
const handleEditAnnouncement = () => {
|
||||
openModal('EDIT_ANNOUNCEMENT', { announcement });
|
||||
};
|
||||
|
||||
const handleDeleteAnnouncement = () => {
|
||||
openModal('CONFIRM', {
|
||||
heading: intl.formatMessage(messages.deleteHeading),
|
||||
message: intl.formatMessage(messages.deleteMessage),
|
||||
confirm: intl.formatMessage(messages.deleteConfirm),
|
||||
onConfirm: () => deleteAnnouncement(announcement.id, {
|
||||
onSuccess: () => toast.success(messages.deleteSuccess),
|
||||
}),
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<div key={announcement.id} className='rounded-lg bg-gray-100 p-4 dark:bg-primary-800'>
|
||||
<Stack space={2}>n
|
||||
<Text>
|
||||
<ParsedContent html={announcement.content} emojis={announcement.emojis} />
|
||||
</Text>
|
||||
{(announcement.starts_at || announcement.ends_at || announcement.all_day) && (
|
||||
<HStack space={2} wrap>
|
||||
{announcement.starts_at && (
|
||||
<Text size='sm'>
|
||||
<Text tag='span' size='sm' weight='medium'>
|
||||
<FormattedMessage id='admin.announcements.starts_at' defaultMessage='Starts at:' />
|
||||
</Text>
|
||||
{' '}
|
||||
<FormattedDate value={announcement.starts_at} year='2-digit' month='short' day='2-digit' weekday='short' />
|
||||
</Text>
|
||||
)}
|
||||
{announcement.ends_at && (
|
||||
<Text size='sm'>
|
||||
<Text tag='span' size='sm' weight='medium'>
|
||||
<FormattedMessage id='admin.announcements.ends_at' defaultMessage='Ends at:' />
|
||||
</Text>
|
||||
{' '}
|
||||
<FormattedDate value={announcement.ends_at} year='2-digit' month='short' day='2-digit' weekday='short' />
|
||||
</Text>
|
||||
)}
|
||||
{announcement.all_day && (
|
||||
<Text weight='medium' size='sm'>
|
||||
<FormattedMessage id='admin.announcements.all_day' defaultMessage='All day' />
|
||||
</Text>
|
||||
)}
|
||||
</HStack>
|
||||
)}
|
||||
<HStack justifyContent='end' space={2}>
|
||||
<Button theme='primary' onClick={handleEditAnnouncement}>
|
||||
<FormattedMessage id='admin.announcements.edit' defaultMessage='Edit' />
|
||||
</Button>
|
||||
<Button theme='primary' onClick={handleDeleteAnnouncement}>
|
||||
<FormattedMessage id='admin.announcements.delete' defaultMessage='Delete' />
|
||||
</Button>
|
||||
</HStack>
|
||||
</Stack>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const AdminAnnouncementsPage: React.FC = () => {
|
||||
const intl = useIntl();
|
||||
const { openModal } = useModalsStore();
|
||||
|
||||
const { data: announcements = [], isLoading, isPending } = useAnnouncements();
|
||||
|
||||
const handleCreateAnnouncement = () => {
|
||||
openModal('EDIT_ANNOUNCEMENT');
|
||||
};
|
||||
|
||||
const emptyMessage = <FormattedMessage id='empty_column.admin.announcements' defaultMessage='There are no announcements yet.' />;
|
||||
|
||||
return (
|
||||
<Column label={intl.formatMessage(messages.heading)}>
|
||||
<Stack className='gap-4'>
|
||||
<Button
|
||||
className='sm:w-fit sm:self-end'
|
||||
icon={require('@tabler/icons/outline/plus.svg')}
|
||||
onClick={handleCreateAnnouncement}
|
||||
theme='secondary'
|
||||
block
|
||||
>
|
||||
<FormattedMessage id='admin.announcements.action' defaultMessage='Create announcement' />
|
||||
</Button>
|
||||
<ScrollableList
|
||||
scrollKey='announcements'
|
||||
emptyMessage={emptyMessage}
|
||||
itemClassName='py-3 first:pt-0 last:pb-0'
|
||||
isLoading={isLoading}
|
||||
showLoading={isLoading && isPending}
|
||||
>
|
||||
{announcements.map((announcement) => (
|
||||
<Announcement key={announcement.id} announcement={announcement} />
|
||||
))}
|
||||
</ScrollableList>
|
||||
</Stack>
|
||||
</Column>
|
||||
);
|
||||
};
|
||||
|
||||
export { AdminAnnouncementsPage as default };
|
||||
@ -1,71 +0,0 @@
|
||||
import debounce from 'lodash/debounce';
|
||||
import React, { useCallback, useEffect } from 'react';
|
||||
import { defineMessages, useIntl } from 'react-intl';
|
||||
|
||||
import { expandUserIndex, fetchUserIndex, setUserIndexQuery } from 'pl-fe/actions/admin';
|
||||
import ScrollableList from 'pl-fe/components/scrollable-list';
|
||||
import Column from 'pl-fe/components/ui/column';
|
||||
import Input from 'pl-fe/components/ui/input';
|
||||
import AccountContainer from 'pl-fe/containers/account-container';
|
||||
import { useAppDispatch } from 'pl-fe/hooks/use-app-dispatch';
|
||||
import { useAppSelector } from 'pl-fe/hooks/use-app-selector';
|
||||
|
||||
const messages = defineMessages({
|
||||
heading: { id: 'column.admin.users', defaultMessage: 'Users' },
|
||||
empty: { id: 'admin.user_index.empty', defaultMessage: 'No users found.' },
|
||||
searchPlaceholder: { id: 'admin.user_index.search_input_placeholder', defaultMessage: 'Who are you looking for?' },
|
||||
});
|
||||
|
||||
const UserIndex: React.FC = () => {
|
||||
const dispatch = useAppDispatch();
|
||||
const intl = useIntl();
|
||||
|
||||
const { isLoading, items, total, query, next } = useAppSelector((state) => state.admin_user_index);
|
||||
|
||||
const handleLoadMore = () => {
|
||||
if (!isLoading) dispatch(expandUserIndex());
|
||||
};
|
||||
|
||||
const updateQuery = useCallback(debounce(() => {
|
||||
dispatch(fetchUserIndex());
|
||||
}, 900, { leading: true }), []);
|
||||
|
||||
const handleQueryChange: React.ChangeEventHandler<HTMLInputElement> = e => {
|
||||
dispatch(setUserIndexQuery(e.target.value));
|
||||
updateQuery();
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
updateQuery();
|
||||
}, []);
|
||||
|
||||
const hasMore = (total === undefined || items.length < total) && !!next;
|
||||
|
||||
const showLoading = isLoading && !items.length;
|
||||
|
||||
return (
|
||||
<Column label={intl.formatMessage(messages.heading)}>
|
||||
<Input
|
||||
value={query}
|
||||
onChange={handleQueryChange}
|
||||
placeholder={intl.formatMessage(messages.searchPlaceholder)}
|
||||
/>
|
||||
<ScrollableList
|
||||
scrollKey='userIndex'
|
||||
hasMore={hasMore}
|
||||
isLoading={isLoading}
|
||||
showLoading={showLoading}
|
||||
onLoadMore={handleLoadMore}
|
||||
emptyMessage={intl.formatMessage(messages.empty)}
|
||||
className='mt-4'
|
||||
itemClassName='pb-4'
|
||||
>
|
||||
{items.map(id =>
|
||||
<AccountContainer key={id} id={id} withDate />,
|
||||
)}
|
||||
</ScrollableList>
|
||||
</Column>
|
||||
);
|
||||
};
|
||||
|
||||
export { UserIndex as default };
|
||||
Reference in New Issue
Block a user