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 { axios } from '@app/utils'

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'

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.data)

  }

  useEffect(() => {

    if (!data) return

    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