From b605362f09d0a59decbbf274537c1e5269fda615 Mon Sep 17 00:00:00 2001 From: Shivam Mishra Date: Wed, 21 Aug 2024 18:28:57 +0530 Subject: [PATCH] refactor: expose replaceRoute directly --- app/javascript/widget/App.vue | 22 +++++++--------- .../widget/components/ChatFooter.vue | 8 ++---- .../widget/components/ChatHeader.vue | 8 ++---- .../widget/components/PreChat/Form.vue | 5 ---- .../widget/composables/useReplaceRoute.js | 21 +++++++++++++++ .../widget/composables/useRouterHelper.js | 26 ------------------- .../mixins/specs/useRouterHelper.spec.js | 10 +++---- app/javascript/widget/views/Home.vue | 10 +++---- app/javascript/widget/views/PreChatForm.vue | 8 ++---- 9 files changed, 44 insertions(+), 74 deletions(-) create mode 100644 app/javascript/widget/composables/useReplaceRoute.js delete mode 100644 app/javascript/widget/composables/useRouterHelper.js diff --git a/app/javascript/widget/App.vue b/app/javascript/widget/App.vue index 892046f37..3acbe7c13 100755 --- a/app/javascript/widget/App.vue +++ b/app/javascript/widget/App.vue @@ -8,7 +8,7 @@ import availabilityMixin from 'widget/mixins/availability'; import { getLocale } from './helpers/urlParamsHelper'; import { isEmptyObject } from 'widget/helpers/utils'; import Spinner from 'shared/components/Spinner.vue'; -import { useRouterHelper } from 'widget/composables/useRouterHelper'; +import { useReplaceRoute } from 'widget/composables/useReplaceRoute'; import { getExtraSpaceToScroll, loadedEventConfig, @@ -28,10 +28,6 @@ export default { Spinner, }, mixins: [availabilityMixin, configMixin, darkModeMixin], - setup() { - const { replaceRoute } = useRouterHelper(); - return { replaceRoute }; - }, data() { return { isMobile: false, @@ -145,15 +141,15 @@ export default { this.setUnreadView(); }); emitter.on(ON_UNREAD_MESSAGE_CLICK, () => { - this.replaceRoute('messages').then(() => this.unsetUnreadView()); + useReplaceRoute('messages').then(() => this.unsetUnreadView()); }); }, registerCampaignEvents() { emitter.on(ON_CAMPAIGN_MESSAGE_CLICK, () => { if (this.shouldShowPreChatForm) { - this.replaceRoute('prechat-form'); + useReplaceRoute('prechat-form'); } else { - this.replaceRoute('messages'); + useReplaceRoute('messages'); emitter.emit('execute-campaign', { campaignId: this.activeCampaign.id, }); @@ -164,7 +160,7 @@ export default { const { customAttributes, campaignId } = campaignDetails; const { websiteToken } = window.chatwootWebChannel; this.executeCampaign({ campaignId, websiteToken, customAttributes }); - this.replaceRoute('messages'); + useReplaceRoute('messages'); }); emitter.on('snooze-campaigns', () => { const expireBy = addHours(new Date(), 1); @@ -180,7 +176,7 @@ export default { !messageCount && !shouldSnoozeCampaign; if (this.isIFrame && isCampaignReadyToExecute) { - this.replaceRoute('campaigns').then(() => { + useReplaceRoute('campaigns').then(() => { this.setIframeHeight(true); IFrameHelper.sendMessage({ event: 'setUnreadMode' }); }); @@ -195,7 +191,7 @@ export default { unreadMessageCount > 0 && !this.isWidgetOpen ) { - this.replaceRoute('unread-messages').then(() => { + useReplaceRoute('unread-messages').then(() => { this.setIframeHeight(true); IFrameHelper.sendMessage({ event: 'setUnreadMode' }); }); @@ -302,12 +298,12 @@ export default { ['unread-messages', 'campaigns'].includes(this.$route.name); if (shouldShowMessageView) { - this.replaceRoute('messages'); + useReplaceRoute('messages'); } if (shouldShowHomeView) { this.$store.dispatch('conversation/setUserLastSeen'); this.unsetUnreadView(); - this.replaceRoute('home'); + useReplaceRoute('home'); } if (!message.isOpen) { this.resetCampaign(); diff --git a/app/javascript/widget/components/ChatFooter.vue b/app/javascript/widget/components/ChatFooter.vue index 20401dbf8..419324b3a 100755 --- a/app/javascript/widget/components/ChatFooter.vue +++ b/app/javascript/widget/components/ChatFooter.vue @@ -6,7 +6,7 @@ import FooterReplyTo from 'widget/components/FooterReplyTo.vue'; import ChatInputWrap from 'widget/components/ChatInputWrap.vue'; import { BUS_EVENTS } from 'shared/constants/busEvents'; import { sendEmailTranscript } from 'widget/api/conversation'; -import { useRouterHelper } from 'widget/composables/useRouterHelper'; +import { useReplaceRoute } from 'widget/composables/useReplaceRoute'; import { IFrameHelper } from '../helpers/utils'; import { CHATWOOT_ON_START_CONVERSATION } from '../constants/sdkEvents'; @@ -16,10 +16,6 @@ export default { CustomButton, FooterReplyTo, }, - setup() { - const { replaceRoute } = useRouterHelper(); - return { replaceRoute }; - }, data() { return { inReplyTo: null, @@ -88,7 +84,7 @@ export default { startNewConversation() { this.clearConversations(); this.clearConversationAttributes(); - this.replaceRoute('prechat-form'); + useReplaceRoute('prechat-form'); IFrameHelper.sendMessage({ event: 'onEvent', eventIdentifier: CHATWOOT_ON_START_CONVERSATION, diff --git a/app/javascript/widget/components/ChatHeader.vue b/app/javascript/widget/components/ChatHeader.vue index 1bff57648..f2953652e 100644 --- a/app/javascript/widget/components/ChatHeader.vue +++ b/app/javascript/widget/components/ChatHeader.vue @@ -3,7 +3,7 @@ import availabilityMixin from 'widget/mixins/availability'; import nextAvailabilityTime from 'widget/mixins/nextAvailabilityTime'; import FluentIcon from 'shared/components/FluentIcon/Index.vue'; import HeaderActions from './HeaderActions.vue'; -import { useRouterHelper } from 'widget/composables/useRouterHelper'; +import { useReplaceRoute } from 'widget/composables/useReplaceRoute'; import darkMixin from 'widget/mixins/darkModeMixin.js'; export default { @@ -35,10 +35,6 @@ export default { default: () => {}, }, }, - setup() { - const { replaceRoute } = useRouterHelper(); - return { replaceRoute }; - }, computed: { isOnline() { const { workingHoursEnabled } = this.channelConfig; @@ -52,7 +48,7 @@ export default { }, methods: { onBackButtonClick() { - this.replaceRoute('home'); + useReplaceRoute('home'); }, }, }; diff --git a/app/javascript/widget/components/PreChat/Form.vue b/app/javascript/widget/components/PreChat/Form.vue index 3a0e5e6f4..ad8fbe8bf 100644 --- a/app/javascript/widget/components/PreChat/Form.vue +++ b/app/javascript/widget/components/PreChat/Form.vue @@ -6,7 +6,6 @@ import { getContrastingTextColor } from '@chatwoot/utils'; import { isEmptyObject } from 'widget/helpers/utils'; import { getRegexp } from 'shared/helpers/Validators'; import messageFormatterMixin from 'shared/mixins/messageFormatterMixin'; -import { useRouterHelper } from 'widget/composables/useRouterHelper'; import darkModeMixin from 'widget/mixins/darkModeMixin'; import configMixin from 'widget/mixins/configMixin'; @@ -22,10 +21,6 @@ export default { default: () => {}, }, }, - setup() { - const { replaceRoute } = useRouterHelper(); - return { replaceRoute }; - }, data() { return { locale: this.$root.$i18n.locale, diff --git a/app/javascript/widget/composables/useReplaceRoute.js b/app/javascript/widget/composables/useReplaceRoute.js new file mode 100644 index 000000000..1c1f58b7e --- /dev/null +++ b/app/javascript/widget/composables/useReplaceRoute.js @@ -0,0 +1,21 @@ +import { useRouter, useRoute } from 'dashboard/composables/route'; + +/** + * Composable for replacing the current route with a new one if it's different. + * @param {string} name - The name of the route to replace with. + * @param {Object} params - The params to pass to the new route. + * @returns {Promise|undefined} A promise that resolves when the navigation is complete, or undefined if no navigation occurs. + */ +export const useReplaceRoute = async (name, params = {}) => { + const router = useRouter(); + const route = useRoute(); + + return new Promise((resolve, reject) => { + if (route.name !== name) { + router.replace({ name, params }).then(resolve).catch(reject); + } + resolve(undefined); + }); +}; + +export default useReplaceRoute; diff --git a/app/javascript/widget/composables/useRouterHelper.js b/app/javascript/widget/composables/useRouterHelper.js deleted file mode 100644 index eaa2d0220..000000000 --- a/app/javascript/widget/composables/useRouterHelper.js +++ /dev/null @@ -1,26 +0,0 @@ -import { useRouter, useRoute } from 'dashboard/composables/route'; - -/** - * Composable for handling router-related operations. - * @returns {Object} An object containing methods for router manipulation. - */ -export function useRouterHelper() { - const router = useRouter(); - const route = useRoute(); - /** - * Replaces the current route with a new one if it's different. - * @param {string} name - The name of the route to replace with. - * @param {Object} params - The params to pass to the new route. - * @returns {Promise|undefined} A promise that resolves when the navigation is complete, or undefined if no navigation occurs. - */ - const replaceRoute = async (name, params = {}) => { - if (route.name !== name) { - return router.replace({ name, params }); - } - return undefined; - }; - - return { - replaceRoute, - }; -} diff --git a/app/javascript/widget/mixins/specs/useRouterHelper.spec.js b/app/javascript/widget/mixins/specs/useRouterHelper.spec.js index 6a2247f72..b206e1760 100644 --- a/app/javascript/widget/mixins/specs/useRouterHelper.spec.js +++ b/app/javascript/widget/mixins/specs/useRouterHelper.spec.js @@ -1,13 +1,13 @@ import { describe, it, expect, vi, beforeEach } from 'vitest'; -import { useRouterHelper } from '../../composables/useRouterHelper'; +import { useReplaceRoute } from '../../composables/useReplaceRoute'; const mockRouter = { currentRoute: { name: 'initialRoute' }, replace: vi.fn(), }; -vi.mock('../../composables/useRouterHelper', () => ({ - useRouterHelper: () => ({ +vi.mock('../../composables/useReplaceRoute', () => ({ + useReplaceRoute: () => ({ replaceRoute: async (name, params = {}) => { if (mockRouter.currentRoute.name !== name) { return mockRouter.replace({ name, params }); @@ -17,13 +17,13 @@ vi.mock('../../composables/useRouterHelper', () => ({ }), })); -describe('useRouterHelper', () => { +describe('useReplaceRoute', () => { let routerHelper; beforeEach(() => { vi.resetAllMocks(); mockRouter.currentRoute = { name: 'initialRoute' }; - routerHelper = useRouterHelper(); + routerHelper = useReplaceRoute(); }); describe('replaceRoute', () => { diff --git a/app/javascript/widget/views/Home.vue b/app/javascript/widget/views/Home.vue index 60e4449cc..02fed6d43 100755 --- a/app/javascript/widget/views/Home.vue +++ b/app/javascript/widget/views/Home.vue @@ -5,7 +5,7 @@ import ArticleCardSkeletonLoader from 'widget/components/ArticleCardSkeletonLoad import { mapGetters } from 'vuex'; import darkModeMixin from 'widget/mixins/darkModeMixin'; -import { useRouterHelper } from 'widget/composables/useRouterHelper'; +import { useReplaceRoute } from 'widget/composables/useReplaceRoute'; import configMixin from 'widget/mixins/configMixin'; export default { @@ -16,10 +16,6 @@ export default { ArticleCardSkeletonLoader, }, mixins: [configMixin, darkModeMixin], - setup() { - const { replaceRoute } = useRouterHelper(); - return { replaceRoute }; - }, computed: { ...mapGetters({ availableAgents: 'agent/availableAgents', @@ -67,9 +63,9 @@ export default { methods: { startConversation() { if (this.preChatFormEnabled && !this.conversationSize) { - return this.replaceRoute('prechat-form'); + return useReplaceRoute('prechat-form'); } - return this.replaceRoute('messages'); + return useReplaceRoute('messages'); }, openArticleInArticleViewer(link) { let linkToOpen = `${link}?show_plain_layout=true`; diff --git a/app/javascript/widget/views/PreChatForm.vue b/app/javascript/widget/views/PreChatForm.vue index 43417e8c3..4a00cc61a 100644 --- a/app/javascript/widget/views/PreChatForm.vue +++ b/app/javascript/widget/views/PreChatForm.vue @@ -1,7 +1,7 @@