From 1a71df8b1f18153c530d21f979e923d1f338cd61 Mon Sep 17 00:00:00 2001
From: Lucas Schoenfelder <les17@inf.ufpr.br>
Date: Tue, 9 Feb 2021 10:45:05 -0300
Subject: [PATCH] fix updateCover
---
src/Components/EditarColecaoForm.js | 4 +-
.../UserPageTabs/PanelEditarPerfil.js | 145 ++++++++++--------
2 files changed, 82 insertions(+), 67 deletions(-)
diff --git a/src/Components/EditarColecaoForm.js b/src/Components/EditarColecaoForm.js
index 4e127b9a..9191ee7d 100644
--- a/src/Components/EditarColecaoForm.js
+++ b/src/Components/EditarColecaoForm.js
@@ -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);
diff --git a/src/Components/TabPanels/UserPageTabs/PanelEditarPerfil.js b/src/Components/TabPanels/UserPageTabs/PanelEditarPerfil.js
index a2a082d0..ce61ebca 100644
--- a/src/Components/TabPanels/UserPageTabs/PanelEditarPerfil.js
+++ b/src/Components/TabPanels/UserPageTabs/PanelEditarPerfil.js
@@ -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>
)
}
--
GitLab