chore: fix eslint issues

.eslintrc.js

@@ -2,16 +2,17 @@ module.exports = {
   extends: ['algolia', 'algolia/react'],
   rules: {
     'eslint-comments/disable-enable-pair': 0,
-    // Do not enforce a specific import order
-    'import/order': 0,
-    // Allow function components
-    'react/function-component-definition': 0,
+    // Enforce function declaration for components
+    'react/function-component-definition': [
+      'error',
+      {
+        'named-components': 'function-declaration',
+      },
+    ],
     // Allow boolean props without explicit values
     'react/jsx-boolean-value': 0,
     // Allow JSX content in .js files
     'react/jsx-filename-extension': 0,
-    // Do not enforce event listeners naming conventions
-    'react/jsx-handler-names': 0,
     // Allow passing function references to event listeners
     'react/jsx-no-bind': 0,
     // Avoid errors about `UNSAFE` lifecycles (e.g. `UNSAFE_componentWillMount`)

src/App.js

@@ -2,9 +2,9 @@ import React, { createPortal } from 'preact/compat';
 import { connectHitInsights } from 'react-instantsearch-dom';
 import { useNavigate, useLocation } from 'react-router-dom';
 
-import { getUrlFromState, getStateFromUrl, createURL } from './router';
-import { useSearchClient, useInsights, useMatchMedia } from './hooks';
 import { SearchButton, Search } from './components';
+import { useSearchClient, useInsights, useMatchMedia } from './hooks';
+import { getUrlFromState, getStateFromUrl, createURL } from './router';
 
 export const AppContext = React.createContext(null);
 export const SearchContext = React.createContext(null);

src/components/Banner.js

@@ -3,7 +3,7 @@ import { QueryRuleCustomData } from 'react-instantsearch-dom';
 
 import './Banner.scss';
 
-export const Banner = () => {
+export function Banner() {
   return (
     <QueryRuleCustomData>
       {({ items }) => {
@@ -23,4 +23,4 @@ export const Banner = () => {
       }}
     </QueryRuleCustomData>
   );
-};
+}

src/components/ColorList.js

@@ -2,8 +2,8 @@ import React from 'preact/compat';
 import { connectRefinementList } from 'react-instantsearch-dom';
 
 import './ColorList.scss';
-import { FacetSearchBox } from './SearchBox/FacetSearchBox';
 import { PartialHighlight } from './PartialHighlight';
+import { FacetSearchBox } from './SearchBox/FacetSearchBox';
 
 export const ColorList = connectRefinementList(function ColorList(props) {
   const [query, setQuery] = React.useState('');

src/components/FiltersButton.js

@@ -1,8 +1,9 @@
 import React from 'preact/compat';
 
-import { FilterIcon } from './FilterIcon';
 import { useSearchContext } from '../hooks';
 
+import { FilterIcon } from './FilterIcon';
+
 export function FiltersButton({ onClick }) {
   const { refinementCount } = useSearchContext();
 

src/components/Hits.js

@@ -2,6 +2,7 @@ import React from 'preact/compat';
 import { connectHits } from 'react-instantsearch-dom';
 
 import { useAppContext } from '../hooks';
+
 import { Pagination } from './Pagination';
 
 export const Hits = connectHits((props) => {

src/components/InfiniteHits.js

@@ -16,7 +16,7 @@ export const InfiniteHits = connectInfiniteHits((props) => {
         <button
           type="button"
           className="ais-InfiniteHits-loadPrevious"
-          onClick={props.refinePrevious}
+          onClick={() => props.refinePrevious()}
         >
           Show previous
         </button>

src/components/NoResultsHandler.js

@@ -7,11 +7,11 @@ import {
   connectHits,
 } from 'react-instantsearch-dom';
 
-import { useAppContext, useSearchContext } from '../hooks';
 import {
   NO_RESULTS_INDEX_NAME,
   QUERY_SUGGESTIONS_INDEX_NAME,
 } from '../constants';
+import { useAppContext, useSearchContext } from '../hooks';
 
 export const NoResultsHandler = connectStateResults(function ResultsWrapper(
   props

src/components/ProductList.js

@@ -1,16 +1,16 @@
 import React from 'preact/compat';
 
+import { useAppContext } from '../hooks';
+
 import { Hits } from './Hits';
 import { InfiniteHits } from './InfiniteHits';
 
-import { useAppContext } from '../hooks';
-
-export const ProductList = (props) => {
+export function ProductList(props) {
   const { isMobile } = useAppContext();
 
   if (isMobile) {
     return <InfiniteHits {...props} />;
   }
 
   return <Hits {...props} />;
-};
+}

src/components/QueryRulesHandler.js

@@ -21,12 +21,12 @@ const getRulesContextFromSearchState = ({ refinementList = {}, menu = {} }) => {
   }, {});
 };
 
-export const QueryRulesHandler = (props) => {
+export function QueryRulesHandler(props) {
   const ruleContexts = getRulesContextFromSearchState(props.searchState);
 
   if (Object.keys(ruleContexts).length === 0) {
     return null;
   }
 
   return <QueryRuleContext trackedFilters={ruleContexts} />;
-};
+}

src/components/Refinements.js

@@ -6,10 +6,11 @@ import {
 } from 'react-instantsearch-dom';
 
 import { useAppContext } from '../hooks';
-import { Panel } from './Panel';
+
 import { ColorList } from './ColorList';
-import { Slider } from './Slider';
+import { Panel } from './Panel';
 import { SizeList } from './SizeList';
+import { Slider } from './Slider';
 
 function RefinementWidget({ type, ...props }) {
   switch (type) {

src/components/Search.js

@@ -2,19 +2,20 @@ import React from 'preact/compat';
 import { InstantSearch, Configure, SortBy } from 'react-instantsearch-dom';
 
 import { useAppContext, useSearchContext } from '../hooks';
+
 import { Banner } from './Banner';
+import { CloseIcon } from './CloseIcon';
 import { CurrentRefinements } from './CurrentRefinements';
+import { FiltersButton } from './FiltersButton';
+import { NoResultsHandler } from './NoResultsHandler';
+import { ProductList } from './ProductList';
 import { QueryRulesHandler } from './QueryRulesHandler';
 import { Refinements } from './Refinements';
+import { ResetButton } from './ResetButton';
 import { HeaderSearchBox } from './SearchBox';
+import { SeeResultsButton } from './SeeResultsButton';
 import { Stats } from './Stats';
-import { CloseIcon } from './CloseIcon';
-import { NoResultsHandler } from './NoResultsHandler';
-import { ProductList } from './ProductList';
 import { Views } from './Views';
-import { FiltersButton } from './FiltersButton';
-import { SeeResultsButton } from './SeeResultsButton';
-import { ResetButton } from './ResetButton';
 
 export function Search(props) {
   const { config, view, searchParameters, isMobile } = useAppContext();

src/components/SearchBox/ConnectedSearchBox.js

@@ -2,6 +2,7 @@ import React from 'preact/compat';
 import { connectSearchBox } from 'react-instantsearch-dom';
 
 import { useAppContext } from '../../hooks';
+
 import { PredictiveSearchBox } from './PredictiveSearchBox';
 import { SearchBox as SearchBoxComponent } from './SearchBox';
 

src/components/SearchBox/FacetSearchBox.js

@@ -1,6 +1,6 @@
 import React from 'preact/compat';
 
-export const FacetSearchBox = (props) => {
+export function FacetSearchBox(props) {
   return (
     <div className="ais-SearchBox">
       <form
@@ -59,4 +59,4 @@ export const FacetSearchBox = (props) => {
       </form>
     </div>
   );
-};
+}

src/components/SearchBox/PredictiveSearchBox.js

@@ -3,9 +3,10 @@ import { Index, connectHits, Configure } from 'react-instantsearch-dom';
 
 import { QUERY_SUGGESTIONS_INDEX_NAME } from '../../constants';
 import { ReverseHighlight } from '../ReverseHighlight';
+
 import { SearchBox } from './SearchBox';
 
-export const PredictiveSearchBox = (props) => {
+export function PredictiveSearchBox(props) {
   const [suggestion, setSuggestion] = React.useState(null);
 
   return (
@@ -57,7 +58,7 @@ export const PredictiveSearchBox = (props) => {
       </Index>
     </>
   );
-};
+}
 
 const Suggestions = connectHits(function Suggestions({
   query,

src/components/SearchBox/SearchBox.js

@@ -1,6 +1,6 @@
 import React from 'preact/compat';
 
-export const SearchBox = (props) => {
+export function SearchBox(props) {
   const inputRef = React.useRef(null);
 
   function onSubmit(event) {
@@ -138,4 +138,4 @@ export const SearchBox = (props) => {
       </form>
     </div>
   );
-};
+}

src/components/SizeList.js

@@ -1,8 +1,8 @@
 import React from 'preact/compat';
 import { connectRefinementList } from 'react-instantsearch-dom';
 
-import { FacetSearchBox } from './SearchBox/FacetSearchBox';
 import { PartialHighlight } from './PartialHighlight';
+import { FacetSearchBox } from './SearchBox/FacetSearchBox';
 
 export const SizeList = connectRefinementList(function SizeList(props) {
   const [query, setQuery] = React.useState('');

src/config/settings.js

@@ -14,6 +14,7 @@
 */
 
 import React from 'preact/compat';
+
 import { Hit } from './Hit';
 
 /*

src/hooks/useSearchClient.js

@@ -1,11 +1,11 @@
-import React from 'preact/compat';
 import algoliasearch from 'algoliasearch/lite';
+import React from 'preact/compat';
 
-import { version } from '../version';
 import {
   NO_RESULTS_INDEX_NAME,
   QUERY_SUGGESTIONS_INDEX_NAME,
 } from '../constants';
+import { version } from '../version';
 
 export function useSearchClient(config) {
   const appId = config.appId;

src/index.js

@@ -5,9 +5,9 @@ import './reset.scss';
 import './theme.scss';
 import './App.scss';
 
+import { App } from './App';
 import config from './config';
 import rules from './config/rules';
-import { App } from './App';
 import { getDomElement, validateConfig } from './utils';
 
 validateConfig(config, rules);