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 1ed4116a
Prev Next
Show latest version
8 files
+ 142
− 94
Compare changes
  • Side-by-side
  • Inline
Files
8
src/Components/TabPanels/TabPanelEditarPerfil.js 0 → 100644
+ 253
− 0
import React, {useContext, useState} from 'react'
import styled from 'styled-components'
import { Store } from '../../Store.js';
import {Link} from 'react-router-dom'
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 FormInput from "../FormInput.js"
import ValidateUserInput from '../FormValidationFunction.js'
export default function TabPanelEditarPerfil (props) {
const {state, dispatch} = useContext(Store)
const [hoverAlterarFoto, handleAlterarFoto] = React.useState(false)
const [formNome, setNome] = useState({
key : false,
value : ""
})
const [formAboutMe, setAboutMe] = useState({
key : false,
value : "",
})
const handleHoverAlterarFoto = () => {
handleAlterarFoto(!hoverAlterarFoto)
}
const updateCover = (selectorFiles : FileList) => {
console.log(selectorFiles)
console.log(selectorFiles[0].name)
}
const handleChange = (e, type) => {
const userInput = e.target.value
const flag = ValidateUserInput(type, userInput)
if(type === 'username') {
setNome({...formNome,
key : flag,
value : userInput
})
console.log(formNome)
}
else if (type === 'aboutMe') {
setAboutMe({...formAboutMe,
key : flag,
value : userInput,
})
console.log(formAboutMe)
}
}
const limpaCamposForm = () => {
setNome({...formNome,
key : false,
value : ''
})
setAboutMe({...formAboutMe,
key : false,
value : ''
})
}
const handleSubmit = (e) => {
e.preventDefault()
const info = {nome : formNome.value, aboutMe : formAboutMe.value}
const flagNome = formNome.key
const flagAboutMe = formAboutMe.key
if (!(flagNome || flagAboutMe)) {
console.log(info)
limpaCamposForm()
}
}
return (
<div className="card-config">
<h1 style={{fontWeight:"300"}}>Editar Perfil </h1>
<div className='content-div'>
<div style={{padding:"0", display:"flex", flexDirection:"column"}}>
<HeaderContainer>
<div style={{position:"relative", height:"100%"}}>
<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>
</div>
<ProfileAvatarDiv onMouseEnter={handleHoverAlterarFoto} onMouseLeave={handleHoverAlterarFoto}>
<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>
</HeaderContainer>
<br/>
<br/>
<br/>
<br/>
</div>
<div style={{paddingTop:"90px"}}>
<div style={{display:"flex", flexDirection:"row"}}>
<form onSubmit={e => handleSubmit(e)}>
<FormInput
inputType={"text"}
name={"Nome Completo"}
value={formNome.value}
placeholder={"Nome Completo"}
handleChange={e => handleChange(e, 'username')}
required={true}
error={formNome.key}
/>
<FormInput
inputType={"text"}
name={"Sobre Mim"}
value={formAboutMe.value}
multi = {true}
rows="3"
rowsMax = "3"
error={formAboutMe.key}
placeholder={"Sobre Mim"}
handleChange={e => handleChange(e, 'aboutMe')}
required={false}
help = {formAboutMe.value.length + '/160'}
/>
</form>
</div>
<ButtonsDiv>
<Link to="perfil" ><ButtonCancelar ><span>CANCELAR</span></ButtonCancelar></Link>
<ButtonConfirmar onClick={e => handleSubmit(e)}><span>SALVAR ALTERAÇÕES</span></ButtonConfirmar>
</ButtonsDiv>
</div>
</div >
</div>
)
}
const ButtonConfirmar = styled(Button)`
background-color : #00bcd4 !important;
color : #fff !important;
font-family : 'Roboto',sans-serif !important;
font-size : 14px !important;
font-weight : 500 !important;
padding-left : 16px !important;
padding-right : 16px !important;
outline : none !important;
margin : 6px 8px !important;
white-space : nowrap !important;
text-transform : uppercase !important;
font-weight : bold !important;
font-size : 14px !important;
font-style : inherit !important;
font-variant : inherit !important;
font-family : inherit !important;
text-decoration : none !important;
overflow : hidden !important;
display : inline-block !important;
position : relative !important;
cursor : pointer !important;
min-height : 36px !important;
min-width : 88px !important;
line-height : 36px !important;
vertical-align : middle !important;
align-items : center !important;
text-align : center !important;
border-radius : 3px !important;
box-sizing : border-box !important;
border : 0 !important;
`
export const ButtonCancelar = styled(Button)`
height : 36px !important;
padding-left : 16px !important;
padding-right : 16px !important;
font-weight : bold !important;
border-radius : 3px !important;
outline : none !important;
text-transform : uppercase !important;
font-weight : 500 !important;
font-size : 14px !important;
font-style : inherit !important;
font-variant : inherit !important;
font-family : inherit !important;
text-decoration : none !important;
overflow : hidden !important;
display : inline-block !important;
position : relative !important;
cursor : pointer !important;
min-height : 36px !important;
min-width : 88px !important;
line-height : 36px !important;
vertical-align : middle !important;
align-items : center !important;
text-align : center !important;
border-radius : 3px !important;
box-sizing : border-box !important;
user-select : none !important;
border : 0 !important;
padding : 0 6px !important;
margin : 6px 8px !important;
:hover{
background-color : #f1f1f1 !important;
}
`
const ButtonsDiv = styled.div`
text-align : right;
margin-top : 80px;
`
const ChangeAvatarDiv = styled.div`
height : 40px;
position: absolute;
width : 100%;
bottom : 0;
display : flex;
background-color : #000;
color : #fff;
justify-content : center;
`
const ProfileAvatarDiv = styled.div`
bottom : -10px;
left : 120px !important;
border-radius : 100%;
position : absolute;
width : 100px !important;
height : 100px !important;
overflow : hidden;
border : 8px solid #fff;
outline : 0;
cursor : pointer;
z-index : 10;
background-color : #fff !important;
`
const HeaderContainer = styled.div`
background-color : #afeeee;
position : relative;
height : 150px;
border-radius : 8px;
`