Proyectos de Subversion LeadersLinked - Antes de SPA

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

import { axios } from '../../utils'

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

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

import { addNotification } from '../../redux/notification/notification.actions'

import Spinner from '../loading-spinner/Spinner'

const SocialNetworksModal = ({

  isOpen,

  profileId,

  type,

  facebook,

  twitter,

  instagram,

  onClose,

  onComplete,

}) => {

  const [isLoading, setIsLoading] = useState(false)

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

  const postUrls = {

    profile: `/profile/my-profiles/social-network/${profileId}`,

    company: `/my-company/${profileId}/profile/social-network`,

  }

  const onSubmitHandler = async (data) => {

    setIsLoading(true)

    const formData = new FormData()

    Object.entries(data).map(([key, value]) => formData.append(key, value))

    await axios

      .post(postUrls[type], formData)

      .then(({ data: response }) => {

        if (!response.success) {

          const responseType = typeof response.data

          if (responseType === 'string') {

            addNotification({ style: 'danger', msg: response.data })

            return

          }

          Object.entries(response.data).map(([key, value]) => {

            if (key in getValues()) {

              setError(key, {

                type: 'manual',

                message: Array.isArray(value) ? value[0] : value,

              })

            }

          })

        }

        onComplete({

          facebook: response.data.facebook,

          twitter: response.data.twitter,

          instagram: response.data.instagram,

        })

        onClose()

      })

      .finally(() => setIsLoading(false))

  }

  useEffect(() => {

    setValue('facebook', facebook)

    setValue('twitter', twitter)

    setValue('instagram', instagram)

  }, [facebook, twitter, instagram, isOpen])

  return (

    <Modal show={isOpen} onHide={onClose}>

      <form onSubmit={handleSubmit(onSubmitHandler)}>

        <Modal.Header closeButton>

          <Modal.Title>Redes Sociales</Modal.Title>

        </Modal.Header>

        <Modal.Body>

          {isLoading && <Spinner />}

          <div className="form-group">

            <input

              type="text"

              name="facebook"

              placeholder="Perfil de Facebook"

              ref={register}

              defaultValue={facebook}

            />

          </div>

          <div className="form-group">

            <input

              type="text"

              name="twitter"

              placeholder="Perfil de Twitter"

              ref={register}

              defaultValue={twitter}

            />

          </div>

          <div className="form-group">

            <input

              type="text"

              name="instagram"

              placeholder="Perfil de Instagram"

              ref={register}

              defaultValue={instagram}

            />

          </div>

        </Modal.Body>

        <Modal.Footer>

          <Button type="submit">Enviar</Button>

          <Button onClick={onClose}>Cancelar</Button>

        </Modal.Footer>

      </form>

    </Modal>

  )

}

export default SocialNetworksModal