Proyectos de Subversion LeadersLinked - SPA

import React from 'react'
import { useSelector } from 'react-redux'
import { Container, Grid } from '@mui/material'
import parse from 'html-react-parser'

import Widget from '@app/components/UI/Widget'
import SurveyForm from '@app/components/survey-form/SurveyForm'
import AuthNavbar from '@app/components/UI/auth-navbar'

function ShorterPostPage() {
  const { isAuth } = useSelector((state) => state.auth)
  const post = {
    feed_unique: '664e1becdd052',
    feed_uuid: 'cb789433-8299-4a93-ab42-d0628a224187',
    feed_my_reaction: 'l',
    feed_delete_url: '/feed/delete/cb789433-8299-4a93-ab42-d0628a224187',
    feed_content_type: '',
    feed_reactions: [
      {
        total: 1,
        reaction: 'l'
      }
    ],
    feed_reactions_url:
      'https://dev-services.leaderslinked.com/feed/reactions/cb789433-8299-4a93-ab42-d0628a224187',
    feed_save_reaction_url:
      '/feed/save-reaction/cb789433-8299-4a93-ab42-d0628a224187',
    feed_highlighted: 0,
    feed_abuse_report_url: '',
    feed_delete_reaction_url:
      '/feed/delete-reaction/cb789433-8299-4a93-ab42-d0628a224187',
    feed_share_url:
      '/feed/share/cb789433-8299-4a93-ab42-d0628a224187/group/b294cd89-ebf4-427a-8d5e-332a3bf6924e',
    feed_share_external_url:
      'https://dev-services.leaderslinked.com/shorter/cb789433-8299-4a93-ab42-d0628a224187/generate/feed',
    feed_increment_external_counter_url:
      'https://dev-services.leaderslinked.com/share/type/feed/code/cb789433-8299-4a93-ab42-d0628a224187/user/e85129fa-18eb-4149-8640-fea9ae916cdc/timestamp/1716394988/rand/1496831637/password/87713bf90d8e3c4d3c70cf60e0703424/increment-external-counter',
    feed_vote_url: '',
    owner_url: '',
    owner_image:
      'https://dev-services.leaderslinked.com/storage/type/group/code/b294cd89-ebf4-427a-8d5e-332a3bf6924e/filename/group-image-65312ac078b8c.png/',
    owner_name: 'prueba',
    owner_description: '<p>New post</p>\r\n',
    owner_feed_type: 'g',
    owner_shared: 0,
    owner_external_shared: 0,
    owner_comments: 0,
    owner_time_elapse: '5 dias',
    comment_add_url: '/feed/comment/cb789433-8299-4a93-ab42-d0628a224187',
    comments: []
  }

  return (
    <>
      {!isAuth ? <AuthNavbar /> : null}
      <Container>
        <Grid
          container
          sx={{
            display: 'flex',
            justifyContent: 'center',
            alignItems: 'center'
          }}
        >
          <Grid item xs={12} md={8}>
            <Widget>
              <Widget.Header
                avatar={post.owner_image}
                title={post.owner_name}
                subheader={post.owner_time_elapse}
              />

              <Widget.Body>
                <FeedContent feed={post} />
              </Widget.Body>
            </Widget>
          </Grid>
        </Grid>
      </Container>
    </>
  )
}

const FeedContent = ({ feed }) => {
  const renderContent = ({
    owner_description,
    owner_file_image_preview,
    owner_file_video,
    owner_file_image,
    shared_name,
    shared_image,
    shared_time_elapse,
    feed_content_type,
    feed_vote_url
  }) => {
    switch (feed_content_type) {
      case 'fast-survey': {
        const answers = []
        const votes = []

        for (let i = 1; i < 6; i++) {
          answers.push(owner_description[`answer${i}`])
          votes.push(owner_description[`votes${i}`])
        }

        return (
          <SurveyForm
            active={owner_description.active}
            question={owner_description.question}
            answers={answers}
            votes={votes}
            time={owner_description.time_remaining}
            voteUrl={feed_vote_url}
            resultType={owner_description.result_type}
          />
        )
      }

      case 'video': {
        return (
          <>
            {parse(owner_description ?? '')}
            <video controls poster={owner_file_image_preview}>
              <source src={owner_file_video} />
            </video>
          </>
        )
      }

      case 'image': {
        return (
          <>
            {parse(owner_description ?? '')}
            <img src={owner_file_image} loading='lazy' />
          </>
        )
      }

      case 'document': {
        return (
          <>
            {parse(owner_description ?? '')}
            <a href={document} target='_blank' rel='noreferrer'>
              <img className='pdf' src='/images/extension/pdf.png' alt='pdf' />
            </a>
          </>
        )
      }

      case 'shared': {
        return (
          <>
            {parse(owner_description ?? '')}
            <Widget>
              <Widget.Header
                avatar={shared_image}
                title={shared_name}
                subheader={shared_time_elapse}
              />

              <Widget.Body>
                {renderContent({
                  owner_description,
                  owner_file_image_preview,
                  owner_file_video,
                  owner_file_image,
                  shared_name,
                  shared_image,
                  shared_time_elapse,
                  feed_content_type,
                  feed_vote_url
                })}
              </Widget.Body>
            </Widget>
          </>
        )
      }

      default: {
        return parse(owner_description ?? '')
      }
    }
  }

  return <>{renderContent(feed)}</>
}

export default ShorterPostPage