Proyectos de Subversion LeadersLinked - Backend

import axios from 'axios'

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

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

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

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

const WebPageModal = ({

	isOpen,

	closeModal,

	websiteUrl,

	action

}) => {

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

	const [error, setError] = useState(null)

	const onSubmit = ({ website }) => {

		const data = new FormData()

		data.append('website', website)

		axios.post(websiteUrl, data)

			.then(({ data }) => {

				if (!data.success) {

					return setError(data.data)

				}

				action(data.data.website)

			})

			.then(() => {

				setError(null)

				closeModal()

			})

			.catch((err) => console.log(err))

	}

	useEffect(() => {

		getData(websiteUrl)

			.then((resp) => setValue('website', resp.website))

			.catch(err => console.log(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 className="mb-3">

						<label className="form-label">Página web</label>

						<input

							className="form-control form-control-sm"

							type="text"

							name="website"

							ref={register}

							style={{ padding: '1px' }}

						/>

					</div>

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

				</Modal.Body>

				<Modal.Footer>

					<Button

						variant="primary"

						type="submit"

					>

                        Enviar

					</Button>

					<Button

						className='btn-tertiary'

						onClick={closeModal}

					>

                        Cancelar

					</Button>

				</Modal.Footer>

			</form>

		</Modal >

	)

}

export default WebPageModal