MessageItem component refactored

kafka-ui-react-app/src/components/Topics/Details/Messages/MessageItem.tsx

@@ -7,7 +7,7 @@ interface MessageItemProp {
   partition: TopicMessage['partition'];
   offset: TopicMessage['offset'];
   timestamp: TopicMessage['timestamp'];
-  content: Record<string, unknown>;
+  content: TopicMessage['content'];
 }
 
 const MessageItem: React.FC<MessageItemProp> = ({
@@ -15,16 +15,17 @@ const MessageItem: React.FC<MessageItemProp> = ({
   offset,
   timestamp,
   content,
-}) => {
-  const getMessageContentBody = (messageContent: Record<string, unknown>) => {
-    try {
-      const contentObj =
-        typeof messageContent !== 'object'
-          ? JSON.parse(messageContent)
-          : messageContent;
-      return (
+}) => (
+  <tr key="{timestamp}">
+    <td style={{ width: 200 }}>
+      {timestamp ? format(timestamp, 'yyyy-MM-dd HH:mm:ss') : null}
+    </td>
+    <td style={{ width: 150 }}>{offset}</td>
+    <td style={{ width: 100 }}>{partition}</td>
+    <td key="{content}" style={{ wordBreak: 'break-word' }}>
+      {content && (
         <JSONTree
-          data={contentObj}
+          data={content}
           hideRoot
           invertTheme={false}
           theme={{
@@ -43,24 +44,9 @@ const MessageItem: React.FC<MessageItemProp> = ({
             base0B: '#363636',
           }}
         />
-      );
-    } catch (e) {
-      return messageContent;
-    }
-  };
-
-  return (
-    <tr key="{timestamp}">
-      <td style={{ width: 200 }}>
-        {timestamp ? format(timestamp, 'yyyy-MM-dd HH:mm:ss') : null}
-      </td>
-      <td style={{ width: 150 }}>{offset}</td>
-      <td style={{ width: 100 }}>{partition}</td>
-      <td key="{content}" style={{ wordBreak: 'break-word' }}>
-        {content && getMessageContentBody(content as Record<string, unknown>)}
-      </td>
-    </tr>
-  );
-};
+      )}
+    </td>
+  </tr>
+);
 
 export default MessageItem;

kafka-ui-react-app/src/components/Topics/Details/Messages/MessagesTable.tsx

@@ -30,7 +30,7 @@ const MessagesTable: React.FC<MessagesTableProp> = ({ messages, onNext }) => {
           {messages.map(
             ({ partition, offset, timestamp, content }: TopicMessage) => (
               <MessageItem
-                key="{timestamp}"
+                key={timestamp.toString()}
                 partition={partition}
                 offset={offset}
                 timestamp={timestamp}

kafka-ui-react-app/src/redux/reducers/topics/reducer.ts

@@ -1,5 +1,5 @@
 import { v4 } from 'uuid';
-import { Topic } from 'generated-sources';
+import { Topic, TopicMessage } from 'generated-sources';
 import { Action, TopicsState } from 'redux/interfaces';
 import ActionType from 'redux/actionType';
 
@@ -41,6 +41,31 @@ const addToTopicList = (state: TopicsState, payload: Topic): TopicsState => {
   return newState;
 };
 
+const transformTopicMessages = (
+  state: TopicsState,
+  messages: TopicMessage[]
+): TopicsState => ({
+  ...state,
+  messages: messages.map((mes) => {
+    const { content } = mes;
+    let parsedContent = content;
+
+    if (content) {
+      try {
+        parsedContent =
+          typeof content !== 'object' ? JSON.parse(content) : content;
+      } catch (_) {
+        // do nothing
+      }
+    }
+
+    return {
+      ...mes,
+      content: parsedContent,
+    };
+  }),
+});
+
 const reducer = (state = initialState, action: Action): TopicsState => {
   switch (action.type) {
     case ActionType.GET_TOPICS__SUCCESS:
@@ -57,10 +82,7 @@ const reducer = (state = initialState, action: Action): TopicsState => {
         },
       };
     case ActionType.GET_TOPIC_MESSAGES__SUCCESS:
-      return {
-        ...state,
-        messages: action.payload,
-      };
+      return transformTopicMessages(state, action.payload);
     case ActionType.GET_TOPIC_CONFIG__SUCCESS:
       return {
         ...state,