Proyectos de Subversion LeadersLinked - SPA

Rev

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

Rev Autor Línea Nro. Línea
2838 stevensc 1 
import React, { useMemo, useState } from 'react'
2 
import { useSelector } from 'react-redux'
3 
 
4 
import Widget from '@components/UI/Widget'
5 
import SurveyForm from '@components/survey-form/SurveyForm'
6 
import FeedDescription from './feed-description'
7 
 
8 
export default function FeedContent({ id }) {
9 
  const [showModal, setShowModal] = useState(false)
10 
 
11 
  const {
12 
    owner_description: description,
13 
    owner_file_image: image,
14 
    owner_file_document: document,
15 
    owner_file_video: video,
16 
    owner_file_image_preview: imagePreview,
17 
    feed_vote_url: voteUrl,
18 
    feed_content_type: contentType,
19 
    shared_name: sharedName,
20 
    shared_image: sharedImage,
21 
    shared_time_elapse: sharedTimeElapse,
22 
    shared_description: sharedFeedDescription,
23 
    shared_file_video: sharedFileVideo,
24 
    shared_file_image_preview: sharedFileImagePreview,
25 
    shared_file_image: sharedFileImage,
26 
    shared_file_document: sharedFileDocument,
27 
    shared_content_type: sharedContentType
28 
  } = useSelector(({ feed }) => feed.feeds.byId[id])
29 
 
30 
  const answers = useMemo(() => {
31 
    if (contentType !== 'fast-survey') return []
3017 stevensc 32 
    return Array.from(
33 
      { length: description.number_of_answers },
34 
      (_, i) => description[`answer${i + 1}`]
35 
    )
2838 stevensc 36 
  }, [description, contentType])
37 
 
38 
  const votes = useMemo(() => {
39 
    if (contentType !== 'fast-survey') return []
3017 stevensc 40 
    return Array.from(
41 
      { length: description.number_of_votes ?? 0 },
42 
      (_, i) => description[`votes${i + 1}`]
43 
    )
2838 stevensc 44 
  }, [description, contentType])
45 
 
46 
  const toggleModal = () => setShowModal(!showModal)
47 
 
48 
  const renderContent = ({
49 
    description,
50 
    image,
51 
    document,
52 
    video,
53 
    imagePreview,
54 
    voteUrl,
55 
    sharedName,
56 
    sharedImage,
57 
    sharedTimeElapse,
58 
    type
59 
  }) => {
60 
    switch (type) {
61 
      case 'video': {
62 
        return (
63 
          <>
64 
            <FeedDescription description={description} />
65 
            <Widget.Media
66 
              type='video'
2842 stevensc 67 
              poster={imagePreview}
2838 stevensc 68 
              src={video}
69 
              onClick={toggleModal}
2842 stevensc 70 
              controls
2838 stevensc 71 
            />
72 
          </>
73 
        )
74 
      }
75 
      case 'image': {
76 
        return (
77 
          <>
78 
            <FeedDescription description={description} />
79 
            <Widget.Media src={image} onClick={toggleModal} />
80 
          </>
81 
        )
82 
      }
83 
      case 'document': {
84 
        return (
85 
          <>
86 
            <FeedDescription description={description} />
87 
            <a href={document} target='_blank' rel='noreferrer'>
88 
              <img className='pdf' src='/images/extension/pdf.png' alt='pdf' />
89 
            </a>
90 
          </>
91 
        )
92 
      }
93 
      case 'fast-survey': {
94 
        return (
3015 stevensc 95 
          <SurveyForm
3017 stevensc 96 
            voteUrl={voteUrl}
97 
            active={Boolean(description.active)}
3015 stevensc 98 
            question={description.question}
3017 stevensc 99 
            time={description.time_remaining}
100 
            resultType={description.result_type}
3015 stevensc 101 
            answers={answers}
102 
            votes={votes}
103 
          />
2838 stevensc 104 
        )
105 
      }
106 
      case 'shared': {
107 
        return (
108 
          <>
109 
            <FeedDescription description={description} />
110 
            <Widget>
111 
              <Widget.Header
112 
                avatar={sharedImage}
113 
                title={sharedName}
114 
                subheader={sharedTimeElapse}
115 
              />
116 
              <Widget.Body>
117 
                {renderContent({
118 
                  type: sharedContentType,
119 
                  description: sharedFeedDescription,
120 
                  document: sharedFileDocument,
121 
                  image: sharedFileImage,
122 
                  video: sharedFileVideo,
123 
                  imagePreview: sharedFileImagePreview
124 
                })}
125 
              </Widget.Body>
126 
            </Widget>
127 
          </>
128 
        )
129 
      }
130 
      default:
2841 stevensc 131 
        return <FeedDescription description={description} />
2838 stevensc 132 
    }
133 
  }
134 
 
135 
  return (
136 
    <Widget.Body
137 
      styles={{
138 
        padding: 0,
2842 stevensc 139 
        '& > *:not(img, video, .MuiCard-root)': {
2838 stevensc 140 
          padding: '0 1rem'
141 
        },
2842 stevensc 142 
        '.MuiCard-root': {
143 
          margin: '0 1rem'
144 
        },
2838 stevensc 145 
        '& > p, & > span': {
146 
          fontSize: '1rem',
147 
          wordWrap: 'break-word',
148 
          fontWeight: 'normal'
149 
        },
150 
        '& > img, & > video ': {
151 
          width: '100%',
152 
          maxHeight: '600px',
2842 stevensc 153 
          objectFit: 'contain',
154 
          position: 'relative',
2848 stevensc 155 
          backgroundColor: '#000e'
2838 stevensc 156 
        }
157 
      }}
158 
    >
159 
      {renderContent({
160 
        description,
161 
        image,
162 
        document,
163 
        video,
164 
        imagePreview,
165 
        voteUrl,
2841 stevensc 166 
        type: sharedName ? 'shared' : contentType,
2838 stevensc 167 
        sharedName,
168 
        sharedImage,
169 
        sharedTimeElapse
170 
      })}
171 
    </Widget.Body>
172 
  )
173 
}