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

Fix the problem with the avatar

parent 02f578b9
No related branches found
No related tags found
4 merge requests!57Merge of develop into master,!56Fixed buttons reportar, seguir, compartilhar, guardar and entrar (in comments...,!39Update admin system,!34Fix search
Hide whitespace changes
Inline Side-by-side
src/Components/ContactCard.js
+ 49
− 45
View file @ db7942c7
...@@ -16,7 +16,7 @@ GNU Affero General Public License for more details. ...@@ -16,7 +16,7 @@ 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} from 'react'; import React, { useState, useEffect } from 'react';
import Card from '@material-ui/core/Card'; import Card from '@material-ui/core/Card';
import CardContent from '@material-ui/core/CardContent'; import CardContent from '@material-ui/core/CardContent';
import noAvatar from "../img/default_profile.png"; import noAvatar from "../img/default_profile.png";
...@@ -26,27 +26,31 @@ import Options from './ContactCardOptions.js' ...@@ -26,27 +26,31 @@ import Options from './ContactCardOptions.js'
import FollowButton from './ContactButtons/FollowButton.js' import FollowButton from './ContactButtons/FollowButton.js'
import FollowingButton from './ContactButtons/FollowingButton.js' import FollowingButton from './ContactButtons/FollowingButton.js'
import FollowersCountButton from './ContactButtons/FollowersCountButton.js' import FollowersCountButton from './ContactButtons/FollowersCountButton.js'
import {Link} from 'react-router-dom'; import { Link } from 'react-router-dom';
import Skeleton from '@material-ui/lab/Skeleton';
export default function ImgMediaCard(props) { export default function ImgMediaCard(props) {
const [followedBoolean, setFollowedBoolean] = useState(props.followed) const [followedBoolean, setFollowedBoolean] = useState(props.followed)
const toggleFollowed = () => {setFollowedBoolean(!followedBoolean)} const toggleFollowed = () => { setFollowedBoolean(!followedBoolean) }
return ( const [avatar, setAvatar] = useState(props.avatar ? props.avatar : noAvatar);
return (
<StyledCard> <StyledCard>
<CardDiv> <CardDiv>
<CardAreaDiv> <CardAreaDiv>
{/*Top part of contat card (background image, number of followers and avatar)*/} {/*Top part of contat card (background image, number of followers and avatar)*/}
<Header> <Header>
<StyledCardMedia image={props.cover}> <StyledCardMedia image={props.cover}>
<div style = {{display : "flex", backgroundColor : "inherit", float : "right"}}> <div style={{ display: "flex", backgroundColor: "inherit", float: "right" }}>
<Link to={props.href}> <Link to={props.href}>
<FollowersCountButton followCount={props.follow_count}/> <FollowersCountButton followCount={props.follow_count} />
</Link> </Link>
<AvatarDiv> <AvatarDiv>
<img src={props.avatar ? props.avatar : noAvatar} alt='user avatar' <img src={avatar} alt='user avatar'
style={{height : "100%", width : "100%", borderRadius : "50%"}}/> style={{ height: "100%", width: "100%", borderRadius: "50%" }}
onError={() => setAvatar(noAvatar)}
/>
</AvatarDiv> </AvatarDiv>
</div> </div>
</StyledCardMedia> </StyledCardMedia>
...@@ -62,48 +66,48 @@ export default function ImgMediaCard(props) { ...@@ -62,48 +66,48 @@ export default function ImgMediaCard(props) {
</Link> </Link>
<Link to={props.href}> <Link to={props.href}>
<span style={{fontSize : "14px", fontWeight : "normal"}}> <span style={{ fontSize: "14px", fontWeight: "normal" }}>
<b>{props.numCollections}</b> {props.numCollections !== 1? "Coleções" : "Coleção"} | <b>{props.numLearningObjects}</b> {props.numLearningObjects !== 1? "Recursos" : "Recurso"} <b>{props.numCollections}</b> {props.numCollections !== 1 ? "Coleções" : "Coleção"} | <b>{props.numLearningObjects}</b> {props.numLearningObjects !== 1 ? "Recursos" : "Recurso"}
</span> </span>
</Link> </Link>
<div style={{display : "flex", justifyContent : "center"}}> <div style={{ display: "flex", justifyContent: "center" }}>
{ {
followedBoolean ? followedBoolean ?
( (
<React.Fragment> <React.Fragment>
<FollowingButton <FollowingButton
followedID={props.followerID ? props.followerID : props.followedID} followedID={props.followerID ? props.followerID : props.followedID}
toggleFollowed={toggleFollowed}/> toggleFollowed={toggleFollowed} />
<Options <Options
followableID={props.followerID ? props.followerID : props.followedID} followableID={props.followerID ? props.followerID : props.followedID}
followed={followedBoolean} followed={followedBoolean}
toggleFollowed={toggleFollowed}/> toggleFollowed={toggleFollowed} />
</React.Fragment> </React.Fragment>
) )
: :
( (
<React.Fragment> <React.Fragment>
<FollowButton <FollowButton
followerID={props.followedID ? props.followedID : props.followerID} followerID={props.followedID ? props.followedID : props.followerID}
toggleFollowed={toggleFollowed}/> toggleFollowed={toggleFollowed} />
<Options <Options
followableID={props.followedID ? props.followedID : props.followerID} followableID={props.followedID ? props.followedID : props.followerID}
followed={followedBoolean} followed={followedBoolean}
toggleFollowed={toggleFollowed}/> toggleFollowed={toggleFollowed} />
</React.Fragment> </React.Fragment>
) )
} }
</div> </div>
</UserInfo> </UserInfo>
</CardContent> </CardContent>
</CardAreaDiv> </CardAreaDiv>
</CardDiv> </CardDiv>
</StyledCard> </StyledCard>
); );
} }
/*Controls top part of Card*/ /*Controls top part of Card*/
...@@ -132,7 +136,7 @@ export const CardDiv = styled.div` ...@@ -132,7 +136,7 @@ export const CardDiv = styled.div`
/*Override Material UI styling -----------------------------------------------*/ /*Override Material UI styling -----------------------------------------------*/
const StyledCardMedia = styled(CardMedia) ` const StyledCardMedia = styled(CardMedia)`
height : 100%; height : 100%;
width : 100%; width : 100%;
background-size : cover; background-size : cover;
......
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