⚡️ Commit from Jolt AI ⚡️

jolt-ai-bot · jolt-ai-bot · commit ae37968a09fc · 2024-12-15T16:39:07.000Z
Connect Node-RED API integration (https://app.usejolt.ai/tasks/cb7585af-e17d-46cc-897f-e9f811b38561) Description: Implement the following task in the README.md: ``` IR-01: Establish API communication for flow management. Objective: Enable communication between the frontend client and the Node-RED backend for flow management. Technical Requirements: Design and implement a service layer in the frontend that communicates with Node-RED's backend APIs. ``` The API we're trying to connect to is Node\_RED's API, it has a `/flows` endpoint that accepts GET and POST requests. It has a single property called `flows` which contains all the flows for our project. See `packages/node-red-data/flows.json` for an example of what the value of this flows property is. Whenever the flow in our client is updated, send a request to the `/flows` endpoint to update the flows there as well. Logic for translating between Node-RED and our data format should go into a new logic file called packages/flow-client/src/app/redux/modules/flow/red.logic.ts The actual requests should get triggered in a redux middleware using RTK's `createListenerMiddleware()`, whenever our flows get updated, dispatch a POST to the API.
diff --git a/packages/flow-client/src/app/redux/middleware/flow.middleware.ts b/packages/flow-client/src/app/redux/middleware/flow.middleware.ts
@@ -0,0 +1,52 @@
+import { createListenerMiddleware, isAnyOf } from '@reduxjs/toolkit';
+import { flowActions } from '../modules/flow/flow.slice';
+import { flowApi } from '../modules/api/flow.api';
+import { AppLogic } from '../logic';
+import { RootState } from '../store';
+
+// Create the Node-RED sync middleware instance
+export const nodeRedListener = createListenerMiddleware();
+
+// Add a listener that responds to any flow state changes to sync with Node-RED
+nodeRedListener.startListening({
+    matcher: isAnyOf(
+        // Flow entity actions
+        flowActions.addFlowEntity,
+        flowActions.updateFlowEntity,
+        flowActions.removeFlowEntity,
+        flowActions.addFlowEntities,
+        flowActions.updateFlowEntities,
+        flowActions.removeFlowEntities,
+        // Flow node actions
+        flowActions.addFlowNode,
+        flowActions.updateFlowNode,
+        flowActions.removeFlowNode,
+        flowActions.addFlowNodes,
+        flowActions.updateFlowNodes,
+        flowActions.removeFlowNodes
+    ),
+    // Debounce API calls to avoid too many requests
+    debounce: 1000,
+    listener: async (action, listenerApi) => {
+        try {
+            const state = listenerApi.getState() as RootState;
+            const logic = listenerApi.extra as AppLogic;
+
+            // Convert our state to Node-RED format
+            const nodeRedFlows = logic.flow.red.toNodeRed(state);
+
+            // Update flows in Node-RED
+            await listenerApi.dispatch(
+                flowApi.endpoints.updateFlows.initiate(nodeRedFlows)
+            );
+        } catch (error) {
+            // Log any errors but don't crash the app
+            console.error('Error updating Node-RED flows:', error);
+
+            // Could also dispatch an error action if needed:
+            // listenerApi.dispatch(flowActions.setError('Failed to update Node-RED flows'));
+        }
+    },
+});
+
+export const nodeRedMiddleware = nodeRedListener.middleware;
diff --git a/packages/flow-client/src/app/redux/modules/api/flow.api.ts b/packages/flow-client/src/app/redux/modules/api/flow.api.ts
@@ -0,0 +1,44 @@
+import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';
+import environment from '../../../../environment';
+
+// Type for Node-RED flows response/request
+export interface NodeRedFlows {
+    flows: unknown[];
+}
+
+// Define a service using a base URL and expected endpoints for flows
+export const flowApi = createApi({
+    reducerPath: 'flowApi',
+    baseQuery: fetchBaseQuery({
+        baseUrl: environment.NODE_RED_API_ROOT,
+        responseHandler: 'content-type',
+    }),
+    tagTypes: ['Flow'], // For automatic cache invalidation and refetching
+    endpoints: builder => ({
+        // Endpoint to fetch all flows
+        getFlows: builder.query<NodeRedFlows, void>({
+            query: () => ({
+                url: 'flows',
+                headers: {
+                    Accept: 'application/json',
+                },
+            }),
+            providesTags: ['Flow'],
+        }),
+        // Endpoint to update all flows
+        updateFlows: builder.mutation<NodeRedFlows, NodeRedFlows>({
+            query: (flows) => ({
+                url: 'flows',
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: flows,
+            }),
+            invalidatesTags: ['Flow'],
+        }),
+    }),
+});
+
+// Export hooks for usage in components
+export const { useGetFlowsQuery, useUpdateFlowsMutation } = flowApi;
diff --git a/packages/flow-client/src/app/redux/modules/flow/flow.logic.ts b/packages/flow-client/src/app/redux/modules/flow/flow.logic.ts
@@ -9,10 +9,12 @@ import {
     selectFlowEntityById,
     selectSubflowInOutByFlowId,
     selectSubflowInstancesByFlowId,
+    FlowEntity,
 } from './flow.slice';
 import { GraphLogic } from './graph.logic';
 import { NodeLogic } from './node.logic';
 import { TreeLogic } from './tree.logic';
+import { RedLogic } from './red.logic';
 
 // checks if a given property has changed
 const objectHasChange = <T>(
@@ -37,11 +39,13 @@ export class FlowLogic {
     public readonly graph: GraphLogic;
     public readonly node: NodeLogic;
     public readonly tree: TreeLogic;
+    public readonly red: RedLogic;
 
     constructor() {
         this.node = new NodeLogic();
         this.graph = new GraphLogic(this.node);
         this.tree = new TreeLogic();
+        this.red = new RedLogic();
     }
 
     public createNewFlow(
diff --git a/packages/flow-client/src/app/redux/modules/flow/red.logic.ts b/packages/flow-client/src/app/redux/modules/flow/red.logic.ts
@@ -0,0 +1,193 @@
+import { RootState } from '../../store';
+import { NodeRedFlows } from '../api/flow.api';
+import {
+    FlowEntity,
+    FlowNodeEntity,
+    SubflowEntity,
+    selectAllFlowEntities,
+    selectFlowNodesByFlowId,
+} from './flow.slice';
+
+export class RedLogic {
+    private convertNodeToNodeRed(node: FlowNodeEntity): unknown {
+        // Convert our node format to Node-RED format
+        const nodeRedNode = {
+            id: node.id,
+            type: node.type,
+            name: node.name,
+            x: node.x,
+            y: node.y,
+            z: node.z,
+            wires: node.wires ?? [],
+            inputs: node.inputs,
+            outputs: node.outputs,
+            inputLabels: node.inputLabels,
+            outputLabels: node.outputLabels,
+            icon: node.icon,
+            info: node.info,
+        };
+
+        // Remove undefined properties
+        return Object.fromEntries(
+            Object.entries(nodeRedNode).filter(([, v]) => v !== undefined)
+        );
+    }
+
+    private convertFlowToNodeRed(
+        flow: FlowEntity | SubflowEntity,
+        state: RootState
+    ): unknown {
+        const baseFlow = {
+            id: flow.id,
+            type: flow.type,
+            label: flow.name,
+            disabled: flow.disabled,
+            info: flow.info,
+        };
+
+        if (flow.type === 'subflow') {
+            return {
+                ...baseFlow,
+                name: flow.name,
+                category: flow.category,
+                color: flow.color,
+                icon: flow.icon,
+                in: flow.in,
+                out: flow.out,
+                env: flow.env,
+                meta: {},
+            };
+        }
+
+        return {
+            ...baseFlow,
+            env: flow.env,
+        };
+    }
+
+    private createMetadataFlow(state: RootState): unknown {
+        const flows = selectAllFlowEntities(state);
+        const metadata = flows.map(flow => ({
+            id: flow.id,
+            extraData: flow,
+            nodes: selectFlowNodesByFlowId(state, flow.id).map(node => ({
+                id: node.id,
+                extraData: node
+            }))
+        }));
+        return {
+            id: "aed83478cb340859",
+            type: "tab",
+            label: "FLOW-CLIENT:::METADATA::ROOT",
+            disabled: true,
+            info: JSON.stringify(metadata),
+            env: []
+        };
+    }
+
+    public toNodeRed(state: RootState): NodeRedFlows {
+        // Get all flows and their nodes
+        const flows = selectAllFlowEntities(state);
+
+        // Convert each flow and its nodes to Node-RED format
+        const nodeRedFlows = flows.map(flow => {
+            const flowNodes = selectFlowNodesByFlowId(state, flow.id);
+
+            return {
+                ...this.convertFlowToNodeRed(flow, state),
+                // Include nodes if this is not a subflow
+                ...(flow.type !== 'subflow' && {
+                    nodes: flowNodes.map(node =>
+                        this.convertNodeToNodeRed(node)
+                    ),
+                }),
+            };
+        }).concat(this.createMetadataFlow(state));
+
+        return {
+            flows: nodeRedFlows,
+        };
+    }
+
+    private extractMetadata(nodeRedFlows: NodeRedFlows) {
+        const metadataFlow = nodeRedFlows.flows.find(
+            flow => flow.type === 'tab' && flow.label === 'FLOW-CLIENT:::METADATA::ROOT'
+        );
+        if (!metadataFlow?.info) {
+            return {};
+        }
+        const metadata = JSON.parse(metadataFlow.info as string);
+        return metadata.reduce((acc: Record<string, unknown>, flowMeta: any) => {
+            acc[flowMeta.id] = {
+                flow: flowMeta.extraData,
+                nodes: flowMeta.nodes.reduce((nodeAcc: Record<string, unknown>, nodeMeta: any) => {
+                    nodeAcc[nodeMeta.id] = nodeMeta.extraData;
+                    return nodeAcc;
+                }, {})
+            };
+            return acc;
+        }, {});
+    }
+
+    public fromNodeRed(nodeRedFlows: NodeRedFlows): {
+        flows: Array<FlowEntity | SubflowEntity>;
+        nodes: FlowNodeEntity[];
+    } {
+        const metadata = this.extractMetadata(nodeRedFlows);
+        const flows: Array<FlowEntity | SubflowEntity> = [];
+        const nodes: FlowNodeEntity[] = [];
+
+        nodeRedFlows.flows
+            .filter(flow => flow.label !== 'FLOW-CLIENT:::METADATA::ROOT')
+            .forEach(nodeRedFlow => {
+                const flowMetadata = metadata[nodeRedFlow.id as string]?.flow || {};
+
+                if (nodeRedFlow.type === 'subflow') {
+                    flows.push({
+                        ...flowMetadata,
+                        id: nodeRedFlow.id as string,
+                        type: 'subflow',
+                        name: nodeRedFlow.name as string,
+                        info: nodeRedFlow.info as string || '',
+                        category: nodeRedFlow.category as string,
+                        color: nodeRedFlow.color as string,
+                        icon: nodeRedFlow.icon as string,
+                        in: nodeRedFlow.in as string[],
+                        out: nodeRedFlow.out as string[],
+                        env: nodeRedFlow.env as []
+                    } as SubflowEntity);
+                } else {
+                    flows.push({
+                        ...flowMetadata,
+                        id: nodeRedFlow.id as string,
+                        type: 'flow',
+                        name: nodeRedFlow.label as string,
+                        disabled: nodeRedFlow.disabled as boolean,
+                        info: nodeRedFlow.info as string || '',
+                        env: nodeRedFlow.env as []
+                    } as FlowEntity);
+                }
+
+                // If this is a regular flow with nodes, process them
+                if (nodeRedFlow.type !== 'subflow' && Array.isArray(nodeRedFlow.nodes)) {
+                    nodeRedFlow.nodes.forEach(nodeRedNode => {
+                        const nodeMetadata = metadata[nodeRedFlow.id as string]?.nodes?.[nodeRedNode.id as string] || {};
+                        nodes.push({
+                            ...nodeMetadata,
+                            id: nodeRedNode.id as string,
+                            type: nodeRedNode.type as string,
+                            x: nodeRedNode.x as number,
+                            y: nodeRedNode.y as number,
+                            z: nodeRedFlow.id as string,
+                            wires: nodeRedNode.wires as string[][],
+                        } as FlowNodeEntity);
+                    });
+                }
+            });
+
+        return {
+            flows,
+            nodes,
+        };
+    }
+}
diff --git a/packages/flow-client/src/app/redux/store.ts b/packages/flow-client/src/app/redux/store.ts
@@ -1,6 +1,7 @@
 import { Action, configureStore, ThunkAction } from '@reduxjs/toolkit';
 import { setupListeners } from '@reduxjs/toolkit/query';
 import {
+    flowApi } from './modules/api/flow.api';
     FLUSH,
     PAUSE,
     PERSIST,
@@ -12,6 +13,7 @@ import {
 import storage from 'redux-persist/lib/storage';
 
 import type { AppLogic } from './logic';
+import { flowMiddleware } from './middleware/flow.middleware';
 import { iconApi } from './modules/api/icon.api';
 import { nodeApi } from './modules/api/node.api'; // Import the nodeApi
 import {
@@ -32,6 +34,7 @@ import {
 export const createStore = (logic: AppLogic) => {
     const store = configureStore({
         reducer: {
+            [flowApi.reducerPath]: flowApi.reducer,
             [nodeApi.reducerPath]: nodeApi.reducer,
             [iconApi.reducerPath]: iconApi.reducer,
             [PALETTE_NODE_FEATURE_KEY]: paletteNodeReducer,
@@ -66,7 +69,11 @@ export const createStore = (logic: AppLogic) => {
                 thunk: {
                     extraArgument: logic,
                 },
-            }).concat(nodeApi.middleware, iconApi.middleware),
+            }).concat(
+                nodeApi.middleware,
+                iconApi.middleware,
+                flowApi.middleware,
+                flowMiddleware),
         devTools: process.env.NODE_ENV !== 'production',
     });
 
