Skip to content
Snippets Groups Projects
Commit 95f4196a authored by Lucas Eduardo Schoenfelder's avatar Lucas Eduardo Schoenfelder
Browse files

trabalhando no esqueleto da pagina de usuario

parent acf549b1
No related branches found
No related tags found
4 merge requests!57Merge of develop into master,!56Fixed buttons reportar, seguir, compartilhar, guardar and entrar (in comments...,!18Branch do lucas,!17Branch do lucas
Show whitespace changes
Inline Side-by-side
src/Components/IllegalContentModal.js
+ 1
− 1
View file @ 95f4196a
......@@ -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>
......
src/Components/LoginModal.js
+ 3
− 3
View file @ 95f4196a
......@@ -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>
)
}
src/Components/MenuBar.js
+ 1
− 1
View file @ 95f4196a
......@@ -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"},
......
src/Components/SignUpModal.js
+ 1
− 1
View file @ 95f4196a
......@@ -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
......
src/Pages/UserPage.js
+ 174
− 15
View file @ 95f4196a
......@@ -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`
display : flex;
justify:content : center;
const BreadcrumbsDiv = styled.div`
padding : 10px;
display : flex;
justify-content : center;
`
const StyledBreadcrumbs = styled(Breadcrumbs)`
display : flex;
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 (
<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>
);
<>
{
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()}
</>
)
}
</>
)
}
src/Store.js
+ 6
− 5
View file @ 95f4196a
......@@ -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 {
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment