cron jobing

vincanger · Jan 19, 2023 · a2f5346 · a2f5346
1 parent 31c2eee
commit a2f5346
Show file tree

Hide file tree

Showing 17 changed files with 165 additions and 323 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -18,6 +18,7 @@
     "@trpc/next": "10.0.0-rc.4",
     "@trpc/react-query": "10.0.0-rc.4",
     "@trpc/server": "10.0.0-rc.4",
+    "@upstash/qstash": "^0.3.3",
     "next": "13.0.2",
     "next-auth": "^4.15.1",
     "nodemailer": "^6.8.0",

diff --git a/src/pages/AboutPage.tsx b/src/pages/AboutPage.tsx
@@ -3,23 +3,33 @@ import NavBar from './components/NavBar';
 
 const AboutPage = () => {
   return (
-    <div className='container'>
+    <div className="container">
       <main>
-        <span >🐢🐢🐢🐢🐢🐢🐢</span>
-        <div className='buttons'>
+        <span>🐢 🐝 🐢</span>
+        <div
+          style={{ maxWidth: "75%", marginTop: "1rem", textAlign: "center" }}
+        >
+          Example app built with the <a href="https://create.t3.gg">T3 stack</a> to highlight how the following features work{" "}:
+        </div>
+        <ul>
+          <li>auth</li>
+          <li>tRPC</li>
+          <li>serverless cron jobs</li>
+        </ul>
+        <div className="buttons" style={{ marginTop: '1rem' }}>
           <a
-            className='button button-filled'
-            href='https://wasp-lang.dev/docs'
-            target='_blank'
-            rel='noreferrer noopener'
+            className="button button-filled"
+            href="https://wasp-lang.dev/docs"
+            target="_blank"
+            rel="noreferrer noopener"
           >
-            Take the Tutorial
+            Find More Tutorials
           </a>
           <a
-            className='button button-outline'
-            href='https://discord.com/invite/rzdnErX'
-            target='_blank'
-            rel='noreferrer noopener'
+            className="button button-outline"
+            href="https://discord.com/invite/rzdnErX"
+            target="_blank"
+            rel="noreferrer noopener"
           >
             Chat on Discord
           </a>

diff --git a/src/pages/Logout.tsx b/src/pages/Logout.tsx
@@ -3,19 +3,18 @@ import { useSession, signOut } from "next-auth/react";
 import { useRouter } from "next/router";
 
 const Logout = () => {
-  const { data: session, status } = useSession();
+  const { status } = useSession();
   const router = useRouter();
 
   React.useEffect(() => {
     if (status === "authenticated") {
       signOut();
     }
+    if (status === "unauthenticated") {
+      router.push("/");
+    }
   }, [status]);
 
-  if (status === "unauthenticated") {
-    router.push("/");
-  }
-
   return <div>Logging out...</div>;
 }
 

diff --git a/src/pages/Main.css b/src/pages/Main.css
@@ -7,8 +7,14 @@
 body {
   margin: 0;
   padding: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans',
-    'Droid Sans', 'Helvetica Neue', sans-serif;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
+    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
+    sans-serif;
+}
+
+a {
+  color: #61dafb;
+  text-decoration: underline;
 }
 
 .container {
@@ -28,6 +34,11 @@ main {
   align-items: center;
 }
 
+main li {
+  list-style: bullet;
+  margin: 0.5rem 0;
+}
+
 .info {
   margin-bottom: 0.8rem;
   line-height: 1.15;
@@ -41,17 +52,31 @@ main {
   justify-content: center;
   width: 100%;
   max-width: 500px;
+  padding-top: 1rem;
 }
 
-main p {
-  font-size: 1.2rem;
+.tasks h2 {
+  font-size: 1rem;
+  font-weight: bold;
+  padding-bottom: 1.5rem;
 }
 
-h1,
-h2,
-h3 {
-  padding: 0.25rem;
-  margin: 0.25rem;
+.tasks a {
+  /* color: blue; */
+  padding-left: 0.5rem;
+  text-decoration: underline;
+}
+
+.tasks .tasklist {
+  padding: 2rem;
+  margin: 0.5rem;
+  width: 100%;
+  border: 1px solid gray;
+  border-radius: 5px;
+}
+
+main p {
+  font-size: 1.2rem;
 }
 
 .nav {
@@ -188,11 +213,10 @@ code {
   border-radius: 5px;
   padding: 0.2rem;
   background: #efefef;
-  font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New,
-    monospace;
+  font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono,
+    Bitstream Vera Sans Mono, Courier New, monospace;
 }
 
-
 .tooltip {
   display: none;
 }
@@ -201,7 +225,7 @@ code {
   z-index: 1;
   display: inline-block;
   border-bottom: 1px dotted black;
-  background-color: #212121; 
+  background-color: #212121;
   color: #fff;
 }
 
@@ -213,7 +237,6 @@ code {
   display: none;
 }
 
-
 @media (max-width: 1000px) {
   .nav {
     display: flex;
@@ -247,5 +270,3 @@ code {
     display: none;
   }
 }
-
-
diff --git a/src/pages/TasksPage.tsx b/src/pages/TasksPage.tsx
@@ -1,7 +1,6 @@
 import React from "react";
 import Link from "next/link";
 import { trpc } from "../utils/trpc";
-import { type NextPage } from "next";
 
 const TasksPage = () => {
   const {
@@ -15,11 +14,6 @@ const TasksPage = () => {
     isError: completedError,
   } = trpc.task.getTasksByStatus.useQuery("completed");
 
-  React.useEffect(() => {
-    console.log("pendingTasks", pendingTasks);
-    console.log("completedTasks", completedTasks);
-  }, [pendingTasks, completedTasks]);
-
   return (
     <div className="container">
       <main>
@@ -31,7 +25,7 @@ const TasksPage = () => {
           {pendingError && <div>Error: {pendingError}</div>}
           {completedError && <div>Error: {completedError}</div>}
           {pendingTasks && (
-            <div>
+            <div className="tasklist">
               <h2>Pending Tasks</h2>
               <ol>
                 {pendingTasks.map((task) => (
@@ -47,7 +41,7 @@ const TasksPage = () => {
             </div>
           )}
           {completedTasks && (
-            <div style={{ opacity: "0.6" }}>
+            <div className="tasklist">
               <h2>Completed Tasks</h2>
               <ol>
                 {completedTasks.map((task, idx) => (
@@ -68,25 +62,26 @@ const TasksPage = () => {
             </div>
           )}
         </div>
-        <div>
-          <h2>CRON JOB EMAIL previews from Nodemailer</h2>
-          <ul>
-            {pendingTasks && completedTasks && 
-              pendingTasks.concat(completedTasks).map((task, idx) => {
-                if (task.emailUrl) {
-                  return (
-                    <>
+        <div className="tasks">
+          <div className="tasklist">
+            <h2>CRON JOB EMAIL previews from Nodemailer</h2>
+            <ul>
+              {pendingTasks &&
+                completedTasks &&
+                pendingTasks.concat(completedTasks).map((task, idx) => {
+                  if (task.emailUrl) {
+                    return (
                       <li key={task.id}>
                         <code>{task.name}</code>:
                         <a target="_blank" href={task.emailUrl}>
                           nodemailer email preview
                         </a>
                       </li>
-                    </>
-                  );
-                }
-              })}
-          </ul>
+                    );
+                  }
+                })}
+            </ul>
+          </div>
         </div>
       </main>
     </div>
@@ -100,4 +95,3 @@ export const getStaticProps = async () => {
 };
 
 export default TasksPage;
-
diff --git a/src/pages/actions.ts b/src/pages/actions.ts
diff --git a/src/pages/api/queue/emailer.ts b/src/pages/api/queue/emailer.ts
@@ -1,12 +1,16 @@
 import { type NextApiRequest, type NextApiResponse } from "next";
 import { sendEmail } from "../../../utils/emailer";
 import { prisma } from "../../../server/db/client";
+import { Task } from "../../../types/sharedTypes";
+
 
 const emailer = async (req: NextApiRequest, res: NextApiResponse) => {
-  const task = JSON.parse(req.body);
+  const task = JSON.parse(req.body) as Task;
+  console.log("\n task parsed via Qstash: ", task, "\n");
+
   const sentEmail = await sendEmail(task);
-  console.log("sentEmail: ", sentEmail);
-  if (typeof sentEmail === "string") {
+
+  if (sentEmail) {
     await prisma.task.update({
       where: {
         id: task.id,