refactor(userProfile + tsx instead of jsx): created custom components for form userProfile

src/components/layout/dashboard/card_user/CardUser.tsx

@@ -18,16 +18,14 @@ import { useState } from "react";
 import SearchFailCard from "./SearchFailCard";
 import LoadingPage from "@/components/LoadingPage";
 
-export default function CardUser(props) {
-  const {
-    users,
-    loggedUser,
-    userLikes,
-    setUserLikes,
-    userDislikes,
-    setUserDislikes,
-  } = props;
-
+export default function CardUser({
+  users,
+  loggedUser,
+  userLikes,
+  setUserLikes,
+  userDislikes,
+  setUserDislikes,
+}) {
   const toast = useToast({
     position: "top",
     duration: 2000,

src/components/layout/user_profile/CustomEditable.tsx

@@ -0,0 +1,53 @@
+import {
+  Editable,
+  EditableInput,
+  EditablePreview,
+  FormControl,
+  FormErrorMessage,
+  FormLabel,
+} from "@chakra-ui/react";
+import { Controller, ControllerProps } from "react-hook-form";
+
+type CustomEditableProps = {
+  label: string;
+  isDisabled?: boolean;
+} & Omit<ControllerProps, "render">;
+
+export default function CustomEditable(props: CustomEditableProps) {
+  const {
+    defaultValue,
+    label,
+    name,
+    isDisabled = false,
+    ...controllerProps
+  } = props;
+
+  return (
+    <Controller
+      {...controllerProps}
+      name={name}
+      defaultValue={defaultValue}
+      render={({ field, fieldState: { invalid, error } }) => {
+        return (
+          <FormControl id={name} isInvalid={invalid}>
+            <FormLabel as="legend" htmlFor={name}>
+              {label}
+            </FormLabel>
+            <Editable
+              {...field}
+              id={name}
+              fontWeight="bold"
+              isDisabled={isDisabled}
+              placeholder={"Non renseigné"}
+              color={isDisabled ? "gray.500" : undefined}
+            >
+              <EditablePreview />
+              <EditableInput />
+            </Editable>
+            <FormErrorMessage as="b">{error?.message}</FormErrorMessage>
+          </FormControl>
+        );
+      }}
+    />
+  );
+}

src/components/layout/user_profile/CustomEditableArea.tsx

@@ -0,0 +1,54 @@
+import {
+  Editable,
+  EditablePreview,
+  EditableTextarea,
+  FormControl,
+  FormErrorMessage,
+  FormLabel,
+} from "@chakra-ui/react";
+import { Controller, ControllerProps } from "react-hook-form";
+
+type CustomEditableProps = {
+  label: string;
+  isDisabled?: boolean;
+} & Omit<ControllerProps, "render">;
+
+export default function CustomEditableArea(props: CustomEditableProps) {
+  const {
+    defaultValue,
+    label,
+    name,
+    isDisabled = false,
+    ...controllerProps
+  } = props;
+
+  return (
+    <Controller
+      {...controllerProps}
+      name={name}
+      defaultValue={defaultValue}
+      render={({ field, fieldState: { invalid, error } }) => {
+        return (
+          <FormControl id={name} isInvalid={invalid}>
+            <FormLabel as="legend" htmlFor={name}>
+              {label}
+            </FormLabel>
+            <Editable
+              {...field}
+              id={name}
+              fontWeight="bold"
+              width={"100%"}
+              isDisabled={isDisabled}
+              placeholder={"Non renseigné"}
+              color={isDisabled ? "gray.500" : undefined}
+            >
+              <EditablePreview />
+              <EditableTextarea />
+            </Editable>
+            <FormErrorMessage as="b">{error?.message}</FormErrorMessage>
+          </FormControl>
+        );
+      }}
+    />
+  );
+}

src/components/layout/user_profile/CustomRadioGender.tsx

@@ -0,0 +1,60 @@
+import { FormLabel, HStack, Radio, RadioGroup } from "@chakra-ui/react";
+import { Gender } from "@prisma/client";
+import { Controller, ControllerProps } from "react-hook-form";
+
+type CustomRadioGenderProps = {
+  label: string;
+} & Omit<ControllerProps, "render">;
+
+export default function CustomRadioGender(props: CustomRadioGenderProps) {
+  const { defaultValue, label, name, ...controllerProps } = props;
+
+  const getTextGender = (gender: string) => {
+    switch (gender) {
+      case Gender.MALE:
+        return "Homme";
+      case Gender.FEMALE:
+        return "Femme";
+      case Gender.OTHER:
+        return "Autre";
+      case Gender.UNKNOWN:
+        return "Non renseigné";
+    }
+  };
+
+  return (
+    <>
+      <FormLabel as={"legend"} htmlFor={name}>
+        {label}
+      </FormLabel>
+      <Controller
+        {...controllerProps}
+        name={name}
+        render={({ field }) => {
+          return (
+            <RadioGroup
+              {...field}
+              colorScheme={"purple"}
+              id={name}
+              as="b"
+              defaultValue={defaultValue}
+            >
+              <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>
+          );
+        }}
+      />
+    </>
+  );
+}

src/components/layout/user_profile/CustomRangeSlider.tsx

@@ -0,0 +1,93 @@
+import {
+  Box,
+  FormLabel,
+  RangeSlider,
+  RangeSliderFilledTrack,
+  RangeSliderThumb,
+  RangeSliderTrack,
+  Tooltip,
+} from "@chakra-ui/react";
+import { Controller, ControllerProps } from "react-hook-form";
+
+import { FaGreaterThan, FaLessThan } from "react-icons/fa";
+
+type CustomRangeSliderProps = {
+  label: string;
+  defaultValue: [number, number];
+  sliderAgeValue: number[];
+  setSliderAgeValue: React.Dispatch<React.SetStateAction<number[]>>;
+  showTooltipAge: boolean;
+  setShowTooltipAge: React.Dispatch<React.SetStateAction<boolean>>;
+  name: string;
+} & Omit<ControllerProps, "render">;
+
+export default function CustomRangeSlider(props: CustomRangeSliderProps) {
+  const {
+    defaultValue,
+    label,
+    setSliderAgeValue,
+    setShowTooltipAge,
+    showTooltipAge,
+    sliderAgeValue,
+    name,
+    ...controllerProps
+  } = props;
+
+  return (
+    <>
+      <FormLabel as={"legend"} htmlFor={name}>
+        {label}
+      </FormLabel>
+      <Controller
+        {...controllerProps}
+        name={name}
+        render={({ field: { onChange } }) => (
+          <RangeSlider
+            aria-label={["min", "max"]}
+            colorScheme={"purple"}
+            min={18}
+            max={99}
+            id={name}
+            color={"pink.500"}
+            defaultValue={defaultValue}
+            onChange={(v: [number, number]) => {
+              setSliderAgeValue(v);
+              onChange(v);
+            }}
+            onMouseEnter={() => setShowTooltipAge(true)}
+            onMouseLeave={() => setShowTooltipAge(false)}
+          >
+            <RangeSliderTrack>
+              <RangeSliderFilledTrack bgColor={"purple.500"} />
+            </RangeSliderTrack>
+            <Tooltip
+              hasArrow
+              bg="purple.500"
+              color="white"
+              placement="top"
+              isOpen={showTooltipAge}
+              label={`${sliderAgeValue[0]}`}
+            >
+              <RangeSliderThumb boxSize={6} index={0}>
+                <Box color={"purple.500"} as={FaLessThan} />
+              </RangeSliderThumb>
+            </Tooltip>
+
+            <Tooltip
+              hasArrow
+              bg="purple.500"
+              color="white"
+              placement="top"
+              isOpen={showTooltipAge}
+              label={`${sliderAgeValue[1]}`}
+            >
+              <RangeSliderThumb boxSize={6} index={1}>
+                <Box color={"purple.500"} as={FaGreaterThan} />
+              </RangeSliderThumb>
+            </Tooltip>
+          </RangeSlider>
+        )}
+      />
+    </>
+  );
+}

src/components/layout/user_profile/CustomSlider.tsx

@@ -0,0 +1,80 @@
+import {
+  Box,
+  FormLabel,
+  Slider,
+  SliderFilledTrack,
+  SliderThumb,
+  SliderTrack,
+  Tooltip,
+} from "@chakra-ui/react";
+import { Controller, ControllerProps } from "react-hook-form";
+
+import { FaWalking } from "react-icons/fa";
+
+type CustomSliderProps = {
+  label: string;
+  defaultValue: [number, number];
+  sliderDistanceValue: number;
+  setSliderDistanceValue: React.Dispatch<React.SetStateAction<number>>;
+  showTooltipDistance: boolean;
+  setShowTooltipDistance: React.Dispatch<React.SetStateAction<boolean>>;
+  name: string;
+} & Omit<ControllerProps, "render">;
+
+export default function CustomSlider(props: CustomSliderProps) {
+  const {
+    defaultValue,
+    label,
+    sliderDistanceValue,
+    setSliderDistanceValue,
+    showTooltipDistance,
+    setShowTooltipDistance,
+    name,
+    ...controllerProps
+  } = props;
+
+  return (
+    <>
+      <FormLabel as={"legend"} htmlFor={name}>
+        {label}
+      </FormLabel>
+      <Controller
+        {...controllerProps}
+        name={name}
+        render={({ field: { onChange } }) => (
+          <Slider
+            aria-label={"distance"}
+            colorScheme={"purple"}
+            min={20}
+            max={250}
+            id={"distance"}
+            color={"pink.500"}
+            defaultValue={defaultValue}
+            onChange={(v) => {
+              setSliderDistanceValue(v);
+              onChange(v);
+            }}
+            onMouseEnter={() => setShowTooltipDistance(true)}
+            onMouseLeave={() => setShowTooltipDistance(false)}
+          >
+            <SliderTrack>
+              <SliderFilledTrack bgColor={"purple.500"} />
+            </SliderTrack>
+            <Tooltip
+              hasArrow
+              bg="purple.500"
+              color="white"
+              placement="top"
+              isOpen={showTooltipDistance}
+              label={`${sliderDistanceValue} km`}
+            >
+              <SliderThumb boxSize={6}>
+                <Box color={"purple.500"} as={FaWalking} />
+              </SliderThumb>
+            </Tooltip>
+          </Slider>
+        )}
+      />
+    </>
+  );
+}

src/components/layout/user_profile/ProfileTagList.tsx

@@ -6,7 +6,7 @@ export default function ProfileBadgeList(props) {
     <Flex gap={"0.5rem"} mt={"1vh"} flexWrap="wrap">
       {userPassions.map((idPassion, index) => (
         <Tag key={index} colorScheme={"purple"}>
-          {passions !== null && passions !== undefined
+          {passions !== null && passions !== undefined && passions.length > 0
             ? passions.find((element) => element.id === idPassion).name
             : ""}
         </Tag>