From 748aa81a995c68a5ddc6078dc9940da81d346446 Mon Sep 17 00:00:00 2001 From: cracklesparkle Date: Thu, 1 Aug 2024 11:06:25 +0900 Subject: [PATCH] Settings & FormFields --- .../src/components/FormFields.tsx | 27 ++++++++------ frontend_reactjs/src/interfaces/create.ts | 4 +++ frontend_reactjs/src/pages/Settings.tsx | 35 ++++++++++--------- frontend_reactjs/src/pages/auth/SignIn.tsx | 6 ++-- frontend_reactjs/src/services/AuthService.ts | 9 +++-- 5 files changed, 47 insertions(+), 34 deletions(-) diff --git a/frontend_reactjs/src/components/FormFields.tsx b/frontend_reactjs/src/components/FormFields.tsx index 802f627..faaba87 100644 --- a/frontend_reactjs/src/components/FormFields.tsx +++ b/frontend_reactjs/src/components/FormFields.tsx @@ -1,11 +1,11 @@ import { SubmitHandler, useForm } from 'react-hook-form' import { CreateField } from '../interfaces/create' import { Box, Button, CircularProgress, Stack, TextField, Typography } from '@mui/material'; -import { useEffect } from 'react'; +import { AxiosResponse } from 'axios'; interface Props { title?: string; - submitHandler?: any; + submitHandler?: (data: any) => Promise>; fields: CreateField[]; submitButtonText?: string; mutateHandler?: any; @@ -29,15 +29,21 @@ function FormFields({ return result } - const { register, handleSubmit, watch, formState: { errors, isSubmitting, dirtyFields } } = useForm({ - defaultValues: getDefaultValues(fields) + const { register, handleSubmit, reset, watch, formState: { errors, isSubmitting, dirtyFields, isValid } } = useForm({ + mode: 'onChange', + defaultValues: defaultValues ? getDefaultValues(fields) : {} }) const onSubmit: SubmitHandler = async (data) => { + fields.forEach((field: CreateField) => { + if (field.include === false) { + delete data[field.key] + } + }) try { - await submitHandler?.(data).then(() => { - mutateHandler?.() - }) + const submitResponse = await submitHandler?.(data) + mutateHandler?.(JSON.stringify(submitResponse?.data)) + reset(submitResponse?.data) } catch (error) { console.error(error) } @@ -60,16 +66,17 @@ function FormFields({ label={field.headerName || field.key.charAt(0).toUpperCase() + field.key.slice(1)} required={field.required || false} {...register(field.key, { - required: `${field.key} обязателен`, + required: field.required ? `${field.headerName} обязателен` : false, validate: (val: string | boolean) => { if (field.watch) { if (watch(field.watch) != val) { return field.watchMessage || '' } } - } + }, })} error={!!errors[field.key]} + helperText={errors[field.key]?.message} /> ) })} @@ -79,7 +86,7 @@ function FormFields({ justifyContent: "space-between", gap: "8px" }}> - diff --git a/frontend_reactjs/src/interfaces/create.ts b/frontend_reactjs/src/interfaces/create.ts index 382bdcd..9edb66c 100644 --- a/frontend_reactjs/src/interfaces/create.ts +++ b/frontend_reactjs/src/interfaces/create.ts @@ -26,6 +26,10 @@ export interface CreateField { defaultValue?: any; inputType?: InputType; validate?: Validate; + /** Watch for field */ watch?: string; + /** Message on watch */ watchMessage?: string; + /** Should field be included in the request */ + include?: boolean; } \ No newline at end of file diff --git a/frontend_reactjs/src/pages/Settings.tsx b/frontend_reactjs/src/pages/Settings.tsx index 0309c22..0275a7a 100644 --- a/frontend_reactjs/src/pages/Settings.tsx +++ b/frontend_reactjs/src/pages/Settings.tsx @@ -1,10 +1,11 @@ -import { Box, Stack, Typography } from "@mui/material" +import { Box, Stack } from "@mui/material" import UserService from "../services/UserService" -import { useAuthStore } from "../store/auth" +import { setUserData, useAuthStore } from "../store/auth" import { useEffect, useState } from "react" import { CreateField } from "../interfaces/create" import { IUser } from "../interfaces/user" import FormFields from "../components/FormFields" +import AuthService from "../services/AuthService" export default function Settings() { const { token } = useAuthStore() @@ -25,8 +26,8 @@ export default function Settings() { }, [token]) const profileFields: CreateField[] = [ - { key: 'email', headerName: 'E-mail', type: 'string', required: true }, - { key: 'login', headerName: 'Логин', type: 'string', required: true }, + //{ key: 'email', headerName: 'E-mail', type: 'string', required: true }, + //{ key: 'login', headerName: 'Логин', type: 'string', required: true }, { key: 'phone', headerName: 'Телефон', type: 'string', required: false }, { key: 'name', headerName: 'Имя', type: 'string', required: true }, { key: 'surname', headerName: 'Фамилия', type: 'string', required: true }, @@ -34,16 +35,17 @@ export default function Settings() { const passwordFields: CreateField[] = [ { key: 'password', headerName: 'Новый пароль', type: 'string', required: true, inputType: 'password' }, - { key: 'password_confirm', headerName: 'Подтверждение пароля', type: 'string', required: true, inputType: 'password', watch: 'password', watchMessage: 'Пароли не совпадают' }, + { key: 'password_confirm', headerName: 'Подтверждение пароля', type: 'string', required: true, inputType: 'password', watch: 'password', watchMessage: 'Пароли не совпадают', include: false }, ] return ( - {currentUser && @@ -51,21 +53,22 @@ export default function Settings() { { + setUserData(data) + }} + submitHandler={(data) => UserService.updateUser({ id: currentUser.id, ...data })} title="Пользователь" /> + AuthService.updatePassword({ id: currentUser.id, ...data })} title="Смена пароля" /> - } ) diff --git a/frontend_reactjs/src/pages/auth/SignIn.tsx b/frontend_reactjs/src/pages/auth/SignIn.tsx index 1ea53ea..650e46a 100644 --- a/frontend_reactjs/src/pages/auth/SignIn.tsx +++ b/frontend_reactjs/src/pages/auth/SignIn.tsx @@ -1,5 +1,5 @@ import { useForm, SubmitHandler } from 'react-hook-form'; -import { TextField, Button, Container, Typography, Box, Stack, Link } from '@mui/material'; +import { TextField, Button, Container, Typography, Box, Stack, Link, CircularProgress } from '@mui/material'; import { AxiosResponse } from 'axios'; import { ApiResponse, LoginFormData } from '../../interfaces/auth'; import { login, setUserData } from '../../store/auth'; @@ -8,7 +8,7 @@ import AuthService from '../../services/AuthService'; import UserService from '../../services/UserService'; const SignIn = () => { - const { register, handleSubmit, formState: { errors } } = useForm({ + const { register, handleSubmit, formState: { errors, isSubmitting } } = useForm({ defaultValues: { username: '', password: '', @@ -82,7 +82,7 @@ const SignIn = () => {