refactor: ADR refactor (WIP)

src/taxonomy/api/hooks/api.js

@@ -9,10 +9,6 @@ const getExportTaxonomyApiUrl = (pk, format) => new URL(
   `api/content_tagging/v1/taxonomies/${pk}/export/?output_format=${format}&download=1`,
   getApiBaseUrl(),
 ).href;
-const getTaxonomyDetailApiUrl = (taxonomyId) => new URL(
-  `api/content_tagging/v1/taxonomies/${taxonomyId}/`,
-  getApiBaseUrl(),
-).href;
 const getTagListApiUrl = (taxonomyId, page) => new URL(
   `api/content_tagging/v1/taxonomies/${taxonomyId}/tags/?page=${page + 1}`,
   getApiBaseUrl(),
@@ -33,19 +29,6 @@ export const exportTaxonomy = (pk, format) => {
   window.location.href = getExportTaxonomyApiUrl(pk, format);
 };
 
-/**
- * @param {number} taxonomyId
- * @returns {import('@tanstack/react-query').UseQueryResult<import('../types.mjs').TaxonomyData>}
- */
-export const useTaxonomyDetailData = (taxonomyId) => (
-  useQuery({
-    queryKey: ['taxonomyDetail', taxonomyId],
-    queryFn: () => getAuthenticatedHttpClient().get(getTaxonomyDetailApiUrl(taxonomyId))
-      .then(camelCaseObject)
-      .then((response) => response.data),
-  })
-);
-
 /**
  * @param {number} taxonomyId
  * @param {import('../types.mjs').QueryOptions} options

src/taxonomy/api/hooks/selectors.js

@@ -1,6 +1,5 @@
 // @ts-check
 import {
-  useTaxonomyDetailData,
   useTaxonomyListData,
   useTagListData,
   exportTaxonomy,
@@ -28,38 +27,6 @@ export const callExportTaxonomy = (pk, format) => (
   exportTaxonomy(pk, format)
 );
 
-/**
- * @param {number} taxonomyId
- * @returns {Pick<import('@tanstack/react-query').UseQueryResult, "error" | "isError" | "isFetched" | "isSuccess">}
- */
-export const useTaxonomyDetailDataStatus = (taxonomyId) => {
-  const {
-    isError,
-    error,
-    isFetched,
-    isSuccess,
-  } = useTaxonomyDetailData(taxonomyId);
-  return {
-    isError,
-    error,
-    isFetched,
-    isSuccess,
-  };
-};
-
-/**
- * @param {number} taxonomyId
- * @returns {import("../types.mjs").TaxonomyData | undefined}
- */
-export const useTaxonomyDetailDataResponse = (taxonomyId) => {
-  const { isSuccess, data } = useTaxonomyDetailData(taxonomyId);
-  if (isSuccess) {
-    return data;
-  }
-
-  return undefined;
-};
-
 /* eslint-disable max-len */
 /**
  * @param {number} taxonomyId

src/taxonomy/api/hooks/selectors.test.js

@@ -1,16 +1,13 @@
 import {
   useTaxonomyListDataResponse,
   useIsTaxonomyListDataLoaded,
-  useTaxonomyDetailDataStatus,
-  useTaxonomyDetailDataResponse,
   useTagListDataStatus,
   useTagListDataResponse,
   callExportTaxonomy,
 } from './selectors';
 import {
   useTaxonomyListData,
   exportTaxonomy,
-  useTaxonomyDetailData,
   useTagListData,
 } from './api';
 
@@ -66,41 +63,6 @@ describe('callExportTaxonomy', () => {
   });
 });
 
-describe('useTaxonomyDetailDataStatus', () => {
-  it('should return status values', () => {
-    const status = {
-      isError: false,
-      error: undefined,
-      isFetched: true,
-      isSuccess: true,
-    };
-
-    useTaxonomyDetailData.mockReturnValueOnce(status);
-
-    const result = useTaxonomyDetailDataStatus(0);
-
-    expect(result).toEqual(status);
-  });
-});
-
-describe('useTaxonomyDetailDataResponse', () => {
-  it('should return data when status is success', () => {
-    useTaxonomyDetailData.mockReturnValueOnce({ isSuccess: true, data: 'data' });
-
-    const result = useTaxonomyDetailDataResponse();
-
-    expect(result).toEqual('data');
-  });
-
-  it('should return undefined when status is not success', () => {
-    useTaxonomyDetailData.mockReturnValueOnce({ isSuccess: false });
-
-    const result = useTaxonomyDetailDataResponse();
-
-    expect(result).toBeUndefined();
-  });
-});
-
 describe('useTagListDataStatus', () => {
   it('should return status values', () => {
     const status = {

src/taxonomy/messages.js

@@ -69,18 +69,6 @@ const messages = defineMessages({
     id: 'course-authoring.taxonomy-list.modal.cancel',
     defaultMessage: 'Cancel',
   },
-  taxonomyDetailsHeader: {
-    id: 'course-authoring.taxonomy-detail.side-card.header',
-    defaultMessage: 'Taxonomy details',
-  },
-  taxonomyDetailsName: {
-    id: 'course-authoring.taxonomy-detail.side-card.name',
-    defaultMessage: 'Title',
-  },
-  taxonomyDetailsDescription: {
-    id: 'course-authoring.taxonomy-detail.side-card.description',
-    defaultMessage: 'Description',
-  },
   tagListColumnValueHeader: {
     id: 'course-authoring.tag-list.column.value.header',
     defaultMessage: 'Value',

src/taxonomy/taxonomy-detail/TaxonomyDetailMenu.jsx

@@ -1,11 +1,12 @@
+// ts-check
 import { useIntl } from '@edx/frontend-platform/i18n';
 import {
   Dropdown,
   DropdownButton,
 } from '@edx/paragon';
 import PropTypes from 'prop-types';
 
-import messages from '../../messages';
+import messages from './messages';
 import taxonomyMessages from '../messages';
 
 const TaxonomyDetailMenu = ({

src/taxonomy/taxonomy-detail/TaxonomyDetailPage.jsx

@@ -10,12 +10,12 @@ import { Link, useParams } from 'react-router-dom';
 import ConnectionErrorAlert from '../../generic/ConnectionErrorAlert';
 import Loading from '../../generic/Loading';
 import SubHeader from '../../generic/sub-header/SubHeader';
-import messages from '../messages';
+import messages from './messages';
 import TaxonomyDetailMenu from './TaxonomyDetailMenu';
 import TaxonomyDetailSideCard from './TaxonomyDetailSideCard';
 import TagListTable from './TagListTable';
 import ExportModal from '../modals/ExportModal';
-import { useTaxonomyDetailDataResponse, useTaxonomyDetailDataStatus } from '../api/hooks/selectors';
+import { useTaxonomyDetailDataResponse, useTaxonomyDetailDataStatus } from './data/selectors';
 
 const TaxonomyDetailPage = () => {
   const intl = useIntl();

src/taxonomy/taxonomy-detail/TaxonomyDetailSideCard.jsx

@@ -4,7 +4,7 @@ import {
 } from '@edx/paragon';
 import Proptypes from 'prop-types';
 
-import messages from '../messages';
+import messages from './messages';
 
 const TaxonomyDetailSideCard = ({ taxonomy }) => {
   const intl = useIntl();

src/taxonomy/taxonomy-detail/data/api.js

@@ -0,0 +1,23 @@
+// @ts-check
+import { camelCaseObject, getConfig } from '@edx/frontend-platform';
+import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
+import { useQuery } from '@tanstack/react-query';
+
+const getApiBaseUrl = () => getConfig().STUDIO_BASE_URL;
+const getTaxonomyDetailApiUrl = (taxonomyId) => new URL(
+  `api/content_tagging/v1/taxonomies/${taxonomyId}/`,
+  getApiBaseUrl(),
+).href;
+
+/**
+ * @param {number} taxonomyId
+ * @returns {import('@tanstack/react-query').UseQueryResult<import('../types.mjs').TaxonomyData>}
+ */ // eslint-disable-next-line import/prefer-default-export
+export const useTaxonomyDetailData = (taxonomyId) => (
+  useQuery({
+    queryKey: ['taxonomyDetail', taxonomyId],
+    queryFn: () => getAuthenticatedHttpClient().get(getTaxonomyDetailApiUrl(taxonomyId))
+      .then(camelCaseObject)
+      .then((response) => response.data),
+  })
+);

src/taxonomy/taxonomy-detail/data/api.test.js

@@ -0,0 +1,27 @@
+import { useQuery } from '@tanstack/react-query';
+import {
+  useTaxonomyDetailData,
+} from './api';
+
+const mockHttpClient = {
+  get: jest.fn(),
+};
+
+jest.mock('@tanstack/react-query', () => ({
+  useQuery: jest.fn(),
+}));
+
+jest.mock('@edx/frontend-platform/auth', () => ({
+  getAuthenticatedHttpClient: jest.fn(() => mockHttpClient),
+}));
+
+describe('useTaxonomyDetailData', () => {
+  it('should call useQuery with the correct parameters', () => {
+    useTaxonomyDetailData('1');
+
+    expect(useQuery).toHaveBeenCalledWith({
+      queryKey: ['taxonomyDetail', '1'],
+      queryFn: expect.any(Function),
+    });
+  });
+});

src/taxonomy/taxonomy-detail/data/selectors.js

@@ -0,0 +1,36 @@
+// @ts-check
+import {
+  useTaxonomyDetailData,
+} from './api';
+
+/**
+ * @param {number} taxonomyId
+ * @returns {Pick<import('@tanstack/react-query').UseQueryResult, "error" | "isError" | "isFetched" | "isSuccess">}
+ */
+export const useTaxonomyDetailDataStatus = (taxonomyId) => {
+  const {
+    isError,
+    error,
+    isFetched,
+    isSuccess,
+  } = useTaxonomyDetailData(taxonomyId);
+  return {
+    isError,
+    error,
+    isFetched,
+    isSuccess,
+  };
+};
+
+/**
+ * @param {number} taxonomyId
+ * @returns {import("../types.mjs").TaxonomyData | undefined}
+ */
+export const useTaxonomyDetailDataResponse = (taxonomyId) => {
+  const { isSuccess, data } = useTaxonomyDetailData(taxonomyId);
+  if (isSuccess) {
+    return data;
+  }
+
+  return undefined;
+};

src/taxonomy/taxonomy-detail/data/selectors.test.js

@@ -0,0 +1,47 @@
+import {
+  useTaxonomyDetailData,
+} from './api';
+import {
+  useTaxonomyDetailDataStatus,
+  useTaxonomyDetailDataResponse,
+} from './selectors';
+
+jest.mock('./api', () => ({
+  __esModule: true,
+  useTaxonomyDetailData: jest.fn(),
+}));
+
+describe('useTaxonomyDetailDataStatus', () => {
+  it('should return status values', () => {
+    const status = {
+      isError: false,
+      error: undefined,
+      isFetched: true,
+      isSuccess: true,
+    };
+
+    useTaxonomyDetailData.mockReturnValueOnce(status);
+
+    const result = useTaxonomyDetailDataStatus(0);
+
+    expect(result).toEqual(status);
+  });
+});
+
+describe('useTaxonomyDetailDataResponse', () => {
+  it('should return data when status is success', () => {
+    useTaxonomyDetailData.mockReturnValueOnce({ isSuccess: true, data: 'data' });
+
+    const result = useTaxonomyDetailDataResponse();
+
+    expect(result).toEqual('data');
+  });
+
+  it('should return undefined when status is not success', () => {
+    useTaxonomyDetailData.mockReturnValueOnce({ isSuccess: false });
+
+    const result = useTaxonomyDetailDataResponse();
+
+    expect(result).toBeUndefined();
+  });
+});

src/taxonomy/taxonomy-detail/messages.js

@@ -0,0 +1,22 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  taxonomyDetailsHeader: {
+    id: 'course-authoring.taxonomy-detail.side-card.header',
+    defaultMessage: 'Taxonomy details',
+  },
+  taxonomyDetailsName: {
+    id: 'course-authoring.taxonomy-detail.side-card.name',
+    defaultMessage: 'Title',
+  },
+  taxonomyDetailsDescription: {
+    id: 'course-authoring.taxonomy-detail.side-card.description',
+    defaultMessage: 'Description',
+  },
+  actionsButtonLabel: {
+    id: 'course-authoring.taxonomy-detail.action.button.label',
+    defaultMessage: 'Actions',
+  },
+});
+
+export default messages;