From 806c19ccd43a36d9cda8e333a36a7761ed9ae45e Mon Sep 17 00:00:00 2001
From: Jackson Harper <jacksonh@gmail.com>
Date: Fri, 22 Sep 2023 15:59:28 +0800
Subject: [PATCH] Make a test page for debuging the PWA share extension

---
 packages/web/pages/debug.tsx           |  4 --
 packages/web/pages/debug/pwa-share.tsx | 51 ++++++++++++++++++++++++++
 packages/web/public/sw.js              |  2 +
 3 files changed, 53 insertions(+), 4 deletions(-)
 delete mode 100644 packages/web/pages/debug.tsx
 create mode 100644 packages/web/pages/debug/pwa-share.tsx

diff --git a/packages/web/pages/debug.tsx b/packages/web/pages/debug.tsx
deleted file mode 100644
index a6edec939..000000000
--- a/packages/web/pages/debug.tsx
+++ /dev/null
@@ -1,4 +0,0 @@
-// TODO: implement page
-export default function DebugPage(): JSX.Element {
-  return <p>unimplemented</p>
-}
diff --git a/packages/web/pages/debug/pwa-share.tsx b/packages/web/pages/debug/pwa-share.tsx
new file mode 100644
index 000000000..ed8c8bc74
--- /dev/null
+++ b/packages/web/pages/debug/pwa-share.tsx
@@ -0,0 +1,51 @@
+import { Button } from '../../components/elements/Button'
+import {
+  BorderedFormInput,
+  FormLabel,
+} from '../../components/elements/FormElements'
+import { SpanBox, VStack } from '../../components/elements/LayoutPrimitives'
+import { StyledText } from '../../components/elements/StyledText'
+import { webBaseURL } from '../../lib/appConfig'
+
+export default function DebugShareTarget(): JSX.Element {
+  return (
+    <form action={`${webBaseURL}/share-target`} method="POST">
+      <VStack
+        alignment="center"
+        css={{
+          padding: '16px',
+          background: 'white',
+          minWidth: '340px',
+          width: '70vw',
+          maxWidth: '576px',
+          borderRadius: '8px',
+          border: '1px solid #3D3D3D',
+          boxShadow: '#B1B1B1 9px 9px 9px -9px',
+        }}
+      >
+        <StyledText style="subHeadline" css={{ color: '$omnivoreGray' }}>
+          Debug the share-target PWA feature
+        </StyledText>
+        <VStack
+          css={{ width: '100%', minWidth: '320px', gap: '16px', pb: '16px' }}
+        >
+          <SpanBox css={{ width: '100%' }}>
+            <FormLabel>URL</FormLabel>
+            <BorderedFormInput
+              key="url"
+              type="url"
+              name="url"
+              placeholder="URL"
+              autoFocus={true}
+              css={{ bg: 'white', color: 'black' }}
+            />
+          </SpanBox>
+        </VStack>
+
+        <Button type="submit" style="ctaDarkYellow" css={{ my: '$2' }}>
+          Submit
+        </Button>
+      </VStack>
+    </form>
+  )
+}
diff --git a/packages/web/public/sw.js b/packages/web/public/sw.js
index 8e195e663..53f4dbd56 100644
--- a/packages/web/public/sw.js
+++ b/packages/web/public/sw.js
@@ -132,6 +132,7 @@
 
   function handleFetchRequest(ev) {
     const request = ev.request
+    console.log('requestUrl.pathname: ', requestUrl.pathname)
 
     if (request.method === 'POST') {
       const requestUrl = new URL(request.url)
@@ -180,6 +181,7 @@
   })
 
   globalApi.addEventListener('fetch', (ev) => {
+    console.log('handling fetch request for: ', ev)
     if (ev.request.destination === 'script') {
       return
     }