Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save mrdarkside/b8c70b512f2659399229f190b09939ff to your computer and use it in GitHub Desktop.
Save mrdarkside/b8c70b512f2659399229f190b09939ff to your computer and use it in GitHub Desktop.
merge conflict
// AuthForm.tsx
import { FC, FormHTMLAttributes, useCallback } from 'react'
import { Button, LinkItem, Input } from '../UI'
import { FieldValues, useForm } from 'react-hook-form'
import { useAppDispatch } from '../../hooks/reduxHooks'
import { signinUser, signupUser } from '../../store/slices/userSlice'
import { zodResolver } from '@hookform/resolvers/zod'
import { LoginSchemas } from '../../schemas/formValidation'
import { IUserLogin, IUserSignup } from '../../types/IUser'
import style from './authform.module.css'
export interface IAuthFormProps extends FormHTMLAttributes<HTMLFormElement> {
title: string
linkTo: string
linkText: string
inputs: { name: string; type: string; placeholder: string }[]
schema: LoginSchemas
}
const AuthForm: FC<IAuthFormProps> = ({
title,
linkTo,
linkText,
inputs,
schema,
}) => {
const dispatch = useAppDispatch()
const {
register,
handleSubmit,
formState: { errors },
} = useForm<FieldValues>({ resolver: zodResolver(schema) })
const onSubmit = useCallback((data: FieldValues) => {
if (linkTo.includes('signup')) {
dispatch(signinUser(data as IUserLogin))
} else {
dispatch(signupUser(data as IUserSignup))
}
}, [])
return (
<form className={style.form} onSubmit={handleSubmit(onSubmit)}>
<h1 className={style.title}>{title}</h1>
{inputs.map(({ name, type, placeholder }) => (
<Input
key={name}
name={name}
type={type}
placeholder={placeholder}
register={register}
error={errors[name]?.message as string}
/>
))}
<Button type="submit">Отправить</Button>
<LinkItem to={linkTo} text={linkText} />
</form>
)
}
export default AuthForm
// package.json
{
"name": "client",
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "tsc && vite build",
"preview": "vite preview",
"lint": "eslint .",
"format": "prettier --write .",
"test": "jest ./ --passWithNoTests"
},
"dependencies": {
"@reduxjs/toolkit": "^1.9.5",
"@types/react-redux": "^7.1.25",
"@hookform/resolvers": "^3.1.1",
"axios": "^1.4.0",
"dotenv": "^16.0.2",
"eslint-config-prettier": "^8.5.0",
"prettier": "^2.7.1",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-hook-form": "^7.45.1",
"react-redux": "^8.1.1",
"react-router-dom": "^6.13.0",
"zod": "^3.21.4"
},
"devDependencies": {
"@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "^13.3.0",
"@types/jest": "^28.1.8",
"@types/react": "^18.0.17",
"@types/react-dom": "^18.0.6",
"@typescript-eslint/eslint-plugin": "^5.35.1",
"@typescript-eslint/parser": "^5.35.1",
"@vitejs/plugin-react": "^2.0.1",
"eslint": "^8.23.0",
"jest": "^28",
"jest-environment-jsdom": "^29.0.1",
"lefthook": "^1.3.9",
"prettier": "^2.7.1",
"ts-jest": "^28.0.8",
"typescript": "^4.8.2",
"vite": "^3.0.7"
},
"license": "MIT"
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment