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;