From 72a17409f310c46c1a78f0bde6e5d7a3e4729566 Mon Sep 17 00:00:00 2001
From: Fayaz Ahmed <fayazara@gmail.com>
Date: Wed, 21 Aug 2024 09:09:13 +0530
Subject: [PATCH] chore: Replace portalMixin with usePortal composable

---
 .../helpcenter/components/ArticleItem.vue     |  8 ++-
 .../ArticleSearch/SearchPopover.vue           |  7 ++-
 .../components/HelpCenterLayout.vue           |  6 +-
 .../components/PortalListItemTable.vue        |  8 ++-
 .../helpcenter/components/PortalSwitch.vue    |  7 ++-
 .../composables/specs/usePortal.spec.js       | 56 +++++++++++++++++++
 .../helpcenter/composables/usePortal.js       | 53 ++++++++++++++++++
 .../helpcenter/pages/articles/EditArticle.vue |  7 ++-
 .../helpcenter/pages/articles/NewArticle.vue  |  7 ++-
 9 files changed, 142 insertions(+), 17 deletions(-)
 create mode 100644 app/javascript/dashboard/routes/dashboard/helpcenter/composables/specs/usePortal.spec.js
 create mode 100644 app/javascript/dashboard/routes/dashboard/helpcenter/composables/usePortal.js

diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleItem.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleItem.vue
index 18281aec3..e5770a398 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleItem.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleItem.vue
@@ -1,6 +1,6 @@
 <script>
 import { dynamicTime } from 'shared/helpers/timeHelper';
-import portalMixin from '../mixins/portalMixin';
+import { usePortal } from '../composables/usePortal';
 import { frontendURL } from 'dashboard/helper/URLHelper';
 import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
 
@@ -8,7 +8,6 @@ export default {
   components: {
     Thumbnail,
   },
-  mixins: [portalMixin],
   props: {
     showDragIcon: {
       type: Boolean,
@@ -44,7 +43,10 @@ export default {
       default: 0,
     },
   },
-
+  setup() {
+    const { accountId, portalSlug, locale, localeName } = usePortal();
+    return { accountId, portalSlug, locale, localeName };
+  },
   computed: {
     lastUpdatedAt() {
       return dynamicTime(this.updatedAt);
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleSearch/SearchPopover.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleSearch/SearchPopover.vue
index 8e9b16ac4..71739c22b 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleSearch/SearchPopover.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleSearch/SearchPopover.vue
@@ -7,7 +7,7 @@ import SearchResults from './SearchResults.vue';
 import ArticleView from './ArticleView.vue';
 import ArticlesAPI from 'dashboard/api/helpCenter/articles';
 import { buildPortalArticleURL } from 'dashboard/helper/portalHelper';
-import portalMixin from '../../mixins/portalMixin';
+import { usePortal } from '../../composables/usePortal';
 
 export default {
   name: 'ArticleSearchPopover',
@@ -16,13 +16,16 @@ export default {
     SearchResults,
     ArticleView,
   },
-  mixins: [portalMixin],
   props: {
     selectedPortalSlug: {
       type: String,
       required: true,
     },
   },
+  setup() {
+    const { localeName } = usePortal();
+    return { localeName };
+  },
   data() {
     return {
       searchQuery: '',
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/components/HelpCenterLayout.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/components/HelpCenterLayout.vue
index 5c204fe4c..f8a875014 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/HelpCenterLayout.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/components/HelpCenterLayout.vue
@@ -10,7 +10,7 @@ import WootKeyShortcutModal from 'dashboard/components/widgets/modal/WootKeyShor
 import AccountSelector from 'dashboard/components/layout/sidebarComponents/AccountSelector.vue';
 import NotificationPanel from 'dashboard/routes/dashboard/notifications/components/NotificationPanel.vue';
 import { useUISettings } from 'dashboard/composables/useUISettings';
-import portalMixin from '../mixins/portalMixin';
+import { usePortal } from '../composables/usePortal';
 import AddCategory from '../pages/categories/AddCategory.vue';
 import { FEATURE_FLAGS } from 'dashboard/featureFlags';
 const CommandBar = () =>
@@ -28,13 +28,14 @@ export default {
     UpgradePage,
     WootKeyShortcutModal,
   },
-  mixins: [portalMixin],
   setup() {
     const { uiSettings, updateUISettings } = useUISettings();
+    const { accountId } = usePortal();
 
     return {
       uiSettings,
       updateUISettings,
+      accountId,
     };
   },
   data() {
@@ -51,7 +52,6 @@ export default {
 
   computed: {
     ...mapGetters({
-      accountId: 'getCurrentAccountId',
       portals: 'portals/allPortals',
       categories: 'categories/allCategories',
       meta: 'portals/getMeta',
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalListItemTable.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalListItemTable.vue
index bf3e08c6f..e04410760 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalListItemTable.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalListItemTable.vue
@@ -1,7 +1,6 @@
 <script>
-import portalMixin from '../mixins/portalMixin';
+import { usePortal } from '../composables/usePortal';
 export default {
-  mixins: [portalMixin],
   props: {
     locales: {
       type: Array,
@@ -12,7 +11,10 @@ export default {
       default: '',
     },
   },
-
+  setup() {
+    const { localeName } = usePortal();
+    return { localeName };
+  },
   methods: {
     changeDefaultLocale(localeCode) {
       this.$emit('changeDefaultLocale', { localeCode });
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalSwitch.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalSwitch.vue
index 886c06200..fd7c0c50b 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalSwitch.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalSwitch.vue
@@ -1,12 +1,11 @@
 <script>
 import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
-import portalMixin from '../mixins/portalMixin';
+import { usePortal } from '../composables/usePortal';
 
 export default {
   components: {
     Thumbnail,
   },
-  mixins: [portalMixin],
   props: {
     portal: {
       type: Object,
@@ -25,6 +24,10 @@ export default {
       default: '',
     },
   },
+  setup() {
+    const { localeName } = usePortal();
+    return { localeName };
+  },
   data() {
     return {
       selectedLocale: null,
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/composables/specs/usePortal.spec.js b/app/javascript/dashboard/routes/dashboard/helpcenter/composables/specs/usePortal.spec.js
new file mode 100644
index 000000000..250b8757f
--- /dev/null
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/composables/specs/usePortal.spec.js
@@ -0,0 +1,56 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { usePortal } from '../usePortal';
+import { useMapGetter } from 'dashboard/composables/store';
+import { frontendURL } from 'dashboard/helper/URLHelper';
+import allLocales from 'shared/constants/locales.js';
+
+vi.mock('dashboard/composables/store', () => ({
+  useMapGetter: vi.fn(),
+}));
+
+vi.mock('dashboard/helper/URLHelper', () => ({
+  frontendURL: vi.fn(),
+}));
+
+describe('usePortal', () => {
+  beforeEach(() => {
+    vi.resetAllMocks();
+
+    useMapGetter
+      .mockReturnValueOnce('1')
+      .mockReturnValueOnce('test-portal')
+      .mockReturnValueOnce('en');
+
+    frontendURL.mockImplementation(url => `/app/${url}`);
+  });
+
+  it('returns accountId', () => {
+    const { accountId } = usePortal();
+    expect(accountId.value).toBe('1');
+  });
+
+  it('returns portalSlug', () => {
+    const { portalSlug } = usePortal();
+    expect(portalSlug.value).toBe('test-portal');
+  });
+
+  it('returns locale', () => {
+    const { locale } = usePortal();
+    expect(locale.value).toBe('en');
+  });
+
+  it('generates correct articleUrl', () => {
+    const { articleUrl } = usePortal();
+    const url = articleUrl(123);
+    expect(url).toBe('/app/accounts/1/portals/test-portal/en/articles/123');
+    expect(frontendURL).toHaveBeenCalledWith(
+      'accounts/1/portals/test-portal/en/articles/123'
+    );
+  });
+
+  it('returns correct localeName', () => {
+    const { localeName } = usePortal();
+    expect(localeName('es')).toBe(allLocales.es);
+    expect(localeName('fr')).toBe(allLocales.fr);
+  });
+});
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/composables/usePortal.js b/app/javascript/dashboard/routes/dashboard/helpcenter/composables/usePortal.js
new file mode 100644
index 000000000..026417aa1
--- /dev/null
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/composables/usePortal.js
@@ -0,0 +1,53 @@
+import { frontendURL } from 'dashboard/helper/URLHelper';
+import allLocales from 'shared/constants/locales.js';
+import { useMapGetter } from 'dashboard/composables/store';
+import { computed } from 'vue';
+
+/**
+ * COmposable to work with portal-related data and URLs.
+ *
+ * @returns {Object} The portal-related data and utilities.
+ */
+export const usePortal = () => {
+  /**
+   * Gets the current account ID.
+   * @type {number}
+   */
+  const accountId = useMapGetter('getCurrentAccountId');
+
+  /**
+   * Computes the current portal slug.
+   * @type {import('vue').ComputedRef<string>}
+   */
+  const portalSlug = computed(() => useMapGetter('getCurrentPortalSlug'));
+
+  /**
+   * Computes the current locale.
+   * @type {import('vue').ComputedRef<string>}
+   */
+  const locale = computed(() => useMapGetter('getCurrentLocale'));
+
+  /**
+   * Generates the URL for an article based on the account ID, portal slug, and locale.
+   *
+   * @param {number|string} id - The ID of the article.
+   * @returns {string} The URL of the article.
+   */
+  const articleUrl = id => {
+    return frontendURL(
+      `accounts/${accountId.value}/portals/${portalSlug.value}/${locale.value}/articles/${id}`
+    );
+  };
+
+  /**
+   * Retrieves the locale name using the locale code.
+   *
+   * @param {string} code - The locale code.
+   * @returns {string} The locale name.
+   */
+  const localeName = code => {
+    return allLocales[code];
+  };
+
+  return { accountId, portalSlug, locale, articleUrl, localeName };
+};
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/articles/EditArticle.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/articles/EditArticle.vue
index 5fe13feb5..0780c4d53 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/articles/EditArticle.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/articles/EditArticle.vue
@@ -5,7 +5,7 @@ import EditArticleHeader from '../../components/Header/EditArticleHeader.vue';
 import ArticleEditor from '../../components/ArticleEditor.vue';
 import ArticleSettings from './ArticleSettings.vue';
 import Spinner from 'shared/components/Spinner.vue';
-import portalMixin from '../../mixins/portalMixin';
+import { usePortal } from '../../composables/usePortal';
 import wootConstants from 'dashboard/constants/globals';
 import { buildPortalArticleURL } from 'dashboard/helper/portalHelper';
 import { PORTALS_EVENTS } from '../../../../../helper/AnalyticsHelper/events';
@@ -18,7 +18,10 @@ export default {
     Spinner,
     ArticleSettings,
   },
-  mixins: [portalMixin],
+  setup() {
+    const { locale } = usePortal();
+    return { locale };
+  },
   data() {
     return {
       isUpdating: false,
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/articles/NewArticle.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/articles/NewArticle.vue
index f2e3924a5..897e589a5 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/articles/NewArticle.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/articles/NewArticle.vue
@@ -3,7 +3,7 @@ import { mapGetters } from 'vuex';
 import { useAlert } from 'dashboard/composables';
 import EditArticleHeader from 'dashboard/routes/dashboard/helpcenter/components/Header/EditArticleHeader.vue';
 import ArticleEditor from '../../components/ArticleEditor.vue';
-import portalMixin from '../../mixins/portalMixin';
+import { usePortal } from '../../composables/usePortal';
 import ArticleSettings from './ArticleSettings.vue';
 import { PORTALS_EVENTS } from '../../../../../helper/AnalyticsHelper/events';
 export default {
@@ -12,7 +12,10 @@ export default {
     ArticleEditor,
     ArticleSettings,
   },
-  mixins: [portalMixin],
+  setup() {
+    const { locale } = usePortal();
+    return { locale };
+  },
   data() {
     return {
       articleTitle: '',