40 lines
1.3 KiB
TypeScript
40 lines
1.3 KiB
TypeScript
import React, { useEffect } from 'react';
|
|
import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
|
|
|
|
import { fetchDraftStatuses } from 'pl-fe/actions/draft-statuses';
|
|
import ScrollableList from 'pl-fe/components/scrollable-list';
|
|
import { Column } from 'pl-fe/components/ui';
|
|
import { useAppSelector, useAppDispatch } from 'pl-fe/hooks';
|
|
|
|
import DraftStatus from './components/draft-status';
|
|
|
|
const messages = defineMessages({
|
|
heading: { id: 'column.draft_statuses', defaultMessage: 'Drafts' },
|
|
});
|
|
|
|
const DraftStatuses = () => {
|
|
const intl = useIntl();
|
|
const dispatch = useAppDispatch();
|
|
|
|
const drafts = useAppSelector((state) => state.draft_statuses);
|
|
|
|
useEffect(() => {
|
|
dispatch(fetchDraftStatuses());
|
|
}, []);
|
|
|
|
const emptyMessage = <FormattedMessage id='empty_column.draft_statuses' defaultMessage="You don't have any draft statuses yet. When you add one, it will show up here." />;
|
|
|
|
return (
|
|
<Column label={intl.formatMessage(messages.heading)}>
|
|
<ScrollableList
|
|
emptyMessage={emptyMessage}
|
|
listClassName='divide-y divide-solid divide-gray-200 dark:divide-gray-800'
|
|
>
|
|
{drafts.toOrderedSet().reverse().map((draft) => <DraftStatus key={draft.draft_id} draftStatus={draft} />)}
|
|
</ScrollableList>
|
|
</Column>
|
|
);
|
|
};
|
|
|
|
export { DraftStatuses as default };
|