src/Components/TabPanels/UserPageTabs/PanelFavoritos.js

+/*Copyright (C) 2019 Centro de Computacao Cientifica e Software Livre
+Departamento de Informatica - Universidade Federal do Parana
+
+This file is part of Plataforma Integrada MEC.
+
+Plataforma Integrada MEC is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+Plataforma Integrada MEC is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+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, useState, useEffect} from 'react'
+import axios from 'axios'
+import {apiUrl} from '../../../env';
+import LoadingSpinner from '../../LoadingSpinner.js'
+import Template from '../PanelComponents/TemplateRecurso.js'
+import PanelTemplateColecao from '../PanelComponents/TemplateColecao.js'
+
+export default function TabPanelFavoritos (props) {
+    const [loading, handleLoading] = useState(true)
+
+    const [likedLearnObjs, setlikedLearnObjs] = useState([])
+    const [likedLearnObjsSlice, setlikedLearnObjsSlice] = useState([])
+
+    const [likedCollections, setlikedCollections] = useState([])
+    const [likedCollectionsSlice, setlikedCollectionsSlice] = useState([])
+
+    useEffect( () => {
+        axios.all([
+            axios.get((`${apiUrl}/users/` + props.id + '/learning_objects/liked'), props.config),
+            axios.get((`${apiUrl}/users/` + props.id + '/collections/liked'), props.config),
+        ])
+        .then( (responseArr) => {
+                console.log('responseArr favoritos: ', responseArr)
+                if (responseArr[0].headers['access-token']) {
+                    sessionStorage.setItem('@portalmec/accessToken', responseArr[0].headers['access-token'])
+                }
+                setlikedLearnObjs(responseArr[0].data)
+                setlikedLearnObjsSlice(responseArr[0].data.slice(0,4))
+
+                setlikedCollections(responseArr[1].data)
+                setlikedCollectionsSlice(responseArr[1].data.slice(0,4))
+
+                handleLoading(false)
+            },
+            (error) => {
+                handleLoading(false)
+                console.log('error while running axios all')
+            }
+        )
+    }, [])
+
+    const showMoreLikedLearnObj = () => {
+        var sliceLength = likedLearnObjsSlice.length
+        setlikedLearnObjsSlice(likedLearnObjs.slice(0, sliceLength + 4))
+    }
+
+    const showAllLikedLearnObjs = () => {setlikedLearnObjsSlice(likedLearnObjs)}
+
+    const showMoreLikedCollections = () => {
+        var sliceLength = likedCollectionsSlice.length
+        setlikedCollectionsSlice(likedCollections.slice(0, sliceLength + 4))
+    }
+
+    const showAllLikedCollections = () => {setlikedCollectionsSlice(likedCollections)}
+
+    return (
+        <>
+        {
+            loading?
+            (
+                <LoadingSpinner text={'CARREGANDO...'}/>
+            )
+            :
+            (
+                [
+                    <React.Fragment>
+                        <Template
+                            length = {likedLearnObjs.length}
+                            titleText = {"Recursos Favoritados"}
+                            noContentText={<p style={{fontFamily:"Roboto",fontSize:"16px"}}>Quando você favorita um recurso ele aparece nesta seção. Além disso, você
+                            <br/>
+                            aumenta o prestígio dele na Plataforma. Para favoritar, basta clicar no ícone de
+                            <br/>
+                            coração que aparece nos Recursos.
+                            </p>}
+                            slice={likedLearnObjsSlice}
+                            showMore={showMoreLikedLearnObj}
+                            showAll={showAllLikedLearnObjs}
+                        />
+
+                        <PanelTemplateColecao
+                            title={"Coleções favoritadas"}
+                            length={likedCollections.length}
+                            noContentText={"Você ainda não curtiu nenhuma coleção."}
+                            sliceArr={likedCollectionsSlice}
+                            showMore={showMoreLikedCollections}
+                            showAll={showAllLikedCollections}
+                            followed={false}
+                        />
+                    </React.Fragment>
+                ]
+            )
+        }
+        </>
+    )
+}

src/Components/TabPanels/TabPanelGerenciarConta.js → src/Components/TabPanels/UserPageTabs/PanelGerenciarConta.js

+/*Copyright (C) 2019 Centro de Computacao Cientifica e Software Livre
+Departamento de Informatica - Universidade Federal do Parana
+
+This file is part of Plataforma Integrada MEC.
+
+Plataforma Integrada MEC is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+Plataforma Integrada MEC is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+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, {useState} from 'react'
 import Paper from '@material-ui/core/Paper';
 import Button from '@material-ui/core/Button';
-import FormInput from "../FormInput.js"
-import {CompletarCadastroButton} from './TabPanelSolicitarContaProfessor.js'
-import {ButtonCancelar} from './TabPanelEditarPerfil.js'
-import ValidateUserInput from '../FormValidationFunction.js'
+import FormInput from "../../FormInput.js"
+import {CompletarCadastroButton} from './PanelSolicitarContaProfessor.js'
+import {ButtonCancelar} from './PanelEditarPerfil.js'
+import ValidateUserInput from '../../FormValidationFunction.js'
 
 export default function TabPanelGerenciarConta (props) {
     const [senhaAtual, setSenhaAtual] = useState(

src/Components/TabPanels/UserPageTabs/PanelMeusRecursos.js

+/*Copyright (C) 2019 Centro de Computacao Cientifica e Software Livre
+Departamento de Informatica - Universidade Federal do Parana
+
+This file is part of Plataforma Integrada MEC.
+
+Plataforma Integrada MEC is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+Plataforma Integrada MEC is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+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, {useState, useEffect} from 'react'
+import axios from 'axios'
+import {apiUrl} from '../../../env';
+import LoadingSpinner from '../../LoadingSpinner.js'
+import Template from '../PanelComponents/TemplateRecurso.js'
+import TemplateCuradoria from '../PanelComponents/TemplateCuradoria.js'
+
+export default function TabPanelAtividades (props) {
+    const [loading, handleLoading] = useState(true)
+
+    const [learningObjects, setLearningObjects] = useState([]);
+    const [learningObjectsSlice, setLearningObjectsSlice] = useState([])
+
+    const [drafts, setDrafts] = useState([]);
+    const [draftsSlice, setDraftsSlice] = useState([])
+
+    const [curating, setCurating] = useState([]);
+    const [curatingSlice, setCuratingSlice] = useState([])
+
+    useEffect( () => {
+        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?status=submitted'), props.config)
+        ])
+        .then( (responseArr) => {
+                console.log('responseArr Meus recursos: ', responseArr)
+                if (responseArr[0].headers['access-token']) {
+                    sessionStorage.setItem('@portalmec/accessToken', responseArr[0].headers['access-token'])
+                }
+
+                setLearningObjects(responseArr[0].data)
+                setLearningObjectsSlice(responseArr[0].data.slice(0, 4))
+
+                setDrafts(responseArr[1].data)
+                setDraftsSlice(responseArr[1].data.slice(0, 4))
+
+                setCurating(responseArr[2].data)
+                setCuratingSlice(responseArr[2].data.slice(0, 4))
+
+                handleLoading(false)
+            },
+            (error) => {
+                handleLoading(false)
+                console.log('error while running axios all')
+            }
+        )
+    }, [])
+
+    const showMoreLearnObj = () => {
+        var sliceLength = learningObjectsSlice.length
+        setLearningObjectsSlice(learningObjects.slice(0, sliceLength + 4))
+    }
+
+    const showAllLearnObj = () => {setLearningObjectsSlice(learningObjects)}
+
+    const showMoreDrafts = () => {
+        var sliceLength = draftsSlice.length
+        setDraftsSlice(drafts.slice(0, sliceLength + 4))
+    }
+
+    const showAllDrafts = () => {setDraftsSlice(drafts)}
+
+    const showMoreCurating = () => {
+        var sliceLength = curatingSlice.length
+        setCuratingSlice(curating.slice(0, sliceLength + 4))
+    }
+
+    const showAllCurating = () => {setCuratingSlice(curating)}
+
+    return (
+        <>
+            {
+                loading ?
+                (
+                    <LoadingSpinner text={'Carregando Recursos'}/>
+                )
+                :
+                (
+                    [
+                        <React.Fragment>
+                            <Template
+                                length = {learningObjects.length}
+                                titleText = {learningObjects.length == 1 ? "Recurso Publicado" : "Recursos Publicados"}
+                                noContentText={"Você ainda não publicou nenhum Recurso!"}
+                                slice={learningObjectsSlice}
+                                showMore={showMoreLearnObj}
+                                showAll={showAllLearnObj}
+                            />
+
+                            <Template
+                                length = {drafts.length}
+                                titleText = {drafts.length == 1 ? "Rascunho Publicado" : "Rascunhos Publicados"}
+                                noContentText={"Você não tem nenhum recurso sendo editado."}
+                                slice={draftsSlice}
+                                showMore={showMoreDrafts}
+                                showAll={showAllDrafts}
+                            />
+
+                            <TemplateCuradoria
+                                length={curating.length}
+                                titleText = {curating.length === 1 ? "Recurso sendo avaliado pela curadoria" : "Recursos sendo avaliados pela curadoria"}
+                                noContentText={"Você não tem nenhum recurso sendo avaliado pelos curadores."}
+                                sliceArr={curatingSlice}
+                                showMore={showMoreCurating}
+                                showAll={showAllCurating}
+                            />
+                        </React.Fragment>
+                    ]
+                )
+            }
+        </>
+    )
+}

src/Components/TabPanels/UserPageTabs/PanelRede.js

+/*Copyright (C) 2019 Centro de Computacao Cientifica e Software Livre
+Departamento de Informatica - Universidade Federal do Parana
+
+This file is part of Plataforma Integrada MEC.
+
+Plataforma Integrada MEC is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+Plataforma Integrada MEC is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+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, useState, useEffect} from 'react'
+import axios from 'axios'
+import {apiUrl, apiDomain} from '../../../env';
+import LoadingSpinner from '../../LoadingSpinner.js'
+import ContainerRedeVazia from './ContainerRedeVazia.js'
+import PanelTemplateRede from '../PanelComponents/TemplateRede.js'
+
+export default function TabPanelRede (props) {
+    const [loading, handleLoading] = useState(true)
+
+    const [followingList, setFollowing] = useState([])
+    const [followingSlice, setFollowingSlice] = useState([])
+
+    const [followersList, setFollowers] = useState([])
+    const [followersSlice, setFollowersSlice] = useState([])
+
+    const showMoreFollowing = () => {
+        var sliceLength = followingSlice.length
+        setFollowingSlice(followingList.slice(0, sliceLength + 4))
+    }
+    const showAllFollowing = () => {setFollowingSlice(followingList)}
+
+        const showMoreFollowers = () => {
+        var sliceLength = followersSlice.length
+        setFollowersSlice(followersList.slice(0, sliceLength + 4))
+    }
+    const showAllFollowers = () => {setFollowersSlice(followersList)}
+
+
+    useEffect( () => {
+        axios.all([
+            axios.get((`${apiUrl}/users/` + props.id + '/following/User'), props.config),
+            axios.get((`${apiUrl}/users/` + props.id + '/followers'), props.config)
+        ])
+        .then( (responseArr) => {
+                console.log('responseArr Rede: ', responseArr)
+                if (responseArr[0].headers['access-token']) {
+                    sessionStorage.setItem('@portalmec/accessToken', responseArr[0].headers['access-token'])
+                }
+
+                setFollowing(responseArr[0].data)
+                setFollowingSlice(responseArr[0].data.slice(0,4))
+
+
+                setFollowers(responseArr[1].data)
+                setFollowersSlice(responseArr[1].data.slice(0,4))
+
+                handleLoading(false)
+            },
+            (error) => {
+                handleLoading(false)
+                console.log('error while running axios all')
+            }
+        )
+    }, [])
+
+    return (
+        <>
+        {
+            loading ?
+            (
+                [
+                    <LoadingSpinner text={'CARREGANDO...'}/>
+                ]
+            )
+            :
+            (
+                [
+                    <>
+                    {
+                        followingList.length == 0 && followersList.length == 0 ?
+                        (
+                            [
+                                <>
+                                    <ContainerRedeVazia/>
+                                </>
+                            ]
+                        )
+                        :
+                        (
+                            [
+                                <React.Fragment>
+                                    <PanelTemplateRede
+                                        title={followersList.length == 1 ? "Seguidor" : "Seguidores"}
+                                        length={followersList.length}
+                                        sliceArr={followersSlice}
+                                        showMore={showMoreFollowers}
+                                        showAll={showAllFollowers}
+                                        follower={true}
+                                        noContentText={'Você não possui nenhum seguidor'}
+                                    />
+
+                                <PanelTemplateRede
+                                        title={"Seguindo"}
+                                        length={followingList.length}
+                                        sliceArr={followingSlice}
+                                        showMore={showMoreFollowing}
+                                        showAll={showAllFollowing}
+                                        follower={false}
+                                        noContentText={'Você ainda não segue nenhum usuário'}
+                                    />
+                                </React.Fragment>
+
+                            ]
+                        )
+                    }
+                    </>
+                ]
+            )
+        }
+        </>
+    )
+}

src/Components/TabPanels/TabPanelSolicitarContaProfessor.js → src/Components/TabPanels/UserPageTabs/PanelSolicitarContaProfessor.js

+/*Copyright (C) 2019 Centro de Computacao Cientifica e Software Livre
+Departamento de Informatica - Universidade Federal do Parana
+
+This file is part of Plataforma Integrada MEC.
+
+Plataforma Integrada MEC is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+Plataforma Integrada MEC is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+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 { Store } from '../../Store.js';
+import { Store } from '../../../Store.js';
 import styled from 'styled-components'
 import Button from '@material-ui/core/Button';
 

src/Components/TabPanels/UserPageTabs/TabRedeImgDiv.js

+/*Copyright (C) 2019 Centro de Computacao Cientifica e Software Livre
+Departamento de Informatica - Universidade Federal do Parana
+
+This file is part of Plataforma Integrada MEC.
+
+Plataforma Integrada MEC is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+Plataforma Integrada MEC is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+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 from 'react'
+
+export default function TabRedeImgDiv (props) {
+    return (
+        <div>
+            <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/Contact.js

@@ -16,17 +16,12 @@ 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, { Component, useState, useEffect } from 'react';
-import styled from 'styled-components';
-import Banner1 from '../img/banner-sobre.jpg';
-import { TextField } from '@material-ui/core';
-import FormInput from "../Components/FormInput.js";
-import Formulario from "../Components/ContactForm.js";
-import axios from 'axios'
-import {apiUrl} from '../env';
+import React from "react";
+import styled from "styled-components";
+import Banner1 from "../img/banner-sobre.jpg";
+import InputFormulario from "../Components/ContactForm.js";
 
-
-const Seção1 =  styled.div `
+const Secao1 = styled.div`
   width: 100%;
   background-image: url(${Banner1});
   background-size: cover;
@@ -53,19 +48,18 @@ const Seção1 =  styled.div `
     font-family: Roboto, sans-serif;
     font-size: 30px;
     font-weight: lighter;
-
   }
-`
+`;
 
-const Seção2 = styled.div `
+const Secao2 = styled.div`
   height: 708px;
   background-color: #f4f4f4;
   display: flex;
   justify-content: center;
   align-items: center;
-`
+`;
 
-const Seção3 = styled.div `
+const Secao3 = styled.div`
   height: 127px;
   background-color: #f4f4f4;
   color: #666;
@@ -74,16 +68,12 @@ const Seção3 = styled.div `
   text-align: center;
   padding-top: 70px;
 
-
   p {
     margin: 0 0 10px 0;
   }
+`;
 
-
-`
-
-
-const Formulário = styled.div `
+const Formulario = styled.div`
   background-color: #fff;
   box-shadow: 0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);
   padding: 40px;
@@ -144,39 +134,40 @@ const Formulário = styled.div `
     text-align: center;
 
   }
-`
-
-
-
+`;
 
 function Contact(props) {
-
-
-
   return (
     <>
-      <link href="https://fonts.googleapis.com/css?family=Kalam|Pompiere|Roboto:300,400&display=swap" rel="stylesheet"/>
-        <Seção1>
+      <link
+        href="https://fonts.googleapis.com/css?family=Kalam|Pompiere|Roboto:300,400&display=swap"
+        rel="stylesheet"
+      />
+      <Secao1>
         <h2>CONTATO</h2>
         <h3>Quer enviar uma mensagem?</h3>
-        </Seção1>
-
-        <Seção2>
-          <Formulário noValidate autoComplete="off">
-            <h2>Entre em contato para enviar dúvidas,<br/>sugestões ou críticas</h2>
-            <Formulario/>
-          </Formulário>
-        </Seção2>
-
-        <Seção3>
-
+      </Secao1>
+
+      <Secao2>
+        <Formulario noValidate autoComplete="off">
+          <h2>
+            Entre em contato para enviar dúvidas,
+            <br />
+            sugestões ou críticas
+          </h2>
+          <InputFormulario />
+        </Formulario>
+      </Secao2>
+
+      <Secao3>
         <span>MEC - Ministério da Educação </span>
-          <p>Endereço: Esplanada dos Ministérios Bloco L - Ed.Sede e Anexos. CEP: 70.047-900 - Brasília/DF. Telefone: 0800 616161</p>
-
-        </Seção3>
+        <p>
+          Endereço: Esplanada dos Ministérios Bloco L - Ed.Sede e Anexos. CEP:
+          70.047-900 - Brasília/DF. Telefone: 0800 616161
+        </p>
+      </Secao3>
     </>
   );
-
 }
 
 export default Contact;

src/Pages/EditProfilePage.js

 import React, {useState, useContext, useEffect} from 'react';
 import styled from 'styled-components'
 import {Link} from 'react-router-dom'
-import Breadcrumbs from '@material-ui/core/Breadcrumbs';
-import {BreadcrumbsDiv, StyledBreadcrumbs} from './UserPage.js'
 import Tabs from '@material-ui/core/Tabs'
 import Tab from '@material-ui/core/Tab';
 import Paper from '@material-ui/core/Paper';
-import TabPanelEditarPerfil from '../Components/TabPanels/TabPanelEditarPerfil.js'
-import TabPanelSolicitarContaProfessor from '../Components/TabPanels/TabPanelSolicitarContaProfessor.js'
-import TabPanelGerenciarConta from '../Components/TabPanels/TabPanelGerenciarConta.js'
+import TabPanelEditarPerfil from '../Components/TabPanels/UserPageTabs/PanelEditarPerfil.js'
+import TabPanelSolicitarContaProfessor from '../Components/TabPanels/UserPageTabs/PanelSolicitarContaProfessor.js'
+import TabPanelGerenciarConta from '../Components/TabPanels/UserPageTabs/PanelGerenciarConta.js'
 import Snackbar from '@material-ui/core/Snackbar';
 import MuiAlert from '@material-ui/lab/Alert';
 import {Alert} from '../Components/LoginModal.js'
 import Grid from '@material-ui/core/Grid'
+import CustomizedBreadcrumbs from '../Components/TabPanels/Breadcrumbs.js'
 
 export default function EditProfilePage (props) {
     const [tabs, setTabs] = useState([
@@ -38,22 +37,10 @@ export default function EditProfilePage (props) {
             >
                 <Alert severity="success" style={{backgroundColor:"#00acc1"}}>Senha alterada com sucesso!</Alert>
             </Snackbar>
-            <BreadcrumbsDiv>
-                <StyledBreadcrumbs>
-                    <Link to="/" style={{color:"#00bcd4", textDecoration:"none"}}>
-                        Página Inicial
-                    </Link>
-                    <span>
-                        Minha área
-                    </span>
-                    <span>
-                        Configurações da Conta
-                    </span>
-                    <span>
-                        {tabs[tabValue]}
-                    </span>
-                </StyledBreadcrumbs>
-            </BreadcrumbsDiv>
+
+            <CustomizedBreadcrumbs
+                values={["Minha área", "Configurações da Conta", tabs[tabValue]]}
+            />
 
             <div style={{justifyContent:"center", width:"1170px", margin:"auto"}}>
             <MainContainerDiv container spacing={3}>

src/Pages/PasswordRecoveryPage.js

 import React, {useState, useContext} from 'react'
-import {HeaderDiv, BreadcrumbsDiv, StyledBreadcrumbs} from './UserPage.js'
-import Breadcrumbs from '@material-ui/core/Breadcrumbs';
+import {BackgroundDiv} from '../Components/TabPanels/StyledComponents.js'
 import {Link} from 'react-router-dom'
 import Paper from '@material-ui/core/Paper';
 import styled from 'styled-components'
 import FormInput from "../Components/FormInput.js"
 import ValidateUserInput from '../Components/FormValidationFunction.js'
-import {CompletarCadastroButton} from '../Components/TabPanels/TabPanelSolicitarContaProfessor.js'
+import {CompletarCadastroButton} from '../Components/TabPanels/UserPageTabs/PanelSolicitarContaProfessor.js'
 import Default from '../Components/PasswordRecoveryComponents/Default.js'
 import Success from '../Components/PasswordRecoveryComponents/Success.js'
 import {Store} from '../Store.js'
 import Error from '../Components/PasswordRecoveryComponents/Error.js'
+import CustomizedBreadcrumbs from '../Components/TabPanels/Breadcrumbs.js'
 
 export default function PasswordRecoveryPage (props) {
     const {state, dispatch} = useContext(Store)
@@ -73,18 +73,11 @@ export default function PasswordRecoveryPage (props) {
 
     return (
         <>
-            <HeaderDiv>
+            <BackgroundDiv>
                 <div style={{minWidth:"1170px"}}>
-                    <BreadcrumbsDiv>
-                        <StyledBreadcrumbs>
-                            <Link to="/" style={{color:"#00bcd4", textDecoration:"none"}}>
-                                Página Inicial
-                            </Link>
-                            <span>
-                                Recuperar senha
-                            </span>
-                        </StyledBreadcrumbs>
-                    </BreadcrumbsDiv>
+                    <CustomizedBreadcrumbs
+                        values={["Recuperar senha"]}
+                    />
                 </div>
 
                 <div style={{justifyContent:"center", textAlign:"center", maxWidth:"600px", margin:"auto"}}>
@@ -94,7 +87,7 @@ export default function PasswordRecoveryPage (props) {
                     </CardDiv>
                 </Paper>
                 </div>
-            </HeaderDiv>
+            </BackgroundDiv>
         </>
     )
 }

src/Pages/PublicUserPage.js

+/*Copyright (C) 2019 Centro de Computacao Cientifica e Software Livre
+Departamento de Informatica - Universidade Federal do Parana
+
+This file is part of Plataforma Integrada MEC.
+
+Plataforma Integrada MEC is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+Plataforma Integrada MEC is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+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, {useEffect, useState} from 'react'
+import styled from 'styled-components'
+import axios from 'axios'
+import {apiUrl, apiDomain} from '../env';
+import CustomizedBreadcrumbs from '../Components/TabPanels/Breadcrumbs.js'
+import {Link} from 'react-router-dom';
+import Grid from '@material-ui/core/Grid';
+import FollowButton from '../Components/ContactButtons/FollowButton.js'
+import FollowingButton from '../Components/ContactButtons/FollowingButton.js'
+import FollowersCountButton from '../Components/ContactButtons/FollowersCountButton.js'
+import noAvatar from "../img/default_profile.png";
+import Button from '@material-ui/core/Button';
+import Tab from '@material-ui/core/Tab';
+import Tabs from '@material-ui/core/Tabs';
+import TabInicio from '../Components/TabPanels/PublicUserPageTabs/TabInicio.js'
+import TabRecursos from '../Components/TabPanels/PublicUserPageTabs/TabRecursos.js'
+import TabColecoes from '../Components/TabPanels/PublicUserPageTabs/TabColecoes.js'
+import TabRede from '../Components/TabPanels/PublicUserPageTabs/TabRede.js'
+import CheckDecagram from '../img/check-decagram-blue.svg'
+import ReportButton from '../Components/ReportButton.js'
+import {HeaderContainer, UserProfileContainer, CoverContainer, UserProfileInfoDiv, StyledTabs, CheckTeacherDiv, RodapeDiv, NavBarContentContainer, BackgroundDiv} from '../Components/TabPanels/StyledComponents.js'
+
+const RenderFollowContainer = (boolUserFollowed, id, followCount) => {
+    return (
+        <FollowContainer>
+            <>
+            {
+                boolUserFollowed ?
+                (
+                    [
+                        <FollowingButton followedID={id}/>
+                    ]
+                )
+                :
+                (
+                    [
+                        <FollowButton followerID={id}/>
+                    ]
+                )
+            }
+            <FollowersCountButton followCount={followCount}/>
+            </>
+        </FollowContainer>
+    )
+}
+
+const RenderProfileAvatar = (userAvatar) => {
+    return (
+        <ProfileAvatarDiv>
+            <img src={userAvatar ? apiDomain + userAvatar : noAvatar} alt = "user avatar" style={{height : "inherit", width : "inherit", border:"0", verticalAlign:"middle"}}/>
+        </ProfileAvatarDiv>
+    )
+}
+
+const RenderUserProfileInfo = (userName) => {
+    return (
+        <UserProfileInfoDiv>
+            <p
+            style={{fontSize:"28px", color:"#fff", marginBottom : "2px", fontWeight:"500", borderRadius : "5px"}}
+            >
+                {userName}
+            </p>
+        </UserProfileInfoDiv>
+    )
+}
+
+const RenderCheckTeacher = (submitter_request) => {
+    if (submitter_request === "accepted") {
+        return (
+            <CheckTeacherDiv>
+                <p>
+                    <span>
+                        <img src={CheckDecagram}/>
+                    </span>
+                    Professor(a)
+                </p>
+            </CheckTeacherDiv>
+        )
+    }
+}
+
+export default function PublicUserPage (props) {
+    /*user info variables--------------------------------------*/
+    const id = props.match.params.userId
+    const [userData, setUserData] = useState({})
+    const fillUserInfo = (data) => {
+        setUserData(data)
+    }
+    /*---------------------------------------------------------*/
+
+    /*content control variables--------------------------------*/
+    const [tabs, setTabs] = useState([
+        'Início', 'Recursos', 'Coleções', 'Rede'
+    ])
+    const [tabValue, setTabValue] = useState(0);
+    const handleChangeTab = (event, newValue) => {
+        setTabValue(newValue)
+    }
+    /*---------------------------------------------------------*/
+
+    /*content variables--------------------------------*/
+    const [learningObjArr, setLearningObjects] = useState([])
+    const handleLearningObjects = (data) => {setLearningObjects(data)}
+    const [collectionsArr, setCollections] = useState([])
+    const handleCollections = (data) => {setCollections(data)}
+    /*---------------------------------------------------------*/
+
+
+    /*Component Will Mount*/
+    useEffect( () => {
+        let config = {
+            headers : {
+                'Accept': 'application/json',
+                'Content-Type': 'application/json',
+                'Access-Token': sessionStorage.getItem('@portalmec/accessToken'),
+                'Client': sessionStorage.getItem('@portalmec/clientToken'),
+                'Uid': sessionStorage.getItem('@portalmec/uid'),
+            }
+        }
+        axios.all([
+            axios.get( (`${apiUrl}/users/` + id ), config ),
+            axios.get( (`${apiUrl}/users/` + id + '/learning_objects'), {'Accept': 'application/json','Content-Type':'application/json'}),
+            axios.get( (`${apiUrl}/users/` + id + '/collections'), {'Accept': 'application/json','Content-Type':'application/json'})
+        ])
+        .then( (responseArr) => {
+
+            console.log(responseArr)
+            fillUserInfo(responseArr[0].data)
+
+            console.log(responseArr[1])
+            handleLearningObjects(responseArr[1].data)
+
+            console.log(responseArr[2])
+            handleCollections(responseArr[2].data)
+            },
+            (error) => {
+                console.log('error while running ComponentDidMout')
+            }
+        )
+    }, [])
+    /*---------------------------------------------------------*/
+
+    return (
+        <React.Fragment>
+            <link href="https://fonts.googleapis.com/css?family=Roboto:100,400,500&display=swap" rel="stylesheet"/>
+            <BackgroundDiv>
+                <CustomizedBreadcrumbs
+                    values={["Usuário Público", tabs[tabValue]]}
+                />
+                <Grid container spacing={2}>
+                    <Grid item xs={12}>
+                        <div style={{padding : "10px 0 8px 0"}}>
+                            <UserProfileContainer>
+                                <HeaderContainer>
+                                    <>
+                                    {RenderFollowContainer(userData.followed, id, userData.follows_count)}
+                                    {RenderProfileAvatar(userData.avatar ? userData.avatar : noAvatar)}
+                                    <CoverContainer>
+                                        {userData.cover && <img src={apiDomain + userData.cover} alt = '' style= {{width:"100%", height:"100%", objectFit : "cover" }}/>}
+                                    </CoverContainer>
+                                    {RenderUserProfileInfo(userData.name)}
+                                    </>
+                                </HeaderContainer>
+                                {RenderCheckTeacher(userData.submitter_request)}
+                                <RodapeDiv>
+                                    <NavBarContentContainer>
+                                        <StyledTabs
+                                            value ={tabValue}
+                                            onChange ={handleChangeTab}
+                                            indicatorColor ="primary"
+                                            textColor ="primary"
+                                            variant = "fullwidth"
+                                            scrollButtons = "desktop"
+                                            TabIndicatorProps={{style : {background:"#00bcd4"}}}
+                                        >
+                                            {
+                                                tabs.map( (tab) =>
+                                                    <Tab label ={tab} key={tab}
+                                                        disabled={tab === "Recursos" && learningObjArr.length === 0 || tab === "Coleções" && collectionsArr.length === 0}
+                                                        />
+                                                )
+                                            }
+                                        </StyledTabs>
+                                    </NavBarContentContainer>
+                                    <ReportButton className="report-button" complainableId={userData.id} complainableType={"User"}/>
+                                </RodapeDiv>
+                            </UserProfileContainer>
+                        </div>
+                    </Grid>
+
+                    <Grid item xs={12}>
+                        {tabValue === 0 &&
+                            <TabInicio id={id} user={userData} learningObjs={learningObjArr} collections={collectionsArr}/>}
+                        {tabValue === 1 &&
+                            <TabRecursos count={userData.learning_objects_count} learningObjs={learningObjArr}/>}
+                        {tabValue === 2 &&
+                            <TabColecoes count={userData.collections_count} collections={collectionsArr}
+                                />}
+                        {tabValue === 3 &&
+                            <TabRede id={id} username={userData.name}/>}
+
+                    </Grid>
+                </Grid>
+            </BackgroundDiv>
+        </React.Fragment>
+    )
+}
+
+
+const ProfileAvatarDiv = styled.div`
+    overflow : hidden;
+    border-radius : 100%;
+    bottom : -10px;
+    left : 20px;
+    z-index : 10;
+    box-sizing : content-box;
+    position : absolute;
+    width : 150px;
+    height : 150px;
+    border : 8px solid #fff;
+    outline : 0;
+    background-color : #fff;
+`
+
+
+const FollowContainer = styled.div`
+    padding : 4px 10px;
+    right : 0;
+    position : absolute;
+    z-index : 1;
+`

src/Pages/PublicationPermissionsPage.js

@@ -15,16 +15,16 @@ 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, {useState, useContext}  from 'react';
-import Card from '@material-ui/core/Card';
-import CardActions from '@material-ui/core/CardActions';
-import { Button } from '@material-ui/core';
-import LabeledCheckbox from "../Components/Checkbox.js"
-import styled from 'styled-components'
-import {device} from '../Components/device.js'
-import { Store } from '../Store.js';
-import IllegalContentModal from '../Components/IllegalContentModal.js'
-import PublicationPermissionsContent from '../Components/PublicationPermissionsContent.js'
+import React, { useState, useContext } from "react";
+import Card from "@material-ui/core/Card";
+import CardActions from "@material-ui/core/CardActions";
+import { Button } from "@material-ui/core";
+import LabeledCheckbox from "../Components/Checkbox.js";
+import styled from "styled-components";
+import { device } from "../Components/device.js";
+import { Store } from "../Store.js";
+import IllegalContentModal from "../Components/IllegalContentModal.js";
+import PublicationPermissionsContent from "../Components/PublicationPermissionsContent.js";
 
 const CardStyled = styled(Card)`
   box-sizing: border-box;
@@ -36,102 +36,141 @@ const CardStyled = styled(Card)`
     width: 100%;
     height: 100%;
   }
- `
+`;
 
 const Styledspan = styled.span`
-    font-family: 'Roboto', sans serif;
+  font-family: "Roboto", sans serif;
   font-style: normal;
   font-weight: 500;
   line-height: 22px;
   font-size: 15px;
-    letter-spacing: .01em;
-`
+  letter-spacing: 0.01em;
+`;
 
 const Styledhr = styled.hr`
   color: #dadada;
-`
+`;
 
 export default function PermissionsContainer(props) {
-      const {state, dispatch} = useContext(Store)
+  const { state, dispatch } = useContext(Store);
   const [unavailableCheckbox, setCheckboxAvailability] = useState(true);
   const [unavailableButton, setButtonAvailability] = useState(true);
   const [radios, setRadioValues] = useState({
-        radio1 : '',
-        radio2 : '' ,
-        radio3 : ''
-      }
-    )
-    const [modalOpen, setModalOpen] = useState(false)
+    radio1: "",
+    radio2: "",
+    radio3: ""
+  });
+  const [modalOpen, setModalOpen] = useState(false);
 
   const closeModal = () => {
-        setModalOpen(false)
-        props.history.push('/termos-publicar-recurso')
-        window.scrollTo(0, 0)
-    }
+    setModalOpen(false);
+    props.history.push("/termos-publicar-recurso");
+    window.scrollTo(0, 0);
+  };
 
   const handleChecked = e => {
     setButtonAvailability(!unavailableButton);
-    }
+  };
 
-    const handleRadios = (e) => {
-        let temp = radios
-        temp[e.target.name] = e.target.value
+  const handleRadios = e => {
+    let temp = radios;
+    temp[e.target.name] = e.target.value;
 
-        setRadioValues(temp)
+    setRadioValues(temp);
 
-
-        setCheckboxAvailability(!(radios.radio1 && radios.radio2 && radios.radio3))
-
-    }
+    setCheckboxAvailability(!(radios.radio1 && radios.radio2 && radios.radio3));
+  };
 
   const handleAgreement = () => {
-
-        if(radios.radio1 == 'Sim' || radios.radio2 == 'Sim' || radios.radio3 == 'Sim'){
-                setModalOpen(true)
-        }
-        else{
+    if (
+      radios.radio1 === "Sim" ||
+      radios.radio2 === "Sim" ||
+      radios.radio3 === "Sim"
+    ) {
+      setModalOpen(true);
+    } else {
       dispatch({
-                type: 'USER_AGREED_TO_PUBLICATION_PERMISSIONS',
+        type: "USER_AGREED_TO_PUBLICATION_PERMISSIONS",
         userAgreement: true
-            })
+      });
 
-            props.history.push('/upload')
-        }
+      props.history.push("/upload");
     }
+  };
 
   const redirect = () => {
-        props.history.push('/termos-publicar-recurso')
-    }
+    props.history.push("/termos-publicar-recurso");
+  };
 
   return (
     <>
-        {
-            state.userAgreedToPublicationTerms ?
-            (
+      {state.userAgreedToPublicationTerms ? (
         [
           <>
-                <IllegalContentModal open={modalOpen} handleClose={closeModal} disableBackdropClick={true}/>
-                <div style={{paddingTop:"5vh", paddingBottom:"5vh", backgroundColor :"#f4f4f4"}}>
+            <IllegalContentModal
+              open={modalOpen}
+              handleClose={closeModal}
+              disableBackdropClick={true}
+            />
+            <div
+              style={{
+                paddingTop: "5vh",
+                paddingBottom: "5vh",
+                backgroundColor: "#f4f4f4"
+              }}
+            >
               <div style={{}}>
                 <CardStyled variant="outlined">
                   <PublicationPermissionsContent handleRadios={handleRadios} />
                   <Styledhr />
-                    <CardActions style={{justifyContent:"center", padding:"25px"}}>
+                  <CardActions
+                    style={{ justifyContent: "center", padding: "25px" }}
+                  >
                     <div>
                       <div style={{ fontSize: "14px" }}>
-                                <LabeledCheckbox disabledCheckbox = {unavailableCheckbox}
-                                label={<Styledspan>Li e permito a publicação do meu recurso na Plataforma Integrada de RED do MEC, assim como atesto que o meu recurso atende aos critérios especificados acima.</Styledspan>}
+                        <LabeledCheckbox
+                          disabledCheckbox={unavailableCheckbox}
+                          label={
+                            <Styledspan>
+                              Li e permito a publicação do meu recurso na
+                              Plataforma Integrada de RED do MEC, assim como
+                              atesto que o meu recurso atende aos critérios
+                              especificados acima.
+                            </Styledspan>
+                          }
                           handleChange={handleChecked}
                         />
-                                    <div style={{justifyContent:"center",display:"flex"}}>
-                                        <Button disabled={unavailableButton}
-                                            style={unavailableButton ? {backgroundColor:"#e9e9e9"} : {backgroundColor:"#00bcd4"}}
+                        <div
+                          style={{ justifyContent: "center", display: "flex" }}
+                        >
+                          <Button
+                            disabled={unavailableButton}
+                            style={
+                              unavailableButton
+                                ? { backgroundColor: "#e9e9e9" }
+                                : { backgroundColor: "#00bcd4" }
+                            }
                             onClick={handleAgreement}
                           >
-                                                <Styledspan style = {unavailableButton ? {color:"#666666"} : {color:"#ffffff"}}>Continuar </Styledspan>
+                            <Styledspan
+                              style={
+                                unavailableButton
+                                  ? { color: "#666666" }
+                                  : { color: "#ffffff" }
+                              }
+                            >
+                              Continuar{" "}
+                            </Styledspan>
                           </Button>
-                                            <Button style={{marginLeft:"45px", backgroundColor:"#e9e9e9"}}>
-                                                <Styledspan style={{color:"rgb(102, 102, 102)"}}>Cancelar</Styledspan>
+                          <Button
+                            style={{
+                              marginLeft: "45px",
+                              backgroundColor: "#e9e9e9"
+                            }}
+                          >
+                            <Styledspan style={{ color: "rgb(102, 102, 102)" }}>
+                              Cancelar
+                            </Styledspan>
                           </Button>
                         </div>
                       </div>
@@ -142,15 +181,9 @@ export default function PermissionsContainer (props) {
             </div>
           </>
         ]
-            )
-            :
-            (
-                <>
-                {redirect()}
+      ) : (
+        <>{redirect()}</>
+      )}
     </>
-            )
-        }
-        </>
-
-    )
+  );
 }

src/Pages/Search.js

@@ -16,79 +16,259 @@ 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, { useEffect, useState, useContext } from 'react';
-import axios from 'axios';
+import React, { useEffect, useState, useContext } from "react";
+import axios from "axios";
+import { Link } from "react-router-dom";
+import styled from "styled-components";
+import Paper from "@material-ui/core/Paper";
 
 // import ResourceCard from '../Components/ResourceCard'
 // import CollectionCard from '../Components/CollectionCard'
 // import UserCard from '../Components/UserCard'
-
-import {apiUrl} from '../env';
-import './Styles/Home.css';
-import { Store } from '../Store';
+import Breadcrumbs from "@material-ui/core/Breadcrumbs";
+import { apiUrl } from "../env";
+import "./Styles/Home.css";
+import { Store } from "../Store";
+import { Grid } from "@material-ui/core";
+import Dropdown from 'react-dropdown'
+import 'react-dropdown/style.css'
+import SearchExpansionPanel from "../Components/SearchExpansionPanel/SearchExpansionPanel";
+import ResourceCard from "../Components/ResourceCard";
 
 export default function Search(props) {
+  const { state, dispatch } = useContext(Store);
+  const [results, setResults] = useState([]);
+  const [page] = useState(0);
+  const [resultsPerPage, setResultsPerPage] = useState(12);
+  const [order] = useState("score");
+  const options = [
+  
+    {value:"LearningObject", label:"Recursos"},
+    {value:"Collection", label:"Coleções"},
+    {value:"User", label:"Usuários"}
+    
+  ];
+  const ordenar = [
+    {label:"Mais Estrelas"},
+    {label:"Mais Relevante"},
+    {label:"Mais Baixados"},
+    {label:"Mais Favoritados"},
+    {label:"Mais Recentes"},
+    {label:"Ordem Alfabética"},
+  ];
 
-  const { state, dispatch } = useContext(Store)
-  const [ results, setResults ] = useState([])
-  const [ page, ] = useState(0)
-  const [ resultsPerPage,  ] = useState(12)
-  const [ order,  ] = useState('score')
+  const [defaultOption,setDefaultOption] =useState( options[0]);
+  const [defaultOrder,setDefaultOrder] =useState( ordenar[0]);
+
+  const collectStuff = (tipoBusca=state.search.class,option=undefined) => {
+    
+    axios
+      .get(
+        `${apiUrl}/search?page=${page}&results_per_page=${resultsPerPage}&order=${order}&query=${state.search.query}&search_class=${tipoBusca}`
+      )
+      .then(res => {
+        setResults(res.data);
+        if (option != undefined) {
+          let aux = undefined;
+          for (let i=0; i < options.length;i=i+1){
+
+            console.log("Vamo dale0")
+            if (options[i].label==option){
+              console.log("Vamo dale")
+              setDefaultOption(options[i]);
+
+            }
+          }
+
+        }
+        console.log(res.data);
+        console.log(tipoBusca);
+  })};
 
   useEffect(() => {
     dispatch({
-      type: 'HANDLE_SEARCH_BAR',
-      opened: true
-    })
-
-    const urlParams = new URLSearchParams(window.location.search)
-    const query = urlParams.get('query')
-    const searchClass = urlParams.get('search_class')
+      type: "HANDLE_SEARCH_BAR",
+      opened: false
+    });
 
+    const urlParams = new URLSearchParams(window.location.search);
+    const query = urlParams.get("query");
+    const searchClass = urlParams.get("search_class");
+    console.log(searchClass);
     if (state.search.query !== query || state.search.class !== searchClass) {
       dispatch({
-        type: 'SAVE_SEARCH',
+        type: "SAVE_SEARCH",
         newSearch: {
           query: query,
           class: searchClass
         }
-      }) 
+      });
     }
 
-    return () => dispatch({
-      type: 'HANDLE_SEARCH_BAR',
+    return () =>
+      dispatch({
+        type: "HANDLE_SEARCH_BAR",
         opened: false
-    })
-  },[])
+      });
+  }, []);
+  
 
   useEffect(() => {
-    axios.get(`${apiUrl}/search?page=${page}&results_per_page=${resultsPerPage}&order=${order}&query=${state.search.query}&search_class=${state.search.class}`)
-    .then( res => { 
-      setResults(res.data)
-    })
+    collectStuff();
+  }, [state.search, resultsPerPage]);
+
 
-  },[state.search])
 
 
   return (
+    <div style={{ backgroundColor: "#f4f4f4" }}>
       <React.Fragment>
-      <h1>Search for {state.search.query!=='*'?state.search.query:'all'} in {state.search.class}</h1>
-      {
-        state.search.class === 'LearningObject' &&
+        <h1>
+          Search for {state.search.query !== "*" ? state.search.query : "all"}{" "}
+          in {state.search.class}
+        </h1>
+        {state.search.class === "LearningObject" && (
           <ul>
-          {results.map((res)=><li key={res.id}> {res.name} </li>)}
+            {results.map(res => (
+              <li key={res.id}> {res.name} </li>
+            ))}
           </ul>
-      }
-      {state.search.class === 'Collection' &&
+        )}
+        {state.search.class === "Collection" && (
           <ul>
-          {results.map((res)=><li key={res.id}> {res.name} </li>)}
+            {results.map(res => (
+              <li key={res.id}> {res.name} </li>
+            ))}
           </ul>
-      }  
-      {state.search.class === 'User' &&
+        )}
+        {state.search.class === "User" && (
           <ul>
-          {results.map((res)=><li key={res.id}> {res.name} </li>)}
+            {results.map(res => (
+              <li key={res.id}> {res.name} </li>
+            ))}
           </ul>
-      }
+        )}
       </React.Fragment>
-  )
+
+      <Principal>
+        <BreadCrumbsDiv>
+          <StyledBreadCrumbs>
+            <Link to="/">Página Inicial</Link>
+            <span>Busca</span>
+          </StyledBreadCrumbs>
+        </BreadCrumbsDiv>
+        <HeaderFilters elevation={4} square>
+          <Grid container spacing={0} style={{ height: "100%" }}>
+            <Grid
+              item
+              xs={4}
+              style={{
+                display: "flex",
+                flexDirection: "column",
+                justifyContent: "center"
+              }}
+            >
+              <div style={{display:"flex",flexDirection:"row"}}>
+                <div style={{ textAlign: "left" }}>Mostrar</div>
+                <Dropdown  options={options} onChange={()=>{collectStuff(options.value,options.label )}}  value={defaultOption} placeholder="Select an option" />
+                
+              </div>
+            </Grid>
+            <Grid
+              item
+              xs={4}
+              style={{
+                display: "flex",
+                flexDirection: "column",
+                justifyContent: "center"
+              }}
+            >
+              <div>Numero</div>
+            </Grid>
+            <Grid
+              item
+              xs={4}
+              style={{
+                display: "flex",
+                flexDirection: "column",
+                justifyContent: "center"
+              }}
+            >
+              <div style={{ textAlign: "right" }}>Ordenar por:</div>
+              <Dropdown  options={ordenar} onChange={()=>{collectStuff(ordenar.label )}}  value={defaultOrder} placeholder="Select an order "/>
+            </Grid>
+          </Grid>
+        </HeaderFilters>
+        <GridBusca container spacing={2}>
+          <Grid item md={3} xs={12}>
+            <Paper elevation={4} square>
+              <SearchExpansionPanel />
+            </Paper>
+          </Grid>
+          <Grid item  md={9} xs={12}>
+            <Grid container spacing={2}>
+              {results.map(card => (
+                <Grid item md={4} xs={6} key={card.id}>
+                  <ResourceCard
+                    name={card.name}
+                    rating={card.score}
+                    type={card.object_type}
+                    description={card.description}
+                    thumbnail={card.thumbnail}
+                    author={card.author}
+                    avatar={card.publisher.avatar}
+                  />
+                </Grid>
+              ))}
+            </Grid>
+            <button onClick={() => setResultsPerPage(resultsPerPage + 12)}>
+              Número de recursos mostrados {resultsPerPage}
+            </button>
+          </Grid>
+        </GridBusca>
+      </Principal>
+    </div>
+  );
 }
+
+const GridBusca = styled(Grid)`
+  color: #666;
+
+  h4 {
+    padding: 0 15px;
+    font-size: 18px;
+    margin-block: 10px;
+    text-transform: uppercase;
+  }
+`;
+
+const HeaderFilters = styled(Paper)`
+  height: 60px;
+  text-align: center;
+  background-color: #fff;
+  margin-bottom: 30px;
+  color: #666;
+`;
+
+const StyledBreadCrumbs = styled(Breadcrumbs)`
+  display: flex;
+  justify-content: flex-start;
+  max-width: 1170px;
+  span {
+    color: #a5a5a5;
+  }
+  a {
+    color: #00bcd4;
+    text-decoration: none;
+  }
+`;
+
+const BreadCrumbsDiv = styled.div`
+  padding: 10px;
+  display: flex;
+`;
+
+const Principal = styled.div`
+  width: 1170px;
+  margin-inline: auto;
+`;

src/Pages/TabsHelp/TabManageAc.js

@@ -16,56 +16,63 @@ 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, { Component, useState, useEffect } from 'react';
-import styled from 'styled-components';
-import Tabs from '@material-ui/core/Tabs'
-import Tab from '@material-ui/core/Tab';
-import Breadcrumbs from '@material-ui/core/Breadcrumbs';
-import Grid from '@material-ui/core/Grid';
-import GerenciandoConta from '../../img/ajuda/Gerenciando_a_conta.png';
-import Why from '../../Components/HelpCenter/TabsManageAc/Why'
-import HowToDo from '../../Components/HelpCenter/TabsManageAc/HowToDo';
-import HowToChange from '../../Components/HelpCenter/TabsManageAc/HowToChange';
-import HowToAccess from '../../Components/HelpCenter/TabsManageAc/HowToAccess';
-import Forget from '../../Components/HelpCenter/TabsManageAc/Forget';
-import CardParticipando from '../../Components/HelpCenter/Cards/CardParticipando';
-import CardEncontrando from '../../Components/HelpCenter/Cards/CardEncontrando';
-import CardPublicando from '../../Components/HelpCenter/Cards/CardPublicando';
-
-
-
-
-
-
+import React, { Component, useState, useEffect } from "react";
+import styled from "styled-components";
+import Tabs from "@material-ui/core/Tabs";
+import Tab from "@material-ui/core/Tab";
+import Breadcrumbs from "@material-ui/core/Breadcrumbs";
+import Grid from "@material-ui/core/Grid";
+import GerenciandoConta from "../../img/ajuda/Gerenciando_a_conta.png";
+import Why from "../../Components/HelpCenter/TabsManageAc/Why";
+import HowToDo from "../../Components/HelpCenter/TabsManageAc/HowToDo";
+import HowToChange from "../../Components/HelpCenter/TabsManageAc/HowToChange";
+import HowToAccess from "../../Components/HelpCenter/TabsManageAc/HowToAccess";
+import Forget from "../../Components/HelpCenter/TabsManageAc/Forget";
+import CardParticipando from "../../Components/HelpCenter/Cards/CardParticipando";
+import CardEncontrando from "../../Components/HelpCenter/Cards/CardEncontrando";
+import CardPublicando from "../../Components/HelpCenter/Cards/CardPublicando";
+import { Link } from "react-router-dom";
 
 export default function TabManageAc(props) {
   const tabs = [
-    'Por que me cadastrar?',
-    'Como fazer meu cadastro?',
-    'Como alterar minha senha?',
-    'Como acessar a conta?',
-    'Esqueci minha senha. O que fazer?'
-  ]
+    "Por que me cadastrar?",
+    "Como fazer meu cadastro?",
+    "Como alterar minha senha?",
+    "Como acessar a conta?",
+    "Esqueci minha senha. O que fazer?",
+    "Gerenciando a Conta"
+  ];
 
   const [tabValue, setTabValue] = useState(
-    Number(props.location.state.value) || 0);
+    Number(props.location.state.value) || 0
+  );
 
   const handleChangeTab = (e, newValue) => {
-    setTabValue(newValue)
-}
-
-
+    setTabValue(newValue);
+  };
 
   return (
     <div style={{ backgroundColor: "#f4f4f4" }}>
-      <link href="https://fonts.googleapis.com/css?family=Pompiere|Roboto:500,400&display=swap" rel="stylesheet"/>
+      <link
+        href="https://fonts.googleapis.com/css?family=Pompiere|Roboto:500,400&display=swap"
+        rel="stylesheet"
+      />
 
       <Secao>
+        <BreadCrumbsDiv>
+          <StyledBreadCrumbs>
+            <Link to="/">Página Inicial</Link>
+            <Link to="ajuda">Ajuda</Link>
+
+            <span>{tabs[5]}</span>
+          </StyledBreadCrumbs>
+        </BreadCrumbsDiv>
         <Grid container spacing={4}>
           <Grid item xs={3}>
             <Menu>
-              <h4>Gerenciando a conta</h4>
-              <TabsStyled orientation = "vertical"
+              <h4>{tabs[5]}</h4>
+              <TabsStyled
+                orientation="vertical"
                 variant="scrollable"
                 value={tabValue}
                 onChange={handleChangeTab}
@@ -93,7 +100,7 @@ export default function TabManageAc (props) {
             <Principal>
               <div className="fixo">
                 <img src={GerenciandoConta} alt="Gerenciando a conta" />
-                <span>Gerenciando a conta</span>
+                <span>{tabs[5]}</span>
               </div>
               {tabValue === 0 && <Why title={tabs[0]} />}
               {tabValue === 1 && <HowToDo title={tabs[1]} />}
@@ -103,7 +110,10 @@ export default function TabManageAc (props) {
               <div className="resultadosProcura">
                 <span>Não era bem o que você procurava?</span>
                 <div className="subtitulo">
-                  <span>Você pode navegar pelos tópicos de ajuda ou entrar em <a href="contato">Contato</a>.</span>
+                  <span>
+                    Você pode navegar pelos tópicos de ajuda ou entrar em{" "}
+                    <a href="contato">Contato</a>.
+                  </span>
                 </div>
               </div>
               <Grid style={{ marginBottom: "50px" }} container spacing={2}>
@@ -117,45 +127,52 @@ export default function TabManageAc (props) {
                   <CardParticipando />
                 </Grid>
               </Grid>
-
-
             </Principal>
           </Grid>
         </Grid>
-
-
       </Secao>
     </div>
   );
 }
 
+const StyledBreadCrumbs = styled(Breadcrumbs)`
+  display: flex;
+  justify-content: flex-start;
+  max-width: 1170px;
+  span {
+    color: #a5a5a5;
+  }
+  a {
+    color: #00bcd4;
+    text-decoration: none;
+  }
+`;
+
+const BreadCrumbsDiv = styled.div`
+  padding: 10px;
+  display: flex;
+`;
+
 const Principal = styled.div`
   .fixo {
-    
     height: 40px;
     text-align: center;
     background-color: #fff;
-    box-shadow: 0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
     padding: 30px;
     margin-bottom: 30px;
     color: #666;
 
-
     img {
       height: 50px;
       width: 50px;
       margin-right: 40px;
       vertical-align: middle;
-
     }
 
     span {
       font-size: 20px;
-      vertical-align: ;
     }
-
-    
-
   }
   .resultadosProcura {
     text-align: center;
@@ -169,7 +186,7 @@ const Principal = styled.div`
       margin-top: 10px;
 
       span {
-        font-size: 15px
+        font-size: 15px;
       }
 
       a {
@@ -178,14 +195,11 @@ const Principal = styled.div`
         color: #00bcd4;
         text-decoration: none;
       }
-
     }
   }
-
-`
+`;
 
 const TabsStyled = styled(Tabs)`
-  
   .Mui-selected {
     background-color: #e7e4e4;
   }
@@ -193,32 +207,25 @@ const TabsStyled = styled(Tabs)`
   .MuiTab-root {
     text-transform: none !important;
   }
-
-`
+`;
 
 const TabStyled = styled(Tab)`
-    
   padding: 4px 15px !important;
   font-weight: 500;
   font-size: 14px !important;
   border-radius: 4px !important;
 
-
-  
-
-
   &:hover {
     background-color: #e7e4e4;
   }
-`
-
+`;
 
 const Menu = styled.div`
   width: auto;
   background-color: #fff;
   color: #666;
   padding-block: 10px;
-  box-shadow: 0 1px 3px rgba(0,0,0,.12),0 1px 2px  rgba(0,0,0,.24);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
 
   h4 {
     padding-inline: 15px;
@@ -258,13 +265,10 @@ const Menu = styled.div`
       color: #00bcd4;
       text-decoration: none;
     }
-
   }
-
-`
+`;
 
 const Secao = styled.div`
   width: 1138px;
   margin-inline: auto;
-
-`
+`;

src/Pages/TabsHelp/TabNetPart.js

@@ -28,6 +28,7 @@ import What from '../../Components/HelpCenter/TabsNetPart/What'
 import CardEncontrando from '../../Components/HelpCenter/Cards/CardEncontrando';
 import CardPublicando from '../../Components/HelpCenter/Cards/CardPublicando';
 import CardGerenciando from '../../Components/HelpCenter/Cards/CardGerenciando';
+import  { Link } from 'react-router-dom';
 
 
 
@@ -39,6 +40,7 @@ export default function TabNetPart (props) {
   const tabs= [
     'Como comentar ou avaliar um recurso?',
     'Que tipo de comentário posso fazer sobre o recurso?',
+    'Participando da Rede'
   ]
   
   const [tabValue, setTabValue] = useState(
@@ -55,10 +57,27 @@ export default function TabNetPart (props) {
       <link href="https://fonts.googleapis.com/css?family=Pompiere|Roboto:500,400&display=swap" rel="stylesheet"/>
       
       <Secao>
+        <BreadCrumbsDiv>
+          <StyledBreadCrumbs>
+            <Link to="/" >
+              Página Inicial
+            </Link>
+            <Link to="ajuda" >
+              Ajuda
+            </Link>
+            
+            <span>
+              {tabs[2]}
+            </span>
+
+
+          </StyledBreadCrumbs>
+
+        </BreadCrumbsDiv>
         <Grid container spacing={4}>
           <Grid item xs={3}>
             <Menu>
-              <h4>Participando da rede</h4>
+              <h4>{tabs[2]}</h4>
               <TabsStyled orientation = "vertical"
                           variant = "scrollable"
                           value = {tabValue}
@@ -84,7 +103,7 @@ export default function TabNetPart (props) {
             <Principal>
               <div className="fixo">
                 <img src={ParticipandoRede} alt="Participando da Rede"/>
-                <span>Participando da rede</span>
+                <span>{tabs[2]}</span>
               </div>
               {tabValue === 0 && <How title={tabs[0]}/>}
               {tabValue === 1 && <What title={tabs[1]}/>}
@@ -116,6 +135,26 @@ export default function TabNetPart (props) {
     </div>
   );
 }
+const StyledBreadCrumbs = styled(Breadcrumbs)`
+  display : flex;
+  justify-content : flex-start;
+  max-width : 1170px;
+  span {
+    color : #a5a5a5;
+  }
+  a {
+    color: #00bcd4;
+    text-decoration: none;
+  }
+
+`
+
+const BreadCrumbsDiv = styled.div`
+
+  padding : 10px;
+  display : flex;
+`
+
 
 const Principal = styled.div`
   .fixo {

src/Pages/TabsHelp/TabPlataformaMEC.js

@@ -31,6 +31,7 @@ import Which from '../../Components/HelpCenter/TabsPlataformaMEC/Which';
 import Types from '../../Components/HelpCenter/TabsPlataformaMEC/Types';
 import Software from '../../Components/HelpCenter/TabsPlataformaMEC/Software';
 import How from '../../Components/HelpCenter/TabsPlataformaMEC/How';
+import  { Link } from 'react-router-dom';
 
 
 
@@ -45,7 +46,8 @@ export default function TabPlataformaMEC (props) {
     'Entendendo as 3 áreas da Plataforma',
     'Quais são os Portais Parceiros?',
     'Tipos de recursos',
-    'Softwares específicos'
+    'Softwares específicos',
+    'Plataforma MEC'
   ]
   
   const [tabValue, setTabValue] = useState(
@@ -62,10 +64,26 @@ export default function TabPlataformaMEC (props) {
       <link href="https://fonts.googleapis.com/css?family=Pompiere|Roboto:500,400&display=swap" rel="stylesheet"/>
       
       <Secao>
+        <BreadCrumbsDiv>
+          <StyledBreadCrumbs>
+            <Link to="/" >
+                Página Inicial
+            </Link>
+            <Link to="ajuda" >
+              Ajuda
+            </Link>
+            
+            <span>
+              {tabs[6]}
+            </span>
+
+          </StyledBreadCrumbs>
+
+        </BreadCrumbsDiv>
         <Grid container spacing={4}>
           <Grid item xs={3}>
             <Menu>
-              <h4>Plataforma MEC</h4>
+              <h4>{tabs[6]}</h4>
               <TabsStyled orientation = "vertical"
                           variant = "scrollable"
                           value = {tabValue}
@@ -123,6 +141,26 @@ export default function TabPlataformaMEC (props) {
   );
 }
 
+const StyledBreadCrumbs = styled(Breadcrumbs)`
+  display : flex;
+  justify-content : flex-start;
+  max-width : 1170px;
+  span {
+    color : #a5a5a5;
+  }
+  a {
+    color: #00bcd4;
+    text-decoration: none;
+  }
+
+`
+
+const BreadCrumbsDiv = styled.div`
+
+  padding : 10px;
+  display : flex;
+`
+
 const Principal = styled.div`
   .fixo {
     

src/Pages/TabsHelp/TabResourseFind.js

@@ -29,6 +29,7 @@ import HowToFilter from '../../Components/HelpCenter/TabsResourseFind/HowToFilte
 import CardPublicando from '../../Components/HelpCenter/Cards/CardPublicando';
 import CardParticipando from '../../Components/HelpCenter/Cards/CardParticipando';
 import CardGerenciando from '../../Components/HelpCenter/Cards/CardGerenciando';
+import  { Link } from 'react-router-dom';
 
 
 
@@ -40,7 +41,8 @@ export default function TabResourseFind (props) {
   const tabs= [
     'Como fazer uma busca?',
     'Como filtrar os resultados?',
-    'Como os recursos são ranqueados?'
+    'Como os recursos são ranqueados?',
+    'Encontrando Recursos'
   ]
   
   const [tabValue, setTabValue] = useState(
@@ -56,10 +58,26 @@ export default function TabResourseFind (props) {
       <link href="https://fonts.googleapis.com/css?family=Pompiere|Roboto:500,400&display=swap" rel="stylesheet"/>
       
       <Secao>
+        <BreadCrumbsDiv>
+          <StyledBreadCrumbs>
+            <Link to="/" >
+              Página Inicial
+            </Link>
+            <Link to="ajuda" >
+              Ajuda
+            </Link>
+            
+            <span>
+              {tabs[3]}
+            </span>
+
+          </StyledBreadCrumbs>
+
+        </BreadCrumbsDiv>
         <Grid container spacing={4}>
           <Grid item xs={3}>
             <Menu>
-              <h4>Encontrando Recursos</h4>
+              <h4>{tabs[3]}</h4>
               <TabsStyled orientation = "vertical"
                           variant = "scrollable"
                           value = {tabValue}
@@ -86,7 +104,7 @@ export default function TabResourseFind (props) {
             <Principal>
               <div className="fixo">
                 <img src={EncontrandoRecurso} alt="Encontrando Recursos"/>
-                <span>Encontrando recursos</span>
+                <span>{tabs[3]}</span>
               </div>
               {tabValue === 0 && <HowToDo title={tabs[0]}/>}
               {tabValue === 1 && <HowToFilter title={tabs[1]}/>}
@@ -119,6 +137,26 @@ export default function TabResourseFind (props) {
   );
 }
 
+const StyledBreadCrumbs = styled(Breadcrumbs)`
+  display : flex;
+  justify-content : flex-start;
+  max-width : 1170px;
+  span {
+    color : #a5a5a5;
+  }
+  a {
+    color: #00bcd4;
+    text-decoration: none;
+  }
+
+`
+
+const BreadCrumbsDiv = styled.div`
+
+  padding : 10px;
+  display : flex;
+`
+
 const Principal = styled.div`
   .fixo {
     

src/Pages/TabsHelp/TabResoursePub.js

@@ -29,6 +29,7 @@ import Which from '../../Components/HelpCenter/TabsResoursePub/Which'
 import CardEncontrando from '../../Components/HelpCenter/Cards/CardEncontrando';
 import CardParticipando from '../../Components/HelpCenter/Cards/CardParticipando';
 import CardGerenciando from '../../Components/HelpCenter/Cards/CardGerenciando';
+import  { Link } from 'react-router-dom';
 
 
 
@@ -40,7 +41,8 @@ export default function TabResoursePub (props) {
   const tabs= [
     'Por que enviar um recurso?',
     'Como publicar um recurso?',
-    'Quais tipos de recursos e formatos de arquivo a plataforma aceita?'
+    'Quais tipos de recursos e formatos de arquivo a plataforma aceita?',
+    'Publicando Recursos'
   ]
   
   const [tabValue, setTabValue] = useState(
@@ -57,10 +59,27 @@ export default function TabResoursePub (props) {
       <link href="https://fonts.googleapis.com/css?family=Pompiere|Roboto:500,400&display=swap" rel="stylesheet"/>
       
       <Secao>
+        <BreadCrumbsDiv>
+          <StyledBreadCrumbs>
+            <Link to="/" >
+                Página Inicial
+            </Link>
+            <Link to="ajuda" >
+              Ajuda
+            </Link>
+            
+            <span>
+                {tabs[3]}
+            </span>
+
+
+          </StyledBreadCrumbs>
+
+        </BreadCrumbsDiv>
         <Grid container spacing={4}>
           <Grid item xs={3}>
             <Menu>
-              <h4>Publicando Recursos</h4>
+              <h4>{tabs[3]}</h4>
               <TabsStyled orientation = "vertical"
                           variant = "scrollable"
                           value = {tabValue}
@@ -87,7 +106,7 @@ export default function TabResoursePub (props) {
             <Principal>
               <div className="fixo">
                 <img src={PublicandoRecursos} alt="Publicando Recursos"/>
-                <span>Publicando Recursos</span>
+                <span>{tabs[3]}</span>
               </div>
               {tabValue === 0 && <Why title={tabs[0]}/>}
               {tabValue === 1 && <How title={tabs[1]}/>}
@@ -120,6 +139,26 @@ export default function TabResoursePub (props) {
     </div>
   );
 }
+const StyledBreadCrumbs = styled(Breadcrumbs)`
+  display : flex;
+  justify-content : flex-start;
+  max-width : 1170px;
+  span {
+    color : #a5a5a5;
+  }
+  a {
+    color: #00bcd4;
+    text-decoration: none;
+  }
+
+`
+
+const BreadCrumbsDiv = styled.div`
+
+  padding : 10px;
+  display : flex;
+`
+
 
 const Principal = styled.div`
   .fixo {

src/Pages/Teste.js

@@ -16,339 +16,120 @@ 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, { Component, useState, useEffect } from 'react';
-import styled from 'styled-components';
-import Banner1 from '../img/banner-sobre.jpg';
-import { TextField } from '@material-ui/core';
-import FormInput from "../Components/FormInput.js"
-import axios from 'axios'
-import {apiUrl} from '../env';
-
-
-const Seção1 =  styled.div `
-  width: 100%;
-  background-image: url(${Banner1});
-  background-size: cover;
-  background-position: bottom center;
-  height: 250px;
-  color:#fff;
-  line-height: 1.1;
-  text-align: center;
-  padding-top: 120px;
-
-  h2 {
-    font-family: Pompiere,cursive;
-    font-size: 52px;
-    color:#fff;
-    margin: 0;
-    padding-left: 0;
-    padding-right: 0;
-    font-weight: 500;
-  }
-
-  h3 {
-    margin-top: 20px;
-    margin-bottom: 10px;
-    font-family: Roboto,sans-serif;
-    font-size: 30px;
-    font-weight: lighter;
-
-  }
-`
-
-const Seção2 = styled.div `
-  height: 708px;
-  background-color: #f4f4f4;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-`
-const Button = styled.button`
-
-
-`
-
-const Formulário = styled.div `
-  background-color: #fff;
-  box-shadow: 0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);
-  padding: 40px;
-  height: 520px;
-  width: 420px;
-  color: #666;
-
-  form .inputBlock {
-    margin-block: 22px;
+import React, { Component } from 'react'
+import Dropdown from 'react-dropdown'
 
+class ObjectArrayExample extends Component {
+  constructor (props) {
+    super(props)
+    this.state = {
+      selected: { value: 'two', label: 'Two'}
     }
-
-  form .inputBlock label {
-    font-size: 14px;
-    font-weight: bold;
-    display: block;
-
-  }
-
-  form .inputBlock input {
-    width: 100%;
-    height: 32px;
-    font-size: 14px;
-    border: 0;
-    border-bottom: 1px solid #eee;
-
+    this._onSelect = this._onSelect.bind(this)
   }
 
-  form .inputBlock.Message input {
-    height: 131px;
-  }
-
-  form buttom[type=submit] {
-    width: 100%;
-    border: 0;
-    margin-top: 30px;
-    background: #7d40e7
-    border-radius: 2px;
-    padding: 15px 20px;
-    font-size: 16px;
-    font-weight: bold;
-    color: #fff;
-    cursor: pointer;
-    transition: background 0.5s;
-
-  }
-
-  form buttom[type=submit]:hover {
-    background: #6931ac
-  }
-
-
-  h2 {
-    font-size: 24px;
-    font-weight: lighter;
-    margin-bottom: 50px;
-    margin-top: 20px;
-    text-align: center;
-
-  }
-`
-
-
-
-const Seção3 = styled.div `
-  height: 127px;
-  background-color: #f4f4f4;
-  color:#666;
-  line-height: 1.42857143;
-  font-size:18px;
-  text-align: center;
-  padding-top: 70px;
-
-
-  p {
-    margin: 0 0 10px 0;
-  }
-
-
-`
-
-function validateNome (nome) {
-    let flag = false
-    if(nome.length === 0) {
-        flag = true
-    }
-
-    return flag
-}
-
-
-function validateMensagem (mensagem) {
-    let flag = false
-    if(mensagem.length === 0) {
-        flag = true
-    }
-
-    return flag
-}
-
-function validateEmail (email) {
-  let flag = false
-  if (email.split("").filter(x => x === "@").length !== 1) {
-    flag = true
-  }
-  return flag
+  _onSelect (option) {
+    console.log('You selected ', option.label)
+    this.setState({selected: option})
   }
 
+  render () {
+    const { toggleClassName, togglePlaholderClassName, toggleMenuClassName, toggleOptionsClassName } = this.state
 
-
-function Contact (props) {
-
-    const [nome, handleNome] = useState(
-      {
-        dict : {
-         key:false,
-         value:""
-       }
-     })
-    const [email, handleEmail] = useState(
+    const options = [
+      { value: 'one', label: 'One' },
+      { value: 'two', label: 'Two', className: toggleOptionsClassName && 'my-custom-class' },
       {
-        dict : {
-         key:false,
-         value:""
-     }
-    })
-    const [mensagem, handleMensagem] = useState(
-      {
-        dict : {
-         key: false,
-         value:""
-       }
-      })
-
-
-  const preencheNome = (e) => {
-    const aux2 = e.target.value
-    const flag = validateNome(aux2)
-    handleNome({...nome, dict : {
-      key : flag,
-      value : e.target.value
-    }})
-    console.log(nome)
-  }
-
-  const preencheEmail = (e) => {
-    const aux = e.target.value
-    const flag = validateEmail(aux)
-    handleEmail({...email, dict : {
-      key : flag,
-      value : e.target.value
-    }})
-    console.log(email)
-  }
-
-  const preencheMensagem = (e) => {
-    const msg = e.target.value
-    console.log(msg)
-    let flag = validateMensagem(msg)
-    handleMensagem({...mensagem, dict : {
-      key : flag,
-      value : msg
-    }})
-    console.log(mensagem)
-  }
-
-  const limpaTudo = () => {
-
-    handleNome({
-      dict : {
-       key: false,
-       value:""
-     }}
-   );
-
-    handleEmail({
-      dict : {
-       key: false,
-       value:""
-     }}
-    )
-
-    handleMensagem({
-      dict : {
-       key: false,
-       value:""
-     }}
-    )
-
-  }
-
-
-
-  const onSubmit = (e) => {
-      //on submit we should prevent the page from refreshing
-      e.preventDefault(); //though this is arguable
-      console.log(!(nome.dict.key && email.dict.key && mensagem.dict.key ))
-      if (!(nome.dict.key && email.dict.key && mensagem.dict.key )) {
-
-        axios.post(`${apiUrl}/contacts`,
+       type: 'group', name: 'group1', items: [
+         { value: 'three', label: 'Three', className: toggleOptionsClassName && 'my-custom-class' },
+         { value: 'four', label: 'Four' }
+       ]
+      },
       {
-              contact : {
-                name: nome.dict.value,
-                email: email.dict.value,
-                message: mensagem.dict.value
-              }
-
-        }
-        ).then()
-
-
-        
-        limpaTudo();
-
-      }
-
-
-
+       type: 'group', name: 'group2', items: [
+         { value: 'five', label: 'Five' },
+         { value: 'six', label: 'Six' }
+       ]
       }
+    ]
 
 
+    const defaultOption = this.state.selected
+    const placeHolderValue = typeof this.state.selected === 'string' ? this.state.selected : this.state.selected.label
 
     return (
-      <>
-      <link href="https://fonts.googleapis.com/css?family=Kalam|Pompiere|Roboto:300,400&display=swap" rel="stylesheet"/>
-        <Seção1>
-          <h2>CONTATO</h2>
-          <h3>Quer enviar uma mensagem?</h3>
-        </Seção1>
-
-        <Seção2>
-
-          <Formulário noValidate autoComplete="off">
-            <h2>Entre em contato para enviar dúvidas,<br/>sugestões ou críticas</h2>
-            <form onSubmit={e => onSubmit(e)}>
-              <FormInput
-                inputType={"text"}
-                name={"nome"}
-                value={nome.dict.value}
-                placeholder={"Nome *"}
-                error = {nome.dict.key}
-                help = {nome.dict.key ? "insira seu nome para o contato " : ""}
-                handleChange={e => preencheNome(e)}
-              />
-              <FormInput
-                inputType={"text"}
-                name={"email"}
-                value={email.dict.value}
-                placeholder={"E-mail *"}
-                error = {email.dict.key}
-                help = {email.dict.key ? "Formato de e-mail inadequado tente : usuario@provedor.com" : ""}
-                handleChange={e => preencheEmail(e)}
+      <section>
+        <h3>Object Array and Custom ClassNames Example </h3>
+        <div className="buttons">
+          <button onClick={() => this.setState({ toggleClassName: !toggleClassName })}>
+            Toggle dropdown custom class
+          </button>
+          <button onClick={() => this.setState({ togglePlaholderClassName: !togglePlaholderClassName })}>
+            Toggle placeholder custom class
+          </button>
+          <button onClick={() => this.setState({ toggleMenuClassName: !toggleMenuClassName })}>
+            Toggle menu custom class
+          </button>
+          <button onClick={() => this.setState({ toggleOptionsClassName: !toggleOptionsClassName })}>
+            Toggle options custom class
+          </button>
+        </div>
+        <Dropdown
+          options={options}
+          onChange={this._onSelect}
+          value={defaultOption}
+          placeholder="Select an option"
+          className={ toggleClassName ? 'my-custom-class' : '' }
+          placeholderClassName={ togglePlaholderClassName ? 'my-custom-class' : '' }
+          menuClassName={ toggleMenuClassName ? 'my-custom-class' : '' }
         />
-              <FormInput
-                inputType={"text"}
-                name={"mensagem"}
-                value={mensagem.dict.value}
-                placeholder={"Mensagem *"}
-                multi = {true}
-                rows = "3"
-                rowsMax = "5"
-                error = {mensagem.dict.key}
-                help = {mensagem.dict.key ? "Faltou escrever sua mensagem de sugestão, crítica ou dúvida." : "Escreva sua mensagem no campo acima."}
-                handleChange={e => preencheMensagem(e)}
+        <div className='result'>
+          You selected
+          <strong> {placeHolderValue} </strong>
+        </div>
+        <section>
+          <h4>Options: </h4>
+          <div className='code'>
+            <pre>
+              {`
+const options = [
+  { value: 'one', label: 'One' },
+  { value: 'two', label: 'Two'${toggleOptionsClassName ? ', classNames \'my-custom-class\'' : ''} },
+  {
+    type: 'group', name: 'group1', items: [
+      { value: 'three', label: 'Three' },
+      { value: 'four', label: 'Four'${toggleOptionsClassName ? ', className: \'my-custom-class\'' : ''} }
+    ]
+  },
+  {
+    type: 'group', name: 'group2', items: [
+      { value: 'five', label: 'Five' },
+      { value: 'six', label: 'Six' }
+    ]
+  }
+]
+`}
+            </pre>
+          </div>
+          <h4>Usage with custom classeNames: </h4>
+          <div className='code'>
+            <pre>{
+`
+<Dropdown
+  options={options}
+  value={defaultOption}
+  placeholder="Select an option"
+  className=${ toggleClassName ? '"my-custom-class"' : '""' }
+  placeholderClassName=${ togglePlaholderClassName ? '"my-custom-class"' : '""' }
+  menuClassName=${ toggleMenuClassName ? '"my-custom-class"' : '""' }
 />
-              <Button onClick={e => onSubmit(e)} >ENVIAR MENSAGEM</Button>
-            </form>
-
-          </Formulário>
-        </Seção2>
-
-        <Seção3>
-
-          <span>MEC - Ministério da Educação </span>
-          <p>Endereço: Esplanada dos Ministérios Bloco L - Ed.Sede e Anexos. CEP: 70.047-900 - Brasília/DF. Telefone: 0800 616161</p>
-
-        </Seção3>
-      </>
-    );
-
+`}
+            </pre>
+          </div>
+        </section>
+      </section>
+    )
+  }
 }
 
-export default Contact;
+export default ObjectArrayExample
\ No newline at end of file

src/Pages/UserPage.js

@@ -18,12 +18,11 @@ along with Plataforma Integrada MEC.  If not, see <http://www.gnu.org/licenses/>
 
 import React, {useState, useContext, useEffect} from 'react';
 import styled from 'styled-components'
-import { Container } from 'react-grid-system'
 import Button from '@material-ui/core/Button';
 import IconButton from '@material-ui/core/IconButton';
 import PhotoCamera from '@material-ui/icons/PhotoCamera';
 import Tooltip from '@material-ui/core/Tooltip';
-import Breadcrumbs from '@material-ui/core/Breadcrumbs';
+import CustomizedBreadcrumbs from '../Components/TabPanels/Breadcrumbs.js'
 import {Link} from 'react-router-dom';
 import Popover from '@material-ui/core/Popover';
 import { Store } from '../Store.js';
@@ -32,14 +31,126 @@ import CheckDecagram from '../img/check-decagram-gray.svg'
 import Tabs from '@material-ui/core/Tabs';
 import Tab from '@material-ui/core/Tab';
 import Paper from '@material-ui/core/Paper';
-import TabPanelAtividades from '../Components/TabPanels/TabPanelAtividades.js'
-import TabPanelMeusRecursos from '../Components/TabPanels/TabPanelMeusRecursos.js'
-import TabPanelFavoritos from '../Components/TabPanels/TabPanelFavoritos.js'
-import TabPanelColecoes from '../Components/TabPanels/TabPanelColecoes.js'
-import TabPanelRede from '../Components/TabPanels/TabPanelRede.js'
+import TabPanelAtividades from '../Components/TabPanels/UserPageTabs/PanelAtividades.js'
+import TabPanelMeusRecursos from '../Components/TabPanels/UserPageTabs/PanelMeusRecursos.js'
+import TabPanelFavoritos from '../Components/TabPanels/UserPageTabs/PanelFavoritos.js'
+import TabPanelColecoes from '../Components/TabPanels/UserPageTabs/PanelColecoes.js'
+import TabPanelRede from '../Components/TabPanels/UserPageTabs/PanelRede.js'
+import TabPanelCuradoria from '../Components/TabPanels/UserPageTabs/PanelCuradoria.js'
 import axios from 'axios'
-import {apiUrl} from '../env';
+import {apiUrl, apiDomain} from '../env';
 import ModalAlterarAvatar from '../Components/ModalAlterarAvatar.js'
+import Grid from '@material-ui/core/Grid';
+import noAvatar from "../img/default_profile.png";
+import {HeaderContainer, UserProfileContainer, UserProfileInfoDiv, CoverContainer, CheckTeacherDiv, StyledTabs, RodapeDiv, NavBarContentContainer, BackgroundDiv} from '../Components/TabPanels/StyledComponents.js'
+
+const PageCover = (currentCover, updateCover) => {
+    //displays current user cover and lets them upload a new cover
+    //on accepting file input, calls coverModal to handle further customization
+    return (
+        <CoverContainer>
+            {currentCover && <img src={apiDomain + currentCover} alt = '' style= {{width:"100%", height:"100%", objectFit : "cover" }}/>}
+            <input accept="image/*" style = {{display:"none"}} id="icon-button-file" type="file" onChange={(e) => updateCover(e)}/>
+            <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>
+        </CoverContainer>
+    )
+}
+
+const ProfileAvatar = (currentAvatar, hoverTrue, handleHoverAlterarFoto, modalControl) => {
+    //display current user avatar and lets them upload a new one
+    //on click, calls AvatarModal to handle file selection
+    return (
+        <ProfileAvatarDiv onMouseEnter={handleHoverAlterarFoto} onMouseLeave={handleHoverAlterarFoto} onClick={modalControl}>
+            <img src={currentAvatar ? apiDomain + currentAvatar : noAvatar} alt = "user avatar" style={{height : "inherit", width : "inherit", border:"0", verticalAlign:"middle"}}/>
+            <ChangeAvatarDiv  style={ {display : hoverTrue ? 'flex' : 'none'}}>
+                <span>Alterar Foto</span>
+            </ChangeAvatarDiv>
+        </ProfileAvatarDiv>
+    )
+}
+
+const UserProfileInfo = (user, education) => {
+    return (
+        <UserProfileInfoDiv>
+            <p style={{fontSize:"28px", color:"#fff", paddingTop:"5px", paddingBottom:"5px", fontWeight:"500", backgroundColor:"#77777796", borderRadius : "5px"}}>{user}</p>
+            <div style={{fontSize:"14px", color:"#fff", marginBottom:"2px"}}>
+                <p>{education}</p>
+            </div>
+        </UserProfileInfoDiv>
+    )
+}
+
+const EditProfileButton = () => {
+    const {state} = React.useContext(Store)
+    return (
+        <EditProfileAnchor to="/editarperfil">
+            <Button>
+                {state.windowSize.width >=900 ?
+                    (
+                        <React.Fragment>
+                            <EditIcon style={{marginRight:"5px", verticalAlign:"middle"}}/> <span>EDITAR PERFIL</span>
+                        </React.Fragment>
+                    )
+                    :
+                    (
+                        <EditIcon style={{marginRight:"5px", verticalAlign:"middle"}}/>
+                    )
+                }
+            </Button>
+        </EditProfileAnchor>
+    )
+}
+
+const SubmitterStatus = (status) => {
+    let text;
+    switch (status) {
+        case 'requested':
+            text = "Verificando cadastro de professor(a)"
+            break;
+        case 'accepted':
+            text = "Professor(a)"
+            break;
+        default:
+            text = "Você é professor(a) e gostaria de publicar recursos?"
+    }
+
+    return (
+        <React.Fragment>
+            <p style={{fontSize:"15px", lineHeight:"22px", textAlign:"left", margin:"0 0 10px"}}>
+                <span style={{cursor:"pointer"}}>
+                                <span style={{paddingRight:"5px"}}>
+                                    <img src={CheckDecagram}/>
+                                </span>
+                                {text}
+                                <span style={{color:"#00bcd4"}}> SAIBA MAIS</span>
+                </span>
+            </p>
+        </React.Fragment>
+    )
+
+}
+
+const GetHeaderConfig = () => {
+
+    let config = {
+        headers : {
+            'Accept': 'application/json',
+            'Content-Type': 'application/json',
+            'Access-Token': sessionStorage.getItem('@portalmec/accessToken'),
+            'Client': sessionStorage.getItem('@portalmec/clientToken'),
+            'Uid': sessionStorage.getItem('@portalmec/uid'),
+        }
+    }
+    {/*'Host': 'api.portalmec.c3sl.ufpr.br',
+    'Cookie': ''*/}
+    return config
+}
 
 export default function UserPage (props){
     const {state, dispatch} = useContext(Store)
@@ -50,21 +161,12 @@ export default function UserPage (props){
     const [tabs, setTabs] = useState([
         'Atividades', 'Meus Recursos', 'Favoritos', 'Coleções', 'Rede'
     ])
-    const user = sessionStorage.getItem('@portalmec/username')
-    const id = sessionStorage.getItem('@portalmec/id')
+    {/*sessionStorage.getItem('@portalmec/username')*/}
+    const user = state.currentUser.username
+    {/*sessionStorage.getItem('@portalmec/id')*/}
+    const id = state.currentUser.id
     const [modalOpen, handleModal] = useState(false)
-
-    const config = {
-        headers : {
-            'Accept': 'application/json',
-            'Content-Type': 'application/json',
-            'Access-Token': sessionStorage.getItem('@portalmec/accessToken'),
-            'Client': sessionStorage.getItem('@portalmec/clientToken'),
-            'Uid': sessionStorage.getItem('@portalmec/uid'),
-            'Host': 'api.portalmec.c3sl.ufpr.br',
-            'Cookie': ''
-        }
-    }
+    const [coverImg, setCoverImg] = useState(state.currentUser.userCover)
 
     const modalControl = () => {
         handleModal(!modalOpen)
@@ -75,6 +177,7 @@ export default function UserPage (props){
     }
 
     useEffect( () => {
+        if (id != '') {
         axios.get( (`${apiUrl}/users/` + id), {
             'Accept': 'application/json',
             'Content-Type': 'application/json',
@@ -82,24 +185,32 @@ export default function UserPage (props){
             'Cookie': ''
         })
         .then( (response) => {
+            console.log(response)
                 dispatch ({
                     type : 'USER_ACCESSED_USER_PAGE',
                     set: {
                         id : response.data.id,
                         email : response.data.email,
                         username : response.data.name,
-                        education : response.data.education,
+                        accessToken : response.headers['access-token'],
+                        clientToken : state.currentUser.clientToken,
                         userAvatar : response.data.avatar,
                         userCover : response.data.cover,
                         followCount : response.data.follow_count,
                         collectionsCount: response.data.collections_count,
+                        submitter_request : response.data.submitter_request,
                     }
                 })
+                if((response.data.role_ids.includes(4))) {
+                    setTabs([
+                        'Atividades', 'Meus Recursos', 'Favoritos', 'Coleções', 'Rede', 'Curadoria'
+                    ])
+                }
             },
             (error) => {
                 console.log('error while running ComponentDidMout')
             }
-        )
+        )}
     }, [])
 
     const redirect = () => {
@@ -111,8 +222,12 @@ export default function UserPage (props){
     }
 
     const updateCover = (selectorFiles : FileList) => {
-        console.log(selectorFiles)
-        console.log(selectorFiles[0])
+        const objectURL = URL.createObjectURL(selectorFiles[0])
+        console.log(objectURL)
+        //setCoverImg(img)
+        //modal selecionar posicao do coverImg
+
+
     }
 
     return (
@@ -126,86 +241,31 @@ export default function UserPage (props){
                         <ModalAlterarAvatar
                             open={modalOpen}
                             handleClose={modalControl}
+                            userAvatar={state.currentUser.userAvatar}
                         />
-                        <HeaderDiv>
-                            <ContainerNoPad>
-                                <BreadcrumbsDiv>
-                                    <StyledBreadcrumbs>
-                                        <Link to="/" style={{color:"#00bcd4", textDecoration:"none"}}>
-                                            Página Inicial
-                                        </Link>
-                                        <span>
-                                            Minha área
-                                        </span>
-                                        <span>
-                                            {tabs[tabValue]}
-                                        </span>
-                                    </StyledBreadcrumbs>
-                                </BreadcrumbsDiv>
+                    <BackgroundDiv>
 
-                            <div style={{display:"flex", flexDirection:"column"}}>
-                                <MainContainerDesktop maxwidth="xl">
-                                    <Paper elevation={3} style= {{width:"max-content"}}>
-                                    <ContainerUserProfile>
+                            <CustomizedBreadcrumbs
+                                values={["Minha área", tabs[tabValue]]}
+                            />
+                            <Grid container spacing={2}>
+                                <Grid item xs={12}>
+                                    <div style={{padding : "10px 0 8px 0"}}>
+                                        <UserProfileContainer>
                                             <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" 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>
-                                            </CoverContainer>
-                                            <ProfileAvatarDiv onMouseEnter={handleHoverAlterarFoto} onMouseLeave={handleHoverAlterarFoto} onClick={modalControl}>
-                                                <img src={state.currentUser.userAvatar} alt = "user avatar" style={{height : "inherit", width : "inherit", border:"0", verticalAlign:"middle"}}/>
-                                                <ChangeAvatarDiv  style={ {display : hoverAlterarFoto ? 'flex' : 'none'}}>
-                                                    <span>Alterar Foto</span>
-                                                </ChangeAvatarDiv>
-                                            </ProfileAvatarDiv>
-                                            <UserProfileInfoDiv>
-                                                <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>
-                                            </UserProfileInfoDiv>
-                                            <EditProfileAnchor to="/editarperfil">
-                                                <Button>
-                                                    <EditIcon style={{marginRight:"5px", verticalAlign:"middle"}}/> <span>EDITAR PERFIL</span>
-                                                </Button>
-                                            </EditProfileAnchor>
+                                                {PageCover(state.currentUser.userCover, (e) => updateCover(e.target.files))}
+
+                                                {ProfileAvatar(state.currentUser.userAvatar, hoverAlterarFoto, handleHoverAlterarFoto, modalControl)}
+
+                                                {UserProfileInfo(user, state.currentUser.education)}
+
+                                                {EditProfileButton()}
                                             </HeaderContainer>
+
                                             <CheckTeacherDiv>
-                                        <>
-                                        {
-                                            state.currentUser.isCollaborativeTeacher ?
-                                            (
-                                                [
-                                                    <>
-                                                    <img src={CheckDecagram} style={{color:"#00bcd4"}}/>
-                                                    <span>Professor(a)</span>
-                                                    </>
-                                                ]
-                                            )
-                                            :
-                                            (
-                                                [
-                                                    <p style={{fontSize:"15px", lineHeight:"22px", textAlign:"left", margin:"0 0 10px"}}>
-                                                        <span style={{cursor:"pointer"}}>
-                                                            <span style={{paddingRight:"5px"}}>
-                                                                <img src={CheckDecagram}/>
-                                                            </span>
-                                                            Você é professor(a) e gostaria de publicar recursos?
-                                                            <span style={{color:"#00bcd4"}}> SAIBA MAIS</span>
-                                                        </span>
-                                                    </p>
-                                                ]
-                                            )
-                                        }
-                                        </>
+                                                {SubmitterStatus(state.currentUser.submitter_request)}
                                             </CheckTeacherDiv>
+
                                             <RodapeDiv>
                                                 <NavBarContentContainer>
                                                     <StyledTabs
@@ -217,25 +277,35 @@ export default function UserPage (props){
                                                         scrollButtons = "auto"
                                                         TabIndicatorProps={{style : {background:"#00bcd4"}}}
                                                     >
-                                                    <StyledTab label={tabs[0]}/>
-                                                    <StyledTab label={tabs[1]}/>
-                                                    <StyledTab label={tabs[2]}/>
-                                                    <StyledTab label={tabs[3]}/>
-                                                    <StyledTab label={tabs[4]}/>
+                                                        {
+                                                            tabs.map( (tab) =>
+                                                                <StyledTab label ={tab} key={tab}/>
+                                                            )
+                                                        }
+
                                                     </StyledTabs>
                                                 </NavBarContentContainer>
                                             </RodapeDiv>
-                                    </ContainerUserProfile>
-                                    </Paper>
-                                </MainContainerDesktop>
+                                        </UserProfileContainer>
                                     </div>
-                                {tabValue === 0 && <TabPanelAtividades id={id} config={config}/>}
-                                {tabValue === 1 && <TabPanelMeusRecursos id={id} config={config}/>}
-                                {tabValue === 2 && <TabPanelFavoritos id={id} config={config}/>}
-                                {tabValue === 3 && <TabPanelColecoes id={id} config={config}/>}
-                                {tabValue === 4 && <TabPanelRede id={id} config={config}/>}
-                            </ContainerNoPad>
-                        </HeaderDiv>
+                                </Grid>
+
+                                <Grid item xs={12}>
+                                    {tabValue === 0 &&
+                                        <TabPanelAtividades id={id} config={GetHeaderConfig()}/>}
+                                    {tabValue === 1 &&
+                                        <TabPanelMeusRecursos id={id} config={GetHeaderConfig()}/>}
+                                    {tabValue === 2 &&
+                                        <TabPanelFavoritos id={id} config={GetHeaderConfig()}/>}
+                                    {tabValue === 3 &&
+                                        <TabPanelColecoes id={id} config={GetHeaderConfig()}/>}
+                                    {tabValue === 4 &&
+                                        <TabPanelRede id={id} config={GetHeaderConfig()}/>}
+                                    {tabValue === 5 &&
+                                        <TabPanelCuradoria id={id} config={GetHeaderConfig()}/>}
+                                </Grid>
+                            </Grid>
+                        </BackgroundDiv>
                     </React.Fragment>
                 ]
             )
@@ -251,59 +321,6 @@ export default function UserPage (props){
 
   }
 
-export const HeaderDiv = styled.div`
-    background-color : #f4f4f4;
-    color : #666;
-    font-size : 14px;
-    line-height : 20px;
-    padding-bottom : 40px;
-`
-
-const ContainerNoPad = styled.div`
-    min-width : 1170px;
-`
-
-export const BreadcrumbsDiv = styled.div`
-    padding : 10px;
-    display : flex;
-    justify-content : center;
-  `
-
-export const StyledBreadcrumbs = styled(Breadcrumbs)`
-    display : flex;
-    justify-content : flex-start;
-    max-width : 1170px;
-    span {
-        color : #a5a5a5;
-    }
-`
-
-const MainContainerDesktop = styled(Container)`
-    padding : 10px 0 8px 0;
-    .MuiContainer-maxWidthXl {
-        max-width : 1170px !important;
-    }
-`
-
-const ContainerUserProfile = styled(Container)`
-  padding : 0;
-  background-color : #fff;
-  margin-bottom: 30px;
-  width : 1170px;
-  margin-right : auto;
-  padding-left : 0 !important;
-  padding-right : 0 !important;
-  margin-left : auto;
-`
-const HeaderContainer = styled(Container)`
-  background-color : #afeeee;
-  position :  relative;
-`
-
- const CoverContainer = styled(Container)`
-  height : 230px;
-  position : relative;
-`
 
 const ProfileAvatarDiv = styled.div`
     bottom : -65px;
@@ -316,6 +333,7 @@ const ProfileAvatarDiv = styled.div`
     border : 8px solid #fff;
     outline : 0;
     cursor : pointer;
+    background-color : #a5a5a5;
 `
 
 export const ChangeAvatarDiv = styled.div`
@@ -329,13 +347,6 @@ export const ChangeAvatarDiv = styled.div`
   justify-content : center;
 `
 
-const UserProfileInfoDiv = styled.div`
-  position : absolute;
-  bottom : 0;
-  left : 260px;
-  overflow : hidden;
-  margin-bottom : 20px;
-`
 
 const EditProfileAnchor = styled(Link)`
   Button {
@@ -349,8 +360,10 @@ const EditProfileAnchor = styled(Link)`
       padding : 0 10px;
       text-decoration : none;
       border-radius : 3px;
+      @media screen and (min-width: 800px) {
           min-height : 36px;
           min-width : 88px;
+      }
       line-height : 36px;
       border : 0;
       display: inline-block;
@@ -358,39 +371,13 @@ const EditProfileAnchor = styled(Link)`
       :hover{
         background-color : #fafafa;
       }
+      @media screen and (max-width: 600px) {
+          max-width : 44px !important ;
+      }
   }
 `
 
-const CheckTeacherDiv = styled.div`
-  font-size : 14px;
-  padding-top : 10px;
-  padding-left : 250px;
-  margin-bottom : -10px;
-  color : #666 !important;
-`
-
-const RodapeDiv = styled.div`
-  justify-content : flex-end;
-  display : flex;
-`
-
-const NavBarContentContainer = styled(Container)`
-    background-color : #fff;
-    padding-bottom : 0;
-    overflow-x : hidden !important;
-    overflow-y : hid1den !important;
-    margin-right : 0 !important;
-`
 
-const StyledTabs = styled(Tabs)`
-    .MuiTab-textColorPrimary.Mui-selected {
-        color : #00bcd4 !important;
-        border-bottom-color : #00bcd4 !important;
-    }
-    .Mui-selected {
-        border-bottom-color : #00bcd4 !important;
-    }
-`
 const StyledTab = styled(Tab)`
     .Mui-selected {
         border-bottom-color : #00bcd4 !important;

src/Store.js

@@ -23,7 +23,7 @@ export const Store = React.createContext()
 const initialState = {
   searchOpen: false,
   userIsLoggedIn : false,
-  userAgreedToPublicationTerms: true,
+  userAgreedToPublicationTerms: false,
   userAgreedToPublicationPermissions: false,
   modalColaborarPlataformaOpen : false,
   search: {
@@ -40,8 +40,6 @@ const initialState = {
       email : '',
       accessToken : '',
       clientToken : '',
-      education : '',
-      isCollaborativeTeacher : false,
       userAvatar : '',
       userCover : '',
       uid : '',