Proyectos de Subversion LeadersLinked - Backend

import axios from 'axios'

import React, { useEffect, useState } from 'react'

import { Modal, Button } from 'react-bootstrap'

import { getData } from '../../../helpers/fetchHelpers'

import { useForm } from 'react-hook-form'

const SocialNetworksModal = ({

    isOpen,

    closeModal,

    socialNetworksUrl,

    action

}) => {

    const [error, setError] = useState(null);

    const { handleSubmit, setValue, register } = useForm()

    const onSubmit = ({ facebook, twitter, instagram }) => {

        const data = new FormData()

        data.append("facebook", facebook)

        data.append("twitter", twitter)

        data.append("instagram", instagram)

        axios.post(socialNetworksUrl, data)

            .then(({ data }) => {

                if (!data.success) {

                    return setError(data.data)

                }

                action(data.data)

            })

            .then(() => {

                setError(null)

                closeModal()

            })

            .catch((err) => setError(err))

    }

    useEffect(() => {

        getData(socialNetworksUrl)

            .then(({ facebook, twitter, instagram }) => {

                setValue("facebook", facebook)

                setValue("twitter", twitter)

                setValue("instagram", instagram)

            })

            .catch(err => setError(err))

    }, [isOpen]);

    return (

        <Modal

            size="md"

            show={isOpen}

            onHide={closeModal}

            autoFocus={false}

        >

            <Modal.Header closeButton>

                <Modal.Title>Cambiar</Modal.Title>

            </Modal.Header>

            <form onSubmit={handleSubmit(onSubmit)}>

                <Modal.Body>

                    <div class="mb-3">

                        <label class="form-label">Facebook</label>

                        <input

                            type="text"

                            class="form-control"

                            name='facebook'

                            ref={register}

                        />

                    </div>

                    <div class="mb-3">

                        <label class="form-label">Twitter</label>

                        <input

                            type="text"

                            class="form-control"

                            name='twitter'

                            ref={register}

                        />

                    </div>

                    <div class="mb-3">

                        <label class="form-label">Instagram</label>

                        <input

                            type="text"

                            class="form-control"

                            name='instagram'

                            ref={register}

                        />

                    </div>

                    {error && <p>{error}</p>}

                </Modal.Body>

                <Modal.Footer>

                    <Button

                        variant="primary"

                        type="submit"

                    >

                        Enviar

                    </Button>

                    <Button

                        variant="default"

                        onClick={closeModal}

                    >

                        Cancelar

                    </Button>

                </Modal.Footer>

            </form>

        </Modal >

    )

}

export default SocialNetworksModal