diff --git a/app/concurrency/Jobs.tsx b/app/concurrency/Jobs.tsx new file mode 100644 index 0000000..cdb149c --- /dev/null +++ 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(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(['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 ( +
+

Jobs

+
+ {users.map((user, idx) => ( +
+
{capFirst(user)}
+ {/*
+
+ + +
*/} + + +
+ ))} +
+
+ ); +} diff --git a/app/concurrency/page.tsx b/app/concurrency/page.tsx new file mode 100644 index 0000000..b8dbf43 --- /dev/null +++ b/app/concurrency/page.tsx @@ -0,0 +1,29 @@ +import Header from '@/components/Header'; +import Jobs from './Jobs'; + +export default async function Index() { + return ( +
+
+
+
+ +
+
+ + +
+ ); +} diff --git a/app/layout.tsx b/app/layout.tsx index d759f6a..661a162 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -27,7 +27,7 @@ export default function RootLayout({