Proyectos de Subversion LeadersLinked - SPA

Rev

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

Rev 3180 Rev 3181
Línea 1... Línea 1...
1 
import React, { useEffect, useState } from 'react'
 1 
import React from 'react'
2 
import { useForm } from 'react-hook-form'
 2 
import { Controller, useForm } from 'react-hook-form'
3 
import { useDispatch, useSelector } from 'react-redux'
 3 
import { useDispatch, useSelector } from 'react-redux'
Línea 4... Línea 4...
4 
 
 4 
 
- 
 
 5 
import { axios } from '@utils'
5 
import { axios } from '@utils'
 6 
import { useShareModal } from '@hooks'
6 
import { addFeed } from '@store/feed/feed.actions'
 7 
import { addFeed } from '@store/feed/feed.actions'
7 
import { feedTypes } from '@store/feed/feed.types'
 8 
import { feedTypes } from '@store/feed/feed.types'
8 
import { addNotification } from '@store/notification/notification.actions'
 9 
import { addNotification } from '@store/notification/notification.actions'
9 
import { shareModalTypes } from '@store/share-modal/shareModal.types'
 - 
 
10 
import {
 - 
 
11 
  closeShareModal,
 - 
 
12 
  openShareModal
 - 
 
Línea 13... Línea 10...
13 
} from '@store/share-modal/shareModal.actions'
 10 
import { shareModalTypes } from '@store/share-modal/shareModal.types'
14 
 
 11 
 
15 
import Modal from '@components/UI/modal/Modal'
 12 
import Modal from '@components/UI/modal/Modal'
16 
import Select from '@components/UI/inputs/Select'
 13 
import Select from '@components/UI/inputs/Select'
Línea 23... Línea 20...
23 
  [shareModalTypes.IMAGE]: 'Tamaño recomendado: 720x720',
 20 
  [shareModalTypes.IMAGE]: 'Tamaño recomendado: 720x720',
24 
  [shareModalTypes.FILE]: 'solo documentos PDF',
 21 
  [shareModalTypes.FILE]: 'solo documentos PDF',
25 
  [shareModalTypes.VIDEO]: 'Video de extensión mp4, mpeg, webm, mov'
 22 
  [shareModalTypes.VIDEO]: 'Video de extensión mp4, mpeg, webm, mov'
26 
}
 23 
}
Línea 27... Línea 24...
27 
 
 24 
 
28 
const ShareModal = ({ setModalType }) => {
 - 
 
29 
  const [showConfirmModal, setShowConfirmModal] = useState(false)
 25 
const ShareModal = () => {
30 
  const labels = useSelector(({ intl }) => intl.labels)
 26 
  const labels = useSelector(({ intl }) => intl.labels)
Línea -... Línea 27...
- 
 
 27 
  const dispatch = useDispatch()
- 
 
 28 
 
- 
 
 29 
  const {
- 
 
 30 
    show,
- 
 
 31 
    showConfirm,
- 
 
 32 
    postUrl,
31 
  const dispatch = useDispatch()
 33 
    modalType,
- 
 
 34 
    feedType,
- 
 
 35 
    feedSharedId,
- 
 
 36 
    onConfirm,
32 
 
 37 
    onReject,
Línea 33... Línea 38...
33 
  const { isOpen, postUrl, modalType, lastModalType, feedType, feedSharedId } =
 38 
    close
34 
    useSelector((state) => state.shareModal)
 39 
  } = useShareModal()
35 
 
 40 
 
36 
  const {
 - 
 
37 
    control,
 - 
 
38 
    formState: { errors, isSubmitting },
 41 
  const {
39 
    register,
 - 
 
40 
    unregister,
 42 
    control,
41 
    handleSubmit,
 - 
 
42 
    setValue,
 43 
    formState: { errors, isSubmitting },
43 
    reset,
 44 
    handleSubmit,
44 
    watch
 - 
 
45 
  } = useForm({
 - 
 
46 
    defaultValues:
 - 
 
47 
      modalType !== shareModalTypes.POST && modalType !== shareModalTypes.SHARE
 - 
 
48 
        ? {
 - 
 
49 
            posted_or_shared: modalType === shareModalTypes.SHARE ? 's' : 'p',
 - 
 
50 
            share_width: 'p',
 - 
 
51 
            description: '',
 - 
 
52 
            file: ''
 45 
    reset
53 
          }
 46 
  } = useForm({
54 
        : {
 47 
    defaultValues: {
55 
            posted_or_shared: modalType === shareModalTypes.SHARE ? 's' : 'p',
 48 
      posted_or_shared: modalType === shareModalTypes.SHARE ? 's' : 'p',
56 
            share_width: 'p',
 49 
      share_width: 'p',
57 
            description: ''
 - 
 
58 
          }
 - 
 
59 
  })
 - 
 
60 
  const watchedDescription = watch('description')
 - 
 
61 
  const watchedFile = watch('file')
 - 
 
62 
 
 - 
 
63 
  const toggleConfirmModal = () => setShowConfirmModal(!showConfirmModal)
 - 
 
64 
 
 - 
 
65 
  const handleModalAccept = () => {
 - 
 
66 
    setShowConfirmModal(false)
 - 
 
67 
    reset()
 - 
 
68 
    dispatch(openShareModal(postUrl, modalType, feedType))
 - 
 
69 
  }
 - 
 
70 
 
 - 
 
71 
  const handleModalCancel = () => {
 - 
 
72 
    setShowConfirmModal(false)
 - 
 
73 
    setModalType(lastModalType)
 - 
 
74 
    dispatch(closeShareModal())
 - 
 
75 
    dispatch(openShareModal(postUrl, lastModalType, feedType))
 - 
 
76 
  }
 - 
 
77 
 
 - 
 
78 
  const onUploadedHandler = (files) => {
 - 
 
79 
    setValue('file', files)
 - 
 
80 
  }
 - 
 
81 
 
 - 
 
Línea 82... Línea 50...
82 
  const onClose = () => {
 50 
      description: ''
83 
    dispatch(closeShareModal())
 51 
    }
84 
  }
 52 
  })
85 
 
 53 
 
Línea 86... Línea 54...
86 
  const onSubmit = async (feed) => {
 54 
  const onSubmit = handleSubmit(async (feed) => {
Línea 105... Línea 73...
105 
        addNotification({
 73 
        addNotification({
106 
          style: 'success',
 74 
          style: 'success',
107 
          msg: 'La publicación ha sido compartida'
 75 
          msg: 'La publicación ha sido compartida'
108 
        })
 76 
        })
109 
      )
 77 
      )
110 
 
 - 
 
111 
      onClose()
 - 
 
112 
 
 - 
 
113 
      if (feedSharedId) {
 - 
 
114 
        dispatch(addFeed(newFeed, feedSharedId))
 78 
      dispatch(addFeed(newFeed, feedSharedId))
115 
      } else {
 79 
      reset()
116 
        dispatch(addFeed(newFeed))
 - 
 
117 
      }
 80 
      close()
118 
 
 - 
 
119 
      setValue('description', '')
 - 
 
120 
      setValue('file', '')
 - 
 
121 
    } catch (error) {
 81 
    } catch (error) {
122 
      console.error(error)
 82 
      console.error(error)
123 
      dispatch(addNotification({ style: 'danger', msg: error.message }))
 83 
      dispatch(addNotification({ style: 'danger', msg: error.message }))
124 
    }
 84 
    }
125 
  }
 85 
  })
126 
 
 - 
 
127 
  useEffect(() => {
 - 
 
128 
    console.log(watchedFile)
 - 
 
129 
 
 - 
 
130 
    if ((watchedFile || watchedDescription) && modalType !== lastModalType) {
 - 
 
131 
      onClose()
 - 
 
132 
      toggleConfirmModal()
 - 
 
133 
    }
 - 
 
134 
 
 - 
 
135 
    if (watchedFile !== undefined) {
 - 
 
136 
      register('file', { required: 'El archivo es requerido' })
 - 
 
137 
    } else {
 - 
 
138 
      unregister('file')
 - 
 
139 
    }
 - 
 
140 
  }, [modalType, watchedFile, watchedDescription])
 - 
 
Línea 141... Línea 86...
141 
 
 86 
 
142 
  return (
 87 
  return (
143 
    <>
 88 
    <>
144 
      <Modal
 89 
      <Modal
145 
        show={isOpen}
 90 
        show={show}
146 
        title={labels.share_a_post}
 91 
        title={labels.share_a_post}
147 
        labelAccept={labels.send}
 92 
        labelAccept={labels.send}
148 
        labelReject={labels.cancel}
 93 
        labelReject={labels.cancel}
149 
        loading={isSubmitting}
 94 
        loading={isSubmitting}
150 
        onAccept={handleSubmit(onSubmit)}
 95 
        onAccept={onSubmit}
151 
        onClose={onClose}
 96 
        onClose={close}
152 
      >
 97 
      >
153 
        {feedType === feedTypes.DASHBOARD && (
 98 
        {feedType === feedTypes.DASHBOARD && (
154 
          <Select
 99 
          <Select
155 
            name='shared_with'
 100 
            name='shared_with'
Línea 168... Línea 113...
168 
          rules={{ required: 'La descripción es requerida' }}
 113 
          rules={{ required: 'La descripción es requerida' }}
169 
          error={errors.description?.message}
 114 
          error={errors.description?.message}
170 
        />
 115 
        />
Línea 171... Línea 116...
171 
 
 116 
 
- 
 
 117 
        {![shareModalTypes.POST, shareModalTypes.SHARE].includes(modalType) && (
- 
 
 118 
          <Controller
- 
 
 119 
            name='file'
- 
 
 120 
            control={control}
- 
 
 121 
            rules={{ required: 'El archivo es requerido' }}
172 
        {![shareModalTypes.POST, shareModalTypes.SHARE].includes(modalType) && (
 122 
            render={({ field: { value, onChange } }) => (
173 
          <DropzoneComponent
 123 
              <DropzoneComponent
174 
            modalType={modalType}
 124 
                modalType={modalType}
175 
            onUploaded={onUploadedHandler}
 125 
                onUploaded={(file) => onChange(file)}
176 
            settedFile={watch('file')}
 126 
                settedFile={value}
- 
 
 127 
                recomendationText={recomendationText[modalType] ?? ''}
- 
 
 128 
              />
177 
            recomendationText={recomendationText[modalType] ?? ''}
 129 
            )}
178 
          />
 130 
          />
Línea 179... Línea 131...
179 
        )}
 131 
        )}
180 
 
 132 
 
181 
        {errors.file && (
 133 
        {errors.file && (
182 
          <FormErrorFeedback>{errors.file.message}</FormErrorFeedback>
 134 
          <FormErrorFeedback>{errors.file.message}</FormErrorFeedback>
183 
        )}
 135 
        )}
184 
      </Modal>
 136 
      </Modal>
185 
      <ConfirmModal
 137 
      <ConfirmModal
186 
        show={showConfirmModal}
 138 
        show={showConfirm}
187 
        onClose={handleModalCancel}
 139 
        onClose={onReject}
188 
        onAccept={handleModalAccept}
 140 
        onAccept={onConfirm}
189 
        message='¿No se ha compartido tu publicación , desea descartarlo?'
 141 
        message='¿No se ha compartido tu publicación , desea descartarlo?'
190 
      />
 142 
      />
191 
    </>
 143 
    </>