85 lines
2.5 KiB
TypeScript
85 lines
2.5 KiB
TypeScript
// Copyright 2019-2021 Signal Messenger, LLC
|
|
// SPDX-License-Identifier: AGPL-3.0-only
|
|
|
|
import * as React from 'react';
|
|
import { noop } from 'lodash';
|
|
import { AppStage } from './AppStage';
|
|
import * as styles from './UploadStage.scss';
|
|
import { history } from '../../util/history';
|
|
import { ProgressBar } from '../../elements/ProgressBar';
|
|
import { H2, Text } from '../../elements/Typography';
|
|
import { Button } from '../../elements/Button';
|
|
import { stickersDuck } from '../../store';
|
|
import { encryptAndUpload } from '../../util/preload';
|
|
import { useI18n } from '../../util/i18n';
|
|
import * as Errors from '../../../ts/types/errors';
|
|
|
|
const handleCancel = () => {
|
|
history.push('/add-meta');
|
|
};
|
|
|
|
export const UploadStage: React.ComponentType = () => {
|
|
const i18n = useI18n();
|
|
const actions = stickersDuck.useStickerActions();
|
|
const cover = stickersDuck.useCover();
|
|
const title = stickersDuck.useTitle();
|
|
const author = stickersDuck.useAuthor();
|
|
const orderedData = stickersDuck.useSelectOrderedData();
|
|
const total = orderedData.length;
|
|
const [complete, setComplete] = React.useState(0);
|
|
|
|
React.useEffect(() => {
|
|
(async () => {
|
|
const onProgress = () => {
|
|
setComplete(i => i + 1);
|
|
};
|
|
try {
|
|
if (!cover) {
|
|
throw new Error('UploadStage: Cover was missing on upload!');
|
|
}
|
|
const packMeta = await encryptAndUpload(
|
|
{ title, author },
|
|
orderedData,
|
|
cover,
|
|
onProgress
|
|
);
|
|
actions.setPackMeta(packMeta);
|
|
history.push('/share');
|
|
} catch (e) {
|
|
window.SignalContext.log.error(
|
|
'Error uploading pack:',
|
|
Errors.toLogFormat(e)
|
|
);
|
|
actions.addToast({
|
|
key: 'StickerCreator--Toasts--errorUploading',
|
|
subs: { message: e.message },
|
|
});
|
|
history.push('/add-meta');
|
|
}
|
|
})();
|
|
|
|
return noop;
|
|
}, [actions, title, author, cover, orderedData]);
|
|
|
|
return (
|
|
<AppStage empty>
|
|
<div className={styles.base}>
|
|
<H2>{i18n('StickerCreator--UploadStage--title')}</H2>
|
|
<Text>
|
|
{i18n('StickerCreator--UploadStage-uploaded', {
|
|
// We convert these to string so that 0 isn't falsy, which i18n checks for.
|
|
count: String(complete),
|
|
total: String(total),
|
|
})}
|
|
</Text>
|
|
<ProgressBar
|
|
count={complete}
|
|
total={total}
|
|
className={styles.progress}
|
|
/>
|
|
<Button onClick={handleCancel}>{i18n('cancel')}</Button>
|
|
</div>
|
|
</AppStage>
|
|
);
|
|
};
|