fix: types

src/optimizer-page/CourseOptimizerPage.jsx

@@ -18,7 +18,7 @@ import {
 } from './data/selectors';
 import { startLinkCheck, fetchLinkCheckStatus } from './data/thunks';
 import { useModel } from '../generic/model-store';
-import { ScanResults } from './scan-results';
+import ScanResults from './scan-results';
 
 const pollLinkCheckStatus = (dispatch, courseId, delay) => {
   const interval = setInterval(() => {
@@ -157,5 +157,8 @@ const CourseOptimizerPage = ({ courseId }) => {
     </>
   );
 };
+CourseOptimizerPage.propTypes = {
+  courseId: PropTypes.string.isRequired,
+};
 
 export default CourseOptimizerPage;

src/optimizer-page/SectionCollapsible.tsx

@@ -12,11 +12,11 @@ interface Props {
   title: string;
   children: React.ReactNode;
   redItalics: string;
-  className: string;
+  className?: string;
 }
 
 const SectionCollapsible: FC<Props> = ({
-  title, children, redItalics, className,
+  title, children, redItalics, className = '',
 }) => {
   const [isOpen, setIsOpen] = useState(false);
   const styling = 'card-lg';

src/optimizer-page/data/selectors.ts

@@ -1,4 +1,4 @@
-import { RootState } from "./slice";
+import { RootState } from './slice';
 
 export const getLinkCheckInProgress = (state: RootState) => state.courseOptimizer.linkCheckInProgress;
 export const getCurrentStage = (state: RootState) => state.courseOptimizer.currentStage;

src/optimizer-page/data/thunks.ts

@@ -51,7 +51,6 @@ export function fetchLinkCheckStatus(courseId) {
       const { linkCheckStatus, linkCheckOutput } = await getLinkCheckStatus(
         courseId,
       );
-      console.log('linkCheckOutput: ', linkCheckOutput);
       if (LINK_CHECK_IN_PROGRESS_STATUSES.includes(linkCheckStatus)) {
         dispatch(updateLinkCheckInProgress(true));
       } else {

src/optimizer-page/scan-results/BrokenLinkTable.jsx → src/optimizer-page/scan-results/BrokenLinkTable.tsx

@@ -1,32 +1,20 @@
-import { useState, useCallback } from 'react';
-import {
-  Card,
-  Icon,
-  Table,
-  CheckBox,
-  OverlayTrigger,
-  Tooltip,
-} from '@openedx/paragon';
-import {
-  OpenInNew,
-  Question,
-  Lock,
-  LinkOff,
-} from '@openedx/paragon/icons';
+import { Icon, Table } from '@openedx/paragon';
+import { OpenInNew, Lock, LinkOff } from '@openedx/paragon/icons';
 import { useIntl } from '@edx/frontend-platform/i18n';
+import { FC } from 'react';
+import { Unit } from '../types';
 import messages from './messages';
-import SectionCollapsible from '../SectionCollapsible';
 import LockedInfoIcon from './LockedInfoIcon';
 
-const BrokenLinkHref = ({ href }) => (
+const BrokenLinkHref: FC<{ href: string }> = ({ href }) => (
   <div className="broken-link-container">
     <a href={href} target="_blank" className="broken-link" rel="noreferrer">
       {href}
     </a>
   </div>
 );
 
-const GoToBlock = ({ block }) => (
+const GoToBlock: FC<{ block: { url: string } }> = ({ block }) => (
   <span style={{ display: 'flex', gap: '.5rem' }}>
     <Icon src={OpenInNew} />
     <a href={block.url} target="_blank" rel="noreferrer">
@@ -35,48 +23,62 @@ const GoToBlock = ({ block }) => (
   </span>
 );
 
-const BrokenLinkTable = ({ unit, showLockedLinks }) => {
+interface BrokenLinkTableProps {
+  unit: Unit;
+  showLockedLinks: boolean;
+}
+
+type TableData = {
+  blockLink: JSX.Element;
+  brokenLink: JSX.Element;
+  status: JSX.Element;
+}[];
+
+const BrokenLinkTable: FC<BrokenLinkTableProps> = ({
+  unit,
+  showLockedLinks,
+}) => {
   const intl = useIntl();
   return (
     <>
       <p className="unit-header">{unit.displayName}</p>
       <Table
-        data={unit.blocks.reduce((acc, block) => {
-          const blockBrokenLinks = block.brokenLinks.map(
-            (link) => ({
+        data={unit.blocks.reduce(
+          (
+            acc: TableData,
+            block,
+          ) => {
+            const blockBrokenLinks = block.brokenLinks.map((link) => ({
               blockLink: <GoToBlock block={block} />,
               brokenLink: <BrokenLinkHref href={link} />,
               status: (
                 <span className="link-status-text">
-                  <Icon
-                    src={LinkOff}
-                    className="broken-link-icon"
-                  />
+                  <Icon src={LinkOff} className="broken-link-icon" />
                   {intl.formatMessage(messages.brokenLinkStatus)}
                 </span>
               ),
-            }),
-          );
-          acc.push(...blockBrokenLinks);
-          if (!showLockedLinks) {
-            return acc;
-          }
+            }));
+            acc.push(...blockBrokenLinks);
+            if (!showLockedLinks) {
+              return acc;
+            }
 
-          const blockLockedLinks = block.lockedLinks.map(
-            (link) => ({
+            const blockLockedLinks = block.lockedLinks.map((link) => ({
               blockLink: <GoToBlock block={block} />,
               brokenLink: <BrokenLinkHref href={link} />,
               status: (
                 <span className="link-status-text">
                   <Icon src={Lock} className="lock-icon" />
-                  {intl.formatMessage(messages.lockedLinkStatus)} <LockedInfoIcon />
+                  {intl.formatMessage(messages.lockedLinkStatus)}{' '}
+                  <LockedInfoIcon />
                 </span>
               ),
-            }),
-          );
-          acc.push(...blockLockedLinks);
-          return acc;
-        }, [])}
+            }));
+            acc.push(...blockLockedLinks);
+            return acc;
+          },
+          [],
+        )}
         columns={[
           {
             key: 'blockLink',