Skip to content
Snippets Groups Projects
Commit 9e7e9451 authored by lfr20's avatar lfr20
Browse files

Try to fix the animations

parent c533565d
No related branches found
No related tags found
6 merge requests!57Merge of develop into master,!56Fixed buttons reportar, seguir, compartilhar, guardar and entrar (in comments...,!39Update admin system,!32Homologa,!31Fix console error,!28Training materials
Hide whitespace changes
Inline Side-by-side
src/Components/CollectionCardFunction.js
+ 212
− 165
View file @ 9e7e9451
...@@ -16,15 +16,15 @@ GNU Affero General Public License for more details. ...@@ -16,15 +16,15 @@ GNU Affero General Public License for more details.
You should have received a copy of the GNU Affero General Public License 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/>.*/ along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/>.*/
import React, {useState, useContext} from 'react'; import React, { useState, useContext, useEffect } from 'react';
import {Store} from '../Store.js' import { Store } from '../Store.js'
import {apiDomain, apiUrl} from '../env'; import { apiDomain, apiUrl } from '../env';
import noAvatar from "../img/default_profile.png"; import noAvatar from "../img/default_profile.png";
import Button from '@material-ui/core/Button'; import Button from '@material-ui/core/Button';
import styled from 'styled-components' import styled from 'styled-components'
import Slide from '@material-ui/core/Slide'; import Slide from '@material-ui/core/Slide';
import Grid from '@material-ui/core/Grid'; import Grid from '@material-ui/core/Grid';
import {StyledCard, CardDiv, CardReaDiv, Footer, LikeCounter, ButtonNoWidth, EnviadoPor, TagContainer} from './ResourceCardFunction.js' import { StyledCard, CardDiv, CardReaDiv, Footer, LikeCounter, ButtonNoWidth, EnviadoPor, TagContainer } from './ResourceCardFunction.js'
import Rating from '@material-ui/lab/Rating'; import Rating from '@material-ui/lab/Rating';
import StarBorderIcon from '@material-ui/icons/StarBorder'; import StarBorderIcon from '@material-ui/icons/StarBorder';
import FolderIcon from '@material-ui/icons/Folder'; import FolderIcon from '@material-ui/icons/Folder';
...@@ -34,86 +34,109 @@ import CheckIcon from '@material-ui/icons/Check'; ...@@ -34,86 +34,109 @@ import CheckIcon from '@material-ui/icons/Check';
import LockIcon from '@material-ui/icons/Lock'; import LockIcon from '@material-ui/icons/Lock';
import ColCardOwnerOptions from './ColCardOwnerOptions.js' import ColCardOwnerOptions from './ColCardOwnerOptions.js'
import ColCardPublicOptions from './ColCardPublicOptions' import ColCardPublicOptions from './ColCardPublicOptions'
import {Link} from 'react-router-dom'; import { Link } from 'react-router-dom';
import axios from 'axios' import axios from 'axios'
import {getAxiosConfig} from '../Components/HelperFunctions/getAxiosConfig' import { getAxiosConfig } from '../Components/HelperFunctions/getAxiosConfig'
import { saveHeaders } from '../Components/HelperFunctions/saveTokens';
import SignUpModal from './SignUpModal'
import LoginModal from './LoginModal.js'
import Snackbar from '@material-ui/core/Snackbar';
import MuiAlert from '@material-ui/lab/Alert';
export default function CollectionCardFunction (props) { export default function CollectionCardFunction(props) {
const {state} = useContext(Store) console.log(props);
const { state } = useContext(Store)
// eslint-disable-next-line // eslint-disable-next-line
const [userAvatar] = useState(props.avatar ? (`${apiDomain}` + props.avatar) : noAvatar) const [userAvatar] = useState(props.avatar ? (`${apiDomain}` + props.avatar) : noAvatar)
const [userFollowingCol, toggleUserFollowingCol] = useState(props.followed) const [userFollowingCol, toggleUserFollowingCol] = useState(props.followed ? props.followed : false)
const handleToggleUserFollowingCol = () => {toggleUserFollowingCol(!userFollowingCol)} const handleToggleUserFollowingCol = () => { toggleUserFollowingCol(!userFollowingCol) }
const [likesCount, setLikesCount] = useState(props.likeCount) const [likesCount, setLikesCount] = useState(props.likeCount)
const [liked, toggleLiked] = useState(props.liked) const [liked, toggleLiked] = useState(props.liked)
const [signUpOpen, setSignUp] = useState(false)
const [loginOpen, setLogin] = useState(false)
const [successfulLoginOpen, handleSuccessfulLogin] = useState(false)
const handleLike = () => { const handleLike = () => {
let payload = {} let payload = {}
let config = getAxiosConfig() let config = getAxiosConfig()
axios.put( (`${apiUrl}/collections/` + props.id + '/like'),payload, config if (state.currentUser.id) {
).then( axios({
(response) => { method: 'put',
if ( response.headers['access-token'] ) { url: `${apiUrl}/collections/` + props.id + '/like',
sessionStorage.setItem('@portalmec/accessToken', response.headers['access-token']) headers: config.headers
} }).then(
toggleLiked(!liked) (response) => {
setLikesCount(response.data.count) toggleLiked(!liked)
}, setLikesCount(response.data.count)
(error) => {console.log(error)} saveHeaders(response)
) },
(error) => { console.log(error) }
)
}
else {
setLogin(!loginOpen)
}
} }
const [followingHover, handleFollowingHover] = useState(false) const [followingHover, handleFollowingHover] = useState(false)
const toggleFollowingHover = (value) => {handleFollowingHover(value)} const toggleFollowingHover = (value) => { handleFollowingHover(value) }
const [slideIn, setSlide] = useState(false) const [slideIn, setSlide] = useState(false)
const controlSlide = () => {setSlide(!slideIn)} const controlSlide = () => { setSlide(!slideIn) }
const handleFollow = () => { const handleFollow = () => {
let config = getAxiosConfig() let config = getAxiosConfig()
let payload = {} let payload = {}
axios.put( (`${apiUrl}/collections/` + props.id + '/follow'),payload, config).then( if (state.currentUser.id) {
(response) => { axios.put((`${apiUrl}/collections/` + props.id + '/follow'), payload, config).then(
if ( response.headers['access-token'] ) { (response) => {
sessionStorage.setItem('@portalmec/accessToken', response.headers['access-token']) saveHeaders(response)
} handleToggleUserFollowingCol()
console.log(response.data) },
handleToggleUserFollowingCol() (error) => { console.log(error) }
}, )
(error) => {console.log(error)} }
) else {
setLogin(!loginOpen)
}
} }
const RenderFollowButton = () => { const RenderFollowButton = () => {
return ( return (
<FollowButton onClick={handleFollow}> <FollowButton onClick={handleFollow}>
<AddIcon/><span>SEGUIR</span> <AddIcon /><span>SEGUIR</span>
</FollowButton> </FollowButton>
) )
} }
useEffect(() => {
console.log("bla!");
}, [state.currentUser.id])
const RenderFollowingButton = () => { const RenderFollowingButton = () => {
return ( return (
<FollowingButton onMouseOver={() => toggleFollowingHover(true)} <FollowingButton onMouseOver={() => toggleFollowingHover(true)}
onMouseLeave={() => toggleFollowingHover(false)} onClick={handleFollow}> onMouseLeave={() => toggleFollowingHover(false)} onClick={handleFollow}>
{ {
followingHover ? followingHover ?
( (
[ [
<span>DEIXAR DE SEGUIR</span> <span>DEIXAR DE SEGUIR</span>
] ]
) )
: :
( (
[ [
<React.Fragment> <React.Fragment>
<CheckIcon/><span>SEGUINDO</span> <CheckIcon /><span>SEGUINDO</span>
</React.Fragment> </React.Fragment>
] ]
) )
} }
</FollowingButton> </FollowingButton>
) )
...@@ -122,147 +145,171 @@ export default function CollectionCardFunction (props) { ...@@ -122,147 +145,171 @@ export default function CollectionCardFunction (props) {
const SlideAnimationContent = () => { const SlideAnimationContent = () => {
return ( return (
<SlideContentDiv> <SlideContentDiv>
<div style={{display:"flex", flex:"1"}}>{/*marginBottom:10px*/} <div style={{ display: "flex", flex: "1" }}>{/*marginBottom:10px*/}
<SlideAvatarDiv> <SlideAvatarDiv>
<img className="img" src={userAvatar} alt="user avatar"/> <img className="img" src={userAvatar} alt="user avatar" />
</SlideAvatarDiv> </SlideAvatarDiv>
<EnviadoPor> <EnviadoPor>
Enviado por: Enviado por:
<br/> <br />
<p>{props.author}</p> <p>{props.author}</p>
</EnviadoPor> </EnviadoPor>
</div> </div>
{ {
props.tags && props.tags &&
<TagContainer> <TagContainer>
<Grid container spacing={1} justify='safe' style={{height : "inherit"}}> {
{ props.tags.map((tag) =>
props.tags.map( (tag) =>
<Grid item key={tag.id}>
<span key={tag.id}>{tag.name}</span> <span key={tag.id}>{tag.name}</span>
</Grid> )
) }
} </TagContainer>
</Grid>
</TagContainer>
} }
</SlideContentDiv> </SlideContentDiv>
) )
} }
return ( const handleSignUp = () => {
<StyledCard> setSignUp(!signUpOpen)
<CardDiv> }
<CardReaDiv>
<Header onMouseEnter={controlSlide} onMouseLeave={controlSlide}>
{/*slide animation and content*/}
<Slide direction="right" in={slideIn} timeout={300}>
<Link to={"/colecao-do-usuario/" + props.id} className="text">
{/* <a href={"/colecao-do-usuario/" + props.id} className="text"> */}
{SlideAnimationContent()}
</Link>
</Slide>
<Slide direction="left" in={!slideIn} timeout={700}>
<a href={"/colecao-do-usuario/" + props.id}>
<UserInfo>
<AvatarDiv>
<img src={userAvatar} alt="user avatar"/>
</AvatarDiv>
<UserAndTitle>
<span>{props.author}</span>
<span className={"col-name"}>{props.name}</span>
</UserAndTitle>
</UserInfo>
<StyledGrid container direction="row">
{
props.thumbnails.map( (thumb) =>
<Grid item xs={props.thumbnails <= 4 && props.thumbnails > 0 ? 12/props.thumbnails.length : 6}>
<div style={{backgroundImage : `url(${ `${apiDomain}` + thumb})`, height : "100%", width : "100%", backgroundSize : "cover", backgroundPosition : "center"}}/>
</Grid>
)
}
</StyledGrid>
</a>
</Slide>
</Header>
<Description> {/*renders rating, number of learning objects and likes count*/} const handleLogin = () => {
{ setLogin(!loginOpen)
props.authorID !== state.currentUser.id && }
<Rating
name="customized-empty"
value={props.rating*10}
precision={0.5}
style={{color:"#666"}}
emptyIcon={<StarBorderIcon fontSize="inherit" />}
/>
}
<Footer> function Alert(props) {
<Type> return <MuiAlert elevation={6} variant="filled" {...props} />;
<FolderIcon /> }
<span style={{fontWeight:"bold"}}>{props.thumbnails.length} </span>
<span>{props.thumbnails.length !== 1 ? "Recursos" : "Recurso"}</span>
</Type>
<LikeCounter>
<span>{likesCount}</span>
<ButtonNoWidth onClick={handleLike}>
<FavoriteIcon style={{color : liked ? "red" : "#666" }}/>
</ButtonNoWidth>
</LikeCounter>
</Footer>
</Description>
</CardReaDiv>
{ function toggleLoginSnackbar(reason) {
props.authorID === state.currentUser.id ? if (reason === 'clickaway') {
( return;
<CardReaFooter style={{justifyContent : "space-between"}}> {/*renders following/unfollow and follow button*/} }
<Grid container> handleSuccessfulLogin(false);
<Grid item xs={6} style={{display : "flex", justifyContent : "center"}}> }
{
props.privacy === 'private' && return (
<LockIcon style={{color : "#666"}}/> <>
} <SignUpModal open={signUpOpen} handleClose={handleSignUp} openLogin={handleLogin}
</Grid> />
<Grid item xs={6} style={{display : "flex", justifyContent : "flex-end"}}> <LoginModal open={loginOpen} handleClose={() => setLogin(false)} openSignUp={handleSignUp}
<ColCardOwnerOptions openSnackbar={() => { handleSuccessfulLogin(true) }}
id={props.id} />
/> <Snackbar open={successfulLoginOpen} autoHideDuration={1000} onClose={toggleLoginSnackbar}
</Grid> anchorOrigin={{ vertical: 'top', horizontal: 'center' }}
</Grid> >
</CardReaFooter> <Alert severity="success" style={{ backgroundColor: "#00acc1" }}>Você está conectado(a)!</Alert>
) </Snackbar>
: <StyledCard>
( <CardDiv>
<CardReaFooter> {/*renders following/unfollow and follow button*/} <CardReaDiv>
{ <Header onMouseEnter={controlSlide} onMouseLeave={controlSlide}>
userFollowingCol ? {/*slide animation and content*/}
<Slide direction="right" in={slideIn} timeout={1000}>
<Link to={"/colecao-do-usuario/" + props.id} className="text">
{SlideAnimationContent()}
</Link>
</Slide>
<div className={`slideContentLinkBeforeActive${slideIn}`} style={{ width: '100%', height: '100%' }}>
<a href={"/colecao-do-usuario/" + props.id}>
<UserInfo>
<AvatarDiv>
<img src={userAvatar} alt="user avatar" />
</AvatarDiv>
<UserAndTitle>
<span>{props.author}</span>
<span className={"col-name"}>{props.name}</span>
</UserAndTitle>
</UserInfo>
<StyledGrid container direction="row">
{
props.thumbnails.map((thumb) =>
<Grid item xs={props.thumbnails <= 4 && props.thumbnails > 0 ? 12 / props.thumbnails.length : 6}>
<div style={{ backgroundImage: `url(${`${apiDomain}` + thumb})`, height: "100%", width: "100%", backgroundSize: "cover", backgroundPosition: "center" }} />
</Grid>
)
}
</StyledGrid>
</a>
</div>
</Header>
<Description> {/*renders rating, number of learning objects and likes count*/}
{
props.authorID !== state.currentUser.id &&
<Rating
name="customized-empty"
value={props.rating * 10}
precision={0.5}
readOnly
style={{ color: "#666" }}
emptyIcon={<StarBorderIcon fontSize="inherit" />}
/>
}
<Footer>
<Type>
<FolderIcon />
<span style={{ fontWeight: "bold" }}>{props.collections.length} </span>
<span>{props.collections.length !== 1 ? "Recursos" : "Recurso"}</span>
</Type>
<LikeCounter>
<span>{likesCount}</span>
<ButtonNoWidth onClick={handleLike}>
<FavoriteIcon style={{ color: liked ? "red" : "#666" }} />
</ButtonNoWidth>
</LikeCounter>
</Footer>
</Description>
</CardReaDiv>
{
props.authorID === state.currentUser.id ?
( (
[ <CardReaFooter style={{ justifyContent: "space-between" }}> {/*renders following/unfollow and follow button*/}
RenderFollowingButton() <Grid container>
] <Grid item xs={6} style={{ display: "flex", justifyContent: "center" }}>
{
props.privacy === 'private' &&
<LockIcon style={{ color: "#666" }} />
}
</Grid>
<Grid item xs={6} style={{ display: "flex", justifyContent: "flex-end" }}>
<ColCardOwnerOptions
id={props.id}
/>
</Grid>
</Grid>
</CardReaFooter>
) )
: :
( (
[ <CardReaFooter> {/*renders following/unfollow and follow button*/}
RenderFollowButton() {
] userFollowingCol ?
(
[
RenderFollowingButton()
]
)
:
(
[
RenderFollowButton()
]
)
}
<ColCardPublicOptions
id={props.id}
/>
</CardReaFooter>
) )
} }
<ColCardPublicOptions
id={props.id}
/>
</CardReaFooter>
)
}
</CardDiv> </CardDiv>
</StyledCard> </StyledCard>
</>
) )
} }
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment