refactor: format and lint codebase (#971)
This commit is contained in:
@@ -0,0 +1,128 @@
|
||||
import { FunctionalComponent } from 'preact'
|
||||
import { Subtitle } from '@/Components/Preferences/PreferencesComponents'
|
||||
import { DecoratedInput } from '@/Components/Input/DecoratedInput'
|
||||
import { Button } from '@/Components/Button/Button'
|
||||
import { useEffect, useState } from 'preact/hooks'
|
||||
import { WebApplication } from '@/UIModels/Application'
|
||||
import { AppState } from '@/UIModels/AppState'
|
||||
import { observer } from 'mobx-react-lite'
|
||||
import { STRING_REMOVE_OFFLINE_KEY_CONFIRMATION } from '@/Strings'
|
||||
import { ButtonType, ClientDisplayableError } from '@standardnotes/snjs'
|
||||
import { HorizontalSeparator } from '@/Components/Shared/HorizontalSeparator'
|
||||
|
||||
interface IProps {
|
||||
application: WebApplication
|
||||
appState: AppState
|
||||
}
|
||||
|
||||
export const OfflineSubscription: FunctionalComponent<IProps> = observer(({ application }) => {
|
||||
const [activationCode, setActivationCode] = useState('')
|
||||
const [isSuccessfullyActivated, setIsSuccessfullyActivated] = useState(false)
|
||||
const [isSuccessfullyRemoved, setIsSuccessfullyRemoved] = useState(false)
|
||||
const [hasUserPreviouslyStoredCode, setHasUserPreviouslyStoredCode] = useState(false)
|
||||
|
||||
useEffect(() => {
|
||||
if (application.features.hasOfflineRepo()) {
|
||||
setHasUserPreviouslyStoredCode(true)
|
||||
}
|
||||
}, [application])
|
||||
|
||||
const shouldShowOfflineSubscription = () => {
|
||||
return (
|
||||
!application.hasAccount() || application.isThirdPartyHostUsed() || hasUserPreviouslyStoredCode
|
||||
)
|
||||
}
|
||||
|
||||
const handleSubscriptionCodeSubmit = async (event: Event) => {
|
||||
event.preventDefault()
|
||||
|
||||
const result = await application.features.setOfflineFeaturesCode(activationCode)
|
||||
|
||||
if (result instanceof ClientDisplayableError) {
|
||||
await application.alertService.alert(result.text)
|
||||
} else {
|
||||
setIsSuccessfullyActivated(true)
|
||||
setHasUserPreviouslyStoredCode(true)
|
||||
setIsSuccessfullyRemoved(false)
|
||||
}
|
||||
}
|
||||
|
||||
const handleRemoveOfflineKey = async () => {
|
||||
await application.features.deleteOfflineFeatureRepo()
|
||||
|
||||
setIsSuccessfullyActivated(false)
|
||||
setHasUserPreviouslyStoredCode(false)
|
||||
setActivationCode('')
|
||||
setIsSuccessfullyRemoved(true)
|
||||
}
|
||||
|
||||
const handleRemoveClick = async () => {
|
||||
application.alertService
|
||||
.confirm(
|
||||
STRING_REMOVE_OFFLINE_KEY_CONFIRMATION,
|
||||
'Remove offline key?',
|
||||
'Remove Offline Key',
|
||||
ButtonType.Danger,
|
||||
'Cancel',
|
||||
)
|
||||
.then(async (shouldRemove: boolean) => {
|
||||
if (shouldRemove) {
|
||||
await handleRemoveOfflineKey()
|
||||
}
|
||||
})
|
||||
.catch((err: string) => {
|
||||
application.alertService.alert(err).catch(console.error)
|
||||
})
|
||||
}
|
||||
|
||||
if (!shouldShowOfflineSubscription()) {
|
||||
return null
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex flex-col mt-3 w-full">
|
||||
<Subtitle>{!hasUserPreviouslyStoredCode && 'Activate'} Offline Subscription</Subtitle>
|
||||
<form onSubmit={handleSubscriptionCodeSubmit}>
|
||||
<div className={'mt-2'}>
|
||||
{!hasUserPreviouslyStoredCode && (
|
||||
<DecoratedInput
|
||||
onChange={(code) => setActivationCode(code)}
|
||||
placeholder={'Offline Subscription Code'}
|
||||
value={activationCode}
|
||||
disabled={isSuccessfullyActivated}
|
||||
className={'mb-3'}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
{(isSuccessfullyActivated || isSuccessfullyRemoved) && (
|
||||
<div className={'mt-3 mb-3 info'}>
|
||||
Your offline subscription code has been successfully{' '}
|
||||
{isSuccessfullyActivated ? 'activated' : 'removed'}.
|
||||
</div>
|
||||
)}
|
||||
{hasUserPreviouslyStoredCode && (
|
||||
<Button
|
||||
dangerStyle={true}
|
||||
label="Remove offline key"
|
||||
onClick={() => {
|
||||
handleRemoveClick().catch(console.error)
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
{!hasUserPreviouslyStoredCode && !isSuccessfullyActivated && (
|
||||
<Button
|
||||
label={'Submit'}
|
||||
variant="primary"
|
||||
disabled={activationCode === ''}
|
||||
onClick={(event) => handleSubscriptionCodeSubmit(event)}
|
||||
/>
|
||||
)}
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<HorizontalSeparator classes="mt-8 mb-5" />
|
||||
</>
|
||||
)
|
||||
})
|
||||
Reference in New Issue
Block a user