refactor(web) add eslint (#222)

* fix(tsconfig.json): changed skipLibCheck to false.
refactor(eslint): moved configuration from package.json to .eslintrc.js and added a typescript plugin for future use

* feat: wip eslint and types

* feat: fix identation

* feat: get rid of last any types

web/src/screens/dashboard/ActivityTable.tsx

@@ -5,7 +5,7 @@ import {
   useFilters,
   useGlobalFilter,
   useSortBy,
-  usePagination
+  usePagination, FilterProps, Column
 } from "react-table";
 
 import { APIClient } from "../../api/APIClient";
@@ -17,17 +17,17 @@ import * as DataTable from "../../components/data-table";
 // This is a custom filter UI for selecting
 // a unique option from a list
 function SelectColumnFilter({
-  column: { filterValue, setFilter, preFilteredRows, id, render },
-}: any) {
+  column: { filterValue, setFilter, preFilteredRows, id, render }
+}: FilterProps<object>) {
   // Calculate the options for filtering
   // using the preFilteredRows
   const options = React.useMemo(() => {
-    const options: any = new Set()
-    preFilteredRows.forEach((row: { values: { [x: string]: unknown } }) => {
-      options.add(row.values[id])
-    })
-    return [...options.values()]
-  }, [id, preFilteredRows])
+    const options = new Set<string>();
+    preFilteredRows.forEach((row: { values: { [x: string]: string } }) => {
+      options.add(row.values[id]);
+    });
+    return [...options.values()];
+  }, [id, preFilteredRows]);
 
   // Render a multi-select box
   return (
@@ -39,7 +39,7 @@ function SelectColumnFilter({
         id={id}
         value={filterValue}
         onChange={e => {
-          setFilter(e.target.value || undefined)
+          setFilter(e.target.value || undefined);
         }}
       >
         <option value="">All</option>
@@ -50,17 +50,22 @@ function SelectColumnFilter({
         ))}
       </select>
     </label>
-  )
+  );
 }
 
-function Table({ columns, data }: any) {
+interface TableProps {
+  columns: Column[];
+  data: Release[];
+}
+
+function Table({ columns, data }: TableProps) {
   // Use the state and functions returned from useTable to build your UI
   const {
     getTableProps,
     getTableBodyProps,
     headerGroups,
     prepareRow,
-    page, // Instead of using 'rows', we'll use page,
+    page // Instead of using 'rows', we'll use page,
   } = useTable(
     { columns, data },
     useFilters,
@@ -94,7 +99,7 @@ function Table({ columns, data }: any) {
                         {...columnRest}
                       >
                         <div className="flex items-center justify-between">
-                          {column.render('Header')}
+                          {column.render("Header")}
                           {/* Add a sort direction indicator */}
                           <span>
                             {column.isSorted ? (
@@ -119,12 +124,12 @@ function Table({ columns, data }: any) {
             {...getTableBodyProps()}
             className="divide-y divide-gray-200 dark:divide-gray-700"
           >
-            {page.map((row: any) => {
+            {page.map((row) => {
               prepareRow(row);
               const { key: bodyRowKey, ...bodyRowRest } = row.getRowProps();
               return (
                 <tr key={bodyRowKey} {...bodyRowRest}>
-                  {row.cells.map((cell: any) => {
+                  {row.cells.map((cell) => {
                     const { key: cellRowKey, ...cellRowRest } = cell.getCellProps();
                     return (
                       <td
@@ -133,12 +138,12 @@ function Table({ columns, data }: any) {
                         role="cell"
                         {...cellRowRest}
                       >
-                        {cell.render('Cell')}
+                        {cell.render("Cell")}
                       </td>
-                    )
+                    );
                   })}
                 </tr>
-              )
+              );
             })}
           </tbody>
         </table>
@@ -151,30 +156,30 @@ export const ActivityTable = () => {
   const columns = React.useMemo(() => [
     {
       Header: "Age",
-      accessor: 'timestamp',
-      Cell: DataTable.AgeCell,
+      accessor: "timestamp",
+      Cell: DataTable.AgeCell
     },
     {
       Header: "Release",
-      accessor: 'torrent_name',
-      Cell: DataTable.TitleCell,
+      accessor: "torrent_name",
+      Cell: DataTable.TitleCell
     },
     {
       Header: "Actions",
-      accessor: 'action_status',
-      Cell: DataTable.ReleaseStatusCell,
+      accessor: "action_status",
+      Cell: DataTable.ReleaseStatusCell
     },
     {
       Header: "Indexer",
-      accessor: 'indexer',
+      accessor: "indexer",
       Cell: DataTable.TitleCell,
       Filter: SelectColumnFilter,
-      filter: 'includes',
-    },
-  ], [])
+      filter: "includes"
+    }
+  ], []);
 
   const { isLoading, data } = useQuery(
-    'dash_release',
+    "dash_release",
     () => APIClient.release.find("?limit=10"),
     { refetchOnWindowFocus: false }
   );
@@ -188,7 +193,7 @@ export const ActivityTable = () => {
         Recent activity
       </h3>
 
-      <Table columns={columns} data={data?.data} />
+      <Table columns={columns} data={data?.data ?? []} />
     </div>
   );
-}
+};