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;