From 6830dded517edd14d4f26e1b887dafd11a0853bc Mon Sep 17 00:00:00 2001
From: codev99 <code.v99@gmail.com>
Date: Mon, 24 Jun 2024 21:43:36 +0200
Subject: [PATCH] feat: 81 events widget with server-sent events

---
 src/api/apiSlice.ts                           | 30 ++++++++-------
 .../Widgets/CardTemplate/CardTemplate.tsx     |  4 ++
 .../Widgets/EventsList/EventsList.tsx         | 37 +++++++++++++++++++
 .../Widgets/FormGenerator/FormGenerator.tsx   |  7 +---
 4 files changed, 60 insertions(+), 18 deletions(-)
 create mode 100644 src/components/Widgets/EventsList/EventsList.tsx

diff --git a/src/api/apiSlice.ts b/src/api/apiSlice.ts
index 70ae950..e1e1047 100644
--- a/src/api/apiSlice.ts
+++ b/src/api/apiSlice.ts
@@ -1,20 +1,24 @@
-import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';
-import { RootState } from '../redux/store';
+import { BaseQueryFn, FetchArgs, FetchBaseQueryError, createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';
 
-export const baseQuery = fetchBaseQuery({
-  prepareHeaders: (headers, { getState }) => {
-    const kubeConfig = (getState()  as RootState).auth?.data;
-    if (kubeConfig) {
-      // headers.set("authorization", `Bearer ${token}`);
-      /**
-       * INSERT HERE HOW TO SEND LOGIN INFO TO APIs
-       */
+const baseQuery = fetchBaseQuery({});
+
+const customFetchBaseQuery: BaseQueryFn<string | FetchArgs, unknown, FetchBaseQueryError> = async (args, api, extraOptions) => {
+  const result = await baseQuery(args, api, extraOptions);
+  const realErrorCode = (result as unknown as {code: number})?.code;
+  if (realErrorCode !== undefined && realErrorCode !== 200) {
+    const clientErrorRegex = /^4\d{2}$/; // Regex for 4xx client errors
+    if (clientErrorRegex.test(String(realErrorCode))) {
+      // use transformation to ovewrite the fetch status with right error code
+      return {
+        status: realErrorCode,
+        data: {}
+      }
     }
-    return headers;
   }
-});
+  return result;
+}
 
 export const apiSlice = createApi({
-  baseQuery: baseQuery,
+  baseQuery: customFetchBaseQuery,
   endpoints: () => ({}), // all apis will be injected here
 })
\ No newline at end of file
diff --git a/src/components/Widgets/CardTemplate/CardTemplate.tsx b/src/components/Widgets/CardTemplate/CardTemplate.tsx
index 9b47055..a50a9f8 100644
--- a/src/components/Widgets/CardTemplate/CardTemplate.tsx
+++ b/src/components/Widgets/CardTemplate/CardTemplate.tsx
@@ -35,6 +35,10 @@ const CardTemplate = (props) => {
         }
       },
     }
+  } 
+  if (props.panel === "true" && !actions?.find(el => el.verb === "get")?.path) {
+    // avoid wrong panel open
+    delete cardProps.panel;
   }
   // END TEMP
 
diff --git a/src/components/Widgets/EventsList/EventsList.tsx b/src/components/Widgets/EventsList/EventsList.tsx
new file mode 100644
index 0000000..fe64e5b
--- /dev/null
+++ b/src/components/Widgets/EventsList/EventsList.tsx
@@ -0,0 +1,37 @@
+import { useEffect, useState } from "react";
+import { getBaseUrl } from "../../../utils/api";
+import RichRow from "../RichRow/RichRow";
+
+type EventType = {
+  uid: string,
+  icon: string,
+  color: string,
+  primaryText: string,
+  secondaryText: string,
+  subPrimaryText: string,
+  subSecondaryText: string,
+}
+
+const EventsList = ({deploymentId}: {deploymentId: string}) => {
+  const [events, setEvents] = useState<EventType[]>([]);
+
+  useEffect(() => {
+    // opening a connection to the server to begin receiving events from it
+    const eventSource = new EventSource(`${getBaseUrl()}/events/${deploymentId}`);
+    
+    // attaching a handler to receive message events
+    eventSource.onmessage = (event) => {
+      const newEvents = JSON.parse(event.data);
+      setEvents({ ...newEvents, ...events });
+    };
+    
+    // terminating the connection on component unmount
+    return () => eventSource.close();
+  }, [deploymentId, events]);
+
+  return (
+    events.map(el => <RichRow key={el.uid} {...el} />)
+  )
+}
+
+export default EventsList;
\ No newline at end of file
diff --git a/src/components/Widgets/FormGenerator/FormGenerator.tsx b/src/components/Widgets/FormGenerator/FormGenerator.tsx
index cac30be..dd3dc3e 100644
--- a/src/components/Widgets/FormGenerator/FormGenerator.tsx
+++ b/src/components/Widgets/FormGenerator/FormGenerator.tsx
@@ -259,13 +259,10 @@ const FormGenerator = ({title, description, fieldsEndpoint, form, prefix, onClos
 			
 			// submit values
 			if (!postLoading && !isPostError && !isPostSuccess) {
-				const response = await postContent({
+				await postContent({
 					endpoint: postEndpoint,
 					body: payload,
-				}).unwrap();
-				if (response.code && response.code !== 200) {
-					catchError();
-				}
+				});
 			}
 		}