add cron example

next-env.d.ts

@@ -1,5 +1,4 @@
 /// <reference types="next" />
-/// <reference types="next/types/global" />
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited

next.config.js

@@ -1,10 +1,7 @@
-/**
- * @type {import('next').NextConfig}
- */
+/** @type {import('next').NextConfig} */
 const nextConfig = {
-  env: {
-    title: "hello"
-  }
-}
+  reactStrictMode: true,
+  swcMinify: true,
+};
 
-module.exports = nextConfig
+module.exports = nextConfig;

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "internal-playground-sdk",
+  "name": "playground-sdk",
   "version": "0.1.0",
   "private": true,
   "scripts": {
@@ -9,18 +9,19 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "@serverlessq/nextjs": "^1.0.8",
-    "next": "11.1.0",
-    "react": "17.0.2",
-    "react-dom": "17.0.2"
+    "next": "12.3.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
   },
   "devDependencies": {
-    "@types/react": "17.0.19",
+    "@types/node": "18.7.16",
+    "@types/react": "18.0.19",
+    "@types/react-dom": "18.0.6",
     "autoprefixer": "^10.4.7",
-    "eslint": "7.32.0",
-    "eslint-config-next": "11.1.0",
+    "eslint": "8.23.1",
+    "eslint-config-next": "12.3.0",
     "postcss": "^8.4.14",
     "tailwindcss": "^3.1.4",
-    "typescript": "4.4.2"
+    "typescript": "4.8.3"
   }
 }

src/components/spinner.tsx

@@ -0,0 +1,7 @@
+export const Spinner = () => (
+  <div className="flex items-center justify-center space-x-2 animate-bounce">
+    <div className="w-8 h-8 bg-blue-400 rounded-full"></div>
+    <div className="w-8 h-8 bg-green-400 rounded-full"></div>
+    <div className="w-8 h-8 bg-black rounded-full"></div>
+  </div>
+);

src/pages/_app.tsx

@@ -1,7 +1,9 @@
-import '../../styles/globals.css'
-import type { AppProps } from 'next/app'
+import "../../styles/globals.css";
+import type { AppProps } from "next/app";
+import emailCron from "../pages/api/cron";
+// emailCron.init();
 
 function App({ Component, pageProps }: AppProps) {
-  return <Component {...pageProps} />
+  return <Component {...pageProps} />;
 }
-export default App
+export default App;

src/pages/api/cron.ts

@@ -0,0 +1,16 @@
+import { Cron } from "@serverlessq/nextjs";
+
+export default Cron(
+  "testCron",
+  "api/cron",
+  async (req, res) => {
+    // business logic executed after cron is triggered
+    return;
+  },
+  {
+    expression: "0/10 * ? * MON-FRI *",
+    method: "GET",
+    urlToOverrideWhenRunningLocalhost:
+      "https://485c-2001-16b8-e76e-c800-e935-e246-a4be-a9b.eu.ngrok.io/api/cron",
+  }
+);

src/pages/cron.tsx

@@ -0,0 +1,27 @@
+import type { NextPage } from "next";
+import cron from "../pages/api/cron";
+
+export const getServerSideProps = async () => {
+  // const cronjob = await cron.getNextExecution();
+  return {
+    props: {
+      // ...cronjob,
+    },
+  };
+};
+
+const Cron: NextPage = (props) => {
+  cron.init();
+
+  return (
+    <>
+      <div className="flex justify-center items-center h-screen">
+        <div className="flex flex-col items-center gap-5">
+          {JSON.stringify(props)}
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default Cron;

src/pages/index.tsx

@@ -1,68 +1,35 @@
 import type { NextPage } from "next";
-import { useState } from "react";
-import queue from "../pages/api/queue";
+import Link from "next/link";
+import { FC } from "react";
 
-export const getServerSideProps = async () => {
-  const result = await queue.enqueue({ method: "GET" });
-  return {
-    props: { ...result },
-  };
+const LinkComponent: FC<{ name: string }> = ({ name }) => {
+  return (
+    <Link href={`/${name.toLowerCase()}`}>
+      <div className="text-xl border rounded-xl p-4 border-neutral-700 hover:shadow-lg disabled:text-7xl w-48 text-center cursor-pointer">
+        <a>{name}</a>
+      </div>
+    </Link>
+  );
 };
-const Spinner = () => (
-  <div className="flex items-center justify-center space-x-2 animate-bounce">
-    <div className="w-8 h-8 bg-blue-400 rounded-full"></div>
-    <div className="w-8 h-8 bg-green-400 rounded-full"></div>
-    <div className="w-8 h-8 bg-black rounded-full"></div>
-  </div>
-);
-const Home: NextPage = (props) => {
-  const [isLoading, setIsLoading] = useState(false);
-  const [result, setResult] = useState<any>();
-
-  const doSomething = async () => {
-    setResult("");
-    setIsLoading(true);
-    try {
-      const r = await fetch("/api/enqueue");
-      const data = await r.json();
-      console.log(data);
-      setResult(data);
-    } catch (e: any) {
-      console.log(e);
-      setResult(JSON.stringify(e));
-    }
-    setIsLoading(false);
-  };
-
+const Home: NextPage = () => {
   return (
     <>
-      <div className="flex justify-center items-center h-screen">
-        <div className="flex flex-col items-center gap-5">
-          <div className="mb-20">
-            <p className="font-bold">
-              SSR Result:{" "}
-              <span className="font-normal">{JSON.stringify(props)}</span>
-            </p>
-          </div>
-
-          {isLoading ? (
-            <Spinner />
-          ) : (
-            <button
-              disabled={isLoading}
-              onClick={doSomething}
-              className="text-xl border rounded-xl p-4 border-neutral-700 hover:shadow-lg disabled:text-7xl w-45"
-            >
-              Execute Task (CSR)
-            </button>
-          )}
-          <div>
-            <p className="font-bold">
-              Client Side Fetch Result:{" "}
-              <span className="font-normal">{JSON.stringify(result)}</span>
-            </p>
-          </div>
+      <div className="flex flex-col justify-center items-center h-screen gap-10">
+        <h1 className="text-4xl">ServerlessQ SDK Example</h1>
+        <div className="flex items-center gap-5">
+          <LinkComponent name="Queue" />
+          <LinkComponent name="Cron" />
         </div>
+        <p>
+          Go check out the docs at{" "}
+          <a
+            className="text-blue-700 hover:underline"
+            href="https://docs.serverlessq.com/"
+            target={"_blank"}
+          >
+            https://docs.serverlessq.com/
+          </a>
+        </p>
       </div>
     </>
   );

src/pages/queue.tsx

@@ -0,0 +1,61 @@
+import { Spinner } from "components/spinner";
+import type { NextPage } from "next";
+import { useState } from "react";
+
+// alternatively, you can enqueue a message through SSR
+
+// import queue from "../pages/api/queue";
+// export const getServerSideProps = async () => {
+//   const enqueueResult = await queue.enqueue({ method: "GET" });
+//   return {
+//     props: {
+//       ...enqueueResult,
+//     },
+//   };
+// };
+
+const Queue: NextPage = () => {
+  const [isLoading, setIsLoading] = useState(false);
+  const [result, setResult] = useState<any>();
+
+  const doSomething = async () => {
+    setResult("");
+    setIsLoading(true);
+    try {
+      const response = await fetch("/api/enqueue");
+      const data = await response.json();
+      setResult(data);
+    } catch (e: any) {
+      setResult(JSON.stringify(e));
+    }
+    setIsLoading(false);
+  };
+
+  return (
+    <>
+      <div className="flex justify-center items-center h-screen">
+        <div className="flex flex-col items-center gap-5">
+          {isLoading ? (
+            <Spinner />
+          ) : (
+            <button
+              disabled={isLoading}
+              onClick={doSomething}
+              className="text-xl border rounded-xl p-4 border-neutral-700 hover:shadow-lg disabled:text-7xl w-45"
+            >
+              Enqueue Message(CSR)
+            </button>
+          )}
+          <div>
+            <p className="font-bold">
+              Client Side Fetch Result:{" "}
+              <span className="font-normal">{JSON.stringify(result)}</span>
+            </p>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default Queue;

tsconfig.json

@@ -18,6 +18,7 @@
     "isolatedModules": true,
     "jsx": "preserve",
     "baseUrl": "src",
+    "incremental": true
   },
   "include": [
     "next-env.d.ts",
@@ -27,4 +28,4 @@
   "exclude": [
     "node_modules"
   ]
-}
+}