Review fixes

app/javascript/dashboard/composables/spec/usePortal.spec.js

@@ -0,0 +1,68 @@
+import { describe, it, expect, vi } from 'vitest';
+import { usePortal } from '../usePortal';
+import { useAccount } from 'dashboard/composables/useAccount';
+import { useRoute } from 'dashboard/composables/route';
+import { frontendURL } from 'dashboard/helper/URLHelper';
+import allLocales from 'shared/constants/locales.js';
+
+vi.mock('dashboard/composables/useAccount');
+vi.mock('dashboard/composables/route');
+vi.mock('dashboard/helper/URLHelper');
+
+describe('usePortal', () => {
+  beforeEach(() => {
+    vi.mocked(useAccount).mockReturnValue({ accountId: { value: 123 } });
+  });
+
+  it('returns the correct properties', () => {
+    vi.mocked(useRoute).mockReturnValue({
+      params: { portalSlug: 'test-portal', locale: 'en' },
+    });
+
+    const portal = usePortal();
+
+    expect(portal).toHaveProperty('accountId');
+    expect(portal).toHaveProperty('portalSlug');
+    expect(portal).toHaveProperty('locale');
+    expect(portal).toHaveProperty('articleUrl');
+    expect(portal).toHaveProperty('localeName');
+  });
+
+  it('computes portalSlug and locale correctly', () => {
+    vi.mocked(useRoute).mockReturnValue({
+      params: { portalSlug: 'test-portal', locale: 'fr' },
+    });
+
+    const { portalSlug, locale } = usePortal();
+
+    expect(portalSlug.value).toBe('test-portal');
+    expect(locale.value).toBe('fr');
+  });
+
+  it('generates correct article URL', () => {
+    vi.mocked(useAccount).mockReturnValue({ accountId: { value: 456 } });
+    vi.mocked(useRoute).mockReturnValue({
+      params: { portalSlug: 'help-center', locale: 'es' },
+    });
+    vi.mocked(frontendURL).mockReturnValue('https://example.com/article');
+
+    const { articleUrl } = usePortal();
+    const url = articleUrl(789);
+
+    expect(frontendURL).toHaveBeenCalledWith(
+      'accounts/456/portals/help-center/es/articles/789'
+    );
+    expect(url).toBe('https://example.com/article');
+  });
+
+  it('returns correct locale name', () => {
+    vi.mocked(useRoute).mockReturnValue({
+      params: { portalSlug: 'test-portal', locale: 'ja' },
+    });
+
+    const { localeName } = usePortal();
+    const name = localeName('ja');
+
+    expect(name).toBe(allLocales.ja);
+  });
+});

app/javascript/dashboard/composables/usePortal.js

@@ -0,0 +1,53 @@
+import { useAccount } from 'dashboard/composables/useAccount';
+import { frontendURL } from 'dashboard/helper/URLHelper';
+import allLocales from 'shared/constants/locales.js';
+import { useRoute } from 'dashboard/composables/route';
+import { computed } from 'vue';
+
+/**
+ * @typedef {Object} PortalComposable
+ * @property {import('vue').ComputedRef<number>} accountId - The current account ID.
+ * @property {import('vue').ComputedRef<string>} portalSlug - The slug of the current portal.
+ * @property {import('vue').ComputedRef<string>} locale - The current locale code.
+ * @property {function(number): string} articleUrl - A function to generate the URL for an article.
+ * @property {function(string): string} localeName - A function to get the localized name of a locale.
+ */
+
+/**
+ * A composable for managing portal-related data and utilities.
+ * @returns {PortalComposable} An object containing portal-related properties and functions.
+ */
+export const usePortal = () => {
+  const { accountId } = useAccount();
+  const route = useRoute();
+  const portalSlug = computed(() => route.params.portalSlug);
+  const locale = computed(() => route.params.locale);
+
+  /**
+   * Generates the URL for an article.
+   * @param {number} id - The ID of the article.
+   * @returns {string} The full URL for the article.
+   */
+  const articleUrl = id => {
+    return frontendURL(
+      `accounts/${accountId.value}/portals/${portalSlug.value}/${locale.value}/articles/${id}`
+    );
+  };
+
+  /**
+   * Gets the localized name of a locale.
+   * @param {string} code - The locale code.
+   * @returns {string} The localized name of the locale.
+   */
+  const localeName = code => {
+    return allLocales[code];
+  };
+
+  return {
+    accountId,
+    portalSlug,
+    locale,
+    articleUrl,
+    localeName,
+  };
+};