Proyectos de Subversion LeadersLinked - SPA

Rev

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

Rev 3745 Rev 3746
Línea 1... Línea 1...
1 
import React, { useEffect, useRef, useState } from 'react';
 1 
import React from 'react';
2 
import { useNavigate, useLocation } from 'react-router-dom';
 2 
import { useNavigate, useParams } from 'react-router-dom';
3 
import { useDispatch, useSelector } from 'react-redux';
 - 
 
4 
import { QuestionCard } from '@my-coach/components';
 - 
 
Línea 5... Línea -...
5 
 
 - 
 
6 
export function MyCoachViewPage() {
 - 
 
7 
  const [question, setQuestion] = useState({});
 - 
 
8 
  const [answers, setAnswers] = useState([]);
 3 
 
9 
  const [modalShow, setModalShow] = useState(null);
 4 
import { useAlertModal, useModal } from '@shared/hooks';
10 
  const [currentAnswer, setCurrentAnswer] = useState('');
 - 
 
11 
  const addUrl = useRef('');
 - 
 
12 
  const actionUrl = useRef('');
 - 
 
13 
  const labels = useSelector(({ intl }) => intl.labels);
 - 
 
14 
  const dispatch = useDispatch();
 - 
 
15 
  const { pathname } = useLocation();
 - 
 
16 
  const navigate = useNavigate();
 - 
 
17 
 
 - 
 
18 
  const getQuestion = () => {
 - 
 
19 
    axios
 - 
 
20 
      .get(pathname, {
 - 
 
21 
        headers: {
 - 
 
22 
          'Content-Type': 'application/json'
 - 
 
23 
        }
 - 
 
24 
      })
 - 
 
25 
      .then((response) => {
 - 
 
26 
        const { data, success } = response.data;
 - 
 
27 
 
 - 
 
28 
        if (!success) {
 - 
 
29 
          const errorMessage =
 - 
 
30 
            typeof data === 'string'
 - 
 
31 
              ? data
 - 
 
32 
              : 'Error interno. Por favor, inténtelo de nuevo más tarde.';
 - 
 
33 
 
 - 
 
34 
          dispatch(addNotification({ style: 'danger', msg: errorMessage }));
 - 
 
35 
          return;
 - 
 
36 
        }
 - 
 
37 
 
 - 
 
38 
        addUrl.current = data.link_answers_add;
 - 
 
39 
        setQuestion(data);
 - 
 
40 
      })
 - 
 
41 
      .catch((error) => {
 - 
 
42 
        dispatch(addNotification({ style: 'danger', msg: error.message }));
 - 
 
43 
      });
 - 
 
44 
  };
 - 
 
45 
 
 - 
 
46 
  const confirmDelete = () => {
 - 
 
47 
    axios
 - 
 
48 
      .post(actionUrl.current)
 - 
 
49 
      .then((response) => {
 - 
 
50 
        const { data, success } = response.data;
 - 
 
51 
 
 - 
 
52 
        if (!success) {
 - 
 
53 
          const errorMessage =
 - 
 
54 
            typeof data === 'string' ? data : 'Ha ocurrido un error, por favor intente más tarde.';
 - 
 
55 
 
 - 
 
56 
          dispatch(addNotification({ style: 'danger', msg: errorMessage }));
 - 
 
57 
          return;
 - 
 
58 
        }
 - 
 
59 
 
 - 
 
60 
        closeModal();
 - 
 
61 
        dispatch(addNotification({ style: 'success', msg: data }));
 - 
 
62 
        navigate('/my-coach');
 - 
 
63 
      })
 - 
 
64 
      .catch((error) => {
 - 
 
65 
        dispatch(addNotification({ style: 'danger', msg: error.message }));
 - 
 
66 
      });
 - 
 
67 
  };
 - 
 
68 
 
 - 
 
69 
  const confirmDeleteAnswer = () => {
 - 
 
70 
    axios
 - 
 
71 
      .post(actionUrl.current)
 - 
 
72 
      .then((response) => {
 - 
 
73 
        const { data, success } = response.data;
 - 
 
74 
 
 - 
 
75 
        if (!success) {
 - 
 
76 
          const errorMessage =
 - 
 
77 
            typeof data === 'string' ? data : 'Ha ocurrido un error, por favor intente más tarde.';
 - 
 
78 
 
 - 
 
79 
          dispatch(addNotification({ style: 'danger', msg: errorMessage }));
 - 
 
80 
          return;
 - 
 
Línea 81... Línea -...
81 
        }
 - 
 
82 
 
 - 
 
83 
        setQuestion((prevQuestion) => ({
 5 
import { useAnswers, useQuestion } from '@my-coach/hooks';
84 
          ...prevQuestion,
 - 
 
85 
          comments: data.total_comments,
 6 
 
86 
          answers: data.total_answers,
 - 
 
87 
          reactions: data.total_reactions
 - 
 
88 
        }));
 - 
 
89 
        closeModal();
 - 
 
90 
      })
 7 
import { List, Spinner } from '@shared/components';
91 
      .catch((error) => {
 - 
 
92 
        dispatch(addNotification({ style: 'danger', msg: error.message }));
 - 
 
Línea 93... Línea 8...
93 
      });
 8 
import { AnswerCard, AnswerForm, QuestionCard } from '@my-coach/components';
94 
  };
 - 
 
95 
 
 - 
 
96 
  const deleteQuestion = (url) => {
 - 
 
97 
    actionUrl.current = url;
 - 
 
98 
    setModalShow('delete');
 9 
import PageHeader from '@components/common/page-header';
99 
  };
 - 
 
100 
 
 - 
 
101 
  const editQuestion = (url) => {
 - 
 
102 
    actionUrl.current = url;
 - 
 
103 
    setModalShow('edit');
 10 
 
104 
  };
 - 
 
105 
 
 - 
 
106 
  const closeModal = () => {
 - 
 
107 
    actionUrl.current = '';
 - 
 
Línea 108... Línea 11...
108 
    setModalShow(null);
 11 
export function MyCoachViewPage() {
109 
    setCurrentAnswer('');
 12 
  const { uuid } = useParams();
110 
  };
 - 
 
Línea -... Línea 13...
- 
 
 13 
  const navigate = useNavigate();
- 
 
 14 
 
- 
 
 15 
  const { showModal, closeModal } = useModal();
111 
 
 16 
  const { showAlert, closeAlert } = useAlertModal();
112 
  const addAnswer = () => {
 17 
 
- 
 
 18 
  const {
- 
 
 19 
    question,
- 
 
 20 
    loading,
113 
    setModalShow('addAnswer');
 21 
    deleteQuestion,
114 
  };
 22 
    updateTotalAnswers,
- 
 
 23 
    updateTotalComments,
- 
 
 24 
    updateTotalReactions
115 
 
 25 
  } = useQuestion(uuid, {
Línea -... Línea 26...
- 
 
 26 
    onDeleteQuestion: () => {
- 
 
 27 
      closeAlert();
- 
 
 28 
      navigate('/my-coach');
- 
 
 29 
    }
- 
 
 30 
  });
- 
 
 31 
 
- 
 
 32 
  const {
- 
 
 33 
    answers,
- 
 
 34 
    loading: answersLoading,
- 
 
 35 
    addAnswer,
- 
 
 36 
    editAnswer,
- 
 
 37 
    deleteAnswer,
116 
  const editAnswer = (url, text) => {
 38 
    updateComments
- 
 
 39 
  } = useAnswers(question, {
- 
 
 40 
    onAddAnswer: (total_answers) => {
- 
 
 41 
      updateTotalAnswers(total_answers);
117 
    setModalShow('editAnswer');
 42 
      closeModal();
- 
 
 43 
    },
- 
 
 44 
    onEditAnswer: () => {
118 
    actionUrl.current = url;
 45 
      closeModal();
- 
 
 46 
    },
119 
    setCurrentAnswer(text);
 47 
    onDeleteAnswer: ({ total_answers, total_comments, total_reactions }) => {
Línea 120... Línea 48...
120 
  };
 48 
      updateTotalAnswers(total_answers);
- 
 
 49 
      updateTotalComments(total_comments);
- 
 
 50 
      updateTotalReactions(total_reactions);
121 
 
 51 
      closeAlert();
122 
  const deleteAnswer = (url) => {
 52 
    }
- 
 
 53 
  });
123 
    setModalShow('deleteAnswer');
 54 
 
Línea 124... Línea 55...
124 
    actionUrl.current = url;
 55 
  const handleDeleteQuestion = (url) => {
125 
  };
 56 
    showAlert({
126 
 
 57 
      title: 'Eliminar pregunta',
127 
  const onAddAnswer = ({ answers, item }) => {
 58 
      message: '¿Estás seguro de querer eliminar esta pregunta?',
128 
    setQuestion((prevQuestion) => ({ ...prevQuestion, answers }));
 - 
 
129 
    setAnswers((prevAnswers) => [item, ...prevAnswers]);
 - 
 
130 
  };
 59 
      onConfirm: () => deleteQuestion(url)
131 
 
 60 
    });
132 
  const onEditAnswer = ({ description }) => {
 - 
 
133 
    const newAnswers = answers.map((answer) => {
 - 
 
134 
      if (answer.link_edit === actionUrl.current) {
 61 
  };
Línea 135... Línea 62...
135 
        return { ...answer, text: description };
 62 
 
136 
      }
 - 
 
137 
 
 - 
 
138 
      return answer;
 63 
  const handleDeleteAnswer = (url) => {
139 
    });
 - 
 
140 
 
 64 
    showAlert({
Línea 141... Línea 65...
141 
    setAnswers(newAnswers);
 65 
      title: 'Eliminar respuesta',
142 
  };
 66 
      message: '¿Estás seguro de querer eliminar esta respuesta?',
143 
 
 67 
      onConfirm: () => deleteAnswer(url)
144 
  const updateTotalComments = (total) => {
 68 
    });
- 
 
 69 
  };
- 
 
 70 
 
- 
 
 71 
  const handleAddAnswer = (addUrl) => {
145 
    setQuestion({
 72 
    showModal('Agregar respuesta', <AnswerForm onSubmit={(answer) => addAnswer(addUrl, answer)} />);
146 
      ...question,
 73 
  };
Línea 147... Línea -...
147 
      comments: total
 - 
 
148 
    });
 - 
 
149 
  };
 - 
 
150 
 
 - 
 
151 
  const updateTotalReactions = (total) => {
 - 
 
152 
    setQuestion({
 74 
 
153 
      ...question,
 - 
 
154 
      reactions: total
 - 
 
155 
    });
 75 
  const handleEditAnswer = (editUrl, description) => {
156 
  };
 - 
 
157 
 
 - 
 
158 
  useEffect(() => {
 - 
 
159 
    getQuestion();
 - 
 
160 
  }, []);
 - 
 
161 
 
 - 
 
162 
  useEffect(() => {
 - 
 
163 
    if (question.link_answers) {
 - 
 
164 
      axios
 - 
 
165 
        .get(question.link_answers)
 - 
 
166 
        .then((response) => {
 - 
 
167 
          const { data, success } = response.data;
 - 
 
168 
 
 - 
 
169 
          if (!success) {
 - 
 
170 
            const errorMessage =
 - 
 
171 
              typeof data === 'string'
 - 
 
172 
                ? data
 - 
 
173 
                : 'Error interno. Por favor, inténtelo de nuevo más tarde.';
 76 
    showModal(
174 
 
 - 
 
Línea 175... Línea 77...
175 
            dispatch(addNotification({ style: 'danger', msg: errorMessage }));
 77 
      'Editar respuesta',
176 
            return;
 78 
      <AnswerForm
- 
 
 79 
        defaultValues={{ description }}
177 
          }
 80 
        onSubmit={(answer) => editAnswer(editUrl, answer)}
178 
 
 - 
 
179 
          setAnswers(data.items);
 - 
 
180 
        })
 - 
 
181 
        .catch((error) => {
 81 
      />
- 
 
 82 
    );
- 
 
 83 
  };
- 
 
 84 
 
- 
 
 85 
  if (loading || !question) {
182 
          dispatch(addNotification({ style: 'danger', msg: error.message }));
 86 
    return <Spinner />;
183 
        });
 87 
  }
184 
    }
 88 
 
- 
 
 89 
  return (
- 
 
 90 
    <>
185 
  }, [question]);
 91 
      <PageHeader title={question.title} goBack />
- 
 
 92 
      <QuestionCard
- 
 
 93 
        question={question}
- 
 
 94 
        onDelete={question.link_delete ? () => handleDeleteQuestion(question.link_delete) : null}
186 
 
 95 
        onReply={
187 
  return (
 96 
          question.link_answers_add ? () => handleAddAnswer(question.link_answers_add) : null
188 
    <>
 97 
        }
- 
 
 98 
      />
- 
 
 99 
      {answersLoading ? (
- 
 
 100 
        <Spinner />
- 
 
 101 
      ) : (
189 
      <QuestionCard
 102 
        <List
190 
        onEdit={editQuestion}
 103 
          items={answers}
- 
 
 104 
          emptyMessage='No hay respuestas'
- 
 
 105 
          keyExtractor={(item) => item.uuid}
- 
 
 106 
          renderItem={(answer) => (
191 
        onDelete={deleteQuestion}
 107 
            <AnswerCard
192 
        onReply={addAnswer}
 108 
              answer={answer}
193 
        question={question}
 - 
 
194 
      />
 - 
 
195 
      {/* {answers.map((answer) => (
 - 
 
196 
        <AnswerCard
 - 
 
197 
          key={answer.unique}
 - 
 
198 
          {...answer}
 - 
 
199 
          onEdit={editAnswer}
 - 
 
200 
          onDelete={deleteAnswer}
 - 
 
201 
          updateComments={updateTotalComments}
 - 
 
202 
          updateReactions={updateTotalReactions}
 - 
 
203 
        />
 - 
 
204 
      ))}
 - 
 
205 
      <AnswerModal
 - 
 
206 
        url={currentAnswer ? actionUrl.current : addUrl.current}
 109 
              onEdit={
207 
        show={['addAnswer', 'editAnswer'].includes(modalShow)}
 110 
                answer.link_edit ? () => handleEditAnswer(answer.link_edit, answer.text) : null
208 
        currentAnswer={currentAnswer}
 111 
              }