Proyectos de Subversion LeadersLinked - Backend

Rev

Rev 16674 | Rev 16676 | Ir a la última revisión | | Comparar con el anterior | Ultima modificación | Ver Log |

Rev Autor Línea Nro. Línea
11166 stevensc 1
import React, { useState, useEffect } from 'react'
2
import axios from 'axios'
15214 stevensc 3
import { Modal } from 'react-bootstrap'
11166 stevensc 4
import { useForm } from 'react-hook-form'
5
import { shareModalTypes } from '../redux/share-modal/shareModal.types'
16671 stevensc 6
import {
7
  closeShareModal,
8
  setModalType
9
} from '../redux/share-modal/shareModal.actions'
11166 stevensc 10
import { useDispatch, useSelector } from 'react-redux'
11
import DropzoneComponent from './Dropzone/DropzoneComponent'
12
import { addFeed, fetchFeeds } from '../redux/feed/feed.actions'
13
import { addNotification } from '../redux/notification/notification.actions'
14
import Spinner from './Spinner'
14864 stevensc 15
import { CKEditor } from 'ckeditor4-react'
16
import { config } from './helpers/ckeditor_config'
7386 stevensc 17
 
7387 stevensc 18
const ShareModal = () => {
16671 stevensc 19
  const [loading, setLoading] = useState(false)
20
  const { postUrl, isOpen, modalType } = useSelector(
21
    ({ shareModal }) => shareModal
22
  )
23
  const { currentPage, timelineUrl, feedSharedId } = useSelector(
24
    ({ feed }) => feed
25
  )
26
  const dispatch = useDispatch()
7386 stevensc 27
 
16671 stevensc 28
  const {
29
    register,
30
    unregister,
31
    errors,
32
    handleSubmit,
33
    setValue,
34
    getValues,
35
    clearErrors,
36
    reset
37
  } = useForm({
38
    defaultValues: {
39
      description: '',
40
      share_width: ''
41
    }
42
  })
7388 stevensc 43
 
16671 stevensc 44
  useEffect(() => {
45
    register('description', { required: 'El campo es requerido' })
46
    register('posted_or_shared')
47
    setValue('posted_or_shared', shareModalTypes.POST)
7386 stevensc 48
 
16671 stevensc 49
    if (modalType !== shareModalTypes.POST) {
50
      register('file', { required: 'El campo es requerido' })
51
    }
7386 stevensc 52
 
16671 stevensc 53
    if (modalType === shareModalTypes.POST) {
54
      unregister('file')
55
    }
56
  }, [modalType])
15353 stevensc 57
 
16671 stevensc 58
  const recomendationText = {
59
    IMAGE: 'Tamaño recomendado: 720x720',
60
    FILE: 'solo documentos PDF',
61
    VIDEO: 'Video de extensión mp4, mpeg, webm'
62
  }
15353 stevensc 63
 
16671 stevensc 64
  const closeModal = () => dispatch(closeShareModal())
7386 stevensc 65
 
16671 stevensc 66
  useEffect(() => clearErrors(), [isOpen])
7386 stevensc 67
 
16671 stevensc 68
  const onSubmit = (data) => {
69
    setLoading(true)
70
    const currentFormData = new FormData()
7390 stevensc 71
 
16671 stevensc 72
    Object.entries(data).map(([entry, value]) =>
73
      currentFormData.append(entry, value)
74
    )
7386 stevensc 75
 
16671 stevensc 76
    axios
77
      .post(postUrl, currentFormData)
78
      .then(({ data }) => {
79
        const newFeed = data.data
80
        if (!data.success) {
81
          typeof data.data === 'string'
82
            ? dispatch(
83
                addNotification({
84
                  style: 'danger',
85
                  msg: data.data
86
                })
87
              )
88
            : Object.entries(data.data).map(([key, value]) =>
89
                value.map((err) =>
90
                  dispatch(
91
                    addNotification({
92
                      style: 'danger',
93
                      msg: `${key}: ${err}`
94
                    })
95
                  )
96
                )
97
              )
98
          return
99
        }
100
        reset()
101
        clearErrors()
102
        dispatch(
103
          addNotification({
104
            style: 'success',
105
            msg: 'La publicación ha sido compartida'
106
          })
107
        )
7386 stevensc 108
 
16671 stevensc 109
        if (currentPage && timelineUrl)
110
          dispatch(fetchFeeds(timelineUrl, currentPage))
15215 stevensc 111
 
16671 stevensc 112
        if (feedSharedId) return dispatch(addFeed(newFeed, feedSharedId))
7806 stevensc 113
 
16671 stevensc 114
        return dispatch(addFeed(newFeed))
115
      })
116
      .catch((err) =>
117
        dispatch(addNotification({ style: 'danger', msg: `Error: ${err}` }))
118
      )
119
      .finally(() => {
120
        setLoading(false)
121
        closeModal()
122
      })
123
  }
7806 stevensc 124
 
16671 stevensc 125
  const onUploadedHandler = (files) => {
126
    setValue('file', files)
127
    clearErrors('file')
128
  }
7806 stevensc 129
 
16671 stevensc 130
  return (
131
    <Modal show={isOpen} onHide={closeModal} autoFocus={false}>
132
      <form onSubmit={handleSubmit(onSubmit)}>
133
        <Modal.Header closeButton>
134
          <Modal.Title>Compartir una publicación</Modal.Title>
135
        </Modal.Header>
136
        <Modal.Body>
16675 stevensc 137
          {!loading ? (
16671 stevensc 138
            <>
139
              {modalType === shareModalTypes.SURVEY && <SurveyForm />}
16675 stevensc 140
              {modalType !== shareModalTypes.SURVEY && (
141
                <>
142
                  <CKEditor
143
                    onChange={(e) =>
144
                      setValue('description', e.editor.getData())
145
                    }
146
                    config={config}
147
                  />
148
                  {errors.description && <p>{errors.description.message}</p>}
149
                </>
150
              )}
16671 stevensc 151
              {![shareModalTypes.POST, shareModalTypes.SURVEY].includes(
152
                modalType
153
              ) && (
154
                <DropzoneComponent
155
                  modalType={modalType}
156
                  onUploaded={onUploadedHandler}
157
                  settedFile={getValues('file')}
158
                  recomendationText={recomendationText[modalType]}
159
                />
160
              )}
161
              {errors.file && <p>{errors.file.message}</p>}
162
            </>
16675 stevensc 163
          ) : (
164
            <Spinner />
16671 stevensc 165
          )}
166
        </Modal.Body>
167
        <Modal.Footer>
168
          <button
169
            className="btn btn-sm btn-primary"
170
            disabled={loading}
171
            type="submit"
172
          >
173
            Enviar
174
          </button>
175
          <button
176
            className="btn btn-sm btn-tertiary"
177
            disabled={loading}
178
            onClick={closeModal}
179
          >
180
            Cancelar
181
          </button>
182
          <button
16675 stevensc 183
            className="btn btn-sm"
16671 stevensc 184
            disabled={loading}
185
            onClick={() => dispatch(setModalType(shareModalTypes.SURVEY))}
186
          >
187
            Añadir encuesta
188
          </button>
189
        </Modal.Footer>
190
      </form>
191
    </Modal>
192
  )
193
}
7386 stevensc 194
 
16675 stevensc 195
const SurveyForm = ({ register }) => {
16671 stevensc 196
  const [optionsNumber, setOptionsNumber] = useState(2)
7386 stevensc 197
 
16671 stevensc 198
  const options = [
199
    { placeholder: 'Por ejemplo: transporte público' },
200
    { placeholder: 'Por ejemplo: coche propio' },
201
    { placeholder: 'Por ejemplo: coche compartido' },
202
    { placeholder: 'Por ejemplo: bicicleta' },
203
    { placeholder: 'Por ejemplo: otro' }
204
  ]
205
 
206
  const addOption = () => {
16674 stevensc 207
    setOptionsNumber(optionsNumber + 1)
16671 stevensc 208
  }
209
 
210
  const removeOption = () => {
16674 stevensc 211
    setOptionsNumber(optionsNumber - 1)
16671 stevensc 212
  }
213
 
214
  return (
215
    <>
216
      <div className="form-group">
217
        <label htmlFor="question">Tu pregunta*</label>
218
        <input
219
          type="text"
220
          className="form-control"
221
          placeholder="Por ejemplo: ¿cómo te desplazas al trabajo?"
222
          maxLength={140}
223
          id="question"
224
          name="question"
225
          ref={register({ required: true })}
226
        />
227
      </div>
228
      {options.slice(0, optionsNumber).map((option, index) => (
229
        <div className="form-group" key={index}>
230
          <label htmlFor={`option-${index + 1}`}>Opción {index + 1}*</label>
231
          {index > 1 && (
232
            <button className="btn" onClick={removeOption}>
233
              Eliminar
234
            </button>
235
          )}
236
          <input
237
            type="text"
238
            className="form-control"
239
            placeholder={option.placeholder}
240
            maxLength={30}
241
            id={`option-${index + 1}`}
242
            name={`option-${index + 1}`}
243
            ref={register({ required: true })}
244
          />
245
        </div>
246
      ))}
16675 stevensc 247
      {optionsNumber < options.length && (
248
        <button className="btn btn-outline-primary rounded" onClick={addOption}>
249
          Añadir opción
250
        </button>
251
      )}
16671 stevensc 252
    </>
253
  )
11166 stevensc 254
}
7386 stevensc 255
 
16671 stevensc 256
export default ShareModal