diff --git a/src/taxonomy/TaxonomyListPage.jsx b/src/taxonomy/TaxonomyListPage.jsx index c9751b2f6e..98e446e45b 100644 --- a/src/taxonomy/TaxonomyListPage.jsx +++ b/src/taxonomy/TaxonomyListPage.jsx @@ -11,7 +11,7 @@ import Header from '../header'; import SubHeader from '../generic/sub-header/SubHeader'; import messages from './messages'; import TaxonomyCard from './taxonomy-card'; -import { useTaxonomyListDataResponse, useIsTaxonomyListDataLoaded } from './hooks'; +import { useTaxonomyListDataResponse, useIsTaxonomyListDataLoaded } from './data/apiHooks'; const TaxonomyListPage = () => { const intl = useIntl(); diff --git a/src/taxonomy/TaxonomyListPage.test.jsx b/src/taxonomy/TaxonomyListPage.test.jsx index 34be17a1ee..8e68347568 100644 --- a/src/taxonomy/TaxonomyListPage.test.jsx +++ b/src/taxonomy/TaxonomyListPage.test.jsx @@ -7,11 +7,11 @@ import { act, render } from '@testing-library/react'; import initializeStore from '../store'; import TaxonomyListPage from './TaxonomyListPage'; -import { useTaxonomyListDataResponse, useIsTaxonomyListDataLoaded } from './hooks'; +import { useTaxonomyListDataResponse, useIsTaxonomyListDataLoaded } from './data/apiHooks'; let store; -jest.mock('./hooks', () => ({ +jest.mock('./data/apiHooks', () => ({ useTaxonomyListDataResponse: jest.fn(), useIsTaxonomyListDataLoaded: jest.fn(), })); diff --git a/src/taxonomy/data/apiHooks.jsx b/src/taxonomy/data/apiHooks.jsx new file mode 100644 index 0000000000..40eadf3d1d --- /dev/null +++ b/src/taxonomy/data/apiHooks.jsx @@ -0,0 +1,46 @@ +// @ts-check +/** + * This is a file used especially in this `taxonomy` module. + * + * We are using a new approach, using `useQuery` to build and execute the queries to the APIs. + * This approach accelerates the development. + * + * In this file you will find two types of hooks: + * - Hooks that builds the query with `useQuery`. These hooks are not used outside of this file. + * Ex. useTaxonomyListData. + * - Hooks that calls the query hook, prepare and return the data. + * Ex. useTaxonomyListDataResponse & useIsTaxonomyListDataLoaded. + */ +import { useQuery } from '@tanstack/react-query'; +import { getTaxonomyListData } from './api'; + +/** + * Builds the query yo get the taxonomy list + * @returns {import("./types.mjs").UseQueryResult} + */ +const useTaxonomyListData = () => ( + useQuery({ + queryKey: ['taxonomyList'], + queryFn: getTaxonomyListData, + }) +); + +/** + * Gets the taxonomy list data + * @returns {import("./types.mjs").TaxonomyListData | undefined} + */ +export const useTaxonomyListDataResponse = () => { + const response = useTaxonomyListData(); + if (response.status === 'success') { + return response.data; + } + return undefined; +}; + +/** + * Returns the status of the taxonomy list query + * @returns {boolean} + */ +export const useIsTaxonomyListDataLoaded = () => ( + useTaxonomyListData().status === 'success' +); diff --git a/src/taxonomy/hooks.test.jsx b/src/taxonomy/data/apiHooks.test.jsx similarity index 85% rename from src/taxonomy/hooks.test.jsx rename to src/taxonomy/data/apiHooks.test.jsx index d915f55c99..66715b04c9 100644 --- a/src/taxonomy/hooks.test.jsx +++ b/src/taxonomy/data/apiHooks.test.jsx @@ -2,7 +2,7 @@ import { useQuery } from '@tanstack/react-query'; import { useTaxonomyListDataResponse, useIsTaxonomyListDataLoaded, -} from './hooks'; +} from './apiHooks'; jest.mock('@tanstack/react-query', () => ({ useQuery: jest.fn(), @@ -43,12 +43,3 @@ describe('useIsTaxonomyListDataLoaded', () => { expect(result).toBe(false); }); }); - -/* describe('callExportTaxonomy', () => { - it('should trigger exportTaxonomy', () => { - callExportTaxonomy(1, 'csv'); - - expect(exportTaxonomy).toHaveBeenCalled(); - }); -}); -*/ diff --git a/src/taxonomy/data/thunks.js b/src/taxonomy/data/thunks.js deleted file mode 100644 index aeb7fba40a..0000000000 --- a/src/taxonomy/data/thunks.js +++ /dev/null @@ -1,15 +0,0 @@ -// @ts-check -import { getTaxonomyExportFile } from './api'; - -/** - * Downloads the file of the exported taxonomy - * @param {number} pk - * @param {string} format - * @returns {void} - */ -/* istanbul ignore next */ -const exportTaxonomy = (pk, format) => ( - getTaxonomyExportFile(pk, format) -); - -export default exportTaxonomy; diff --git a/src/taxonomy/export-modal/index.jsx b/src/taxonomy/export-modal/index.jsx index 7fea965225..d380aea6e9 100644 --- a/src/taxonomy/export-modal/index.jsx +++ b/src/taxonomy/export-modal/index.jsx @@ -8,7 +8,7 @@ import { import PropTypes from 'prop-types'; import { useIntl } from '@edx/frontend-platform/i18n'; import messages from './messages'; -import exportTaxonomy from '../data/thunks'; +import { getTaxonomyExportFile } from '../data/api'; const ExportModal = ({ taxonomyId, @@ -20,7 +20,7 @@ const ExportModal = ({ const onClickExport = () => { onClose(); - exportTaxonomy(taxonomyId, outputFormat); + getTaxonomyExportFile(taxonomyId, outputFormat); }; return ( diff --git a/src/taxonomy/hooks.jsx b/src/taxonomy/hooks.jsx deleted file mode 100644 index 1958830f82..0000000000 --- a/src/taxonomy/hooks.jsx +++ /dev/null @@ -1,34 +0,0 @@ -// @ts-check -import { useQuery } from '@tanstack/react-query'; -import { getTaxonomyListData } from './data/api'; - -/** - * Builds the query yo get the taxonomy list - * @returns {import("./data/types.mjs").UseQueryResult} - */ -const useTaxonomyListData = () => ( - useQuery({ - queryKey: ['taxonomyList'], - queryFn: getTaxonomyListData, - }) -); - -/** - * Gets the taxonomy list data - * @returns {import("./data/types.mjs").TaxonomyListData | undefined} - */ -export const useTaxonomyListDataResponse = () => { - const response = useTaxonomyListData(); - if (response.status === 'success') { - return response.data; - } - return undefined; -}; - -/** - * Returns the status of the taxonomy list query - * @returns {boolean} - */ -export const useIsTaxonomyListDataLoaded = () => ( - useTaxonomyListData().status === 'success' -); diff --git a/src/taxonomy/taxonomy-card/TaxonomyCard.test.jsx b/src/taxonomy/taxonomy-card/TaxonomyCard.test.jsx index b984fd667c..79f72eeb2e 100644 --- a/src/taxonomy/taxonomy-card/TaxonomyCard.test.jsx +++ b/src/taxonomy/taxonomy-card/TaxonomyCard.test.jsx @@ -6,7 +6,7 @@ import { render, fireEvent } from '@testing-library/react'; import PropTypes from 'prop-types'; import initializeStore from '../../store'; -import exportTaxonomy from '../data/thunks'; +import { getTaxonomyExportFile } from '../data/api'; import TaxonomyCard from '.'; let store; @@ -18,9 +18,8 @@ const data = { description: 'This is a description', }; -jest.mock('../data/thunks', () => ({ - __esModule: true, - default: jest.fn(), +jest.mock('../data/api', () => ({ + getTaxonomyExportFile: jest.fn(), })); const TaxonomyCardComponent = ({ original }) => ( @@ -141,6 +140,6 @@ describe('', async () => { // Modal closed expect(() => getByText('Select format to export')).toThrow(); - expect(exportTaxonomy).toHaveBeenCalledWith(taxonomyId, 'json'); + expect(getTaxonomyExportFile).toHaveBeenCalledWith(taxonomyId, 'json'); }); }); diff --git a/src/taxonomy/taxonomy-card/index.jsx b/src/taxonomy/taxonomy-card/index.jsx index c578800809..150f36e686 100644 --- a/src/taxonomy/taxonomy-card/index.jsx +++ b/src/taxonomy/taxonomy-card/index.jsx @@ -72,18 +72,15 @@ const TaxonomyCard = ({ className, original }) => { const intl = useIntl(); const [isExportModalOpen, setIsExportModalOpen] = useState(false); - const onClickMenuItem = (menuName) => { - switch (menuName) { - // Add here more menu items - case 'export': - setIsExportModalOpen(true); - break; - /* istanbul ignore next */ - default: - break; - } + // Add here more menu item actions + const menuItemActions = { + export: () => setIsExportModalOpen(true), }; + const onClickMenuItem = (menuName) => ( + menuItemActions[menuName]?.() + ); + const getHeaderActions = () => { if (systemDefined) { // We don't show the export menu, because the system-taxonomies