Proyectos de Subversion LeadersLinked - SPA

import React, { useEffect, useState } from 'react'
import { useHistory, useParams } from 'react-router-dom'
import { useSelector } from 'react-redux'
import { Container, Grid } from '@mui/material'
import parse from 'html-react-parser'

import useFetch from '@app/hooks/useFetch'

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

function ShorterPostPage() {
  const { id } = useParams()
  const history = useHistory()
  const { data } = useFetch(`/shorter/${id}`, null)
  const [post, setPost] = useState({})
  const { isAuth } = useSelector((state) => state.auth)

  const getPost = async (url) => {
    return await axios.get(url).then((res) => res.data)
  }

  useEffect(() => {
    if (data?.redirect) return history.replace(data?.url)

    getPost(data?.url)
      .then((post) => setPost(post))
      .catch((error) => console.log(error))
  }, [data])

  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.shared_image}
                title={post.shared_title}
              />

              <Widget.Body>
                <FeedContent
                  type='description'
                  content={{ owner_description: post.shared_description ?? '' }}
                />
              </Widget.Body>
            </Widget>
          </Grid>
        </Grid>
      </Container>
    </>
  )
}

const FeedContent = ({ type, content }) => {
  const renderContent = ({
    owner_description,
    owner_file_image_preview,
    owner_file_video,
    owner_file_image,
    shared_name,
    shared_image,
    shared_time_elapse,
    feed_vote_url
  }) => {
    switch (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_vote_url
                })}
              </Widget.Body>
            </Widget>
          </>
        )
      }

      default: {
        return parse(owner_description)
      }
    }
  }

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

export default ShorterPostPage