enforce function declaration for components

algolia · Mar 16, 2022 · 32a7892 · 32a7892
1 parent 46b43c5
commit 32a7892
Show file tree

Hide file tree

Showing 22 changed files with 54 additions and 47 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -2,6 +2,13 @@ module.exports = {
   extends: ['algolia', 'algolia/react'],
   rules: {
     'eslint-comments/disable-enable-pair': 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

diff --git a/src/App.js b/src/App.js
@@ -9,7 +9,7 @@ import { getUrlFromState, getStateFromUrl, createURL } from './router';
 export const AppContext = React.createContext(null);
 export const SearchContext = React.createContext(null);
 
-export const App = ({ config }) => {
+export function App({ config }) {
   const navigate = useNavigate();
   const location = useLocation();
   const searchClient = useSearchClient(config);
@@ -228,4 +228,4 @@ export const App = ({ config }) => {
         )}
     </AppContext.Provider>
   );
-};
+}
diff --git a/src/components/Banner.js b/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>
   );
-};
+}
diff --git a/src/components/CloseIcon.js b/src/components/CloseIcon.js
@@ -1,6 +1,6 @@
 import React from 'preact/compat';
 
-export const CloseIcon = (props) => {
+export function CloseIcon(props) {
   return (
     <svg viewBox="0 0 31 32" width="31" height="32" {...props}>
       <path
@@ -13,4 +13,4 @@ export const CloseIcon = (props) => {
       />
     </svg>
   );
-};
+}
diff --git a/src/components/FilterIcon.js b/src/components/FilterIcon.js
@@ -1,6 +1,6 @@
 import React from 'preact/compat';
 
-export const FilterIcon = (props) => {
+export function FilterIcon(props) {
   return (
     <svg viewBox="0 0 16 14" {...props}>
       <path
@@ -14,4 +14,4 @@ export const FilterIcon = (props) => {
       ></path>
     </svg>
   );
-};
+}
diff --git a/src/components/FiltersButton.js b/src/components/FiltersButton.js
@@ -4,7 +4,7 @@ import { useSearchContext } from '../hooks';
 
 import { FilterIcon } from './FilterIcon';
 
-export const FiltersButton = ({ onClick }) => {
+export function FiltersButton({ onClick }) {
   const { refinementCount } = useSearchContext();
 
   return (
@@ -21,4 +21,4 @@ export const FiltersButton = ({ onClick }) => {
       )}
     </button>
   );
-};
+}
diff --git a/src/components/Icons/IconViewGrid.js b/src/components/Icons/IconViewGrid.js
@@ -1,6 +1,6 @@
 import React from 'preact/compat';
 
-export const IconViewGrid = (props) => {
+export function IconViewGrid(props) {
   return (
     <svg width={16} height={16} viewBox="0 0 16 16" {...props}>
       <path
@@ -10,4 +10,4 @@ export const IconViewGrid = (props) => {
       />
     </svg>
   );
-};
+}
diff --git a/src/components/Icons/IconViewList.js b/src/components/Icons/IconViewList.js
@@ -1,6 +1,6 @@
 import React from 'preact/compat';
 
-export const IconViewList = (props) => {
+export function IconViewList(props) {
   return (
     <svg width={16} height={16} viewBox="0 0 14 14" {...props}>
       <path
@@ -10,4 +10,4 @@ export const IconViewList = (props) => {
       />
     </svg>
   );
-};
+}
diff --git a/src/components/NoResultsHandler.js b/src/components/NoResultsHandler.js
@@ -159,7 +159,7 @@ const HitsPreview = connectHits(function MoreHits(props) {
   );
 });
 
-const QuerySuggestions = () => {
+function QuerySuggestions() {
   const { config, searchState, searchParameters } = useAppContext();
 
   if (!config.suggestionsIndex) {
@@ -177,7 +177,7 @@ const QuerySuggestions = () => {
       <QuerySuggestionsHits />
     </Index>
   );
-};
+}
 
 const QuerySuggestionsHits = connectHits(function QuerySuggestionsHits(props) {
   const { setQuery } = useSearchContext();

diff --git a/src/components/Panel.js b/src/components/Panel.js
@@ -2,14 +2,14 @@ import React from 'preact/compat';
 
 import './Panel.scss';
 
-export const Panel = ({
+export function Panel({
   isOpened,
   header,
   footer,
   onToggle,
   children,
   ...rest
-}) => {
+}) {
   return (
     <div
       className={[
@@ -53,4 +53,4 @@ export const Panel = ({
       {footer && <div className="ais-Panel-footer">{footer}</div>}
     </div>
   );
-};
+}
diff --git a/src/components/PartialHighlight.js b/src/components/PartialHighlight.js
@@ -2,12 +2,12 @@ import React from 'preact/compat';
 
 import { getAttributeValueByPath, parseAttribute } from '../utils';
 
-export const PartialHighlight = ({
+export function PartialHighlight({
   hit,
   attribute,
   tagName = 'mark',
   ...rest
-}) => {
+}) {
   let parts = [];
 
   try {
@@ -43,7 +43,7 @@ export const PartialHighlight = ({
       })}
     </span>
   );
-};
+}
 
 function parsePartialHighlightedAttribute({
   hit,

diff --git a/src/components/ProductList.js b/src/components/ProductList.js
@@ -5,12 +5,12 @@ import { useAppContext } from '../hooks';
 import { Hits } from './Hits';
 import { InfiniteHits } from './InfiniteHits';
 
-export const ProductList = (props) => {
+export function ProductList(props) {
   const { isMobile } = useAppContext();
 
   if (isMobile) {
     return <InfiniteHits {...props} />;
   }
 
   return <Hits {...props} />;
-};
+}
diff --git a/src/components/QueryRulesHandler.js b/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} />;
-};
+}
diff --git a/src/components/Refinements.js b/src/components/Refinements.js
@@ -12,7 +12,7 @@ import { Panel } from './Panel';
 import { SizeList } from './SizeList';
 import { Slider } from './Slider';
 
-const RefinementWidget = ({ type, ...props }) => {
+function RefinementWidget({ type, ...props }) {
   switch (type) {
     case 'color':
       return <ColorList {...props} />;
@@ -59,7 +59,7 @@ const RefinementWidget = ({ type, ...props }) => {
     default:
       return null;
   }
-};
+}
 
 function getPanelId(refinement) {
   return refinement.options.attributes

diff --git a/src/components/ReverseHighlight.js b/src/components/ReverseHighlight.js
@@ -2,12 +2,12 @@ import React from 'preact/compat';
 
 import { getAttributeValueByPath, parseAttribute } from '../utils';
 
-export const ReverseHighlight = ({
+export function ReverseHighlight({
   hit,
   attribute,
   tagName = 'mark',
   ...rest
-}) => {
+}) {
   let parts = [];
 
   try {
@@ -43,7 +43,7 @@ export const ReverseHighlight = ({
       })}
     </span>
   );
-};
+}
 
 function parseReverseHighlightedAttribute({
   hit,

diff --git a/src/components/Search.js b/src/components/Search.js
@@ -17,7 +17,7 @@ import { SeeResultsButton } from './SeeResultsButton';
 import { Stats } from './Stats';
 import { Views } from './Views';
 
-export const Search = (props) => {
+export function Search(props) {
   const { config, view, searchParameters, isMobile } = useAppContext();
   const { isSearchStalled } = useSearchContext();
 
@@ -166,4 +166,4 @@ export const Search = (props) => {
       </div>
     </InstantSearch>
   );
-};
+}
diff --git a/src/components/SearchBox/FacetSearchBox.js b/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>
   );
-};
+}
diff --git a/src/components/SearchBox/PredictiveSearchBox.js b/src/components/SearchBox/PredictiveSearchBox.js
@@ -6,7 +6,7 @@ import { ReverseHighlight } from '../ReverseHighlight';
 
 import { SearchBox } from './SearchBox';
 
-export const PredictiveSearchBox = (props) => {
+export function PredictiveSearchBox(props) {
   const [suggestion, setSuggestion] = React.useState(null);
 
   return (
@@ -58,7 +58,7 @@ export const PredictiveSearchBox = (props) => {
       </Index>
     </>
   );
-};
+}
 
 const Suggestions = connectHits(function Suggestions({
   query,

diff --git a/src/components/SearchBox/SearchBox.js b/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>
   );
-};
+}
diff --git a/src/components/SearchButton.js b/src/components/SearchButton.js
@@ -31,7 +31,7 @@ export const SearchButton = ({ onClick }) => {
   );
 };
 
-const SearchIcon = (props) => {
+function SearchIcon(props) {
   return (
     <svg
       className="uni-SearchButton-Icon"
@@ -51,4 +51,4 @@ const SearchIcon = (props) => {
       />
     </svg>
   );
-};
+}
diff --git a/src/components/Views.js b/src/components/Views.js
@@ -2,7 +2,7 @@ import React from 'preact/compat';
 
 import { IconViewGrid, IconViewList } from './Icons';
 
-export const Views = (props) => {
+export function Views(props) {
   return (
     <ul className="uni-BodyHeader-view">
       <button
@@ -36,4 +36,4 @@ export const Views = (props) => {
       </button>
     </ul>
   );
-};
+}
diff --git a/src/config/Hit.js b/src/config/Hit.js
@@ -3,7 +3,7 @@ import { Highlight, Snippet } from 'react-instantsearch-dom';
 
 import './Hit.scss';
 
-export const Hit = ({ hit, insights, view }) => {
+export function Hit({ hit, insights, view }) {
   return (
     <article className="uni-Hit">
       <a
@@ -60,9 +60,9 @@ export const Hit = ({ hit, insights, view }) => {
       </a>
     </article>
   );
-};
+}
 
-const CartIcon = (props) => {
+function CartIcon(props) {
   return (
     <svg
       viewBox="0 0 24 24"
@@ -77,4 +77,4 @@ const CartIcon = (props) => {
       <path d="M5 1H1l0 0H5l2.7 13.4c0.2 1 1 1.6 2 1.6h9.7c1 0 1.8-0.7 2-1.6L23 6H6" />
     </svg>
   );
-};
+}