Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

Rev 7228 | 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;
7229 stevensc 51 
    position: relative;
7228 stevensc 52 
  }
53 
  .info {
7229 stevensc 54 
    display: inline-flex;
55 
    flex-direction: column;
7228 stevensc 56 
    h3 {
57 
      color: var(--title-color);
58 
      font-weight: 600;
59 
    }
60 
    span {
61 
      color: var(--subtitle-color);
62 
      font-size: 0.9rem;
63 
    }
64 
  }
65 
`
66 
 
7226 stevensc 67 
export const CommentForm = ({
6618 stevensc 68 
  image = '/images/avatar.jpg',
7226 stevensc 69 
  onSubmit = () => null,
6618 stevensc 70 
}) => {
71 
  const { register, handleSubmit, errors, reset } = useForm()
7226 stevensc 72 
 
6618 stevensc 73 
  const labels = useSelector(({ intl }) => intl.labels)
74 
 
7226 stevensc 75 
  const submitHandler = handleSubmit(async (data) => {
76 
    await onSubmit(data)
77 
    reset()
78 
  })
6618 stevensc 79 
 
80 
  return (
7226 stevensc 81 
    <>
82 
      <StyledCommentForm onSubmit={submitHandler}>
7228 stevensc 83 
        {image && (
84 
          <Avatar
85 
            src={image}
86 
            alt="Profile image"
87 
            sx={{ marginRight: '.5rem', width: '45px', height: '45px' }}
88 
          />
89 
        )}
6618 stevensc 90 
        <input
91 
          type="text"
92 
          name="comment"
93 
          maxLength="256"
94 
          placeholder={labels.write_a_comment}
95 
          ref={register({ required: 'El campo es requerido' })}
96 
        />
7226 stevensc 97 
        <button className="btn btn-primary">
98 
          <SendIcon />
6618 stevensc 99 
        </button>
7226 stevensc 100 
      </StyledCommentForm>
6618 stevensc 101 
      {errors.comment && (
102 
        <FormErrorFeedback>{errors.comment.message}</FormErrorFeedback>
103 
      )}
7226 stevensc 104 
    </>
6618 stevensc 105 
  )
106 
}
107 
 
7226 stevensc 108 
export const CommentsList = ({ comments, onDelete }) => {
6618 stevensc 109 
  return (
7228 stevensc 110 
    <>
111 
      <StyledCommentList>
112 
        {comments.map((comment) => {
113 
          return (
114 
            <li key={comment.unique}>
115 
              <CommentsList.Item comment={comment} onDelete={onDelete} />
116 
            </li>
117 
          )
118 
        })}
119 
      </StyledCommentList>
120 
    </>
6618 stevensc 121 
  )
122 
}
123 
 
7226 stevensc 124 
const Comment = ({ onDelete, comment }) => {
125 
  const [showConfirmModal, setShowConfirmModal] = useState(false)
126 
  const labels = useSelector(({ intl }) => intl.labels)
127 
 
6618 stevensc 128 
  const {
129 
    unique,
130 
    user_url,
131 
    user_name,
7138 stevensc 132 
    // user_image = '/images/avatar.jpg',
6618 stevensc 133 
    time_elapsed,
134 
    comment: content,
135 
    link_delete,
136 
  } = comment
137 
 
7225 stevensc 138 
  const toggleModal = () => {
139 
    setShowConfirmModal(!showConfirmModal)
140 
  }
6618 stevensc 141 
 
142 
  return (
7228 stevensc 143 
    <>
144 
      <StyledComment>
145 
        <div className="content">
6618 stevensc 146 
          <div className="info">
147 
            <a href={user_url}>
148 
              <h3>{user_name}</h3>
149 
            </a>
7226 stevensc 150 
            <span>{time_elapsed}</span>
6618 stevensc 151 
          </div>
7228 stevensc 152 
          {link_delete && (
153 
            <Options
154 
              options={[
155 
                {
156 
                  label: labels.delete,
157 
                  action: toggleModal,
158 
                },
159 
              ]}
7229 stevensc 160 
              right="0.5rem"
161 
              top="1.5rem"
7228 stevensc 162 
            />
163 
          )}
6618 stevensc 164 
          <p>{content}</p>
165 
        </div>
7228 stevensc 166 
      </StyledComment>
6618 stevensc 167 
      <ConfirmModal
168 
        show={showConfirmModal}
169 
        onClose={toggleModal}
170 
        onAccept={() => onDelete(unique, link_delete)}
171 
        acceptLabel={labels.accept}
172 
      />
7228 stevensc 173 
    </>
6618 stevensc 174 
  )
175 
}
176 
 
7226 stevensc 177 
CommentsList.Item = Comment