refactor: Moving hooks to apiHooks

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();

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(),
 }));

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'
+);

src/taxonomy/hooks.test.jsx → 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();
-  });
-});
-*/

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 (

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('<TaxonomyCard />', async () => {
 
     // Modal closed
     expect(() => getByText('Select format to export')).toThrow();
-    expect(exportTaxonomy).toHaveBeenCalledWith(taxonomyId, 'json');
+    expect(getTaxonomyExportFile).toHaveBeenCalledWith(taxonomyId, 'json');
   });
 });

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