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.
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/>.*/
import React, {useContext} from 'react';
import React, { useContext } from 'react';
import { Link } from 'react-router-dom'
import { Container } from 'react-grid-system'
import logo from '../img/logo_small.svg'
......@@ -80,7 +80,7 @@ const Right = styled.span`
margin-right : 10px;
`
const Left = styled.span `
const Left = styled.span`
width: 100%;
display: inline-flex;
align-items: center;
......@@ -96,85 +96,120 @@ const ButtonPubRecursoStyled = styled(Button)`
`
export default function MenuBar(props){
const { state, dispatch } = useContext(Store)
const menuSobre = [
{ name: "Sobre a Plataforma", href: "sobre" },
{ name: "Portais Parceiros", href: "" },
{ name: "Termos de Uso", href: "termos" },
{ name: "Contato", href: "contato" }
]
const menuAjuda = [
{ name: "Central de Ajuda", href: "ajuda"},
{ name: "Publicando Recursos", href: "publicando-recurso"},
{ name: "Encontrando Recursos", href: "encontrando-recurso"},
{ name: "Participando da Rede", href: "participando-da-rede"},
{ name: "Gerenciando a Conta", href: "gerenciando-conta"}
]
const minhaArea = [
{ 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'},
{ name: "Área do admin", href:"/admin" , value : '7'}
]
return(
<ContainerStyled fluid={true} >
<Left>
<Link to="/"> <ImageStyled src={logo} alt="Plataforma Integrada" /> </Link>
<Dropdown name="Sobre" items={menuSobre}/>
<Dropdown name="Ajuda" items={menuAjuda}/>
<a href="http://educacaoconectada.mec.gov.br/" rel="noopener noreferrer" target="_blank" >
<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>
export default function MenuBar(props) {
const { state, dispatch } = useContext(Store)
const menuSobre = [
{ name: "Sobre a Plataforma", href: "sobre" },
{ name: "Portais Parceiros", href: "" },
{ name: "Termos de Uso", href: "termos" },
{ name: "Contato", href: "contato" }
]
const menuAjuda = [
{ name: "Central de Ajuda", href: "ajuda" },
{ name: "Publicando Recursos", href: "publicando-recurso" },
{ name: "Encontrando Recursos", href: "encontrando-recurso" },
{ name: "Participando da Rede", href: "participando-da-rede" },
{ name: "Gerenciando a Conta", href: "gerenciando-conta" }
]
const minhaArea = [];
if (state.userIsLoggedIn) {
// Creates a copy of the permission of the user
var obj = { ...(state.currentUser.roles)[0] }
//If the user has the permisson of editor or admin, it will display to him/her
//one more tab in the user area, the admin tab
if (state.userIsLoggedIn && (obj.id === 3 || obj.id === 7)) {
minhaArea.push(
{ 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' },
{ name: "Área do admin", href: "/admin", value: '7' }
)
} else {
minhaArea.push(
{ 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' },
)
}
</ButtonPublicarRecurso>
</Link>
</div>
} else {
minhaArea.push(
{ 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}/>
</>
)
: (
<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>
)
}
return (
<ContainerStyled fluid={true} >
<Left>
<Link to="/"> <ImageStyled src={logo} alt="Plataforma Integrada" /> </Link>
<Dropdown name="Sobre" items={menuSobre} />
<Dropdown name="Ajuda" items={menuAjuda} />
<a href="http://educacaoconectada.mec.gov.br/" rel="noopener noreferrer" target="_blank" >
<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>
</ContainerStyled>
);
</ButtonPublicarRecurso>
</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