Image lens

.eslintrc.cjs

@@ -3,10 +3,18 @@ module.exports = {
     'eslint:recommended',
     'plugin:react/recommended',
     'plugin:react/jsx-runtime',
+    'plugin:react-hooks/recommended',
     '@electron-toolkit/eslint-config-ts/recommended',
     '@electron-toolkit/eslint-config-prettier'
   ],
+  plugins: ['react-hooks', 'react-refresh'],
   rules: {
-    'react-refresh/only-export-components': 'warn'
+    'react-refresh/only-export-components': 'warn',
+    'react-hooks/exhaustive-deps': 'warn'
+  },
+  settings: {
+    react: {
+      version: 'detect'
+    }
   }
 }

.github/workflows/eslint.yml

@@ -0,0 +1,26 @@
+name: ESLint
+
+on:
+  push:
+    branches:
+      - main
+  pull_request:
+
+jobs:
+  lint:
+    runs-on: ubuntu-latest
+
+    steps:
+    - name: Checkout repository
+      uses: actions/checkout@v2
+
+    - name: Setup Node.js
+      uses: actions/setup-node@v2
+      with:
+        node-version: 18
+
+    - name: Install dependencies
+      run: yarn install --frozen-lockfile
+
+    - name: Run ESLint
+      run: yarn lint

package.json

@@ -41,6 +41,7 @@
     "daisyui": "^3.8.2",
     "date-fns": "^2.30.0",
     "electron-updater": "^6.1.1",
+    "eslint-plugin-react-hooks": "^4.6.0",
     "exifreader": "^4.14.1",
     "music-metadata": "7.13.4",
     "ramda": "^0.29.0",

src/renderer/src/Sections/Directories/ActionsRow.tsx

@@ -1,8 +1,8 @@
 import { insertScan, openFilesDirectoryDialog, removeDirectories } from '@renderer/actions/ipc'
 import ErrorMessage from '@renderer/components/ErrorMessage'
 import PreviousResults from '@renderer/components/PreviousResults'
-import { useMain } from '@renderer/context/MainContext'
-import { useTableContext } from '@renderer/context/TableContext'
+import useMain from '@renderer/context/hooks/useMain'
+import useTableContext from '@renderer/context/hooks/useTableContext'
 import { transformScan } from '@renderer/utils/transformScan'
 import { ADD_NEW_SCAN, REMOVE_DIRECTORIES, UPDATE_ACTIVE_TAB } from '@src/constants'
 import { useQueryClient } from '@tanstack/react-query'

src/renderer/src/Sections/Directories/ConfigurationPanel.tsx

@@ -1,4 +1,4 @@
-import { useMain } from '@renderer/context/MainContext'
+import useMain from '@renderer/context/hooks/useMain'
 import { useEffect } from 'react'
 
 const classNames = {
@@ -74,7 +74,7 @@ export default function ConfigurationPanel(): JSX.Element {
         }
       })
     }
-  }, [type, scanConfiguration.scanType, dispatch])
+  }, [type, scanConfiguration.scanType, dispatch, scanType, includeCrates])
 
   return (
     <div className="rounded-t bg-base-200 p-4 border-b-2 border-base-content border-opacity-5">

src/renderer/src/Sections/Directories/List.tsx

@@ -0,0 +1,105 @@
+import { FilesDirectory } from '@prisma/client'
+import Loader from '@renderer/components/Loader'
+import Body from '@renderer/components/Table/Body'
+import TableHeader from '@renderer/components/Table/Header'
+import IndeterminateCheckbox from '@renderer/components/Table/InderminateCheckbox'
+import useMain from '@renderer/context/hooks/useMain'
+import useTableContext from '@renderer/context/hooks/useTableContext'
+import useFetchDirectories from '@renderer/hooks/useDirectoriesList'
+import { createColumnHelper, getCoreRowModel, useReactTable } from '@tanstack/react-table'
+import { useMemo } from 'react'
+import { fuzzyFilter } from '../Results/utils'
+
+const classNames = {
+  table: 'table table-xs padding-sm w-full'
+}
+const columnHelper = createColumnHelper<FilesDirectory>()
+
+const List = (): JSX.Element => {
+  const { state } = useMain()
+  const { rowSelection, setRowSelection } = useTableContext()
+
+  const { status } = useFetchDirectories()
+
+  const directories = state.directorySrcs
+
+  const columns = useMemo(
+    () => [
+      columnHelper.display({
+        id: 'select',
+        size: 16,
+        header: ({ table }) => (
+          <IndeterminateCheckbox
+            {...{
+              checked: table.getIsAllRowsSelected(),
+              indeterminate: table.getIsSomeRowsSelected(),
+              onChange: table.getToggleAllRowsSelectedHandler()
+            }}
+          />
+        ),
+        cell: ({ row }) => (
+          <div>
+            <IndeterminateCheckbox
+              {...{
+                checked: row.getIsSelected(),
+                disabled: !row.getCanSelect(),
+                indeterminate: row.getIsSomeSelected(),
+                onChange: row.getToggleSelectedHandler()
+              }}
+            />
+          </div>
+        )
+      }),
+      columnHelper.accessor('id', {
+        id: 'id'
+      }),
+      columnHelper.accessor('path', {
+        id: 'path',
+        cell: (info) => info.getValue(),
+        header: () => <span>Path</span>
+      })
+    ],
+    []
+  )
+
+  const table = useReactTable({
+    data: directories ?? [],
+    columns,
+    getCoreRowModel: getCoreRowModel(),
+    state: {
+      columnVisibility: {
+        id: false
+      },
+      rowSelection
+    },
+    filterFns: {
+      fuzzy: fuzzyFilter
+    },
+    enableRowSelection: true,
+    onRowSelectionChange: setRowSelection
+  })
+
+  const renderList = (): JSX.Element => {
+    if (status === 'pending') {
+      return (
+        <div className="h-full w-full flex justify-center items-center">
+          <Loader />
+        </div>
+      )
+    }
+
+    return (
+      <table className={classNames.table}>
+        <TableHeader<FilesDirectory> headerGroups={table.getHeaderGroups()} />
+        <Body<FilesDirectory>
+          table={table}
+          noResultsMessage="No directories selected. Use the buttons below to add/remove directories to scan."
+        />
+      </table>
+    )
+  }
+
+  return <div className="overflow-x-auto">{renderList()}</div>
+}
+
+export default List

src/renderer/src/Sections/Directories/index.tsx

@@ -1,115 +1,13 @@
-import { FilesDirectory } from '@prisma/client'
-import Loader from '@renderer/components/Loader'
-import Body from '@renderer/components/Table/Body'
-import TableHeader from '@renderer/components/Table/Header'
-import IndeterminateCheckbox from '@renderer/components/Table/InderminateCheckbox'
-import { useMain } from '@renderer/context/MainContext'
-import { TableProvider, useTableContext } from '@renderer/context/TableContext'
-import useFetchDirectories from '@renderer/hooks/useDirectoriesList'
-import { createColumnHelper, getCoreRowModel, useReactTable } from '@tanstack/react-table'
-import { memo, useEffect, useMemo } from 'react'
-import { fuzzyFilter } from '../Results/utils'
+import { TableProvider } from '@renderer/context/TableContext'
 import ActionsRow from './ActionsRow'
 import ConfigurationPanel from './ConfigurationPanel'
+import List from './List'
 
 const classNames = {
-  container: 'h-full w-full grid grid-rows-max-1fr-max',
-  table: 'table table-xs padding-sm w-full'
+  container: 'h-full w-full grid grid-rows-max-1fr-max'
 }
-const columnHelper = createColumnHelper<FilesDirectory>()
 
-const List = (): JSX.Element => {
-  const { state } = useMain()
-  const { rowSelection, setRowSelection } = useTableContext()
-
-  const { status, fetchData } = useFetchDirectories()
-
-  useEffect(() => {
-    fetchData()
-  }, [])
-
-  const directories = state.directorySrcs
-
-  const columns = useMemo(
-    () => [
-      columnHelper.display({
-        id: 'select',
-        size: 16,
-        header: ({ table }) => (
-          <IndeterminateCheckbox
-            {...{
-              checked: table.getIsAllRowsSelected(),
-              indeterminate: table.getIsSomeRowsSelected(),
-              onChange: table.getToggleAllRowsSelectedHandler()
-            }}
-          />
-        ),
-        cell: ({ row }) => (
-          <div>
-            <IndeterminateCheckbox
-              {...{
-                checked: row.getIsSelected(),
-                disabled: !row.getCanSelect(),
-                indeterminate: row.getIsSomeSelected(),
-                onChange: row.getToggleSelectedHandler()
-              }}
-            />
-          </div>
-        )
-      }),
-      columnHelper.accessor('id', {
-        id: 'id'
-      }),
-      columnHelper.accessor('path', {
-        id: 'path',
-        cell: (info) => info.getValue(),
-        header: () => <span>Path</span>
-      })
-    ],
-    []
-  )
-
-  const table = useReactTable({
-    data: directories ?? [],
-    columns,
-    getCoreRowModel: getCoreRowModel(),
-    state: {
-      columnVisibility: {
-        id: false
-      },
-      rowSelection
-    },
-    filterFns: {
-      fuzzy: fuzzyFilter
-    },
-    enableRowSelection: true,
-    onRowSelectionChange: setRowSelection
-  })
-
-  const renderList = (): JSX.Element => {
-    if (status === 'pending') {
-      return (
-        <div className="h-full w-full flex justify-center items-center">
-          <Loader />
-        </div>
-      )
-    }
-
-    return (
-      <table className={classNames.table}>
-        <TableHeader<FilesDirectory> headerGroups={table.getHeaderGroups()} />
-        <Body<FilesDirectory>
-          table={table}
-          noResultsMessage="No directories selected. Use the buttons below to add/remove directories to scan."
-        />
-      </table>
-    )
-  }
-
-  return <div className="overflow-x-auto">{renderList()}</div>
-}
-
-export default memo(function Directories(): JSX.Element {
+function Directories(): JSX.Element {
   return (
     <TableProvider>
       <div className={classNames.container}>
@@ -119,4 +17,6 @@ export default memo(function Directories(): JSX.Element {
       </div>
     </TableProvider>
   )
-})
+}
+
+export default Directories

src/renderer/src/Sections/Results/ActionsRow.tsx

@@ -1,6 +1,6 @@
 import ErrorMessage from '@renderer/components/ErrorMessage'
-import { useMain } from '@renderer/context/MainContext'
-import { useTableContext } from '@renderer/context/TableContext'
+import useMain from '@renderer/context/hooks/useMain'
+import useTableContext from '@renderer/context/hooks/useTableContext'
 import { useMemo } from 'react'
 
 const classNames = {

src/renderer/src/Sections/Results/ConfigurationPanel.tsx

@@ -1,7 +1,7 @@
 import DebouncedInput from '@renderer/components/DebouncedInput'
 import ColumnSelection from '@renderer/components/Table/ColumnSelection'
-import { useMain } from '@renderer/context/MainContext'
-import { useTableContext } from '@renderer/context/TableContext'
+import useMain from '@renderer/context/hooks/useMain'
+import useTableContext from '@renderer/context/hooks/useTableContext'
 import { values } from 'ramda'
 import { useMemo } from 'react'
 import ErrorIcon from '../../assets/error.svg?react'
@@ -59,52 +59,7 @@ export default function ConfigurationPanel({ id }: { id: string }): JSX.Element
         )}
 
         <div className="grid md:grid-cols-max-max md:gap-4 gap-2">
-          <ColumnSelection
-            columns={[
-              {
-                key: 'name',
-                name: 'Name'
-              },
-              {
-                key: 'path',
-                name: 'Path'
-              },
-              {
-                key: 'title',
-                name: 'Title'
-              },
-              {
-                key: 'artist',
-                name: 'Artist'
-              },
-              {
-                key: 'album',
-                name: 'Album'
-              },
-              {
-                key: 'genre',
-                name: 'Genre'
-              },
-              {
-                key: 'bpm',
-                name: 'BPM'
-              },
-              {
-                key: 'type',
-                name: 'Type'
-              },
-              {
-                key: 'crates',
-                name: 'Crates'
-              },
-              {
-                key: 'duplicateCount',
-                name: 'Duplicate Count'
-              }
-            ].filter((column) => {
-              return includeCrates || column.key !== 'crates'
-            })}
-          />
+          <ColumnSelection id={id} />
 
           <DebouncedInput
             value={filter ?? ''}