diff --git a/src/Pages/UserPage.js b/src/Pages/UserPage.js
index ed930d61e1c02b503d3fa944e67633bb8c0d5728..4f84e9df5007c7bf33818afac6072a4a8f51ef5b 100644
--- a/src/Pages/UserPage.js
+++ b/src/Pages/UserPage.js
@@ -18,126 +18,26 @@ 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 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 CustomizedBreadcrumbs from '../Components/TabPanels/Breadcrumbs.js'
-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 TabPanelAtividades from '../Components/TabPanels/UserPageTabs/PanelAtividades.js'
+import TabPanelMeusRecursos from '../Components/TabPanels/UserPageTabs/PanelMeusRecursos.js'
+import TabPanelFavoritos from '../Components/TabPanels/UserPageTabs/PanelFavoritos.js'
+import TabPanelColecoes from '../Components/TabPanels/UserPageTabs/PanelColecoes.js'
+import TabPanelRede from '../Components/TabPanels/UserPageTabs/PanelRede.js'
import TabPanelStatusEConquistas from '../Components/TabPanels/TabPanelStatusEConquistas.js'
import TabPanelCuradoria from '../Components/TabPanels/UserPageTabs/PanelCuradoria.js'
-
import axios from 'axios'
import {apiUrl, apiDomain} from '../env';
-import ModalAlterarAvatar from '../Components/ModalAlterarAvatar.js'
import Grid from '@material-ui/core/Grid';
-import noAvatar from "../img/default_profile.png";
-import {HeaderContainer, UserProfileContainer, UserProfileInfoDiv, CoverContainer, CheckTeacherDiv, StyledTabs, RodapeDiv, NavBarContentContainer, BackgroundDiv} from '../Components/TabPanels/StyledComponents.js'
-
-const PageCover = (currentCover, updateCover) => {
- //displays current user cover and lets them upload a new cover
- //on accepting file input, calls coverModal to handle further customization
- return (
- <CoverContainer>
- {currentCover && <img src={apiDomain + currentCover} alt = '' style= {{width:"100%", height:"100%", objectFit : "cover" }}/>}
- <input accept="image/*" style = {{display:"none"}} id="icon-button-file" type="file" onChange={(e) => updateCover(e)}/>
- <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>
- )
-}
-
-const ProfileAvatar = (currentAvatar, hoverTrue, handleHoverAlterarFoto, modalControl) => {
- //display current user avatar and lets them upload a new one
- //on click, calls AvatarModal to handle file selection
- return (
- <ProfileAvatarDiv onMouseEnter={handleHoverAlterarFoto} onMouseLeave={handleHoverAlterarFoto} onClick={modalControl}>
- <img src={currentAvatar ? apiDomain + currentAvatar : noAvatar} alt = "user avatar" style={{height : "inherit", width : "inherit", border:"0", verticalAlign:"middle"}}/>
- <ChangeAvatarDiv style={ {display : hoverTrue ? 'flex' : 'none'}}>
- <span>Alterar Foto</span>
- </ChangeAvatarDiv>
- </ProfileAvatarDiv>
- )
-}
-
-const UserProfileInfo = (user, education) => {
- return (
- <UserProfileInfoDiv>
- <p style={{fontSize:"28px", color:"#fff", paddingTop:"5px", paddingBottom:"5px", fontWeight:"500", backgroundColor:"#77777796", borderRadius : "5px"}}>{user}</p>
- <div style={{fontSize:"14px", color:"#fff", marginBottom:"2px"}}>
- <p>{education}</p>
- </div>
- </UserProfileInfoDiv>
- )
-}
-
-const EditProfileButton = () => {
- const {state} = React.useContext(Store)
- return (
- <EditProfileAnchor to="/editarperfil">
- <Button>
- {state.windowSize.width >=900 ?
- (
- <React.Fragment>
- <EditIcon style={{marginRight:"5px", verticalAlign:"middle"}}/> <span>EDITAR PERFIL</span>
- </React.Fragment>
- )
- :
- (
- <EditIcon style={{marginRight:"5px", verticalAlign:"middle"}}/>
- )
- }
- </Button>
- </EditProfileAnchor>
- )
-}
-
-const SubmitterStatus = (status) => {
- let text;
- switch (status) {
- case 'requested':
- text = "Verificando cadastro de professor(a)"
- break;
- case 'accepted':
- text = "Professor(a)"
- break;
- default:
- text = "Você é professor(a) e gostaria de publicar recursos?"
- }
-
- return (
- <React.Fragment>
- <p style={{fontSize:"15px", lineHeight:"22px", textAlign:"left", margin:"0 0 10px"}}>
- <span style={{cursor:"pointer"}}>
- <span style={{paddingRight:"5px"}}>
- <img src={CheckDecagram}/>
- </span>
- {text}
- <span style={{color:"#00bcd4"}}> SAIBA MAIS</span>
- </span>
- </p>
- </React.Fragment>
- )
-
-}
+import {HeaderContainer, UserProfileContainer, CheckTeacherDiv, StyledTabs, RodapeDiv, NavBarContentContainer, BackgroundDiv} from '../Components/TabPanels/StyledComponents.js'
+import Cover from '../Components/UserPageComponents/Cover.js'
+import ProfileAvatar from '../Components/UserPageComponents/Avatar.js'
+import UserInfo from '../Components/UserPageComponents/UserInfo.js'
+import EditProfileButton from '../Components/UserPageComponents/EditProfileButton.js'
+import SubmitterStatus from '../Components/UserPageComponents/SubmitterStatus.js'
const GetHeaderConfig = () => {
@@ -157,26 +57,16 @@ const GetHeaderConfig = () => {
export default function UserPage (props){
const {state, dispatch} = useContext(Store)
- const [hoverAlterarFoto, handleAlterarFoto] = React.useState(false)
+ const id = state.currentUser.id
+
const [tabValue, setTabValue] = useState(
Number(props.location.state) || 0
);
const [tabs, setTabs] = useState([
- 'Atividades', 'Meus Recursos', 'Favoritos', 'Coleções', 'Rede'
+ 'Atividades', 'Status e Conquistas', 'Meus Recursos', 'Favoritos', 'Coleções', 'Rede'
])
- {/*sessionStorage.getItem('@portalmec/username')*/}
- const user = state.currentUser.username
- {/*sessionStorage.getItem('@portalmec/id')*/}
- const id = state.currentUser.id
- const [modalOpen, handleModal] = useState(false)
- const [coverImg, setCoverImg] = useState(state.currentUser.userCover)
-
- const modalControl = () => {
- handleModal(!modalOpen)
- }
-
- const handleHoverAlterarFoto = () => {
- handleAlterarFoto(!hoverAlterarFoto)
+ const handleChangeTab = (event, newValue) => {
+ setTabValue(newValue)
}
useEffect( () => {
@@ -206,7 +96,7 @@ export default function UserPage (props){
})
if((response.data.role_ids.includes(4))) {
setTabs([
- 'Atividades', 'Meus Recursos', 'Favoritos', 'Coleções', 'Rede', 'Curadoria'
+ 'Atividades', 'Status e Conquistas', 'Meus Recursos', 'Favoritos', 'Coleções', 'Rede', 'Curadoria'
])
}
},
@@ -220,19 +110,6 @@ export default function UserPage (props){
props.history.push('/')
}
- const handleChangeTab = (event, newValue) => {
- setTabValue(newValue)
- }
-
- const updateCover = (selectorFiles : FileList) => {
- const objectURL = URL.createObjectURL(selectorFiles[0])
- console.log(objectURL)
- //setCoverImg(img)
- //modal selecionar posicao do coverImg
-
-
- }
-
return (
<>
<link href="https://fonts.googleapis.com/css?family=Roboto:100,400,500&display=swap" rel="stylesheet"/>
@@ -240,125 +117,6 @@ export default function UserPage (props){
state.userIsLoggedIn?
(
[
- <React.Fragment>
- <ModalAlterarAvatar
- open={modalOpen}
- handleClose={modalControl}
- userAvatar={state.currentUser.userAvatar}
- />
-<<<<<<< src/Pages/UserPage.js
- <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]}/>
- <StyledTab label={tabs[5]}/>
- </StyledTabs>
- </NavBarContentContainer>
- </RodapeDiv>
- </ContainerUserProfile>
- </Paper>
- </MainContainerDesktop>
- </div>
- {tabValue === 0 && <TabPanelAtividades id={id} config={config}/>}
- {tabValue === 1 && <TabPanelStatusEConquistas id={id} config={config}/>}
- {tabValue === 2 && <TabPanelMeusRecursos id={id} config={config}/>}
- {tabValue === 3 && <TabPanelFavoritos id={id} config={config}/>}
- {tabValue === 4 && <TabPanelColecoes id={id} config={config}/>}
- {tabValue === 5 && <TabPanelRede id={id} config={config}/>}
- </ContainerNoPad>
- </HeaderDiv>
-=======
<BackgroundDiv>
<CustomizedBreadcrumbs
@@ -369,17 +127,14 @@ export default function UserPage (props){
<div style={{padding : "10px 0 8px 0"}}>
<UserProfileContainer>
<HeaderContainer>
- {PageCover(state.currentUser.userCover, (e) => updateCover(e.target.files))}
-
- {ProfileAvatar(state.currentUser.userAvatar, hoverAlterarFoto, handleHoverAlterarFoto, modalControl)}
-
- {UserProfileInfo(user, state.currentUser.education)}
-
- {EditProfileButton()}
+ <Cover/>
+ <ProfileAvatar/>
+ <UserInfo/>
+ <EditProfileButton/>
</HeaderContainer>
<CheckTeacherDiv>
- {SubmitterStatus(state.currentUser.submitter_request)}
+ <SubmitterStatus />
</CheckTeacherDiv>
<RodapeDiv>
@@ -410,20 +165,20 @@ export default function UserPage (props){
{tabValue === 0 &&
<TabPanelAtividades id={id} config={GetHeaderConfig()}/>}
{tabValue === 1 &&
- <TabPanelMeusRecursos id={id} config={GetHeaderConfig()}/>}
+ <TabPanelStatusEConquistas id={id} config={GetHeaderConfig()}/>}
{tabValue === 2 &&
- <TabPanelFavoritos id={id} config={GetHeaderConfig()}/>}
+ <TabPanelMeusRecursos id={id} config={GetHeaderConfig()}/>}
{tabValue === 3 &&
- <TabPanelColecoes id={id} config={GetHeaderConfig()}/>}
+ <TabPanelFavoritos id={id} config={GetHeaderConfig()}/>}
{tabValue === 4 &&
- <TabPanelRede id={id} config={GetHeaderConfig()}/>}
+ <TabPanelColecoes id={id} config={GetHeaderConfig()}/>}
{tabValue === 5 &&
+ <TabPanelRede id={id} config={GetHeaderConfig()}/>}
+ {tabValue === 6 &&
<TabPanelCuradoria id={id} config={GetHeaderConfig()}/>}
</Grid>
</Grid>
</BackgroundDiv>
->>>>>>> src/Pages/UserPage.js
- </React.Fragment>
]
)
: (
@@ -439,62 +194,6 @@ export default function UserPage (props){
}
-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;
- background-color : #a5a5a5;
-`
-
-export const ChangeAvatarDiv = styled.div`
- height : 40px;
- position: absolute;
- width : 100%;
- bottom : 0;
- display : flex;
- background-color : #000;
- color : #fff;
- justify-content : center;
-`
-
-
-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;
- @media screen and (min-width: 800px) {
- min-height : 36px;
- min-width : 88px;
- }
- line-height : 36px;
- border : 0;
- display: inline-block;
- text-align : center;
- :hover{
- background-color : #fafafa;
- }
- @media screen and (max-width: 600px) {
- max-width : 44px !important ;
- }
- }
-`
-
-
const StyledTab = styled(Tab)`
.Mui-selected {
border-bottom-color : #00bcd4 !important;