Proyectos de Subversion LeadersLinked - SPA

Rev

Rev 3741 | Mostrar el archivo completo | | | Autoría | Ultima modificación | Ver Log |

Rev 3741 Rev 3746
Línea 1... Línea 1...
1 
import React, { useState } from 'react';
 1 
import React, { useState } from 'react';
2 
import { useDispatch, useSelector } from 'react-redux';
 2 
import { useSelector } from 'react-redux';
3 
import { Box, Typography } from '@mui/material';
 3 
import { Box, Typography } from '@mui/material';
4 
import ChatOutlined from '@mui/icons-material/ChatOutlined';
 4 
import { ChatOutlined } from '@mui/icons-material';
Línea 5... Línea 5...
5 
 
 5 
 
6 
import { axios } from '@utils';
 6 
import { useAnswerComments } from '@my-coach/hooks';
7 
// import { withReactions } from '@hocs';
 - 
 
8 
import { addNotification } from '@store/notification/notification.actions';
 7 
import { parse } from '@shared/utils';
- 
 
 8 
 
- 
 
 9 
import {
9 
 
 10 
  Card,
10 
import Widget from '@components/UI/Widget';
 11 
  CardActions,
- 
 
 12 
  CardContent,
11 
import Button from '@components/UI/buttons/Buttons';
 13 
  CardHeader,
- 
 
 14 
  CommentForm,
- 
 
 15 
  Menu,
12 
import CommentForm from '@components/dashboard/linkedin/comments/comment-form';
 16 
  Button,
13 
import CommentsList from '@components/dashboard/linkedin/comments/comment-list';
 17 
  CommentList
14 
import FeedDescription from '@components/dashboard/feed/feed-description';
 18 
} from '@shared/components';
Línea 15... Línea 19...
15 
import Options from '@components/UI/Option';
 19 
import { useAlertModal } from '@shared/hooks';
16 
 
 20 
 
17 
export function AnswerCard({
 21 
export function AnswerCard({
18 
  time_elapsed = '',
 22 
  answer: {
19 
  user_image = '',
 23 
    uuid = '',
20 
  // user_url = '',
 24 
    time_elapsed = '',
21 
  user_name = '',
 25 
    user_image = '',
22 
  text = '',
 26 
    user_name = '',
23 
  // reaction = '',
 27 
    text = '',
24 
  total_comments = 0,
 - 
 
25 
  total_reactions = 0,
 - 
 
26 
  comments: defaultComments = [],
 28 
    total_comments = 0,
27 
  link_edit = '',
 - 
 
28 
  link_delete = '',
 - 
 
29 
  // link_reaction_delete = '',
 29 
    total_reactions = 0,
- 
 
 30 
    comments = [],
30 
  // link_save_reaction = '',
 31 
    link_add_comment = ''
31 
  link_add_comment = '',
 32 
  },
32 
  onEdit = () => {},
 33 
  onEdit,
33 
  onDelete = () => {},
 - 
 
34 
  updateComments = () => {}
 34 
  onDelete,
35 
  // updateReactions = () => {}
 - 
 
36 
}) {
 - 
 
37 
  const [comments, setComments] = useState(defaultComments);
 - 
 
38 
  const [totalComments, setTotalComments] = useState(total_comments);
 35 
  onUpdateComments
39 
  const [totalReactions] = useState(total_reactions);
 36 
}) {
40 
  const [showComments, setShowComments] = useState(false);
 - 
 
Línea -... Línea 37...
- 
 
 37 
  const [showComments, setShowComments] = useState(false);
- 
 
 38 
  const labels = useSelector(({ intl }) => intl.labels);
- 
 
 39 
 
- 
 
 40 
  const { showAlert, closeAlert } = useAlertModal();
- 
 
 41 
 
- 
 
 42 
  const {
- 
 
 43 
    comments: answerComments,
- 
 
 44 
    addComment,
- 
 
 45 
    deleteComment
- 
 
 46 
  } = useAnswerComments(comments, {
- 
 
 47 
    onAddComment: (data) => {
- 
 
 48 
      onUpdateComments(uuid, data);
- 
 
 49 
    },
- 
 
 50 
    onDeleteComment: (data) => {
- 
 
 51 
      onUpdateComments(uuid, data);
- 
 
 52 
      closeAlert();
- 
 
 53 
    }
- 
 
 54 
  });
- 
 
 55 
 
- 
 
 56 
  const handleAddComment = (comment) => {
- 
 
 57 
    addComment(link_add_comment, comment);
- 
 
 58 
  };
- 
 
 59 
 
- 
 
 60 
  const handleDeleteComment = (url) => {
- 
 
 61 
    showAlert({
- 
 
 62 
      title: 'Eliminar comentario',
- 
 
 63 
      message: '¿Estás seguro de querer eliminar este comentario?',
- 
 
 64 
      onConfirm: () => deleteComment(url)
41 
  const labels = useSelector(({ intl }) => intl.labels);
 65 
    });
42 
  const dispatch = useDispatch();
 66 
  };
43 
 
 67 
 
Línea 44... Línea 68...
44 
  const addComment = (comment) => {
 68 
  /* const addComment = (comment) => {
45 
    const formData = new FormData();
 69 
    const formData = new FormData();
Línea 89... Línea 113...
89 
        setTotalComments(data.total_comments_answer);
 113 
        setTotalComments(data.total_comments_answer);
90 
      })
 114 
      })
91 
      .catch((err) => {
 115 
      .catch((err) => {
92 
        dispatch(addNotification({ style: 'danger', msg: err.message }));
 116 
        dispatch(addNotification({ style: 'danger', msg: err.message }));
93 
      });
 117 
      });
94 
  };
 118 
  }; */
Línea 95... Línea 119...
95 
 
 119 
 
Línea 96... Línea 120...
96 
  // const ReactionsButton = withReactions(Button);
 120 
  // const ReactionsButton = withReactions(Button);
97 
 
 121 
 
98 
  return (
 - 
 
99 
    <>
 122 
  return (
100 
      <Widget>
 123 
    <Card>
101 
        <Widget.Header
 124 
      <CardHeader
102 
          avatar={user_image}
 125 
        avatar={user_image}
103 
          title={user_name}
 126 
        title={user_name}
104 
          subheader={time_elapsed}
 127 
        subheader={time_elapsed}
105 
          renderAction={() => (
 - 
 
106 
            <Options>
 128 
        renderAction={() => (
107 
              {link_delete && (
 - 
 
108 
                <Options.Item onClick={() => onDelete(link_delete)}>Borrar</Options.Item>
 - 
 
109 
              )}
 129 
          <Menu>
110 
              {link_edit && (
 - 
 
111 
                <Options.Item onClick={() => onEdit(link_edit, text)}>{labels.edit}</Options.Item>
 130 
            {onDelete && <Menu.Item onClick={onDelete}>Borrar</Menu.Item>}
112 
              )}
 131 
            {onEdit && <Menu.Item onClick={onEdit}>{labels.edit}</Menu.Item>}
113 
            </Options>
 132 
          </Menu>
114 
          )}
 133 
        )}
115 
        />
 134 
      />
116 
 
 135 
 
117 
        <Widget.Body>
 136 
      <CardContent>
118 
          <FeedDescription description={text} />
 137 
        <Typography variant='body1'>{parse(text)}</Typography>
119 
 
 138 
 
120 
          <Box sx={{ display: 'flex', justifyContent: 'space-between' }}>
 139 
        <Box sx={{ display: 'flex', justifyContent: 'space-between' }}>
121 
            <Typography variant='overline'>{`${totalReactions} ${labels.reactions}`}</Typography>
 140 
          <Typography variant='overline'>{`${total_reactions} ${labels.reactions}`}</Typography>
122 
            <Typography variant='overline'>{`${totalComments} ${labels.comments}`}</Typography>
 141 
          <Typography variant='overline'>{`${total_comments} ${labels.comments}`}</Typography>
Línea 123... Línea 142...
123 
          </Box>
 142 
        </Box>
124 
        </Widget.Body>
 143 
      </CardContent>
125 
 
 144 
 
126 
        <Widget.Actions>
 145 
      <CardActions>
127 
          {/* {link_save_reaction && (
 146 
        {/* {link_save_reaction && (
128 
            <ReactionsButton
 147 
            <ReactionsButton
129 
              currentReactionType={reaction}
 148 
              currentReactionType={reaction}
Línea 136... Línea 155...
136 
                setTotalReactions(total_reactions_answer)
 155 
                setTotalReactions(total_reactions_answer)
137 
                updateReactions(total_reactions_question)
 156 
                updateReactions(total_reactions_question)
138 
              }}
 157 
              }}
139 
            />
 158 
            />
140 
          )} */}
 159 
          )} */}
141 
          {link_add_comment && (
 160 
        {link_add_comment && (
142 
            <Button onClick={() => setShowComments(!showComments)}>
 161 
          <Button onClick={() => setShowComments(!showComments)}>
143 
              <ChatOutlined />
 162 
            <ChatOutlined />
144 
              {labels.comment}
 163 
            {labels.comment}
145 
            </Button>
 164 
          </Button>
146 
          )}
 165 
        )}
147 
        </Widget.Actions>
 166 
      </CardActions>
148 
 
 167 
 
- 
 
 168 
      <Box
- 
 
 169 
        sx={{
- 
 
 170 
          padding: 1,
149 
        <Box sx={{ padding: 0.5, display: showComments ? 'block' : 'none' }}>
 171 
          display: showComments ? 'flex' : 'none',
- 
 
 172 
          flexDirection: 'column',
- 
 
 173 
          gap: 1,
- 
 
 174 
          width: '100%'
- 
 
 175 
        }}
- 
 
 176 
      >
150 
          <CommentForm onSubmit={addComment} />
 177 
        <CommentForm onSubmit={handleAddComment} />
151 
          <CommentsList comments={comments} onDelete={deleteComment} />
 178 
        <CommentList comments={answerComments} onDelete={handleDeleteComment} />
152 
        </Box>
 179 
      </Box>
153 
      </Widget>
 - 
 
154 
    </>
 180 
    </Card>
155 
  );
 181 
  );
156 
}
 182 
}