Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

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

Rev 5449 Rev 5607
Línea 18... Línea 18...
18 
 
 18 
 
19 
// Styles
 19 
// Styles
20 
import '../templates/linkedin/Feed/Feed.scss'
 20 
import '../templates/linkedin/Feed/Feed.scss'
Línea 21... Línea 21...
21 
import FeedCommentSection from '../components/feed/feed-comment/FeedCommentSection'
 21 
import FeedCommentSection from '../components/feed/feed-comment/FeedCommentSection'
22 
 
 22 
 
23 
export default function PostView ({
 23 
export default function PostView({
24 
  post = {
 24 
  post = {
25 
    url: '',
 25 
    url: '',
26 
    file: 'imagengrupo.png',
 26 
    file: '',
27 
    comments_url: '/post/344ccca7-6260-4564-93cc-85ed7682bec2/comments',
 27 
    comments_url: '',
28 
    comments_add_url: '/post/344ccca7-6260-4564-93cc-85ed7682bec2/comments/add'
 28 
    comments_add_url: '',
29 
  }
 29 
  },
30 
}) {
 30 
}) {
31 
  const [isLiked, setIsLiked] = useState(post.is_liked)
 31 
  const [isLiked, setIsLiked] = useState(post.is_liked)
32 
  const [externalShare, setExternalShare] = useState(post.total_share_external)
 32 
  const [externalShare, setExternalShare] = useState(post.total_share_external)
Línea 39... Línea 39...
39 
  const displayCommentSection = () => {
 39 
  const displayCommentSection = () => {
40 
    setShowComments(!showComments)
 40 
    setShowComments(!showComments)
41 
  }
 41 
  }
Línea 42... Línea 42...
42 
 
 42 
 
43 
  const getComments = async () => {
 43 
  const getComments = async () => {
44 
    await axios.get(post.comments_url)
 - 
 
45 
      .then(({ data: response }) => {
 44 
    await axios.get(post.comments_url).then(({ data: response }) => {
46 
        if (!response.success) {
 45 
      if (!response.success) {
47 
          addNotification({ style: 'danger', msg: response.data })
 46 
        addNotification({ style: 'danger', msg: response.data })
48 
          return
 47 
        return
Línea 49... Línea 48...
49 
        }
 48 
      }
50 
 
 49 
 
51 
        setComments(response.data)
 50 
      setComments(response.data)
Línea 52... Línea 51...
52 
      })
 51 
    })
Línea 53... Línea 52...
53 
  }
 52 
  }
- 
 
 53 
 
- 
 
 54 
  const handleExternalShare = (value) => setExternalShare(value)
- 
 
 55 
 
54 
 
 56 
  const ExternalShareButton = withExternalShare(
55 
  const handleExternalShare = (value) => setExternalShare(value)
 57 
    InputOption,
56 
 
 58 
    post.share_external_url,
57 
  const ExternalShareButton = withExternalShare(InputOption, post.share_external_url, {
 59 
    {
58 
    Icon: SendOutlinedIcon,
 60 
      Icon: SendOutlinedIcon,
- 
 
 61 
      color: 'gray',
59 
    color: 'gray',
 62 
      title: 'Enviar',
Línea 60... Línea 63...
60 
    title: 'Enviar',
 63 
      shareUrl: post.share_increment_external_counter_url,
61 
    shareUrl: post.share_increment_external_counter_url,
 - 
 
62 
    setValue: handleExternalShare
 64 
      setValue: handleExternalShare,
63 
  })
 65 
    }
64 
 
 66 
  )
65 
  const handleLike = (url) => {
 67 
 
66 
    axios.post(url)
 68 
  const handleLike = (url) => {
67 
      .then(({ data: response }) => {
 69 
    axios.post(url).then(({ data: response }) => {
68 
        if (!response.success) {
 70 
      if (!response.success) {
69 
          addNotification({ style: 'danger', msg: response.data })
 71 
        addNotification({ style: 'danger', msg: response.data })
Línea 70... Línea 72...
70 
          return
 72 
        return
71 
        }
 73 
      }
72 
        setIsLiked(!isLiked)
 74 
      setIsLiked(!isLiked)
73 
      })
 75 
    })
74 
  }
 76 
  }
75 
 
 77 
 
76 
  const htmlParsedText = (fullStringText) => {
 78 
  const htmlParsedText = (fullStringText) => {
77 
    const fullText = parse(fullStringText)
 79 
    const fullText = parse(fullStringText)
78 
    if (fullStringText.length > 500) {
 80 
    if (fullStringText.length > 500) {
79 
      const shortenedString = fullStringText.substr(0, 500)
 81 
      const shortenedString = fullStringText.substr(0, 500)
80 
      const shortenedText = parse(`${shortenedString}... `)
 82 
      const shortenedText = parse(`${shortenedString}... `)
81 
      return (
 83 
      return (
82 
                <>
 84 
        <>
83 
                    {isReadMoreActive ? fullText : shortenedText}
 85 
          {isReadMoreActive ? fullText : shortenedText}
84 
                    <span className='cursor-pointer' onClick={readMoreHandler}>
 86 
          <span className="cursor-pointer" onClick={readMoreHandler}>
85 
                        {isReadMoreActive ? ' Leer menos' : ' Leer más'}
 87 
            {isReadMoreActive ? ' Leer menos' : ' Leer más'}
Línea 86... Línea 88...
86 
                    </span>
 88 
          </span>
87 
                </>
 89 
        </>
88 
      )
 90 
      )
Línea 89... Línea 91...
89 
    }
 91 
    }
90 
    return <p>{fullText}</p>
 92 
    return <p>{fullText}</p>
91 
  }
 93 
  }
92 
 
 94 
 
93 
  useEffect(() => {
 95 
  useEffect(() => {
94 
    if (showComments && !comments.length) getComments()
 96 
    if (showComments && !comments.length) getComments()
95 
  }, [showComments])
 - 
 
96 
 
 97 
  }, [showComments])
97 
  return (
 98 
 
98 
        <div className="container">
 - 
 
99 
            <div className="d-flex flex-column flex-md-row" style={{ gap: '1rem' }}>
 - 
 
100 
                <div className="col-12 col-md-8 p-0">
 - 
 
101 
                    <div className='feed'>
 - 
 
102 
                        <div className='feed__body'>
 - 
 
103 
                            {post.image && <img src={`/storage/type/post/code/${post.uuid}/filename/${post.image}`} className="Entradas" loading='lazy' />}
 99 
  return (
104 
                        </div>
 100 
    <div className="container">
105 
                        <div className='feed__body'>
 101 
      <div className="d-flex flex-column flex-md-row" style={{ gap: '1rem' }}>
106 
                            <div className='feed__header'>
 102 
        <div className="col-12 col-md-8 p-0">
107 
                                <div className='feed__info'>
 - 
 
108 
                                    <h2>{post.title}</h2>
 103 
          <div className="feed">
109 
                                    <div className='time__elapse'>
 - 
 
110 
                                        <p>{post.addedOn}</p>
 - 
 
111 
                                        <AccessTimeIcon className='time__elapse-icon' />
 104 
            <div className="feed__body">
112 
                                    </div>
 105 
              {post.image && (
113 
                                </div>
 106 
                <img
114 
                            </div>
 - 
 
115 
                            {post.description && htmlParsedText(post.description)}
 - 
 
116 
                        </div>
 - 
 
117 
                        <div className="px-3 d-flex align-items-center justify-content-end" style={{ gap: '5px' }}>
 - 
 
118 
                            {!!externalShare && <span>{`${externalShare} ${LABELS.SENDS.toLowerCase()}`}</span>}
 - 
 
119 
                        </div>
 107 
                  src={`/storage/type/post/code/${post.uuid}/filename/${post.image}`}
120 
                        <div className='feed__buttons'>
 - 
 
121 
                            <InputOption
 - 
 
122 
                                Icon={isLiked ? ThumbUpAltIcon : ThumbUpAltOutlinedIcon}
 - 
 
123 
                                title={isLiked ? LABELS.UNLIKE : LABELS.LIKE}
 - 
 
124 
                                color={isLiked ? '#7405f9' : 'gray'}
 - 
 
125 
                                onClick={() => handleLike(isLiked ? post.unlike_url : post.like_url)}
 - 
 
126 
                            />
 108 
                  className="Entradas"
127 
                            <InputOption
 109 
                  loading="lazy"
128 
                                Icon={ChatOutlinedIcon}
 110 
                />
129 
                                title={LABELS.COMMENTS}
 - 
 
130 
                                color='gray'
 111 
              )}
131 
                                onClick={displayCommentSection}
 - 
 
132 
                            />
 - 
 
133 
                            <ExternalShareButton />
 - 
 
134 
                        </div>
 - 
 
135 
                        <div className='px-2 pb-2'>
 112 
            </div>
136 
                            <FeedCommentSection
 - 
 
137 
                                feedId={post.uuid}
 - 
 
138 
                                addUrl={post.comments_add_url}
 - 
 
139 
                                comments={comments}
 113 
            <div className="feed__body">
- 
 
 114 
              <div className="feed__header">
- 
 
 115 
                <div className="feed__info">
140 
                                isShow={showComments}
 116 
                  <h2>{post.title}</h2>
- 
 
 117 
                  <div className="time__elapse">
- 
 
 118 
                    <p>{post.addedOn}</p>
- 
 
 119 
                    <AccessTimeIcon className="time__elapse-icon" />
- 
 
 120 
                  </div>
- 
 
 121 
                </div>
- 
 
 122 
              </div>
- 
 
 123 
              {post.description && htmlParsedText(post.description)}
- 
 
 124 
            </div>
- 
 
 125 
            <div
- 
 
 126 
              className="px-3 d-flex align-items-center justify-content-end"
- 
 
 127 
              style={{ gap: '5px' }}
- 
 
 128 
            >
- 
 
 129 
              {!!externalShare && (
- 
 
 130 
                <span>{`${externalShare} ${LABELS.SENDS.toLowerCase()}`}</span>
- 
 
 131 
              )}
- 
 
 132 
            </div>
- 
 
 133 
            <div className="feed__buttons">
- 
 
 134 
              <InputOption
- 
 
 135 
                Icon={isLiked ? ThumbUpAltIcon : ThumbUpAltOutlinedIcon}
- 
 
 136 
                title={isLiked ? LABELS.UNLIKE : LABELS.LIKE}
- 
 
 137 
                color={isLiked ? '#7405f9' : 'gray'}
- 
 
 138 
                onClick={() =>
- 
 
 139 
                  handleLike(isLiked ? post.unlike_url : post.like_url)
- 
 
 140 
                }
- 
 
 141 
              />
- 
 
 142 
              <InputOption
- 
 
 143 
                Icon={ChatOutlinedIcon}
- 
 
 144 
                title={LABELS.COMMENTS}
- 
 
 145 
                color="gray"
- 
 
 146 
                onClick={displayCommentSection}
- 
 
 147 
              />
- 
 
 148 
              <ExternalShareButton />
- 
 
 149 
            </div>
- 
 
 150 
            <div className="px-2 pb-2">
- 
 
 151 
              <FeedCommentSection
- 
 
 152 
                isShow={setComments}
141 
                            />
 153 
                currentComments={comments}
- 
 
 154 
                addUrl={post.comments_add_url}
- 
 
 155 
              />
142 
                        </div>
 156 
            </div>
143 
                    </div>
 157 
          </div>