83 lines
2.7 KiB
TypeScript
83 lines
2.7 KiB
TypeScript
import classNames from 'classnames';
|
|
import React, { useEffect, useState } from 'react';
|
|
import { defineMessages, useIntl } from 'react-intl';
|
|
|
|
import {
|
|
fetchBackups,
|
|
createBackup,
|
|
} from 'soapbox/actions/backups';
|
|
import ScrollableList from 'soapbox/components/scrollable_list';
|
|
import { useAppDispatch, useAppSelector } from 'soapbox/hooks';
|
|
|
|
import Column from '../ui/components/better_column';
|
|
|
|
import type { List as ImmutableList, Map as ImmutableMap } from 'immutable';
|
|
|
|
const messages = defineMessages({
|
|
heading: { id: 'column.backups', defaultMessage: 'Backups' },
|
|
create: { id: 'backups.actions.create', defaultMessage: 'Create backup' },
|
|
emptyMessage: { id: 'backups.empty_message', defaultMessage: 'No backups found. {action}' },
|
|
emptyMessageAction: { id: 'backups.empty_message.action', defaultMessage: 'Create one now?' },
|
|
pending: { id: 'backups.pending', defaultMessage: 'Pending' },
|
|
});
|
|
|
|
const Backups = () => {
|
|
const intl = useIntl();
|
|
const dispatch = useAppDispatch();
|
|
|
|
const backups = useAppSelector<ImmutableList<ImmutableMap<string, any>>>((state) => state.backups.toList().sortBy((backup: ImmutableMap<string, any>) => backup.get('inserted_at')));
|
|
|
|
const [isLoading, setIsLoading] = useState(true);
|
|
|
|
const handleCreateBackup: React.MouseEventHandler<HTMLAnchorElement> = e => {
|
|
dispatch(createBackup());
|
|
e.preventDefault();
|
|
};
|
|
|
|
const makeColumnMenu = () => {
|
|
return [{
|
|
text: intl.formatMessage(messages.create),
|
|
action: handleCreateBackup,
|
|
icon: require('@tabler/icons/icons/plus.svg'),
|
|
}];
|
|
};
|
|
|
|
useEffect(() => {
|
|
dispatch(fetchBackups()).then(() => {
|
|
setIsLoading(true);
|
|
}).catch(() => {});
|
|
}, []);
|
|
|
|
const showLoading = isLoading && backups.count() === 0;
|
|
|
|
const emptyMessageAction = (
|
|
<a href='#' onClick={handleCreateBackup}>
|
|
{intl.formatMessage(messages.emptyMessageAction)}
|
|
</a>
|
|
);
|
|
|
|
return (
|
|
<Column icon='cloud-download' label={intl.formatMessage(messages.heading)} menu={makeColumnMenu()}>
|
|
<ScrollableList
|
|
isLoading={isLoading}
|
|
showLoading={showLoading}
|
|
scrollKey='backups'
|
|
emptyMessage={intl.formatMessage(messages.emptyMessage, { action: emptyMessageAction })}
|
|
>
|
|
{backups.map((backup) => (
|
|
<div
|
|
className={classNames('backup', { 'backup--pending': !backup.get('processed') })}
|
|
key={backup.get('id')}
|
|
>
|
|
{backup.get('processed')
|
|
? <a href={backup.get('url')} target='_blank'>{backup.get('inserted_at')}</a>
|
|
: <div>{intl.formatMessage(messages.pending)}: {backup.get('inserted_at')}</div>
|
|
}
|
|
</div>
|
|
))}
|
|
</ScrollableList>
|
|
</Column>
|
|
);
|
|
};
|
|
|
|
export default Backups;
|