Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

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

Rev 4892 Rev 5115
Línea -... Línea 1...
- 
 
 1 
/* eslint-disable camelcase */
1 
/* eslint-disable react/prop-types */
 2 
/* eslint-disable react/prop-types */
2 
import React, { useEffect, useRef, useState } from 'react'
 3 
import React, { useEffect, useRef, useState } from 'react'
3 
import { axios } from '../../../../utils'
 4 
import { axios } from '../../../../utils'
4 
import { useForm } from 'react-hook-form'
 5 
import { useForm } from 'react-hook-form'
5 
import { connect } from 'react-redux'
 6 
import { connect } from 'react-redux'
6 
import { addNotification } from '../../../../redux/notification/notification.actions'
 7 
import { addNotification } from '../../../../redux/notification/notification.actions'
7 
import ConfirmModal from '../../../../shared/confirm-modal/ConfirmModal'
 8 
import ConfirmModal from '../../../../shared/confirm-modal/ConfirmModal'
8 
import FormErrorFeedback from '../../../../shared/form-error-feedback/FormErrorFeedback'
 9 
import FormErrorFeedback from '../../../../shared/form-error-feedback/FormErrorFeedback'
Línea 9... Línea 10...
9 
 
 10 
 
10 
const FeedCommentSection = ({
 11 
const FeedCommentSection = ({
11 
    isShow = true,
 12 
  isShow = true,
12 
    image = '',
 13 
  image = '',
13 
    addUrl = '',
 14 
  addUrl = '',
14 
    updateTotalComments = function () { },
 15 
  updateTotalComments = function () { },
15 
    comments = [],
 16 
  comments = []
- 
 
 17 
}) => {
- 
 
 18 
  const { register, handleSubmit, errors, reset } = useForm()
Línea -... Línea 19...
- 
 
 19 
  const [commentsState, setCommentsState] = useState(comments)
- 
 
 20 
 
- 
 
 21 
  useEffect(() => {
- 
 
 22 
    setCommentsState(comments)
- 
 
 23 
  }, [comments])
16 
}) => {
 24 
 
- 
 
 25 
  const submitCommentHandler = (data) => {
- 
 
 26 
    const currentFormData = new FormData()
- 
 
 27 
    Object.entries(data).forEach(([key, value]) => currentFormData.append(key, value))
- 
 
 28 
 
17 
 
 29 
    axios.post(addUrl, currentFormData)
Línea 18... Línea -...
18 
    const { register, handleSubmit, errors, reset } = useForm()
 - 
 
19 
    const [commentsState, setCommentsState] = useState(comments);
 - 
 
20 
 
 - 
 
21 
    useEffect(() => {
 - 
 
22 
      setCommentsState(comments)
 - 
 
23 
    }, [comments])
 - 
 
24
- 
 
25 
 
 - 
 
26 
    const submitCommentHandler = (data) => {
 - 
 
27 
 
 - 
 
28 
        const currentFormData = new FormData();
 - 
 
29 
        Object.entries(data).forEach(([key, value]) => currentFormData.append(key, value))
 - 
 
30 
 
 - 
 
31 
        axios.post(addUrl, currentFormData)
 - 
 
32 
            .then(({ data: response }) => {
 30 
      .then(({ data: response }) => {
33 
                const { data: newComment, success, total_comments } = response;
 31 
        const { data: newComment, success, total_comments } = response
34 
 
 32 
 
35 
                if (!success) {
 33 
        if (!success) {
36 
                    return addNotification({ style: "danger", msg: newComment })
 34 
          return addNotification({ style: 'danger', msg: newComment })
37 
                }
 35 
        }
38 
 
 36 
 
39 
                updateTotalComments(total_comments)
 37 
        updateTotalComments(total_comments)
40 
                setCommentsState([newComment, ...commentsState]);
 38 
        setCommentsState([newComment, ...commentsState])
Línea 41... Línea 39...
41 
                reset();
 39 
        reset()
42 
            })
 40 
      })
43 
    };
 41 
  }
44 
 
 42 
 
45 
    return (
 43 
  return (
46 
        <div className={`comments-container ${isShow ? 'show' : 'hidden'}`}>
 44 
        <div className={`comments-container ${isShow ? 'show' : 'hidden'}`}>
Línea 52... Línea 50...
52 
                <input
 50 
                <input
53 
                    className='commentInput'
 51 
                    className='commentInput'
54 
                    type="text"
 52 
                    type="text"
55 
                    name="comment"
 53 
                    name="comment"
56 
                    maxLength="256"
 54 
                    maxLength="256"
57 
                    placeholder="Escribe un comentario"
 55 
                    placeholder={LABELS.WRITE_A_COMMENT}
58 
                    ref={register({ required: "El campo es requerido" })}
 56 
                    ref={register({ required: 'El campo es requerido' })}
59 
                />
 57 
                />
60 
                <button className='shareIconContainer iconActive' >
 58 
                <button className='shareIconContainer iconActive' >
61 
                    <img src='/images/icons/send.png' className='fa img-icon' />
 59 
                    <img src='/images/icons/send.png' className='fa img-icon' />
62 
                </button>
 60 
                </button>
63 
            </form>
 61 
            </form>
Línea 66... Línea 64...
66 
                comments={commentsState}
 64 
                comments={commentsState}
67 
                updateTotalComments={updateTotalComments}
 65 
                updateTotalComments={updateTotalComments}
68 
                setComments={setCommentsState}
 66 
                setComments={setCommentsState}
69 
            />
 67 
            />
70 
        </div>
 68 
        </div>
71 
    )
 69 
  )
72 
}
 70 
}
Línea 73... Línea 71...
73 
 
 71 
 
- 
 
 72 
const CommentsList = ({ comments, updateTotalComments, setComments }) => {
- 
 
 73 
  const deleteCommentHandler = (commentUnique, deleteCommentUrl) => {
- 
 
 74 
    axios.post(deleteCommentUrl)
- 
 
 75 
      .then(({ data: response }) => {
Línea 74... Línea -...
74 
const CommentsList = ({ comments, updateTotalComments, setComments }) => {
 - 
 
75 
 
 - 
 
76 
    const deleteCommentHandler = (commentUnique, deleteCommentUrl) => {
 - 
 
77 
        axios.post(deleteCommentUrl)
 - 
 
78 
            .then(({ data: response }) => {
 - 
 
79 
                const { success, data, total_comments } = response
 76 
        const { success, data, total_comments } = response
80 
 
 77 
 
81 
                if (!success) {
 - 
 
82 
                    return addNotification({ style: "danger", msg: data })
 - 
 
83 
                }
 - 
 
84 
 
 - 
 
85 
                updateTotalComments(total_comments)
 - 
 
86 
                setComments(prevComments => prevComments.filter((comment) => comment.unique !== commentUnique))
 78 
        if (!success) {
87 
                addNotification({ style: "success", msg: data });
 - 
 
88 
            })
 - 
 
Línea -... Línea 79...
- 
 
 79 
          return addNotification({ style: 'danger', msg: data })
- 
 
 80 
        }
- 
 
 81 
 
- 
 
 82 
        updateTotalComments(total_comments)
- 
 
 83 
        setComments(prevComments => prevComments.filter((comment) => comment.unique !== commentUnique))
- 
 
 84 
        addNotification({ style: 'success', msg: data })
- 
 
 85 
      })
89 
            .catch((error) => addNotification({ style: "danger", msg: error.message }))
 86 
      .catch((error) => addNotification({ style: 'danger', msg: error.message }))
90 
    };
 87 
  }
91 
 
 88 
 
92 
    return (
 89 
  return (
93 
        <ul className='comment-list'>
 90 
        <ul className='comment-list'>
94 
            {comments.reverse().map((comment) => {
 91 
            {comments.reverse().map((comment) => {
95 
                return (
 92 
              return (
96 
                    <FeedCommentSection.CommentTemplate
 93 
                    <FeedCommentSection.CommentTemplate
97 
                        commentData={comment}
 94 
                        commentData={comment}
98 
                        onDeleteHandler={deleteCommentHandler}
 95 
                        onDeleteHandler={deleteCommentHandler}
99 
                        key={comment.unique}
 96 
                        key={comment.unique}
100 
                    />
 97 
                    />
101 
                );
 98 
              )
102 
            })}
 99 
            })}
Línea 103... Línea 100...
103 
        </ul>
 100 
        </ul>
- 
 
 101 
  )
- 
 
 102 
}
- 
 
 103 
 
- 
 
 104 
const CommentTemplate = ({ onDeleteHandler, commentData }) => {
- 
 
 105 
  const {
- 
 
 106 
    user_name,
- 
 
 107 
    user_url,
- 
 
 108 
    user_image,
- 
 
 109 
    link_delete,
- 
 
 110 
    time_elapsed,
- 
 
 111 
    comment,
- 
 
 112 
    unique
- 
 
 113 
  } = commentData
- 
 
 114 
 
- 
 
 115 
  const [showConfirmModal, setShowConfirmModal] = useState(false)
- 
 
 116 
  const [displayOption, setDisplayOption] = useState(false)
- 
 
 117 
  const deleteButton = useRef()
- 
 
 118 
 
- 
 
 119 
  const handleShowConfirmModal = () => setShowConfirmModal(!showConfirmModal)
- 
 
 120 
 
- 
 
 121 
  const handleModalAccept = () => onDeleteHandler(unique, link_delete)
- 
 
 122 
 
- 
 
 123 
  useEffect(() => {
- 
 
 124 
    const handleClickOutside = (event) => {
- 
 
 125 
      if (deleteButton.current && !deleteButton.current.contains(event.target)) {
- 
 
 126 
        setDisplayOption(false)
- 
 
 127 
      }
- 
 
 128 
    }
- 
 
 129 
    document.addEventListener('mousedown', handleClickOutside)
- 
 
 130 
 
Línea 104... Línea -...
104 
    )
 - 
 
105 
}
 - 
 
106 
 
 - 
 
107 
const CommentTemplate = ({ onDeleteHandler, commentData }) => {
 - 
 
108 
 
 - 
 
109 
    const {
 - 
 
110 
        user_name,
 - 
 
111 
        user_url,
 - 
 
112 
        user_image,
 - 
 
113 
        link_delete,
 - 
 
114 
        time_elapsed,
 - 
 
115 
        comment,
 - 
 
116 
        unique,
 - 
 
117 
    } = commentData;
 - 
 
118 
 
 - 
 
119 
    const [showConfirmModal, setShowConfirmModal] = useState(false);
 - 
 
120 
    const [displayOption, setDisplayOption] = useState(false)
 - 
 
121 
    const deleteButton = useRef();
 - 
 
122 
 
 - 
 
123 
    const handleShowConfirmModal = () => setShowConfirmModal(!showConfirmModal)
 - 
 
124 
 
 - 
 
125 
    const handleModalAccept = () => onDeleteHandler(unique, link_delete)
 - 
 
126 
 
 - 
 
127 
    useEffect(() => {
 - 
 
128 
        const handleClickOutside = (event) => {
 - 
 
129 
            if (deleteButton.current && !deleteButton.current.contains(event.target)) {
 - 
 
130 
                setDisplayOption(false)
 - 
 
131 
            }
 - 
 
132 
        }
 - 
 
133 
        document.addEventListener("mousedown", handleClickOutside);
 - 
 
134 
 
 - 
 
135 
        return () => {
 131 
    return () => {
136 
            document.removeEventListener("mousedown", handleClickOutside);
 132 
      document.removeEventListener('mousedown', handleClickOutside)
137 
        };
 133 
    }
138 
    }, [deleteButton]);
 134 
  }, [deleteButton])
139 
 
 135 
 
140 
    return (
 136 
  return (
Línea 167... Línea 163...
167 
                                                    className="option-btn"
 163 
                                                    className="option-btn"
168 
                                                    onClick={handleShowConfirmModal}
 164 
                                                    onClick={handleShowConfirmModal}
169 
                                                    ref={deleteButton}
 165 
                                                    ref={deleteButton}
170 
                                                >
 166 
                                                >
171 
                                                    <i className="fa fa-trash-o mr-1" />
 167 
                                                    <i className="fa fa-trash-o mr-1" />
172 
                                                    Borrar
 168 
                                                    {LABELS.DELETE}
173 
                                                </button>
 169 
                                                </button>
174 
                                            </li>
 170 
                                            </li>
175 
                                        </ul>
 171 
                                        </ul>
176 
                                    </div>
 172 
                                    </div>
177 
                                </>
 173 
                                </>
Línea 185... Línea 181...
185 
                show={showConfirmModal}
 181 
                show={showConfirmModal}
186 
                onClose={() => setShowConfirmModal(false)}
 182 
                onClose={() => setShowConfirmModal(false)}
187 
                onAccept={handleModalAccept}
 183 
                onAccept={handleModalAccept}
188 
                acceptLabel="Aceptar"
 184 
                acceptLabel="Aceptar"
189 
            />
 185 
            />
190 
        </li >
 186 
        </li>
191 
    );
 187 
  )
192 
};
 188 
}
193 
 
 - 
 
Línea 194... Línea 189...
194 
 
 189 
 
195 
FeedCommentSection.CommentsList = CommentsList
 190 
FeedCommentSection.CommentsList = CommentsList
Línea 196... Línea 191...
196 
FeedCommentSection.CommentTemplate = CommentTemplate
 191 
FeedCommentSection.CommentTemplate = CommentTemplate
197 
 
 192 
 
198 
const mapDispatchToProps = {
 193 
const mapDispatchToProps = {
Línea 199... Línea -...
199 
    addNotification: (notification) => addNotification(notification),
 - 
 
200 
};
 194 
  addNotification: (notification) => addNotification(notification)
- 
 
 195 
}