lucasvbr/meeting-app
1
0
Fork 0
mirror of https://github.com/LucasVbr/meeting-app.git synced 2026-07-09 15:08:06 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(Error display form userProfile): Error is displayed on wrong input of Editable

Browse Source 
rules : 240 car max on bio, firstName and lastName required
This commit is contained in:
Laurian-Dufrechou
2023-04-02 23:40:41 +02:00
parent 01054d5c50
commit 912ac833b9
1 changed files with 163 additions and 137 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/userProfile.tsx
+163 -137
View File
@@ -35,7 +35,11 @@ export default function UserProfile() {
const toast = useToast(); const toast = useToast();
const [isLoading, setIsLoading] = useState(false); const [isLoading, setIsLoading] = useState(false);
const { handleSubmit, control } = useForm(); const {
handleSubmit,
control,
formState: { errors },
} = useForm();
const [userData, setUserData] = useState({}); const [userData, setUserData] = useState({});
@@ -76,7 +80,6 @@ export default function UserProfile() {
setIsLoading(true); setIsLoading(true);
fetch(`/api/users/${user.id}`, options) fetch(`/api/users/${user.id}`, options)
.then((res) => { .then((res) => {
console.log(res);
setIsLoading(false); setIsLoading(false);
toast({ toast({
title: `Modifications effectuées`, title: `Modifications effectuées`,
@@ -140,119 +143,139 @@ export default function UserProfile() {
</Text> </Text>
<Box as="form" onSubmit={handleSubmit(saveData)} width={"80%"}> <Box as="form" onSubmit={handleSubmit(saveData)} width={"80%"}>
<FormControl width={"100%"}> <Flex width={"100%"} justify={"space-between"} mb={"1rem"}>
<Flex justify={"space-between"} mb={"1rem"}> <Box>
<Box> <FormControl id="firstName" isInvalid={errors.firstName}>
<FormLabel as="legend" htmlFor={"firstName"}> <FormLabel as="legend" htmlFor={"firstName"}>
Prénom : Prénom :
</FormLabel> </FormLabel>
<Controller <Controller
name={"firstName"} name={"firstName"}
control={control} control={control}
render={({ field }) => ( defaultValue={
<Editable user.firstName === null ? "" : user.firstName
{...field} }
id={"firstName"} rules={{
placeholder={"Non renseigné"} required: { value: true, message: "Prénom requis" },
as={"b"} }}
defaultValue={ render={({ field }) => {
user.firstName === null ? "" : user.firstName return (
} <Editable
> {...field}
<EditablePreview /> id={"firstName"}
<EditableInput /> as={"b"}
</Editable> placeholder={"Non renseigné"}
)} >
<EditablePreview />
<EditableInput />
</Editable>
);
}}
/> />
</Box> <FormErrorMessage as="b">
<Box> {errors.firstName?.message}
</FormErrorMessage>
</FormControl>
</Box>
<Box>
<FormControl id="lastName" isInvalid={errors.lastName}>
<FormLabel as={"legend"} htmlFor={"lastName"}> <FormLabel as={"legend"} htmlFor={"lastName"}>
Nom : Nom :
</FormLabel> </FormLabel>
<Controller <Controller
name={"lastName"} name={"lastName"}
control={control} control={control}
defaultValue={user.lastName === null ? "" : user.lastName}
rules={{
required: { value: true, message: "Nom requis" },
}}
render={({ field }) => ( render={({ field }) => (
<Editable <Editable
{...field} {...field}
id={"lastName"} id={"lastName"}
as={"b"} as={"b"}
placeholder={"Non renseigné"} placeholder={"Non renseigné"}
defaultValue={
user.lastName === null ? "" : user.lastName
}
// onSubmit={(value) => {
// setUserData({ ...userData, lastName: value });
// }}
> >
<EditablePreview /> <EditablePreview />
<EditableInput /> <EditableInput />
</Editable> </Editable>
)} )}
/> />
</Box> <FormErrorMessage as={"b"}>
<Box> {errors.lastName?.message}
<FormLabel as={"legend"} htmlFor={"birthdate"}> </FormErrorMessage>
Date de naissance : </FormControl>
</FormLabel> </Box>
<Editable <Box>
id={"birthdate"} <FormLabel as={"legend"} htmlFor={"birthdate"}>
as="b" Date de naissance :
color={"grey"} </FormLabel>
isDisabled={true} <Editable
defaultValue={ id={"birthdate"}
user.birthdate === null as="b"
? "Non renseigné" color={"grey"}
: formateDate(user.birthdate.toString()) isDisabled={true}
} defaultValue={
> user.birthdate === null
<EditablePreview /> ? "Non renseigné"
</Editable> : formateDate(user.birthdate.toString())
</Box> }
</Flex> >
<Divider colorScheme={"purple"} /> <EditablePreview />
<Flex justify={"space-between"} my={"1rem"}> </Editable>
<Box> </Box>
<FormLabel as={"legend"} htmlFor={"location"}> </Flex>
Ville : <Divider colorScheme={"purple"} />
</FormLabel> <Flex justify={"space-between"} my={"1rem"}>
<Editable <Box>
id={"location"} <FormLabel as={"legend"} htmlFor={"location"}>
as="b" Ville :
color={"grey"} </FormLabel>
isDisabled={true} <Editable
defaultValue={ id={"location"}
user.location === null || user.location === "" as="b"
? "Rendez vous sur la carte" color={"grey"}
: user.location isDisabled={true}
} defaultValue={
> user.location === null || user.location === ""
<EditablePreview /> ? "Rendez vous sur la carte"
</Editable> : user.location
</Box> }
<Box> >
<FormLabel as={"legend"} htmlFor={"email"}> <EditablePreview />
Adresse mail : </Editable>
</FormLabel> </Box>
<Editable <Box>
id={"email"} <FormLabel as={"legend"} htmlFor={"email"}>
as="b" Adresse mail :
color={"grey"} </FormLabel>
isDisabled={true} <Editable
defaultValue={user.email} id={"email"}
> as="b"
<EditablePreview /> color={"grey"}
</Editable> isDisabled={true}
</Box> defaultValue={user.email}
</Flex> >
<Divider colorScheme={"purple"} /> <EditablePreview />
<Box my={"1rem"}> </Editable>
</Box>
</Flex>
<Divider colorScheme={"purple"} />
<Box my={"1rem"}>
<FormControl id="lastName" isInvalid={errors.bio}>
<FormLabel as={"legend"} htmlFor={"bio"}> <FormLabel as={"legend"} htmlFor={"bio"}>
À propos : À propos :
</FormLabel> </FormLabel>
<Controller <Controller
name={"bio"} name={"bio"}
control={control} control={control}
defaultValue={user.bio === null ? "" : user.bio}
rules={{
maxLength: {
value: 240,
message: "240 caractères maximum",
},
}}
render={({ field }) => ( render={({ field }) => (
<Editable <Editable
{...field} {...field}
@@ -270,48 +293,52 @@ export default function UserProfile() {
</Editable> </Editable>
)} )}
/> />
<FormErrorMessage as="b">
{errors.bio?.message}
</FormErrorMessage>
</FormControl>
</Box>
<Divider colorScheme={"purple"} />
<Box my={"1rem"}>
<Box>
<FormLabel as={"legend"} htmlFor={"gender"}>
Genre :
</FormLabel>
<Controller
name={"gender"}
control={control}
render={({ field }) => (
<RadioGroup
{...field}
colorScheme={"purple"}
id={"gender"}
as="b"
defaultValue={
user.gender === null ? Gender.UNKNOWN : user.gender
}
// onChange={(value) => {
// setUserData({ ...userData, gender: value });
// }}
>
<HStack spacing={"0.5rem"}>
<Radio value={Gender.MALE}>
{getTextGender(Gender.MALE)}
</Radio>
<Radio value={Gender.FEMALE}>
{getTextGender(Gender.FEMALE)}
</Radio>
<Radio value={Gender.OTHER}>
{getTextGender(Gender.OTHER)}
</Radio>
<Radio value={Gender.UNKNOWN}>
{getTextGender(Gender.UNKNOWN)}
</Radio>
</HStack>
</RadioGroup>
)}
/>
</Box> </Box>
<Divider colorScheme={"purple"} /> {/* <Box>
<Box my={"1rem"}>
<Box>
<FormLabel as={"legend"} htmlFor={"gender"}>
Genre :
</FormLabel>
<Controller
name={"gender"}
control={control}
render={({ field }) => (
<RadioGroup
{...field}
colorScheme={"purple"}
id={"gender"}
as="b"
defaultValue={
user.gender === null ? Gender.UNKNOWN : user.gender
}
// onChange={(value) => {
// setUserData({ ...userData, gender: value });
// }}
>
<HStack spacing={"0.5rem"}>
<Radio value={Gender.MALE}>
{getTextGender(Gender.MALE)}
</Radio>
<Radio value={Gender.FEMALE}>
{getTextGender(Gender.FEMALE)}
</Radio>
<Radio value={Gender.OTHER}>
{getTextGender(Gender.OTHER)}
</Radio>
<Radio value={Gender.UNKNOWN}>
{getTextGender(Gender.UNKNOWN)}
</Radio>
</HStack>
</RadioGroup>
)}
/>
</Box>
{/* <Box>
<FormLabel as={"legend"} htmlFor={"preference"}> <FormLabel as={"legend"} htmlFor={"preference"}>
Préference : Préference :
</FormLabel> </FormLabel>
@@ -343,18 +370,17 @@ export default function UserProfile() {
</HStack> </HStack>
</RadioGroup> </RadioGroup>
</Flex> */} </Flex> */}
</Box> </Box>
<Divider colorScheme={"purple"} /> <Divider colorScheme={"purple"} />
<Center my={"1rem"}> <Center my={"1rem"}>
<Button <Button
colorScheme={"purple"} colorScheme={"purple"}
isLoading={isLoading} isLoading={isLoading}
type="submit" type="submit"
> >
Sauvegarder les modifications Sauvegarder les modifications
</Button> </Button>
</Center> </Center>
</FormControl>
</Box> </Box>
</Flex> </Flex>
</Container> </Container>