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)

  },

  '.MuiCard-root': {

    margin: theme.spacing(0, 1)

  },

  '& > p, & > span': {

    fontSize: '1rem',

    wordWrap: 'break-word',

    fontWeight: 'normal'

  },

  '& > img, & > video ': {

    width: '100%',

    maxHeight: '600px',

    objectFit: 'contain',

    position: 'relative',

    backgroundColor: '#000e'

  }

}));

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);

  const renderContent = ({

    description,

    image,

    document,

    video,

    imagePreview,

    voteUrl,

    sharedName,

    sharedImage,

    sharedTimeElapse,

    type

  }) => {

    switch (type) {

      case 'video': {

        return (

          <>

            <FeedDescription description={description} />

            <video poster={imagePreview} src={video} onClick={toggleModal} controls />

          </>

        );

      }

      case 'image': {

        return (

          <>

            <FeedDescription description={description} />

            <Widget.Media src={image} onClick={toggleModal} />

          </>

        );

      }

      case 'document': {

        return (

          <>

            <FeedDescription description={description} />

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

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

            </a>

          </>

        );

      }

      case 'fast-survey': {

        return (

          <SurveyForm

            voteUrl={voteUrl}

            active={Boolean(description.active)}

            question={description.question}

            time={description.time_remaining}

            resultType={description.result_type}

            answers={answers}

            votes={votes}

          />

        );

      }

      case 'shared': {

        return (

          <>

            <FeedDescription description={description} />

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

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

              <FeedContainer>

                {renderContent({

                  type: sharedContentType,

                  description: sharedFeedDescription,

                  document: sharedFileDocument,

                  image: sharedFileImage,

                  video: sharedFileVideo,

                  imagePreview: sharedFileImagePreview

                })}

              </FeedContainer>

            </Widget>

          </>

        );

      }

      default:

        return <FeedDescription description={description} />;

    }

  };

  return (

    <FeedContainer>

      {description && <FeedDescription description={description} />}

      {contentType === 'video' && (

        <video poster={imagePreview} src={video} onClick={toggleModal} controls />

      )}

      {contentType === 'image' && <Widget.Media src={image} onClick={toggleModal} />}

      {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>

            {renderContent({

              type: sharedContentType,

              description: sharedFeedDescription,

              document: sharedFileDocument,

              image: sharedFileImage,

              video: sharedFileVideo,

              imagePreview: sharedFileImagePreview

            })}

          </FeedContainer>

        </Widget>

      )}

      {renderContent({

        description,

        image,

        document,

        video,

        imagePreview,

        voteUrl,

        type: sharedName ? 'shared' : contentType,

        sharedName,

        sharedImage,

        sharedTimeElapse

      })}

    </FeedContainer>

  );

}