Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

Rev 7226 | Rev 7229 | Ir a la última revisión | | Comparar con el anterior | Ultima modificación | Ver Log |

Rev Autor Línea Nro. Línea
7226 stevensc 1 
import React, { useState } from 'react'
6618 stevensc 2 
import { useForm } from 'react-hook-form'
7226 stevensc 3 
import { useSelector } from 'react-redux'
4 
import { Avatar } from '@mui/material'
5 
import styled from 'styled-components'
6 
import SendIcon from '@mui/icons-material/Send'
6618 stevensc 7 
 
7226 stevensc 8 
import Options from '../UI/Option'
6618 stevensc 9 
import ConfirmModal from '../modals/ConfirmModal'
10 
import FormErrorFeedback from '../UI/FormErrorFeedback'
11 
 
7226 stevensc 12 
const StyledCommentForm = styled.form`
13 
  display: flex;
14 
  justify-content: flex-start;
15 
  align-items: center;
16 
  input {
17 
    flex-grow: 1;
18 
    padding: 0.5rem;
19 
    background-color: var(--bg-color-secondary);
20 
    border: 1px solid var(--border-primary);
7228 stevensc 21 
    border-radius: var(--border-radius) 0 0 var(--border-radius);
7226 stevensc 22 
  }
23 
  button {
7228 stevensc 24 
    border-radius: 0 var(--border-radius) var(--border-radius) 0;
25 
    border: 1px solid var(--button-bg) !important;
7226 stevensc 26 
  }
27 
`
28 
 
7228 stevensc 29 
const StyledCommentList = styled.ul`
30 
  display: flex;
31 
  flex-direction: column;
32 
  padding-right: 0.5rem;
33 
  gap: 0.5rem;
34 
  margin-top: 0.5rem;
35 
  max-height: 300px;
36 
  overflow-y: auto;
37 
`
38 
 
39 
const StyledComment = styled.ul`
40 
  display: flex;
41 
  gap: 0.5rem;
42 
  align-items: flex-start;
43 
  .content {
44 
    background-color: var(--chat-send);
45 
    border-radius: var(--border-radius);
46 
    display: flex;
47 
    flex-direction: column;
48 
    flex-grow: 1;
49 
    gap: 0.5rem;
50 
    padding: 0.5rem;
51 
  }
52 
  .info {
53 
    h3 {
54 
      color: var(--title-color);
55 
      font-weight: 600;
56 
    }
57 
    span {
58 
      color: var(--subtitle-color);
59 
      font-size: 0.9rem;
60 
    }
61 
  }
62 
`
63 
 
7226 stevensc 64 
export const CommentForm = ({
6618 stevensc 65 
  image = '/images/avatar.jpg',
7226 stevensc 66 
  onSubmit = () => null,
6618 stevensc 67 
}) => {
68 
  const { register, handleSubmit, errors, reset } = useForm()
7226 stevensc 69 
 
6618 stevensc 70 
  const labels = useSelector(({ intl }) => intl.labels)
71 
 
7226 stevensc 72 
  const submitHandler = handleSubmit(async (data) => {
73 
    await onSubmit(data)
74 
    reset()
75 
  })
6618 stevensc 76 
 
77 
  return (
7226 stevensc 78 
    <>
79 
      <StyledCommentForm onSubmit={submitHandler}>
7228 stevensc 80 
        {image && (
81 
          <Avatar
82 
            src={image}
83 
            alt="Profile image"
84 
            sx={{ marginRight: '.5rem', width: '45px', height: '45px' }}
85 
          />
86 
        )}
6618 stevensc 87 
        <input
88 
          type="text"
89 
          name="comment"
90 
          maxLength="256"
91 
          placeholder={labels.write_a_comment}
92 
          ref={register({ required: 'El campo es requerido' })}
93 
        />
7226 stevensc 94 
        <button className="btn btn-primary">
95 
          <SendIcon />
6618 stevensc 96 
        </button>
7226 stevensc 97 
      </StyledCommentForm>
6618 stevensc 98 
      {errors.comment && (
99 
        <FormErrorFeedback>{errors.comment.message}</FormErrorFeedback>
100 
      )}
7226 stevensc 101 
    </>
6618 stevensc 102 
  )
103 
}
104 
 
7226 stevensc 105 
export const CommentsList = ({ comments, onDelete }) => {
6618 stevensc 106 
  return (
7228 stevensc 107 
    <>
108 
      <StyledCommentList>
109 
        {comments.map((comment) => {
110 
          return (
111 
            <li key={comment.unique}>
112 
              <CommentsList.Item comment={comment} onDelete={onDelete} />
113 
            </li>
114 
          )
115 
        })}
116 
      </StyledCommentList>
117 
    </>
6618 stevensc 118 
  )
119 
}
120 
 
7226 stevensc 121 
const Comment = ({ onDelete, comment }) => {
122 
  const [showConfirmModal, setShowConfirmModal] = useState(false)
123 
  const labels = useSelector(({ intl }) => intl.labels)
124 
 
6618 stevensc 125 
  const {
126 
    unique,
127 
    user_url,
128 
    user_name,
7138 stevensc 129 
    // user_image = '/images/avatar.jpg',
6618 stevensc 130 
    time_elapsed,
131 
    comment: content,
132 
    link_delete,
133 
  } = comment
134 
 
7225 stevensc 135 
  const toggleModal = () => {
136 
    setShowConfirmModal(!showConfirmModal)
137 
  }
6618 stevensc 138 
 
139 
  return (
7228 stevensc 140 
    <>
141 
      <StyledComment>
142 
        <div className="content">
6618 stevensc 143 
          <div className="info">
144 
            <a href={user_url}>
145 
              <h3>{user_name}</h3>
146 
            </a>
7226 stevensc 147 
            <span>{time_elapsed}</span>
6618 stevensc 148 
          </div>
7228 stevensc 149 
          {link_delete && (
150 
            <Options
151 
              options={[
152 
                {
153 
                  label: labels.delete,
154 
                  action: toggleModal,
155 
                },
156 
              ]}
157 
            />
158 
          )}
6618 stevensc 159 
          <p>{content}</p>
160 
        </div>
7228 stevensc 161 
      </StyledComment>
6618 stevensc 162 
      <ConfirmModal
163 
        show={showConfirmModal}
164 
        onClose={toggleModal}
165 
        onAccept={() => onDelete(unique, link_delete)}
166 
        acceptLabel={labels.accept}
167 
      />
7228 stevensc 168 
    </>
6618 stevensc 169 
  )
170 
}
171 
 
7226 stevensc 172 
CommentsList.Item = Comment