Proyectos de Subversion LeadersLinked - SPA

Rev

Rev 2388 | Rev 2390 | Ir a la última revisión | | Comparar con el anterior | Ultima modificación | Ver Log |

Rev Autor Línea Nro. Línea
2388 stevensc 1 
import React, { useEffect, useState } from 'react'
2 
import { useHistory, useParams } from 'react-router-dom'
2369 stevensc 3 
import { useSelector } from 'react-redux'
2362 stevensc 4 
import { Container, Grid } from '@mui/material'
2368 stevensc 5 
import parse from 'html-react-parser'
2362 stevensc 6 
 
2385 stevensc 7 
import useFetch from '@app/hooks/useFetch'
8 
 
2362 stevensc 9 
import Widget from '@app/components/UI/Widget'
2368 stevensc 10 
import SurveyForm from '@app/components/survey-form/SurveyForm'
2369 stevensc 11 
import AuthNavbar from '@app/components/UI/auth-navbar'
2388 stevensc 12 
import { axios } from '@app/utils'
2362 stevensc 13 
 
14 
function ShorterPostPage() {
2385 stevensc 15 
  const { id } = useParams()
2388 stevensc 16 
  const history = useHistory()
2385 stevensc 17 
  const { data } = useFetch(`/shorter/${id}`, null)
2388 stevensc 18 
  const [post, setPost] = useState({})
19 
  const { isAuth } = useSelector((state) => state.auth)
2368 stevensc 20 
 
2388 stevensc 21 
  const getPost = async (url) => {
22 
    return await axios.get(url).then((res) => res.data)
23 
  }
2385 stevensc 24 
 
2388 stevensc 25 
  useEffect(() => {
2389 stevensc 26 
    if (data?.redirect) return history.replace(data?.url)
2388 stevensc 27 
 
2389 stevensc 28 
    getPost(data?.url)
2388 stevensc 29 
      .then((post) => setPost(post))
30 
      .catch((error) => console.log(error))
31 
  }, [data])
32 
 
2362 stevensc 33 
  return (
2369 stevensc 34 
    <>
35 
      {!isAuth ? <AuthNavbar /> : null}
36 
      <Container>
37 
        <Grid
38 
          container
39 
          sx={{
40 
            display: 'flex',
41 
            justifyContent: 'center',
42 
            alignItems: 'center'
43 
          }}
44 
        >
45 
          <Grid item xs={12} md={8}>
46 
            <Widget>
2388 stevensc 47 
              <Widget.Header
48 
                avatar={post.shared_image}
49 
                title={post.shared_title}
50 
              />
2362 stevensc 51 
 
2369 stevensc 52 
              <Widget.Body>
2385 stevensc 53 
                <FeedContent
54 
                  type='description'
2388 stevensc 55 
                  content={{ owner_description: post.shared_description ?? '' }}
2385 stevensc 56 
                />
2369 stevensc 57 
              </Widget.Body>
58 
            </Widget>
59 
          </Grid>
2362 stevensc 60 
        </Grid>
2369 stevensc 61 
      </Container>
62 
    </>
2362 stevensc 63 
  )
64 
}
65 
 
2385 stevensc 66 
const FeedContent = ({ type, content }) => {
2368 stevensc 67 
  const renderContent = ({
68 
    owner_description,
69 
    owner_file_image_preview,
70 
    owner_file_video,
71 
    owner_file_image,
72 
    shared_name,
73 
    shared_image,
74 
    shared_time_elapse,
75 
    feed_vote_url
76 
  }) => {
2385 stevensc 77 
    switch (type) {
2368 stevensc 78 
      case 'fast-survey': {
79 
        const answers = []
80 
        const votes = []
81 
 
82 
        for (let i = 1; i < 6; i++) {
83 
          answers.push(owner_description[`answer${i}`])
84 
          votes.push(owner_description[`votes${i}`])
85 
        }
86 
 
87 
        return (
88 
          <SurveyForm
89 
            active={owner_description.active}
90 
            question={owner_description.question}
91 
            answers={answers}
92 
            votes={votes}
93 
            time={owner_description.time_remaining}
94 
            voteUrl={feed_vote_url}
95 
            resultType={owner_description.result_type}
96 
          />
97 
        )
98 
      }
99 
 
100 
      case 'video': {
101 
        return (
102 
          <>
103 
            {parse(owner_description ?? '')}
104 
            <video controls poster={owner_file_image_preview}>
105 
              <source src={owner_file_video} />
106 
            </video>
107 
          </>
108 
        )
109 
      }
110 
 
111 
      case 'image': {
112 
        return (
113 
          <>
114 
            {parse(owner_description ?? '')}
115 
            <img src={owner_file_image} loading='lazy' />
116 
          </>
117 
        )
118 
      }
119 
 
120 
      case 'document': {
121 
        return (
122 
          <>
123 
            {parse(owner_description ?? '')}
124 
            <a href={document} target='_blank' rel='noreferrer'>
125 
              <img className='pdf' src='/images/extension/pdf.png' alt='pdf' />
126 
            </a>
127 
          </>
128 
        )
129 
      }
130 
 
131 
      case 'shared': {
132 
        return (
133 
          <>
134 
            {parse(owner_description ?? '')}
135 
            <Widget>
136 
              <Widget.Header
137 
                avatar={shared_image}
138 
                title={shared_name}
139 
                subheader={shared_time_elapse}
140 
              />
141 
 
142 
              <Widget.Body>
143 
                {renderContent({
144 
                  owner_description,
145 
                  owner_file_image_preview,
146 
                  owner_file_video,
147 
                  owner_file_image,
148 
                  shared_name,
149 
                  shared_image,
150 
                  shared_time_elapse,
151 
                  feed_vote_url
152 
                })}
153 
              </Widget.Body>
154 
            </Widget>
155 
          </>
156 
        )
157 
      }
158 
 
159 
      default: {
2385 stevensc 160 
        return parse(owner_description)
2368 stevensc 161 
      }
162 
    }
163 
  }
164 
 
2385 stevensc 165 
  return <>{renderContent(content)}</>
2368 stevensc 166 
}
167 
 
2362 stevensc 168 
export default ShorterPostPage