66 lines
2.0 KiB
TypeScript
66 lines
2.0 KiB
TypeScript
import {
|
|
PreferencesGroup,
|
|
PreferencesSegment,
|
|
Text,
|
|
Title,
|
|
} from '@/Components/Preferences/PreferencesComponents'
|
|
import { Button } from '@/Components/Button/Button'
|
|
import { SyncQueueStrategy, dateToLocalizedString } from '@standardnotes/snjs'
|
|
import { STRING_GENERIC_SYNC_ERROR } from '@/Strings'
|
|
import { useState } from '@node_modules/preact/hooks'
|
|
import { observer } from 'mobx-react-lite'
|
|
import { WebApplication } from '@/UIModels/Application'
|
|
import { FunctionComponent } from 'preact'
|
|
|
|
type Props = {
|
|
application: WebApplication
|
|
}
|
|
|
|
export const formatLastSyncDate = (lastUpdatedDate: Date) => {
|
|
return dateToLocalizedString(lastUpdatedDate)
|
|
}
|
|
|
|
export const Sync: FunctionComponent<Props> = observer(({ application }: Props) => {
|
|
const [isSyncingInProgress, setIsSyncingInProgress] = useState(false)
|
|
const [lastSyncDate, setLastSyncDate] = useState(
|
|
formatLastSyncDate(application.sync.getLastSyncDate() as Date),
|
|
)
|
|
|
|
const doSynchronization = async () => {
|
|
setIsSyncingInProgress(true)
|
|
|
|
const response = await application.sync.sync({
|
|
queueStrategy: SyncQueueStrategy.ForceSpawnNew,
|
|
checkIntegrity: true,
|
|
})
|
|
setIsSyncingInProgress(false)
|
|
if (response && (response as any).error) {
|
|
application.alertService.alert(STRING_GENERIC_SYNC_ERROR).catch(console.error)
|
|
} else {
|
|
setLastSyncDate(formatLastSyncDate(application.sync.getLastSyncDate() as Date))
|
|
}
|
|
}
|
|
|
|
return (
|
|
<PreferencesGroup>
|
|
<PreferencesSegment>
|
|
<div className="flex flex-row items-center">
|
|
<div className="flex-grow flex flex-col">
|
|
<Title>Sync</Title>
|
|
<Text>
|
|
Last synced <span className="font-bold">on {lastSyncDate}</span>
|
|
</Text>
|
|
<Button
|
|
className="min-w-20 mt-3"
|
|
variant="normal"
|
|
label="Sync now"
|
|
disabled={isSyncingInProgress}
|
|
onClick={doSynchronization}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</PreferencesSegment>
|
|
</PreferencesGroup>
|
|
)
|
|
})
|