chore: Replace portalMixin with usePortal composable

2024-08-21 09:09:13 +05:30
parent a92d7fd7d5
commit 72a17409f3
9 changed files with 142 additions and 17 deletions
@@ -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);
@@ -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: '',
@@ -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',
@@ -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 });
@@ -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,
@@ -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);
+  });
+});
@@ -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 };
+};
@@ -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,
@@ -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: '',