Proyectos de Subversion LeadersLinked - SPA

import React, { useRef, useEffect } from 'react'

import { axios } from '../../../utils'

import { Avatar } from '@mui/material'

import { useHistory } from 'react-router-dom'

import { useDispatch } from 'react-redux'

import { addNotification } from '../../../redux/notification/notification.actions'

import MapOutlinedIcon from '@mui/icons-material/MapOutlined'

import ShareOutlinedIcon from '@mui/icons-material/ShareOutlined'

import VisibilityOutlinedIcon from '@mui/icons-material/VisibilityOutlined'

import styled from 'styled-components'

import Paraphrase from '../../UI/Paraphrase'

import WidgetWrapper from '../WidgetLayout'

import Options from '../../UI/Option'

const StyledProfileContainer = styled(WidgetWrapper)`

  padding: 10px;

  text-align: center;

`

const StyledProfileStatus = styled.div`

  display: flex;

  align-items: center;

  justify-content: space-around;

`

export default function ProfileInfo({

  image,

  name,

  description,

  visits,

  country,

  connections,

  linkAdmin,

  linkImpersonate

}) {

  const options = useRef([

    {

      label: 'Configuración de la cuenta',

      action: () => history.push('/account-settings')

    },

    {

      label: 'Política de privacidad',

      action: () => history.push('/privacy-policy')

    },

    { label: 'Política de cookies', action: () => history.push('/cookies') },

    { label: 'Cerrar sesión', action: () => history.push('/signout') }

  ])

  const history = useHistory()

  const dispatch = useDispatch()

  const getAdminUrl = () => {

    axios

      .get('/backend/signin-admin')

      .then(({ data: responseData }) => {

        const { data, success } = responseData

        if (!success) {

          throw new Error(data)

        }

        window.open(data)

      })

      .catch((err) => {

        dispatch(addNotification({ style: 'danger', msg: err.message }))

      })

  }

  useEffect(() => {

    if (linkAdmin)

      options.current.unshift({ label: 'Administración', action: getAdminUrl })

    if (linkImpersonate)

      options.current.unshift({

        label: 'Personificar otro usuario',

        action: () => history.push('/impersonate')

      })

  }, [])

  return (

    <StyledProfileContainer>

      <Avatar

        src={image}

        alt={`${name} profile-image`}

        sx={{ margin: '0 auto', width: 100, height: 100 }}

      />

      <h2>{name}</h2>

      <Paraphrase>{description}</Paraphrase>

      <StyledProfileStatus>

        <span>

          <VisibilityOutlinedIcon />

          {visits}

        </span>

        <span>

          <MapOutlinedIcon />

          {country}

        </span>

        <span>

          <ShareOutlinedIcon />

          {connections}

        </span>

      </StyledProfileStatus>

      <Options options={options.current} top='10px' right='10px' />

    </StyledProfileContainer>

  )

}