Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Electronjs not working :/ #148

Open
DippsoN opened this issue Jul 5, 2023 · 0 comments
Open

Electronjs not working :/ #148

DippsoN opened this issue Jul 5, 2023 · 0 comments

Comments

@DippsoN
Copy link

DippsoN commented Jul 5, 2023

Hi, I come to you with a great request.
The zod-i18n-map in react hook form is not working at all.
The messages under the inputs do not appear.
I tested different ways, I came across the sandbox "zod faker 2" and there I changed as I had it all worked correctly.
I think it's electronjs problem, but the json load normally.
Below I am uploading my code for i18n.ts, signin.tsx and zod.ts.
Please help, I would appreciate it.

i18n.ts:
`import i18next from 'i18next'
import { initReactI18next } from 'react-i18next'
import { z } from 'zod'
import { zodI18nMap } from 'zod-i18n-map'
import translationEn from 'zod-i18n-map/locales/en/zod.json'
import translationPL from 'zod-i18n-map/locales/pl/zod.json'
import { en, pl } from '.'

i18next.use(initReactI18next).init({
lng: 'en',
resources: {
pl: {
zod: translationPL,
translation: pl,
},
en: {
zod: translationEn,
translation: en,
},
},
})
z.setErrorMap(zodI18nMap)
`

signIn.tsx:
`import { Button } from '@components/Buttons'
import { zodResolver } from '@hookform/resolvers/zod'
import { userAtom } from '@store/userAtom'
import { useMutation } from '@tanstack/react-query'
import { loginSchema } from '@type/auth'
import { userAtomType } from '@type/user'
import { motion } from 'framer-motion'
import { useAtom } from 'jotai'
import { SubmitHandler, useForm } from 'react-hook-form'
import { toast } from 'react-hot-toast'
import { useTranslation } from 'react-i18next'
import { useNavigate } from 'react-router-dom'

export const SignIn = () => {
const [user, setUser] = useAtom(userAtom)
const { t } = useTranslation()
const navigate = useNavigate()
const {
register,
handleSubmit,
formState: { errors },
reset,
} = useForm({ resolver: zodResolver(loginSchema) })

const { isError, isLoading, mutate } = useMutation({
    mutationFn: async () => {
        const _data = await window.api.signin(user)
        if (_data.codeError) {
            throw new Error('[signin] - to jakis blad')
        }
        return _data
    },
    mutationKey: ['signin'],
    onSuccess(data) {
        reset()
        toast.success(data.message + '😊')
        setTimeout(() => {
            navigate('/profileSelector')
        }, 2000)
    },
    onError() {
        reset()
        toast.error('Wysąpił błąd podczas logowania 😒')
    },
})

const onSubmit: SubmitHandler<userAtomType> = (dataForm) => {
    setUser(dataForm)
    mutate()
}

return (
    <motion.div
        initial={{ opacity: 0, translateX: 30 }}
        animate={{ opacity: 1, translateX: 0 }}
        exit={{ opacity: 0, translateX: 30 }}
    >
        <p className='text-[#334155] text-[14px] mt-[12px]'>{t('auth.signin.title')}</p>
        <form className='mt-[24px] w-full' onSubmit={handleSubmit(onSubmit)}>
            <div className='flex justify-between items-center'>
                <label htmlFor='email' className='text-[#334155] text-[16px] font-[500]'>
                    {t('auth.email')}
                </label>
                <input
                    placeholder={t('auth.exampleEmail')}
                    id='email'
                    className='w-[240px] h-[36px] rounded-[6px] place-content-center placeholder:px-4 focus:outline-slate-600'
                    {...register('email')}
                />
            </div>
            <p>{errors.email?.message}</p>
            <div className='flex justify-between items-center mt-[12px]'>
                <label htmlFor='password' className='text-[#334155] text-[16px] font-[500]'>
                    {t('auth.password')}
                </label>
                <input
                    type='password'
                    placeholder='********'
                    id='password'
                    className='w-[240px] h-[36px] rounded-[6px] place-content-center placeholder:px-4 focus:outline-slate-600'
                    {...register('password')}
                />
            </div>
            <p>{errors.password?.message}</p>
            {isError && <p className='text-red-500'>{t('auth.signin.error')}</p>}
            <div className='mt-[85px] flex justify-between'>
                <p className='text-[#4663AF] font-[14px] cursor-pointer'>
                    {t('auth.signin.forgotPassword')}
                </p>
                <Button
                    type='submit'
                    text={t('auth.signin.name')}
                    colors='dark20'
                    size='lg'
                    loading={isLoading}
                />
            </div>
        </form>
    </motion.div>
)

}
`

zod.ts:
export const loginSchema = z.object({ email: z.string().email(), password: z.string().min(4).max(30), })

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant