Updates

inngest · Jul 11, 2024 · b1eb788 · b1eb788
1 parent e5a5520
commit b1eb788
Show file tree

Hide file tree

Showing 6 changed files with 144 additions and 6 deletions.
diff --git a/app/concurrency/Jobs.tsx b/app/concurrency/Jobs.tsx
@@ -0,0 +1,84 @@
+'use client';
+import { useState, useRef, useEffect } from 'react';
+import Queue, { type Job } from '@/components/Queue';
+import { capFirst } from '@/utils/strings';
+
+export function useTimeout(callback: () => void, delay: number | null): void {
+  const savedCallback = useRef(callback);
+
+  // Set up the timeout.
+  useEffect(() => {
+    // Don't schedule if no delay is specified.
+    // Note: 0 is a valid value for delay.
+    if (!delay && delay !== 0) {
+      return;
+    }
+
+    const id = setTimeout(() => {
+      savedCallback.current();
+    }, delay);
+
+    return () => {
+      clearTimeout(id);
+    };
+  }, [delay]);
+}
+
+function useJobQueue(initialJobs: Job[] = []): [Job[], (job: Job) => void] {
+  const [jobs, setJobs] = useState<Job[]>(initialJobs);
+
+  function createJob(job: Job) {}
+
+  useTimeout(() => {
+    console.log('Polling for jobs');
+    const jobs;
+  }, 500);
+
+  return [jobs, createJob];
+}
+
+export default function Jobs() {
+  const [users, setUsers] = useState<string[]>(['dan', 'ana']);
+  const [jobs, createJob] = useJobQueue([
+    { id: 'x', status: 'PENDING', user: 'dan' },
+  ]);
+
+  const aggregateJobs = jobs.reduce<{ [key: string]: Job[] }>((acc, job) => {
+    if (job.user in acc) {
+      acc[job.user].push(job);
+    } else {
+      acc[job.user] = [job];
+    }
+    return acc;
+  }, {});
+
+  return (
+    <div className="flex flex-col gap-4">
+      <h2 className="text-lg font-bold">Jobs</h2>
+      <div className="flex flex-col gap-4">
+        {users.map((user, idx) => (
+          <div key={user}>
+            <div className="mb-2">{capFirst(user)}</div>
+            {/* <div className="flex flex-row gap-8">
+              <div className="flex flex-row gap-2">
+                <button
+                  onClick={onCreateJob.bind(null, user, 1)}
+                  className="py-1 px-3 rounded-full border border-slate-500 hover:border-slate-700 hover:bg-slate-200"
+                >
+                  +1
+                </button>
+                <button
+                  onClick={onCreateJob.bind(null, user, 5)}
+                  className="py-1 px-3 rounded-full border border-slate-500 hover:border-slate-700 hover:bg-slate-200"
+                >
+                  +5
+                </button>
+              </div> */}
+
+            <Queue jobs={aggregateJobs[user] || []} />
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
diff --git a/app/concurrency/page.tsx b/app/concurrency/page.tsx
@@ -0,0 +1,29 @@
+import Header from '@/components/Header';
+import Jobs from './Jobs';
+
+export default async function Index() {
+  return (
+    <div className="flex-1 w-full flex flex-col gap-20 items-center">
+      <div className="animate-in flex-1 flex flex-col 8 opacity-0 max-w-screen-xl w-full px-3">
+        <Header />
+        <main className="flex-1 flex flex-col gap-6">
+          <Jobs />
+        </main>
+      </div>
+
+      <footer className="w-full border-t border-t-foreground/10 p-8 flex justify-center text-center text-xs">
+        <p>
+          Powered by{' '}
+          <a
+            href="https://www.inngest.com"
+            target="_blank"
+            className="font-bold hover:underline"
+            rel="noreferrer"
+          >
+            Inngest
+          </a>
+        </p>
+      </footer>
+    </div>
+  );
+}
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -27,7 +27,7 @@ export default function RootLayout({
       <body className="bg-background text-foreground">
         <header>
           <nav className="w-full flex justify-center border-b border-b-foreground/10 h-16">
-            <div className="w-full max-w-4xl flex justify-between items-center p-3 text-sm">
+            <div className="w-full max-w-screen-xl flex justify-between items-center p-3 text-sm">
               <a
                 href="https://www.inngest.com"
                 target="_blank"

diff --git a/components/Header.tsx b/components/Header.tsx
@@ -1,6 +1,3 @@
-import NextLogo from './NextLogo';
-import SupabaseLogo from './SupabaseLogo';
-
 export default function Header() {
   return (
     <div className="flex flex-col gap-8 py-8 items-center">

diff --git a/components/Queue.tsx b/components/Queue.tsx
@@ -0,0 +1,28 @@
+export type Job = {
+  id: string;
+  status: 'PENDING' | 'RUNNING' | 'COMPLETED';
+  user: string;
+  time: Date;
+};
+
+export default function Queue({ jobs }: { jobs: Job[] }) {
+  return (
+    <div className="flex flex-row gap-2 items-center">
+      {jobs.map(({ id, status }) => {
+        return (
+          <div
+            key={id}
+            className={`w-8 h-8 rounded-sm ${
+              status === 'RUNNING'
+                ? 'animate-pulse bg-amber-500'
+                : status === 'COMPLETED'
+                ? 'bg-emerald-500'
+                : 'bg-cyan-400'
+            }`}
+            title={`${id} - ${status}`}
+          ></div>
+        );
+      })}
+    </div>
+  );
+}
diff --git a/inngest/functions.ts b/inngest/functions.ts
@@ -8,10 +8,10 @@ export const multiTenantConcurrency = inngest.createFunction(
       {
         limit: 1,
         // Limit 1 concurrent run per user
-        // key: 'event.data.user_slug',
+        key: 'event.data.user_slug',
       },
       // {
-      //   limit: 10,
+      //   limit: 20,
       // },
     ],
   },