Refactored frontend

dev/runner/JobDisplay.jsx

@@ -0,0 +1,14 @@
+function jobDisplay({ props }) {
+  return (
+    <div className="job">
+      <h2>Job ID: {props.job.id}</h2>
+      <h3>Log: </h3>
+      {props.job.log.map((l, i) => (
+        <div className="line" key={i}>
+          {l}
+          <br />
+        </div>
+      ))}
+    </div>
+  );
+}

dev/runner/JobView.jsx

@@ -0,0 +1,49 @@
+import { useContext } from "react";
+import { Initiator } from "qualiteer/web-clients";
+import JobContext, { ACTIONS as jobActions } from "../../ctx/JobContext.jsx";
+
+const cmd = `node other.js`;
+export default function Test() {
+  const { state: jobState, dispatch: jobDispatch } = useContext(JobContext);
+
+  function onLog(d) {
+    const job = jobState.jobs[0];
+    job.log.push(d);
+    jobDispatch({ type: jobActions.UPDATE, jobId: jobState.jobs[0].id, job });
+    console.log(d);
+    console.log(jobState);
+  }
+
+  async function startJob() {
+    console.log("Wanting to start");
+    const url = "https://Qualiteer.elijahparker3.repl.co";
+    // Create an initiator and make a job request
+    const primary = new Initiator(url);
+    const jobRequest = { command: cmd };
+
+    const job = await primary.newJob(jobRequest, onLog, () =>
+      console.log("Primary Job Concluded")
+    );
+    jobDispatch({ type: jobActions.CREATE, job: { ...job, log: [] } });
+
+    console.log("Started");
+  }
+
+  return (
+    <div className="Jobs">
+      <h1>vv Info vv </h1>
+      <button onClick={startJob}>Start</button>
+      {jobState.jobs.map((j) =>
+        j.log.map((l, i) => (
+          <div className="line" key={i}>
+            {l}
+            <br />
+          </div>
+        ))
+      )}
+    </div>
+  );
+
+  /*
+      }*/
+}