From 1983638115e9234542b724263428f07431882474 Mon Sep 17 00:00:00 2001 From: Marc Rabat Date: Wed, 22 Dec 2021 13:04:22 +0100 Subject: [PATCH] refactor(react): rename names to not be only bind to imagePreviewer and to be generic --- packages/botonic-react/src/index.d.ts | 4 ++-- packages/botonic-react/src/webchat-app.jsx | 8 +++---- .../botonic-react/src/webchat/actions.jsx | 2 +- packages/botonic-react/src/webchat/hooks.js | 12 +++++----- .../src/webchat/webchat-reducer.js | 6 ++--- .../botonic-react/src/webchat/webchat.jsx | 24 +++++++++---------- 6 files changed, 28 insertions(+), 28 deletions(-) diff --git a/packages/botonic-react/src/index.d.ts b/packages/botonic-react/src/index.d.ts index 51a6cbfa3b..f23503f9ce 100644 --- a/packages/botonic-react/src/index.d.ts +++ b/packages/botonic-react/src/index.d.ts @@ -204,8 +204,8 @@ export class WebchatApp { updateLastMessageDate(date: string): void updateUser(user: core.SessionUser): void updateWebchatSettings(settings: WebchatSettingsProps): void - openImagePreviewer(customContent: React.ReactNode): void - closeImagePreviewer(): void + renderCustomComponent(customComponent: React.ReactNode): void + unmountCustomComponent(): void } export interface WebchatContextProps { diff --git a/packages/botonic-react/src/webchat-app.jsx b/packages/botonic-react/src/webchat-app.jsx index 51b93d7e85..3ec0a13b57 100644 --- a/packages/botonic-react/src/webchat-app.jsx +++ b/packages/botonic-react/src/webchat-app.jsx @@ -211,12 +211,12 @@ export class WebchatApp { this.webchatRef.current.closeCoverComponent() } - openImagePreviewer(imagePreviewerContent) { - this.webchatRef.current.openImagePreviewer(imagePreviewerContent) + renderCustomComponent(_customComponent) { + this.webchatRef.current.renderCustomComponent(_customComponent) } - closeImagePreviewer() { - this.webchatRef.current.closeImagePreviewer() + unmountCustomComponent() { + this.webchatRef.current.unmountCustomComponent() } toggleCoverComponent() { diff --git a/packages/botonic-react/src/webchat/actions.jsx b/packages/botonic-react/src/webchat/actions.jsx index e7df7010b2..d6eea199b5 100644 --- a/packages/botonic-react/src/webchat/actions.jsx +++ b/packages/botonic-react/src/webchat/actions.jsx @@ -14,7 +14,7 @@ export const TOGGLE_WEBCHAT = 'toggleWebchat' export const TOGGLE_EMOJI_PICKER = 'toggleEmojiPicker' export const TOGGLE_PERSISTENT_MENU = 'togglePersistentMenu' export const TOGGLE_COVER_COMPONENT = 'toggleCoverComponent' -export const TOGGLE_IMAGE_PREVIEWER = 'toggleImagePreviewer' +export const DO_RENDER_CUSTOM_COMPONENT = 'doRenderCustomComponent' export const SET_ERROR = 'setError' export const CLEAR_MESSAGES = 'clearMessages' export const UPDATE_LAST_MESSAGE_DATE = 'updateLastMessageDate' diff --git a/packages/botonic-react/src/webchat/hooks.js b/packages/botonic-react/src/webchat/hooks.js index 18bc5ad454..83abbdea4f 100644 --- a/packages/botonic-react/src/webchat/hooks.js +++ b/packages/botonic-react/src/webchat/hooks.js @@ -6,12 +6,12 @@ import { ADD_MESSAGE, ADD_MESSAGE_COMPONENT, CLEAR_MESSAGES, + DO_RENDER_CUSTOM_COMPONENT, SET_CURRENT_ATTACHMENT, SET_ERROR, SET_ONLINE, TOGGLE_COVER_COMPONENT, TOGGLE_EMOJI_PICKER, - TOGGLE_IMAGE_PREVIEWER, TOGGLE_PERSISTENT_MENU, TOGGLE_WEBCHAT, UPDATE_DEV_SETTINGS, @@ -60,7 +60,7 @@ export const webchatInitialState = { isEmojiPickerOpen: false, isPersistentMenuOpen: false, isCoverComponentOpen: false, - isImagePreviewerOpened: false, + isCustomComponentRendered: false, lastMessageUpdate: undefined, currentAttachment: undefined, jwt: null, @@ -139,9 +139,9 @@ export function useWebchat() { type: TOGGLE_COVER_COMPONENT, payload: toggle, }) - const toggleImagePreviewer = toggle => + const doRenderCustomComponent = toggle => webchatDispatch({ - type: TOGGLE_IMAGE_PREVIEWER, + type: DO_RENDER_CUSTOM_COMPONENT, payload: toggle, }) const setError = error => @@ -199,7 +199,7 @@ export function useWebchat() { toggleEmojiPicker, togglePersistentMenu, toggleCoverComponent, - toggleImagePreviewer, + doRenderCustomComponent, setError, setOnline, clearMessages, @@ -227,7 +227,7 @@ export function useTyping({ webchatState, updateTyping, updateMessage, host }) { updateMessage({ ...nextMsg, display: true }) updateTyping(false) }, totalDelay * 1000) - } catch (e) { } + } catch (e) {} return () => { clearTimeout(delayTimeout) clearTimeout(typingTimeout) diff --git a/packages/botonic-react/src/webchat/webchat-reducer.js b/packages/botonic-react/src/webchat/webchat-reducer.js index 5443bf1d76..d812d90a78 100644 --- a/packages/botonic-react/src/webchat/webchat-reducer.js +++ b/packages/botonic-react/src/webchat/webchat-reducer.js @@ -1,10 +1,10 @@ import { + DO_RENDER_CUSTOM_COMPONENT, SET_CURRENT_ATTACHMENT, SET_ERROR, SET_ONLINE, TOGGLE_COVER_COMPONENT, TOGGLE_EMOJI_PICKER, - TOGGLE_IMAGE_PREVIEWER, TOGGLE_PERSISTENT_MENU, TOGGLE_WEBCHAT, UPDATE_DEV_SETTINGS, @@ -43,8 +43,8 @@ export function webchatReducer(state, action) { return { ...state, isPersistentMenuOpen: action.payload } case TOGGLE_COVER_COMPONENT: return { ...state, isCoverComponentOpen: action.payload } - case TOGGLE_IMAGE_PREVIEWER: - return { ...state, isImagePreviewerOpened: action.payload } + case DO_RENDER_CUSTOM_COMPONENT: + return { ...state, isCustomComponentRendered: action.payload } case SET_ERROR: return { ...state, error: action.payload || {} } case SET_ONLINE: diff --git a/packages/botonic-react/src/webchat/webchat.jsx b/packages/botonic-react/src/webchat/webchat.jsx index 227c5c938a..7f70d66464 100644 --- a/packages/botonic-react/src/webchat/webchat.jsx +++ b/packages/botonic-react/src/webchat/webchat.jsx @@ -184,7 +184,7 @@ export const Webchat = forwardRef((props, ref) => { toggleEmojiPicker, togglePersistentMenu, toggleCoverComponent, - toggleImagePreviewer, + doRenderCustomComponent, setError, setOnline, clearMessages, @@ -201,7 +201,7 @@ export const Webchat = forwardRef((props, ref) => { const { initialSession, initialDevSettings, onStateChange } = props const getThemeProperty = _getThemeProperty(theme) - const [imagePreviewerComponent, setImagePreviewerComponent] = useState(null) + const [customComponent, setCustomComponent] = useState(null) const storage = props.storage === undefined ? localStorage : props.storage const storageKey = typeof props.storageKey === 'function' @@ -562,11 +562,11 @@ export const Webchat = forwardRef((props, ref) => { toggleWebchat: () => toggleWebchat(!webchatState.isWebchatOpen), openCoverComponent: () => toggleCoverComponent(true), closeCoverComponent: () => toggleCoverComponent(false), - openImagePreviewer: imagePreviewerContent => { - setImagePreviewerComponent(imagePreviewerContent) - toggleImagePreviewer(true) + renderCustomComponent: _customComponent => { + setCustomComponent(_customComponent) + doRenderCustomComponent(true) }, - closeImagePreviewer: () => toggleImagePreviewer(false), + unmountCustomComponent: () => doRenderCustomComponent(false), toggleCoverComponent: () => toggleCoverComponent(!webchatState.isCoverComponentOpen), openWebviewApi: component => openWebviewT(component), @@ -894,9 +894,9 @@ export const Webchat = forwardRef((props, ref) => { ) } - const imagePreviewer = () => { - if (!imagePreviewerComponent) return <> - else return imagePreviewerComponent + const _renderCustomComponent = () => { + if (!customComponent) return <> + else return customComponent } const WebchatComponent = ( @@ -953,9 +953,6 @@ export const Webchat = forwardRef((props, ref) => { )} {webchatMessageList()} - {webchatState.isImagePreviewerOpened && - imagePreviewerComponent && - imagePreviewer()} {webchatState.replies && Object.keys(webchatState.replies).length > 0 && webchatReplies()} @@ -965,6 +962,9 @@ export const Webchat = forwardRef((props, ref) => { {!webchatState.handoff && userInputArea()} {webchatState.webview && webchatWebview()} {webchatState.isCoverComponentOpen && coverComponent()} + {webchatState.isCustomComponentRendered && + customComponent && + _renderCustomComponent()} )}