From ab1154ef6f4013f6212f984b0ed9c6e25924edae Mon Sep 17 00:00:00 2001
From: Hongbo Wu <hongbo@omnivore.app>
Date: Fri, 24 Feb 2023 14:31:14 +0800
Subject: [PATCH] Add remove pocket integration to web

---
 .../networking/queries/useGetIntegrationsQuery.tsx |  1 +
 packages/web/pages/settings/integrations.tsx       | 14 ++++++++++----
 2 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/packages/web/lib/networking/queries/useGetIntegrationsQuery.tsx b/packages/web/lib/networking/queries/useGetIntegrationsQuery.tsx
index 6b748c0b7..e7a4c0501 100644
--- a/packages/web/lib/networking/queries/useGetIntegrationsQuery.tsx
+++ b/packages/web/lib/networking/queries/useGetIntegrationsQuery.tsx
@@ -35,6 +35,7 @@ export function useGetIntegrationsQuery(): IntegrationsQueryResponse {
         ... on IntegrationsSuccess {
           integrations {
             id
+            name
             type
             token
             enabled
diff --git a/packages/web/pages/settings/integrations.tsx b/packages/web/pages/settings/integrations.tsx
index f6ad691f7..3f81591e3 100644
--- a/packages/web/pages/settings/integrations.tsx
+++ b/packages/web/pages/settings/integrations.tsx
@@ -70,6 +70,9 @@ export default function Integrations(): JSX.Element {
   const readwiseConnected = useMemo(() => {
     return integrations.find((i) => i.name == 'READWISE' && i.type == 'EXPORT')
   }, [integrations])
+  const isConnected = (name: string, type: string) => {
+    return integrations.find((i) => i.name === name && i.type === type)
+  }
 
   const deleteIntegration = async (id: string) => {
     try {
@@ -121,6 +124,7 @@ export default function Integrations(): JSX.Element {
   }, [router])
 
   useEffect(() => {
+    const pocketConnected = isConnected('POCKET', 'IMPORT')
     setIntegrationsArray([
       {
         icon: '/static/icons/logseq.svg',
@@ -168,16 +172,18 @@ export default function Integrations(): JSX.Element {
         title: 'Pocket',
         subText: 'Pocket is a place to save articles, videos, and more.',
         button: {
-          text: 'Connect to Pocket',
+          text: pocketConnected ? 'Remove' : 'Connect to Pocket',
           icon: <Link size={16} weight={'bold'} />,
-          style: 'ctaDarkYellow',
+          style: pocketConnected ? 'ctaWhite' : 'ctaDarkYellow',
           action: () => {
-            redirectToPocket()
+            pocketConnected
+              ? deleteIntegration(pocketConnected.id)
+              : redirectToPocket()
           },
         },
       },
     ])
-  }, [readwiseConnected, router, webhooks])
+  }, [integrations])
 
   return (
     <SettingsLayout>