From 1c30b92d749ad9b91ef777f8760c20572f991e7a Mon Sep 17 00:00:00 2001
From: Dan <daniel.h.funk@gmail.com>
Date: Fri, 14 Apr 2023 15:49:06 -0400
Subject: [PATCH] Add the new process insterstitial to the frontend.

---
 .../src/routes/ProcessInterstitial.tsx        | 26 +++++++++++++++++++
 .../src/routes/ProcessRoutes.tsx              | 21 +++++++++++++++
 2 files changed, 47 insertions(+)
 create mode 100644 spiffworkflow-frontend/src/routes/ProcessInterstitial.tsx
 create mode 100644 spiffworkflow-frontend/src/routes/ProcessRoutes.tsx

diff --git a/spiffworkflow-frontend/src/routes/ProcessInterstitial.tsx b/spiffworkflow-frontend/src/routes/ProcessInterstitial.tsx
new file mode 100644
index 00000000..ea6d61d6
--- /dev/null
+++ b/spiffworkflow-frontend/src/routes/ProcessInterstitial.tsx
@@ -0,0 +1,26 @@
+import { useEffect, useState } from 'react';
+import { useParams } from 'react-router-dom';
+import { fetchEventSource } from '@microsoft/fetch-event-source';
+import { BACKEND_BASE_URL } from '../config';
+import { getBasicHeaders } from '../services/HttpService';
+
+export default function ProcessInterstitial() {
+  const [data, setData] = useState<any[]>([]);
+  const params = useParams();
+
+  useEffect(() => {
+    fetchEventSource(
+      `${BACKEND_BASE_URL}/tasks/${params.process_instance_id}`,
+      {
+        headers: getBasicHeaders(),
+        onmessage(ev) {
+          console.log(data, ev.data);
+          const parsedData = JSON.parse(ev.data);
+          setData((data) => [...data, parsedData]);
+        },
+      }
+    );
+  }, []);
+
+  return <div className="App">The last streamed item was: {data}</div>;
+}
diff --git a/spiffworkflow-frontend/src/routes/ProcessRoutes.tsx b/spiffworkflow-frontend/src/routes/ProcessRoutes.tsx
new file mode 100644
index 00000000..53979789
--- /dev/null
+++ b/spiffworkflow-frontend/src/routes/ProcessRoutes.tsx
@@ -0,0 +1,21 @@
+import { useEffect, useState } from 'react';
+import { Route, Routes, useLocation, useNavigate } from 'react-router-dom';
+// @ts-ignore
+import { Tabs, TabList, Tab } from '@carbon/react';
+import TaskShow from './TaskShow';
+import MyTasks from './MyTasks';
+import GroupedTasks from './GroupedTasks';
+import CompletedInstances from './CompletedInstances';
+import CreateNewInstance from './CreateNewInstance';
+import ProcessInterstitial from './ProcessInterstitial';
+
+export default function ProcessRoutes() {
+  return (
+    <Routes>
+      <Route
+        path=":process_model_identifier/:process_instance_id/interstitial"
+        element={<ProcessInterstitial />}
+      />
+    </Routes>
+  );
+}