chore: fix eslint issues

Author: dhayab

.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} />;
-};
+}