Proyectos de Subversion LeadersLinked - SPA

Rev

Rev 2802 | Rev 3166 | Ir a la última revisión | Mostrar el archivo completo | | | Autoría | Ultima modificación | Ver Log |

Rev 2802 Rev 2807
Línea 1... Línea 1...
1 
import React, { useEffect, useState } from 'react'
 1 
import React, { useEffect, useState } from 'react'
2 
import { useForm } from 'react-hook-form'
 2 
import { useForm } from 'react-hook-form'
3 
import { connect, useSelector } from 'react-redux'
 3 
import { useDispatch, useSelector } from 'react-redux'
Línea 4... Línea 4...
4 
 
 4 
 
5 
import { axios } from '@app/utils'
 5 
import { axios } from '@app/utils'
6 
import { addNotification } from '@app/redux/notification/notification.actions'
 6 
import { feedTypes } from '@app/redux/feed/feed.types'
7 
import {
 7 
import {
8 
  closeShareModal,
 8 
  closeShareModal,
9 
  openShareModal,
 - 
 
10 
  setModalType
 9 
  openShareModal
- 
 
 10 
} from '@app/redux/share-modal/shareModal.actions'
11 
} from '@app/redux/share-modal/shareModal.actions'
 11 
import { addNotification } from '@app/redux/notification/notification.actions'
12 
import { addFeed } from '@app/redux/feed/feed.actions'
 - 
 
13 
 
 12 
import { addFeed } from '@app/redux/feed/feed.actions'
14 
import { shareModalTypes } from '@app/redux/share-modal/shareModal.types'
 - 
 
Línea 15... Línea 13...
15 
import { feedTypes } from '@app/redux/feed/feed.types'
 13 
import { shareModalTypes } from '@app/redux/share-modal/shareModal.types'
16 
 
 14 
 
17 
import DropzoneComponent from '../dropzone/DropzoneComponent'
 15 
import Ckeditor from '@components/UI/Ckeditor'
18 
import FormErrorFeedback from '../UI/form/FormErrorFeedback'
 16 
import FormErrorFeedback from '@components/UI/form/FormErrorFeedback'
19 
import Modal from '../UI/modal/Modal'
 17 
import Modal from '@components/UI/modal/Modal'
- 
 
 18 
import DropzoneComponent from '@components/dropzone/DropzoneComponent'
- 
 
 19 
import ConfirmModal from './ConfirmModal'
- 
 
 20 
import Select from '@components/UI/inputs/Select'
- 
 
 21 
 
- 
 
 22 
const recomendationText = {
- 
 
 23 
  [shareModalTypes.IMAGE]: 'Tamaño recomendado: 720x720',
- 
 
 24 
  [shareModalTypes.FILE]: 'solo documentos PDF',
Línea 20... Línea 25...
20 
import CKEditor from '@app/components/UI/Ckeditor'
 25 
  [shareModalTypes.VIDEO]: 'Video de extensión mp4, mpeg, webm, mov'
21 
import ConfirmModal from './ConfirmModal'
 - 
 
22 
 
 - 
 
23 
const ShareModal = ({
 - 
 
24 
  postUrl,
 - 
 
25 
  isOpen,
 - 
 
26 
  modalType,
 - 
 
27 
  lastModalType,
 - 
 
28 
  setModalType,
 - 
 
29 
  feedType,
 - 
 
30 
  feedSharedId,
 - 
 
31 
  closeShareModal, // Redux action
 - 
 
32 
  addNotification, // Redux action
 - 
 
33 
  addFeed, // Redux action
 26 
}
34 
  openShareModal // Redux action
 27 
 
- 
 
 28 
const ShareModal = ({ setModalType }) => {
- 
 
 29 
  const [showConfirmModal, setShowConfirmModal] = useState(false)
- 
 
 30 
  const labels = useSelector(({ intl }) => intl.labels)
Línea 35... Línea 31...
35 
}) => {
 31 
  const { isOpen, postUrl, modalType, lastModalType, feedType, feedSharedId } =
- 
 
 32 
    useSelector((state) => state.shareModal)
- 
 
 33 
  const dispatch = useDispatch()
36 
  const [showConfirmModal, setShowConfirmModal] = useState(false)
 34 
 
37 
  const labels = useSelector(({ intl }) => intl.labels)
 35 
  const {
38 
 
 36 
    control,
39 
  const {
 37 
    formState: { errors },
40 
    register,
 38 
    register,
41 
    unregister,
 39 
    unregister,
42 
    handleSubmit,
 40 
    handleSubmit,
43 
    setValue,
 41 
    setValue,
44 
    getValues,
 - 
 
45 
    clearErrors,
 42 
    getValues,
46 
    setError,
 43 
    clearErrors,
47 
    watch,
 44 
    setError,
48 
    formState: { errors }
 45 
    watch
49 
  } = useForm({
 46 
  } = useForm({
50 
    defaultValues: {
 47 
    defaultValues: {
51 
      description: '',
 48 
      description: '',
Línea 52... Línea -...
52 
      share_width: 'p'
 - 
 
53 
    }
 - 
 
54 
  })
 - 
 
55 
  const watchedDescription = watch('description')
 - 
 
56 
 
 - 
 
57 
  const recomendationText = () => {
 - 
 
58 
    switch (modalType) {
 - 
 
59 
      case shareModalTypes.IMAGE:
 - 
 
60 
        return 'Tamaño recomendado: 720x720'
 - 
 
61 
      case shareModalTypes.FILE:
 - 
 
62 
        return 'solo documentos PDF'
 - 
 
63 
      case shareModalTypes.VIDEO:
 - 
 
64 
        return 'Video de extensión mp4, mpeg, webm, mov'
 - 
 
65 
      default:
 49 
      share_width: 'p'
Línea 66... Línea 50...
66 
        return ''
 50 
    }
67 
    }
 51 
  })
68 
  }
 52 
  const watchedDescription = watch('description')
69 
 
 53 
 
70 
  const toggleConfirmModal = () => setShowConfirmModal(!showConfirmModal)
 - 
 
71 
 
 54 
  const toggleConfirmModal = () => setShowConfirmModal(!showConfirmModal)
- 
 
 55 
 
72 
  const handleModalAccept = () => {
 56 
  const handleModalAccept = () => {
Línea 73... Línea 57...
73 
    setShowConfirmModal(false)
 57 
    setShowConfirmModal(false)
74 
    setValue('description', '')
 58 
    setValue('description', '')
75 
    setValue('file', '')
 - 
 
76 
    openShareModal(postUrl, modalType, feedType)
 59 
    setValue('file', '')
- 
 
 60 
    clearErrors()
77 
    clearErrors()
 61 
    dispatch(openShareModal(postUrl, modalType, feedType))
78 
  }
 62 
  }
Línea 79... Línea 63...
79 
 
 63 
 
80 
  const handleModalCancel = () => {
 64 
  const handleModalCancel = () => {
Línea 107... Línea 91...
107 
          throw new Error(data)
 91 
          throw new Error(data)
108 
        }
 92 
        }
Línea 109... Línea 93...
109 
 
 93 
 
Línea -... Línea 94...
- 
 
 94 
        const newFeed = data
110 
        const newFeed = data
 95 
 
111 
 
 96 
        dispatch(
112 
        addNotification({
 97 
          addNotification({
- 
 
 98 
            style: 'success',
113 
          style: 'success',
 99 
            msg: 'La publicación ha sido compartida'
Línea 114... Línea 100...
114 
          msg: 'La publicación ha sido compartida'
 100 
          })
Línea 115... Línea 101...
115 
        })
 101 
        )
116 
 
 102 
 
117 
        onClose()
 103 
        onClose()
118 
 
 104 
 
119 
        if (feedSharedId) {
 105 
        if (feedSharedId) {
Línea 120... Línea 106...
120 
          addFeed(newFeed, feedSharedId)
 106 
          dispatch(addFeed(newFeed, feedSharedId))
121 
        } else {
 107 
        } else {
122 
          addFeed(newFeed)
 108 
          dispatch(addFeed(newFeed))
123 
        }
 109 
        }
124 
 
 110 
 
- 
 
 111 
        setValue('description', '')
125 
        setValue('description', '')
 112 
        setValue('file', '')
126 
        setValue('file', '')
 113 
      })
127 
      })
 114 
      .catch((error) => {
- 
 
 115 
        console.error(error)
128 
      .catch((error) => {
 116 
        dispatch(
129 
        console.log(error)
 117 
          addNotification({
130 
        addNotification({
 118 
            style: 'danger',
Línea 131... Línea 119...
131 
          style: 'danger',
 119 
            msg: 'Ha ocurrido un error al publicar, intente más tarde.'
132 
          msg: 'Ha ocurrido un error al publicar, intente más tarde.'
 120 
          })
133 
        })
 121 
        )
134 
      })
 122 
      })
Línea 135... Línea 123...
135 
  })
 123 
  })
136 
 
 124 
 
137 
  const onUploadedHandler = (files) => {
 125 
  const onUploadedHandler = (files) => {
138 
    setValue('file', files)
 126 
    setValue('file', files)
Línea 139... Línea 127...
139 
    clearErrors('file')
 127 
    clearErrors('file')
140 
  }
 128 
  }
Línea 184... Línea 172...
184 
        labelReject={labels.cancel}
 172 
        labelReject={labels.cancel}
185 
        onClose={onClose}
 173 
        onClose={onClose}
186 
        onAccept={onSubmit}
 174 
        onAccept={onSubmit}
187 
      >
 175 
      >
188 
        {feedType === feedTypes.DASHBOARD ? (
 176 
        {feedType === feedTypes.DASHBOARD ? (
189 
          <select
 177 
          <Select
190 
            name='shared_with'
 178 
            name='shared_with'
191 
            className='form-control'
 - 
 
192 
            defaultValue='p'
 179 
            defaultValue='p'
193 
            ref={register}
 180 
            control={control}
194 
          >
 181 
            options={[
195 
            <option value='p'>{labels.public}</option>
 182 
              { name: labels.public, value: 'p' },
196 
            <option value='c'>{labels.connections}</option>
 183 
              { name: labels.connections, value: 'c' }
- 
 
 184 
            ]}
197 
          </select>
 185 
          />
198 
        ) : null}
 186 
        ) : null}
Línea 199... Línea 187...
199 
 
 187 
 
200 
        <CKEditor
 188 
        <Ckeditor
201 
          defaultValue={watchedDescription}
 189 
          defaultValue={watchedDescription}
202 
          onChange={(value) => setValue('description', value)}
 190 
          onChange={(value) => setValue('description', value)}
Línea 203... Línea 191...
203 
        />
 191 
        />
Línea 209... Línea 197...
209 
        {![shareModalTypes.POST, shareModalTypes.SHARE].includes(modalType) ? (
 197 
        {![shareModalTypes.POST, shareModalTypes.SHARE].includes(modalType) ? (
210 
          <DropzoneComponent
 198 
          <DropzoneComponent
211 
            modalType={modalType}
 199 
            modalType={modalType}
212 
            onUploaded={onUploadedHandler}
 200 
            onUploaded={onUploadedHandler}
213 
            settedFile={watch('file')}
 201 
            settedFile={watch('file')}
214 
            recomendationText={recomendationText()}
 202 
            recomendationText={recomendationText[modalType] ?? ''}
215 
          />
 203 
          />
216 
        ) : null}
 204 
        ) : null}
Línea 217... Línea 205...
217 
 
 205 
 
218 
        {errors.file && (
 206 
        {errors.file && (
Línea 227... Línea 215...
227 
      />
 215 
      />
228 
    </>
 216 
    </>
229 
  )
 217 
  )
230 
}
 218 
}
Línea 231... Línea -...
231 
 
 - 
 
232 
const mapStateToProps = (state) => ({
 - 
 
233 
  isOpen: state.shareModal.isOpen,
 219 
 
234 
  postUrl: state.shareModal.postUrl,
 - 
 
235 
  modalType: state.shareModal.modalType,
 - 
 
236 
  lastModalType: state.shareModal.lastModalType,
 - 
 
237 
  feedType: state.shareModal.feedType,
 - 
 
238 
  feedSharedId: state.shareModal.feedSharedId
 - 
 
239 
})
 - 
 
240 
 
 - 
 
241 
const mapDispatchToProps = {
 - 
 
242 
  addNotification: (notification) => addNotification(notification),
 - 
 
243 
  closeShareModal: () => closeShareModal(),
 - 
 
244 
  openShareModal: (postUrl, modalType, feedType) =>
 - 
 
245 
    openShareModal(postUrl, modalType, feedType),
 - 
 
246 
  setModalType: (modalType) => setModalType(modalType),
 - 
 
247 
  addFeed: (feed, feedSharedId) => addFeed(feed, feedSharedId)
 - 
 
248 
}
 - 
 
249 
 
 -