Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

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

Rev 5118 Rev 5577
Línea 6... Línea 6...
6 
import { connect } from 'react-redux'
 6 
import { connect } from 'react-redux'
7 
import { addNotification } from '../../../../redux/notification/notification.actions'
 7 
import { addNotification } from '../../../../redux/notification/notification.actions'
8 
import ConfirmModal from '../../../../shared/confirm-modal/ConfirmModal'
 8 
import ConfirmModal from '../../../../shared/confirm-modal/ConfirmModal'
9 
import FormErrorFeedback from '../../../../shared/form-error-feedback/FormErrorFeedback'
 9 
import FormErrorFeedback from '../../../../shared/form-error-feedback/FormErrorFeedback'
Línea 10... Línea 10...
10 
 
 10 
 
11 
const FeedCommentSection = ({
 11 
const FeedComments = ({
12 
  isShow = true,
 12 
  isShow = true,
13 
  image = '',
 13 
  image = '',
14 
  addUrl = '',
 14 
  addUrl = '',
15 
  updateTotalComments = function () { },
 15 
  updateTotalComments = function () {},
- 
 
 16 
  currentComments = [],
16 
  comments = []
 17 
  addNotification,
17 
}) => {
 18 
}) => {
18 
  const { register, handleSubmit, errors, reset } = useForm()
 19 
  const { register, handleSubmit, errors, reset } = useForm()
Línea 19... Línea 20...
19 
  const [commentsState, setCommentsState] = useState(comments)
 20 
  const [comments, setComments] = useState(currentComments)
20 
 
 21 
 
21 
  useEffect(() => {
 22 
  useEffect(() => {
Línea 22... Línea 23...
22 
    setCommentsState(comments)
 23 
    setComments(currentComments)
23 
  }, [comments])
 24 
  }, [currentComments])
24 
 
 25 
 
- 
 
 26 
  const submitCommet = (data) => {
- 
 
 27 
    const currentFormData = new FormData()
25 
  const submitCommentHandler = (data) => {
 28 
    Object.entries(data).forEach(([key, value]) =>
26 
    const currentFormData = new FormData()
 29 
      currentFormData.append(key, value)
27 
    Object.entries(data).forEach(([key, value]) => currentFormData.append(key, value))
 30 
    )
28 
 
 31 
 
29 
    axios.post(addUrl, currentFormData)
 - 
 
30 
      .then(({ data: response }) => {
 32 
    axios.post(addUrl, currentFormData).then(({ data: response }) => {
31 
        const { data: newComment, success, total_comments } = response
 - 
 
32 
 
 33 
      if (!response.success) {
Línea 33... Línea 34...
33 
        if (!success) {
 34 
        addNotification({ style: 'danger', msg: response.data })
34 
          return addNotification({ style: 'danger', msg: newComment })
 35 
        return
35 
        }
 36 
      }
36 
 
 37 
 
37 
        updateTotalComments(total_comments)
 38 
      updateTotalComments(response.total_comments)
Línea 38... Línea -...
38 
        setCommentsState([newComment, ...commentsState])
 - 
 
39 
        reset()
 - 
 
40 
      })
 - 
 
41 
  }
 - 
 
42 
 
 - 
 
43 
  return (
 - 
 
44 
        <div className={`comments-container ${isShow ? 'show' : 'hidden'}`}>
 - 
 
45 
            <form
 - 
 
46 
                className='feedCommentContainer'
 - 
 
47 
                onSubmit={handleSubmit(submitCommentHandler)}
 - 
 
48 
            >
 - 
 
49 
                {image && <img src={image} alt="User profile image" />}
 - 
 
50 
                <input
 - 
 
51 
                    className='commentInput'
 - 
 
52 
                    type="text"
 - 
 
53 
                    name="comment"
 - 
 
54 
                    maxLength="256"
 - 
 
55 
                    placeholder={LABELS.WRITE_A_COMMENT}
 - 
 
56 
                    ref={register({ required: 'El campo es requerido' })}
 - 
 
57 
                />
 - 
 
58 
                <button className='shareIconContainer iconActive' >
 - 
 
59 
                    <img src='/images/icons/send.png' className='fa img-icon' />
 - 
 
60 
                </button>
 39 
      setComments((prevMessages) => [response.data, ...prevMessages])
61 
            </form>
 - 
 
62 
            {errors.comment && <FormErrorFeedback>{errors.comment.message}</FormErrorFeedback>}
 - 
 
63 
            <FeedCommentSection.CommentsList
 40 
      reset()
64 
                comments={commentsState}
 - 
 
65 
                updateTotalComments={updateTotalComments}
 - 
 
66 
                setComments={setCommentsState}
 - 
 
67 
            />
 - 
 
68 
        </div>
 - 
 
69 
  )
 41 
    })
70 
}
 42 
  }
71 
 
 43 
 
Línea 72... Línea 44...
72 
const CommentsList = ({ comments, updateTotalComments, setComments }) => {
 44 
  const deleteComment = (commentUnique, deleteCommentUrl) => {
73 
  const deleteCommentHandler = (commentUnique, deleteCommentUrl) => {
 45 
    axios
74 
    axios.post(deleteCommentUrl)
 46 
      .post(deleteCommentUrl)
Línea 75... Línea 47...
75 
      .then(({ data: response }) => {
 47 
      .then(({ data: response }) => {
- 
 
 48 
        const { success, data, total_comments } = response
76 
        const { success, data, total_comments } = response
 49 
 
- 
 
 50 
        if (!success) {
77 
 
 51 
          return addNotification({ style: 'danger', msg: data })
78 
        if (!success) {
 52 
        }
- 
 
 53 
 
79 
          return addNotification({ style: 'danger', msg: data })
 54 
        updateTotalComments(total_comments)
- 
 
 55 
        setComments((prevComments) =>
80 
        }
 56 
          prevComments.filter((comment) => comment.unique !== commentUnique)
Línea 81... Línea 57...
81 
 
 57 
        )
- 
 
 58 
        addNotification({ style: 'success', msg: data })
- 
 
 59 
      })
82 
        updateTotalComments(total_comments)
 60 
      .catch((error) =>
- 
 
 61 
        addNotification({ style: 'danger', msg: error.message })
- 
 
 62 
      )
- 
 
 63 
  }
- 
 
 64 
 
83 
        setComments(prevComments => prevComments.filter((comment) => comment.unique !== commentUnique))
 65 
  return (
84 
        addNotification({ style: 'success', msg: data })
 66 
    <div className={`comments-container ${isShow ? 'show' : 'hidden'}`}>
85 
      })
 67 
      <form
- 
 
 68 
        className="feedCommentContainer"
86 
      .catch((error) => addNotification({ style: 'danger', msg: error.message }))
 69 
        onSubmit={handleSubmit(submitCommet)}
87 
  }
 70 
      >
- 
 
 71 
        {image && <img src={image} alt="User profile image" />}
88 
 
 72 
        <input
- 
 
 73 
          className="commentInput"
89 
  return (
 74 
          type="text"
90 
        <ul className='comment-list'>
 75 
          name="comment"
- 
 
 76 
          maxLength="256"
- 
 
 77 
          placeholder={LABELS.WRITE_A_COMMENT}
91 
            {comments.reverse().map((comment) => {
 78 
          ref={register({ required: 'El campo es requerido' })}
- 
 
 79 
        />
92 
              return (
 80 
        <button className="shareIconContainer iconActive">
93 
                    <FeedCommentSection.CommentTemplate
 81 
          <img src="/images/icons/send.png" className="fa img-icon" />
94 
                        commentData={comment}
 82 
        </button>
Línea 95... Línea 83...
95 
                        onDeleteHandler={deleteCommentHandler}
 83 
      </form>
96 
                        key={comment.unique}
 84 
      {errors.comment && (
97 
                    />
 85 
        <FormErrorFeedback>{errors.comment.message}</FormErrorFeedback>
- 
 
 86 
      )}
98 
              )
 87 
      <FeedComments.List comments={comments} onDelete={deleteComment} />
99 
            })}
 88 
    </div>
- 
 
 89 
  )
100 
        </ul>
 90 
}
- 
 
 91 
 
101 
  )
 92 
const CommentsList = ({ comments, onDelete }) => {
102 
}
 93 
  return (
103 
 
 94 
    <ul className="comment-list">
104 
const CommentTemplate = ({ onDeleteHandler, commentData }) => {
 95 
      {comments.map((comment) => {
- 
 
 96 
        return (
- 
 
 97 
          <CommentsList.Item
Línea -... Línea 98...
- 
 
 98 
            comment={comment}
105 
  const {
 99 
            onDelete={onDelete}
106 
    user_name,
 100 
            key={comment.unique}
107 
    user_url,
 101 
          />
Línea 108... Línea 102...
108 
    user_image,
 102 
        )
109 
    link_delete,
 - 
 
110 
    time_elapsed,
 - 
 
Línea 111... Línea 103...
111 
    comment,
 103 
      })}
112 
    unique
 104 
    </ul>
- 
 
 105 
  )
- 
 
 106 
}
113 
  } = commentData
 107 
 
- 
 
 108 
const CommentTemplate = ({ onDelete, comment }) => {
114 
 
 109 
  const [showConfirmModal, setShowConfirmModal] = useState(false)
115 
  const [showConfirmModal, setShowConfirmModal] = useState(false)
 110 
  const [displayOption, setDisplayOption] = useState(false)
116 
  const [displayOption, setDisplayOption] = useState(false)
 111 
  const deleteButton = useRef()
117 
  const deleteButton = useRef()
 112 
 
Línea 132... Línea 127...
132 
      document.removeEventListener('mousedown', handleClickOutside)
 127 
      document.removeEventListener('mousedown', handleClickOutside)
133 
    }
 128 
    }
134 
  }, [deleteButton])
 129 
  }, [deleteButton])
Línea 135... Línea 130...
135 
 
 130 
 
136 
  return (
 131 
  return (
137 
        <li>
 132 
    <li>
138 
            <div className="comment-container">
 133 
      <div className="comment-container">
139 
                {user_image &&
 134 
        {comment.user_image && (
140 
                    <img
 135 
          <img
141 
                        src={user_image}
 136 
            src={comment.user_image}
142 
                        alt="user-image"
 137 
            alt="user-image"
143 
                        className='user-image'
 138 
            className="user-image"
- 
 
 139 
          />
144 
                    />}
 140 
        )}
145 
                <div className='comment-content'>
 141 
        <div className="comment-content">
146 
                    <div className='info'>
 142 
          <div className="info">
147 
                        <a href={user_url}>
 143 
            <a href={comment.user_url}>
148 
                            <h3>{user_name}</h3>
 144 
              <h3>{comment.user_name}</h3>
149 
                        </a>
 145 
            </a>
150 
                        <span>
 146 
            <span>
151 
                            {time_elapsed}
 147 
              {comment.time_elapsed}
152 
                            {link_delete &&
 148 
              {comment.link_delete && (
153 
                                <>
 149 
                <>
154 
                                    <img
 150 
                  <img
155 
                                        src='/images/icons/options.png'
 151 
                    src="/images/icons/options.png"
156 
                                        className='cursor-pointer img-icon options-sm'
 152 
                    className="cursor-pointer img-icon options-sm"
157 
                                        onClick={() => setDisplayOption(!displayOption)}
 153 
                    onClick={() => setDisplayOption(!displayOption)}
- 
 
 154 
                  />
158 
                                    />
 155 
                  <div
159 
                                    <div className={`comments-options ${displayOption ? 'active' : ''}`}>
 156 
                    className={`comments-options ${
- 
 
 157 
                      displayOption ? 'active' : ''
- 
 
 158 
                    }`}
- 
 
 159 
                  >
160 
                                        <ul>
 160 
                    <ul>
161 
                                            <li>
 161 
                      <li>
162 
                                                <button
 162 
                        <button
163 
                                                    className="option-btn"
 163 
                          className="option-btn"
164 
                                                    onClick={handleShowConfirmModal}
 164 
                          onClick={toggleModal}
165 
                                                    ref={deleteButton}
 165 
                          ref={deleteButton}
166 
                                                >
 166 
                        >
167 
                                                    <i className="fa fa-trash-o mr-1" />
 167 
                          <i className="fa fa-trash-o mr-1" />
168 
                                                    {LABELS.DELETE}
 168 
                          {LABELS.DELETE}
169 
                                                </button>
 169 
                        </button>
170 
                                            </li>
 170 
                      </li>
171 
                                        </ul>
 171 
                    </ul>
172 
                                    </div>
 172 
                  </div>
173 
                                </>
 173 
                </>
174 
                            }
 174 
              )}
175 
                        </span>
 175 
            </span>
176 
                    </div>
 176 
          </div>
177 
                    <p>{comment}</p>
 177 
          <p>{comment}</p>
178 
                </div>
 178 
        </div>
179 
            </div>
 179 
      </div>
180 
            <ConfirmModal
 180 
      <ConfirmModal
181 
                show={showConfirmModal}
 181 
        show={showConfirmModal}
182 
                onClose={() => setShowConfirmModal(false)}
 182 
        onClose={toggleModal}
183 
                onAccept={handleModalAccept}
 183 
        onAccept={() => onDelete(comment.unique, comment.link_delete)}
184 
                acceptLabel={LABELS.ACCEPT}
 184 
        acceptLabel={LABELS.ACCEPT}
185 
            />
 185 
      />
186 
        </li>
 186 
    </li>
187 
  )
 187 
  )
Línea 188... Línea 188...
188 
}
 188 
}
189 
 
 189 
 
Línea 190... Línea 190...
190 
FeedCommentSection.CommentsList = CommentsList
 190 
FeedComments.List = CommentsList
191 
FeedCommentSection.CommentTemplate = CommentTemplate
 191 
CommentsList.Item = CommentTemplate
192 
 
 192 
 
Línea 193... Línea 193...
193 
const mapDispatchToProps = {
 193 
const mapDispatchToProps = {