Linter Cleanup

Minor changes to clean up linter errors ghstack-source-id: 64fb7e87b95ad2d87c56fb8c52be26342d806fbe Pull Request resolved: #236
CDCgov · Sep 17, 2024 · 736e609 · 736e609
1 parent e37c813
commit 736e609
Show file tree

Hide file tree

Showing 5 changed files with 29 additions and 21 deletions.
diff --git a/OCR/frontend/e2e/App.spec.ts b/OCR/frontend/e2e/App.spec.ts
@@ -52,7 +52,7 @@ test.describe('when templates exist', async () => {
             localStorage.setItem('templates', JSON.stringify(templates))
         })
     })
-    test('displays list of templates if they exist and sorting functions', async ({page, baseURL}) => {
+    test('displays list of templates if they exist and sorting functions', async ({page}) => {
         await page.goto('/')
         await expect(page.getByRole('heading', { name: 'Saved Templates' })).toBeVisible()
         await expect(page.locator('tbody').getByRole('row')).toHaveCount(4)

diff --git a/OCR/frontend/src/components/SortableTable/SortableTable.tsx b/OCR/frontend/src/components/SortableTable/SortableTable.tsx
@@ -1,17 +1,17 @@
 import {FC, useState} from 'react';
-import {Icon, Table} from "@trussworks/react-uswds";
+import {Table} from "@trussworks/react-uswds";
 import SortArrow from './sort-direction-arrow.svg'
 import SortableIcon from './sortable-icon.svg'
 import './SortableTable.scss'
 
 interface SortableTableProps {
-    data: Array<Map<string, any>>,
+    data: Array<Map<string, object>>,
     sortableBy: Array<string> | undefined,
     defaultSort: string | undefined,
     defaultDescending: boolean | undefined,
     columns: Array<string> | undefined,
     columnNames: Map<string, string> | undefined,
-    formatters: Map<string, (any) => any> | undefined
+    formatters: Map<string, (any) => object> | undefined
 }
 
 const SORTS = {
@@ -23,17 +23,18 @@ const SORTS = {
 
 export const SortableTable: FC<SortableTableProps> = ({
                                                           data,
-                                                          sortableBy,
-                                                          defaultSort,
-                                                          defaultDescending = false,
                                                           columns = Object.keys(data[0]),
+                                                          sortableBy = columns,
+                                                          defaultSort = columns?.[0],
+                                                          defaultDescending = false,
+
                                                           formatters = {},
                                                           columnNames = {},
                                                       }: SortableTableProps) => {
 
-    const [sortBy, setSortBy] = useState(defaultSort || columns?.[0])
+    const [sortBy, setSortBy] = useState(defaultSort)
     const [isDescending, setIsDescending] = useState(defaultDescending)
-
+    const sortableSet = new Set(sortableBy || [])
     const updateSort = (column: string) => {
         if (column === sortBy) {
             setIsDescending(!isDescending)
@@ -45,6 +46,7 @@ export const SortableTable: FC<SortableTableProps> = ({
     const columnData = data?.[0]?.[sortBy]
     const columnType = Object.prototype.toString.call(columnData)
     const sortFunc = SORTS[columnType] || new Intl.Collator(navigator.language).compare
+
     const sortedData = data?.toSorted((a, b) => sortFunc(a[sortBy], b[sortBy])) || []
 
     if (isDescending) {
@@ -57,7 +59,8 @@ export const SortableTable: FC<SortableTableProps> = ({
                 <thead>
                 <tr>
                     {columns.map((c, idx) => {
-                        return <SortableTableHeader key={String(idx)} sortBy={sortBy as string} column={c} name={columnNames?.[c] || c}
+                        return <SortableTableHeader key={String(idx)} disabled={!sortableSet.has(c)}
+                                                    sortBy={sortBy as string} column={c} name={columnNames?.[c] || c}
                                                     isDescending={isDescending || false} onClick={updateSort}/>
                     })}
                 </tr>
@@ -82,22 +85,24 @@ interface SortableTableHeaderProps {
     column: string,
     isDescending: boolean,
     onClick: (string) => void,
-    key: string
+    key: string,
+    disabled: boolean
 }
 
 const SortableTableHeader: FC<SortableTableHeaderProps> = ({
                                                                sortBy,
                                                                name, column, isDescending,
-                                                               onClick
+                                                               onClick,
+                                                               disabled = false
                                                            }: SortableTableHeaderProps) => {
 
     const isSortedBy = sortBy === column
     return (
-        <th onClick={() => onClick(column)}>
+        <th onClick={disabled?() => {}:() => onClick(column)}>
             <div className="display-flex flex-row">
                 <div>{name}</div>
                 <div className="flex-1"></div>
-            {isSortedBy ? <SortOrderIcon isDescending={isDescending}/> : <SortIcon/>}
+            {!disabled && (isSortedBy ? <SortOrderIcon isDescending={isDescending}/> : <SortIcon/>)}
             </div>
         </th>
     )

diff --git a/OCR/frontend/src/components/TemplatesIndex/TemplatesIndex.tsx b/OCR/frontend/src/components/TemplatesIndex/TemplatesIndex.tsx
@@ -4,10 +4,9 @@ import {SortableTable} from "../SortableTable/SortableTable.tsx";
 import {useNavigate} from "react-router-dom";
 import extractImage from "../../assets/extract_image.svg";
 
-interface TemplateIndexProps {
-}
+type TemplateIndexProps = unknown
 
-export const TemplatesIndex: FC<TemplateIndexProps> = ({}) => {
+export const TemplatesIndex: FC<TemplateIndexProps> = () => {
     const [templates, setTemplates] = useState([])
     const navigate = useNavigate()
     useEffect(() => {
@@ -128,7 +127,7 @@ export const TemplatesIndex: FC<TemplateIndexProps> = ({}) => {
             delete window.ClearTemplates
             delete window.LoadSavedTemplates
         }
-    }, []);
+    });
 
     if (!templates || templates.length === 0) {
         return (
@@ -168,7 +167,8 @@ export const TemplatesIndex: FC<TemplateIndexProps> = ({}) => {
                     <h2>Saved Templates</h2>
                     <SortableTable columns={templateColumns} data={templates}
                                    formatters={templateColumnFormatters}
-                                   columnNames={templateColumnNames}/>
+                                   columnNames={templateColumnNames}
+                    />
                 </div>
             </div>
         </>)

diff --git a/OCR/frontend/src/types/templates.ts b/OCR/frontend/src/types/templates.ts
@@ -1,4 +1,4 @@
-interface Template  {
+interface Template {
     name: string;
     lastUpdated: Date | undefined;
     createdBy: string | undefined;

diff --git a/OCR/frontend/tsconfig.json b/OCR/frontend/tsconfig.json
@@ -3,5 +3,8 @@
   "references": [
     { "path": "./tsconfig.app.json" },
     { "path": "./tsconfig.node.json" }
-  ]
+  ],
+  "compilerOptions": {
+    "lib": ["ESNext.Array"]
+  }
 }