From 3d1c60ffe71ae1eeab389bfec07b4e7206fbc5bb Mon Sep 17 00:00:00 2001
From: Rupin Khandelwal <rupin@omnivore.app>
Date: Mon, 31 Oct 2022 17:34:12 -0400
Subject: [PATCH 1/5] Wrapping up the remaining task for integration feature

---
 .../templates/integrations/Webhooks.tsx       | 80 +++++++++++++------
 1 file changed, 55 insertions(+), 25 deletions(-)

diff --git a/packages/web/components/templates/integrations/Webhooks.tsx b/packages/web/components/templates/integrations/Webhooks.tsx
index 0a9acd18d..d36ab8a64 100644
--- a/packages/web/components/templates/integrations/Webhooks.tsx
+++ b/packages/web/components/templates/integrations/Webhooks.tsx
@@ -4,7 +4,7 @@ import Image from 'next/image'
 import { Box, HStack, SpanBox, VStack } from '../../elements/LayoutPrimitives'
 import { Button } from '../../elements/Button'
 
-import { Plus } from 'phosphor-react'
+import { Link, Plus } from 'phosphor-react'
 import { useGetWebhooksQuery } from '../../../lib/networking/queries/useGetWebhooksQuery'
 import { useMemo } from 'react'
 
@@ -16,29 +16,29 @@ const Header = styled(Box, {
 })
 
 interface Webhook {
-    id?: string
-    url: string
-    eventTypes: string
-    contentType?: string
-    method?: string
-    enabled?: string
-    createdAt?: Date
-    updatedAt?: Date
-  }
+  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,
+    const webhooksList: Array<Webhook> = []
+    webhooks.forEach((webhookItem) =>
+      webhooksList.push({
+        id: webhookItem.id,
+        url: webhookItem.url,
+        eventTypes: webhookItem.eventTypes.join(', '),
+        method: webhookItem.method,
+        contentType: webhookItem.contentType,
+        createdAt: webhookItem.createdAt,
       })
     )
     return webhooksList
@@ -109,12 +109,42 @@ export function Webhooks(): JSX.Element {
 
       <HStack
         css={{
-            border: '1px solid white',
-            height: '100%',
-            width: '100%',
-          }}>
-
-
+          border: '1px solid white',
+          height: '100%',
+          width: '100%',
+        }}
+      >
+        {webhooksList.map((item) => {
+          return (
+            <Box
+              key={'dgfgfdfg'}
+              css={{
+                width: '100%',
+                backgroundColor: '$grayBg',
+                borderBottom: '1px solid $grayLine',
+                padding: '10px',
+                display: 'flex',
+                alignItems: 'center',
+              }}
+            >
+              <Link size={20} weight={'bold'} />
+              <Box
+                css={{
+                  width: '60%',
+                  padding: '10px',
+                  color: '$utilityTextDefault',
+                  m: '10px',
+                  'h3, p': {
+                    margin: '0',
+                  },
+                }}
+              >
+                <h3>{item.method}</h3>
+                <p>{item.createdAt}</p>
+              </Box>
+            </Box>
+          )
+        })}
       </HStack>
     </VStack>
   )

From 16a64e9b9471fd331e770fbc705ae40abe1fd456 Mon Sep 17 00:00:00 2001
From: Jackson Harper <jacksonh@gmail.com>
Date: Tue, 1 Nov 2022 11:51:54 +0800
Subject: [PATCH 2/5] Add a nock for stratechery test

---
 packages/api/test/utils/parser.test.ts | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/packages/api/test/utils/parser.test.ts b/packages/api/test/utils/parser.test.ts
index 559e3e918..eee4a24e8 100644
--- a/packages/api/test/utils/parser.test.ts
+++ b/packages/api/test/utils/parser.test.ts
@@ -38,11 +38,17 @@ describe('parseMetadata', async () => {
 
 describe('parsePreparedContent', async () => {
   it('gets published date when JSONLD fails to load', async () => {
+    nock('https://stratechery.com:443', {"encodedQueryParams":true})
+      .get('/wp-json/oembed/1.0/embed')
+      .query({"url":"https%3A%2F%2Fstratechery.com%2F2016%2Fits-a-tesla%2F"})
+      .reply(401)
+
     const html = load('./test/utils/data/stratechery-blog-post.html')
     const result = await parsePreparedContent('https://blog.omnivore.app/', {
       document: html,
       pageInfo: {},
     })
+
     expect(result.parsedContent?.publishedDate?.getTime()).to.equal(
       new Date('2016-04-05T15:27:51+00:00').getTime()
     )

From 57056d2c06e98ff78ab79af9914185d94f374e1b Mon Sep 17 00:00:00 2001
From: Jackson Harper <jacksonh@gmail.com>
Date: Tue, 1 Nov 2022 12:52:29 +0800
Subject: [PATCH 3/5] Use full width on smaller devices

---
 packages/web/pages/settings/integrations.tsx | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/packages/web/pages/settings/integrations.tsx b/packages/web/pages/settings/integrations.tsx
index 479e11f67..d74e90103 100644
--- a/packages/web/pages/settings/integrations.tsx
+++ b/packages/web/pages/settings/integrations.tsx
@@ -32,6 +32,10 @@ const Subheader = styled(Box, {
   borderBottom: '1px solid $grayLine',
   margin: '0 auto',
   width: '80%',
+  // Our defined media queries don't work in styled components
+  '@media (max-width: 575px)': {
+    width: '100%',
+  },
 })
 
 //interface
@@ -139,6 +143,9 @@ export default function Integrations(): JSX.Element {
           width: '80%',
           margin: '0 auto',
           height: '500px',
+          '@smDown': {
+            width: '100%'
+          }
         }}
       >
         <Header>Applications</Header>
@@ -157,6 +164,7 @@ export default function Integrations(): JSX.Element {
                 alignItems: 'center',
                 '@smDown': {
                   flexWrap: 'wrap',
+                  borderRadius: 'unset',
                 },
               }}
             >

From 2de547d69f3abd68b4b1d3c5a977423d1005d34e Mon Sep 17 00:00:00 2001
From: Rupin Khandelwal <rupin@omnivore.app>
Date: Wed, 2 Nov 2022 21:19:27 -0400
Subject: [PATCH 4/5] changing some layout for smaller screen

---
 packages/web/pages/settings/integrations.tsx | 15 +++++++++------
 1 file changed, 9 insertions(+), 6 deletions(-)

diff --git a/packages/web/pages/settings/integrations.tsx b/packages/web/pages/settings/integrations.tsx
index d74e90103..0a0e1a1e6 100644
--- a/packages/web/pages/settings/integrations.tsx
+++ b/packages/web/pages/settings/integrations.tsx
@@ -122,7 +122,7 @@ export default function Integrations(): JSX.Element {
         },
       },
     ])
-  }, [readwiseConnected, integrations, webhooks])
+  }, [])
 
   return (
     <PrimaryLayout pageTestId={'integrations'}>
@@ -144,8 +144,8 @@ export default function Integrations(): JSX.Element {
           margin: '0 auto',
           height: '500px',
           '@smDown': {
-            width: '100%'
-          }
+            width: '100%',
+          },
         }}
       >
         <Header>Applications</Header>
@@ -176,8 +176,10 @@ export default function Integrations(): JSX.Element {
               />
               <Box
                 css={{
-                  width: '60%',
-                  padding: '10px',
+                  '@sm': {
+                    width: '60%',
+                  },
+                  padding: '8px',
                   color: '$utilityTextDefault',
                   m: '10px',
                   'h3, p': {
@@ -188,7 +190,7 @@ export default function Integrations(): JSX.Element {
                 <h3>{item.title}</h3>
                 <p>{item.subText}</p>
               </Box>
-              <HStack>
+              <HStack css={{ '@smDown': { width: '100%' } }}>
                 <Button
                   style={
                     item.button.style === 'ctaDarkYellow'
@@ -199,6 +201,7 @@ export default function Integrations(): JSX.Element {
                     py: '10px',
                     px: '14px',
                     minWidth: '230px',
+                    width: '100%',
                   }}
                   onClick={item.button.action}
                 >

From 0816e6932474b96b3ff5087e02badd3de81761ad Mon Sep 17 00:00:00 2001
From: Jackson Harper <jacksonh@gmail.com>
Date: Thu, 3 Nov 2022 13:19:32 +0800
Subject: [PATCH 5/5] Use the old webhooks page for now

---
 packages/web/pages/settings/integrations.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/web/pages/settings/integrations.tsx b/packages/web/pages/settings/integrations.tsx
index 0a0e1a1e6..8b2a59e19 100644
--- a/packages/web/pages/settings/integrations.tsx
+++ b/packages/web/pages/settings/integrations.tsx
@@ -118,7 +118,7 @@ export default function Integrations(): JSX.Element {
           text: 'View Webhooks',
           icon: <Eye size={16} weight={'bold'} />,
           style: 'ctaWhite',
-          action: () => router.push('/settings/integrations/webhooks'),
+          action: () => router.push('/settings/webhooks'),
         },
       },
     ])