Proyectos de Subversion LeadersLinked - SPA

Rev

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

Rev Autor Línea Nro. Línea
3561 stevensc 1
import React, { useMemo, useState } from 'react';
2
import { useSelector } from 'react-redux';
3
import { styled } from '@mui/material';
2838 stevensc 4
 
3561 stevensc 5
import Widget from '@components/UI/Widget';
6
import SurveyForm from '@components/survey-form/SurveyForm';
7
import FeedDescription from './feed-description';
2838 stevensc 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
  }
3561 stevensc 29
}));
3099 stevensc 30
 
2838 stevensc 31
export default function FeedContent({ id }) {
3561 stevensc 32
  const [showModal, setShowModal] = useState(false);
2838 stevensc 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
3561 stevensc 51
  } = useSelector(({ feed }) => feed.feeds.byId[id]);
2838 stevensc 52
 
53
  const answers = useMemo(() => {
3561 stevensc 54
    if (contentType !== 'fast-survey') return [];
3017 stevensc 55
    return Array.from(
56
      { length: description.number_of_answers },
57
      (_, i) => description[`answer${i + 1}`]
3561 stevensc 58
    );
59
  }, [description, contentType]);
2838 stevensc 60
 
61
  const votes = useMemo(() => {
3561 stevensc 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}`]
3561 stevensc 66
    );
67
  }, [description, contentType]);
2838 stevensc 68
 
3561 stevensc 69
  const toggleModal = () => setShowModal(!showModal);
2838 stevensc 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} />
3561 stevensc 88
            <video poster={imagePreview} src={video} onClick={toggleModal} controls />
2838 stevensc 89
          </>
3561 stevensc 90
        );
2838 stevensc 91
      }
92
      case 'image': {
93
        return (
94
          <>
95
            <FeedDescription description={description} />
96
            <Widget.Media src={image} onClick={toggleModal} />
97
          </>
3561 stevensc 98
        );
2838 stevensc 99
      }
100
      case 'document': {
101
        return (
102
          <>
103
            <FeedDescription description={description} />
104
            <a href={document} target='_blank' rel='noreferrer'>
105
              <img className='pdf' src='/images/extension/pdf.png' alt='pdf' />
106
            </a>
107
          </>
3561 stevensc 108
        );
2838 stevensc 109
      }
110
      case 'fast-survey': {
111
        return (
3015 stevensc 112
          <SurveyForm
3017 stevensc 113
            voteUrl={voteUrl}
114
            active={Boolean(description.active)}
3015 stevensc 115
            question={description.question}
3017 stevensc 116
            time={description.time_remaining}
117
            resultType={description.result_type}
3015 stevensc 118
            answers={answers}
119
            votes={votes}
120
          />
3561 stevensc 121
        );
2838 stevensc 122
      }
123
      case 'shared': {
124
        return (
125
          <>
126
            <FeedDescription description={description} />
3266 stevensc 127
            <Widget styles={{ width: 'inherit' }}>
3561 stevensc 128
              <Widget.Header avatar={sharedImage} title={sharedName} subheader={sharedTimeElapse} />
3099 stevensc 129
              <FeedContainer>
2838 stevensc 130
                {renderContent({
131
                  type: sharedContentType,
132
                  description: sharedFeedDescription,
133
                  document: sharedFileDocument,
134
                  image: sharedFileImage,
135
                  video: sharedFileVideo,
136
                  imagePreview: sharedFileImagePreview
137
                })}
3099 stevensc 138
              </FeedContainer>
2838 stevensc 139
            </Widget>
140
          </>
3561 stevensc 141
        );
2838 stevensc 142
      }
143
      default:
3561 stevensc 144
        return <FeedDescription description={description} />;
2838 stevensc 145
    }
3561 stevensc 146
  };
2838 stevensc 147
 
148
  return (
3099 stevensc 149
    <FeedContainer>
3561 stevensc 150
      {description && <FeedDescription description={description} />}
151
      {contentType === 'video' && (
152
        <video poster={imagePreview} src={video} onClick={toggleModal} controls />
153
      )}
154
      {contentType === 'image' && <Widget.Media src={image} onClick={toggleModal} />}
155
      {contentType === 'document' && (
156
        <a href={document} target='_blank' rel='noreferrer'>
157
          <img className='pdf' src='/images/extension/pdf.png' alt='pdf' />
158
        </a>
159
      )}
160
      {contentType === 'fast-survey' && (
161
        <SurveyForm
162
          voteUrl={voteUrl}
163
          active={Boolean(description.active)}
164
          question={description.question}
165
          time={description.time_remaining}
166
          resultType={description.result_type}
167
          result={description.result}
168
          answers={answers}
169
          votes={votes}
170
        />
171
      )}
172
      {contentType === 'shared' && (
173
        <Widget styles={{ width: 'inherit' }}>
174
          <Widget.Header avatar={sharedImage} title={sharedName} subheader={sharedTimeElapse} />
175
          <FeedContainer>
176
            {renderContent({
177
              type: sharedContentType,
178
              description: sharedFeedDescription,
179
              document: sharedFileDocument,
180
              image: sharedFileImage,
181
              video: sharedFileVideo,
182
              imagePreview: sharedFileImagePreview
183
            })}
184
          </FeedContainer>
185
        </Widget>
186
      )}
187
 
2838 stevensc 188
      {renderContent({
189
        description,
190
        image,
191
        document,
192
        video,
193
        imagePreview,
194
        voteUrl,
2841 stevensc 195
        type: sharedName ? 'shared' : contentType,
2838 stevensc 196
        sharedName,
197
        sharedImage,
198
        sharedTimeElapse
199
      })}
3099 stevensc 200
    </FeedContainer>
3561 stevensc 201
  );
2838 stevensc 202
}