diff --git a/src/generic/Loading.jsx b/src/generic/Loading.jsx index 4a2df03cfe..bf3b558e93 100644 --- a/src/generic/Loading.jsx +++ b/src/generic/Loading.jsx @@ -2,7 +2,6 @@ import React from 'react'; import { Spinner } from '@edx/paragon'; import { FormattedMessage } from '@edx/frontend-platform/i18n'; - export const LoadingSpinner = () => ( { - const subTagsData = useSubTags(taxonomyId, parentTagValue); if (subTagsData.isLoading) { return ; - } else if (subTagsData.isError) { - return + } + if (subTagsData.isError) { + return ; } - return
    - {subTagsData.data.results.map(tagData => -
  • - {tagData.value} {tagData.childCount > 0 ? `(${tagData.childCount})` : null} -
  • - )} -
; + return ( +
    + {subTagsData.data.results.map(tagData => ( +
  • + {tagData.value} {tagData.childCount > 0 ? `(${tagData.childCount})` : null} +
  • + ))} +
+ ); }; SubTagsExpanded.propTypes = { @@ -34,6 +36,12 @@ SubTagsExpanded.propTypes = { parentTagValue: Proptypes.string.isRequired, }; +/** + * An "Expand" toggle to show/hide subtags, but one which is hidden if the given tag row has no subtags. + */ +const OptionalExpandLink = ({ row }) => (row.values.childCount > 0 ? : null); +OptionalExpandLink.propTypes = DataTable.ExpandRow.propTypes; + const TagListTable = ({ taxonomyId }) => { const intl = useIntl(); @@ -82,7 +90,7 @@ const TagListTable = ({ taxonomyId }) => { { id: 'expander', Header: DataTable.ExpandAll, - Cell: ({row}) => row.values.childCount > 0 ? : null, + Cell: OptionalExpandLink, }, { Header: intl.formatMessage(messages.tagListColumnChildCountHeader), diff --git a/src/taxonomy/tag-list/data/api.js b/src/taxonomy/tag-list/data/api.js index fa2a79f099..5215518366 100644 --- a/src/taxonomy/tag-list/data/api.js +++ b/src/taxonomy/tag-list/data/api.js @@ -26,19 +26,20 @@ export const useTagListData = (taxonomyId, options) => { }; /** + * Temporary hook to load *all* the subtags of a given tag in a taxonomy. + * Doesn't handle pagination or anything. This is meant to be replaced by + * something more sophisticated later, as we improve the "taxonomy details" page. * @param {number} taxonomyId * @param {string} parentTagValue * @returns {import('@tanstack/react-query').UseQueryResult} */ -export const useSubTags = (taxonomyId, parentTagValue) => { - return useQuery({ - queryKey: ['subtagsList', taxonomyId, parentTagValue], - queryFn: async () => { - const url = new URL(`api/content_tagging/v1/taxonomies/${taxonomyId}/tags/`, getApiBaseUrl()); - url.searchParams.set("full_depth_threshold", "10000"); // Load as deeply as we can - url.searchParams.set("parent_tag", parentTagValue); - const response = await getAuthenticatedHttpClient().get(url.href); - return camelCaseObject(response.data); - }, - }); -}; +export const useSubTags = (taxonomyId, parentTagValue) => useQuery({ + queryKey: ['subtagsList', taxonomyId, parentTagValue], + queryFn: async () => { + const url = new URL(`api/content_tagging/v1/taxonomies/${taxonomyId}/tags/`, getApiBaseUrl()); + url.searchParams.set('full_depth_threshold', '10000'); // Load as deeply as we can + url.searchParams.set('parent_tag', parentTagValue); + const response = await getAuthenticatedHttpClient().get(url.href); + return camelCaseObject(response.data); + }, +});