Proyectos de Subversion LeadersLinked - SPA

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

import Modal from '../UI/modal/Modal';
import Feed, { renderContent } from '../dashboard/linkedin/feed-template/Feed';
import WidgetWrapper from '../widgets/WidgetLayout';
import { useSelector } from 'react-redux';

const StyledBody = styled(WidgetWrapper.Body)`
  & > p,
  & > a {
    padding: 0 1rem;
  }
  & > img {
    width: 100%;
    max-height: 60vh;
    object-fit: contain;
  }
  & > video {
    width: 100%;
    overflow: hidden;
    object-fit: scale-down;
    background-color: black;
    display: block;
    max-height: 80vh;
  }
`;

const FeedModal = ({ show = false, onClose = () => {}, id }) => {
  const feed = useSelector(({ feed }) => feed.feeds.byId[id]);
  const {
    owner_file_image,
    owner_file_video,
    owner_file_image_preview,
    owner_file_document,
    shared_content_type,
    owner_description,
    shared_name,
    shared_image,
    shared_time_elapse,
    shared_description,
    shared_file_video,
    shared_file_image_preview,
    shared_file_image,
    shared_file_document,
    owner_name,
    owner_image,
    owner_time_elapse,
    owner_url,
    feed_unique,
    feed_content_type,
    feed_vote_url,
    shared_url
  } = feed;

  return (
    <Modal show={show} onClose={onClose} showFooter={false}>
      <Feed.Header
        image={owner_image}
        name={owner_name}
        timeElapsed={owner_time_elapse}
        viewUrl={owner_url}
        feedUnique={feed_unique}
      />
      <StyledBody>
        {renderContent({
          description: owner_description,
          image: owner_file_image,
          document: owner_file_document,
          video: owner_file_video,
          imagePreview: owner_file_image_preview,
          type: shared_name ? 'shared' : feed_content_type,
          voteUrl: feed_vote_url,
          sharedName: shared_name,
          sharedImage: shared_image,
          sharedTimeElapse: shared_time_elapse,
          sharedDescription: shared_description,
          sharedFileVideo: shared_file_video,
          sharedFileImagePreview: shared_file_image_preview,
          sharedFileImage: shared_file_image,
          sharedFileDocument: shared_file_document,
          sharedContentType: shared_content_type,
          sharedUrl: shared_url
        })}
      </StyledBody>
    </Modal>
  );
};

export default FeedModal;