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

fix updateCover

parent 1801d700
No related branches found
No related tags found
6 merge requests!57Merge of develop into master,!56Fixed buttons reportar, seguir, compartilhar, guardar and entrar (in comments...,!39Update admin system,!32Homologa,!31Fix console error,!30Centraliza axios
Hide whitespace changes
Inline Side-by-side
src/Components/EditarColecaoForm.js
+ 2
− 2
View file @ 1a71df8b
......@@ -43,10 +43,10 @@ export default function EditarColecaoForm (props) {
const [value, setValue] = useState(-1);
/*values are set according to backend complaint id*/
const [options] = useState([
const [options] = [
{value : "pública", text :'Pública (Sua coleção estará disponível para todos)'},
{value : "privada", text : 'Privada (Somente você poderá visualizar esta coleção)'}
])
]
const handleChange = (event) => {
setValue(event.target.value);
......
src/Components/TabPanels/UserPageTabs/PanelEditarPerfil.js
+ 80
− 65
View file @ 1a71df8b
......@@ -27,11 +27,11 @@ import Tooltip from '@material-ui/core/Tooltip';
import FormInput from "../../FormInput.js"
import ValidateUserInput from '../../HelperFunctions/FormValidationFunction.js'
import {apiDomain} from '../../../env.js'
import ModalAlterarCover from '../../ModalAlterarCover/ModalAlterarCover.js'
export default function TabPanelEditarPerfil (props) {
// eslint-disable-next-line
const {state, dispatch} = useContext(Store)
const {state} = useContext(Store)
const [hoverAlterarFoto, handleAlterarFoto] = React.useState(false)
const [formNome, setNome] = useState({
......@@ -48,9 +48,16 @@ export default function TabPanelEditarPerfil (props) {
handleAlterarFoto(!hoverAlterarFoto)
}
const [tempCover, setTempCover] = useState('')
const [open, toggleOpen] = useState(false)
const controlModal = () => {toggleOpen(!open)}
const updateCover = (selectorFiles) => {
console.log(selectorFiles)
console.log(selectorFiles[0].name)
const objectURL = URL.createObjectURL(selectorFiles[0])
console.log(objectURL)
setTempCover(objectURL)
controlModal()
}
const handleChange = (e, type) => {
......@@ -98,69 +105,77 @@ export default function TabPanelEditarPerfil (props) {
}
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={`${apiDomain}` + state.currentUser.cover} 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={`${apiDomain}` + state.currentUser.avatar} 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>
<React.Fragment>
<ModalAlterarCover
open = {open}
handleClose={controlModal}
cover={tempCover}
id={state.currentUser.id}
/>
<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={`${apiDomain}` + state.currentUser.cover} 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={`${apiDomain}` + state.currentUser.avatar} 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 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>
<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>
</div >
</div>
</React.Fragment>
)
}
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment