Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

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

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