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

finalizando pagina do usuario (ainda sem cards de recursos)

parent e07330e0
Branches
Tags
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
Showing
with 386 additions and 194 deletions
src/Components/ComponentAlterarAvatar.js
+ 108
− 108
View file @ d9ba289f
......@@ -31,7 +31,8 @@ import Profile from '../img/default_profile0.png'
const ChangeAvatarDiv = styled.div`
color : rgba(255,255,255,.7);
background-color:rgba(0,0,0,.5);
position: absolute;bottom: 0;
position: absolute;
bottom: 0;
width: inherit;
text-align: center;
font-size: 18px;
......@@ -44,54 +45,6 @@ const ChangeAvatarDiv = styled.div`
justify-content: center;
`
export default function ComponentAlterarAvatar (props) {
return (
<ModalDiv style={{maxWidth:"500px", maxHeight:"500px"}}>
<HeaderDiv>
<span style={{width:"32px"}}/>
<StyledH2>Editar Foto</StyledH2>
<StyledCloseModalButton onClick={props.handleClose}>
<CloseIcon/>
</StyledCloseModalButton>
</HeaderDiv>
<DialogDiv>
<div style={{marginTop:"0"}}>
<form>
<DivAlterarFoto>
<DivFlowHolder>
<AvatarCircleDiv>
{
props.userAvatar == '' || props.userAvatar == null ?
(
<img src={Profile} alt={'user avatar'} style={{height:"inherit", width:"inherit", objectFit:"cover"}}/>
):
(
<img src={this.props.userAvatar} alt={'user avatar'} style={{height:"inherit", width:"inherit", objectFit:"cover"}}/>
)
}
<ChangeAvatarDiv>
<span>Alterar</span>
<input accept="image/*" id="icon-button-file"
type="file"
onChange={(e) => props.handleFile(e.target.files) }/>
</ChangeAvatarDiv>
</AvatarCircleDiv>
</DivFlowHolder>
</DivAlterarFoto>
<ButtonsDiv>
<ButtonCancelar><span>Cancelar</span></ButtonCancelar><ButtonConfirmar><span>Salvar Alterações</span></ButtonConfirmar>
</ButtonsDiv>
</form>
</div>
</DialogDiv>
</ModalDiv>
)
}
const ModalDiv = styled.div`
background-color : #fff;
......@@ -102,66 +55,66 @@ const ModalDiv = styled.div`
flex-direction : column;
`
const ButtonConfirmar = styled(Button)`
color : rgba(255,255,255,0.87);
background-color: rgb(0,188,212);
display: inline-block;
position: relative;
cursor: pointer;
min-height: 36px;
min-width: 88px;
line-height: 36px;
vertical-align: middle;
align-items: center;
text-align: center;
border-radius: 3px;
box-sizing: border-box;
user-select: none;
border: 0;
padding: 0 6px;
margin: 6px 8px;
background: transparent;
background-color: transparent;
color: currentColor;
white-space: nowrap;
text-transform: uppercase;
font-weight: 500;
font-size: 14px;
font-style: inherit;
font-variant: inherit;
font-family: inherit;
text-decoration: none;
overflow: hidden;
const StyledButtonConfirmar = styled(Button)`
background-color : #00acc1 !important;
color: #fff !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: 4px !important;
box-sizing: border-box !important;
user-select: none !important;
border: 0 !important;
padding: 0 6px !important;
margin: 6px 8px !important;
background: transparent !important;
background-color: transparent !important;
color: currentColor !important;
white-space: nowrap !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;
`
const ButtonCancelar = styled(Button)`
outline : none;
display: inline-block;
position: relative;
cursor: pointer;
min-height: 36px;
min-width: 88px;
line-height: 36px;
vertical-align: middle;
align-items: center;
text-align: center;
border-radius: 3px;
box-sizing: border-box;
user-select: none;
border: 0;
padding: 0 6px;
margin: 6px 8px;
background:transparent;
color: currentColor;
white-space: nowrap;
text-transform: uppercase;
font-weight: 500;
font-size: 14px;
font-style: inherit;
font-variant: inherit;
font-family: inherit;
text-decoration: none;
overflow: hidden;
outline : none !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;
background:transparent !important;
color: currentColor !important;
white-space: nowrap !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;
`
const ButtonsDiv = styled.div`
......@@ -224,3 +177,50 @@ const StyledCloseModalButton = styled(Button)`
height : 40px;
margin : 0 6px;
`
export default function ComponentAlterarAvatar (props) {
return (
<ModalDiv style={{maxWidth:"500px", maxHeight:"500px"}}>
<HeaderDiv>
<span style={{width:"32px"}}/>
<StyledH2>Editar Foto</StyledH2>
<StyledCloseModalButton onClick={props.handleClose}>
<CloseIcon/>
</StyledCloseModalButton>
</HeaderDiv>
<DialogDiv>
<div style={{marginTop:"0"}}>
<form>
<DivAlterarFoto>
<DivFlowHolder>
<AvatarCircleDiv>
{
props.userAvatar == '' || props.userAvatar == null ?
(
<img src={Profile} alt={'user avatar'} style={{height:"inherit", width:"inherit", objectFit:"cover"}}/>
):
(
<img src={this.props.userAvatar} alt={'user avatar'} style={{height:"inherit", width:"inherit", objectFit:"cover"}}/>
)
}
<ChangeAvatarDiv>
<span>Alterar</span>
<input accept="image/*" id="icon-button-file"
type="file"
onChange={(e) => props.handleFile(e.target.files) }
style={{display:"none"}}/>
</ChangeAvatarDiv>
</AvatarCircleDiv>
</DivFlowHolder>
</DivAlterarFoto>
<ButtonsDiv>
<ButtonCancelar onClick={props.handleClose}><span>Cancelar</span></ButtonCancelar><StyledButtonConfirmar><span>Salvar Alterações</span></StyledButtonConfirmar>
</ButtonsDiv>
</form>
</div>
</DialogDiv>
</ModalDiv>
)
}
src/Components/ContainerRedeVazia.js 0 → 100644
+ 72
− 0
View file @ d9ba289f
import React, {useContext, useState, useEffect} from 'react'
import styled from 'styled-components'
import { Container } from 'react-grid-system'
import {ButtonMostrarTodos, ButtonMostrarMais, BtnAlinhaRecPvt, DivContainerRecursosPublicados, ContainerDivStyled, DivTitulo, StyledP, StyledHR} from './TabPanelMeusRecursos.js'
import NoRede1 from '../img/no-rede-1.png'
import NoRede2 from '../img/no-rede-2.png'
import NoRede3 from '../img/no-rede-3.png'
import Paper from '@material-ui/core/Paper';
import TabRedeImgDiv from './TabRedeImgDiv.js'
export default function ContainerRedeVazia (props) {
return (
<React.Fragment>
<ContainerDivStyled>
<Paper elevation={3}>
<div>
<RedeVaziaBoxContainer>
<StyledSpan>Você ainda não tem uma rede.
<br/>
Veja como começar:
</StyledSpan>
<StyledSpan>
<StyledHr/>
<DivColumns>
<TabRedeImgDiv img={NoRede1} text={"Para encontrar um usuário específico, você pode utilizar a barra de busca e selecionar a busca por \"pessoas\""}/>
<TabRedeImgDiv img={NoRede2} text={"Você pode começar a seguir uma pessoa clicando no botão \"seguir\" no card (A) ou na página dela (B)"}/>
<TabRedeImgDiv img={NoRede3} text={"Pronto! Agora você poderá acompanhar os novos recursos e coleções dessa pessoas na sua página, na aba \"Perfil e Atividades\""}/>
</DivColumns>
</StyledSpan>
</RedeVaziaBoxContainer>
</div>
</Paper>
</ContainerDivStyled>
</React.Fragment>
)
}
const DivColumns = styled.div`
display : flex;
flex-direction : row;
aling-items : space-between
padding-right : 15px;
padding-left : 15px
`
const StyledHr = styled.hr`
margin-top : 20px;
margin-bottom : 20px;
border : 0;
border-top: 1px solid #eee;
`
const RedeVaziaBoxContainer = styled.div`
background-color : #fff;
box-shadow: 0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);
padding: 30px;
padding-right: 30px;
padding-left: 30px;
margin-bottom: 30px;
text-align: center;
height: 100%;
padding-left: 0 !important;
padding-right: 0 !important;
margin-top: 20px;
}
`
const StyledSpan = styled.span`
font-weight : lighter;
margin-top: 0;
font-family: Roboto;
font-size: 24px;
`
src/Components/LoginModal.js
+ 7
− 11
View file @ d9ba289f
......@@ -69,19 +69,17 @@ export default function LoginModal (props){
userLoggedIn: !state.userIsLoggedIn,
login: {
id : response.data.id,
username : response.data.name,
email : response.data.email,
username : response.data.data.name,
email : response.data.data.email,
accessToken : response.headers['access-token'],
clientToken : response.headers.client,
userAvatar : response.data.avatar_file_name,
userCover : response.data.cover_file_name
userAvatar : response.data.data.avatar_file_name,
userCover : response.data.data.cover_file_name
}
}
)
// console.log(response.headers)
console.log(login)
// console.log(response.data.data.name)
// console.log(response.data.data.uid)
props.handleClose();
props.openSnackbar();
localStorage.setItem('@portalmec/accessToken', response.headers['access-token'])
localStorage.setItem('@portalmec/clientToken', response.headers.client,)
sessionStorage.setItem('@portalmec/id', response.data.data.id)
......@@ -91,8 +89,6 @@ export default function LoginModal (props){
localStorage.setItem('@portalmec/email', login.email)
localStorage.setItem('@portalmec/senha', login.senha) //MUDAR ISSO ASAP
}
props.handleClose();
props.openSnackbar();
}, (error) => {
{handleSnackbar(true)}
}
......@@ -120,7 +116,7 @@ export default function LoginModal (props){
timeout: 500,
}}
>
<Zoom in={props.open} style={{ transitionDelay :"0.4ms"}}>
<Zoom in={props.open} style={{ transitionDelay :"0.2ms"}}>
<LoginContainer handleClose={props.handleClose}
openSignUp={props.openSignUp}
handleLoginInfo={handleLoginInfo}
......
src/Components/TabPanelMeusRecursos.js
+ 1
− 1
View file @ d9ba289f
......@@ -23,7 +23,7 @@ export default function TabPanelAtividades (props) {
axios.all([
axios.get((`${apiUrl}/users/` + props.id + '/learning_objects'), props.config),
axios.get((`${apiUrl}/users/` + props.id + '/drafts'), props.config),
axios.get((`${apiUrl}/users/` + props.id + '/submissions?stats=submitted'), props.config)
axios.get((`${apiUrl}/users/` + props.id + '/submissions?status=submitted'), props.config)
])
.then( (responseArr) => {
handleLoading(false)
......
src/Components/TabPanelRede.js
+ 135
− 34
View file @ d9ba289f
......@@ -6,24 +6,97 @@ import Button from '@material-ui/core/Button';
import {ButtonMostrarTodos, ButtonMostrarMais, BtnAlinhaRecPvt, DivContainerRecursosPublicados, ContainerDivStyled, DivTitulo, StyledP, StyledHR} from './TabPanelMeusRecursos.js'
import axios from 'axios'
import {apiUrl} from '../env';
import LoadingSpinner from './LoadingSpinner.js'
import ContainerRedeVazia from './ContainerRedeVazia.js'
import {NoPubSpan, DivConteudoNaoPublicado, DivTextoNoPublications} from './TabPanelMeusRecursos.js'
export default function TabPanelRede (props) {
const [loading, handleLoading] = useState(true)
const [followingList, setFollowing] = useState([])
const [followingListLength, setFollowingLength] = useState(0)
const [followersList, setFollowers] = useState([])
const [followersListLength, setFollowersLength] = useState(1)
useEffect( () => {
axios.all([
axios.get((`${apiUrl}/users/` + props.id + '/following/User'), props.config),
axios.get((`${apiUrl}/users/` + props.id + '/followers'), props.config)
])
.then( (responseArr) => {
handleLoading(false)
console.log(responseArr)
console.log(responseArr[0].data)
console.log(responseArr[1].data)
},
(error) => {
handleLoading(false)
console.log('error while running axios all')
}
)
}, [])
return (
<>
{
loading ?
(
[
<LoadingSpinner text={'CARREGANDO...'}/>
]
)
:
(
[
<>
{
followingListLength == 0 && followersListLength == 0 ?
(
[
<>
<ContainerRedeVazia/>
</>
]
)
:
(
[
<React.Fragment>
<ContainerDivStyled>
<Paper elevation={3}>
<DivTitulo>
<StyledP>Seguidor <b style={{fontWeight:"700", fontSize:"20px"}}>(1)</b></StyledP>
<StyledP>Seguidor <b style={{fontWeight:"700", fontSize:"20px"}}>({followingListLength})</b></StyledP>
<StyledHR/>
</DivTitulo>
<div style={{height : "400px"}}>
<DivContainerRecursosPublicados>
</DivContainerRecursosPublicados>
{
followingListLength == 0 ?
(
[
<>
<DivTextoNoPublications>
<DivConteudoNaoPublicado>
<NoPubSpan>Você não possui nenhum seguidor.</NoPubSpan>
</DivConteudoNaoPublicado>
</DivTextoNoPublications>
</>
]
)
:
(
[
<>
<DivContainerRecursosPublicados/>
<BtnAlinhaRecPvt>
<p style={{margin:"0 0 10px", fontSize:"14px"}}>Carregado 1 de 1</p>
</BtnAlinhaRecPvt>
</>
]
)
}
</div>
</Paper>
</ContainerDivStyled>
......@@ -31,18 +104,46 @@ export default function TabPanelRede (props) {
<ContainerDivStyled>
<Paper elevation={3}>
<DivTitulo>
<StyledP>Seguindo <b style={{fontWeight:"700", fontSize:"20px"}}>(1)</b></StyledP>
<StyledP>Seguindo <b style={{fontWeight:"700", fontSize:"20px"}}>({followersListLength})</b></StyledP>
<StyledHR/>
</DivTitulo>
<div style={{height : "400px"}}>
<DivContainerRecursosPublicados>
</DivContainerRecursosPublicados>
{
followersListLength == 0 ?
(
[
<>
<DivTextoNoPublications>
<DivConteudoNaoPublicado>
<NoPubSpan>Você ainda não segue nenhum outro usuário.</NoPubSpan>
</DivConteudoNaoPublicado>
</DivTextoNoPublications>
</>
]
)
:
(
[
<>
<DivContainerRecursosPublicados/>
<BtnAlinhaRecPvt>
<p style={{margin:"0 0 10px", fontSize:"14px"}}>Carregado 1 de 1</p>
</BtnAlinhaRecPvt>
</>
]
)
}
</div>
</Paper>
</ContainerDivStyled>
</React.Fragment>
]
)
}
</>
]
)
}
</>
)
}
src/Components/TabRedeImgDiv.js 0 → 100644
+ 10
− 0
View file @ d9ba289f
import React from 'react'
export default function TabRedeImgDiv (props) {
return (
<div style={{width:"33.33333333%", textAlign : "center"}}>
<img src={props.img} alt={'no rede 1'} style={{width : "100%", verticalAlign : "middle", border : "0"}}/>
<p style={{fontSize : "14px", fontFamily : "Roboto", margin : "0 0 10px"}}>{props.text}</p>
</div>
)
}
src/Pages/UserPage.js
+ 53
− 40
View file @ d9ba289f
......@@ -39,7 +39,7 @@ import TabPanelColecoes from '../Components/TabPanelColecoes.js'
import TabPanelRede from '../Components/TabPanelRede.js'
import axios from 'axios'
import {apiUrl} from '../env';
import ModarAlterarAvatar from '../Components/ModalAlterarAvatar.js'
import ModalAlterarAvatar from '../Components/ModalAlterarAvatar.js'
export default function UserPage (props){
const {state, dispatch} = useContext(Store)
......@@ -77,7 +77,6 @@ export default function UserPage (props){
'Cookie': ''
})
.then( (response) => {
console.log(response)
dispatch ({
type : 'USER_ACCESSED_USER_PAGE',
set: {
......@@ -91,7 +90,6 @@ export default function UserPage (props){
collectionsCount: response.data.collections_count,
}
})
console.log(state.currentUser)
},
(error) => {
console.log('error while running ComponentDidMout')
......@@ -107,6 +105,11 @@ export default function UserPage (props){
setValue(newValue)
}
const updateCover = (selectorFiles : FileList) => {
console.log(selectorFiles)
console.log(selectorFiles[0].name)
}
return (
<>
<link href="https://fonts.googleapis.com/css?family=Roboto:100,400,500&display=swap" rel="stylesheet"/>
......@@ -115,7 +118,7 @@ export default function UserPage (props){
(
[
<React.Fragment>
<ModarAlterarAvatar
<ModalAlterarAvatar
open={modalOpen}
handleClose={modalControl}
/>
......@@ -136,13 +139,13 @@ export default function UserPage (props){
</BreadcrumbsDiv>
<div style={{display:"flex", flexDirection:"column"}}>
<MainContainerDesktop>
<MainContainerDesktop maxwidth="xl">
<Paper elevation={3} style= {{width:"max-content"}}>
<ContainerUserProfile>
<HeaderContainer>
<CoverContainer>
<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" />
<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">
......@@ -158,7 +161,7 @@ export default function UserPage (props){
</ChangeAvatarDiv>
</ProfileAvatarDiv>
<UserProfileInfoDiv>
<p style={{fontSize:"28px", color:"#fff", marginBottom:"2px", fontWeight:"500"}}>{user}</p>
<p style={{fontSize:"28px", color:"#fff", marginBottom:"2px", fontWeight:"500", backgroundColor:"#77777796", backgroundRadius : "8px"}}>{user}</p>
<div style={{fontSize:"14px", color:"#fff", marginBottom:"2px"}}>
<p>{state.currentUser.education}</p>
</div>
......@@ -207,6 +210,7 @@ export default function UserPage (props){
textColor ="primary"
variant = "scrollable"
scrollButtons = "auto"
TabIndicatorProps={{style : {background:"#00bcd4"}}}
>
<StyledTab label="Atividades"/>
<StyledTab label="Meus Recursos"/>
......@@ -251,7 +255,7 @@ export default function UserPage (props){
`
const ContainerNoPad = styled.div`
min-width : "1170px"
min-width : 1170px;
`
const BreadcrumbsDiv = styled.div`
......@@ -268,6 +272,9 @@ export default function UserPage (props){
const MainContainerDesktop = styled(Container)`
padding : 10px 0 8px 0;
.MuiContainer-maxWidthXl {
max-width : 1170px !important;
}
`
const ContainerUserProfile = styled(Container)`
......@@ -289,6 +296,7 @@ export default function UserPage (props){
height : 230px;
position : relative;
`
const ProfileAvatarDiv = styled.div`
bottom : -65px;
left : 60px;
......@@ -301,6 +309,7 @@ export default function UserPage (props){
outline : 0;
cursor : pointer;
`
export const ChangeAvatarDiv = styled.div`
height : 40px;
position: absolute;
......@@ -322,6 +331,7 @@ export default function UserPage (props){
const EditProfileAnchor = styled.a`
Button {
box-shadow : 0 2px 5px 0 rgba(0,0,0,.26);
background-color : #fafafa;
position : absolute;
right : 5px;
......@@ -337,6 +347,9 @@ export default function UserPage (props){
border : 0;
display: inline-block;
text-align : center;
:hover{
background-color : #fafafa;
}
}
`
......
src/img/no-rede-1.png 0 → 100644
+ 0
− 0
View file @ d9ba289f
src/img/no-rede-1.png

15.9 KiB

src/img/no-rede-2.png 0 → 100644
+ 0
− 0
View file @ d9ba289f
src/img/no-rede-2.png

70.7 KiB

src/img/no-rede-3.png 0 → 100644
+ 0
− 0
View file @ d9ba289f
src/img/no-rede-3.png

21.1 KiB

0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment