-
Lucas Eduardo Schoenfelder authoredLucas Eduardo Schoenfelder authored
UserPage.js 16.13 KiB
/*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 { Container } from 'react-grid-system'
import Button from '@material-ui/core/Button';
import IconButton from '@material-ui/core/IconButton';
import PhotoCamera from '@material-ui/icons/PhotoCamera';
import Tooltip from '@material-ui/core/Tooltip';
import Breadcrumbs from '@material-ui/core/Breadcrumbs';
import {Link} from 'react-router-dom';
import Popover from '@material-ui/core/Popover';
import { Store } from '../Store.js';
import EditIcon from '@material-ui/icons/Edit';
import CheckDecagram from '../img/check-decagram-gray.svg'
import Tabs from '@material-ui/core/Tabs';
import Tab from '@material-ui/core/Tab';
import Paper from '@material-ui/core/Paper';
import TabPanelAtividades from '../Components/TabPanels/TabPanelAtividades.js'
import TabPanelMeusRecursos from '../Components/TabPanels/TabPanelMeusRecursos.js'
import TabPanelFavoritos from '../Components/TabPanels/TabPanelFavoritos.js'
import TabPanelColecoes from '../Components/TabPanels/TabPanelColecoes.js'
import TabPanelRede from '../Components/TabPanels/TabPanelRede.js'
import axios from 'axios'
import {apiUrl} from '../env';
import ModalAlterarAvatar from '../Components/ModalAlterarAvatar.js'
export default function UserPage (props){
const {state, dispatch} = useContext(Store)
const [hoverAlterarFoto, handleAlterarFoto] = React.useState(false)
const [tabValue, setTabValue] = useState(
Number(props.location.state) || 0
);
const [tabs, setTabs] = useState([
'Atividades', 'Meus Recursos', 'Favoritos', 'Coleções', 'Rede'
])
const user = localStorage.getItem('@portalmec/username')
const id = localStorage.getItem('@portalmec/id')
const [modalOpen, handleModal] = useState(false)
const config = {
headers : {
'Accept': 'application/json',
'Content-Type': 'application/json',
'Access-Token': sessionStorage.getItem('@portalmec/accessToken'),
'Client': sessionStorage.getItem('@portalmec/clientToken'),
'Uid': sessionStorage.getItem('@portalmec/uid'),
'Host': 'api.portalmec.c3sl.ufpr.br',
'Cookie': ''
}
}
const modalControl = () => {
handleModal(!modalOpen) }
const handleHoverAlterarFoto = () => {
handleAlterarFoto(!hoverAlterarFoto)
}
useEffect( () => {
axios.get( (`${apiUrl}/users/` + id), {
'Accept': 'application/json',
'Content-Type': 'application/json',
'Host': 'api.portalmec.c3sl.ufpr.br',
'Cookie': ''
})
.then( (response) => {
dispatch ({
type : 'USER_ACCESSED_USER_PAGE',
set: {
id : response.data.id,
email : response.data.email,
username : response.data.name,
education : response.data.education,
userAvatar : response.data.avatar,
userCover : response.data.cover,
followCount : response.data.follow_count,
collectionsCount: response.data.collections_count,
}
})
},
(error) => {
console.log('error while running ComponentDidMout')
}
)
}, [])
const redirect = () => {
props.history.push('/')
}
const handleChangeTab = (event, newValue) => {
setTabValue(newValue)
}
const updateCover = (selectorFiles : FileList) => {
console.log(selectorFiles)
console.log(selectorFiles[0])
}
return (
<>
<link href="https://fonts.googleapis.com/css?family=Roboto:100,400,500&display=swap" rel="stylesheet"/>
{
state.userIsLoggedIn?
(
[
<React.Fragment>
<ModalAlterarAvatar
open={modalOpen}
handleClose={modalControl}
/>
<HeaderDiv>
<ContainerNoPad>
<BreadcrumbsDiv>
<StyledBreadcrumbs>
<Link to="/" style={{color:"#00bcd4", textDecoration:"none"}}>
Página Inicial
</Link>
<span>
Minha área
</span>
<span> {tabs[tabValue]}
</span>
</StyledBreadcrumbs>
</BreadcrumbsDiv>
<div style={{display:"flex", flexDirection:"column"}}>
<MainContainerDesktop maxwidth="xl">
<Paper elevation={3} style= {{width:"max-content"}}>
<ContainerUserProfile>
<HeaderContainer>
<CoverContainer>
<img src={state.currentUser.userCover} alt = "user cover avatar" style= {{width:"100%", height:"100%", objectFit : "cover" }}/>
<input accept="image/*" style = {{display:"none"}} id="icon-button-file" type="file" onChange={(e) => updateCover(e.target.files)}/>
<label htmlFor="icon-button-file">
<Tooltip title={<span style={{fontSize:"14px", overflow:"hidden", transition:"all .5s ease"}}>ALTERAR CAPA</span>} placement="left">
<IconButton style={{position:"absolute",right:"0",top:"0",color:"#fff"}}color="primary" aria-label="upload picture" component="span">
<PhotoCamera />
</IconButton>
</Tooltip>
</label>
</CoverContainer>
<ProfileAvatarDiv onMouseEnter={handleHoverAlterarFoto} onMouseLeave={handleHoverAlterarFoto} onClick={modalControl}>
<img src={state.currentUser.userAvatar} alt = "user avatar" style={{border:"0", verticalAlign:"middle"}}/>
<ChangeAvatarDiv style={ {display : hoverAlterarFoto ? 'flex' : 'none'}}>
<span>Alterar Foto</span>
</ChangeAvatarDiv>
</ProfileAvatarDiv>
<UserProfileInfoDiv>
<p style={{fontSize:"28px", color:"#fff", marginBottom:"2px", fontWeight:"500", backgroundColor:"#77777796", backgroundRadius : "8px"}}>{user}</p>
<div style={{fontSize:"14px", color:"#fff", marginBottom:"2px"}}>
<p>{state.currentUser.education}</p>
</div>
</UserProfileInfoDiv>
<EditProfileAnchor to="/editarperfil">
<Button>
<EditIcon style={{marginRight:"5px", verticalAlign:"middle"}}/> <span>EDITAR PERFIL</span>
</Button>
</EditProfileAnchor>
</HeaderContainer>
<CheckTeacherDiv>
<>
{
state.currentUser.isCollaborativeTeacher ?
(
[
<>
<img src={CheckDecagram} style={{color:"#00bcd4"}}/>
<span>Professor(a)</span>
</>
]
)
:
(
[
<p style={{fontSize:"15px", lineHeight:"22px", textAlign:"left", margin:"0 0 10px"}}>
<span style={{cursor:"pointer"}}>
<span style={{paddingRight:"5px"}}>
<img src={CheckDecagram}/>
</span>
Você é professor(a) e gostaria de publicar recursos?
<span style={{color:"#00bcd4"}}> SAIBA MAIS</span>
</span>
</p>
]
)
}
</>
</CheckTeacherDiv>
<RodapeDiv>
<NavBarContentContainer> <StyledTabs
value ={tabValue}
onChange ={handleChangeTab}
indicatorColor ="primary"
textColor ="primary"
variant = "scrollable"
scrollButtons = "auto"
TabIndicatorProps={{style : {background:"#00bcd4"}}}
>
<StyledTab label={tabs[0]}/>
<StyledTab label={tabs[1]}/>
<StyledTab label={tabs[2]}/>
<StyledTab label={tabs[3]}/>
<StyledTab label={tabs[4]}/>
</StyledTabs>
</NavBarContentContainer>
</RodapeDiv>
</ContainerUserProfile>
</Paper>
</MainContainerDesktop>
</div>
{tabValue === 0 && <TabPanelAtividades id={id} config={config}/>}
{tabValue === 1 && <TabPanelMeusRecursos id={id} config={config}/>}
{tabValue === 2 && <TabPanelFavoritos id={id} config={config}/>}
{tabValue === 3 && <TabPanelColecoes id={id} config={config}/>}
{tabValue === 4 && <TabPanelRede id={id} config={config}/>}
</ContainerNoPad>
</HeaderDiv>
</React.Fragment>
]
)
: (
<>
{redirect()}
</>
)
}
</>
)
}
export const HeaderDiv = styled.div`
background-color : #f4f4f4;
color : #666;
font-size : 14px;
line-height : 20px;
padding-bottom : 40px;
`
const ContainerNoPad = styled.div`
min-width : 1170px;
`
export const BreadcrumbsDiv = styled.div`
padding : 10px;
display : flex;
justify-content : center;
`
export const StyledBreadcrumbs = styled(Breadcrumbs)`
display : flex;
justify-content : flex-start;
max-width : 1170px;
span {
color : #a5a5a5;
}
`
const MainContainerDesktop = styled(Container)`
padding : 10px 0 8px 0;
.MuiContainer-maxWidthXl {
max-width : 1170px !important;
}
`
const ContainerUserProfile = styled(Container)`
padding : 0;
background-color : #fff;
margin-bottom: 30px;
width : 1170px;
margin-right : auto;
padding-left : 0 !important;
padding-right : 0 !important;
margin-left : auto;
`
const HeaderContainer = styled(Container)`
background-color : #afeeee;
position : relative;
`
const CoverContainer = styled(Container)`
height : 230px;
position : relative;
`
const ProfileAvatarDiv = styled.div`
bottom : -65px;
left : 60px;
border-radius : 100%;
position : absolute;
width : 150px;
height : 150px;
overflow : hidden;
border : 8px solid #fff;
outline : 0;
cursor : pointer;
`
export const ChangeAvatarDiv = styled.div`
height : 40px;
position: absolute;
width : 100%;
bottom : 0;
display : flex;
background-color : #000;
color : #fff;
justify-content : center;
`
const UserProfileInfoDiv = styled.div`
position : absolute;
bottom : 0;
left : 260px;
overflow : hidden;
margin-bottom : 20px;
`
const EditProfileAnchor = styled(Link)`
Button {
box-shadow : 0 2px 5px 0 rgba(0,0,0,.26);
background-color : #fafafa;
position : absolute;
right : 5px;
bottom : 0;
margin-bottom : 20px;
color : #666;
padding : 0 10px;
text-decoration : none; border-radius : 3px;
min-height : 36px;
min-width : 88px;
line-height : 36px;
border : 0;
display: inline-block;
text-align : center;
:hover{
background-color : #fafafa;
}
}
`
const CheckTeacherDiv = styled.div`
font-size : 14px;
padding-top : 10px;
padding-left : 250px;
margin-bottom : -10px;
color : #666 !important;
`
const RodapeDiv = styled.div`
justify-content : flex-end;
display : flex;
`
const NavBarContentContainer = styled(Container)`
background-color : #fff;
padding-bottom : 0;
overflow-x : hidden !important;
overflow-y : hid1den !important;
margin-right : 0 !important;
`
const StyledTabs = styled(Tabs)`
.MuiTab-textColorPrimary.Mui-selected {
color : #00bcd4 !important;
border-bottom-color : #00bcd4 !important;
}
.Mui-selected {
border-bottom-color : #00bcd4 !important;
}
`
const StyledTab = styled(Tab)`
.Mui-selected {
border-bottom-color : #00bcd4 !important;
}
.MuiTab-wrapper {
border-bottom-color : #00bcd4 !important;
}
`