Proyectos de Subversion LeadersLinked - Backend

import React, { useState } from 'react'
import LocationModal from './LocationModal'
import DeleteModal from '../../../shared/DeleteModal'

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

    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 addLocation = (url) => {
        setShowModal(true)
        setActionUrl(url)
    }

    const editLocation = (url, item) => {
        setShowModal(true)
        setActionUrl(url)
        setDefaultData(item)
    }

    const closeModal = () => setShowModal(false)
    const closeDeleteModal = () => setShowDeleteModal(false)

    const deleteLocation = ({ url, address }) => {
        setShowDeleteModal(true)
        setDeleteLink(url)
        setRemoveElement(address)
    }

    return (
        <>
            <div className="user-profile-extended-ov st2">
                <h3>
                    Ubicaciones
                    <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)" : ""}
                                    <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}
                    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