diff --git a/src/Components/ContactButtons/FollowButton.js b/src/Components/ContactButtons/FollowButton.js
index f2a42e3336b358443d86b7679335a6d204ebba27..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,11 +133,32 @@ 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>
)
}
-export const NoIconButton = styled(Button)`
+const NoIconButton = styled(Button)`
.MuiButton-label {
color : #00bcd4 !important;
}
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/ResourcePageComponents/Sobre.js b/src/Components/ResourcePageComponents/Sobre.js
index 576799ed876e8fd9d466f62703af53ad183724f0..341f8fcd464499b24c2a16cb0c8b716695dd0542 100644
--- a/src/Components/ResourcePageComponents/Sobre.js
+++ b/src/Components/ResourcePageComponents/Sobre.js
@@ -21,7 +21,7 @@ import {Store} from '../../Store'
import styled from 'styled-components'
import Grid from '@material-ui/core/Grid';
import {Link} from 'react-router-dom'
-import {NoIcon, NoIconButton} from '../ContactButtons/FollowButton.js'
+import {NoIcon} from '../ContactButtons/FollowButton.js'
import {NoIconFollowing} from '../ContactButtons/FollowingButton.js'
import Collapse from '@material-ui/core/Collapse';
import SdCardIcon from '@material-ui/icons/SdCard';
@@ -243,25 +243,16 @@ 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}/>
</>
)
:
(
- state.currentUser.id !== '' ? (
- <>
- <NoIcon followableID={props.id} toggleFollowed={toggleFollowed}/>
- <ContactCardOptions followableID={props.id}/>
- </>
- )
- :
- (
- <>
- <NoIconButton onClick={() => handleLogin(true)}>seguir</NoIconButton>
- <ContactCardOptions followableID={props.id}/>
- </>
- )
+ <>
+ <NoIcon followableID={props.id} toggleFollowed={toggleFollowed}/>
+ <ContactCardOptions followableID={props.id}/>
+ </>
)
}
</div>
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" }} />}