Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

Rev 5255 | | Comparar con el anterior | Ultima modificación | Ver Log |

Rev Autor Línea Nro. Línea
3192 stevensc 1 
/* eslint-disable react/prop-types */
5106 stevensc 2 
import React, { useState, useEffect } from 'react'
3 
import { connect } from 'react-redux'
4 
import Modal from 'react-bootstrap/Modal'
5 
import Button from 'react-bootstrap/Button'
6 
import { useForm } from 'react-hook-form'
7 
import styled from 'styled-components'
8 
import FormErrorFeedback from '../../../shared/form-error-feedback/FormErrorFeedback'
9 
import Spinner from '../../../shared/loading-spinner/Spinner'
10 
import { addNotification } from '../../../redux/notification/notification.actions'
6390 stevensc 11 
import {
12 
  closeShareModal,
13 
  openShareModal,
14 
  setModalType,
15 
} from '../../../redux/share-modal/shareModal.actions'
5106 stevensc 16 
import { addFeed, fetchFeeds } from '../../../redux/feed/feed.actions'
17 
import DropzoneComponent from '../../../shared/dropzone/DropzoneComponent'
18 
import { shareModalTypes } from '../../../redux/share-modal/shareModal.types'
19 
import { feedTypes } from '../../../redux/feed/feed.types'
20 
import { CKEditor } from 'ckeditor4-react'
21 
import { axios, CKEDITOR_OPTIONS } from '../../../utils'
22 
import ConfirmModal from '../../../shared/confirm-modal/ConfirmModal'
1 www 23 
 
5106 stevensc 24 
const ShareModal = ({
25 
  postUrl,
26 
  isOpen,
27 
  modalType,
28 
  lastModalType,
29 
  setModalType,
30 
  feedType,
31 
  fetchFeeds,
32 
  currentPage,
33 
  timelineUrl,
34 
  feedSharedId,
35 
  closeShareModal, // Redux action
36 
  addNotification, // Redux action
37 
  addFeed, // Redux action
6390 stevensc 38 
  openShareModal, // Redux action
5106 stevensc 39 
}) => {
4987 stevensc 40 
  const [loading, setLoading] = useState(false)
41 
  const [isCKEditorLoading, setIsCKEditorLoading] = useState(true)
42 
  const [showConfirmModal, setShowConfirmModal] = useState(false)
1 www 43 
 
44 
  const {
45 
    register,
46 
    unregister,
47 
    errors,
48 
    handleSubmit,
49 
    setValue,
50 
    watch,
51 
    getValues,
52 
    clearErrors,
6390 stevensc 53 
    setError,
1 www 54 
  } = useForm({
55 
    defaultValues: {
5106 stevensc 56 
      description: '',
6390 stevensc 57 
      share_width: '',
58 
    },
4987 stevensc 59 
  })
1 www 60 
 
61 
  useEffect(() => {
5106 stevensc 62 
    register('description', {
6390 stevensc 63 
      required: { value: 'true', message: 'El campo es requerido' },
4987 stevensc 64 
    })
5106 stevensc 65 
    register('posted_or_shared')
1 www 66 
    if (
67 
      modalType !== shareModalTypes.POST &&
68 
      modalType !== shareModalTypes.SHARE
69 
    ) {
5106 stevensc 70 
      register('file', {
6390 stevensc 71 
        required: { value: 'true', message: 'El campo es requerido' },
4987 stevensc 72 
      })
1 www 73 
    } else {
5106 stevensc 74 
      if (!getValues('file')) unregister('file')
1 www 75 
    }
4987 stevensc 76 
  }, [modalType])
1 www 77 
 
78 
  const recomendationText = () => {
79 
    switch (modalType) {
80 
      case shareModalTypes.IMAGE:
5106 stevensc 81 
        return 'Tamaño recomendado: 720x720'
1 www 82 
      case shareModalTypes.FILE:
5106 stevensc 83 
        return 'solo documentos PDF'
1 www 84 
      case shareModalTypes.VIDEO:
5106 stevensc 85 
        return 'Video de extensión mp4, mpeg, webm'
1 www 86 
      default:
5106 stevensc 87 
        return ''
1 www 88 
    }
4987 stevensc 89 
  }
1 www 90 
  useEffect(() => {
5106 stevensc 91 
    const postedOrShared = modalType === shareModalTypes.SHARE ? 's' : 'p'
92 
    setValue('posted_or_shared', postedOrShared)
93 
    if (getValues('file') || getValues('description')) {
1 www 94 
      if (modalType !== lastModalType) {
4987 stevensc 95 
        closeShareModal()
96 
        handleShowConfirmModal()
1 www 97 
      }
98 
    }
4987 stevensc 99 
  }, [modalType])
1260 steven 100 
 
868 steven 101 
  const hideDuplicatedModal = () => {
102 
    setTimeout(() => {
4987 stevensc 103 
      const modals = document.getElementsByClassName('modal')
1261 steven 104 
      if (modals.length > 1 && modals[0].style.display !== 'none') {
4987 stevensc 105 
        const currentModal = modals[0]
106 
        currentModal.style.display = 'none'
946 steven 107 
        for (let index = 0; index < modals.length; index++) {
4987 stevensc 108 
          const element = modals[index]
5106 stevensc 109 
          element.removeAttribute('tabindex')
946 steven 110 
        }
870 steven 111 
      }
4987 stevensc 112 
    }, 3000)
868 steven 113 
  }
984 steven 114 
 
1 www 115 
  useEffect(() => {
4987 stevensc 116 
    clearErrors()
117 
    hideDuplicatedModal()
118 
  }, [isOpen])
1 www 119 
 
120 
  const handleShowConfirmModal = () => {
4987 stevensc 121 
    setShowConfirmModal(!showConfirmModal)
122 
  }
1 www 123 
 
124 
  const handleModalAccept = () => {
4987 stevensc 125 
    setShowConfirmModal(false)
5106 stevensc 126 
    setValue('description', '')
127 
    setValue('file', '')
4987 stevensc 128 
    openShareModal(postUrl, modalType, feedType)
129 
    clearErrors()
130 
  }
1 www 131 
 
132 
  const handleModalCancel = () => {
4987 stevensc 133 
    setShowConfirmModal(false)
134 
    closeShareModal()
135 
    setModalType(lastModalType)
136 
    openShareModal(postUrl, lastModalType, feedType)
137 
  }
1 www 138 
 
139 
  const onSubmit = async (data, e) => {
4987 stevensc 140 
    setLoading(true)
141 
    const currentFormData = new FormData()
5106 stevensc 142 
    for (const input in data) {
4987 stevensc 143 
      currentFormData.append(input, data[input])
1 www 144 
    }
145 
    await axios.post(postUrl, currentFormData).then((response) => {
4987 stevensc 146 
      const data = response.data
147 
      const newFeed = data.data
1 www 148 
      if (data.success) {
4987 stevensc 149 
        closeShareModal()
1 www 150 
        // reset data
4987 stevensc 151 
        e.target.reset()
5106 stevensc 152 
        setValue('description', '')
153 
        setValue('file', '')
4987 stevensc 154 
        clearErrors()
1 www 155 
        addNotification({
5106 stevensc 156 
          style: 'success',
6390 stevensc 157 
          msg: 'La publicación ha sido compartida',
4987 stevensc 158 
        })
1018 stevensc 159 
        if (feedSharedId) {
4987 stevensc 160 
          addFeed(newFeed, feedSharedId)
1018 stevensc 161 
        } else {
4987 stevensc 162 
          addFeed(newFeed)
1018 stevensc 163 
        }
164 
        if (currentPage && timelineUrl) {
1009 steven 165 
          fetchFeeds(timelineUrl, currentPage)
166 
        }
1 www 167 
      } else {
168 
        if (data.data.description || data.data.file || data.data.share_width) {
6390 stevensc 169 
          Object.entries(data.data).map(([key, value]) =>
170 
            setError(key, { type: 'required', message: value })
171 
          )
1 www 172 
        } else {
173 
          addNotification({
5106 stevensc 174 
            style: 'danger',
6390 stevensc 175 
            msg: data.data,
4987 stevensc 176 
          })
1 www 177 
        }
178 
      }
4987 stevensc 179 
    })
1 www 180 
 
4987 stevensc 181 
    setLoading(false)
182 
  }
1 www 183 
 
184 
  const onUploadedHandler = (files) => {
5106 stevensc 185 
    setValue('file', files)
186 
    clearErrors('file')
4987 stevensc 187 
  }
1 www 188 
 
189 
  const dropZoneRender = () => {
190 
    if (
191 
      modalType !== shareModalTypes.POST &&
192 
      modalType !== shareModalTypes.SHARE
193 
    ) {
194 
      return (
195 
        <DropzoneComponent
196 
          modalType={modalType}
197 
          onUploaded={onUploadedHandler}
5106 stevensc 198 
          settedFile={getValues('file')}
1 www 199 
          recomendationText={recomendationText()}
200 
        />
4987 stevensc 201 
      )
1 www 202 
    }
4987 stevensc 203 
  }
1 www 204 
 
205 
  const SharedWithSelectRender = () => {
206 
    if (feedType === feedTypes.DASHBOARD) {
207 
      return (
4987 stevensc 208 
        <>
1 www 209 
          <select
210 
            name="shared_with"
211 
            id="shared_with"
212 
            className="form-control"
5106 stevensc 213 
            ref={register({ required: 'El campo es requerido' })}
1 www 214 
            defaultValue="p"
215 
          >
5106 stevensc 216 
            <option disabled="disabled" value="" style={{ display: 'none' }}>
217 
              {LABELS.SHARE_WITH}
1 www 218 
            </option>
5106 stevensc 219 
            <option value="p">{LABELS.PUBLIC}</option>
220 
            <option value="c">{LABELS.CONNECTIONS}</option>
1 www 221 
          </select>
6390 stevensc 222 
          {errors.shared_with && (
223 
            <FormErrorFeedback>{errors.shared_with.message}</FormErrorFeedback>
224 
          )}
4987 stevensc 225 
        </>
226 
      )
1 www 227 
    }
4987 stevensc 228 
  }
1 www 229 
 
230 
  return (
5106 stevensc 231 
    <>
6390 stevensc 232 
      <Modal show={isOpen} onHide={closeShareModal} autoFocus={false}>
1 www 233 
        <Modal.Header closeButton>
5106 stevensc 234 
          <Modal.Title>{LABELS.SHARE_A_POST}</Modal.Title>
1 www 235 
        </Modal.Header>
236 
        <form encType="multipart/form-data" onSubmit={handleSubmit(onSubmit)}>
237 
          <Modal.Body>
238 
            {SharedWithSelectRender()}
239 
            <CKEditor
5106 stevensc 240 
              data={watch('description')}
1 www 241 
              onChange={(e) => {
4987 stevensc 242 
                const text = e.editor.getData()
5106 stevensc 243 
                setValue('description', text)
6390 stevensc 244 
                if (errors.description && getValues('description'))
245 
                  clearErrors('description')
1 www 246 
              }}
2043 steven 247 
              config={CKEDITOR_OPTIONS}
1 www 248 
              name="description"
4997 stevensc 249 
              onDialogShow={() => {
250 
                const modal = document.querySelector('.fade.modal.show')
251 
                modal.removeAttribute('tabindex')
252 
              }}
4998 stevensc 253 
              onBeforeLoad={() => {
4987 stevensc 254 
                setIsCKEditorLoading(false)
1 www 255 
              }}
256 
            />
5106 stevensc 257 
            {isCKEditorLoading && <Spinner />}
6390 stevensc 258 
            {errors.description && (
259 
              <FormErrorFeedback>
260 
                {errors.description.message}
261 
              </FormErrorFeedback>
262 
            )}
1 www 263 
 
264 
            {dropZoneRender()}
6390 stevensc 265 
            {errors.file && (
266 
              <FormErrorFeedback>{errors.file.message}</FormErrorFeedback>
267 
            )}
1 www 268 
          </Modal.Body>
269 
          <Modal.Footer>
6390 stevensc 270 
            <Button size="sm" type="submit">
271 
              {LABELS.SEND}
272 
            </Button>
273 
            <Button
274 
              color="danger"
275 
              size="sm"
276 
              variant="danger"
277 
              onClick={closeShareModal}
278 
            >
5106 stevensc 279 
              {LABELS.CANCEL}
1 www 280 
            </Button>
281 
          </Modal.Footer>
282 
        </form>
5106 stevensc 283 
        {loading && <Spinner />}
1 www 284 
      </Modal>
285 
      <ConfirmModal
286 
        show={showConfirmModal}
287 
        onClose={handleModalCancel}
288 
        onAccept={handleModalAccept}
3723 stevensc 289 
        message="¿No se ha compartido tu publicación , desea descartarlo?"
1 www 290 
      />
5106 stevensc 291 
    </>
4987 stevensc 292 
  )
293 
}
1 www 294 
 
295 
const mapStateToProps = (state) => ({
296 
  isOpen: state.shareModal.isOpen,
297 
  postUrl: state.shareModal.postUrl,
298 
  modalType: state.shareModal.modalType,
299 
  lastModalType: state.shareModal.lastModalType,
300 
  feedType: state.shareModal.feedType,
6390 stevensc 301 
  feedSharedId: state.shareModal.feedSharedId,
4987 stevensc 302 
})
1 www 303 
 
304 
const mapDispatchToProps = {
305 
  addNotification: (notification) => addNotification(notification),
306 
  closeShareModal: () => closeShareModal(),
6390 stevensc 307 
  openShareModal: (postUrl, modalType, feedType) =>
308 
    openShareModal(postUrl, modalType, feedType),
1 www 309 
  setModalType: (modalType) => setModalType(modalType),
1022 stevensc 310 
  addFeed: (feed, feedSharedId) => addFeed(feed, feedSharedId),
6390 stevensc 311 
  fetchFeeds: (url, page) => fetchFeeds(url, page),
4987 stevensc 312 
}
1 www 313 
 
4987 stevensc 314 
export default connect(mapStateToProps, mapDispatchToProps)(ShareModal)