diff --git a/lib/src/Components/AppShell/ContextWrapper.tsx b/lib/src/Components/AppShell/ContextWrapper.tsx
index 646aaed9..0f4e42eb 100644
--- a/lib/src/Components/AppShell/ContextWrapper.tsx
+++ b/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 = (
- {returnValue}
+ {content}
)
}
if (!isInsideRouter) {
- returnValue = {returnValue}
+ content = {content}
}
- return returnValue
+ return content
}
// eslint-disable-next-line react/prop-types
diff --git a/lib/src/Components/AppShell/UserControl.tsx b/lib/src/Components/AppShell/UserControl.tsx
index ff0ef561..e6622a03 100644
--- a/lib/src/Components/AppShell/UserControl.tsx
+++ b/lib/src/Components/AppShell/UserControl.tsx
@@ -32,7 +32,7 @@ export const UserControl = () => {
return 'Bye bye'
},
// other options
- icon: '👋',
+ icon: () => '👋',
},
error: {
render({ data }) {
diff --git a/lib/src/Components/Auth/LoginPage.tsx b/lib/src/Components/Auth/LoginPage.tsx
index b1c8fbb1..4e395923 100644
--- a/lib/src/Components/Auth/LoginPage.tsx
+++ b/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 }) {
diff --git a/lib/src/Components/Auth/RequestPasswordPage.tsx b/lib/src/Components/Auth/RequestPasswordPage.tsx
index 0d13d436..1977f886 100644
--- a/lib/src/Components/Auth/RequestPasswordPage.tsx
+++ b/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 }) {
diff --git a/lib/src/Components/Auth/SignupPage.tsx b/lib/src/Components/Auth/SignupPage.tsx
index 296ec7bb..880767b9 100644
--- a/lib/src/Components/Auth/SignupPage.tsx
+++ b/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 }) {
diff --git a/lib/src/Components/Input/Autocomplete.tsx b/lib/src/Components/Input/Autocomplete.tsx
index ae9be9c7..bf58aedb 100644
--- a/lib/src/Components/Input/Autocomplete.tsx
+++ b/lib/src/Components/Input/Autocomplete.tsx
@@ -23,17 +23,18 @@ export const Autocomplete = ({
}) => {
const [filteredSuggestions, setFilteredSuggestions] = useState([])
const [heighlightedSuggestion, setHeighlightedSuggestion] = useState(0)
+ const inputRef = useRef(null)
useEffect(() => {
pushFilteredSuggestions && setFilteredSuggestions(pushFilteredSuggestions)
}, [pushFilteredSuggestions])
useEffect(() => {
- setFocus && inputRef.current?.focus()
+ if (setFocus) {
+ inputRef.current?.focus()
+ }
}, [setFocus])
- const inputRef = useRef()
-
const getSuggestions = (value) => {
const inputValue = value.trim().toLowerCase()
const inputLength = inputValue.length
diff --git a/lib/src/Components/Map/hooks/useClusterRef.tsx b/lib/src/Components/Map/hooks/useClusterRef.tsx
index 191bd629..93b78b06 100644
--- a/lib/src/Components/Map/hooks/useClusterRef.tsx
+++ b/lib/src/Components/Map/hooks/useClusterRef.tsx
@@ -6,16 +6,16 @@ import { createContext, useContext, useState } from 'react'
type UseClusterRefManagerResult = ReturnType
const ClusterRefContext = createContext({
- clusterRef: {} as React.MutableRefObject,
+ clusterRef: {} as React.RefObject,
setClusterRef: () => {},
})
function useClusterRefManager(): {
clusterRef: any
- setClusterRef: React.Dispatch>>
+ setClusterRef: React.Dispatch>>
} {
- const [clusterRef, setClusterRef] = useState>(
- {} as React.MutableRefObject,
+ const [clusterRef, setClusterRef] = useState>(
+ {} as React.RefObject,
)
return { clusterRef, setClusterRef }
diff --git a/lib/src/Components/Map/hooks/useTimeout.tsx b/lib/src/Components/Map/hooks/useTimeout.tsx
index 2a49cb23..2b5b1983 100644
--- a/lib/src/Components/Map/hooks/useTimeout.tsx
+++ b/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()
+ const timeoutRef = useRef | 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(() => {