Proyectos de Subversion LeadersLinked - Backend

import React, { useState } from "react";
import {axios} from "../../../utils";
import { useForm } from "react-hook-form";
import FormErrorFeedback from "../../../shared/form-error-feedback/FormErrorFeedback";
import Spinner from "../../../shared/loading-spinner/Spinner";

import styles from "./addGroupModal.module.scss";

const AddGroupTab = (props) => {
  // props destructuring
  const { onClose } = props;

  // states
  const [loading, setLoading] = useState(false);

  // react hook form
  const { register, handleSubmit, errors, setError, getValues } = useForm();

  const handleOnSubmit = async (data) => {
    setLoading(true);
    const formData = new FormData();
    Object.entries(data).map(([key, value]) => {
      formData.append(key, value);
    });
    const response = await axios.post("/chat/create-group", formData);
    const resData = await response.data;
     (resData);
    if (resData.success) {
      onClose();
    } else {
      if (typeof resData.data === "object") {
        Object.entries(resData.data).map(([key, value]) => {
          if (Object.keys(getValues()).includes(key)) {
            setError(key, {
              type: "manual",
              message: value[0],
            });
          }
        });
      }
    }
    setLoading(false);
  };

  return (
    <div className={styles.addGroupTab}>
      <form onSubmit={handleSubmit(handleOnSubmit)}>
        <label htmlFor="name" className={styles.label}>
          Nombre del grupo
        </label>
        <input
          type="text"
          name="name"
          id="name"
          maxLength="50"
          className={styles.input}
          autoFocus
          ref={register}
        />
        {errors.name && (
          <div className={styles.errorMessage}>
            <FormErrorFeedback>{errors.name.message}</FormErrorFeedback>
          </div>
        )}
        <div className={styles.buttonsContainer}>
          <button className={styles.button} onClick={onClose} type="button">
            Cancelar
          </button>
          <button className={styles.button} type="submit">
            Crear
          </button>
        </div>
      </form>
      {loading && (
        <div className="spinner-container">
          <Spinner />
        </div>
      )}
    </div>
  );
};

export default AddGroupTab;