Merge pull request #359 from IQSS/feature/347-eslint-plugin-react-hooks

347 Add eslint plugin react hooks

.eslintrc.json

@@ -18,6 +18,7 @@
  "extends": [
  "eslint:recommended",
  "plugin:react/recommended",
+ "plugin:react-hooks/recommended",
  "plugin:@typescript-eslint/eslint-recommended",
  "plugin:@typescript-eslint/recommended",
  "plugin:@typescript-eslint/recommended-requiring-type-checking",

package.json

@@ -144,6 +144,7 @@
  "eslint-plugin-import": "2.27.5",
  "eslint-plugin-prettier": "4.2.1",
  "eslint-plugin-react": "7.32.2",
+ "eslint-plugin-react-hooks": "4.6.0",
  "eslint-plugin-simple-import-sort": "10.0.0",
  "eslint-plugin-storybook": "0.6.11",
  "eslint-plugin-unused-imports": "2.0.0",

src/sections/collection/datasets-list/DatasetsList.tsx

@@ -32,7 +32,7 @@ export function DatasetsList({ datasetRepository, page, collectionId }: Datasets
 
  useEffect(() => {
  setIsLoading(isLoading)
- }, [isLoading])
+ }, [isLoading, setIsLoading])
 
  if (isLoading) {
  return <DatasetsListSkeleton />

src/sections/collection/datasets-list/DatasetsListWithInfiniteScroll.tsx

@@ -52,7 +52,7 @@ export function DatasetsListWithInfiniteScroll({
 
  useEffect(() => {
  setIsLoading(isLoading)
- }, [isLoading])
+ }, [isLoading, setIsLoading])
 
  useEffect(() => {
  const updatePaginationTotalItems = () => {

src/sections/create-dataset/useGetMetadataBlocksInfo.tsx

@@ -49,7 +49,7 @@ export const useGetMetadataBlocksInfo = ({
  }
  }
  void handleGetDatasetMetadataBlockFields()
- }, [])
+ }, [collectionId, metadataBlockInfoRepository])
 
  return {
  metadataBlocks,

src/sections/dataset/Dataset.tsx

@@ -38,7 +38,7 @@ export function Dataset({ fileRepository, created }: DatasetProps) {
  }
  useEffect(() => {
  setIsLoading(isLoading)
- }, [isLoading])
+ }, [isLoading, setIsLoading])
 
  if (isLoading) {
  return <DatasetSkeleton />

src/sections/dataset/DatasetFactory.tsx

@@ -54,7 +54,7 @@ function DatasetWithSearchParams() {
 
  useEffect(() => {
  if (privateUrlToken) setAnonymizedView(true)
- }, [privateUrlToken])
+ }, [privateUrlToken, setAnonymizedView])
 
  if (privateUrlToken) {
  return (

src/sections/dataset/DatasetProvider.tsx

@@ -1,4 +1,4 @@
-import { PropsWithChildren, useEffect, useState } from 'react'
+import { PropsWithChildren, useCallback, useEffect, useState } from 'react'
 import { DatasetContext } from './DatasetContext'
 import { DatasetRepository } from '../../dataset/domain/repositories/DatasetRepository'
 import { Dataset } from '../../dataset/domain/models/Dataset'
@@ -20,15 +20,16 @@ export function DatasetProvider({
 }: PropsWithChildren<DatasetProviderProps>) {
  const [dataset, setDataset] = useState<Dataset>()
  const [isLoading, setIsLoading] = useState(true)
- const getDataset = () => {
+
+ const getDataset = useCallback(() => {
  if (searchParams.persistentId) {
  return getDatasetByPersistentId(repository, searchParams.persistentId, searchParams.version)
  }
  if (searchParams.privateUrlToken) {
  return getDatasetByPrivateUrlToken(repository, searchParams.privateUrlToken)
  }
  return Promise.resolve(undefined)
- }
+ }, [repository, searchParams])
 
  useEffect(() => {
  setIsLoading(true)
@@ -42,7 +43,7 @@ export function DatasetProvider({
  console.error('There was an error getting the dataset', error)
  setIsLoading(false)
  })
- }, [repository, searchParams])
+ }, [repository, searchParams, getDataset])
 
  return (
  <DatasetContext.Provider value={{ dataset, isLoading }}>{children}</DatasetContext.Provider>

src/sections/dataset/dataset-action-buttons/edit-dataset-menu/DeaccessionDatasetButton.tsx

@@ -6,14 +6,15 @@ interface DeaccessionDatasetButtonProps {
  dataset: Dataset
 }
 export function DeaccessionDatasetButton({ dataset }: DeaccessionDatasetButtonProps) {
+ const { t } = useTranslation('dataset')
+
  if (
  !dataset.version.someDatasetVersionHasBeenReleased ||
  !dataset.permissions.canPublishDataset
  ) {
  return <></>
  }
 
- const { t } = useTranslation('dataset')
  return (
  <>
  <DropdownSeparator />

src/sections/dataset/dataset-action-buttons/edit-dataset-menu/DeleteDatasetButton.tsx

@@ -6,14 +6,15 @@ interface DeleteDatasetButtonProps {
  dataset: Dataset
 }
 export function DeleteDatasetButton({ dataset }: DeleteDatasetButtonProps) {
+ const { t } = useTranslation('dataset')
+
  if (
  !dataset.permissions.canDeleteDataset ||
  dataset.version.latestVersionPublishingStatus !== DatasetPublishingStatus.DRAFT
  ) {
  return <></>
  }
 
- const { t } = useTranslation('dataset')
  return (
  <>
  <DropdownSeparator />

src/sections/dataset/dataset-action-buttons/edit-dataset-menu/EditDatasetPermissionsMenu.tsx

@@ -10,13 +10,6 @@ interface EditDatasetPermissionsMenuProps {
  dataset: Dataset
 }
 export function EditDatasetPermissionsMenu({ dataset }: EditDatasetPermissionsMenuProps) {
- if (
- !dataset.permissions.canManageDatasetPermissions &&
- !dataset.permissions.canManageFilesPermissions
- ) {
- return <></>
- }
-
  const { t } = useTranslation('dataset')
  const { getSettingByName } = useSettings()
  const [hasPublicStore, setHasPublicStore] = useState<HasPublicStore>(false)
@@ -31,6 +24,13 @@ export function EditDatasetPermissionsMenu({ dataset }: EditDatasetPermissionsMe
  })
  }, [getSettingByName])
 
+ if (
+ !dataset.permissions.canManageDatasetPermissions &&
+ !dataset.permissions.canManageFilesPermissions
+ ) {
+ return <></>
+ }
+
  if (hasPublicStore) {
  return (
  <DropdownButtonItem>

src/sections/dataset/dataset-action-buttons/publish-dataset-menu/PublishDatasetMenu.tsx

@@ -11,6 +11,9 @@ interface PublishDatasetMenuProps {
 
 export function PublishDatasetMenu({ dataset }: PublishDatasetMenuProps) {
  const { user } = useSession()
+ const { t } = useTranslation('dataset')
+ const { showModal } = useNotImplementedModal()
+
  if (
  !dataset.version.isLatest ||
  dataset.version.publishingStatus !== DatasetPublishingStatus.DRAFT ||
@@ -20,12 +23,10 @@ export function PublishDatasetMenu({ dataset }: PublishDatasetMenuProps) {
  return <></>
  }
 
- const { t } = useTranslation('dataset')
  const handleSelect = () => {
  // TODO - Implement upload files
  showModal()
  }
- const { showModal } = useNotImplementedModal()
 
  return (
  <DropdownButton

src/sections/dataset/dataset-action-buttons/submit-for-review-button/SubmitForReviewButton.tsx

@@ -9,6 +9,8 @@ interface SubmitForReviewButtonProps {
 
 export function SubmitForReviewButton({ dataset }: SubmitForReviewButtonProps) {
  const { user } = useSession()
+ const { t } = useTranslation('dataset')
+
  if (
  !dataset.version.isLatest ||
  dataset.version.publishingStatus !== DatasetPublishingStatus.DRAFT ||
@@ -20,7 +22,6 @@ export function SubmitForReviewButton({ dataset }: SubmitForReviewButtonProps) {
  return <></>
  }
 
- const { t } = useTranslation('dataset')
  return (
  <Button
  variant="secondary"

src/sections/dataset/dataset-files/files-table/FilesTable.tsx

@@ -32,21 +32,21 @@ export function FilesTable({
  )
  const [visitedPagination, setVisitedPagination] = useState<FilePaginationInfo>(paginationInfo)
  const [visitedFiles, setVisitedFiles] = useState<FileSelection>({})
+ const [previousCriteria, setPreviousCriteria] = useState<FileCriteria>(criteria)
 
  useEffect(() => {
  if (visitedPagination.page == paginationInfo.page) {
  setVisitedFiles((visitedFiles) => ({ ...visitedFiles, ...fileSelection }))
  }
  setVisitedPagination(paginationInfo)
- }, [fileSelection])
+ }, [fileSelection, paginationInfo, visitedPagination.page])
 
- const [previousCriteria, setPreviousCriteria] = useState<FileCriteria>(criteria)
  useEffect(() => {
  if (previousCriteria != criteria) {
  clearFileSelection()
  }
  setPreviousCriteria(criteria)
- })
+ }, [criteria, previousCriteria, clearFileSelection])
 
  if (isLoading) {
  return <SpinnerSymbol />

src/sections/dataset/dataset-files/files-table/useFilesTable.tsx

@@ -32,14 +32,16 @@ export function useFilesTable(files: FilePreview[], paginationInfo: FilePaginati
  pageCount: paginationInfo.totalPages
  })
 
+ const selectedRowsById = table.getSelectedRowModel().rowsById
+
  useEffect(() => {
  table.setPageSize(paginationInfo.pageSize)
  table.setPageIndex(paginationInfo.page - 1)
- }, [paginationInfo])
+ }, [paginationInfo, table])
 
  useEffect(() => {
- setCurrentPageSelectedRowModel(table.getSelectedRowModel().rowsById)
- }, [table.getSelectedRowModel().rowsById])
+ setCurrentPageSelectedRowModel(selectedRowsById)
+ }, [selectedRowsById])
 
  return {
  table,

src/sections/dataset/dataset-files/files-table/zip-download-limit-message/ZipDownloadLimitMessage.tsx

@@ -41,7 +41,7 @@ export function ZipDownloadLimitMessage({
  filesTotalDownloadSize
  )
  setFileSelectionTotalSizeInInBytes(totalSize)
- }, [fileSelection])
+ }, [fileSelection, visitedFiles, filesTotalDownloadSize])
 
  const showMessage =
  zipDownloadLimitInBytes &&

src/sections/dataset/dataset-metadata/dataset-metadata-fields/DatasetMetadataFields.tsx

@@ -17,7 +17,7 @@ export function DatasetMetadataFields({
 
  useEffect(() => {
  setMetadataBlockName(metadataBlockName)
- }, [metadataBlockName])
+ }, [metadataBlockName, setMetadataBlockName])
 
  return (
  <>

src/sections/file/File.tsx

@@ -28,7 +28,7 @@ export function File({ repository, id, datasetVersionNumber }: FileProps) {
 
  useEffect(() => {
  setIsLoading(isLoading)
- }, [isLoading])
+ }, [isLoading, setIsLoading])
 
  if (isLoading) {
  return <FileSkeleton />

src/stories/dataset/dataset-alerts/DatasetAlert.stories.tsx

@@ -30,6 +30,7 @@ type Story = StoryObj<typeof DatasetAlerts>
 export const UpdateAlerts: Story = {
  render: () => {
  const dataset = DatasetMother.createRealistic()
+ // eslint-disable-next-line react-hooks/rules-of-hooks
  const { addDatasetAlert } = useAlertContext()
  allUpdateAlerts.forEach((alert) => addDatasetAlert(alert))
  return (
@@ -44,6 +45,7 @@ const publishAlert = new Alert('warning', AlertMessageKey.PUBLISH_IN_PROGRESS)
 export const PublishInProgress: Story = {
  render: () => {
  const dataset = DatasetMother.createRealistic()
+ // eslint-disable-next-line react-hooks/rules-of-hooks
  const { addDatasetAlert } = useAlertContext()
  addDatasetAlert(publishAlert)
  return (