Skip to content
Snippets Groups Projects
Commit 6e91ab19 authored by lfr20's avatar lfr20
Browse files

Added a logic to display certain tabs in user area, depending on the permissions of the user

parent 299b102e
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...,!40merge admin into develop,!37Merge sistema_admin into Update_Admin_System
Hide whitespace changes
Inline Side-by-side
src/Components/MenuBar.js
+ 113
− 78
View file @ 6e91ab19
...@@ -16,7 +16,7 @@ GNU Affero General Public License for more details. ...@@ -16,7 +16,7 @@ GNU Affero General Public License for more details.
You should have received a copy of the GNU Affero General Public License 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/>.*/ along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/>.*/
import React, {useContext} from 'react'; import React, { useContext } from 'react';
import { Link } from 'react-router-dom' import { Link } from 'react-router-dom'
import { Container } from 'react-grid-system' import { Container } from 'react-grid-system'
import logo from '../img/logo_small.svg' import logo from '../img/logo_small.svg'
...@@ -80,7 +80,7 @@ const Right = styled.span` ...@@ -80,7 +80,7 @@ const Right = styled.span`
margin-right : 10px; margin-right : 10px;
` `
const Left = styled.span ` const Left = styled.span`
width: 100%; width: 100%;
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
...@@ -96,85 +96,120 @@ const ButtonPubRecursoStyled = styled(Button)` ...@@ -96,85 +96,120 @@ const ButtonPubRecursoStyled = styled(Button)`
` `
export default function MenuBar(props){ export default function MenuBar(props) {
const { state, dispatch } = useContext(Store) const { state, dispatch } = useContext(Store)
const menuSobre = [ const menuSobre = [
{ name: "Sobre a Plataforma", href: "sobre" }, { name: "Sobre a Plataforma", href: "sobre" },
{ name: "Portais Parceiros", href: "" }, { name: "Portais Parceiros", href: "" },
{ name: "Termos de Uso", href: "termos" }, { name: "Termos de Uso", href: "termos" },
{ name: "Contato", href: "contato" } { name: "Contato", href: "contato" }
] ]
const menuAjuda = [ const menuAjuda = [
{ name: "Central de Ajuda", href: "ajuda"}, { name: "Central de Ajuda", href: "ajuda" },
{ name: "Publicando Recursos", href: "publicando-recurso"}, { name: "Publicando Recursos", href: "publicando-recurso" },
{ name: "Encontrando Recursos", href: "encontrando-recurso"}, { name: "Encontrando Recursos", href: "encontrando-recurso" },
{ name: "Participando da Rede", href: "participando-da-rede"}, { name: "Participando da Rede", href: "participando-da-rede" },
{ name: "Gerenciando a Conta", href: "gerenciando-conta"} { name: "Gerenciando a Conta", href: "gerenciando-conta" }
] ]
const minhaArea = [ const minhaArea = [];
{ name: "Perfil e Atividades", href: "/perfil", value : '0'},
{ name: "Status e Conquistas", href: "/perfil", value: '1'}, if (state.userIsLoggedIn) {
{ name: "Recursos Publicados", href: "/perfil", value : '2'},
{ name: "Favoritos", href: "/perfil", value : '3'}, // Creates a copy of the permission of the user
{ name: "Coleções", href: "/perfil", value : '4'}, var obj = { ...(state.currentUser.roles)[0] }
{ name: "Rede", href: "/perfil", value : '5'},
{ name: "Configurações", href: "/editarperfil", value : '6'}, //If the user has the permisson of editor or admin, it will display to him/her
{ name: "Área do admin", href:"/admin" , value : '7'} //one more tab in the user area, the admin tab
] if (state.userIsLoggedIn && (obj.id === 3 || obj.id === 7)) {
minhaArea.push(
return( { name: "Perfil e Atividades", href: "/perfil", value: '0' },
<ContainerStyled fluid={true} > { name: "Status e Conquistas", href: "/perfil", value: '1' },
<Left> { name: "Recursos Publicados", href: "/perfil", value: '2' },
<Link to="/"> <ImageStyled src={logo} alt="Plataforma Integrada" /> </Link> { name: "Favoritos", href: "/perfil", value: '3' },
<Dropdown name="Sobre" items={menuSobre}/> { name: "Coleções", href: "/perfil", value: '4' },
<Dropdown name="Ajuda" items={menuAjuda}/> { name: "Rede", href: "/perfil", value: '5' },
<a href="http://educacaoconectada.mec.gov.br/" rel="noopener noreferrer" target="_blank" > { name: "Configurações", href: "/editarperfil", value: '6' },
<ButtonStyled >Educação Conectada</ButtonStyled> { name: "Área do admin", href: "/admin", value: '7' }
</a> )
<Link to="/loja"> } else {
<ButtonStyled>Lojinha</ButtonStyled> minhaArea.push(
</Link> { name: "Perfil e Atividades", href: "/perfil", value: '0' },
<ButtonStyled onClick={props.openSearchBar} ><IconSearchStyled />Buscar</ButtonStyled> { name: "Status e Conquistas", href: "/perfil", value: '1' },
</Left> { name: "Recursos Publicados", href: "/perfil", value: '2' },
<Right> { name: "Favoritos", href: "/perfil", value: '3' },
{ { name: "Coleções", href: "/perfil", value: '4' },
state.userIsLoggedIn { name: "Rede", href: "/perfil", value: '5' },
? ( { name: "Configurações", href: "/editarperfil", value: '6' },
<> )
<div style={{boxSizing:"border-box"}}> }
<Link to="/termos-publicar-recurso" cameFromPublishButton={true}>
<ButtonPublicarRecurso>
<CloudUploadIcon style={{color:"white", marginLeft : "0"}}/>
<span style={{color : "#fff", textAlign: "center", alignSelf : "center", fontWeight:"500"}} >
PUBLICAR RECURSO
</span>
</ButtonPublicarRecurso> } else {
</Link> minhaArea.push(
</div> { name: "Perfil e Atividades", href: "/perfil", value: '0' },
{ name: "Status e Conquistas", href: "/perfil", value: '1' },
{ name: "Recursos Publicados", href: "/perfil", value: '2' },
{ name: "Favoritos", href: "/perfil", value: '3' },
{ name: "Coleções", href: "/perfil", value: '4' },
{ name: "Rede", href: "/perfil", value: '5' },
{ name: "Configurações", href: "/editarperfil", value: '6' },
)
}
<div>
<Notifications/>
</div>
<MenuList items={minhaArea}/>
</> return (
) <ContainerStyled fluid={true} >
: ( <Left>
<React.Fragment> <Link to="/"> <ImageStyled src={logo} alt="Plataforma Integrada" /> </Link>
<ButtonPubRecursoStyled onClick={props.openLogin}>PUBLICAR RECURSO?</ButtonPubRecursoStyled> <Dropdown name="Sobre" items={menuSobre} />
<ButtonStyled onClick={props.openLogin}><ExitToAppIcon style={{color:"#00bcd4"}}/>Entrar</ButtonStyled> <Dropdown name="Ajuda" items={menuAjuda} />
<ButtonStyled onClick={props.openSignUp}>Cadastre-se</ButtonStyled> <a href="http://educacaoconectada.mec.gov.br/" rel="noopener noreferrer" target="_blank" >
</React.Fragment> <ButtonStyled >Educação Conectada</ButtonStyled>
) </a>
} <Link to="/loja">
<ButtonStyled>Lojinha</ButtonStyled>
</Link>
<ButtonStyled onClick={props.openSearchBar} ><IconSearchStyled />Buscar</ButtonStyled>
</Left>
<Right>
{
state.userIsLoggedIn
? (
<>
<div style={{ boxSizing: "border-box" }}>
<Link to="/termos-publicar-recurso" cameFromPublishButton={true}>
<ButtonPublicarRecurso>
<CloudUploadIcon style={{ color: "white", marginLeft: "0" }} />
<span style={{ color: "#fff", textAlign: "center", alignSelf: "center", fontWeight: "500" }} >
PUBLICAR RECURSO
</span>
</Right> </ButtonPublicarRecurso>
</ContainerStyled> </Link>
); </div>
<div>
<Notifications />
</div>
<MenuList items={minhaArea} />
</>
)
: (
<React.Fragment>
<ButtonPubRecursoStyled onClick={props.openLogin}>PUBLICAR RECURSO?</ButtonPubRecursoStyled>
<ButtonStyled onClick={props.openLogin}><ExitToAppIcon style={{ color: "#00bcd4" }} />Entrar</ButtonStyled>
<ButtonStyled onClick={props.openSignUp}>Cadastre-se</ButtonStyled>
</React.Fragment>
)
}
</Right>
</ContainerStyled>
);
} }
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