Proyectos de Subversion LeadersLinked - SPA

Rev

Rev 2854 | Ir a la última revisión | | Ultima modificación | Ver Log |

Rev Autor Línea Nro. Línea
2844 stevensc 1 
import React, { useMemo } from 'react'
2 
import { styled, Typography } from '@mui/material'
3 
import { Link } from 'react-router-dom'
4 
import Options from '@components/UI/Option'
5 
 
6 
const CommentContainer = styled('div')(({ theme }) => ({
7 
  backgroundColor: '#ccc',
8 
  borderRadius: theme.shape.borderRadius,
9 
  display: 'flex',
10 
  flexDirection: 'column',
11 
  flexGrow: 1,
12 
  gap: theme.spacing(0.5),
13 
  padding: theme.spacing(0.5),
14 
  position: 'relative'
15 
}))
16 
 
17 
const CommentHeader = styled('div')(({ theme }) => ({
18 
  display: 'flex',
19 
  justifyContent: 'space-between',
20 
  gap: theme.spacing(0.5)
21 
}))
22 
 
23 
const CommentInfo = styled(Link)(() => ({
24 
  display: 'flex',
25 
  flexDirection: 'column'
26 
}))
27 
 
28 
export default function CommentItem({ comment, onDelete, onReport }) {
29 
  const {
30 
    user_url,
31 
    user_name,
32 
    time_elapsed,
33 
    comment: content,
34 
    link_delete,
35 
    link_abuse_report
36 
  } = comment
37 
 
38 
  const actions = useMemo(() => {
39 
    const options = []
40 
 
41 
    if (link_delete) {
42 
      options.push({
43 
        label: 'Borrar',
44 
        action: () => onDelete(comment)
45 
      })
46 
    }
47 
 
48 
    if (link_abuse_report) {
49 
      options.push({
50 
        label: 'Reportar',
51 
        action: () => onReport(link_abuse_report)
52 
      })
53 
    }
54 
 
55 
    return options
56 
  }, [link_delete, link_abuse_report])
57 
 
58 
  return (
59 
    <CommentContainer>
60 
      <CommentHeader>
61 
        <CommentInfo to={user_url}>
62 
          <Typography variant='h3'>{user_name}</Typography>
63 
          <Typography variant='body2'>{time_elapsed}</Typography>
64 
        </CommentInfo>
65 
 
66 
        <Options options={actions} />
67 
      </CommentHeader>
68 
 
69 
      <Typography>{content}</Typography>
70 
    </CommentContainer>
71 
  )
72 
}