From 6e91ab195a343b28eb776089d61915f753831eb1 Mon Sep 17 00:00:00 2001
From: Luis Felipe Risch <lfr20@inf.ufpr.br>
Date: Thu, 1 Oct 2020 13:26:13 -0300
Subject: [PATCH] Added a logic to display certain tabs in user area, depending
on the permissions of the user
---
src/Components/MenuBar.js | 191 ++++++++++++++++++++++----------------
1 file changed, 113 insertions(+), 78 deletions(-)
diff --git a/src/Components/MenuBar.js b/src/Components/MenuBar.js
index 1bc2bd5a..83386941 100644
--- a/src/Components/MenuBar.js
+++ b/src/Components/MenuBar.js
@@ -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>
+ );
}
--
GitLab