Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

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

Rev 7221 Rev 7226
Línea 1... Línea 1...
1 
import React from 'react'
 1 
import React, { useEffect, useState } from 'react'
2 
import { Avatar } from '@mui/material'
 2 
import { axios } from '../../utils'
3 
import { Link } from 'react-router-dom'
 3 
import { Link } from 'react-router-dom'
- 
 
 4 
import { Avatar } from '@mui/material'
- 
 
 5 
import { addNotification } from '../../redux/notification/notification.actions'
- 
 
 6 
import { useDispatch, useSelector } from 'react-redux'
4 
import parse from 'html-react-parser'
 7 
import parse from 'html-react-parser'
5 
import { useSelector } from 'react-redux'
 - 
 
6 
import styled from 'styled-components'
 8 
import styled from 'styled-components'
7 
import EditIcon from '@mui/icons-material/Edit'
 9 
import EditIcon from '@mui/icons-material/Edit'
8 
import DeleteIcon from '@mui/icons-material/Delete'
 10 
import DeleteIcon from '@mui/icons-material/Delete'
Línea 9... Línea 11...
9 
 
 11 
 
Línea 12... Línea 14...
12 
  QuestionDetails,
 14 
  QuestionDetails,
13 
  QuestionStats,
 15 
  QuestionStats,
14 
  QuestionUserInfo,
 16 
  QuestionUserInfo,
15 
  StyledQuestionCard,
 17 
  StyledQuestionCard,
16 
} from './QuestionCard'
 18 
} from './QuestionCard'
17 
import CommentSection from '../feed/CommentSection'
 19 
import { CommentForm, CommentsList } from '../feed/CommentSection'
18 
import ReactionsButton from '../UI/buttons/ReactionsButton'
 20 
import ReactionsButton from '../UI/buttons/ReactionsButton'
Línea 19... Línea 21...
19 
 
 21 
 
20 
const AnswerActions = styled(QuestionActions)`
 22 
const AnswerActions = styled(QuestionActions)`
21 
  margin-bottom: 0.5rem;
 23 
  margin-bottom: 0.5rem;
Línea 31... Línea 33...
31 
  user_name = '',
 33 
  user_name = '',
32 
  text = '',
 34 
  text = '',
33 
  reaction = '',
 35 
  reaction = '',
34 
  total_comments = 0,
 36 
  total_comments = 0,
35 
  total_reactions = 0,
 37 
  total_reactions = 0,
36 
  comments = [],
 38 
  comments: defaultComments = [],
37 
  link_edit = '',
 39 
  link_edit = '',
38 
  link_delete = '',
 40 
  link_delete = '',
39 
  link_reaction_delete = '',
 41 
  link_reaction_delete = '',
40 
  link_save_reaction = '',
 42 
  link_save_reaction = '',
41 
  link_add_comment = '',
 43 
  link_add_comment = '',
42 
  onEdit = () => {},
 44 
  onEdit = () => {},
43 
  onDelete = () => {},
 45 
  onDelete = () => {},
- 
 
 46 
  updateComments = () => {},
44 
}) => {
 47 
}) => {
- 
 
 48 
  const [comments, setComments] = useState([])
- 
 
 49 
  const [totalComments, setTotalComments] = useState(0)
45 
  const labels = useSelector(({ intl }) => intl.labels)
 50 
  const labels = useSelector(({ intl }) => intl.labels)
- 
 
 51 
  const dispatch = useDispatch()
- 
 
 52 
 
- 
 
 53 
  const addComment = ({ comment }) => {
- 
 
 54 
    const formData = new FormData()
- 
 
 55 
    formData.append('comment', comment)
- 
 
 56 
 
- 
 
 57 
    axios
- 
 
 58 
      .post(link_add_comment, formData)
- 
 
 59 
      .then((response) => {
- 
 
 60 
        const {
- 
 
 61 
          success,
- 
 
 62 
          data,
- 
 
 63 
          total_comments_answer,
- 
 
 64 
          total_comments_question,
- 
 
 65 
        } = response.data
- 
 
 66 
 
- 
 
 67 
        if (!success) {
- 
 
 68 
          const errorMessage =
- 
 
 69 
            typeof data === 'string'
- 
 
 70 
              ? data
- 
 
 71 
              : 'Error interno. Intente más tarde.'
- 
 
 72 
          dispatch(addNotification({ style: 'danger', msg: errorMessage }))
- 
 
 73 
          return
- 
 
 74 
        }
- 
 
 75 
 
- 
 
 76 
        setComments([...comments, data.item])
- 
 
 77 
        updateComments(total_comments_question)
- 
 
 78 
        setTotalComments(total_comments_answer)
- 
 
 79 
      })
- 
 
 80 
      .catch((error) => {
- 
 
 81 
        dispatch(
- 
 
 82 
          addNotification({
- 
 
 83 
            style: 'danger',
- 
 
 84 
            msg: 'Error interno. Intente más tarde.',
- 
 
 85 
          })
- 
 
 86 
        )
- 
 
 87 
        throw new Error(error)
- 
 
 88 
      })
- 
 
 89 
  }
- 
 
 90 
 
- 
 
 91 
  const deleteComment = (commentUnique, deleteCommentUrl) => {
- 
 
 92 
    axios
- 
 
 93 
      .post(deleteCommentUrl)
- 
 
 94 
      .then((response) => {
- 
 
 95 
        const {
- 
 
 96 
          success,
- 
 
 97 
          data,
- 
 
 98 
          total_comments_answer,
- 
 
 99 
          total_comments_question,
- 
 
 100 
        } = response.data
- 
 
 101 
 
- 
 
 102 
        if (!success) {
- 
 
 103 
          const errorMessage =
- 
 
 104 
            typeof data === 'string'
- 
 
 105 
              ? data
- 
 
 106 
              : 'Error interno. Intente más tarde.'
- 
 
 107 
 
- 
 
 108 
          dispatch(addNotification({ style: 'danger', msg: errorMessage }))
- 
 
 109 
          return
- 
 
 110 
        }
- 
 
 111 
 
- 
 
 112 
        const newComments = comments.filter(
- 
 
 113 
          ({ unique }) => unique !== commentUnique
- 
 
 114 
        )
- 
 
 115 
 
- 
 
 116 
        dispatch(addNotification({ style: 'success', msg: data.message }))
- 
 
 117 
 
- 
 
 118 
        setComments(newComments)
- 
 
 119 
        updateComments(total_comments_question)
- 
 
 120 
        setTotalComments(total_comments_answer)
- 
 
 121 
      })
- 
 
 122 
      .catch((error) => {
- 
 
 123 
        dispatch(
- 
 
 124 
          addNotification({
- 
 
 125 
            style: 'danger',
- 
 
 126 
            msg: 'Error interno. Intente más tarde.',
- 
 
 127 
          })
- 
 
 128 
        )
- 
 
 129 
        throw new Error(error)
- 
 
 130 
      })
- 
 
 131 
  }
- 
 
 132 
 
- 
 
 133 
  useEffect(() => {
- 
 
 134 
    setComments(defaultComments)
- 
 
 135 
  }, [defaultComments])
- 
 
 136 
 
- 
 
 137 
  useEffect(() => {
- 
 
 138 
    setTotalComments(total_comments)
- 
 
 139 
  }, [total_comments])
Línea 46... Línea 140...
46 
 
 140 
 
47 
  return (
 141 
  return (
48 
    <>
 142 
    <>
49 
      <StyledQuestionCard>
 143 
      <StyledQuestionCard>
Línea 60... Línea 154...
60 
          </QuestionUserInfo>
 154 
          </QuestionUserInfo>
Línea 61... Línea 155...
61 
 
 155 
 
62 
          <QuestionStats className="mb-2">
 156 
          <QuestionStats className="mb-2">
63 
            <span>{`${labels.published} ${time_elapsed}`}</span>
 157 
            <span>{`${labels.published} ${time_elapsed}`}</span>
64 
            <span>{`${total_reactions} ${labels.reactions}`}</span>
 158 
            <span>{`${total_reactions} ${labels.reactions}`}</span>
65 
            <span>{`${total_comments} ${labels.comments}`}</span>
 159 
            <span>{`${totalComments} ${labels.comments}`}</span>
66 
          </QuestionStats>
 160 
          </QuestionStats>
67 
        </QuestionDetails>
 161 
        </QuestionDetails>
Línea 68... Línea 162...
68 
        {text && parse(text)}
 162 
        {text && parse(text)}
Línea 94... Línea 188...
94 
              deleteUrl={link_reaction_delete}
 188 
              deleteUrl={link_reaction_delete}
95 
              withLabel
 189 
              withLabel
96 
            />
 190 
            />
97 
          )}
 191 
          )}
98 
        </AnswerActions>
 192 
        </AnswerActions>
99 
        <CommentSection
 - 
 
100 
          addUrl={link_add_comment}
 193 
        <CommentForm onSubmit={addComment} />
101 
          currentComments={comments}
 194 
        <CommentsList comments={comments} onDelete={deleteComment} />
102 
          isShow
 - 
 
103 
        />
 - 
 
104 
      </StyledQuestionCard>
 195 
      </StyledQuestionCard>
105 
    </>
 196 
    </>
106 
  )
 197 
  )
107 
}
 198 
}