refactor: no use props.json to pass and update props for a custom message

Author: Iru89

packages/botonic-react/src/components/custom-message.tsx

@@ -82,7 +82,7 @@ export const customMessage = ({
         isUnread={props.isUnread}
       >
         <ErrorBoundary key={'errorBoundary'} {...customMessageProps}>
-          <CustomMessageComponent {...customMessageProps}>
+          <CustomMessageComponent id={id} {...customMessageProps}>
             {childrenWithoutReplies}
           </CustomMessageComponent>
         </ErrorBoundary>
@@ -93,12 +93,11 @@ export const customMessage = ({
   WrappedComponent.customTypeName = name
   // eslint-disable-next-line react/display-name
   WrappedComponent.deserialize = (msg: any) => {
-    const json = { ...msg.data, messageId: msg.id }
     return (
       <WrappedComponent
         id={msg.id}
         key={msg.key}
-        json={json}
+        json={msg.data}
         {...msg.data}
         sentBy={msg.sentBy || SENDERS.bot}
         isUnread={msg.isUnread}

packages/botonic-react/src/webchat/context/actions.ts

@@ -13,7 +13,7 @@ export enum WebchatAction {
   TOGGLE_EMOJI_PICKER = 'toggleEmojiPicker',
   TOGGLE_PERSISTENT_MENU = 'togglePersistentMenu',
   TOGGLE_WEBCHAT = 'toggleWebchat',
-  UPDATE_CUSTOM_MESSAGE_JSON = 'updateCustomMessageJSON',
+  UPDATE_CUSTOM_MESSAGE_PROPS = 'updateCustomMessageProps',
   UPDATE_DEV_SETTINGS = 'updateDevSettings',
   UPDATE_HANDOFF = 'updateHandoff',
   UPDATE_LAST_MESSAGE_DATE = 'updateLastMessageDate',

packages/botonic-react/src/webchat/context/index.tsx

@@ -54,7 +54,7 @@ export const WebchatContext = createContext<WebchatContextProps>({
   togglePersistentMenu: () => {
     return
   },
-  updateCustomMessageJSON: () => {
+  updateCustomMessageProps: () => {
     return
   },
   updateLatestInput: () => {

packages/botonic-react/src/webchat/context/messages-reducer.ts

@@ -16,8 +16,8 @@ export const messagesReducer = (
       return addMessageComponent(state, action)
     case WebchatAction.UPDATE_MESSAGE:
       return updateMessageReducer(state, action)
-    case WebchatAction.UPDATE_CUSTOM_MESSAGE_JSON:
-      return updateCustomMessageJSONReducer(state, action)
+    case WebchatAction.UPDATE_CUSTOM_MESSAGE_PROPS:
+      return updateCustomMessagePropsReducer(state, action)
     case WebchatAction.UPDATE_REPLIES:
       return { ...state, replies: action.payload }
     case WebchatAction.REMOVE_REPLIES:
@@ -155,21 +155,57 @@ function addMessageReducer(
   }
 }
 
-function updateCustomMessageJSONReducer(
+function updateCustomMessagePropsReducer(
   state: WebchatState,
   action: { type: WebchatAction; payload?: any }
 ) {
-  const { messageId, json } = action.payload
-  const messageToUpdate = state.messagesJSON.find(m => m.id === messageId)
-  const messageInfo = {
-    data: {
-      json,
-    },
+  const { messageId, props } = action.payload
+
+  // Similar to updateMessageReducer but only for custom messages
+  const msgIndex = state.messagesJSON.map(m => m.id).indexOf(messageId)
+  if (msgIndex > -1) {
+    const msgComponent = state.messagesComponents[msgIndex]
+    let updatedMessageComponents = {}
+    let updatedMessagesJSON = {}
+    if (msgComponent) {
+      const updatedMsgComponent = {
+        ...msgComponent,
+        ...{
+          props: { ...msgComponent.props, ack: action.payload.ack, ...props },
+        },
+      }
+
+      updatedMessageComponents = {
+        messagesComponents: [
+          ...state.messagesComponents.slice(0, msgIndex),
+          { ...updatedMsgComponent },
+          ...state.messagesComponents.slice(msgIndex + 1),
+        ],
+      }
+    }
+
+    const messageJSON = state.messagesJSON.find(m => m.id === messageId)
+    if (messageJSON) {
+      messageJSON.data = {
+        ...messageJSON.data,
+        ...props,
+      }
+
+      updatedMessagesJSON = {
+        messagesJSON: [
+          ...state.messagesJSON.slice(0, msgIndex),
+          { ...messageJSON },
+          ...state.messagesJSON.slice(msgIndex + 1),
+        ],
+      }
+    }
+
+    return {
+      ...state,
+      ...updatedMessagesJSON,
+      ...updatedMessageComponents,
+    }
   }
-  const updatedMsg = merge(messageToUpdate, messageInfo)
 
-  return updateMessageReducer(state, {
-    type: WebchatAction.UPDATE_MESSAGE,
-    payload: updatedMsg,
-  })
+  return state
 }

packages/botonic-react/src/webchat/context/types.ts

@@ -75,7 +75,10 @@ export interface WebchatContextProps {
   toggleEmojiPicker: (toggle: boolean) => void
   togglePersistentMenu: (toggle: boolean) => void
   toggleCoverComponent: (toggle: boolean) => void
-  updateCustomMessageJSON: (messageId: string, json: any) => void
+  updateCustomMessageProps: (
+    messageId: string,
+    json: Record<string, any>
+  ) => void
   updateLatestInput: (input: ClientInput) => void
   updateMessage: (message: WebchatMessage) => void
   updateReplies: (replies: (typeof Reply)[]) => void

packages/botonic-react/src/webchat/context/use-webchat.ts

@@ -55,7 +55,10 @@ export interface UseWebchat {
   toggleEmojiPicker: (toggle: boolean) => void
   togglePersistentMenu: (toggle: boolean) => void
   toggleWebchat: (toggle: boolean) => void
-  updateCustomMessageJSON: (messageId: string, json: any) => void
+  updateCustomMessageProps: (
+    messageId: string,
+    props: Record<string, any>
+  ) => void
   updateDevSettings: (settings: DevSettings) => void
   updateHandoff: (handoff: boolean) => void
   updateLastMessageDate: (date: string) => void
@@ -103,10 +106,13 @@ export function useWebchat(theme?: WebchatTheme): UseWebchat {
       payload: message,
     })
 
-  const updateCustomMessageJSON = (messageId: string, json: any) =>
+  const updateCustomMessageProps = (
+    messageId: string,
+    props: Record<string, any>
+  ) =>
     webchatDispatch({
-      type: WebchatAction.UPDATE_CUSTOM_MESSAGE_JSON,
-      payload: { messageId, json },
+      type: WebchatAction.UPDATE_CUSTOM_MESSAGE_PROPS,
+      payload: { messageId, props },
     })
 
   const updateMessage = (message: WebchatMessage) =>
@@ -267,7 +273,7 @@ export function useWebchat(theme?: WebchatTheme): UseWebchat {
     toggleEmojiPicker,
     togglePersistentMenu,
     toggleWebchat,
-    updateCustomMessageJSON,
+    updateCustomMessageProps,
     updateDevSettings,
     updateHandoff,
     updateLastMessageDate,

packages/botonic-react/src/webchat/custom-messages/index.ts

@@ -1,2 +1 @@
 export { default as CustomRatingMessage } from './rating'
-export { CustomJsonBase } from './types'

packages/botonic-react/src/webchat/custom-messages/rating/index.tsx

@@ -4,7 +4,6 @@ import { ThemeContext } from 'styled-components'
 
 import { Button, customMessage } from '../../../components'
 import { WebchatContext } from '../../context'
-import { CustomJsonBase } from '../types'
 import { RatingSelector } from './rating-selector'
 import { MessageBubble } from './styles'
 import { RatingType } from './types'
@@ -14,19 +13,18 @@ interface CustomRatingMessageProps {
   messageText: string
   buttonText: string
   ratingType: RatingType
-  json: CustomJsonBase & { valueSent?: number }
+  id: string
+  valueSent?: number
 }
 
 const CustomRatingMessage: React.FC<CustomRatingMessageProps> = props => {
-  const { payloads, messageText, buttonText, ratingType } = props
-  const { updateCustomMessageJSON, sendInput } = useContext(WebchatContext)
+  const { payloads, messageText, buttonText, ratingType, id, valueSent } = props
+  const { updateCustomMessageProps, sendInput } = useContext(WebchatContext)
 
   const theme = useContext(ThemeContext)
   const color = theme?.brand?.color ?? ''
 
-  const [ratingValue, setRatingValue] = useState(
-    props.json?.valueSent ? props.json.valueSent : -1
-  )
+  const [ratingValue, setRatingValue] = useState(valueSent ? valueSent : -1)
   const [showRating, setShowRating] = useState(true)
 
   const ratingChanged = (newRating: number) => {
@@ -36,8 +34,8 @@ const CustomRatingMessage: React.FC<CustomRatingMessageProps> = props => {
   const handleButtonSend = () => {
     if (ratingValue === -1) return
 
-    if (props.json?.messageId) {
-      updateCustomMessageJSON(props.json.messageId, {
+    if (id) {
+      updateCustomMessageProps(id, {
         valueSent: ratingValue,
       })
     }
@@ -63,10 +61,10 @@ const CustomRatingMessage: React.FC<CustomRatingMessageProps> = props => {
           onRatingChange={ratingChanged}
           ratingValue={ratingValue}
           ratingType={ratingType}
-          valueSent={props.json?.valueSent}
+          valueSent={valueSent}
         />
       </MessageBubble>
-      {!props.json?.valueSent && showRating && (
+      {!props?.valueSent && showRating && (
         <Button
           autodisable={true}
           disabled={disabled}

packages/botonic-react/src/webchat/custom-messages/types.ts

@@ -86,7 +86,7 @@ const Webchat = forwardRef<WebchatRef | null, WebchatProps>((props, ref) => {
     toggleEmojiPicker,
     togglePersistentMenu,
     toggleWebchat,
-    updateCustomMessageJSON,
+    updateCustomMessageProps,
     updateDevSettings,
     updateHandoff,
     updateLastMessageDate,
@@ -651,7 +651,7 @@ const Webchat = forwardRef<WebchatRef | null, WebchatProps>((props, ref) => {
         toggleEmojiPicker,
         togglePersistentMenu,
         toggleCoverComponent,
-        updateCustomMessageJSON,
+        updateCustomMessageProps,
         updateLatestInput,
         updateMessage,
         updateReplies,