Proyectos de Subversion LeadersLinked - Backend

Rev

Rev 16650 | Rev 16656 | Ir a la última revisión | Mostrar el archivo completo | | | Autoría | Ultima modificación | Ver Log |

Rev 16650 Rev 16655
Línea 1... Línea 1...
1 
import React, { useState } from 'react'
 1 
import React, { useEffect, useState } from 'react'
2 
import { deleteFeed } from '../../redux/feed/feed.actions'
 2 
import { deleteFeed } from '../../redux/feed/feed.actions'
3 
import DeleteModal from '../../shared/DeleteModal'
 3 
import DeleteModal from '../../shared/DeleteModal'
4 
import CommentSection from './CommentSection'
 4 
import CommentSection from './CommentSection'
5 
import parse from 'html-react-parser'
 5 
import parse from 'html-react-parser'
6 
import styles from './feeds.module.scss'
 6 
import styles from './feeds.module.scss'
- 
 
 7 
import Options from '../../shared/options/Options'
Línea 7... Línea 8...
7 
 
 8 
 
8 
const FeedTemplate = ({ feed }) => {
 9 
const FeedTemplate = ({ feed }) => {
9 
  const [showDeleteModal, setShowDeleteModal] = useState(false)
 - 
 
10 
  const [commentState, setCommentState] = useState(feed.owner_comments)
 10 
  const [showDeleteModal, setShowDeleteModal] = useState(false)
11 
  const [isReadMoreActive, setIsReadMoreActive] = useState(false)
 - 
 
12 
 
 - 
 
Línea -... Línea 11...
- 
 
 11 
  const [options, setOptions] = useState([])
13 
  const closeModal = () => setShowDeleteModal(false)
 12 
 
- 
 
 13 
  const toggleModal = () => {
Línea 14... Línea 14...
14 
 
 14 
    setShowDeleteModal(!showDeleteModal)
15 
  const readMoreHandler = () => setIsReadMoreActive(!isReadMoreActive)
 - 
 
16 
 
 15 
  }
17 
  const htmlParsedText = (fullStringText) => {
 - 
 
18 
    const fullText = parse(fullStringText)
 - 
 
19 
    if (fullStringText.length > 500) {
 - 
 
20 
      const shortenedString = fullStringText.substr(0, 500)
 16 
 
21 
      const shortenedText = parse(`${shortenedString}... `)
 - 
 
22 
      return (
 17 
  useEffect(() => {
23 
        <React.Fragment>
 - 
 
24 
          {isReadMoreActive ? fullText : shortenedText}
 - 
 
25 
          <button className="btn py-0 px-1" onClick={readMoreHandler}>
 - 
 
26 
            {isReadMoreActive ? ' Leer menos' : ' Leer más'}
 18 
    if (feed.feed_delete_url) {
27 
          </button>
 - 
 
28 
        </React.Fragment>
 - 
 
29 
      )
 19 
      setOptions((prevOptions) =>
30 
    } else {
 20 
        prevOptions.concat({ label: 'Borrar', action: toggleModal })
Línea 31... Línea 21...
31 
      return fullText
 21 
      )
32 
    }
 22 
    }
33 
  }
 23 
  }, [])
34 
 
 24 
 
35 
  return (
 25 
  return (
36 
    <>
 26 
    <>
37 
      <article className={styles.feed}>
 27 
      <article className={styles.feed}>
38 
        <FeedTemplate.Header
 28 
        <FeedTemplate.Header
- 
 
 29 
          name={feed.owner_name}
- 
 
 30 
          image={feed.owner_image}
- 
 
 31 
          profileUrl={feed.owner_url}
- 
 
 32 
          timeElapsed={feed.owner_time_elapse}
- 
 
 33 
          options={options}
- 
 
 34 
        />
- 
 
 35 
        <FeedTemplate.Content
39 
          name={feed.owner_name}
 36 
          description={feed.owner_description}
- 
 
 37 
          image={feed.owner_file_image}
- 
 
 38 
          previewImage={feed.owner_file_image_preview}
- 
 
 39 
          video={feed.owner_file_video}
- 
 
 40 
          document={feed.owner_file_document}
- 
 
 41 
          feedShared={{
- 
 
 42 
            owner_description: feed.shared_description,
- 
 
 43 
            owner_file_image: feed.shared_file_image,
- 
 
 44 
            owner_file_image_preview: feed.shared_file_image_preview,
40 
          image={feed.owner_image}
 45 
            owner_file_video: feed.shared_file_video,
41 
          profileUrl={feed.owner_url}
 - 
 
42 
          timeElapsed={feed.owner_time_elapse}
 - 
 
43 
          deleteUrl={feed.feed_delete_url}
 - 
 
44 
        />
 - 
 
45 
        <div className="job_descp">
 - 
 
46 
          {feed.owner_description && (
 - 
 
47 
            <div className="show-read-more">
 - 
 
48 
              {htmlParsedText(feed.owner_description)}
 - 
 
49 
            </div>
 - 
 
50 
          )}
 - 
 
51 
          {feed.owner_file_image && (
 - 
 
52 
            <img src={feed.owner_file_image} className="Entradas" />
 - 
 
53 
          )}
 - 
 
54 
          {feed.owner_file_video && (
 - 
 
55 
            <video
 - 
 
56 
              src={feed.owner_file_video}
 - 
 
57 
              controls
 - 
 
58 
              poster={feed.owner_file_image_preview}
 - 
 
59 
              preload="none"
 - 
 
60 
            />
 - 
 
61 
          )}
 - 
 
62 
          {feed.owner_file_document && (
 - 
 
63 
            <a href={feed.owner_file_document} target="_blank" rel="noreferrer">
 - 
 
64 
              Descargar
 - 
 
65 
            </a>
 - 
 
66 
          )}
 - 
 
67 
          {feed.shared_name && (
 - 
 
68 
            <div className="shared-post-bar">
 - 
 
69 
              <div className="post-bar">
 - 
 
70 
                <div className="post_topbar">
 - 
 
71 
                  <div className="usy-dt">
 - 
 
72 
                    <img
 - 
 
73 
                      src={feed.shared_image}
 - 
 
74 
                      alt=""
 - 
 
75 
                      style={{ width: '50px', height: 'auto' }}
 - 
 
76 
                    />
 - 
 
77 
                    <div className="usy-name">
 - 
 
78 
                      <h3>{feed.shared_name}</h3>
 - 
 
79 
                      <span>{feed.shared_time_elapse}</span>
 - 
 
80 
                    </div>
 - 
 
81 
                  </div>
 - 
 
82 
                </div>
 - 
 
83 
                <div className="job_descp">
 - 
 
84 
                  <div className="show-read-more">
 - 
 
85 
                    {htmlParsedText(feed.shared_description)}
 - 
 
86 
                  </div>
 - 
 
87 
                  {feed.shared_file_image && (
 - 
 
88 
                    <img src={feed.shared_file_image} className="Entradas" />
 - 
 
89 
                  )}
 - 
 
90 
                  {feed.shared_file_video && (
 - 
 
91 
                    <video
 - 
 
92 
                      src={feed.shared_file_video}
 - 
 
93 
                      controls
 - 
 
94 
                      poster={feed.shared_file_image_preview}
 - 
 
95 
                      preload="none"
 - 
 
96 
                    />
 - 
 
97 
                  )}
 - 
 
98 
                  {feed.shared_file_document && (
 - 
 
99 
                    <a
 - 
 
100 
                      href={feed.shared_file_document}
 - 
 
101 
                      target="_blank"
 - 
 
102 
                      rel="noreferrer"
 - 
 
103 
                    >
 - 
 
104 
                      Descargar
 - 
 
105 
                    </a>
 - 
 
106 
                  )}
 - 
 
107 
                </div>
 - 
 
108 
              </div>
 - 
 
109 
            </div>
 - 
 
110 
          )}
 - 
 
111 
        </div>
 - 
 
112 
 
 - 
 
113 
        <div className="job-status-bar">
 - 
 
114 
          <ul
 - 
 
115 
            className="d-flex align-items-center justify-content-start"
 - 
 
116 
            style={{ gap: '1rem', margin: '10px 0', padding: '0' }}
 - 
 
117 
          >
 - 
 
118 
            <li>
 - 
 
119 
              <i className="btn-indicator fa fa-comments mr-1" />
 - 
 
120 
              {commentState}
 - 
 
121 
            </li>
 - 
 
122 
            <li>
 - 
 
123 
              <i className="btn-indicator fa fa-share flip-horizontal ps-1" />
 - 
 
124 
              {feed.owner_shared}
 46 
            owner_file_document: feed.shared_file_document,
125 
            </li>
 47 
            owner_time_elapse: shared_time_elapse
126 
          </ul>
 48 
          }}
127 
        </div>
 49 
        />
128 
        <CommentSection
 50 
        <CommentSection
Línea 143... Línea 65...
143 
      />
 65 
      />
144 
    </>
 66 
    </>
145 
  )
 67 
  )
146 
}
 68 
}
Línea 147... Línea 69...
147 
 
 69 
 
148 
const Header = ({ image, name, profileUrl, timeElapsed, deleteUrl }) => {
 - 
 
149 
  const [displayOption, setDisplayOption] = useState(false)
 - 
 
150 
 
 70 
const Header = ({ image, name, profileUrl, timeElapsed, options = null }) => {
151 
  return (
 71 
  return (
152 
    <div className={styles.feed_header}>
 72 
    <div className={styles.feed_header}>
Línea 153... Línea 73...
153 
      <img src={image} alt={`${name} profile image`} />
 73 
      <img src={image} alt={`${name} profile image`} />
Línea 157... Línea 77...
157 
          <h2>{name}</h2>
 77 
          <h2>{name}</h2>
158 
        </a>
 78 
        </a>
159 
        <span>{timeElapsed}</span>
 79 
        <span>{timeElapsed}</span>
160 
      </div>
 80 
      </div>
Línea -... Línea 81...
- 
 
 81 
 
- 
 
 82 
      {options && <Options options={options} />}
- 
 
 83 
    </div>
- 
 
 84 
  )
- 
 
 85 
}
- 
 
 86 
 
- 
 
 87 
const Body = ({
- 
 
 88 
  description,
- 
 
 89 
  image,
161 
 
 90 
  video,
- 
 
 91 
  previewImage,
- 
 
 92 
  document,
- 
 
 93 
  feedShared
162 
      {deleteUrl && (
 94 
}) => {
- 
 
 95 
  const [isReadMoreActive, setIsReadMoreActive] = useState(false)
- 
 
 96 
 
- 
 
 97 
  const readMoreHandler = () => {
163 
        <div className="cursor-pointer d-flex align-items-center">
 98 
    setIsReadMoreActive(!isReadMoreActive)
- 
 
 99 
  }
- 
 
 100 
 
164 
          <i
 101 
  const htmlParsedText = (fullStringText) => {
- 
 
 102 
    const fullText = parse(fullStringText)
- 
 
 103 
 
165 
            className="fa fa-ellipsis-v"
 104 
    if (fullStringText.length > 500) {
166 
            onClick={() => setDisplayOption(!displayOption)}
 105 
      const shortenedString = fullStringText.substr(0, 500)
- 
 
 106 
      const shortenedText = parse(`${shortenedString}... `)
167 
            style={{ fontSize: '1.5rem' }}
 107 
 
168 
          />
 108 
      return (
- 
 
 109 
        <>
169 
          <ul
 110 
          {isReadMoreActive ? fullText : shortenedText}
170 
            className={`my-dropdown-menu dropdown-menu-end ${
 111 
          <button className="btn py-0 px-1" onClick={readMoreHandler}>
171 
              displayOption ? 'show' : ''
 112 
            {isReadMoreActive ? ' Leer menos' : ' Leer más'}
172 
            }`}
 113 
          </button>
- 
 
 114 
        </>
- 
 
 115 
      )
- 
 
 116 
    }
173 
          >
 117 
 
- 
 
 118 
    return fullText
- 
 
 119 
  }
- 
 
 120 
 
174 
            <li className="dropdown-item">
 121 
  return (
175 
              <button className="btn" type="button">
 122 
    <div className={styles.feed_content}>
176 
                <i className="fa fa-trash pe-2" />
 123 
      {description && htmlParsedText(description)}
177 
                Borrar
 124 
      {image && (
178 
              </button>
 125 
        <div className="img-container">
179 
            </li>
 126 
          <img src={image} alt="" />
180 
          </ul>
 127 
          <img src={image} alt="" />
181 
        </div>
 128 
        </div>
- 
 
 129 
      )}
- 
 
 130 
      {video && (
- 
 
 131 
        <video src={video} preload="none" poster={previewImage} controls />
- 
 
 132 
      )}
- 
 
 133 
      {document && (
- 
 
 134 
        <a href={document} target="_blank" rel="noreferrer">
- 
 
 135 
          Descargar
- 
 
 136 
        </a>
- 
 
 137 
      )}
182 
      )}
 138 
      {feedShared && <FeedTemplate feed={feedShared} />}
183 
    </div>
 139 
    </div>
184 
  )
 140 
  )
Línea 185... Línea 141...
185 
}
 141 
}
- 
 
 142 
 
Línea 186... Línea 143...
186 
 
 143 
FeedTemplate.Header = Header