diff --git a/packages/api/src/routers/integration_router.ts b/packages/api/src/routers/integration_router.ts
index de46734db..cc6a520a7 100644
--- a/packages/api/src/routers/integration_router.ts
+++ b/packages/api/src/routers/integration_router.ts
@@ -23,6 +23,8 @@ export function integrationRouter() {
const consumerKey = env.pocket.consumerKey
const redirectUri = `${env.client.url}/settings/integrations`
+ // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+ const state = req.body.state as string
try {
// make a POST request to Pocket to get a request token
const response = await axios.post<{ code: string }>(
@@ -41,7 +43,9 @@ export function integrationRouter() {
const { code } = response.data
// redirect the user to Pocket to authorize the request token
res.redirect(
- `https://getpocket.com/auth/authorize?request_token=${code}&redirect_uri=${redirectUri}?pocketToken=${code}`
+ `https://getpocket.com/auth/authorize?request_token=${code}&redirect_uri=${redirectUri}${encodeURIComponent(
+ `?pocketToken=${code}&state=${state}`
+ )}`
)
} catch (error) {
if (axios.isAxiosError(error)) {
diff --git a/packages/web/lib/networking/mutations/setIntegrationMutation.ts b/packages/web/lib/networking/mutations/setIntegrationMutation.ts
index bda8beaf0..66434ae7c 100644
--- a/packages/web/lib/networking/mutations/setIntegrationMutation.ts
+++ b/packages/web/lib/networking/mutations/setIntegrationMutation.ts
@@ -2,12 +2,20 @@ import { gql } from 'graphql-request'
import { gqlFetcher } from '../networkHelpers'
import { IntegrationType } from '../queries/useGetIntegrationsQuery'
+export enum ImportItemState {
+ All = 'ALL',
+ Archived = 'ARCHIVED',
+ Unarchived = 'UNARCHIVED',
+ Unread = 'UNREAD'
+}
+
export type SetIntegrationInput = {
id?: string
name: string
type: IntegrationType
token: string
enabled: boolean
+ importItemState?: ImportItemState
}
type SetIntegrationResult = {
diff --git a/packages/web/pages/settings/integrations.tsx b/packages/web/pages/settings/integrations.tsx
index 33c316fcc..d04e863f8 100644
--- a/packages/web/pages/settings/integrations.tsx
+++ b/packages/web/pages/settings/integrations.tsx
@@ -5,6 +5,10 @@ import { DownloadSimple, Eye, Link, Spinner } from 'phosphor-react'
import { useEffect, useMemo, useState } from 'react'
import { Toaster } from 'react-hot-toast'
import { Button } from '../../components/elements/Button'
+import {
+ Dropdown,
+ DropdownOption,
+} from '../../components/elements/DropdownElements'
import {
Box,
HStack,
@@ -15,7 +19,10 @@ import { SettingsLayout } from '../../components/templates/SettingsLayout'
import { fetchEndpoint } from '../../lib/appConfig'
import { deleteIntegrationMutation } from '../../lib/networking/mutations/deleteIntegrationMutation'
import { importFromIntegrationMutation } from '../../lib/networking/mutations/importFromIntegrationMutation'
-import { setIntegrationMutation } from '../../lib/networking/mutations/setIntegrationMutation'
+import {
+ ImportItemState,
+ setIntegrationMutation,
+} from '../../lib/networking/mutations/setIntegrationMutation'
import {
Integration,
useGetIntegrationsQuery,
@@ -47,6 +54,11 @@ interface Integrations {
id: string
}
+interface DropdownOption {
+ text: string
+ action: () => void
+}
+
type integrationsCard = {
icon: string
title: string
@@ -57,6 +69,8 @@ type integrationsCard = {
style: string
action: () => void
disabled?: boolean
+ isDropdown?: boolean
+ dropdownOptions?: DropdownOption[]
}
}
export default function Integrations(): JSX.Element {
@@ -96,11 +110,16 @@ export default function Integrations(): JSX.Element {
}
}
- const redirectToPocket = () => {
+ const redirectToPocket = (importItemState: ImportItemState) => {
// create a form and submit it to the backend
const form = document.createElement('form')
form.method = 'POST'
form.action = `${fetchEndpoint}/integration/pocket/auth`
+ const input = document.createElement('input')
+ input.type = 'hidden'
+ input.name = 'state'
+ input.value = importItemState
+ form.appendChild(input)
document.body.appendChild(form)
form.submit()
}
@@ -114,11 +133,13 @@ export default function Integrations(): JSX.Element {
try {
// get the token from query string
const token = router.query.pocketToken as string
+ const importItemState = router.query.state as ImportItemState
const result = await setIntegrationMutation({
token,
name: 'POCKET',
type: 'IMPORT',
enabled: true,
+ importItemState,
})
if (result) {
revalidate()
@@ -138,7 +159,7 @@ export default function Integrations(): JSX.Element {
}
}
if (!router.isReady) return
- if (router.query.pocketToken && !pocketConnected) {
+ if (router.query.pocketToken && router.query.state && !pocketConnected) {
connectToPocket()
}
}, [router])
@@ -179,7 +200,7 @@ export default function Integrations(): JSX.Element {
subText:
'Pocket is a place to save articles, videos, and more. Our Pocket integration allows importing your Pocket library to Omnivore. Once connected we will asyncronously import all your Pocket articles into Omnivore, as this process is resource intensive it can take some time. You will receive an email when the process is completed. Limit 20k articles per import.',
button: {
- text: pocketConnected ? 'Import' : 'Connect to Pocket',
+ text: pocketConnected ? 'Disconnect' : 'Import',
icon: isImporting(pocketConnected) ? (
) : (
@@ -188,10 +209,25 @@ export default function Integrations(): JSX.Element {
style: isImporting(pocketConnected) ? 'ctaWhite' : 'ctaDarkYellow',
action: () => {
pocketConnected
- ? importFromIntegration(pocketConnected.id)
- : redirectToPocket()
+ ? deleteIntegration(pocketConnected.id)
+ : redirectToPocket(ImportItemState.Unarchived)
},
disabled: isImporting(pocketConnected),
+ isDropdown: !pocketConnected,
+ dropdownOptions: [
+ {
+ text: 'Import All',
+ action: () => {
+ redirectToPocket(ImportItemState.All)
+ },
+ },
+ {
+ text: 'Import Unarchived',
+ action: () => {
+ redirectToPocket(ImportItemState.Unarchived)
+ },
+ },
+ ],
},
},
{
@@ -295,28 +331,71 @@ export default function Integrations(): JSX.Element {
{item.subText}
-
+ }
>
- {item.button.text}
-
-
+ {item.button.dropdownOptions?.map((option) => (
+
+ ))}
+
+ ) : (
+
+ )}
)