Use tailwindcss

OneSignalDevelopers · Dec 12, 2023 · 7f6b651 · 7f6b651
1 parent 46df3a3
commit 7f6b651
Show file tree

Hide file tree

Showing 14 changed files with 514 additions and 164 deletions.
diff --git a/app/common/mailchimp-dao.ts b/app/common/mailchimp-dao.ts
@@ -3,9 +3,8 @@ export function buildMailchimpDao(apiKey: string, datacenter: string) {
 
   return {
     generateExport: async () => {
-      const endpoint = `${api}/account-exports`
-
       try {
+        const endpoint = `${api}/account-exports`
         const res = await fetch(endpoint, {
           method: 'POST',
           headers: {
@@ -18,6 +17,8 @@ export function buildMailchimpDao(apiKey: string, datacenter: string) {
 
         const data = await res.json()
 
+        console.log(data)
+
         return { data }
       } catch (error) {
         console.log(error)

diff --git a/app/common/mailgun-dao.ts b/app/common/mailgun-dao.ts
@@ -1,10 +1,10 @@
 export const buildMailgunDao = (apiKey: string, sendingDomain: string) => {
   const api = 'https://api.mailgun.net/v3'
-  const auth = Buffer.from(`api:${apiKey}`).toString('base64')
 
   return {
     getMailingLists: async () => {
       try {
+        const auth = Buffer.from(`api:${apiKey}`).toString('base64')
         const endpoint = `${api}/lists/pages`
         const res = await fetch(endpoint, {
           method: 'GET',
@@ -23,11 +23,12 @@ export const buildMailgunDao = (apiKey: string, sendingDomain: string) => {
     },
     getMailingListVerificationStatus: async () => {
       try {
+        debugger
         const endpoint = `${api}/domains/${sendingDomain}`
         const res = await fetch(endpoint, {
           method: 'GET',
           headers: {
-            Authorization: `Basic ${auth}`,
+            Authorization: `Basic ${btoa(`api:${apiKey}`)}`,
           },
         })
 

diff --git a/app/root.tsx b/app/root.tsx
@@ -1,18 +1,15 @@
-import { cssBundleHref } from "@remix-run/css-bundle";
-import type { LinksFunction } from "@remix-run/node";
+import styles from './tailwind.css'
+import type { LinksFunction } from '@remix-run/node'
 import {
   Links,
   LiveReload,
   Meta,
   Outlet,
   Scripts,
   ScrollRestoration,
-} from "@remix-run/react";
-
-export const links: LinksFunction = () => [
-  ...(cssBundleHref ? [{ rel: "stylesheet", href: cssBundleHref }] : []),
-];
+} from '@remix-run/react'
 
+export const links: LinksFunction = () => [{ rel: 'stylesheet', href: styles }]
 
 export default function App() {
   return (
@@ -31,5 +28,5 @@ export default function App() {
         <LiveReload />
       </body>
     </html>
-  );
+  )
 }
diff --git a/app/routes/mailchimp.download.tsx b/app/routes/mailchimp.download.tsx
@@ -0,0 +1,54 @@
+import { ActionFunctionArgs, json } from '@remix-run/node'
+import { Link, Outlet, useActionData } from '@remix-run/react'
+import {
+  mailchimpApiKeyKey,
+  mailchimpServerPrefixKey,
+  onesignalAppIdKey,
+  prefsCookie,
+} from '~/common/cookies'
+import { buildMailchimpDao } from '~/common/mailchimp-dao'
+
+export default function Mailchimp() {
+  const actionData = useActionData<typeof action>()
+
+  return (
+    <>
+      <div className="mt-6">
+        <Link
+          to={(actionData?.exportLink as any) || ''}
+          target="_blank"
+          className="font-l text-blue-600 dark:text-blue-500 hover:underline"
+        >
+          Download...
+        </Link>
+        <Outlet />
+      </div>
+    </>
+  )
+}
+
+export async function action({ request }: ActionFunctionArgs) {
+  const cookieHeader = request.headers.get('Cookie')
+  const cookie = (await prefsCookie.parse(cookieHeader)) || {}
+  const body = await request.formData()
+
+  const onesignalAppId = body.get('onesignal-app-id') as string
+  const apiKey = body.get('mailchimp-api-key') as string
+  const serverPrefix = body.get('mailchimp-server-prefix') as string
+  cookie[mailchimpApiKeyKey] = apiKey
+  cookie[onesignalAppIdKey] = onesignalAppId
+  cookie[mailchimpServerPrefixKey] = serverPrefix
+
+  const mailchimpDao = buildMailchimpDao(apiKey, serverPrefix)
+  const exportLink = await mailchimpDao.generateExport()
+  return json(
+    {
+      exportLink,
+    },
+    {
+      headers: {
+        'Set-Cookie': await prefsCookie.serialize(cookie),
+      },
+    }
+  )
+}
diff --git a/app/routes/mailchimp.tsx b/app/routes/mailchimp.tsx
@@ -1,24 +1,16 @@
-import { ActionFunctionArgs, LoaderFunctionArgs, json } from '@remix-run/node'
-import { Form, useActionData, useLoaderData } from '@remix-run/react'
-import {
-  loadCookies,
-  mailchimpApiKeyKey as mailchimpApiKeyCookieKey,
-  mailchimpServerPrefixKey,
-  onesignalAppIdKey,
-  prefsCookie,
-} from '~/common/cookies'
-import { buildMailchimpDao } from '~/common/mailchimp-dao'
+import { LoaderFunctionArgs, json } from '@remix-run/node'
+import { Form, Outlet, useLoaderData } from '@remix-run/react'
+import { loadCookies } from '~/common/cookies'
 
 export default function Mailchimp() {
-  const actionData = useActionData<typeof action>()
   const loaderData = useLoaderData<typeof loader>()
 
   return (
     <>
       <div className="max-w-lg mx-auto bg-gray-800 p-6 rounded-lg shadow-lg">
         <h1 className="text-2xl font-bold mb-6">Mailchimp</h1>
         <h2 className="text-xl mb-4">Authentication</h2>
-        <Form id="authForm" method="post" action={`/mailchimp`}>
+        <Form id="authForm" method="post" action={`/mailchimp/download`}>
           <div className="mb-4">
             <label
               htmlFor="oneSignal-app-id"
@@ -32,7 +24,7 @@ export default function Mailchimp() {
               name="oneSignal-app-id"
               className="bg-gray-700 text-white block w-full p-3 rounded-md"
               placeholder="Enter OneSignal APP ID"
-              value={loaderData.onesignalAppId}
+              defaultValue={loaderData.onesignalAppId}
             />
           </div>
           <div className="mb-4">
@@ -48,7 +40,7 @@ export default function Mailchimp() {
               name="mailchimp-server-prefix"
               className="bg-gray-700 text-white block w-full p-3 rounded-md"
               placeholder="Enter Mailchimp Server Prefix"
-              value={loaderData.mailchimpServerPrefix}
+              defaultValue={loaderData.mailchimpServerPrefix}
             />
           </div>
           <div className="mb-4">
@@ -64,48 +56,25 @@ export default function Mailchimp() {
               name="mailchimp-api-key"
               className="bg-gray-700 text-white block w-full p-3 rounded-md"
               placeholder="Enter Mailchimp API Key"
-              value={loaderData.mailgunApiKey}
+              defaultValue={loaderData.mailchimpApiKey}
             />
           </div>
           <button
             type="submit"
             className="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded w-full"
           >
-            Download
+            Generate Export
           </button>
         </Form>
-        <pre>{JSON.stringify(actionData, null, 2)}</pre>
+        <Outlet />
       </div>
     </>
   )
 }
 
 export async function loader({ request }: LoaderFunctionArgs) {
-  const { mailgunApiKey, onesignalAppId, mailchimpServerPrefix } =
+  const { mailchimpApiKey, onesignalAppId, mailchimpServerPrefix } =
     await loadCookies(request)
 
-  return json({ mailgunApiKey, onesignalAppId, mailchimpServerPrefix })
-}
-
-export async function action({ request }: ActionFunctionArgs) {
-  const cookieHeader = request.headers.get('Cookie')
-  const cookie = (await prefsCookie.parse(cookieHeader)) || {}
-  const body = await request.formData()
-  const onesignalAppId = body.get('onesignal-app-id') as string
-  const apiKey = body.get('mailchimp-api-key') as string
-  const serverPrefix = body.get('mailchimp-server-prefix') as string
-  cookie[mailchimpApiKeyCookieKey] = apiKey
-  cookie[onesignalAppIdKey] = onesignalAppId
-  cookie[mailchimpServerPrefixKey] = serverPrefix
-
-  const mailchimpDao = buildMailchimpDao(apiKey, serverPrefix)
-  const exportLink = await mailchimpDao.generateExport()
-  return json(
-    { exportLink },
-    {
-      headers: {
-        'Set-Cookie': await prefsCookie.serialize(cookie),
-      },
-    }
-  )
+  return json({ mailchimpApiKey, onesignalAppId, mailchimpServerPrefix })
 }
diff --git a/app/routes/mailgun.mailing-lists.tsx → app/routes/mailgun.download.tsx b/app/routes/mailgun.mailing-lists.tsx → app/routes/mailgun.download.tsx
@@ -13,13 +13,10 @@ export default function MailgunMailingListSelection() {
   const actionData = useActionData<typeof action>()
   const [selection, setSelection] = useState('')
 
-  const onSelectionChanged = (event: React.ChangeEvent<HTMLSelectElement>) => {
-    console.log('Selection changed')
+  const onSelectionChanged = (event: React.ChangeEvent<HTMLSelectElement>) =>
     setSelection(event.currentTarget.value)
-  }
 
   const onCreateExportRecipientClicked = async () => {
-    console.log('Button Clicked')
     const apiKey = actionData?.mailgunApiKey
     const sendingDomain = actionData?.mailgunSendingDomain
 
@@ -28,7 +25,7 @@ export default function MailgunMailingListSelection() {
     const dao = buildMailgunDao(apiKey, sendingDomain)
     const exportStatus = await dao.getMailingListVerificationStatus()
 
-    console.log(exportStatus)
+    console.log('Verification status', exportStatus)
   }
 
   return (

diff --git a/app/routes/mailgun.tsx b/app/routes/mailgun.tsx
@@ -10,7 +10,7 @@ export default function Mailgun() {
       <div className="max-w-lg mx-auto bg-gray-800 p-6 rounded-lg shadow-lg">
         <h1 className="text-2xl font-bold mb-6">Mailgun</h1>
         <h2 className="text-xl mb-4">Authentication</h2>
-        <Form id="authForm" method="post" action={`/mailgun/mailing-lists`}>
+        <Form id="authForm" method="post" action={`/mailgun/download`}>
           <div className="mb-4">
             <label
               htmlFor="onesignal-app-id"

diff --git a/app/routes/sendgrid.contact-lists.tsx b/app/routes/sendgrid.contact-lists.tsx