Proyectos de Subversion LeadersLinked - SPA

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

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

import { Avatar } from '@mui/material'

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 StyledContainer from '../WidgetLayout'

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

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

const StyledProfileContainer = styled(StyledContainer)`

  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 getAdminUrl = async () => {

    try {

      const { data } = await axios.get('/backend/signin-admin')

      if (data.success) window.open(data.data)

    } catch (error) {

      console.log('>>: error > ', error)

    }

  }

  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} />

    </StyledProfileContainer>

  )

}