diff --git a/src/Components/IllegalContentModal.js b/src/Components/IllegalContentModal.js
index f623587ac501efc859c5edc5b87d42b6c714ac34..7b2060f5d40fec1594801d148248e21257dcfea9 100644
--- a/src/Components/IllegalContentModal.js
+++ b/src/Components/IllegalContentModal.js
@@ -112,7 +112,7 @@ export default function IllegalContentModal (props) {
<Fade in={props.open}>
<StyledDivContainer >
<StyledDivContent>
- <StyledH2>{state.loginInfo.username}!</StyledH2>
+ <StyledH2>{state.currentUser.username}!</StyledH2>
<div>
<StyledParagraph>Seu recurso não está de acordo com os termos</StyledParagraph>
</div>
diff --git a/src/Components/LoginModal.js b/src/Components/LoginModal.js
index 1652dc66f76984373b739f1a4ea692a3ef389ca7..17540183d5908724a5cfdedff6895a71de01d713 100644
--- a/src/Components/LoginModal.js
+++ b/src/Components/LoginModal.js
@@ -20,7 +20,7 @@ import React, {useContext} from 'react';
import { Button } from '@material-ui/core';
import Modal from '@material-ui/core/Modal';
import Backdrop from '@material-ui/core/Backdrop';
-import Fade from '@material-ui/core/Fade';
+import Zoom from '@material-ui/core/Fade';
import styled from 'styled-components'
import LoginContainer from './LoginContainer'
import {Store} from '../Store.js'
@@ -82,12 +82,12 @@ export default function LoginModal (props){
timeout: 500,
}}
>
- <Fade in={props.open}>
+ <Zoom in={props.open} style={{ transitionDelay :"0.4ms"}}>
<LoginContainer handleClose={props.handleClose}
openSignUp={props.openSignUp}
handleLoginInfo={handleLoginInfo}
/>
- </Fade>
+ </Zoom>
</StyledLogin>
)
}
diff --git a/src/Components/MenuBar.js b/src/Components/MenuBar.js
index d2ba1f46a599c406a4ea94dac5e0b4cf6895f499..f7c90fb551cd93e52d644afcc4d9b8d4a0cde73b 100644
--- a/src/Components/MenuBar.js
+++ b/src/Components/MenuBar.js
@@ -107,7 +107,7 @@ export default function MenuBar(props){
]
const minhaArea = [
- { name: "Perfil e Atividades", href: "/perfil/atualizacoes"},
+ { name: "Perfil e Atividades", href: "/perfil-atualizacoes"},
{ name: "Recursos Publicados", href: "/perfil/recursos-publicados"},
{ name: "Favoritos", href: "/perfil/favoritos"},
{ name: "Coleções", href: "/perfil/colecoes"},
diff --git a/src/Components/SignUpModal.js b/src/Components/SignUpModal.js
index c25758f49c33d287bd28a13f321bdd7eeaa8b673..5300aab687c5626792b5ef4c9f3164fe52241047 100644
--- a/src/Components/SignUpModal.js
+++ b/src/Components/SignUpModal.js
@@ -90,7 +90,7 @@ export default function SignUpModal (props) {
)
}
- //useEffect(()=>{console.log(state.loginInfo)},[state.loginInfo])
+ //useEffect(()=>{console.log(state.currentUser)},[state.currentUser])
return (
<StyledModalSignUp
diff --git a/src/Pages/UserPage.js b/src/Pages/UserPage.js
index 8e5da3b43aafa195457578183449ca4f6f51ee76..25055b327db857ab3260b1e48416ba08c1ee8c6a 100644
--- a/src/Pages/UserPage.js
+++ b/src/Pages/UserPage.js
@@ -16,32 +16,191 @@ 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} 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 '@material-ui/core/Link';
+import Popover from '@material-ui/core/Popover';
+import { Store } from '../Store.js';
+import EditIcon from '@material-ui/icons/Edit';
-
-const maindDiv = styled.div`
+const HeaderDiv = styled.div`
background-color : #f4f4f4;
color : #666;
font-size : 14px;
line-height : 20px;
`
-const breadcrumbsDiv = styled.div`
+
+const BreadcrumbsDiv = styled.div`
+ padding : 10px;
+ display : flex;
+ justify-content : center;
+`
+
+const StyledBreadcrumbs = styled(Breadcrumbs)`
display : flex;
- justify:content : center;
- padding: 10px;
+ justify-content : flex-start;
+ max-width : 1170px;
+`
+
+const MainContainerDesktop = styled(Container)`
+ padding : 10px 0 8px 0;
+`
+
+const ContainerUserProfile = styled(Container)`
+ padding : 0;
+ background-color : #fff;
+ magin-bottom: 30px;
+ width : 1170px;
+ margin-right : auto;
+ 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;
+`
+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.a`
+ Button {
+ 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;
+ }
`
export default function UserPage (props){
+ const {state, dispatch} = useContext(Store)
+ const userImg = ""
+ const [hoverAlterarFoto, handleAlterarFoto] = React.useState(false)
+
+ const handleHoverAlterarFoto = () => {
+ handleAlterarFoto(!hoverAlterarFoto)
+ }
+
+ const redirect = () => {
+ props.history.push('/')
+ }
+
+ return (
+ <>
+ {
+ state.userIsLoggedIn?
+ (
+ [
+ <React.Fragment>
+ <HeaderDiv>
+ <BreadcrumbsDiv>
+ <StyledBreadcrumbs>
+ <Link href="/" style={{color:"#00bcd4"}}>
+ Página Inicial
+ </Link>
+ <span style={{color:"#a5a5a5"}}>
+ Minha área
+ </span>
+ <span style={{color:"#a5a5a5"}}>
+ Atividades
+ </span>
+ </StyledBreadcrumbs>
+ </BreadcrumbsDiv>
+
+ <MainContainerDesktop>
+ <ContainerUserProfile>
+ <HeaderContainer>
+ <CoverContainer>
+ {userImg == "" && <span>cover art</span>}
+ <input accept="image/*" style = {{display:"none"}} id="icon-button-file" type="file" />
+ <label htmlFor="icon-button-file">
+ <Tooltip title={<span style={{fontSize:"14px", overflow:"hidden"}}>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>
+ {userImg == "" && <span>user avatar</span>}
+ <ChangeAvatarDiv onMouseEnter={handleHoverAlterarFoto} onMouseLeave={handleHoverAlterarFoto}>
+ {hoverAlterarFoto && <span>Alterar Foto</span>}
+ </ChangeAvatarDiv>
+ </ProfileAvatarDiv>
+ <UserProfileInfoDiv>
+ <p style={{fontSize:"28px", color:"#fff", marginBottom:"2px", fontWeight:"500"}}>{state.currentUser.username}</p>
+ <div style={{fontSize:"14px", color:"#fff", marginBottom:"2px"}}>
+ <p>{state.currentUser.education}</p>
+ </div>
+ </UserProfileInfoDiv>
+ <EditProfileAnchor href="/perfil/configuracoes/editarperfil">
+ <Button>
+ <EditIcon style={{marginRight:"5px"}}/> <span>EDITAR PERFIL</span>
+ </Button>
+ </EditProfileAnchor>
+ </HeaderContainer>
+ </ContainerUserProfile>
+ </MainContainerDesktop>
+ </HeaderDiv>
+ </React.Fragment>
+ ]
+ )
+ : (
+ <>
+ {redirect()}
+ </>
+ )
+ }
+ </>
- 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>
- );
+ )
}
diff --git a/src/Store.js b/src/Store.js
index c2e0f669847b6a71faf2f77f73dd079e27a8ab24..3c12dad71a80a9c9e93b8d0d4ca43e36e2608bc4 100644
--- a/src/Store.js
+++ b/src/Store.js
@@ -34,11 +34,12 @@ const initialState = {
width: 0,
height: 0
},
- loginInfo: {
+ currentUser: {
username : 'Horstmann',
email : '',
accessToken : '',
- client : ''
+ client : '',
+ education : ''
}
}
@@ -63,19 +64,19 @@ function reducer(state, action) {
return {
...state,
userIsLoggedIn:action.userLoggedIn,
- loginInfo:action.login
+ currentUser:action.login
}
case 'USER_SIGNED_UP':
return {
...state,
userIsLoggedIn:action.userLoggedIn,
- loginInfo:action.login
+ currentUser:action.login
}
case 'USER_LOGGED_OUT':
return {
...state,
userIsLoggedIn:action.userLoggedOut,
- loginInfo:action.login
+ currentUser:action.login
}
case 'USER_AGREED_TO_PUBLICATION_TERMS':
return {