Proyectos de Subversion LeadersLinked - SPA

Rev

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

Rev 3283 Rev 3697
Línea 1... Línea 1...
1 
import React, { useState } from 'react'
 1 
import React, { useState } from 'react';
2 
import { Controller, 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';
4 
 
 4 
 
5 
import { useShareModal } from '@hooks'
 5 
import { useShareModal } from '@hooks';
6 
import { addFeed } from '@store/feed/feed.actions'
 6 
import { addFeed } from '@store/feed/feed.actions';
7 
import { feedTypes } from '@store/feed/feed.types'
 7 
import { feedTypes } from '@store/feed/feed.types';
8 
import { addNotification } from '@store/notification/notification.actions'
 8 
import { addNotification } from '@store/notification/notification.actions';
9 
import { shareModalTypes } from '@store/share-modal/shareModal.types'
 9 
import { shareModalTypes } from '@store/share-modal/shareModal.types';
10 
 
 10 
 
11 
import Form from '@components/common/form'
 11 
import Form from '@components/common/form';
12 
import Modal from '@components/UI/modal/Modal'
 12 
import Modal from '@components/UI/modal/Modal';
13 
import Select from '@components/UI/inputs/Select'
 13 
import Select from '@components/UI/inputs/Select';
14 
import Ckeditor from '@components/common/ckeditor/Ckeditor'
 14 
import Ckeditor from '@components/common/ckeditor/Ckeditor';
15 
import DropzoneComponent from '@components/dropzone/DropzoneComponent'
 15 
import DropzoneComponent from '@components/dropzone/DropzoneComponent';
16 
import FormErrorFeedback from '@components/UI/form/FormErrorFeedback'
 16 
import FormErrorFeedback from '@components/UI/form/FormErrorFeedback';
17 
import ConfirmModal from './ConfirmModal'
 17 
import ConfirmModal from './ConfirmModal';
Línea 18... Línea 18...
18 
 
 18 
 
19 
const recomendationText = {
 19 
const recomendationText = {
20 
  [shareModalTypes.IMAGE]: 'Tamaño recomendado: 720x720',
 20 
  [shareModalTypes.IMAGE]: 'Tamaño recomendado: 720x720',
21 
  [shareModalTypes.FILE]: 'solo documentos PDF',
 21 
  [shareModalTypes.FILE]: 'solo documentos PDF',
22 
  [shareModalTypes.VIDEO]: 'Video de extensión mp4, mpeg, webm, mov'
 22 
  [shareModalTypes.VIDEO]: 'Video de extensión mp4, mpeg, webm, mov'
Línea 23... Línea 23...
23 
}
 23 
};
24 
 
 24 
 
25 
const ShareModal = () => {
 25 
const ShareModal = () => {
26 
  const [showConfirm, setShowConfirm] = useState(false)
 26 
  const [showConfirm, setShowConfirm] = useState(false);
Línea 27... Línea -...
27 
  const labels = useSelector(({ intl }) => intl.labels)
 - 
 
28 
  const dispatch = useDispatch()
 - 
 
29 
 
 - 
 
30 
  const {
 - 
 
31 
    show,
 27 
  const labels = useSelector(({ intl }) => intl.labels);
32 
    modalType,
 - 
 
33 
    feedType,
 - 
 
34 
    feedSharedId,
 - 
 
35 
    postUrl,
 28 
  const dispatch = useDispatch();
Línea 36... Línea 29...
36 
    closeModal,
 29 
 
37 
    openModal
 30 
  const { show, modalType, feedType, feedSharedId, postUrl, closeModal, openModal } =
38 
  } = useShareModal()
 31 
    useShareModal();
39 
 
 32 
 
Línea 46... Línea 39...
46 
  } = useForm({
 39 
  } = useForm({
47 
    defaultValues: {
 40 
    defaultValues: {
48 
      shared_with: 'p',
 41 
      shared_with: 'p',
49 
      description: ''
 42 
      description: ''
50 
    }
 43 
    }
51 
  })
 44 
  });
52 
  const description = watch('description')
 45 
  const description = watch('description');
53 
  const file = watch('file')
 46 
  const file = watch('file');
Línea 54... Línea 47...
54 
 
 47 
 
Línea 55... Línea 48...
55 
  const toggleConfirm = () => setShowConfirm(!showConfirm)
 48 
  const toggleConfirm = () => setShowConfirm(!showConfirm);
56 
 
 49 
 
57 
  const onSubmit = handleSubmit(async (feed) => {
 50 
  const onSubmit = handleSubmit(async (feed) => {
58 
    try {
 51 
    try {
Línea 59... Línea 52...
59 
      feed.posted_or_shared = modalType === shareModalTypes.SHARE ? 's' : 'p'
 52 
      feed.posted_or_shared = modalType === shareModalTypes.SHARE ? 's' : 'p';
60 
      await dispatch(addFeed(postUrl, feed, feedSharedId))
 53 
      await dispatch(addFeed(postUrl, feed, feedSharedId));
61 
 
 54 
 
62 
      dispatch(
 55 
      dispatch(
63 
        addNotification({
 56 
        addNotification({
64 
          style: 'success',
 57 
          style: 'success',
65 
          msg: 'Post publicado correctamente'
 58 
          msg: 'Post publicado correctamente'
66 
        })
 59 
        })
67 
      )
 60 
      );
68 
      reset()
 61 
      reset();
69 
      closeModal()
 62 
      closeModal();
70 
    } catch (error) {
 63 
    } catch (error) {
Línea 71... Línea 64...
71 
      dispatch(addNotification({ style: 'danger', msg: error.message }))
 64 
      dispatch(addNotification({ style: 'danger', msg: error.message }));
72 
    }
 65 
    }
73 
  })
 66 
  });
74 
 
 67 
 
Línea 75... Línea 68...
75 
  const handleClose = () => {
 68 
  const handleClose = () => {
76 
    if (description || file) toggleConfirm()
 69 
    if (description || file) toggleConfirm();
77 
    closeModal()
 70 
    closeModal();
78 
  }
 71 
  };
79 
 
 72 
 
Línea 80... Línea 73...
80 
  const handleConfirm = () => {
 73 
  const handleConfirm = () => {
81 
    reset()
 74 
    reset();
82 
    toggleConfirm()
 75 
    toggleConfirm();
83 
    closeModal()
 76 
    closeModal();
Línea 84... Línea 77...
84 
  }
 77 
  };
85 
 
 78 
 
86 
  const handleCancel = () => {
 79 
  const handleCancel = () => {
87 
    toggleConfirm()
 80 
    toggleConfirm();
Línea 104... Línea 97...
104 
            <Select
 97 
            <Select
105 
              name='shared_with'
 98 
              name='shared_with'
106 
              defaultValue='p'
 99 
              defaultValue='p'
107 
              control={control}
 100 
              control={control}
108 
              options={[
 101 
              options={[
109 
                { name: labels.public, value: 'p' },
 102 
                { label: labels.public, value: 'p' },
110 
                { name: labels.connections, value: 'c' }
 103 
                { label: labels.connections, value: 'c' }
111 
              ]}
 104 
              ]}
112 
            />
 105 
            />
113 
          )}
 106 
          )}
Línea 114... Línea 107...
114 
 
 107 
 
Línea 117... Línea 110...
117 
            control={control}
 110 
            control={control}
118 
            rules={{ required: 'La descripción es requerida' }}
 111 
            rules={{ required: 'La descripción es requerida' }}
119 
            error={errors.description?.message}
 112 
            error={errors.description?.message}
120 
          />
 113 
          />
Línea 121... Línea 114...
121 
 
 114 
 
122 
          {![shareModalTypes.POST, shareModalTypes.SHARE].includes(
 - 
 
123 
            modalType
 - 
 
124 
          ) && (
 115 
          {![shareModalTypes.POST, shareModalTypes.SHARE].includes(modalType) && (
125 
            <Controller
 116 
            <Controller
126 
              name='file'
 117 
              name='file'
127 
              control={control}
 118 
              control={control}
128 
              rules={{ required: 'El archivo es requerido' }}
 - 
 
129 
              render={({
 119 
              rules={{ required: 'El archivo es requerido' }}
130 
                field: { value, onChange },
 - 
 
131 
                fieldState: { error }
 - 
 
132 
              }) => (
 120 
              render={({ field: { value, onChange }, fieldState: { error } }) => (
133 
                <>
 121 
                <>
134 
                  <DropzoneComponent
 122 
                  <DropzoneComponent
135 
                    type={modalType}
 123 
                    type={modalType}
136 
                    onUploaded={onChange}
 124 
                    onUploaded={onChange}
137 
                    settedFile={value}
 125 
                    settedFile={value}
138 
                    recomendationText={recomendationText[modalType] ?? ''}
 126 
                    recomendationText={recomendationText[modalType] ?? ''}
139 
                  />
 - 
 
140 
                  {error && (
 127 
                  />
141 
                    <FormErrorFeedback>{error.message}</FormErrorFeedback>
 - 
 
142 
                  )}
 128 
                  {error && <FormErrorFeedback>{error.message}</FormErrorFeedback>}
143 
                </>
 129 
                </>
144 
              )}
 130 
              )}
145 
            />
 131 
            />
146 
          )}
 132 
          )}
Línea 151... Línea 137...
151 
        onAccept={handleConfirm}
 137 
        onAccept={handleConfirm}
152 
        onClose={handleCancel}
 138 
        onClose={handleCancel}
153 
        message='¿Estás seguro de que quieres salir sin publicar tu post?'
 139 
        message='¿Estás seguro de que quieres salir sin publicar tu post?'
154 
      />
 140 
      />
155 
    </>
 141 
    </>
156 
  )
 142 
  );
157 
}
 143 
};
Línea 158... Línea 144...
158 
 
 144