Merge branch 'Fix_generic_issues' into Develop

src/Components/ContactButtons/FollowButton.js

@@ -16,14 +16,44 @@ 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'
+import React, {useContext, useState} from 'react'
+import {Store} from '../../Store'
 import PersonAddIcon from '@material-ui/icons/PersonAdd';
 import styled from 'styled-components'
 import Button from '@material-ui/core/Button';
 import {putRequest} from '../HelperFunctions/getAxiosConfig'
+import LoginModal from './../LoginModal.js'
+import Snackbar from '@material-ui/core/Snackbar';
+import SignUpModal from './../SignUpModal'
+import MuiAlert from '@material-ui/lab/Alert';
+
+function Alert(props) {
+    return <MuiAlert elevation={6} variant="filled" {...props} />;
+}
 
 export default function FollowButton (props) {
 
+    const {state} = useContext(Store)
+    const [loginOpen, setLogin] = useState(false)
+    const [successfulLoginOpen, handleSuccessfulLogin] = useState(false)
+    const [signUpOpen, setSignUp] = useState(false)
+
+    const handleSignUp = () => {
+        setSignUp(!signUpOpen)
+    }
+
+    const handleLogin = () => {
+        setLogin(!loginOpen)
+    }
+
+    const toggleSnackbar = (event, reason) => {
+        if (reason === 'clickaway') {
+            return;
+        }
+  
+          handleSuccessfulLogin(false);
+    }
+
     function handleSuccess (data) {
         props.toggleFollowed()
     }
@@ -36,6 +66,20 @@ export default function FollowButton (props) {
     }
 
     return (
+        <React.Fragment>
+            <Snackbar open={successfulLoginOpen} autoHideDuration={1000} onClose={toggleSnackbar}
+                anchorOrigin={{ vertical: 'top', horizontal: 'center' }}
+            >
+                <Alert severity="success" style={{ backgroundColor: "#00acc1" }}>Você está conectado(a)!</Alert>
+            </Snackbar>
+            {/*-------------------------------MODALS---------------------------------------*/}
+            <LoginModal open={loginOpen} handleClose={() => setLogin(false)} openSignUp={handleSignUp}
+                openSnackbar={() => { handleSuccessfulLogin(true) }}
+            />
+            <SignUpModal open={signUpOpen} handleClose={handleSignUp} openLogin={handleLogin} />
+            {/*----------------------------------------------------------------------------*/}
+            {
+                state.currentUser.id !== '' ? (
                     <StyledButton onClick={() => handleFollow(props.followerID)}>
                     <PersonAddIcon style={{fontSize : "24px",
                         display : "inline-block",
@@ -44,9 +88,42 @@ export default function FollowButton (props) {
                         SEGUIR
                     </StyledButton>
                 )
+                :
+                (
+                    <StyledButton onClick={() => handleLogin(true)}>
+                    <PersonAddIcon style={{fontSize : "24px",
+                        display : "inline-block",
+                        verticalAlign : "middle",
+                        color : "#00bcd4"}}/>
+                        SEGUIR
+                    </StyledButton>
+                )
+            }
+        </React.Fragment>
+    )
 }
 
 export function NoIcon (props) {
+    const {state} = useContext(Store)
+    const [loginOpen, setLogin] = useState(false)
+    const [successfulLoginOpen, handleSuccessfulLogin] = useState(false)
+    const [signUpOpen, setSignUp] = useState(false)
+
+    const handleSignUp = () => {
+        setSignUp(!signUpOpen)
+    }
+
+    const handleLogin = () => {
+        setLogin(!loginOpen)
+    }
+
+    const toggleSnackbar = (event, reason) => {
+        if (reason === 'clickaway') {
+            return;
+        }
+  
+          handleSuccessfulLogin(false);
+    }
 
     const handleFollow = (followerID) => {
         if (followerID !== undefined) {
@@ -56,8 +133,29 @@ export function NoIcon (props) {
     }
 
     return (
+        <React.Fragment>
+            <Snackbar open={successfulLoginOpen} autoHideDuration={1000} onClose={toggleSnackbar}
+                anchorOrigin={{ vertical: 'top', horizontal: 'center' }}
+            >
+                <Alert severity="success" style={{ backgroundColor: "#00acc1" }}>Você está conectado(a)!</Alert>
+            </Snackbar>
+            {/*-------------------------------MODALS---------------------------------------*/}
+            <LoginModal open={loginOpen} handleClose={() => setLogin(false)} openSignUp={handleSignUp}
+                openSnackbar={() => { handleSuccessfulLogin(true) }}
+            />
+            <SignUpModal open={signUpOpen} handleClose={handleSignUp} openLogin={handleLogin} />
+            {/*----------------------------------------------------------------------------*/}
+            {
+                state.currentUser.id !== '' ? (
                     <NoIconButton onClick={() => handleFollow(props.followableID)}>seguir</NoIconButton>
                 )
+                :
+                (
+                    <NoIconButton onClick={() => handleLogin(true)}>seguir</NoIconButton>
+                )
+            }
+        </React.Fragment>
+    )
 }
 
 const NoIconButton = styled(Button)`

src/Components/ContactButtons/FollowingButton.js

@@ -79,14 +79,54 @@ export default function FollowingButton (props) {
 }
 
 export function NoIconFollowing (props) {
-    const handleFollow = (unfollowID) => {
+    const [modalOpen, toggleModal] = useState(false)
+    const [unfollowID, setUnfollowID] = useState(-1)
+
+    const [followingHover, handleFollowingHover] = useState(false)
+    const toggleFollowingHover = (value) => {handleFollowingHover(value)}
+
+    const handleUnfollowPartOne = (followedID) => {
+        setUnfollowID(followedID)
+        toggleModal(true)
+    }
+
+
+    function handleSuccess (data) {
+        props.toggleFollowed()
+        toggleModal(false)
+    }
+    const handleUnfollowPartTwo = () => {
         const url = `/users/${unfollowID}/follow/`
 
-        putRequest(url, {}, (data) => {props.toggleFollowed()}, (error) => {console.log(error)})
+        putRequest(url, {}, handleSuccess, (error) => {console.log(error)})
     }
 
     return (
-        <NoIconButton onClick={() => handleFollow(props.followableID)}>seguindo</NoIconButton>
+        <React.Fragment>
+            <ModalConfirmarUnfollow open={modalOpen}
+                handleClose={() => {toggleModal(false)}}
+                handleConfirm = {handleUnfollowPartTwo}
+            />
+            <NoIconButton
+                onMouseOver={() => toggleFollowingHover(true)}
+                onMouseLeave={() => toggleFollowingHover(false)}
+                onClick={() => handleUnfollowPartOne(props.followedID)}
+            >
+                {
+                    followingHover?
+                    (
+                        [
+                            <span>DEIXAR DE SEGUIR</span>
+                        ]
+                    )
+                    : (
+                        [
+                            <span>SEGUINDO</span>
+                    ]
+                )
+            }
+            </NoIconButton>
+        </React.Fragment>
     )
 }
 

src/Components/ContactCardOptions.js

@@ -16,7 +16,8 @@ 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 React, {useContext, useState} from 'react';
+import {Store} from '../Store'
 import styled from 'styled-components'
 import Button from '@material-ui/core/Button';
 import Menu from '@material-ui/core/Menu';
@@ -29,10 +30,37 @@ import PersonAddIcon from '@material-ui/icons/PersonAdd';
 import {putRequest} from './HelperFunctions/getAxiosConfig'
 import ReportModal from './ReportModal.js'
 import {Link} from 'react-router-dom'
+import LoginModal from './LoginModal.js'
+import Snackbar from '@material-ui/core/Snackbar';
+import SignUpModal from './SignUpModal'
+import MuiAlert from '@material-ui/lab/Alert';
+
+function Alert(props) {
+    return <MuiAlert elevation={6} variant="filled" {...props} />;
+}
 
 export default function SimpleMenu(props) {
-    // const {state} = useContext(Store)
+    const {state} = useContext(Store)
     const [anchorEl, setAnchorEl] = React.useState(null);
+    const [loginOpen, setLogin] = useState(false)
+    const [successfulLoginOpen, handleSuccessfulLogin] = useState(false)
+    const [signUpOpen, setSignUp] = useState(false)
+
+    const handleSignUp = () => {
+        setSignUp(!signUpOpen)
+    }
+
+    const handleLogin = () => {
+        setLogin(!loginOpen)
+    }
+
+    const toggleSnackbar = (event, reason) => {
+        if (reason === 'clickaway') {
+            return;
+        }
+  
+          handleSuccessfulLogin(false);
+    }
 
     function handleClick(event) {
         setAnchorEl(event.currentTarget);
@@ -58,6 +86,18 @@ export default function SimpleMenu(props) {
     }
 
   return (
+    <React.Fragment>
+        <Snackbar open={successfulLoginOpen} autoHideDuration={1000} onClose={toggleSnackbar}
+            anchorOrigin={{ vertical: 'top', horizontal: 'center' }}
+        >
+            <Alert severity="success" style={{ backgroundColor: "#00acc1" }}>Você está conectado(a)!</Alert>
+        </Snackbar>
+        {/*-------------------------------MODALS---------------------------------------*/}
+        <LoginModal open={loginOpen} handleClose={() => setLogin(false)} openSignUp={handleSignUp}
+            openSnackbar={() => { handleSuccessfulLogin(true) }}
+        />
+        <SignUpModal open={signUpOpen} handleClose={handleSignUp} openLogin={handleLogin} />
+        {/*----------------------------------------------------------------------------*/}  
         <>
         {
             reportModal &&
@@ -92,19 +132,37 @@ export default function SimpleMenu(props) {
                     )
                     :
                     (
+                        state.currentUser.id !== '' ? (
                             <StyledMenuItem onClick={() => {handleFollow(props.followableID)}}>
                                 <ListItemIcon><PersonAddIcon /></ListItemIcon>Seguir
                             </StyledMenuItem>
                         )
+                        :
+                        (
+                            <StyledMenuItem onClick={() => {handleLogin(props.followableID)}}>
+                                <ListItemIcon><PersonAddIcon /></ListItemIcon>Seguir
+                            </StyledMenuItem>
+                        )
+                    )
                 }
 
-
+                {
+                    state.currentUser.id !== '' ? (
                         <StyledMenuItem onClick={() => {handleModal(true); handleClose()}}>
                             <ListItemIcon><ReportIcon /></ListItemIcon>Reportar
                         </StyledMenuItem>
+                    )
+                    :
+                    (
+                        <StyledMenuItem onClick={() => {handleLogin(true)}}>
+                            <ListItemIcon><ReportIcon /></ListItemIcon>Reportar
+                        </StyledMenuItem>
+                    )
+                }
             </Menu>
         </div>
         </>
+    </React.Fragment>
   );
 }
 

src/Components/HomeScreenSearchBar.js

@@ -17,6 +17,7 @@ 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, useContext } from 'react'
+import { Redirect } from 'react-router-dom'
 import Grid from '@material-ui/core/Grid';
 import styled from 'styled-components'
 import Menu from '@material-ui/core/Menu';
@@ -30,7 +31,7 @@ export default function HomeScreenSearchBar (props) {
     const [ query, setQuery ] = useState("")
     const [ searchClass, setSearchClass ] = useState('LearningObject')
 
-    const { dispatch } = useContext(Store)
+    const { state, dispatch } = useContext(Store)
 
     const [ goSearch, setGoSearch ] = useState(false)
 
@@ -94,6 +95,7 @@ export default function HomeScreenSearchBar (props) {
 
             <StyledGrid container>
                 <Grid item md={7} xs={12} className="first white">
+                    {goSearch && <Redirect to={`/busca?query=${state.search.query}&search_class=${state.search.class}`} />}
                     <StyledTextField
                         id="standard-search"
                         placeholder="O que está buscando?"

src/Components/LoginContainerFunction.js

@@ -157,7 +157,7 @@ export default function LoginContainer (props) {
 
                         <RememberRecover>
                             <LabeledCheckbox label={<StyledLabel><StyledSpan>Lembrar-me</StyledSpan></StyledLabel>} handleChange={() => setCheckbox(!checkboxControl)}/>
-                            <UserForgotTheirPasswordSpan>Esqueceu a senha? <Link to={"recuperar-senha"} style={{textAlign: "right", color:"#4cd0e1"}} onClick={props.handleClose}>Clique aqui!</Link></UserForgotTheirPasswordSpan>
+                            <UserForgotTheirPasswordSpan>Esqueceu a senha? <Link to={"/recuperar-senha"} style={{textAlign: "right", color:"#4cd0e1"}} onClick={props.handleClose}>Clique aqui!</Link></UserForgotTheirPasswordSpan>
                         </RememberRecover>
 
                         <ConfirmContainerStyled>

src/Components/ResourcePageComponents/CommentsArea.js

@@ -27,12 +27,39 @@ import {apiDomain} from '../../env';
 import CommentForm from './CommentForm.js'
 import Comment from '../Comment.js'
 import {getRequest} from '../HelperFunctions/getAxiosConfig'
+import LoginModal from './../LoginModal.js'
+import Snackbar from '@material-ui/core/Snackbar';
+import SignUpModal from './../SignUpModal'
+import MuiAlert from '@material-ui/lab/Alert';
+
+function Alert(props) {
+    return <MuiAlert elevation={6} variant="filled" {...props} />;
+}
 
 export default function CommentsArea (props) {
     const {state} = useContext(Store)
     const [comentarios, setComentarios] = useState([])
     const [gambiarra, setState] = useState(0)
     const forceUpdate = () => {setState(gambiarra + 1)}
+    const [loginOpen, setLogin] = useState(false)
+    const [successfulLoginOpen, handleSuccessfulLogin] = useState(false)
+    const [signUpOpen, setSignUp] = useState(false)
+
+    const handleSignUp = () => {
+        setSignUp(!signUpOpen)
+    }
+
+    const handleLogin = () => {
+        setLogin(!loginOpen)
+    }
+
+    const toggleSnackbar = (event, reason) => {
+        if (reason === 'clickaway') {
+            return;
+        }
+  
+          handleSuccessfulLogin(false);
+    }
 
     function handleSuccess (data) {
         setComentarios(data.sort((a, b) => a.updated_at > b.updated_at ? -1 : 1))
@@ -45,6 +72,18 @@ export default function CommentsArea (props) {
     }, [gambiarra])
 
     return (
+        <React.Fragment>
+            <Snackbar open={successfulLoginOpen} autoHideDuration={1000} onClose={toggleSnackbar}
+                anchorOrigin={{ vertical: 'top', horizontal: 'center' }}
+            >
+                <Alert severity="success" style={{ backgroundColor: "#00acc1" }}>Você está conectado(a)!</Alert>
+            </Snackbar>
+            {/*-------------------------------MODALS---------------------------------------*/}
+            <LoginModal open={loginOpen} handleClose={() => setLogin(false)} openSignUp={handleSignUp}
+                openSnackbar={() => { handleSuccessfulLogin(true) }}
+            />
+            <SignUpModal open={signUpOpen} handleClose={handleSignUp} openLogin={handleLogin} />
+            {/*----------------------------------------------------------------------------*/}  
             <Grid container spacing={2} style={{padding : "10px"}}>
                 {
                     (state.currentUser.id !== '') ?
@@ -73,8 +112,7 @@ export default function CommentsArea (props) {
                             <Grid item xs={12}>
                                 <LogInToComment>
                                     <span className="span-laranja">Você precisa entrar para comentar</span>
-                                {/*adicionar funcionalidade ao botao de entrar*/}
-                                <Button style={{textTransform : "uppercase", color : "#666", fontWeight : "700"}}>
+                                    <Button onClick={() => handleLogin(true)} style={{textTransform : "uppercase", color : "#666", fontWeight : "700"}}>
                                         <ExitToAppIcon/>ENTRAR
                                     </Button>
                                 </LogInToComment>
@@ -123,6 +161,7 @@ export default function CommentsArea (props) {
                     )
                 }
             </Grid>
+        </React.Fragment>
     )
 }
 

src/Components/ResourcePageComponents/Footer.js

@@ -33,6 +33,14 @@ import RedirectModal from '../RedirectModal'
 import MoreVertIcon from '@material-ui/icons/MoreVert';
 import Menu from '@material-ui/core/Menu';
 import MenuItem from '@material-ui/core/MenuItem';
+import LoginModal from './../LoginModal.js'
+import Snackbar from '@material-ui/core/Snackbar';
+import SignUpModal from './../SignUpModal'
+import MuiAlert from '@material-ui/lab/Alert';
+
+function Alert(props) {
+    return <MuiAlert elevation={6} variant="filled" {...props} />;
+}
 
 function ReportButton (props) {
     return (
@@ -93,9 +101,28 @@ export default function Footer (props) {
     const [shareOpen, toggleShare] = useState(false)
     const [saveToCol, toggleSave] = useState(false)
     const [redirectOpen, toggleRedirect] = useState(false)
+    const [loginOpen, setLogin] = useState(false)
+    const [successfulLoginOpen, handleSuccessfulLogin] = useState(false)
+    const [signUpOpen, setSignUp] = useState(false)
 
     const [anchorEl, setAnchorEl] = React.useState(null);
 
+    const handleSignUp = () => {
+        setSignUp(!signUpOpen)
+    }
+
+    const handleLogin = () => {
+        setLogin(!loginOpen)
+    }
+
+    const toggleSnackbar = (event, reason) => {
+        if (reason === 'clickaway') {
+            return;
+        }
+  
+          handleSuccessfulLogin(false);
+    }
+
     function handleClick(event) {
       setAnchorEl(event.currentTarget);
     }
@@ -106,6 +133,11 @@ export default function Footer (props) {
 
     return (
         <React.Fragment>
+            <Snackbar open={successfulLoginOpen} autoHideDuration={1000} onClose={toggleSnackbar}
+                anchorOrigin={{ vertical: 'top', horizontal: 'center' }}
+            >
+                <Alert severity="success" style={{ backgroundColor: "#00acc1" }}>Você está conectado(a)!</Alert>
+            </Snackbar>
             {/*-------------------------------MODALS---------------------------------------*/}
             <ReportModal open={reportOpen} handleClose={() => {toggleReport(false)}}
                 form="recurso"
@@ -122,6 +154,10 @@ export default function Footer (props) {
             <RedirectModal open={redirectOpen} handleClose={() => {toggleRedirect(false)}}
                 link={props.link}
                 />
+            <LoginModal open={loginOpen} handleClose={() => setLogin(false)} openSignUp={handleSignUp}
+                openSnackbar={() => { handleSuccessfulLogin(true) }}
+            />
+            <SignUpModal open={signUpOpen} handleClose={handleSignUp} openLogin={handleLogin} />  
             {/*----------------------------------------------------------------------------*/}
 
             {/*-----------------------------BUTTONS----------------------------------------*/}
@@ -136,14 +172,14 @@ export default function Footer (props) {
                                 <ReportButton
                                     userLoggedIn={state.currentUser.id === '' ? false : true}
                                     toggleReport={() => {toggleReport(true)}}
-                                    openLogin={() => console.log('abrir login modal')}
+                                    openLogin={handleLogin}
                                     complained={props.complained}
                                     />
                             </Grid>
 
                             {/*Botao Compartilhar*/}
                             <Grid item xs={3}>
-                                <ButtonGrey onClick={state.currentUser.id === '' ? () => console.log('abrir login modal') : () => toggleShare(true)}>
+                                <ButtonGrey onClick={state.currentUser.id === '' ? () => handleLogin(true) : () => toggleShare(true)}>
                                     <span className="button-text">
                                         <ShareIcon className="icon"/> Compartilhar
                                     </span>
@@ -152,7 +188,7 @@ export default function Footer (props) {
 
                             {/*Botao Guardar*/}
                             <Grid item xs={3}>
-                                <ButtonGrey onClick={state.currentUser.id === '' ? () => console.log('abrir login modal') : () => toggleSave(true)}>
+                                <ButtonGrey onClick={state.currentUser.id === '' ? () => handleLogin(true) : () => toggleSave(true)}>
                                     <span className="button-text">
                                         <FolderIcon className="icon"/>Guardar
                                     </span>
@@ -174,7 +210,7 @@ export default function Footer (props) {
                             <React.Fragment>
                             {/*Botao Guardar*/}
                             <Grid item xs={4}>
-                                <ButtonGrey onClick={state.currentUser.id === '' ? () => console.log('abrir login modal') : () => toggleSave(true)}>
+                                <ButtonGrey onClick={state.currentUser.id === '' ? () => handleLogin(true) : () => toggleSave(true)}>
                                     <span className="button-text">
                                         <FolderIcon className="icon"/>Guardar
                                     </span>
@@ -205,12 +241,12 @@ export default function Footer (props) {
                                         <ReportButton
                                             userLoggedIn={state.currentUser.id === '' ? false : true}
                                             toggleReport={() => {toggleReport(true)}}
-                                            openLogin={() => console.log('abrir login modal')}
+                                            openLogin={handleLogin}
                                             complained={props.complained}
                                             />
                                     </MenuItem>
                                     <MenuItem>
-                                        <ButtonGrey onClick={state.currentUser.id === '' ? () => console.log('abrir login modal') : () => toggleShare(true)}>
+                                        <ButtonGrey onClick={state.currentUser.id === '' ? () => handleLogin(true) : () => toggleShare(true)}>
                                             <span className="button-text">
                                                 <ShareIcon className="icon"/> Compartilhar
                                             </span>

src/Components/ResourcePageComponents/Sobre.js

@@ -34,6 +34,14 @@ import UpdateIcon from '@material-ui/icons/Update';
 import AssignmentIcon from '@material-ui/icons/Assignment';
 import License from '../../img/cc_license.png'
 import ContactCardOptions from '../ContactCardOptions.js'
+import LoginModal from './../LoginModal.js'
+import Snackbar from '@material-ui/core/Snackbar';
+import SignUpModal from './../SignUpModal'
+import MuiAlert from '@material-ui/lab/Alert';
+
+function Alert(props) {
+    return <MuiAlert elevation={6} variant="filled" {...props} />;
+}
 
 function AdditionalInfoItem (props) {
     return (
@@ -50,6 +58,25 @@ export default function Sobre (props) {
 
     const [collapsed, setCollapsed] = useState(false)
     const toggleCollapsed = () => {setCollapsed(!collapsed)};
+    const [loginOpen, setLogin] = useState(false)
+    const [successfulLoginOpen, handleSuccessfulLogin] = useState(false)
+    const [signUpOpen, setSignUp] = useState(false)
+
+    const handleSignUp = () => {
+        setSignUp(!signUpOpen)
+    }
+
+    const handleLogin = () => {
+        setLogin(!loginOpen)
+    }
+
+    const toggleSnackbar = (event, reason) => {
+        if (reason === 'clickaway') {
+            return;
+        }
+  
+          handleSuccessfulLogin(false);
+    }
 
     var moment = require('moment')
 
@@ -141,6 +168,18 @@ export default function Sobre (props) {
     const toggleFollowed = () => {setFollowed(!followed)}
 
     return (
+        <React.Fragment>
+            <Snackbar open={successfulLoginOpen} autoHideDuration={1000} onClose={toggleSnackbar}
+                anchorOrigin={{ vertical: 'top', horizontal: 'center' }}
+            >
+                <Alert severity="success" style={{ backgroundColor: "#00acc1" }}>Você está conectado(a)!</Alert>
+            </Snackbar>
+            {/*-------------------------------MODALS---------------------------------------*/}
+            <LoginModal open={loginOpen} handleClose={() => setLogin(false)} openSignUp={handleSignUp}
+                openSnackbar={() => { handleSuccessfulLogin(true) }}
+            />
+            <SignUpModal open={signUpOpen} handleClose={handleSignUp} openLogin={handleLogin} />
+            {/*----------------------------------------------------------------------------*/}
             <Grid container style={{paddingRight : "15px", paddingLeft : "15px"}}>
 
                 <Grid item xs={windowWidth > 990 ? 9 : 12} style={{paddingRight : "15px"}}>
@@ -204,7 +243,7 @@ export default function Sobre (props) {
                             (props.id !== state.currentUser.id) &&
                             followed ? (
                                 <>
-                            <NoIconFollowing followableID={props.id} toggleFollowed={toggleFollowed}/>
+                                <NoIconFollowing followedID={props.id} toggleFollowed={toggleFollowed}/>
                                 <ContactCardOptions followableID={props.id}/>
                                 </>
                             )
@@ -241,6 +280,7 @@ export default function Sobre (props) {
                     </CollapseControl>
                 </Grid>
             </Grid>
+        </React.Fragment>
     )
 }
 

src/Pages/PublicUserPage.js

@@ -16,7 +16,8 @@ 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 React, { useEffect, useState, useContext } from 'react'
+import {Store} from '../Store'
 import styled from 'styled-components'
 import { apiDomain } from '../env';
 import CustomizedBreadcrumbs from '../Components/TabPanels/Breadcrumbs.js'
@@ -37,25 +38,26 @@ import { fetchAllRequest } from '../Components/HelperFunctions/getAxiosConfig'
 import Typography from '@material-ui/core/Typography';
 import CircularProgress from '@material-ui/core/CircularProgress';
 
-const RenderFollowContainer = (boolUserFollowed, id, followCount) => {
+function RenderFollowContainer(props) {
+    const {state} = useContext(Store)
+    const [followed, setFollowed] = useState(props.followed)
+    const toggleFollowed = () => {setFollowed(!followed)}
+    console.log(followed);
     return (
         <FollowContainer>
             <>
                 {
-                    boolUserFollowed ?
+                    (props.id !== state.currentUser.id) &&
+                    followed ?
                         (
-                            [
-                                <FollowingButton followedID={id} />
-                            ]
+                            <FollowingButton followedID={props.id} toggleFollowed={toggleFollowed}/>
                         )
                         :
                         (
-                            [
-                                <FollowButton followerID={id} />
-                            ]
+                            <FollowButton followerID={props.id} toggleFollowed={toggleFollowed}/>
                         )
                 }
-                <FollowersCountButton followCount={followCount} />
+                <FollowersCountButton followCount={props.followCount} />
             </>
         </FollowContainer>
     )
@@ -132,7 +134,6 @@ export default function PublicUserPage(props) {
     /*---------------------------------------------------------*/
 
     function handleSuccess(responseArr) {
-        setLoading(false);
         fillUserInfo(responseArr[0])
 
         handleLearningObjects(responseArr[1])
@@ -140,6 +141,7 @@ export default function PublicUserPage(props) {
         handleCollections(responseArr[2])
 
         fillFollowing(responseArr[3]);
+        setLoading(false);
     }
 
     /*Component Will Mount*/
@@ -163,7 +165,7 @@ export default function PublicUserPage(props) {
                             <UserProfileContainer>
                                 <HeaderContainer>
                                     <>
-                                        {RenderFollowContainer(userData.followed, id, userData.follows_count)}
+                                        {!loading && <RenderFollowContainer followed={userData.followed} id={id} followCount={userData.follows_count} />}
                                         {RenderProfileAvatar(userData.avatar ? userData.avatar : undefined)}
                                         <CoverContainer>
                                             {userData.cover && <img src={apiDomain + userData.cover} alt='' style={{ width: "100%", height: "100%", objectFit: "cover" }} />}