From e4149482ff6afd074e6523bafcc4567dcef4b48a Mon Sep 17 00:00:00 2001 From: Vinicius Gabriel Machado <vgm18@inf.ufpr.br> Date: Tue, 13 Apr 2021 15:13:55 -0300 Subject: [PATCH] Fixed button Seguir (animation, behavior when not logged in and mount timing) in recurso and usuario-publico page --- src/Components/ContactButtons/FollowButton.js | 118 ++++++++++++++++-- .../ContactButtons/FollowingButton.js | 46 ++++++- .../ResourcePageComponents/Sobre.js | 21 +--- src/Pages/PublicUserPage.js | 26 ++-- 4 files changed, 171 insertions(+), 40 deletions(-) diff --git a/src/Components/ContactButtons/FollowButton.js b/src/Components/ContactButtons/FollowButton.js index f2a42e33..245eecbc 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 88b9bc6a..424e8f63 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 576799ed..341f8fcd 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 e4fee36a..b54d2d9a 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" }} />} -- GitLab