Proyectos de Subversion LeadersLinked - SPA

Rev

Rev 2848 | Rev 2969 | 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 []
32 
    return Array.from({ length: 5 }, (_, i) => description[`answer${i + 1}`])
33 
  }, [description, contentType])
34 
 
35 
  const votes = useMemo(() => {
36 
    if (contentType !== 'fast-survey') return []
37 
    return Array.from({ length: 5 }, (_, i) => description[`votes${i + 1}`])
38 
  }, [description, contentType])
39 
 
40 
  const toggleModal = () => setShowModal(!showModal)
41 
 
42 
  const renderContent = ({
43 
    description,
44 
    image,
45 
    document,
46 
    video,
47 
    imagePreview,
48 
    voteUrl,
49 
    sharedName,
50 
    sharedImage,
51 
    sharedTimeElapse,
52 
    type
53 
  }) => {
54 
    switch (type) {
55 
      case 'video': {
56 
        return (
57 
          <>
58 
            <FeedDescription description={description} />
59 
            <Widget.Media
60 
              type='video'
2842 stevensc 61 
              poster={imagePreview}
2838 stevensc 62 
              src={video}
63 
              onClick={toggleModal}
2842 stevensc 64 
              controls
2838 stevensc 65 
            />
66 
          </>
67 
        )
68 
      }
69 
      case 'image': {
70 
        return (
71 
          <>
72 
            <FeedDescription description={description} />
73 
            <Widget.Media src={image} onClick={toggleModal} />
74 
          </>
75 
        )
76 
      }
77 
      case 'document': {
78 
        return (
79 
          <>
80 
            <FeedDescription description={description} />
81 
            <a href={document} target='_blank' rel='noreferrer'>
82 
              <img className='pdf' src='/images/extension/pdf.png' alt='pdf' />
83 
            </a>
84 
          </>
85 
        )
86 
      }
87 
      case 'fast-survey': {
88 
        return (
2968 stevensc 89 
          <p>Survey</p>
90 
          /*  <SurveyForm
2838 stevensc 91 
            active={description.active}
92 
            question={description.question}
93 
            answers={answers}
94 
            votes={votes}
95 
            time={description.time_remaining}
96 
            voteUrl={voteUrl}
97 
            voted={description.voted}
2968 stevensc 98 
          /> */
2838 stevensc 99 
        )
100 
      }
101 
      case 'shared': {
102 
        return (
103 
          <>
104 
            <FeedDescription description={description} />
105 
            <Widget>
106 
              <Widget.Header
107 
                avatar={sharedImage}
108 
                title={sharedName}
109 
                subheader={sharedTimeElapse}
110 
              />
111 
              <Widget.Body>
112 
                {renderContent({
113 
                  type: sharedContentType,
114 
                  description: sharedFeedDescription,
115 
                  document: sharedFileDocument,
116 
                  image: sharedFileImage,
117 
                  video: sharedFileVideo,
118 
                  imagePreview: sharedFileImagePreview
119 
                })}
120 
              </Widget.Body>
121 
            </Widget>
122 
          </>
123 
        )
124 
      }
125 
      default:
2841 stevensc 126 
        return <FeedDescription description={description} />
2838 stevensc 127 
    }
128 
  }
129 
 
130 
  return (
131 
    <Widget.Body
132 
      styles={{
133 
        padding: 0,
2842 stevensc 134 
        '& > *:not(img, video, .MuiCard-root)': {
2838 stevensc 135 
          padding: '0 1rem'
136 
        },
2842 stevensc 137 
        '.MuiCard-root': {
138 
          margin: '0 1rem'
139 
        },
2838 stevensc 140 
        '& > p, & > span': {
141 
          fontSize: '1rem',
142 
          wordWrap: 'break-word',
143 
          fontWeight: 'normal'
144 
        },
145 
        '& > img, & > video ': {
146 
          width: '100%',
147 
          maxHeight: '600px',
2842 stevensc 148 
          objectFit: 'contain',
149 
          position: 'relative',
2848 stevensc 150 
          backgroundColor: '#000e'
2838 stevensc 151 
        }
152 
      }}
153 
    >
154 
      {renderContent({
155 
        description,
156 
        image,
157 
        document,
158 
        video,
159 
        imagePreview,
160 
        voteUrl,
2841 stevensc 161 
        type: sharedName ? 'shared' : contentType,
2838 stevensc 162 
        sharedName,
163 
        sharedImage,
164 
        sharedTimeElapse
165 
      })}
166 
    </Widget.Body>
167 
  )
168 
}