eslint fix import and not used vars

.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"
+ }
+ }
+}

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"
  }

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 = () => {
  <MatomoProvider value={matomo}>
  <BrowserRouter>
  {isMobile ? (
- <React.Suspense fallback={null}>
+ <Suspense fallback={null}>
  <MobileHeader />{' '}
- </React.Suspense>
+ </Suspense>
  ) : (
- <React.Suspense fallback={null}>
+ <Suspense fallback={null}>
  <Header />
- </React.Suspense>
+ </Suspense>
  )}
  <LanguageRouter />
  <MatomoTracker />
@@ -64,104 +64,104 @@ const App = () => {
  <Route
  path=""
  element={
- <React.Suspense fallback={<div className="h-75" />}>
+ <Suspense fallback={<div className="h-75" />}>
  <Home isMobile={isMobile} />
- </React.Suspense>
+ </Suspense>
  }
  />
 
  <Route
  path="people"
  element={
- <React.Suspense fallback={<>...</>}>
+ <Suspense fallback={<>...</>}>
  <People isMobile={isMobile} />
- </React.Suspense>
+ </Suspense>
  }
  ></Route>
  <Route
  path="story/:storyId"
  element={
- <React.Suspense fallback={<>...</>}>
+ <Suspense fallback={<>...</>}>
  <Story />
- </React.Suspense>
+ </Suspense>
  }
  />
  <Route
  path="convoy/:storyId"
  element={
- <React.Suspense fallback={<>...</>}>
+ <Suspense fallback={<>...</>}>
  <Convoy />
- </React.Suspense>
+ </Suspense>
  }
  />
  <Route
  path="biographies"
  element={
- <React.Suspense fallback={<>...</>}>
+ <Suspense fallback={<>...</>}>
  <Biographies />
- </React.Suspense>
+ </Suspense>
  }
  />
  <Route
  path="author/:authorId"
  element={
- <React.Suspense fallback={<>...</>}>
+ <Suspense fallback={<>...</>}>
  <Biographies />
- </React.Suspense>
+ </Suspense>
  }
  />
  <Route
  path="doc/:docId"
  element={
- <React.Suspense fallback={<>...</>}>
+ <Suspense fallback={<>...</>}>
  <Document />
- </React.Suspense>
+ </Suspense>
  }
  />
  <Route
  path="person/:personId"
  element={
- <React.Suspense fallback={<>...</>}>
+ <Suspense fallback={<>...</>}>
  <Person />
- </React.Suspense>
+ </Suspense>
  }
  />
  <Route
  path="pages/:pageId"
  element={
- <React.Suspense fallback={<>...</>}>
- <Page
- children={({ pageId }) =>
+ <Suspense fallback={<>...</>}>
+ <Page>
+ {({ pageId }) =>
  pageId === 'terms-of-use' ? (
  <TermsOfUseCookies defaultAcceptCookies={AcceptCookies} />
  ) : null
  }
- ></Page>
- </React.Suspense>
+ </Page>
+ </Suspense>
  }
  />
  <Route
  path="pages/:pageId"
  element={
- <React.Suspense fallback={<>...</>}>
+ <Suspense fallback={<>...</>}>
  <Page />
- </React.Suspense>
+ </Suspense>
  }
  />
  <Route
  path="search"
  element={
- <React.Suspense fallback={<>...</>}>
+ <Suspense fallback={<>...</>}>
  <Search />
- </React.Suspense>
+ </Suspense>
  }
  />
  <Route
  path="*"
  element={
- <React.Suspense fallback={<>...</>}>
+ <Suspense fallback={<>...</>}>
  <NotFound />
- </React.Suspense>
+ </Suspense>
  }
  />
  </Route>

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'

src/components/AuthorItem.jsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import LangLink from './LangLink'
 
 const AuthorItem = ({ author, className, to = '/biographies?author=:author' }) => (

src/components/AvailableLanguages.jsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import { LanguageCodes, MillerLanguages } from '../constants'
 import { useTranslation } from 'react-i18next'
 

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'

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'

src/components/CoverItems.jsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import '../styles/components/CoverItems.css'
 
 const CoverItems = ({ covers = [], size = 120, style, ...rest }) => {

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'

src/components/DocumentDate.jsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import { useDate } from '../hooks/date'
 
 const DocumentDate = ({

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)

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'

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'

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')}
  </DocumentDate>
  {typeof doc.data.creator === 'string' && (
- <DocumentMetadataField label={t('creator')} children={doc.data.creator || t('nd')} />
+ <DocumentMetadataField label={t('creator')}>
+ {doc.data.creator || t('nd')}
+ </DocumentMetadataField>
  )}
  {typeof doc.data.author === 'string' && (
  <DocumentMetadataField label={t('author')}>{doc.data.author}</DocumentMetadataField>
@@ -79,12 +81,12 @@ const DocumentMetadata = ({ doc, memoid }) => {
  </DocumentMetadataField>
  )}
  {typeof doc.data.copyright === 'string' && (
- <DocumentMetadataField label={t('copyright')} children={doc.data.copyright} />
+ <DocumentMetadataField label={t('copyright')}>{doc.data.copyright}</DocumentMetadataField>
  )}
  <section className="mt-3">
  {references !== null &&
  references.map((d) => (
- <React.Fragment key={d.id}>
+ <Fragment key={d.id}>
  <label>{t('citeAs')}</label>
  <DocumentReference className="" key={d.id} doc={d} />
 
@@ -95,7 +97,7 @@ const DocumentMetadata = ({ doc, memoid }) => {
  <DocumentMetadataField label={t('moreInfo')}>
  {d.data?.csljson?.abstract}
  </DocumentMetadataField>
- </React.Fragment>
+ </Fragment>
  ))}
  </section>
  </div>

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'

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'

src/components/DocumentViewer/DocumentViewerAudio.jsx

@@ -1,7 +1,5 @@
-import React from 'react'
-
-const DocumentViewerImage = ({ doc, width, height }) => {
- return <div></div>
+const DocumentViewerAudio = () => {
+ return <div className="unsupported"></div>
 }
 
-export default DocumentViewerImage
+export default DocumentViewerAudio

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 }) => (
- <React.Fragment>
+ <Fragment>
  {!isMobile && (
  <div className="DocumentViewerImage_tools position-absolute">
  <button className="zoomIn" onClick={() => zoomIn()}>
@@ -76,9 +76,9 @@ const DocumentViewerImage = ({
  )}
 
  <TransformComponent wrapperStyle={{ width: availableWidth, height: availableHeight }}>
- <img src={url} alt={caption} onLoad={(_) => centerView(perfectZoom)} />
+ <img src={url} alt={caption} onLoad={() => centerView(perfectZoom)} />
  </TransformComponent>
- </React.Fragment>
+ </Fragment>
  )}
  </TransformWrapper>
  </div>

src/components/DocumentViewer/DocumentViewerPdf.jsx

@@ -1,6 +1,4 @@
-import React from 'react'
-
-const DocumentViewerImage = ({ doc, width, height }) => {
+const DocumentViewerImage = () => {
  return <div></div>
 }