import { useCallback } from 'react'
import { useTranslation } from 'react-i18next'
import { Alert, Button, Modal } from 'react-bootstrap'
import Icon from '../../../shared/components/icon'
import Tooltip from '../../../shared/components/tooltip'
import useAsync from '../../../shared/hooks/use-async'
import { postJSON } from '../../../infrastructure/fetch-json'
import ignoredWords from '../ignored-words'
type DictionaryModalContentProps = {
handleHide: () => void
}
export default function DictionaryModalContent({
handleHide,
}: DictionaryModalContentProps) {
const { t } = useTranslation()
const { isError, runAsync } = useAsync()
const handleRemove = useCallback(
word => {
ignoredWords.remove(word)
runAsync(
postJSON('/spelling/unlearn', {
body: {
word,
},
})
).catch(console.error)
},
[runAsync]
)
return (
<>
{t('edit_dictionary')}
{isError ? (
{t('generic_something_went_wrong')}
) : null}
{ignoredWords.learnedWords?.size > 0 ? (
{[...ignoredWords.learnedWords].sort().map(learnedWord => (
-
{learnedWord}
))}
) : (
{t('edit_dictionary_empty')}
)}
>
)
}