Proyectos de Subversion LeadersLinked - Backend

import React, { useState } from 'react'

import LocationModal from './LocationModal'

import DeleteModal from '../../../shared/DeleteModal'

const Location = ({ locations = [], googleApiKey, locationsAddUrl, title }) => {

  const [actionUrl, setActionUrl] = useState(locationsAddUrl)

  const [defaultData, setDefaultData] = useState('')

  const [showModal, setShowModal] = useState(false)

  const [showDeleteModal, setShowDeleteModal] = useState(false)

  const [deleteLink, setDeleteLink] = useState('')

  const [removeElement, setRemoveElement] = useState('')

  const [locationState, setLocationState] = useState(locations)

  const closeModal = () => {

    setShowModal(false)

  }

  const closeDeleteModal = () => {

    setShowDeleteModal(false)

  }

  const addLocation = (url) => {

    setShowModal(true)

    setActionUrl(url)

  }

  const editLocation = (url, item) => {

    setShowModal(true)

    setActionUrl(url)

    setDefaultData(item)

  }

  const deleteLocation = ({ url, address }) => {

    setShowDeleteModal(true)

    setDeleteLink(url)

    setRemoveElement(address)

  }

  return (

    <>

      <div className="user-profile-extended-ov st2">

        <h3>

          {title}

          <button

            className="btn btn-location-add"

            onClick={() => addLocation(locationsAddUrl)}

          >

            <i className="fa fa-plus-square" />

          </button>

        </h3>

        <span id="locations-records">

          {locationState.map((location, index) => (

            <>

              <p key={index}>

                {location.formatted_address}

                {location.is_main === 'y' ? ' (Principal)' : ' (Secundaria)'}

                <button

                  onClick={() => editLocation(location.link_edit, location)}

                  className="btn btn-location-edit"

                  style={{ padding: '.3rem' }}

                >

                  <i className="fa fa-pencil" />

                </button>

                <button

                  onClick={() =>

                    deleteLocation({

                      url: location.link_delete,

                      address: location.formatted_address

                    })

                  }

                  className="btn btn-location-delete"

                  style={{ padding: '.3rem' }}

                >

                  <i className="fa fa-trash" />

                </button>

              </p>

              {locations[index + 1] && <hr />}

            </>

          ))}

        </span>

      </div>

      {showModal && (

        <LocationModal

          closeModal={closeModal}

          onComplete={setLocationState}

          dataLink={actionUrl}

          googleApiKey={googleApiKey}

          defaultData={defaultData}

        />

      )}

      {showDeleteModal && (

        <DeleteModal

          url={deleteLink}

          isOpen={showDeleteModal}

          closeModal={closeDeleteModal}

          title={'Esta seguro de eliminar esta ubicación?'}

          onComplete={() =>

            setLocationState(

              locationState.filter(

                (val) => val.formatted_address !== removeElement

              )

            )

          }

          message={'Ubicación eliminada'}

        />

      )}

    </>

  )

}

export default Location