chore: fix lint issues

Author: navinkarkera

src/generic/DraggableList/DraggableList.jsx

@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
-import {createPortal} from 'react-dom';
+import { createPortal } from 'react-dom';
 
 import {
   DndContext,
@@ -51,9 +51,9 @@ const DraggableList = ({
     }
   };
 
-  function handleDragStart(event) {
+  const handleDragStart = (event) => {
     setActiveId(event.active.id);
-  }
+  };
 
   return (
     <DndContext
@@ -73,15 +73,15 @@ const DraggableList = ({
         <DragOverlay>
           {renderOverlay(activeId)}
         </DragOverlay>,
-        document.body
+        document.body,
       )}
     </DndContext>
   );
 };
 
 DraggableList.defaultProps = {
-  overlayComponent: undefined,
-}
+  renderOverlay: undefined,
+};
 
 DraggableList.propTypes = {
   itemList: PropTypes.arrayOf(PropTypes.shape({

src/generic/DraggableList/SortableItem.jsx

@@ -33,8 +33,8 @@ const SortableItem = ({
     id,
     animateLayoutChanges: () => false,
     disabled: {
-      draggable: disabled
-    }
+      draggable: disabled,
+    },
   });
 
   const style = {
@@ -56,7 +56,8 @@ const SortableItem = ({
       >
         <ActionRow style={actionStyle}>
           {actions}
-          {!disabled && <IconButtonWithTooltip
+          {!disabled && (
+          <IconButtonWithTooltip
             key="drag-to-reorder-icon"
             ref={setActivatorNodeRef}
             tooltipPlacement="top"
@@ -67,7 +68,8 @@ const SortableItem = ({
             alt={intl.formatMessage(messages.tooltipContent)}
             {...attributes}
             {...listeners}
-          />}
+          />
+          )}
         </ActionRow>
         {children}
       </Card>

src/library-authoring/data/api.ts

@@ -658,7 +658,7 @@ export async function updateLibraryContainerChildren(
 ): Promise<LibraryBlockMetadata[]> {
   const { data } = await getAuthenticatedHttpClient().patch(
     getLibraryContainerChildrenApiUrl(containerId),
-    {'usage_keys': children},
+    { usage_keys: children },
   );
   return camelCaseObject(data);
 }

src/library-authoring/data/apiHooks.ts

@@ -681,7 +681,7 @@ export const useUpdateContainerChildren = (containerId?: string) => {
       if (!containerId) {
         return undefined;
       }
-      return updateLibraryContainerChildren(containerId, usageKeys)
+      return updateLibraryContainerChildren(containerId, usageKeys);
     },
     onSettled: () => {
       // NOTE: We invalidate the library query here because we need to update the library's

src/library-authoring/units/LibraryUnitBlocks.tsx

@@ -24,6 +24,37 @@ import { useLibraryRoutes } from '../routes';
 import messages from './messages';
 import { ToastContext } from '../../generic/toast-context';
 
+interface BlockHeaderProps {
+  block: LibraryBlockMetadata;
+  onTagClick: () => void;
+}
+
+/** Component header, split out to reuse in drag overlay */
+const BlockHeader = ({ block, onTagClick }: BlockHeaderProps) => (
+  <>
+    <Stack direction="horizontal" gap={2} className="font-weight-bold">
+      <Icon src={getItemIcon(block.blockType)} />
+      {block.displayName}
+    </Stack>
+    <ActionRow.Spacer />
+    <Stack direction="horizontal" gap={3}>
+      {block.hasUnpublishedChanges && (
+        <Badge
+          className="px-2 pt-1"
+          variant="warning"
+        >
+          <Stack direction="horizontal" gap={1}>
+            <Icon className="mb-1" size="xs" src={Description} />
+            <FormattedMessage {...messages.draftChipText} />
+          </Stack>
+        </Badge>
+      )}
+      <TagCount size="sm" count={block.tagsCount} onClick={onTagClick} />
+      <ComponentMenu usageKey={block.id} />
+    </Stack>
+  </>
+);
+
 interface LibraryUnitBlocksProps {
   /** set to true if it is rendered as preview
   * This disables drag and drop
@@ -98,70 +129,46 @@ export const LibraryUnitBlocks = ({ preview }: LibraryUnitBlocksProps) => {
       return null;
     }
     return (
-      <ActionRow className='bg-light-200 border border-light-500 p-2 rounded'>
-        <BlockHeader block={block} />
+      <ActionRow className="bg-light-200 border border-light-500 p-2 rounded">
+        <BlockHeader block={block} onTagClick={openManageTagsDrawer} />
         <IconButton
           src={DragIndicator}
           variant="light"
           iconAs={Icon}
-          alt={''}
+          alt=""
         />
       </ActionRow>
     );
-  }
-
-  /** Component header, split out to reuse in drag overlay */
-  const BlockHeader = ({block}: {block: LibraryBlockMetadata}) => (
-    <>
-      <Stack direction="horizontal" gap={2} className="font-weight-bold">
-        <Icon src={getItemIcon(block.blockType)} />
-        {block.displayName}
-      </Stack>
-      <ActionRow.Spacer />
-      <Stack direction="horizontal" gap={3}>
-        {block.hasUnpublishedChanges && (
-          <Badge
-            className="px-2 pt-1"
-            variant="warning"
-          >
-            <Stack direction="horizontal" gap={1}>
-              <Icon className="mb-1" size="xs" src={Description} />
-              <FormattedMessage {...messages.draftChipText} />
-            </Stack>
-          </Badge>
-        )}
-        <TagCount size="sm" count={block.tagsCount} onClick={openManageTagsDrawer} />
-        <ComponentMenu usageKey={block.id} />
-      </Stack>
-    </>
-  );
+  };
 
   const renderedBlocks = orderedBlocks?.map((block) => (
     <IframeProvider key={block.id}>
       <SortableItem
         id={block.id}
         componentStyle={null}
-        actions={<BlockHeader block={block} />}
+        actions={<BlockHeader block={block} onTagClick={openManageTagsDrawer} />}
         actionStyle={{
           borderRadius: '8px 8px 0px 0px',
           padding: '0.5rem 1rem',
           background: '#FBFAF9',
           borderBottom: 'solid 1px #E1DDDB',
-          outline: hidePreviewFor === block.id && '2px dashed gray'
+          outline: hidePreviewFor === block.id && '2px dashed gray',
         }}
         isClickable
         onClick={() => handleComponentSelection(block)}
         disabled={preview}
       >
-        {hidePreviewFor !== block.id && <div className={classNames('p-3', {
+        {hidePreviewFor !== block.id && (
+        <div className={classNames('p-3', {
           'container-mw-md': block.blockType === blockTypes.video,
         })}
         >
           <LibraryBlock
             usageKey={block.id}
             version={showOnlyPublished ? 'published' : undefined}
           />
-        </div>}
+        </div>
+        )}
       </SortableItem>
     </IframeProvider>
   ));