From 057bb58a08bff94713b5be3d1311856566204adc Mon Sep 17 00:00:00 2001 From: Daniele Guido Date: Tue, 3 Oct 2023 14:00:35 +0200 Subject: [PATCH] eslint fix import and not used vars --- .eslintrc | 3 - .eslintrc.json | 29 +++ package.json | 7 +- src/App.jsx | 64 +++--- src/App.test.js | 8 - src/components/Author.jsx | 1 - src/components/AuthorItem.jsx | 1 - src/components/AvailableLanguages.jsx | 1 - src/components/Breadcrumb.jsx | 2 +- src/components/Cookies.jsx | 2 +- src/components/CoverItems.jsx | 1 - src/components/CreatePebbleMenu.jsx | 2 +- src/components/DocumentDate.jsx | 1 - src/components/DocumentDoc.jsx | 3 +- src/components/DocumentImage.jsx | 1 - src/components/DocumentItem.jsx | 1 - src/components/DocumentMetadata.jsx | 14 +- src/components/DocumentReference.jsx | 1 - .../DocumentViewer/DocumentViewer.jsx | 2 +- .../DocumentViewer/DocumentViewerAudio.jsx | 8 +- .../DocumentViewer/DocumentViewerImage.jsx | 8 +- .../DocumentViewer/DocumentViewerPdf.jsx | 4 +- src/components/ErrorBoundary.jsx | 3 +- src/components/Footer.jsx | 1 - src/components/GetInTouch.jsx | 1 - src/components/Header.jsx | 1 - src/components/HelmetItem.jsx | 6 +- src/components/HomeBiographies.jsx | 2 +- src/components/HomeLandscape.jsx | 2 +- src/components/LangLink.jsx | 7 +- src/components/LanguageSwitch.jsx | 1 - src/components/LinesMap.jsx | 13 +- src/components/LinesMapLineLayer.jsx | 1 - src/components/Logo.jsx | 1 - src/components/LogoC2dhUnilu.jsx | 2 - src/components/MatomoTracker.jsx | 2 +- src/components/MobileHeader.jsx | 2 +- src/components/OrderByDropdown.jsx | 1 - src/components/PagefindMatch.jsx | 2 +- src/components/PebbleSideIcon.jsx | 2 +- src/components/PeopleCard.jsx | 5 +- src/components/Person.jsx | 1 - .../PreciseScrolling/PreciseScrolling.jsx | 203 +++++++++--------- src/components/PrefetchAuthors.jsx | 2 +- src/components/SearchDocuments.jsx | 4 +- src/components/SearchField.jsx | 2 +- src/components/SearchStories.jsx | 2 +- src/components/StoryAuthors.jsx | 1 - src/components/StoryEndnotes.jsx | 13 +- src/components/StoryHelmet.jsx | 2 +- src/components/StoryItem.jsx | 1 - .../StoryModule/FootnoteDefinition.jsx | 2 - .../StoryModule/FootnoteReference.jsx | 2 - src/components/StoryModule/ModuleText.jsx | 3 +- .../StoryModule/ModuleTextAnchor.jsx | 3 +- src/components/StoryModule/StoryModule.jsx | 1 - .../StoryModule/StoryModuleNotFound.jsx | 2 - .../StoryModule/StoryModuleText.jsx | 1 - src/components/StoryTimeline.jsx | 1 - src/components/TermsOfuseCookies.jsx | 2 +- src/components/Terrain.jsx | 2 +- src/components/TopDocuments.jsx | 1 - src/components/TopStories.jsx | 9 +- src/hooks/data.js | 2 +- src/hooks/viewport.js | 2 +- src/index.jsx | 2 +- src/logic/miller.jsx | 1 - src/pages/Biographies.jsx | 4 +- src/pages/Document.jsx | 1 - src/pages/Home.jsx | 6 +- src/pages/NotFound.jsx | 5 +- src/pages/Page.jsx | 1 - src/pages/People.jsx | 1 - src/pages/Person.jsx | 6 +- src/pages/Search.jsx | 6 +- src/pages/Story.jsx | 11 +- src/setupProxy.js | 27 --- yarn.lock | 14 +- 78 files changed, 259 insertions(+), 309 deletions(-) delete mode 100644 .eslintrc create mode 100644 .eslintrc.json delete mode 100644 src/App.test.js delete mode 100644 src/setupProxy.js diff --git a/.eslintrc b/.eslintrc deleted file mode 100644 index fcf5ef3..0000000 --- a/.eslintrc +++ /dev/null @@ -1,3 +0,0 @@ -{ - "extends": ["react-app"] -} diff --git a/.eslintrc.json b/.eslintrc.json new file mode 100644 index 0000000..13aa351 --- /dev/null +++ b/.eslintrc.json @@ -0,0 +1,29 @@ +{ + "extends": ["eslint:recommended", "plugin:react/recommended", "prettier"], + "plugins": ["react-hooks"], + "parserOptions": { + "sourceType": "module", + "ecmaVersion": 2021, + "ecmaFeatures": { + "jsx": true + } + }, + "env": { + "browser": true, + "es2021": true + }, + "rules": { + "no-unused-vars": "warn", + "react/prop-types": "off", + "react/no-unknown-property": "off", + "react/no-unescaped-entities": "off", + "react/react-in-jsx-scope": "off", + "react/jsx-uses-react": "off", + "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }] + }, + "settings": { + "react": { + "version": "detect" + } + } +} diff --git a/package.json b/package.json index 26eab87..fd8d6df 100644 --- a/package.json +++ b/package.json @@ -60,8 +60,7 @@ "start": "vite", "build": "vite build", "serve": "vite preview", - "lint": "eslint -c .eslintrc.js --ext .js,.jsx,.ts,.tsx .", - "lint:fix": "npm run lint -- --fix" + "lint": "eslint src --ext js,jsx --report-unused-disable-directives --max-warnings 0 --fix" }, "eslintConfig": { "extends": [ @@ -83,6 +82,10 @@ }, "devDependencies": { "@babel/plugin-proposal-private-property-in-object": "^7.21.11", + "eslint-config-prettier": "^9.0.0", + "eslint-plugin-react": "^7.33.2", + "eslint-plugin-react-hooks": "^4.6.0", + "eslint-plugin-react-refresh": "^0.4.3", "http-proxy-middleware": "^2.0.6", "prettier": "^2.7.1" } diff --git a/src/App.jsx b/src/App.jsx index 2464b85..9b28623 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,4 +1,4 @@ -import React, { lazy } from 'react' +import { Suspense, lazy } from 'react' import { QueryParamProvider } from 'use-query-params' import { isMobile } from 'react-device-detect' import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom' @@ -44,13 +44,13 @@ const App = () => { {isMobile ? ( - + {' '} - + ) : ( - +
- + )} @@ -64,104 +64,104 @@ const App = () => { }> + }> - + } /> ...}> + ...}> - + } > ...}> + ...}> - + } /> ...}> + ...}> - + } /> ...}> + ...}> - + } /> ...}> + ...}> - + } /> ...}> + ...}> - + } /> ...}> + ...}> - + } /> ...}> - + ...}> + + {({ pageId }) => pageId === 'terms-of-use' ? ( ) : null } - > - + + } /> ...}> + ...}> - + } /> ...}> + ...}> - + } /> ...}> + ...}> - + } /> diff --git a/src/App.test.js b/src/App.test.js deleted file mode 100644 index 1f03afe..0000000 --- a/src/App.test.js +++ /dev/null @@ -1,8 +0,0 @@ -import { render, screen } from '@testing-library/react'; -import App from './App'; - -test('renders learn react link', () => { - render(); - const linkElement = screen.getByText(/learn react/i); - expect(linkElement).toBeInTheDocument(); -}); diff --git a/src/components/Author.jsx b/src/components/Author.jsx index 56cf31d..cc19111 100644 --- a/src/components/Author.jsx +++ b/src/components/Author.jsx @@ -1,4 +1,3 @@ -import React from 'react' import { useTranslation } from 'react-i18next' import { useGetJSON } from '../hooks/data' import { useAvailableLanguage } from '../hooks/language' diff --git a/src/components/AuthorItem.jsx b/src/components/AuthorItem.jsx index 523e0ed..0572aeb 100644 --- a/src/components/AuthorItem.jsx +++ b/src/components/AuthorItem.jsx @@ -1,4 +1,3 @@ -import React from 'react' import LangLink from './LangLink' const AuthorItem = ({ author, className, to = '/biographies?author=:author' }) => ( diff --git a/src/components/AvailableLanguages.jsx b/src/components/AvailableLanguages.jsx index 3c6fe95..53d617f 100644 --- a/src/components/AvailableLanguages.jsx +++ b/src/components/AvailableLanguages.jsx @@ -1,4 +1,3 @@ -import React from 'react' import { LanguageCodes, MillerLanguages } from '../constants' import { useTranslation } from 'react-i18next' diff --git a/src/components/Breadcrumb.jsx b/src/components/Breadcrumb.jsx index c093514..7bc1624 100644 --- a/src/components/Breadcrumb.jsx +++ b/src/components/Breadcrumb.jsx @@ -1,4 +1,4 @@ -import React, { useEffect, useState } from 'react' +import { useEffect, useState } from 'react' import { useLocation, matchPath } from 'react-router' import { useTranslation } from 'react-i18next' import { LanguagePathRegExp, LanguageRootPathRegExp, HomeRoute, AllRoutes } from '../constants' diff --git a/src/components/Cookies.jsx b/src/components/Cookies.jsx index 0f3dec1..2a0f233 100644 --- a/src/components/Cookies.jsx +++ b/src/components/Cookies.jsx @@ -1,4 +1,4 @@ -import React, { useState } from 'react' +import { useState } from 'react' import { useTranslation } from 'react-i18next' import { Button, Form, Container } from 'react-bootstrap' import { usePermanentStore } from '../store' diff --git a/src/components/CoverItems.jsx b/src/components/CoverItems.jsx index 57c1a29..1abfc8e 100644 --- a/src/components/CoverItems.jsx +++ b/src/components/CoverItems.jsx @@ -1,4 +1,3 @@ -import React from 'react' import '../styles/components/CoverItems.css' const CoverItems = ({ covers = [], size = 120, style, ...rest }) => { diff --git a/src/components/CreatePebbleMenu.jsx b/src/components/CreatePebbleMenu.jsx index 566a704..54eb343 100644 --- a/src/components/CreatePebbleMenu.jsx +++ b/src/components/CreatePebbleMenu.jsx @@ -9,7 +9,7 @@ import Pebble, { Dodecaedron, } from './Pebble' import '../styles/components/CreatePebbleMenu.css' -import React, { useState } from 'react' +import { useState } from 'react' import { PebbleColors } from '../constants' import { useTranslation } from 'react-i18next' import { PlusCircle, ChevronLeft, ChevronRight } from 'react-feather' diff --git a/src/components/DocumentDate.jsx b/src/components/DocumentDate.jsx index acdcb7a..0ee607b 100644 --- a/src/components/DocumentDate.jsx +++ b/src/components/DocumentDate.jsx @@ -1,4 +1,3 @@ -import React from 'react' import { useDate } from '../hooks/date' const DocumentDate = ({ diff --git a/src/components/DocumentDoc.jsx b/src/components/DocumentDoc.jsx index 1fc43eb..54f8795 100644 --- a/src/components/DocumentDoc.jsx +++ b/src/components/DocumentDoc.jsx @@ -1,9 +1,8 @@ -import React from 'react' import DocumentReference from './DocumentReference' import DocumentDate from './DocumentDate' import { useTranslation } from 'react-i18next' -const DocumentDoc = ({ doc = { data: {} }, language = 'en', onClick }) => { +const DocumentDoc = ({ doc = { data: {} }, language = 'en' }) => { const { t } = useTranslation() const caption = doc.data.title || doc.title || doc.slug const references = Array.isArray(doc.documents) diff --git a/src/components/DocumentImage.jsx b/src/components/DocumentImage.jsx index e8930b3..12b8689 100644 --- a/src/components/DocumentImage.jsx +++ b/src/components/DocumentImage.jsx @@ -1,4 +1,3 @@ -import React from 'react' import DocumentReference from './DocumentReference' import DocumentDate from './DocumentDate' import '../styles/components/DocumentImage.css' diff --git a/src/components/DocumentItem.jsx b/src/components/DocumentItem.jsx index d9ab14e..d3a470b 100644 --- a/src/components/DocumentItem.jsx +++ b/src/components/DocumentItem.jsx @@ -1,4 +1,3 @@ -import React from 'react' import { useNavigate } from 'react-router-dom' import { useTranslation } from 'react-i18next' import DocumentReference from './DocumentReference' diff --git a/src/components/DocumentMetadata.jsx b/src/components/DocumentMetadata.jsx index e9dc4e8..510ba58 100644 --- a/src/components/DocumentMetadata.jsx +++ b/src/components/DocumentMetadata.jsx @@ -1,10 +1,10 @@ -import React from 'react' import { useTranslation } from 'react-i18next' import DocumentReference from './DocumentReference' import DocumentDate from './DocumentDate' import AvailableLanguages from './AvailableLanguages' import { useAvailableLanguage } from '../hooks/language' import '../styles/components/DocumentMetadata.css' +import { Fragment } from 'react' const DocumentMetadataField = ({ label, children }) => { if (typeof children === 'string' && children.length === 0) { @@ -19,7 +19,7 @@ const DocumentMetadataField = ({ label, children }) => { ) } -const DocumentMetadata = ({ doc, memoid }) => { +const DocumentMetadata = ({ doc }) => { const { t } = useTranslation() const { requestedLanguage, availableLanguage, availableLanguages } = useAvailableLanguage({ translatable: doc.data.title, @@ -68,7 +68,9 @@ const DocumentMetadata = ({ doc, memoid }) => { {t('unkownDate')} {typeof doc.data.creator === 'string' && ( - + + {doc.data.creator || t('nd')} + )} {typeof doc.data.author === 'string' && ( {doc.data.author} @@ -79,12 +81,12 @@ const DocumentMetadata = ({ doc, memoid }) => { )} {typeof doc.data.copyright === 'string' && ( - + {doc.data.copyright} )}
{references !== null && references.map((d) => ( - + @@ -95,7 +97,7 @@ const DocumentMetadata = ({ doc, memoid }) => { {d.data?.csljson?.abstract} - + ))}
diff --git a/src/components/DocumentReference.jsx b/src/components/DocumentReference.jsx index 1cd8ceb..40e64c7 100644 --- a/src/components/DocumentReference.jsx +++ b/src/components/DocumentReference.jsx @@ -1,4 +1,3 @@ -import React from 'react' import { useTranslation } from 'react-i18next' import Cite from 'citation-js' import '../styles/components/DocumentReference.css' diff --git a/src/components/DocumentViewer/DocumentViewer.jsx b/src/components/DocumentViewer/DocumentViewer.jsx index 3260e2d..7f7c47e 100644 --- a/src/components/DocumentViewer/DocumentViewer.jsx +++ b/src/components/DocumentViewer/DocumentViewer.jsx @@ -1,4 +1,4 @@ -import React, { useRef, lazy } from 'react' +import { useRef, lazy } from 'react' import { useTranslation } from 'react-i18next' import { Maximize } from 'react-feather' import { useFullScreen } from '../../hooks/viewport' diff --git a/src/components/DocumentViewer/DocumentViewerAudio.jsx b/src/components/DocumentViewer/DocumentViewerAudio.jsx index eccc0be..82084dd 100644 --- a/src/components/DocumentViewer/DocumentViewerAudio.jsx +++ b/src/components/DocumentViewer/DocumentViewerAudio.jsx @@ -1,7 +1,5 @@ -import React from 'react' - -const DocumentViewerImage = ({ doc, width, height }) => { - return
+const DocumentViewerAudio = () => { + return
} -export default DocumentViewerImage +export default DocumentViewerAudio diff --git a/src/components/DocumentViewer/DocumentViewerImage.jsx b/src/components/DocumentViewer/DocumentViewerImage.jsx index 762f149..73d1178 100644 --- a/src/components/DocumentViewer/DocumentViewerImage.jsx +++ b/src/components/DocumentViewer/DocumentViewerImage.jsx @@ -1,4 +1,4 @@ -import React, { useRef, useEffect } from 'react' +import { useRef, useEffect, Fragment } from 'react' import { Plus, Minus } from 'react-feather' import { TransformWrapper, TransformComponent } from '@kokarn/react-zoom-pan-pinch' @@ -63,7 +63,7 @@ const DocumentViewerImage = ({ center > {({ zoomIn, zoomOut, centerView }) => ( - + {!isMobile && (
diff --git a/src/components/DocumentViewer/DocumentViewerPdf.jsx b/src/components/DocumentViewer/DocumentViewerPdf.jsx index eccc0be..24ae8ab 100644 --- a/src/components/DocumentViewer/DocumentViewerPdf.jsx +++ b/src/components/DocumentViewer/DocumentViewerPdf.jsx @@ -1,6 +1,4 @@ -import React from 'react' - -const DocumentViewerImage = ({ doc, width, height }) => { +const DocumentViewerImage = () => { return
} diff --git a/src/components/ErrorBoundary.jsx b/src/components/ErrorBoundary.jsx index 2d84d6d..1e06a5d 100644 --- a/src/components/ErrorBoundary.jsx +++ b/src/components/ErrorBoundary.jsx @@ -1,11 +1,12 @@ import React from 'react' + export default class ErrorBoundary extends React.Component { constructor(props) { super(props) this.state = { hasError: false } } - static getDerivedStateFromError(error) { + static getDerivedStateFromError() { // Update state so the next render will show the fallback UI return { hasError: true } } diff --git a/src/components/Footer.jsx b/src/components/Footer.jsx index 417c286..b1997ff 100644 --- a/src/components/Footer.jsx +++ b/src/components/Footer.jsx @@ -1,4 +1,3 @@ -import React from 'react' import { Container, Row, Col } from 'react-bootstrap' import { useTranslation } from 'react-i18next' import LangLink from './LangLink' diff --git a/src/components/GetInTouch.jsx b/src/components/GetInTouch.jsx index 88b8a68..b7e8c15 100644 --- a/src/components/GetInTouch.jsx +++ b/src/components/GetInTouch.jsx @@ -1,4 +1,3 @@ -import React from 'react' import { useTranslation } from 'react-i18next' const GetInTouch = ({ emailSubjectTranslationLabel = 'getInTouchSubject' }) => { diff --git a/src/components/Header.jsx b/src/components/Header.jsx index c3c49be..662d538 100644 --- a/src/components/Header.jsx +++ b/src/components/Header.jsx @@ -1,4 +1,3 @@ -import React from 'react' import { useTranslation } from 'react-i18next' import { Container, Row, Col } from 'react-bootstrap' import LangLink from './LangLink' diff --git a/src/components/HelmetItem.jsx b/src/components/HelmetItem.jsx index f535f7d..052cfc8 100644 --- a/src/components/HelmetItem.jsx +++ b/src/components/HelmetItem.jsx @@ -1,4 +1,4 @@ -import React from 'react' +import { Fragment } from 'react' const HelmetItem = ({ asName = false, property = '', value = '', key = '' }) => { if (!value.length) { @@ -7,11 +7,11 @@ const HelmetItem = ({ asName = false, property = '', value = '', key = '' }) => // e.g; we can have multiple values for "article:tag" if (Array.isArray(value)) { return ( - + {value.map((v, j) => ( ))} - + ) } diff --git a/src/components/HomeBiographies.jsx b/src/components/HomeBiographies.jsx index 127eaac..f81012d 100644 --- a/src/components/HomeBiographies.jsx +++ b/src/components/HomeBiographies.jsx @@ -1,4 +1,4 @@ -import React, { useEffect, useRef } from 'react' +import { useEffect, useRef } from 'react' import { Container, Row, Col } from 'react-bootstrap' import { BootstrapColumnLayout } from '../constants' import StoryItem from './StoryItem' diff --git a/src/components/HomeLandscape.jsx b/src/components/HomeLandscape.jsx index 51b2aa3..832d01e 100644 --- a/src/components/HomeLandscape.jsx +++ b/src/components/HomeLandscape.jsx @@ -1,4 +1,4 @@ -import React, { useEffect } from 'react' +import { useEffect } from 'react' import { useSpring, a, config } from 'react-spring' import Vimeo from '@u-wave/react-vimeo' diff --git a/src/components/LangLink.jsx b/src/components/LangLink.jsx index 82aa31e..9447c7b 100644 --- a/src/components/LangLink.jsx +++ b/src/components/LangLink.jsx @@ -1,4 +1,3 @@ -import React from 'react' import { Link } from 'react-router-dom' import { useTranslation } from 'react-i18next' @@ -20,5 +19,9 @@ export default function LangLink({ to, language, disabled, children, onClick, .. onClick(e) } } - return + return ( + + {children} + + ) } diff --git a/src/components/LanguageSwitch.jsx b/src/components/LanguageSwitch.jsx index 32553ed..a4a8876 100644 --- a/src/components/LanguageSwitch.jsx +++ b/src/components/LanguageSwitch.jsx @@ -1,4 +1,3 @@ -import React from 'react' import { useTranslation } from 'react-i18next' import { useLocation } from 'react-router-dom' import { LanguagePathRegExp, LanguageRootPathRegExp, LanguageCodes } from '../constants' diff --git a/src/components/LinesMap.jsx b/src/components/LinesMap.jsx index 317ebfc..96e899b 100644 --- a/src/components/LinesMap.jsx +++ b/src/components/LinesMap.jsx @@ -1,8 +1,8 @@ -import { useEffect, useMemo, useRef, useState } from 'react' -import ReactMapboxGl, { MapContext, ZoomControl, Cluster, Marker } from 'react-mapbox-gl' +import { useEffect, useRef, useState } from 'react' +import ReactMapboxGl, { MapContext, ZoomControl, Marker, Cluster } from 'react-mapbox-gl' import mapboxgl from 'mapbox-gl' -// eslint-disable-next-line import/no-webpack-loader-syntax -import MapboxWorker from 'mapbox-gl/dist/mapbox-gl-csp-worker' // eslint-disable-line import/no-webpack-loader-syntax + +import MapboxWorker from 'mapbox-gl/dist/mapbox-gl-csp-worker' import '../styles/components/LinesMap.css' import LinesMapLineLayer from './LinesMapLineLayer' @@ -44,7 +44,6 @@ const LinesMap = ({ people = [], places = [], className, - showLines = false, fitBoundsOnLoad = true, }) => { const mapRef = useRef() @@ -115,7 +114,7 @@ const LinesMap = ({ onZoomEnd={(map) => setZoom(map.transform._zoom)} > - {/* ))} - */} + {people.map(({ data }, i) => ( e.coords)} /> ))} diff --git a/src/components/LinesMapLineLayer.jsx b/src/components/LinesMapLineLayer.jsx index fae55b1..cbbf324 100644 --- a/src/components/LinesMapLineLayer.jsx +++ b/src/components/LinesMapLineLayer.jsx @@ -1,4 +1,3 @@ -import React from 'react' import { Layer, Feature } from 'react-mapbox-gl' const LinesMapLineLayer = ({ points, coordsA, coordsB, w = 1 }) => { diff --git a/src/components/Logo.jsx b/src/components/Logo.jsx index 1663876..9f4207f 100644 --- a/src/components/Logo.jsx +++ b/src/components/Logo.jsx @@ -1,4 +1,3 @@ -import React from 'react' import '../styles/components/Logo.css' const Logo = ({ diff --git a/src/components/LogoC2dhUnilu.jsx b/src/components/LogoC2dhUnilu.jsx index 9f721a4..3f2fd96 100644 --- a/src/components/LogoC2dhUnilu.jsx +++ b/src/components/LogoC2dhUnilu.jsx @@ -1,5 +1,3 @@ -import React from 'react' - const LogoC2dhUnilu = ({ color = '#fff', height = 50, ...rest }) => { return (
diff --git a/src/components/MatomoTracker.jsx b/src/components/MatomoTracker.jsx index b688e08..ccc542a 100644 --- a/src/components/MatomoTracker.jsx +++ b/src/components/MatomoTracker.jsx @@ -18,7 +18,7 @@ const MatomoTracker = ({ disabled }) => { href: url, }) } - // eslint-disable-next-line react-hooks/exhaustive-deps + }, [disabled, pathname, search]) return null diff --git a/src/components/MobileHeader.jsx b/src/components/MobileHeader.jsx index f459e1f..d2d0133 100644 --- a/src/components/MobileHeader.jsx +++ b/src/components/MobileHeader.jsx @@ -1,4 +1,4 @@ -import React, { useState } from 'react' +import { useState } from 'react' import { useTranslation } from 'react-i18next' import { a, useSpring } from 'react-spring' import LanguageSwitch from './LanguageSwitch' diff --git a/src/components/OrderByDropdown.jsx b/src/components/OrderByDropdown.jsx index e0b758b..10e158f 100644 --- a/src/components/OrderByDropdown.jsx +++ b/src/components/OrderByDropdown.jsx @@ -1,4 +1,3 @@ -import React from 'react' import { DropdownButton, Dropdown } from 'react-bootstrap' import { useTranslation } from 'react-i18next' import '../styles/components/OrderByDropdown.css' diff --git a/src/components/PagefindMatch.jsx b/src/components/PagefindMatch.jsx index 675ed72..2b0a93f 100644 --- a/src/components/PagefindMatch.jsx +++ b/src/components/PagefindMatch.jsx @@ -11,7 +11,7 @@ const PagefindMatch = ({ id, getData, children }) => { setResult(result) } fetchData() - // eslint-disable-next-line react-hooks/exhaustive-deps + }, [id]) return
{result ? <>{children(result)} :
Loading...
}
diff --git a/src/components/PebbleSideIcon.jsx b/src/components/PebbleSideIcon.jsx index 53b2cfb..7d9682a 100644 --- a/src/components/PebbleSideIcon.jsx +++ b/src/components/PebbleSideIcon.jsx @@ -1,4 +1,4 @@ -import React, { useState } from 'react' +import { useState } from 'react' import CreatePebbleMenu from './CreatePebbleMenu' import '../styles/components/PebbleSideIcon.css' import { useTranslation } from 'react-i18next' diff --git a/src/components/PeopleCard.jsx b/src/components/PeopleCard.jsx index 1b065f5..87d1ef3 100644 --- a/src/components/PeopleCard.jsx +++ b/src/components/PeopleCard.jsx @@ -1,4 +1,4 @@ -import React, { useLayoutEffect, useState } from 'react' +import { useLayoutEffect, useState } from 'react' import { useTranslation } from 'react-i18next' import downsize from 'downsize' import { useStore } from '../store' @@ -8,7 +8,7 @@ import '../styles/components/PeopleCard.css' import { ArrowRightCircle } from 'react-feather' import LangLink from './LangLink' -const PeopleCard = ({ debug, alt, src, ...props }) => { +const PeopleCard = ({ debug, ...props }) => { const { t, i18n } = useTranslation() const { parseDate } = useDate({ language: i18n.language.split('_').join('-') }) const selectedPebble = useStore((state) => state.selectedPebble) @@ -54,7 +54,6 @@ const PeopleCard = ({ debug, alt, src, ...props }) => { clearTimeout(t1) clearTimeout(t2) } - // eslint-disable-next-line react-hooks/exhaustive-deps }, [selectedPebble]) if (!selectedPebble || !newValue) { diff --git a/src/components/Person.jsx b/src/components/Person.jsx index 62fde6a..d49cdab 100644 --- a/src/components/Person.jsx +++ b/src/components/Person.jsx @@ -1,4 +1,3 @@ -import React from 'react' import { useTranslation } from 'react-i18next' import LangLink from './LangLink' import { useDate } from '../hooks/date' diff --git a/src/components/PreciseScrolling/PreciseScrolling.jsx b/src/components/PreciseScrolling/PreciseScrolling.jsx index 195afe2..c5151ad 100644 --- a/src/components/PreciseScrolling/PreciseScrolling.jsx +++ b/src/components/PreciseScrolling/PreciseScrolling.jsx @@ -1,16 +1,11 @@ -import React, { useRef, useLayoutEffect } from 'react' +import { useRef, useLayoutEffect, useCallback } from 'react' import { useScrollPosition } from '@n8tb1t/use-scroll-position' export const DirectionDown = 'DOWN' export const DirectionUp = 'UP' class PreciseScrollingStep { - constructor({ - idx = -1, - coverage = 0, - focus = false, - ratio = 0 - }) { + constructor({ idx = -1, coverage = 0, focus = false, ratio = 0 }) { this.idx = idx this.coverage = coverage this.focus = focus @@ -23,7 +18,7 @@ const PreciseScrolling = ({ // listener: onScroll({ activeSteps, direction }) onScroll, // listener: onFocusChange({ step, direction }) - onFocusChange + onFocusChange, }) => { const elementRef = useRef(null) const positions = useRef([]) @@ -34,129 +29,131 @@ const PreciseScrolling = ({ const evaluateChildrenPositions = () => { if (elementRef.current) { - const currentPositions = []; - const currentOffsetTops = []; - const numKids = elementRef.current.childElementCount; + const currentPositions = [] + const currentOffsetTops = [] + const numKids = elementRef.current.childElementCount for (var i = 0; i < numKids; ++i) { - const rect = elementRef.current.children[i].getBoundingClientRect(); + const rect = elementRef.current.children[i].getBoundingClientRect() currentPositions.push({ height: rect.height, - width: rect.width - }); - currentOffsetTops.push(elementRef.current.children[i].offsetTop); + width: rect.width, + }) + currentOffsetTops.push(elementRef.current.children[i].offsetTop) } - console.debug( - '[PreciseScrolling] evaluateChildrenPositions', - '\n - numKids:', numKids - ); - positions.current = currentPositions; - offsetTops.current = currentOffsetTops; + console.debug('[PreciseScrolling] evaluateChildrenPositions', '\n - numKids:', numKids) + positions.current = currentPositions + offsetTops.current = currentOffsetTops } - }; + } - const throttleResize = React.useCallback(() => { - clearTimeout(timer.current); - console.info("@resize scheduled..."); + const throttleResize = useCallback(() => { + clearTimeout(timer.current) + console.info('@resize scheduled...') timer.current = setTimeout(() => { viewport.current = { width: window.innerWidth, - height: window.innerHeight + height: window.innerHeight, } - console.info("@resize done.", viewport.current); - evaluateChildrenPositions(); - }, 200); - }, []); + console.info('@resize done.', viewport.current) + evaluateChildrenPositions() + }, 200) + }, []) useLayoutEffect(() => { viewport.current = { width: window.innerWidth, - height: window.innerHeight + height: window.innerHeight, } - evaluateChildrenPositions(); - window.addEventListener("resize", throttleResize); + evaluateChildrenPositions() + window.addEventListener('resize', throttleResize) return () => { - window.removeEventListener("resize", throttleResize); - }; - }, [throttleResize]); + window.removeEventListener('resize', throttleResize) + } + }, [throttleResize]) - useScrollPosition(({ prevPos, currPos }) => { - const direction = prevPos.y < currPos.y - ? DirectionDown - : DirectionUp - const activeSteps = [] - let focusChanged = false - // this is computated on window ONLY. - // currPos.y it's always positive - for(let i = 0; i < offsetTops.current.length; i += 1) { - if (offsetTops.current[i] + positions.current[i].height < currPos.y) { - // disappeared on top - continue - } - if (offsetTops.current[i] > currPos.y + viewport.current.height) { - // disapperead below viewport - break + useScrollPosition( + ({ prevPos, currPos }) => { + const direction = prevPos.y < currPos.y ? DirectionDown : DirectionUp + const activeSteps = [] + let focusChanged = false + // this is computated on window ONLY. + // currPos.y it's always positive + for (let i = 0; i < offsetTops.current.length; i += 1) { + if (offsetTops.current[i] + positions.current[i].height < currPos.y) { + // disappeared on top + continue + } + if (offsetTops.current[i] > currPos.y + viewport.current.height) { + // disapperead below viewport + break + } + // calculate percentage of element coverage (for reading position mainly) + const relativeOffsetTop = offsetTops.current[i] - currPos.y + let visibleHeight = 0 + if (relativeOffsetTop < 0) { + visibleHeight = positions.current[i].height + relativeOffsetTop + } else if (positions.current[i].height + relativeOffsetTop < viewport.current.height) { + visibleHeight = positions.current[i].height + } else { + visibleHeight = viewport.current.height - relativeOffsetTop + } + const viewportCoverage = visibleHeight / viewport.current.height + const isFocused = + relativeOffsetTop < viewport.current.height / 2 && + positions.current[i].height + relativeOffsetTop > viewport.current.height / 2 + const step = new PreciseScrollingStep({ + idx: i, + coverage: viewportCoverage, + focus: isFocused, + ratio: visibleHeight / positions.current[i].height, + }) + // console.debug( + // 'visible', i, + // '\n - relativeOffsetTop:',relativeOffsetTop, + // '\n - height: ', positions.current[i].height, + // '\n - visibleHeight:', visibleHeight, + // '\n - viewPortCoverage:', viewportCoverage, + // '\n - isFocused:', isFocused + // ) + if (isFocused) { + if (!focus.current || focus.current.idx !== i) { + focus.current = step + focusChanged = true + } + } + activeSteps.push(step) } - // calculate percentage of element coverage (for reading position mainly) - const relativeOffsetTop = offsetTops.current[i] - currPos.y - let visibleHeight = 0 - if (relativeOffsetTop < 0) { - visibleHeight = positions.current[i].height + relativeOffsetTop - } else if(positions.current[i].height + relativeOffsetTop < viewport.current.height) { - visibleHeight = positions.current[i].height - } else { - visibleHeight = viewport.current.height - relativeOffsetTop + if (typeof onScroll === 'function') { + onScroll({ activeSteps, direction }) } - const viewportCoverage = visibleHeight / viewport.current.height - const isFocused = relativeOffsetTop < viewport.current.height / 2 - && positions.current[i].height + relativeOffsetTop > viewport.current.height / 2 - const step = new PreciseScrollingStep({ - idx: i, - coverage: viewportCoverage, - focus: isFocused, - ratio: visibleHeight/positions.current[i].height - }) - // console.debug( - // 'visible', i, - // '\n - relativeOffsetTop:',relativeOffsetTop, - // '\n - height: ', positions.current[i].height, - // '\n - visibleHeight:', visibleHeight, - // '\n - viewPortCoverage:', viewportCoverage, - // '\n - isFocused:', isFocused - // ) - if (isFocused) { - if (!focus.current || focus.current.idx !== i) { - focus.current = step - focusChanged = true - } + if (focusChanged && typeof onFocusChange === 'function') { + onFocusChange({ step: focus.current, direction }) } - activeSteps.push(step) - } - if (typeof onScroll === 'function') { - onScroll({ activeSteps, direction }) - } - if (focusChanged && typeof onFocusChange === 'function') { - onFocusChange({ step: focus.current, direction }) - } - console.debug( - '[PreciseScrolling] @useScrollPosition', - '\n - currPos:', currPos, - '\n - direction:', direction, - '\n - main step: ', focus.current - ); - }, [], elementRef, true, 200) + console.debug( + '[PreciseScrolling] @useScrollPosition', + '\n - currPos:', + currPos, + '\n - direction:', + direction, + '\n - main step: ', + focus.current, + ) + }, + [], + elementRef, + true, + 200, + ) console.debug('[PreciseScrolling] rendered') return ( -
+
{children}
) } export default PreciseScrolling -// export default React.memo(PreciseScrolling, (prevProps, nextProps) => { +// export default memo(PreciseScrolling, (prevProps, nextProps) => { // return prevProps.memoid === nextProps.memoid // }) diff --git a/src/components/PrefetchAuthors.jsx b/src/components/PrefetchAuthors.jsx index 9429ad4..219a026 100644 --- a/src/components/PrefetchAuthors.jsx +++ b/src/components/PrefetchAuthors.jsx @@ -26,7 +26,7 @@ const PrefetchAuthors = () => { } console.info('[PrefetchAuthors] authorMetadata:', authorMetadata) setAuthors(authorMetadata.results) - // eslint-disable-next-line react-hooks/exhaustive-deps + }, [status]) } diff --git a/src/components/SearchDocuments.jsx b/src/components/SearchDocuments.jsx index 2ef0df9..3283a17 100644 --- a/src/components/SearchDocuments.jsx +++ b/src/components/SearchDocuments.jsx @@ -1,8 +1,8 @@ -import React from 'react' import { useInfiniteDocuments } from '@c2dh/react-miller' import { useOnScreen } from '../hooks/viewport' import DocumentItem from './DocumentItem' import '../styles/components/SearchDocuments.css' +import { useEffect } from 'react' const SearchDocuments = ({ q = '', filters = {}, limit = 20, orderby = '-id' }) => { const params = { @@ -21,7 +21,7 @@ const SearchDocuments = ({ q = '', filters = {}, limit = 20, orderby = '-id' }) const count = parseInt(data?.pages[0]?.count || 0, 10) const [{ isIntersecting }, ref] = useOnScreen() console.info('isIntersecting', isIntersecting) - React.useEffect(() => { + useEffect(() => { let timeoutId = null const delayed = () => { clearTimeout(timeoutId) diff --git a/src/components/SearchField.jsx b/src/components/SearchField.jsx index a3c6457..e9fbffe 100644 --- a/src/components/SearchField.jsx +++ b/src/components/SearchField.jsx @@ -1,4 +1,4 @@ -import React, { useLayoutEffect, useRef } from 'react' +import { useLayoutEffect, useRef } from 'react' import { useTranslation } from 'react-i18next' import { Form, InputGroup } from 'react-bootstrap' import { StatusIdle, StatusFetching } from '../hooks/data' diff --git a/src/components/SearchStories.jsx b/src/components/SearchStories.jsx index 004b4c0..92988a6 100644 --- a/src/components/SearchStories.jsx +++ b/src/components/SearchStories.jsx @@ -35,7 +35,7 @@ const SearchStories = ({ filters = {}, limit = 20, orderby = '-id' }) => { )} {status === StatusSuccess && count > 0 && - stories.map((story, i) => ( + stories.map((story) => (
  • {/*