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

Updating Readwise and Webhooks and making page consistent

Browse source
This commit is contained in:
Rupin Khandelwal 2022-10-25 19:00:58 -05:00
parent 1586eee8f6
commit 526078c4fe
2 changed files with 114 additions and 59 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -1,8 +1,9 @@
import { useCallback, useState } from 'react'
import { styled } from '@stitches/react'
import Link from 'next/link'
import Image from 'next/image'
import { Box, VStack } from '../../elements/LayoutPrimitives'
import { Box, HStack, VStack } from '../../elements/LayoutPrimitives'
import { Button } from '../../elements/Button'
import { StyledText } from '../../elements/StyledText'
import { FormInput } from '../../elements/FormElements'
@ -13,7 +14,7 @@ import { setIntegrationMutation } from '../../../lib/networking/mutations/setInt
const Header = styled(Box, {
color: '$utilityTextDefault',
fontSize: 'x-large',
margin: '20px auto 20px auto',
margin: '20px',
})
export function Readwise(): JSX.Element {
@ -31,63 +32,87 @@ export function Readwise(): JSX.Element {
}, [token])
return (
<>
<Header css={{ textAlign: 'center' }}>Readwise</Header>
<VStack
<VStack
distribution={'start'}
alignment={'start'}
css={{
margin: '0 auto',
width: '80%',
height: '500px',
}}
>
<HStack
alignment={'start'}
distribution={'start'}
css={{
width: '80%',
margin: '0 auto',
height: '500px',
width: '100%',
pb: '$2',
borderBottom: '1px solid $utilityTextDefault',
pr: '$1',
}}
>
<Header>
Enter your API key from Readwise below. You can get your token{' '}
<Link
style={{ color: '$utilityTextDefault' }}
href="https://readwise.io/access_token"
>
here
</Link>
</Header>
<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 auto 20px auto',
height: '38px',
color: '$grayTextContrast',
'&:focus': {
outline: 'none',
boxShadow: '0px 0px 2px 2px rgba(255, 234, 159, 0.56)',
},
}}
min={200}
<Image
src="/static/icons/readwise.svg"
alt="integration Image"
width={75}
height={75}
/>
{errorMessage && <StyledText style="error">{errorMessage}</StyledText>}
<Button
style="ctaDarkYellow"
css={{ my: '$2', margin:'0 auto' }}
onClick={setReadwiseToken}
<Header>Readwise</Header>
</HStack>
<HStack
css={{
fontSize: '18px',
color: '$utilityTextDefault',
m: '20px',
}}
>
Enter your API key from Readwise below. You can get your token
<Link
style={{ color: '$utilityTextDefault' }}
href="https://readwise.io/access_token"
>
Set Token
</Button>
</VStack>
</>
here
</Link>
</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',
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>
)
}

40
packages/web/components/templates/integrations/Webhooks.tsx
View file

@ -5,6 +5,8 @@ import { Box, HStack, SpanBox, VStack } from '../../elements/LayoutPrimitives'
import { Button } from '../../elements/Button'
import { Plus } from 'phosphor-react'
import { useGetWebhooksQuery } from '../../../lib/networking/queries/useGetWebhooksQuery'
import { useMemo } from 'react'
// Styles
const Header = styled(Box, {
@ -13,12 +15,41 @@ const Header = styled(Box, {
margin: '20px',
})
interface Webhook {
id?: string
url: string
eventTypes: string
contentType?: string
method?: string
enabled?: string
createdAt?: Date
updatedAt?: Date
}
export function Webhooks(): JSX.Element {
const { webhooks } = useGetWebhooksQuery()
const webhooksList = useMemo(() => {
const webhooksList = new Map<string, Webhook>()
webhooks.forEach((webhook) =>
webhooksList.set(webhook.id, {
url: webhook.url,
eventTypes: webhook.eventTypes.join(', '),
method: webhook.method,
contentType: webhook.contentType,
createdAt: webhook.createdAt,
})
)
return webhooksList
}, [webhooks])
console.log('webhooksList', webhooksList)
return (
<VStack
distribution={'start'}
css={{
width: '90%',
width: '80%',
margin: '0 auto',
height: '500px',
}}
@ -54,7 +85,6 @@ export function Webhooks(): JSX.Element {
css={{
py: '10px',
px: '14px',
mr: '16px',
}}
>
<Plus size={16} weight="bold" />
@ -79,9 +109,9 @@ export function Webhooks(): JSX.Element {
<HStack
css={{
fontSize: '16px',
color: '$utilityTextDefault',
m: '20px 0',
border: '1px solid white',
height: '100%',
width: '100%',
}}>