From 526078c4feb1ecddd5c405980899dfac6bc605b6 Mon Sep 17 00:00:00 2001
From: Rupin Khandelwal <rupin@omnivore.app>
Date: Tue, 25 Oct 2022 19:00:58 -0500
Subject: [PATCH] Updating Readwise and Webhooks and making page consistent

---
 .../templates/integrations/Readwise.tsx       | 133 +++++++++++-------
 .../templates/integrations/Webhooks.tsx       |  40 +++++-
 2 files changed, 114 insertions(+), 59 deletions(-)

diff --git a/packages/web/components/templates/integrations/Readwise.tsx b/packages/web/components/templates/integrations/Readwise.tsx
index 695cd7568..5e2b6f2a4 100644
--- a/packages/web/components/templates/integrations/Readwise.tsx
+++ b/packages/web/components/templates/integrations/Readwise.tsx
@@ -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>
   )
 }
diff --git a/packages/web/components/templates/integrations/Webhooks.tsx b/packages/web/components/templates/integrations/Webhooks.tsx
index 5aa736f32..0a9acd18d 100644
--- a/packages/web/components/templates/integrations/Webhooks.tsx
+++ b/packages/web/components/templates/integrations/Webhooks.tsx
@@ -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%',
           }}>