diff --git a/src/Components/ContactButtons/FollowButton.js b/src/Components/ContactButtons/FollowButton.js
index 9666eeaeb2d81cb5aa0d181ab84f93876dc26b1b..245eecbccd12abba7a88c5d76643d9302328c0d9 100644
--- a/src/Components/ContactButtons/FollowButton.js
+++ b/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,17 +66,64 @@ export default function FollowButton (props) {
}
return (
- <StyledButton onClick={() => handleFollow(props.followerID)}>
- <PersonAddIcon style={{fontSize : "24px",
- display : "inline-block",
- verticalAlign : "middle",
- color : "#00bcd4"}}/>
- SEGUIR
- </StyledButton>
+ <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",
+ verticalAlign : "middle",
+ color : "#00bcd4"}}/>
+ 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,7 +133,28 @@ export function NoIcon (props) {
}
return (
- <NoIconButton onClick={() => handleFollow(props.followableID)}>seguir</NoIconButton>
+ <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>
)
}
diff --git a/src/Components/ContactButtons/FollowingButton.js b/src/Components/ContactButtons/FollowingButton.js
index 88b9bc6a850a7405918c8fde7fdfbc342bbed3f7..424e8f63a12cb10a40ae64112431b2152bb0c668 100644
--- a/src/Components/ContactButtons/FollowingButton.js
+++ b/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>
)
}
diff --git a/src/Components/ContactCardOptions.js b/src/Components/ContactCardOptions.js
index deb12ba4e7a9c4a68785e59986ed3b85d3a05065..4a1340e49610f335749d4db4a3b2212a03afd1a3 100644
--- a/src/Components/ContactCardOptions.js
+++ b/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,53 +86,83 @@ export default function SimpleMenu(props) {
}
return (
- <>
- {
- reportModal &&
- <ReportModal open={reportModal} handleClose={() => handleModal(false)}
- form="user" complainableId={props.followableID}
- complainableType={"User"}
- {...props}/>
- }
- <div style={{fontSize: "12px", display : "flex", flexDirection : "column", justifyContent : "center"}}>
- <ButtonNoWidth aria-controls="simple-menu" aria-haspopup="true" onClick={handleClick} style={{color : "#666"}}>
- <MoreVertIcon style={{color : "#666"}}/>
- </ButtonNoWidth>
- <Menu
- id="simple-menu"
- anchorEl={anchorEl}
- keepMounted
- open={Boolean(anchorEl)}
- onClose={handleClose}
- >
- <StyledMenuItem onClick={handleClose}>
- <Link to={"/usuario-publico/" + props.followableID}>
- <ListItemIcon><OpenIcon /></ListItemIcon>Abrir
- </Link>
- </StyledMenuItem>
-
- {
- props.followed ?
- (
- <StyledMenuItem onClick={() => {handleFollow(props.followableID)}}>
- <ListItemIcon><ReportIcon /></ListItemIcon>Deixar de Seguir
- </StyledMenuItem>
- )
- :
- (
- <StyledMenuItem onClick={() => {handleFollow(props.followableID)}}>
- <ListItemIcon><PersonAddIcon /></ListItemIcon>Seguir
- </StyledMenuItem>
- )
- }
-
-
- <StyledMenuItem onClick={() => {handleModal(true); handleClose()}}>
- <ListItemIcon><ReportIcon /></ListItemIcon>Reportar
- </StyledMenuItem>
- </Menu>
+ <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 &&
+ <ReportModal open={reportModal} handleClose={() => handleModal(false)}
+ form="user" complainableId={props.followableID}
+ complainableType={"User"}
+ {...props}/>
+ }
+ <div style={{fontSize: "12px", display : "flex", flexDirection : "column", justifyContent : "center"}}>
+ <ButtonNoWidth aria-controls="simple-menu" aria-haspopup="true" onClick={handleClick} style={{color : "#666"}}>
+ <MoreVertIcon style={{color : "#666"}}/>
+ </ButtonNoWidth>
+ <Menu
+ id="simple-menu"
+ anchorEl={anchorEl}
+ keepMounted
+ open={Boolean(anchorEl)}
+ onClose={handleClose}
+ >
+ <StyledMenuItem onClick={handleClose}>
+ <Link to={"/usuario-publico/" + props.followableID}>
+ <ListItemIcon><OpenIcon /></ListItemIcon>Abrir
+ </Link>
+ </StyledMenuItem>
+
+ {
+ props.followed ?
+ (
+ <StyledMenuItem onClick={() => {handleFollow(props.followableID)}}>
+ <ListItemIcon><ReportIcon /></ListItemIcon>Deixar de Seguir
+ </StyledMenuItem>
+ )
+ :
+ (
+ 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>
);
}
diff --git a/src/Components/HomeScreenSearchBar.js b/src/Components/HomeScreenSearchBar.js
index b6c2b5554c3ab96afc996dc7f409a95d7bdbec6b..ed3b4cc1fc76e07b23a718476c35fd174ea71aed 100644
--- a/src/Components/HomeScreenSearchBar.js
+++ b/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,12 +31,12 @@ 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)
useEffect(()=>{
- if(window.location.pathname.includes('busca')){
+ if(window.location.pathname.includes('busca')){
const urlParams = new URLSearchParams(window.location.search)
const urlQuery = urlParams.get('query')
const urlSearchClass = urlParams.get('search_class')
@@ -57,7 +58,7 @@ export default function HomeScreenSearchBar (props) {
dispatch({
type: 'SAVE_SEARCH',
newSearch: {
- query: query!==''?query:'*',
+ query: query !== '' ? query: '*',
class: searchClass
}
})
@@ -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?"
diff --git a/src/Components/LoginContainerFunction.js b/src/Components/LoginContainerFunction.js
index 8534da0ad3bbe1154612b62b1eeff24f4f26cbfc..0e79abf17cab7bbac7e4ca221e4baa119b0ea6e1 100644
--- a/src/Components/LoginContainerFunction.js
+++ b/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>
diff --git a/src/Components/ResourcePageComponents/CommentsArea.js b/src/Components/ResourcePageComponents/CommentsArea.js
index 10a9482f73b5e49ac3e7089453cee29378fca290..946ce4d4fc3e276b95e673a742b58a973f6fe065 100644
--- a/src/Components/ResourcePageComponents/CommentsArea.js
+++ b/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,84 +72,96 @@ export default function CommentsArea (props) {
}, [gambiarra])
return (
- <Grid container spacing={2} style={{padding : "10px"}}>
- {
- (state.currentUser.id !== '') ?
- (
- <Grid item xs={12} >
- <GrayContainer>
- <h3>Conte sua experiência com o Recurso</h3>
- <Grid container style={{paddingTop : "20px"}}>
- <Grid item xs={2} style={{paddingLeft : "15px", paddingRight : "15px"}}>
- <img src={apiDomain + state.currentUser.avatar} className="minha-imagem" alt="user avatar"/>
- </Grid>
- <Grid item xs={10}>
- <CommentForm
- recursoId={props.recursoId}
- handleSnackbar={props.handleSnackbar}
- rerenderCallback={forceUpdate}
- recurso={props.recurso}
- />
+ <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 !== '') ?
+ (
+ <Grid item xs={12} >
+ <GrayContainer>
+ <h3>Conte sua experiência com o Recurso</h3>
+ <Grid container style={{paddingTop : "20px"}}>
+ <Grid item xs={2} style={{paddingLeft : "15px", paddingRight : "15px"}}>
+ <img src={apiDomain + state.currentUser.avatar} className="minha-imagem" alt="user avatar"/>
+ </Grid>
+ <Grid item xs={10}>
+ <CommentForm
+ recursoId={props.recursoId}
+ handleSnackbar={props.handleSnackbar}
+ rerenderCallback={forceUpdate}
+ recurso={props.recurso}
+ />
+ </Grid>
</Grid>
- </Grid>
- </GrayContainer>
- </Grid>
- )
- :
- (
- <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"}}>
- <ExitToAppIcon/>ENTRAR
- </Button>
- </LogInToComment>
- </Grid>
- )
- }
- {
- comentarios.length !== 0 ?
- (
- <ComentariosBox>
- <h3>{comentarios.length} {comentarios.length !== 1 ? 'Relatos' : 'Relato'} sobre o uso do Recurso</h3>
- {
- comentarios.map( comentario =>
- <div className="comentario-template" key={comentario.id}>
- <Comment
- authorID={comentario.user ? comentario.user.id : null}
- authorAvatar={comentario.user ? comentario.user.avatar : null}
- authorName={comentario.user ? comentario.user.name : null}
- name={comentario.name}
- rating={comentario.rating_average}
- reviewRatings = {comentario.review_ratings}
- description={comentario.description}
- createdAt={comentario.created_at}
- recurso={true}
- reviewID={comentario.id}
- objectID={props.recursoId}
- rerenderCallback={forceUpdate}
- handleSnackbar={props.handleSnackbar}
- />
- </div>
- )
- }
- </ComentariosBox>
- )
- :
- (
- <Grid item xs={12}>
- <LogInToComment>
- <img alt="" src={Comentarios} />
- <span className="span-laranja">Compartilhe sua experiência com a Rede!</span>
- <AoRelatar>
- Ao relatar sua experiência de uso do Recurso você estará auxiliando professores de todo país.
- </AoRelatar>
- </LogInToComment>
- </Grid>
- )
- }
- </Grid>
+ </GrayContainer>
+ </Grid>
+ )
+ :
+ (
+ <Grid item xs={12}>
+ <LogInToComment>
+ <span className="span-laranja">Você precisa entrar para comentar</span>
+ <Button onClick={() => handleLogin(true)} style={{textTransform : "uppercase", color : "#666", fontWeight : "700"}}>
+ <ExitToAppIcon/>ENTRAR
+ </Button>
+ </LogInToComment>
+ </Grid>
+ )
+ }
+ {
+ comentarios.length !== 0 ?
+ (
+ <ComentariosBox>
+ <h3>{comentarios.length} {comentarios.length !== 1 ? 'Relatos' : 'Relato'} sobre o uso do Recurso</h3>
+ {
+ comentarios.map( comentario =>
+ <div className="comentario-template" key={comentario.id}>
+ <Comment
+ authorID={comentario.user ? comentario.user.id : null}
+ authorAvatar={comentario.user ? comentario.user.avatar : null}
+ authorName={comentario.user ? comentario.user.name : null}
+ name={comentario.name}
+ rating={comentario.rating_average}
+ reviewRatings = {comentario.review_ratings}
+ description={comentario.description}
+ createdAt={comentario.created_at}
+ recurso={true}
+ reviewID={comentario.id}
+ objectID={props.recursoId}
+ rerenderCallback={forceUpdate}
+ handleSnackbar={props.handleSnackbar}
+ />
+ </div>
+ )
+ }
+ </ComentariosBox>
+ )
+ :
+ (
+ <Grid item xs={12}>
+ <LogInToComment>
+ <img alt="" src={Comentarios} />
+ <span className="span-laranja">Compartilhe sua experiência com a Rede!</span>
+ <AoRelatar>
+ Ao relatar sua experiência de uso do Recurso você estará auxiliando professores de todo país.
+ </AoRelatar>
+ </LogInToComment>
+ </Grid>
+ )
+ }
+ </Grid>
+ </React.Fragment>
)
}
diff --git a/src/Components/ResourcePageComponents/Footer.js b/src/Components/ResourcePageComponents/Footer.js
index a0fcbcdab1c5ded02d56b0d1e94f2aa8018d4087..b0a5769cb6a0c268ee52b05f8135600a7a8c0474 100644
--- a/src/Components/ResourcePageComponents/Footer.js
+++ b/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>
diff --git a/src/Components/ResourcePageComponents/Sobre.js b/src/Components/ResourcePageComponents/Sobre.js
index 0d2621877bb8f869e4527bf1eb4b6f2612b0a717..341f8fcd464499b24c2a16cb0c8b716695dd0542 100644
--- a/src/Components/ResourcePageComponents/Sobre.js
+++ b/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,106 +168,119 @@ export default function Sobre (props) {
const toggleFollowed = () => {setFollowed(!followed)}
return (
- <Grid container style={{paddingRight : "15px", paddingLeft : "15px"}}>
-
- <Grid item xs={windowWidth > 990 ? 9 : 12} style={{paddingRight : "15px"}}>
- <Collapse in={collapsed} collapsedHeight={338}>
- <SobreDiv>
- <div className="titulo">
- Sobre o Recurso
- </div>
-
- <div className="sobre-conteudo">
- <div className="tags-container">
- {
- props.tags &&
- props.tags.map( (tag) =>
- <span key={tag.name}>{tag.name}</span>
- )
- }
- </div>
- <div className="conteudo">
- <p className="descricao-objeto">{props.description}</p>
- {
- props.author &&
- <p className="autoria">
- <b>Autoria: </b>{props.author}
- </p>
- }
+ <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"}}>
+ <Collapse in={collapsed} collapsedHeight={338}>
+ <SobreDiv>
+ <div className="titulo">
+ Sobre o Recurso
</div>
- </div>
- <div className="titulo">
- Informações Adicionais
- </div>
+ <div className="sobre-conteudo">
+ <div className="tags-container">
+ {
+ props.tags &&
+ props.tags.map( (tag) =>
+ <span key={tag.name}>{tag.name}</span>
+ )
+ }
+ </div>
+ <div className="conteudo">
+ <p className="descricao-objeto">{props.description}</p>
+ {
+ props.author &&
+ <p className="autoria">
+ <b>Autoria: </b>{props.author}
+ </p>
+ }
+ </div>
+ </div>
- {additionalInfo}
+ <div className="titulo">
+ Informações Adicionais
+ </div>
- </SobreDiv>
- </Collapse>
- </Grid>
+ {additionalInfo}
- <Grid item xs={windowWidth > 990 ? 3 : 12}>
- <MetasObjeto>
- <div className="enviado-por">
- Enviado por:
- </div>
+ </SobreDiv>
+ </Collapse>
+ </Grid>
+ <Grid item xs={windowWidth > 990 ? 3 : 12}>
+ <MetasObjeto>
+ <div className="enviado-por">
+ Enviado por:
+ </div>
- <div className="foto-autor">
- <Link to={"/usuario-publico/" + props.id}>
- <img src={props.avatar} alt="user avatar"/>
- </Link>
- </div>
- <div className="nome-autor">
- <Link to={"/usuario-publico/" + props.id} style={{textDecoration : "none"}}>
- <span className="span-st">{props.publisher}</span>
- </Link>
- </div>
+ <div className="foto-autor">
+ <Link to={"/usuario-publico/" + props.id}>
+ <img src={props.avatar} alt="user avatar"/>
+ </Link>
+ </div>
- <div style={{paddingTop : "0.75em", display : "flex", justifyContent : "center"}}>
- {
- (props.id !== state.currentUser.id) &&
- followed ? (
- <>
- <NoIconFollowing followableID={props.id} toggleFollowed={toggleFollowed}/>
- <ContactCardOptions followableID={props.id}/>
- </>
- )
- :
- (
- <>
- <NoIcon followableID={props.id} toggleFollowed={toggleFollowed}/>
- <ContactCardOptions followableID={props.id}/>
- </>
- )
- }
- </div>
- </MetasObjeto>
- </Grid>
+ <div className="nome-autor">
+ <Link to={"/usuario-publico/" + props.id} style={{textDecoration : "none"}}>
+ <span className="span-st">{props.publisher}</span>
+ </Link>
+ </div>
- <Grid item xs={12} style={{paddingTop : "15px"}}>
- <CollapseControl onClick={() => {toggleCollapsed()}}>
- {
- collapsed ?
- (
- <React.Fragment>
- <span>VER MENOS</span>
- <ExpandLessIcon/>
- </React.Fragment>
- )
- :
- (
- <React.Fragment>
- <span>VER MAIS</span>
- <ExpandMoreIcon/>
- </React.Fragment>
- )
- }
- </CollapseControl>
+ <div style={{paddingTop : "0.75em", display : "flex", justifyContent : "center"}}>
+ {
+ (props.id !== state.currentUser.id) &&
+ followed ? (
+ <>
+ <NoIconFollowing followedID={props.id} toggleFollowed={toggleFollowed}/>
+ <ContactCardOptions followableID={props.id}/>
+ </>
+ )
+ :
+ (
+ <>
+ <NoIcon followableID={props.id} toggleFollowed={toggleFollowed}/>
+ <ContactCardOptions followableID={props.id}/>
+ </>
+ )
+ }
+ </div>
+ </MetasObjeto>
+ </Grid>
+
+ <Grid item xs={12} style={{paddingTop : "15px"}}>
+ <CollapseControl onClick={() => {toggleCollapsed()}}>
+ {
+ collapsed ?
+ (
+ <React.Fragment>
+ <span>VER MENOS</span>
+ <ExpandLessIcon/>
+ </React.Fragment>
+ )
+ :
+ (
+ <React.Fragment>
+ <span>VER MAIS</span>
+ <ExpandMoreIcon/>
+ </React.Fragment>
+ )
+ }
+ </CollapseControl>
+ </Grid>
</Grid>
- </Grid>
+ </React.Fragment>
)
}
diff --git a/src/Pages/PublicUserPage.js b/src/Pages/PublicUserPage.js
index e4fee36a0f3516cb25b938622f26e0e527085f03..b54d2d9ad465ca720e3f7c0f43f5d2ad9df99f9e 100644
--- a/src/Pages/PublicUserPage.js
+++ b/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" }} />}