Proyectos de Subversion LeadersLinked - SPA

import React, { useMemo, useState } from 'react';

import { useSelector } from 'react-redux';

import { styled } from '@mui/material';

import Widget from '@components/UI/Widget';

import SurveyForm from '@components/survey-form/SurveyForm';

import FeedDescription from './feed-description';

const FeedContainer = styled(Widget.Body)(({ theme }) => ({

  padding: 0,

  '& > *:not(img, video, .MuiCard-root)': {

    padding: theme.spacing(0, 1)

  },

  '& > p, & > span': {

    fontSize: '1rem',

    wordWrap: 'break-word',

    fontWeight: 'normal'

  },

  '& > img, & > video ': {

    width: '100%',

    maxHeight: '600px',

    objectFit: 'contain',

    position: 'relative'

  }

}));

export default function FeedContent({ id }) {

  const [showModal, setShowModal] = useState(false);

  const {

    owner_description: description,

    owner_file_image: image,

    owner_file_document: document,

    owner_file_video: video,

    owner_file_image_preview: imagePreview,

    feed_vote_url: voteUrl,

    feed_content_type: contentType,

    shared_name: sharedName,

    shared_image: sharedImage,

    shared_time_elapse: sharedTimeElapse,

    shared_description: sharedFeedDescription,

    shared_file_video: sharedFileVideo,

    shared_file_image_preview: sharedFileImagePreview,

    shared_file_image: sharedFileImage,

    shared_file_document: sharedFileDocument,

    shared_content_type: sharedContentType

  } = useSelector(({ feed }) => feed.feeds.byId[id]);

  const answers = useMemo(() => {

    if (contentType !== 'fast-survey') return [];

    return Array.from(

      { length: description.number_of_answers },

      (_, i) => description[`answer${i + 1}`]

    );

  }, [description, contentType]);

  const votes = useMemo(() => {

    if (contentType !== 'fast-survey') return [];

    return Array.from(

      { length: description.number_of_votes ?? 0 },

      (_, i) => description[`votes${i + 1}`]

    );

  }, [description, contentType]);

  const toggleModal = () => setShowModal(!showModal);

  return (

    <FeedContainer>

      {description && contentType !== 'fast-survey' && (

        <FeedDescription description={description} />

      )}

      {contentType === 'video' && (

        <video

          poster={imagePreview}

          src={video}

          onClick={toggleModal}

          preload='none'

          controls

          controlsList='nodownload'

        />

      )}

      {contentType === 'image' && (

        <img src={image} onClick={toggleModal} loading='lazy' width='100%' height='100%' />

      )}

      {contentType === 'document' && (

        <a href={document} target='_blank' rel='noreferrer'>

          <img className='pdf' src='/images/extension/pdf.png' alt='pdf' />

        </a>

      )}

      {contentType === 'fast-survey' && (

        <SurveyForm

          voteUrl={voteUrl}

          active={Boolean(description.active)}

          question={description.question}

          time={description.time_remaining}

          resultType={description.result_type}

          result={description.result}

          answers={answers}

          votes={votes}

        />

      )}

      {contentType === 'shared' && (

        <Widget styles={{ width: 'inherit' }}>

          <Widget.Header avatar={sharedImage} title={sharedName} subheader={sharedTimeElapse} />

          <FeedContainer>

            <FeedDescription description={sharedFeedDescription} />

            {sharedContentType === 'video' && (

              <video

                poster={sharedFileImagePreview}

                src={sharedFileVideo}

                onClick={toggleModal}

                controls

                preload='none'

                controlsList='nodownload'

              />

            )}

            {sharedContentType === 'image' && (

              <img src={sharedFileImage} onClick={toggleModal} loading='lazy' width='100%' />

            )}

            {sharedContentType === 'document' && (

              <a href={sharedFileDocument} target='_blank' rel='noreferrer'>

                <img className='pdf' src='/images/extension/pdf.png' alt='pdf' />

              </a>

            )}

          </FeedContainer>

        </Widget>

      )}

    </FeedContainer>

  );

}