Proyectos de Subversion LeadersLinked - SPA

Rev

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