Skip to content
Snippets Groups Projects

Branch do lucas

Merged Branch do lucas
branchDoLucas into Develop
Merged Lucas Eduardo Schoenfelder requested to merge branchDoLucas into Develop
Viewing commit ac7d577f
Prev Next
Show latest version
3 files
+ 61
− 8
Compare changes
  • Side-by-side
  • Inline
Files
3
src/Pages/UserPage.js
+ 369
− 15
@@ -16,32 +16,386 @@ 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 from 'react';
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 = sessionStorage.getItem('@portalmec/username')
const id = sessionStorage.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={{height : "inherit", width : "inherit", 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()}
</>
)
}
</>
const maindDiv = styled.div`
)
}
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;
`
const breadcrumbsDiv = styled.div`
export const BreadcrumbsDiv = styled.div`
padding : 10px;
display : flex;
justify-content : center;
`
export const StyledBreadcrumbs = styled(Breadcrumbs)`
display : flex;
justify:content : center;
padding: 10px;
justify-content : flex-start;
max-width : 1170px;
span {
color : #a5a5a5;
}
`
export default function UserPage (props){
const MainContainerDesktop = styled(Container)`
padding : 10px 0 8px 0;
.MuiContainer-maxWidthXl {
max-width : 1170px !important;
}
`
return (
<mainDiv>
<breadcrumbsDiv>
<ol style={{listStyle:"none"}}>
<li><a href="/"><span>Página Principal</span> </a> </li>/<li><span>Minha área</span></li>/<li><span>Atividades</span></li>
</ol>
</breadcrumbsDiv>
</mainDiv>
);
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;
}
`