This commit is contained in:
Lucàs
2023-04-02 23:50:50 +02:00
4 changed files with 169 additions and 145 deletions
+1 -3
View File
@@ -77,11 +77,9 @@ export default function ModalModifyImages(props) {
if (index > -1) { if (index > -1) {
newListImage.splice(index, 1); newListImage.splice(index, 1);
setlistImage(newListImage); setlistImage([...newListImage]);
} }
// setlistImage(listImage.filter((image) => image !== fileName));
const imageDeleteOptions = { const imageDeleteOptions = {
method: "DELETE", method: "DELETE",
body: JSON.stringify({ fileName: fileName.split("/").pop() }), body: JSON.stringify({ fileName: fileName.split("/").pop() }),
+1 -1
View File
@@ -11,7 +11,7 @@ export const config = {
const deleteImage = async (req, res) => { const deleteImage = async (req, res) => {
const body = await JSON.parse(req.body); const body = await JSON.parse(req.body);
await fs.unlinkSync(`./public/imageUsers/${body.fileName}`); await fs.unlinkSync(`./public/imageUsers/${body.fileName}`);
res.status(200).send("image deleted"); res.status(204).send({ message: "File deleted", file: body.fileName });
}; };
export default (req, res) => { export default (req, res) => {
+1 -1
View File
@@ -20,7 +20,7 @@ const post = async (req, res) => {
return; return;
} }
saveFile(files.file); saveFile(files.file);
return res.status(201).send("image saved"); return res.status(201).send({ message: "File uploaded", file: files.file });
}); });
}; };
+166 -140
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`,
@@ -104,7 +107,7 @@ export default function UserProfile() {
return ( return (
<Box bgColor={"purple.50"}> <Box bgColor={"purple.50"}>
<Container justifyContent={"center"} maxWidth={"70rem"} mt={"1rem"}> <Container justifyContent={"center"} maxW={"70rem"} mt={"1rem"}>
<Flex flexDirection={"column"} alignItems={"center"} gap={"1rem"}> <Flex flexDirection={"column"} alignItems={"center"} gap={"1rem"}>
<Box width={"50%"}> <Box width={"50%"}>
{userData.images ? ( {userData.images ? (
@@ -139,120 +142,140 @@ export default function UserProfile() {
Modifiez les champs en les selectionnants Modifiez les champs en les selectionnants
</Text> </Text>
<form onSubmit={handleSubmit(saveData)}> <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,19 +370,18 @@ 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>
</form>
</Flex> </Flex>
</Container> </Container>
</Box> </Box>