style: fix eslint issues

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 = () => (
   <Spinner
     animation="border"

src/taxonomy/tag-list/TagListTable.jsx

@@ -11,29 +11,37 @@ import { useTagListDataResponse, useTagListDataStatus } from './data/apiHooks';
 import { useSubTags } from './data/api';
 
 const SubTagsExpanded = ({ taxonomyId, parentTagValue }) => {
-
   const subTagsData = useSubTags(taxonomyId, parentTagValue);
 
   if (subTagsData.isLoading) {
     return <LoadingSpinner />;
-  } else if (subTagsData.isError) {
-    return <FormattedMessage {...messages.tagListError} />
+  }
+  if (subTagsData.isError) {
+    return <FormattedMessage {...messages.tagListError} />;
   }
 
-  return <ul style={{ listStyleType: "none" }}>
-    {subTagsData.data.results.map(tagData =>
-      <li key={tagData.id} style={{ paddingLeft: ((tagData.depth - 1) * 30) + "px" }}>
-        {tagData.value} <span className="text-light-900">{tagData.childCount > 0 ? `(${tagData.childCount})` : null}</span>
-      </li>
-    )}
-  </ul>;
+  return (
+    <ul style={{ listStyleType: 'none' }}>
+      {subTagsData.data.results.map(tagData => (
+        <li key={tagData.id} style={{ paddingLeft: `${(tagData.depth - 1) * 30}px` }}>
+          {tagData.value} <span className="text-light-900">{tagData.childCount > 0 ? `(${tagData.childCount})` : null}</span>
+        </li>
+      ))}
+    </ul>
+  );
 };
 
 SubTagsExpanded.propTypes = {
   taxonomyId: Proptypes.number.isRequired,
   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 ? <DataTable.ExpandRow row={row} /> : 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 ? <DataTable.ExpandRow row={row} /> : null,
+          Cell: OptionalExpandLink,
         },
         {
           Header: intl.formatMessage(messages.tagListColumnChildCountHeader),

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<import('./types.mjs').TagData>}
  */
-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);
+  },
+});