linting

lib/src/Components/AppShell/ContextWrapper.tsx

@@ -31,24 +31,24 @@ const CloseButton = ({ closeToast }: CloseButtonProps) => (
 
 export const ContextWrapper = ({ children }: { children: React.ReactNode }) => {
   const isWrapped = useContext(ContextCheckContext)
-
   const isInsideRouter = useInRouterContext()
 
-  let returnValue = children
+  // Build the component tree from inside out
+  let content = <>{children}</>
 
   if (!isWrapped) {
-    returnValue = (
+    content = (
       <ContextCheckContext.Provider value={true}>
-        <Wrappers>{returnValue}</Wrappers>
+        <Wrappers>{content}</Wrappers>
       </ContextCheckContext.Provider>
     )
   }
 
   if (!isInsideRouter) {
-    returnValue = <Router>{returnValue}</Router>
+    content = <Router>{content}</Router>
   }
 
-  return returnValue
+  return content
 }
 
 // eslint-disable-next-line react/prop-types

lib/src/Components/AppShell/UserControl.tsx

@@ -32,7 +32,7 @@ export const UserControl = () => {
           return 'Bye bye'
         },
         // other options
-        icon: '👋',
+        icon: () => '👋',
       },
       error: {
         render({ data }) {

lib/src/Components/Auth/LoginPage.tsx

@@ -65,7 +65,7 @@ export function LoginPage({ inviteApi, showRequestPassword }: Props) {
           return `Hi ${data?.first_name ? data.first_name : 'Traveler'}`
         },
         // other options
-        icon: '✌️',
+        icon: () => '✌️',
       },
       error: {
         render({ data }) {

lib/src/Components/Auth/RequestPasswordPage.tsx

@@ -24,7 +24,7 @@ export function RequestPasswordPage({ resetUrl }: { resetUrl: string }) {
           return 'Check your mailbox'
         },
         // other options
-        icon: '📬',
+        icon: () => '📬',
       },
       error: {
         render({ data }) {

lib/src/Components/Auth/SignupPage.tsx

@@ -29,7 +29,7 @@ export function SignupPage() {
           return `Hi ${data?.first_name ? data.first_name : 'Traveler'}`
         },
         // other options
-        icon: '✌️',
+        icon: () => '✌️',
       },
       error: {
         render({ data }) {

lib/src/Components/Input/Autocomplete.tsx

@@ -23,17 +23,18 @@ export const Autocomplete = ({
 }) => {
   const [filteredSuggestions, setFilteredSuggestions] = useState<any[]>([])
   const [heighlightedSuggestion, setHeighlightedSuggestion] = useState<number>(0)
+  const inputRef = useRef<HTMLInputElement>(null)
 
   useEffect(() => {
     pushFilteredSuggestions && setFilteredSuggestions(pushFilteredSuggestions)
   }, [pushFilteredSuggestions])
 
   useEffect(() => {
-    setFocus && inputRef.current?.focus()
+    if (setFocus) {
+      inputRef.current?.focus()
+    }
   }, [setFocus])
 
-  const inputRef = useRef<HTMLInputElement>()
-
   const getSuggestions = (value) => {
     const inputValue = value.trim().toLowerCase()
     const inputLength = inputValue.length

lib/src/Components/Map/hooks/useClusterRef.tsx

@@ -6,16 +6,16 @@ import { createContext, useContext, useState } from 'react'
 type UseClusterRefManagerResult = ReturnType<typeof useClusterRefManager>
 
 const ClusterRefContext = createContext<UseClusterRefManagerResult>({
-  clusterRef: {} as React.MutableRefObject<undefined>,
+  clusterRef: {} as React.RefObject<undefined>,
   setClusterRef: () => {},
 })
 
 function useClusterRefManager(): {
   clusterRef: any
-  setClusterRef: React.Dispatch<React.SetStateAction<React.MutableRefObject<undefined>>>
+  setClusterRef: React.Dispatch<React.SetStateAction<React.RefObject<undefined>>>
 } {
-  const [clusterRef, setClusterRef] = useState<React.MutableRefObject<undefined>>(
-    {} as React.MutableRefObject<undefined>,
+  const [clusterRef, setClusterRef] = useState<React.RefObject<undefined>>(
+    {} as React.RefObject<undefined>,
   )
 
   return { clusterRef, setClusterRef }

lib/src/Components/Map/hooks/useTimeout.tsx

@@ -1,20 +1,17 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-/* eslint-disable @typescript-eslint/no-unsafe-argument */
-/* eslint-disable @typescript-eslint/no-unsafe-return */
-/* eslint-disable @typescript-eslint/no-unsafe-call */
-/* eslint-disable @typescript-eslint/no-unsafe-assignment */
 import { useCallback, useEffect, useRef } from 'react'
 
-export const useTimeout = (callback, delay) => {
+export const useTimeout = (callback: () => void, delay: number) => {
   const callbackRef = useRef(callback)
-  const timeoutRef = useRef<any>()
+  const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null)
 
   useEffect(() => {
     callbackRef.current = callback
   }, [callback])
 
   const set = useCallback(() => {
-    timeoutRef.current = setTimeout(() => callbackRef.current(), delay)
+    timeoutRef.current = setTimeout(() => {
+      callbackRef.current()
+    }, delay)
   }, [delay])
 
   const clear = useCallback(() => {