Merge pull request #1374 from omnivore-app/feat/webhooks

Wrapping up the remaining task for integration feature

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>
   )

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
@@ -114,11 +118,11 @@ 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'),
         },
       },
     ])
-  }, [readwiseConnected, integrations, webhooks])
+  }, [])
 
   return (
     <PrimaryLayout pageTestId={'integrations'}>
@@ -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',
                 },
               }}
             >
@@ -168,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': {
@@ -180,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'
@@ -191,6 +201,7 @@ export default function Integrations(): JSX.Element {
                     py: '10px',
                     px: '14px',
                     minWidth: '230px',
+                    width: '100%',
                   }}
                   onClick={item.button.action}
                 >