Avatar.js

/*Copyright (C) 2019 Centro de Computacao Cientifica e Software Livre
Departamento de Informatica - Universidade Federal do Parana

This file is part of Plataforma Integrada MEC.

Plataforma Integrada MEC is free software: you can redistribute it and/or modify
it under the terms of the GNU Affero General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.

Plataforma Integrada MEC is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
GNU Affero General Public License for more details.

You should have received a copy of the GNU Affero General Public License
along with Plataforma Integrada MEC.  If not, see <http://www.gnu.org/licenses/>.*/
import React, {useState, useContext, useEffect} from 'react';
import styled from 'styled-components'
import { Store } from '../../Store.js';
import { apiDomain} from '../../env';
import noAvatar from "../../img/default_profile.png";
import ModalAlterarAvatar from '../ModalAlterarAvatar/ModalAlterarAvatar.js'

export default function ProfileAvatar (props) {
    // eslint-disable-next-line
    const {state, dispatch} = useContext(Store)

    const [currentAvatar, setAvatar] = useState(state.currentUser.avatar)

    const [hoverBool, toggleHover] = React.useState(false)
    const handleToggleHover = () => {toggleHover(!hoverBool)}

    const [open, toggleOpen] = useState(false)
    const controlModal = () => {toggleOpen(!open)}

    useEffect(() => {setAvatar(state.currentUser.avatar)}, [state.currentUser.avatar])

    return (
        <>
            <ModalAlterarAvatar
                open={open}
                handleClose={controlModal}
                userAvatar={currentAvatar}
                id={props.id}
            />

            <ProfileAvatarDiv onMouseEnter={handleToggleHover} onMouseLeave={handleToggleHover} onClick={controlModal}>
                <img src={currentAvatar ? apiDomain + currentAvatar : noAvatar} alt = "user avatar" style={{height : "inherit", width : "inherit", border:"0", verticalAlign:"middle"}}/>
                <ChangeAvatarDiv  style={ {display : hoverBool ? 'flex' : 'none'}}>
                    <span>Alterar Foto</span>
                </ChangeAvatarDiv>
            </ProfileAvatarDiv>

        </>
    )
}

const ProfileAvatarDiv = styled.div`
    bottom : -55px;
    left : 60px;
    border-radius : 100%;
    position : absolute;
    width : 150px;
    height : 150px;
    overflow : hidden;
    border : 8px solid #fff;
    outline : 0;
    cursor : pointer;
    background-color : #a5a5a5;
`

const ChangeAvatarDiv = styled.div`
  height : 40px;
  position: absolute;
  width : 100%;
  bottom : 0;
  display : flex;
  background-color : #000;
  color : #fff;
  justify-content : center;
`