From 490fc4eaba1a1bb490d2c475adfd697fec61c5a0 Mon Sep 17 00:00:00 2001
From: Shivam Mishra <scm.mymail@gmail.com>
Date: Fri, 4 Oct 2024 20:40:27 +0530
Subject: [PATCH] fix: Remove the usage of asyncComponent in emoji picker
 (#10232)

This PR has the following fixes

1. preview of article inside the iframe, earlier this didn't work because the iframe didn't get the URL correctly. We fix that by passing the URL is a query instead
2. Emoji picker caused a weird redirect, this was only happening when the chunk was loaded async, this PR changes it to use regular loading instead
---
 app/javascript/widget/components/ChatInputWrap.vue | 5 +----
 app/javascript/widget/router.js                    | 1 -
 app/javascript/widget/views/ArticleViewer.vue      | 8 +-------
 app/javascript/widget/views/Home.vue               | 2 +-
 4 files changed, 3 insertions(+), 13 deletions(-)

diff --git a/app/javascript/widget/components/ChatInputWrap.vue b/app/javascript/widget/components/ChatInputWrap.vue
index 0ff4f09e5..32b2bb72a 100755
--- a/app/javascript/widget/components/ChatInputWrap.vue
+++ b/app/javascript/widget/components/ChatInputWrap.vue
@@ -1,5 +1,4 @@
 <script>
-import { defineAsyncComponent } from 'vue';
 import { mapGetters } from 'vuex';
 
 import ChatAttachmentButton from 'widget/components/ChatAttachment.vue';
@@ -9,9 +8,7 @@ import FluentIcon from 'shared/components/FluentIcon/Index.vue';
 import ResizableTextArea from 'shared/components/ResizableTextArea.vue';
 import { useDarkMode } from 'widget/composables/useDarkMode';
 
-const EmojiInput = defineAsyncComponent(
-  () => import('shared/components/emoji/EmojiInput.vue')
-);
+import EmojiInput from 'shared/components/emoji/EmojiInput.vue';
 
 export default {
   name: 'ChatInputWrap',
diff --git a/app/javascript/widget/router.js b/app/javascript/widget/router.js
index 34b526312..418fd9ae6 100755
--- a/app/javascript/widget/router.js
+++ b/app/javascript/widget/router.js
@@ -36,7 +36,6 @@ export default createRouter({
         {
           path: '/article',
           name: 'article-viewer',
-          props: true,
           component: () => import('./views/ArticleViewer.vue'),
         },
       ],
diff --git a/app/javascript/widget/views/ArticleViewer.vue b/app/javascript/widget/views/ArticleViewer.vue
index c9525a706..9289d0546 100644
--- a/app/javascript/widget/views/ArticleViewer.vue
+++ b/app/javascript/widget/views/ArticleViewer.vue
@@ -6,17 +6,11 @@ export default {
   components: {
     IframeLoader,
   },
-  props: {
-    link: {
-      type: String,
-      default: '',
-    },
-  },
 };
 </script>
 
 <template>
   <div class="bg-white h-full">
-    <IframeLoader :url="link" />
+    <IframeLoader :url="$route.query.link" />
   </div>
 </template>
diff --git a/app/javascript/widget/views/Home.vue b/app/javascript/widget/views/Home.vue
index c10521a18..c2a3990a2 100755
--- a/app/javascript/widget/views/Home.vue
+++ b/app/javascript/widget/views/Home.vue
@@ -79,7 +79,7 @@ export default {
       }
       this.$router.push({
         name: 'article-viewer',
-        params: { link: linkToOpen },
+        query: { link: linkToOpen },
       });
     },
     viewAllArticles() {