Start, stop, monitor jobs from ui working.

ui/src/hooks/useJob.tsx

@@ -0,0 +1,40 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { Job } from '@prisma/client';
+
+export default function useJob(jobID: string, reloadInterval: null | number = null) {
+  const [job, setJob] = useState<Job | null>(null);
+  const [status, setStatus] = useState<'idle' | 'loading' | 'success' | 'error'>('idle');
+
+  const refreshJobs = () => {
+    setStatus('loading');
+    fetch(`/api/jobs?id=${jobID}`)
+      .then(res => res.json())
+      .then(data => {
+        console.log('Job:', data);
+        setJob(data);
+        setStatus('success');
+      })
+      .catch(error => {
+        console.error('Error fetching datasets:', error);
+        setStatus('error');
+      });
+  };
+
+  useEffect(() => {
+    refreshJobs();
+
+    if (reloadInterval) {
+      const interval = setInterval(() => {
+        refreshJobs();
+      }, reloadInterval);
+
+      return () => {
+        clearInterval(interval);
+      }
+    }
+  }, [jobID]);
+
+  return { job, setJob, status, refreshJobs };
+}

ui/src/hooks/useJobsList.tsx

@@ -0,0 +1,29 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { Job } from '@prisma/client';
+
+export default function useJobsList() {
+  const [jobs, setJobs] = useState<Job[]>([]);
+  const [status, setStatus] = useState<'idle' | 'loading' | 'success' | 'error'>('idle');
+
+  const refreshJobs = () => {
+    setStatus('loading');
+    fetch('/api/jobs')
+      .then(res => res.json())
+      .then(data => {
+        console.log('Jobs:', data);
+        setJobs(data);
+        setStatus('success');
+      })
+      .catch(error => {
+        console.error('Error fetching datasets:', error);
+        setStatus('error');
+      });
+  };
+  useEffect(() => {
+    refreshJobs();
+  }, []);
+
+  return { jobs, setJobs, status, refreshJobs };
+}