Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

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

Rev 7225 Rev 7226
Línea 1... Línea 1...
1 
import React, { useEffect, useRef, useState } from 'react'
 1 
import React, { useState } from 'react'
2 
import { axios } from '../../../utils'
 - 
 
3 
import { useForm } from 'react-hook-form'
 2 
import { useForm } from 'react-hook-form'
4 
import { connect, useSelector } from 'react-redux'
 3 
import { useSelector } from 'react-redux'
5 
 
 - 
 
- 
 
 4 
import { Avatar } from '@mui/material'
- 
 
 5 
import styled from 'styled-components'
6 
import { addNotification } from '../../redux/notification/notification.actions'
 6 
import SendIcon from '@mui/icons-material/Send'
Línea -... Línea 7...
- 
 
 7 
 
7 
 
 8 
import Options from '../UI/Option'
8 
import ConfirmModal from '../modals/ConfirmModal'
 - 
 
9 
import useOutsideClick from '../../hooks/useOutsideClick'
 9 
import ConfirmModal from '../modals/ConfirmModal'
10 
import FormErrorFeedback from '../UI/FormErrorFeedback'
 - 
 
Línea 11... Línea 10...
11 
import Options from '../UI/Option'
 10 
import FormErrorFeedback from '../UI/FormErrorFeedback'
12 
 
 11 
 
- 
 
 12 
const StyledCommentForm = styled.form`
- 
 
 13 
  display: flex;
- 
 
 14 
  justify-content: flex-start;
- 
 
 15 
  align-items: center;
- 
 
 16 
  img {
- 
 
 17 
    margin-right: 0.5rem;
- 
 
 18 
    width: 43px;
- 
 
 19 
    height: 43px;
- 
 
 20 
  }
- 
 
 21 
  input {
- 
 
 22 
    flex-grow: 1;
- 
 
 23 
    padding: 0.5rem;
- 
 
 24 
    background-color: var(--bg-color-secondary);
- 
 
 25 
    border: 1px solid var(--border-primary);
- 
 
 26 
    border-top-left-radius: var(--border-radius);
- 
 
 27 
    border-bottom-left-radius: var(--border-radius);
- 
 
 28 
  }
- 
 
 29 
  button {
- 
 
 30 
    border-top-right-radius: var(--border-radius);
- 
 
 31 
    border-bottom-right-radius: var(--border-radius);
- 
 
 32 
  }
- 
 
 33 
`
13 
const FeedComments = ({
 34 
 
14 
  isShow = true,
 - 
 
15 
  image = '/images/avatar.jpg',
 - 
 
16 
  addUrl = '',
 - 
 
17 
  currentComments = [],
 - 
 
18 
  addNotification,
 35 
export const CommentForm = ({
19 
  updateTotalComments = function () {},
 36 
  image = '/images/avatar.jpg',
20 
  onComplete = function () {},
 37 
  onSubmit = () => null,
21 
}) => {
 - 
 
22 
  const { register, handleSubmit, errors, reset } = useForm()
 - 
 
23 
  const [comments, setComments] = useState(currentComments)
 - 
 
24 
  const labels = useSelector(({ intl }) => intl.labels)
 - 
 
25 
 
 - 
 
26 
  const submitCommet = (data) => {
 - 
 
27 
    const currentFormData = new FormData()
 - 
 
28 
    Object.entries(data).forEach(([key, value]) =>
 - 
 
29 
      currentFormData.append(key, value)
 - 
 
30 
    )
 - 
 
31 
 
 - 
 
32 
    axios.post(addUrl, currentFormData).then(({ data: response }) => {
 - 
 
33 
      const { success, data, total_comments } = response
 - 
 
34 
 
 - 
 
35 
      if (!success) {
 - 
 
36 
        const errorMessage =
 - 
 
37 
          typeof data === 'string' ? data : 'Error interno. Intente más tarde.'
 - 
 
38 
        addNotification({ style: 'danger', msg: errorMessage })
 - 
 
39 
        return
 - 
 
40 
      }
 - 
 
41 
 
 - 
 
42 
      updateTotalComments(total_comments)
 - 
 
43 
      onComplete(data)
 - 
 
44 
 
 - 
 
45 
      data.item
 - 
 
46 
        ? setComments((prevMessages) => [...prevMessages, data.item])
 - 
 
47 
        : setComments((prevMessages) => [...prevMessages, data])
 - 
 
48 
 
 - 
 
49 
      reset()
 - 
 
Línea 50... Línea 38...
50 
    })
 38 
}) => {
51 
  }
 - 
 
52 
 
 - 
 
53 
  const deleteComment = (commentUnique, deleteCommentUrl) => {
 - 
 
54 
    axios
 - 
 
55 
      .post(deleteCommentUrl)
 - 
 
56 
      .then(({ data: response }) => {
 - 
 
57 
        const { success, data, total_comments } = response
 - 
 
58 
 
 - 
 
59 
        if (!success) {
 - 
 
60 
          return addNotification({ style: 'danger', msg: data })
 - 
 
61 
        }
 - 
 
62 
 
 - 
 
63 
        updateTotalComments(total_comments)
 - 
 
64 
        setComments((prevComments) =>
 - 
 
65 
          prevComments.filter((comment) => comment.unique !== commentUnique)
 - 
 
66 
        )
 - 
 
67 
        addNotification({ style: 'success', msg: data })
 - 
 
Línea 68... Línea 39...
68 
      })
 39 
  const { register, handleSubmit, errors, reset } = useForm()
69 
      .catch((error) => addNotification({ style: 'danger', msg: error }))
 40 
 
70 
  }
 41 
  const labels = useSelector(({ intl }) => intl.labels)
- 
 
 42 
 
Línea 71... Línea 43...
71 
 
 43 
  const submitHandler = handleSubmit(async (data) => {
72 
  useEffect(() => {
 - 
 
73 
    setComments(currentComments)
 44 
    await onSubmit(data)
74 
  }, [currentComments])
 - 
 
75 
 
 45 
    reset()
76 
  return (
 - 
 
77 
    <div className={`comments-container ${isShow ? 'show' : 'hidden'}`}>
 46 
  })
78 
      <form
 47 
 
79 
        className="feedCommentContainer"
 - 
 
80 
        onSubmit={handleSubmit(submitCommet)}
 48 
  return (
81 
      >
 49 
    <>
82 
        {image && <img src={image} alt="User profile image" />}
 50 
      <StyledCommentForm onSubmit={submitHandler}>
83 
        <input
 51 
        {image && <Avatar src={image} alt="Profile image" />}
84 
          className="commentInput"
 52 
        <input
85 
          type="text"
 53 
          type="text"
86 
          name="comment"
 54 
          name="comment"
87 
          maxLength="256"
 55 
          maxLength="256"
88 
          placeholder={labels.write_a_comment}
 56 
          placeholder={labels.write_a_comment}
89 
          ref={register({ required: 'El campo es requerido' })}
 57 
          ref={register({ required: 'El campo es requerido' })}
90 
        />
 58 
        />
91 
        <button className="shareIconContainer iconActive">
 59 
        <button className="btn btn-primary">
92 
          <img src="/images/icons/send.png" className="fa img-icon" />
 60 
          <SendIcon />
93 
        </button>
 - 
 
94 
      </form>
 61 
        </button>
95 
      {errors.comment && (
 62 
      </StyledCommentForm>
96 
        <FormErrorFeedback>{errors.comment.message}</FormErrorFeedback>
 63 
      {errors.comment && (
Línea 97... Línea 64...
97 
      )}
 64 
        <FormErrorFeedback>{errors.comment.message}</FormErrorFeedback>
98 
      <FeedComments.List comments={comments} onDelete={deleteComment} />
 65 
      )}
99 
    </div>
 66 
    </>
100 
  )
 67 
  )
101 
}
 68 
}
102 
 
 69 
 
Línea 114... Línea 81...
114 
      })}
 81 
      })}
115 
    </ul>
 82 
    </ul>
116 
  )
 83 
  )
117 
}
 84 
}
Línea 118... Línea 85...
118 
 
 85 
 
- 
 
 86 
const Comment = ({ onDelete, comment }) => {
- 
 
 87 
  const [showConfirmModal, setShowConfirmModal] = useState(false)
- 
 
 88 
  const labels = useSelector(({ intl }) => intl.labels)
119 
const CommentTemplate = ({ onDelete, comment }) => {
 89 
 
120 
  const {
 90 
  const {
121 
    unique,
 91 
    unique,
122 
    user_url,
 92 
    user_url,
123 
    user_name,
 93 
    user_name,
124 
    // user_image = '/images/avatar.jpg',
 94 
    // user_image = '/images/avatar.jpg',
125 
    time_elapsed,
 95 
    time_elapsed,
126 
    comment: content,
 96 
    comment: content,
127 
    link_delete,
 97 
    link_delete,
128 
  } = comment
 - 
 
129 
  const [showConfirmModal, setShowConfirmModal] = useState(false)
 - 
 
Línea 130... Línea 98...
130 
  const labels = useSelector(({ intl }) => intl.labels)
 98 
  } = comment
131 
 
 99 
 
132 
  const toggleModal = () => {
 100 
  const toggleModal = () => {
Línea 139... Línea 107...
139 
        <div className="comment-content">
 107 
        <div className="comment-content">
140 
          <div className="info">
 108 
          <div className="info">
141 
            <a href={user_url}>
 109 
            <a href={user_url}>
142 
              <h3>{user_name}</h3>
 110 
              <h3>{user_name}</h3>
143 
            </a>
 111 
            </a>
- 
 
 112 
            <span>{time_elapsed}</span>
144 
            <span>
 113 
            <span>
145 
              {time_elapsed}
 - 
 
146 
              {link_delete && (
 114 
              {link_delete && (
147 
                <Options
 115 
                <Options
148 
                  options={[
 116 
                  options={[
149 
                    {
 117 
                    {
150 
                      label: labels.delete,
 118 
                      label: labels.delete,
Línea 166... Línea 134...
166 
      />
 134 
      />
167 
    </li>
 135 
    </li>
168 
  )
 136 
  )
169 
}
 137 
}
Línea 170... Línea -...
170 
 
 - 
 
171 
FeedComments.List = CommentsList
 138 
 
172 
CommentsList.Item = CommentTemplate
 - 
 
173 
 
 - 
 
174 
const mapDispatchToProps = {
 - 
 
175 
  addNotification: (notification) => addNotification(notification),
 - 
 
176 
}
 - 
 
177 
 
 -