prehistoric-systems/omnivore
1
0
Fork 0
mirror of https://github.com/omnivore-app/omnivore.git synced 2026-03-11 08:54:26 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

If the user already has Readwise connected, display a Delete button

Browse source
This commit is contained in:
Jackson Harper 2022-10-28 16:55:49 +08:00
parent 7deff4cf5f
commit 525c0d31c7
1 changed files with 140 additions and 73 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

213
packages/web/components/templates/integrations/Readwise.tsx
View file

@ -10,8 +10,9 @@ import { FormInput } from '../../elements/FormElements'
import { setIntegrationMutation } from '../../../lib/networking/mutations/setIntegrationMutation'
import { Integration, useGetIntegrationsQuery } from '../../../lib/networking/queries/useGetIntegrationsQuery'
import { Router, useRouter } from 'next/router'
import { showSuccessToast } from '../../../lib/toastHelpers'
import { useRouter } from 'next/router'
import { showErrorToast, showSuccessToast } from '../../../lib/toastHelpers'
import { deleteIntegrationMutation } from '../../../lib/networking/mutations/deleteIntegrationMutation'
// Styles
const Header = styled(Box, {
@ -21,24 +22,10 @@ const Header = styled(Box, {
})
export function Readwise(): JSX.Element {
const router = useRouter()
const [token, setToken] = useState<string>('')
const [errorMessage, setErrorMessage] =
useState<string | undefined>(undefined)
const setReadwiseToken = useCallback(async () => {
try {
const result = await setIntegrationMutation({
token,
type: 'READWISE',
enabled: true,
})
router.push(`/settings/integrations`)
showSuccessToast('Your Readwise API token has been set.')
} catch (err) {
setErrorMessage('Error: ' + err)
}
}, [token])
const { integrations, isValidating, revalidate } = useGetIntegrationsQuery()
const readwiseIntegration = useMemo(() => {
return integrations.find((i) => i.type == 'READWISE')
}, [integrations])
return (
<VStack
@ -69,60 +56,140 @@ export function Readwise(): JSX.Element {
<Header>Readwise</Header>
</HStack>
<HStack
css={{
fontSize: '18px',
color: '$utilityTextDefault',
m: '20px',
whiteSpace: 'pre-wrap'
}}
>
<SpanBox>Enter your API key from Readwise below. You can get your token{' '}
<Link
style={{ color: '$utilityTextDefault' }}
href="https://readwise.io/access_token"
>
here
</Link>.</SpanBox>
</HStack>
{!isValidating && readwiseIntegration && (
<RemoveReadwiseForm integration={readwiseIntegration} revalidate={revalidate} />
)}
{!isValidating && !readwiseIntegration && (
<AddReadwiseForm />
)}
<FormInput
type="token"
key="token"
value={token}
placeholder={'Readwise Token'}
onChange={(e) => {
e.preventDefault()
setToken(e.target.value)
}}
disabled={false}
hidden={false}
required={true}
css={{
border: '1px solid $textNonessential',
borderRadius: '8px',
width: '80%',
bg: 'transparent',
fontSize: '16px',
textIndent: '8px',
margin: '20px',
height: '38px',
color: '$grayTextContrast',
'&:focus': {
outline: 'none',
boxShadow: '0px 0px 2px 2px rgba(255, 234, 159, 0.56)',
},
}}
min={200}
/>
{errorMessage && <StyledText style="error">{errorMessage}</StyledText>}
<Button
style="ctaDarkYellow"
css={{ my: '$2', margin: '20px' }}
onClick={setReadwiseToken}
>
Set Token
</Button>
</VStack>
)
}
function AddReadwiseForm(): JSX.Element {
const router = useRouter()
const [errorMessage, setErrorMessage] =
useState<string | undefined>(undefined)
const [token, setToken] = useState<string>('')
const setReadwiseToken = useCallback(async () => {
try {
const result = await setIntegrationMutation({
token,
type: 'READWISE',
enabled: true,
})
if (result) {
router.push(`/settings/integrations`)
showSuccessToast('Your Readwise API token has been set.')
} else {
setErrorMessage('There was an error connecting to Readwise.')
}
} catch (err) {
setErrorMessage('Error: ' + err)
}
}, [token, router])
return (<>
<HStack
css={{
fontSize: '18px',
color: '$utilityTextDefault',
my: '20px',
whiteSpace: 'pre-wrap'
}}
>
<SpanBox>Enter your API key from Readwise below. You can get your token{' '}
<Link
style={{ color: '$utilityTextDefault' }}
href="https://readwise.io/access_token"
target="_blank"
>
here
</Link>.</SpanBox>
</HStack>
<FormInput
type="token"
key="token"
value={token}
placeholder={'Readwise Token'}
onChange={(e) => {
e.preventDefault()
setToken(e.target.value)
}}
disabled={false}
hidden={false}
required={true}
css={{
border: '1px solid $textNonessential',
borderRadius: '8px',
width: '80%',
bg: 'transparent',
fontSize: '16px',
textIndent: '8px',
my: '20px',
height: '38px',
color: '$grayTextContrast',
'&:focus': {
outline: 'none',
boxShadow: '0px 0px 2px 2px rgba(255, 234, 159, 0.56)',
},
}}
min={200}
/>
{errorMessage && <StyledText style="error">{errorMessage}</StyledText>}
<Button
style="ctaDarkYellow"
css={{ }}
onClick={setReadwiseToken}
>
Set Token
</Button>
</>
)
}
type RemoveReadwiseFormProps = {
integration: Integration
revalidate: () => void
}
function RemoveReadwiseForm(props: RemoveReadwiseFormProps): JSX.Element {
const deleteIntegration = useCallback(async () => {
try {
if (props.integration.id) {
const result = await deleteIntegrationMutation(props.integration.id)
if (result) {
props.revalidate()
showSuccessToast('Integration Removed')
} else {
showErrorToast('Error removing Readwise integration.')
}
}
} catch (err) {
showErrorToast('Error: ' + err)
}
}, [props])
return (
<>
<HStack
css={{
fontSize: '18px',
color: '$utilityTextDefault',
my: '20px',
whiteSpace: 'pre-wrap'
}}
>
<SpanBox>Omnivore is configured to send all your highlights to Readwise.</SpanBox>
</HStack>
<Button style="ctaDarkYellow" onClick={deleteIntegration}>Remove Readwise Integration</Button>
</>
)
}