Proyectos de Subversion LeadersLinked - Antes de SPA

/* eslint-disable react/prop-types */
import React from "react";
import { useState, useRef } from "react";
import Education from "./education/Education";
import Spinner from "../../../../shared/loading-spinner/Spinner";
import EducationModal from "./education/EducationModal";
import { axios } from "../../../../utils";

const Educations = (props) => {
  // props destructuring
  const {
    userEducations,
    degreesOptions,
    userIdEncrypted,
  } = props;
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [loading, setLoading] = useState(false);
  const [settedEducations, setSettedEducations] = useState(userEducations);
  const [settedDescription, setSettedDescription] = useState("");

  const postUrl = useRef("");

  const addEducation = () => {
    postUrl.current = `/profile/my-profiles/education/${userIdEncrypted}/operation/add`;
    setSettedDescription("");
    setIsModalOpen(true);
  };

  const handleDelete = async (delete_link) => {
    setLoading(true);
    await axios.post(delete_link).then((response) => {
      const resData = response.data;
      if (resData.success) setSettedEducations(resData.data)
    });
    setLoading(false);
  };

  const handleEdit = async (edit_link) => {
    postUrl.current = edit_link;
    const currentDescription = settedEducations.find(education => education.link_edit === edit_link)
    setSettedDescription(currentDescription.description)
    setIsModalOpen(true)
  };

  return (
    <>
      <div className="user-profile-extended-ov position-relative">
        <h3 className="d-flex">
          Educación
          <div className="ml-1">
            <a
              href="#"
              title=""
              className="btn-education-add"
              onClick={addEducation}
            >
              <i className="fa fa-plus-square"></i>
            </a>
          </div>
        </h3>
        <span>
          {
            settedEducations.length
              ? settedEducations.map((userEducation, id) =>
                <Education
                  key={id}
                  id={id}
                  userEducation={userEducation}
                  onDelete={handleDelete}
                  onEdit={handleEdit}
                />
              )
              : 'Sin información'
          }
        </span>
        {loading && <Spinner />}
      </div>
      <EducationModal
        degreesOptions={degreesOptions}
        closeModal={() => setIsModalOpen(false)}
        postUrl={postUrl.current}
        setEducations={(newEducations) => setSettedEducations(newEducations)}
        settedDescription={settedDescription}
        show={isModalOpen}
      />
    </>
  );
};

export default Educations;