refactor(search-input): rename variables and remove unnecessary ESLin…

…t rule disable

src/components/header/index.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/no-unused-vars */
 import {
   Header as HeaderBrand,
   Link as VtexLink,

src/components/search-input/functions.ts

@@ -1,6 +1,6 @@
 import { Hit } from 'react-instantsearch-core'
 
-export const breadcrumbs = (hit: Hit) => {
+export const getBreadcrumbs = (hit: Hit) => {
   const urlSplit = hit.url.split('/').slice(5)
   const endpointSplit = urlSplit.map((e) => e.split('#'))
   return endpointSplit.flat()

src/components/search-input/index.tsx

@@ -1,9 +1,8 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
 import algoliasearch from 'algoliasearch/lite'
 import { InstantSearch } from 'react-instantsearch-dom'
 
 import SearchBox from './search-box'
-import Results from './results-component'
+import Results from './results-box'
 import { Box } from '@vtex/brand-ui'
 import { useRef, useState } from 'react'
 import useClickOutside from 'utils/hooks/useClickOutside'
@@ -20,19 +19,14 @@ export default function SearchInput() {
   const resultsBox = useRef<HTMLElement>()
   useClickOutside(resultsBox, setfocusOut)
   return (
-    <>
-      <InstantSearch
-        searchClient={searchClient}
-        indexName="docsearch-scraper-md-files"
-      >
-        <Box
-          onFocus={() => setfocusOut({ modaltoggle: true })}
-          ref={resultsBox}
-        >
-          <SearchBox />
-          {focusOut.modaltoggle && <Results />}
-        </Box>
-      </InstantSearch>
-    </>
+    <InstantSearch
+      searchClient={searchClient}
+      indexName="docsearch-scraper-md-files"
+    >
+      <Box onFocus={() => setfocusOut({ modaltoggle: true })} ref={resultsBox}>
+        <SearchBox />
+        {focusOut.modaltoggle && <Results />}
+      </Box>
+    </InstantSearch>
   )
 }

src/components/search-input/results-component.tsx → src/components/search-input/results-box.tsx

@@ -6,7 +6,7 @@ import { Hit, SearchState } from 'react-instantsearch-core'
 import { Box, Flex, IconCaret, Text } from '@vtex/brand-ui'
 
 import { getIcon } from 'utils/constants'
-import { breadcrumbs } from './functions'
+import { getBreadcrumbs } from './functions'
 import styles from './styles'
 
 interface HitProps {
@@ -15,7 +15,7 @@ interface HitProps {
 }
 
 const Hit = ({ hit, setSearchStateActive }: HitProps) => {
-  const breadCrumbs = breadcrumbs(hit)
+  const breadcrumbsList = getBreadcrumbs(hit)
 
   const DocIcon = getIcon(hit.doctype)
 
@@ -31,13 +31,13 @@ const Hit = ({ hit, setSearchStateActive }: HitProps) => {
           </Flex>
           <Flex sx={styles.alignCenter}>
             <Text sx={styles.hitBreadCrumbIn}>{`In ${hit.doctype}`}</Text>
-            {breadCrumbs.length > 0 && (
+            {breadcrumbsList.length > 0 && (
               <IconCaret direction="right" sx={styles.hitBreadCrumbArrow} />
             )}
-            {breadCrumbs.map((filter: string, index: number) => (
+            {breadcrumbsList.map((filter: string, index: number) => (
               <Flex sx={styles.alignCenter} key={`${filter}${index}`}>
                 <Text sx={styles.hitBreadCrumb}>{filter}</Text>
-                {index < breadCrumbs.length - 1 ? (
+                {index < breadcrumbsList.length - 1 ? (
                   <IconCaret direction="right" sx={styles.hitBreadCrumbArrow} />
                 ) : null}
               </Flex>