fix: add unique keys

Author: jonaslagoni

examples/simple-react/src/Asyncapi.js

@@ -188,11 +188,9 @@ components:
   }, []);
   let something;
   if (data !== undefined) {
-    something = (
-      <ApplicationView>
-        <AsyncAPIApplication document={data} />
-      </ApplicationView>
-    );
+    something = <ApplicationView>
+      <AsyncAPIApplication document={data} />
+    </ApplicationView>;
   } else {
     something = <h1>Not loaded</h1>;
   }

examples/simple-react/src/social_media/application.js

@@ -41,10 +41,11 @@ function Asyncapi() {
   if (externalApplications.length > 0 && focusedApplication !== undefined) {
     something = (
       <ApplicationFocusView sideMenu={Menu}>
-        <AsyncAPIApplication document={focusedApplication.parsedDoc} />
+        <AsyncAPIApplication key={focusedApplication.parsedDoc.info().title()} document={focusedApplication.parsedDoc} />
         {externalApplications.map(({ parsedDoc, name }) => {
           return (
             <AsyncAPIApplication
+              key={parsedDoc.info().title()}
               document={parsedDoc}
               topExtended={
                 <div className="flex justify-between mb-4">

library/src/components/nodes/Application.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React from 'react';
 import { ApplicationNodeData, InternalProps } from '../../types';
 
 type ApplicationProps = ApplicationNodeData & InternalProps;
@@ -9,28 +9,24 @@ type ApplicationProps = ApplicationNodeData & InternalProps;
  * What you define as an instance can be application, grouped or single server less function, etc.
  */
 export const Application: React.FunctionComponent<ApplicationProps> = props => {
-  const [temp, setTemp] = useState<any>(undefined);
   const nodeData = {
     ...props,
   };
   delete nodeData.children;
   delete nodeData.internal;
   const applicationNodeData: ApplicationNodeData = nodeData;
 
-  useEffect(() => {
-    props.internal?.addApplicationCallback(applicationNodeData);
+  props.internal?.addApplicationCallback(applicationNodeData);
 
-    const childrenWithProps = React.Children.map(props.children, child => {
-      if (React.isValidElement(child)) {
-        return React.cloneElement(child, {
-          forApplication: applicationNodeData.id,
-          internal: props.internal,
-        });
-      }
-      return child;
-    });
-    setTemp(childrenWithProps);
-  }, []);
+  const childrenWithProps = React.Children.map(props.children, child => {
+    if (React.isValidElement(child)) {
+      return React.cloneElement(child, {
+        forApplication: applicationNodeData.id,
+        internal: props.internal,
+      });
+    }
+    return child;
+  });
 
-  return <div key={applicationNodeData.id}>{temp}</div>;
+  return <>{childrenWithProps}</>;
 };

library/src/components/nodes/AsyncAPIApplication.tsx

@@ -23,7 +23,9 @@ export const AsyncAPIApplication: React.FunctionComponent<ApplicationProps> = pr
     props.document.channels(),
   )) {
     if (channel.hasPublish()) {
-      const channelId = props.document.info().title() + channelPath;
+      const channelId = `incoming_${props.document
+        .info()
+        .title()}_${channelPath}`;
       const messages: MessageData[] = channel
         .publish()
         .messages()
@@ -32,14 +34,17 @@ export const AsyncAPIApplication: React.FunctionComponent<ApplicationProps> = pr
         });
       incomingNodes.push(
         <Incoming
+          key={channelId}
           channel={channelPath}
           description={channel.description() || 'No description'}
           id={channelId}
           messages={messages}
         />,
       );
     } else if (channel.hasSubscribe()) {
-      const channelId = props.document.info().title() + channelPath;
+      const channelId = `outgoing_${props.document
+        .info()
+        .title()}_${channelPath}`;
       const messages: MessageData[] = channel
         .subscribe()
         .messages()
@@ -48,6 +53,7 @@ export const AsyncAPIApplication: React.FunctionComponent<ApplicationProps> = pr
         });
       outgoingNodes.push(
         <Outgoing
+          key={channelId}
           channel={channelPath}
           description={channel.description() || 'No description'}
           id={channelId}
@@ -84,6 +90,7 @@ export const AsyncAPIApplication: React.FunctionComponent<ApplicationProps> = pr
   });
   return (
     <Application
+      key={props.document.info().title()}
       topExtended={props.topExtended}
       internal={props.internal}
       defaultContentType={props.document.defaultContentType() || undefined}

library/src/visualiser/react-flow-renderer/ApplicationFocusView.tsx

@@ -90,7 +90,7 @@ export const ApplicationFocusView: React.FunctionComponent<ApplicationFocusViewP
       leadApplicationIncomingChannels.push(node.id);
       tempElements.push(incomingReactFlowRendererNode, connectionEdge);
     } else {
-      const source = `${leadApplication.id}${node.channel}`;
+      const source = `outgoing_${leadApplication.id}_${node.channel}`;
       if (leadApplicationOutgoingChannels.includes(source)) {
         const connectionEdge = {
           id: `incoming-${appId}-${node.id}`,
@@ -122,7 +122,7 @@ export const ApplicationFocusView: React.FunctionComponent<ApplicationFocusViewP
       leadApplicationOutgoingChannels.push(node.id);
       tempElements.push(outgoingNode, connectionEdge);
     } else {
-      const target = `${leadApplication.id}${node.channel}`;
+      const target = `incoming_${leadApplication.id}_${node.channel}`;
       if (leadApplicationIncomingChannels.includes(target)) {
         const connectionEdge = {
           id: `outgoing-${appId}-${node.id}`,

library/src/visualiser/react-flow-renderer/ApplicationView.tsx

@@ -55,7 +55,7 @@ export const ApplicationView: React.FunctionComponent<ApplicationViewProps> = ({
       position: { x: 0, y: 0 },
     };
     const connectionEdge = {
-      id: `incoming-${appId}-${node.id}`,
+      id: `connection-${appId}-${node.id}`,
       type: 'smoothstep',
       style: { stroke: '#7ee3be', strokeWidth: 4 },
       target: appId,
@@ -72,7 +72,7 @@ export const ApplicationView: React.FunctionComponent<ApplicationViewProps> = ({
       position: { x: 0, y: 0 },
     };
     const connectionEdge = {
-      id: `outgoing-${appId}-${node.id}`,
+      id: `connection-${appId}-${node.id}`,
       type: 'smoothstep',
       style: { stroke: 'orange', strokeWidth: 4 },
       source: appId,