DS Boyce
77 lines
1.9 KiB
TypeScript
77 lines
1.9 KiB
TypeScript
import {useCallback, useContext, useMemo} from 'react'
|
|
|
|
import {useGoogleTranslate} from '#/lib/hooks/useGoogleTranslate'
|
|
import {useAnalytics} from '#/analytics'
|
|
import {Context} from './context'
|
|
import {
|
|
type ContextType,
|
|
type TranslationFunctionParams,
|
|
type TranslationOptions,
|
|
type TranslationState,
|
|
} from './types'
|
|
|
|
export * from './types'
|
|
export * from './utils'
|
|
|
|
const translationState: Record<string, TranslationState> = {}
|
|
const acquireTranslation = (_key: string) => {
|
|
return () => {}
|
|
}
|
|
const clearTranslation = (_key: string) => {}
|
|
|
|
/**
|
|
* Web always opens Google Translate.
|
|
*/
|
|
export function useTranslate({key, postLangCodes}: TranslationOptions) {
|
|
const context = useContext(Context)
|
|
if (!context) {
|
|
throw new Error(
|
|
'useTranslate must be used within a TranslateOnDeviceProvider',
|
|
)
|
|
}
|
|
|
|
// Always call hooks in consistent order
|
|
const translate = useCallback(
|
|
async (params: TranslationFunctionParams) => {
|
|
return context.translate({
|
|
...params,
|
|
key,
|
|
forceGoogleTranslate: true,
|
|
postLangCodes,
|
|
})
|
|
},
|
|
[key, context, postLangCodes],
|
|
)
|
|
|
|
const clearTranslation = useCallback(() => {
|
|
return context.clearTranslation(key)
|
|
}, [key, context])
|
|
|
|
return {
|
|
translationState: context.translationState[key] ?? {
|
|
status: 'idle' as const,
|
|
},
|
|
translate,
|
|
clearTranslation,
|
|
}
|
|
}
|
|
|
|
export function Provider({children}: React.PropsWithChildren<unknown>) {
|
|
const ax = useAnalytics()
|
|
const googleTranslate = useGoogleTranslate()
|
|
|
|
const translate = useCallback<ContextType['translate']>(
|
|
async ({text, targetLangCode, sourceLangCode}) => {
|
|
await googleTranslate(text, targetLangCode, sourceLangCode)
|
|
},
|
|
[ax, googleTranslate],
|
|
)
|
|
|
|
const ctx = useMemo(
|
|
() => ({acquireTranslation, clearTranslation, translate, translationState}),
|
|
[translate],
|
|
)
|
|
|
|
return <Context.Provider value={ctx}>{children}</Context.Provider>
|
|
}
|