Proyectos de Subversion LeadersLinked - Backend

import React, { useState } from 'react'

import LocationModal from './LocationModal'

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 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) => {

        setShowDeleteModal(true)

        setDeleteLink(url)

    }

    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">

                    {

                        locations.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(location.link_delete)}

                                        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={() => deleteLocation(locationToDelete)}

                    message={`Ubicación eliminada`}

                />

            }

        </>

    )

}

export default Location