style: Nits on lints and code

open-craft · Jun 20, 2024 · 499aced · 499aced
1 parent d611d29
commit 499aced
Show file tree

Hide file tree

Showing 5 changed files with 29 additions and 11 deletions.
diff --git a/src/library-authoring/components/ComponentCard.jsx b/src/library-authoring/components/ComponentCard.jsx
@@ -1,3 +1,5 @@
+// @ts-check
+import React from 'react';
 import {
   ActionRow,
   Card,
@@ -44,7 +46,15 @@ const ComponentCardMenu = () => (
   </Dropdown>
 );
 
-const ComponentCard = ({
+export const ComponentCardLoading = () => (
+  <Container className="library-component-card">
+    <Card isLoading>
+      <Card.Section />
+    </Card>
+  </Container>
+);
+
+export const ComponentCard = ({
   isLoading,
   title,
   description,
@@ -71,7 +81,7 @@ const ComponentCard = ({
         <Card.Body>
           <Card.Section>
             <Stack direction="horizontal" className="d-flex justify-content-between">
-              <Stack direction="horizontal" gap="1">
+              <Stack direction="horizontal" gap={1}>
                 <Icon src={componentIcon} size="sm" />
                 <span className="small">{blockTypeDisplayName}</span>
               </Stack>
@@ -102,5 +112,3 @@ ComponentCard.propTypes = {
   blockType: PropTypes.string.isRequired,
   blockTypeDisplayName: PropTypes.string.isRequired,
 };
-
-export default ComponentCard;
diff --git a/src/library-authoring/components/LibraryComponents.jsx b/src/library-authoring/components/LibraryComponents.jsx
@@ -5,7 +5,7 @@ import React, { useEffect, useMemo } from 'react';
 import { CardGrid } from '@openedx/paragon';
 import { NoComponents, NoSearchResults } from '../EmptyStates';
 import { useLibraryBlockTypes, useLibraryComponentCount, useLibraryComponents } from '../data/apiHook';
-import ComponentCard from './ComponentCard';
+import { ComponentCard, ComponentCardLoading } from './ComponentCard';
 
 /**
  * Library Components to show components grid
@@ -112,22 +112,20 @@ const LibraryComponents = ({
       hasEqualColumnHeights
     >
       { showContent ? componentList.map((component) => {
-        let tagCount = 0;
-        if (component.tags) {
-          tagCount = component.tags.implicitCount || 0;
-        }
+        const tagCount = component.tags?.implicitCount || 0;
 
         return (
           <ComponentCard
+            key={component.id}
             title={component.displayName}
             description={component.formatted.content?.htmlContent ?? ''}
             tagCount={tagCount}
             blockType={component.blockType}
             blockTypeDisplayName={blockTypes[component.blockType]?.displayName ?? ''}
           />
         );
-      }) : <ComponentCard isLoading />}
-      { showLoading && <ComponentCard isLoading /> }
+      }) : <ComponentCardLoading />}
+      { showLoading && <ComponentCardLoading /> }
     </CardGrid>
   );
 };

diff --git a/src/library-authoring/constants.js b/src/library-authoring/constants.js
@@ -1,3 +1,4 @@
+// @ts-check
 import { COMPONENT_TYPES } from '../course-unit/constants';
 
 const COMPONENT_TYPE_COLOR_MAP = {

diff --git a/src/library-authoring/data/api.js b/src/library-authoring/data/api.js
@@ -28,6 +28,11 @@ export async function getContentLibrary(libraryId) {
   return camelCaseObject(data);
 }
 
+/**
+ * Fetch block types of a library
+ * @param {string} libraryId
+ * @returns {Promise<import("./types.mjs").LibraryBlockType[]>}
+ */
 export async function getLibraryBlockTypes(libraryId) {
   if (!libraryId) {
     throw new Error('libraryId is required');

diff --git a/src/library-authoring/data/types.mjs b/src/library-authoring/data/types.mjs
@@ -16,3 +16,9 @@
   * @property {boolean} hasUnpublishedDeletes
   * @property {string} license
   */
+
+/**
+ * @typedef {Object} LibraryBlockType
+ * @property {string} blockType
+ * @property {string} displayName
+ */