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