| 3741 |
stevensc |
1 |
import React from 'react';
|
|
|
2 |
import { useSelector } from 'react-redux';
|
|
|
3 |
import { useNavigate } from 'react-router-dom';
|
|
|
4 |
import { styled, Typography } from '@mui/material';
|
|
|
5 |
|
|
|
6 |
import { parse } from '@shared/utils';
|
|
|
7 |
|
|
|
8 |
import { Card, CardContent, CardHeader, Menu } from '@shared/components';
|
|
|
9 |
|
|
|
10 |
export const QuestionStats = styled('div')`
|
|
|
11 |
display: flex;
|
|
|
12 |
align-items: center;
|
|
|
13 |
gap: 0.5rem;
|
|
|
14 |
justify-content: space-around;
|
|
|
15 |
padding: 5px;
|
|
|
16 |
`;
|
|
|
17 |
|
|
|
18 |
const QuestionCategories = styled('ul')`
|
|
|
19 |
align-items: center;
|
|
|
20 |
display: flex;
|
|
|
21 |
gap: 0.5rem;
|
|
|
22 |
flex-wrap: wrap;
|
|
|
23 |
max-width: 200px;
|
|
|
24 |
li {
|
|
|
25 |
background: rgb(198, 209, 240);
|
|
|
26 |
border-radius: var(--border-radius);
|
|
|
27 |
color: var(--font-color);
|
|
|
28 |
padding: 0.3rem 0.4rem;
|
|
|
29 |
font-size: 0.7rem;
|
|
|
30 |
font-weight: 600;
|
|
|
31 |
}
|
|
|
32 |
`;
|
|
|
33 |
|
|
|
34 |
export function QuestionCard({
|
|
|
35 |
question = {},
|
|
|
36 |
onEdit = () => {},
|
|
|
37 |
onDelete = () => {},
|
|
|
38 |
onReply = () => {}
|
|
|
39 |
}) {
|
|
|
40 |
const labels = useSelector(({ intl }) => intl.labels);
|
|
|
41 |
const navigate = useNavigate();
|
|
|
42 |
|
|
|
43 |
const {
|
|
|
44 |
last_answer_on = '',
|
|
|
45 |
added_on = '',
|
|
|
46 |
user_name = '',
|
|
|
47 |
user_image = '',
|
|
|
48 |
title = '',
|
|
|
49 |
description = '',
|
|
|
50 |
categories = [],
|
|
|
51 |
views = 0,
|
|
|
52 |
answers = 0,
|
|
|
53 |
reactions = 0,
|
|
|
54 |
comments = 0,
|
|
|
55 |
link_view = '',
|
|
|
56 |
link_edit = '',
|
|
|
57 |
link_delete = '',
|
|
|
58 |
link_answers_add = ''
|
|
|
59 |
} = question;
|
|
|
60 |
|
|
|
61 |
return (
|
|
|
62 |
<Card sx={{ cursor: 'pointer' }} onClick={() => navigate(link_view)}>
|
|
|
63 |
<CardHeader
|
|
|
64 |
avatar={user_image}
|
|
|
65 |
title={user_name}
|
|
|
66 |
renderAction={() => (
|
|
|
67 |
<Menu>
|
|
|
68 |
{link_delete && <Menu.Item onClick={() => onDelete(link_delete)}>Borrar</Menu.Item>}
|
|
|
69 |
{link_edit && <Menu.Item onClick={() => onEdit(question)}>Editar</Menu.Item>}
|
|
|
70 |
{link_answers_add && (
|
|
|
71 |
<Menu.Item onClick={() => onReply(link_edit)}>Responder</Menu.Item>
|
|
|
72 |
)}
|
|
|
73 |
</Menu>
|
|
|
74 |
)}
|
|
|
75 |
/>
|
|
|
76 |
|
|
|
77 |
<CardContent>
|
|
|
78 |
<QuestionCategories>
|
|
|
79 |
{categories.map((category) => (
|
|
|
80 |
<li key={category}>{category}</li>
|
|
|
81 |
))}
|
|
|
82 |
</QuestionCategories>
|
|
|
83 |
|
|
|
84 |
<Typography variant='h2'>{title}</Typography>
|
|
|
85 |
<Typography variant='overline'>{`${labels.my_coach_question} ${added_on}`}</Typography>
|
|
|
86 |
{last_answer_on ? (
|
|
|
87 |
<Typography variant='overline'>{`${labels.my_coach_last_answer} ${last_answer_on}`}</Typography>
|
|
|
88 |
) : null}
|
|
|
89 |
<Typography>{parse(description)}</Typography>
|
|
|
90 |
|
|
|
91 |
<QuestionStats>
|
|
|
92 |
<Typography variant='overline'>{`${answers} ${labels.my_coach_answers}`}</Typography>
|
|
|
93 |
<Typography variant='overline'>{`${reactions} ${labels.my_coach_reactions}`}</Typography>
|
|
|
94 |
<Typography variant='overline'>{`${views} ${labels.my_coach_views}`}</Typography>
|
|
|
95 |
<Typography variant='overline'>{`${comments} ${labels.comments}`}</Typography>
|
|
|
96 |
</QuestionStats>
|
|
|
97 |
</CardContent>
|
|
|
98 |
</Card>
|
|
|
99 |
);
|
|
|
100 |
}
|