From db7942c72bb7c8e6cbab96b3f0c490a5416e8fc4 Mon Sep 17 00:00:00 2001
From: Luis Felipe Risch <lfr20@inf.ufpr.br>
Date: Wed, 10 Feb 2021 10:22:00 -0300
Subject: [PATCH] Fix the problem with the avatar
---
src/Components/ContactCard.js | 94 ++++++++++++++++++-----------------
1 file changed, 49 insertions(+), 45 deletions(-)
diff --git a/src/Components/ContactCard.js b/src/Components/ContactCard.js
index b5719d71..c3b7772e 100644
--- a/src/Components/ContactCard.js
+++ b/src/Components/ContactCard.js
@@ -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
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 CardContent from '@material-ui/core/CardContent';
import noAvatar from "../img/default_profile.png";
@@ -26,27 +26,31 @@ import Options from './ContactCardOptions.js'
import FollowButton from './ContactButtons/FollowButton.js'
import FollowingButton from './ContactButtons/FollowingButton.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) {
- const [followedBoolean, setFollowedBoolean] = useState(props.followed)
- const toggleFollowed = () => {setFollowedBoolean(!followedBoolean)}
- return (
+ const [followedBoolean, setFollowedBoolean] = useState(props.followed)
+ const toggleFollowed = () => { setFollowedBoolean(!followedBoolean) }
+ const [avatar, setAvatar] = useState(props.avatar ? props.avatar : noAvatar);
+
+ return (
<StyledCard>
<CardDiv>
<CardAreaDiv>
{/*Top part of contat card (background image, number of followers and avatar)*/}
<Header>
<StyledCardMedia image={props.cover}>
- <div style = {{display : "flex", backgroundColor : "inherit", float : "right"}}>
+ <div style={{ display: "flex", backgroundColor: "inherit", float: "right" }}>
<Link to={props.href}>
- <FollowersCountButton followCount={props.follow_count}/>
+ <FollowersCountButton followCount={props.follow_count} />
</Link>
<AvatarDiv>
- <img src={props.avatar ? props.avatar : noAvatar} alt='user avatar'
- style={{height : "100%", width : "100%", borderRadius : "50%"}}/>
+ <img src={avatar} alt='user avatar'
+ style={{ height: "100%", width: "100%", borderRadius: "50%" }}
+ onError={() => setAvatar(noAvatar)}
+ />
</AvatarDiv>
</div>
</StyledCardMedia>
@@ -62,48 +66,48 @@ export default function ImgMediaCard(props) {
</Link>
<Link to={props.href}>
- <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"}
+ <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"}
</span>
</Link>
- <div style={{display : "flex", justifyContent : "center"}}>
+ <div style={{ display: "flex", justifyContent: "center" }}>
{
followedBoolean ?
- (
- <React.Fragment>
- <FollowingButton
- followedID={props.followerID ? props.followerID : props.followedID}
- toggleFollowed={toggleFollowed}/>
-
- <Options
- followableID={props.followerID ? props.followerID : props.followedID}
- followed={followedBoolean}
- toggleFollowed={toggleFollowed}/>
- </React.Fragment>
- )
- :
- (
- <React.Fragment>
- <FollowButton
- followerID={props.followedID ? props.followedID : props.followerID}
- toggleFollowed={toggleFollowed}/>
-
- <Options
- followableID={props.followedID ? props.followedID : props.followerID}
- followed={followedBoolean}
- toggleFollowed={toggleFollowed}/>
- </React.Fragment>
- )
+ (
+ <React.Fragment>
+ <FollowingButton
+ followedID={props.followerID ? props.followerID : props.followedID}
+ toggleFollowed={toggleFollowed} />
+
+ <Options
+ followableID={props.followerID ? props.followerID : props.followedID}
+ followed={followedBoolean}
+ toggleFollowed={toggleFollowed} />
+ </React.Fragment>
+ )
+ :
+ (
+ <React.Fragment>
+ <FollowButton
+ followerID={props.followedID ? props.followedID : props.followerID}
+ toggleFollowed={toggleFollowed} />
+
+ <Options
+ followableID={props.followedID ? props.followedID : props.followerID}
+ followed={followedBoolean}
+ toggleFollowed={toggleFollowed} />
+ </React.Fragment>
+ )
}
</div>
- </UserInfo>
- </CardContent>
- </CardAreaDiv>
- </CardDiv>
- </StyledCard>
- );
+ </UserInfo>
+ </CardContent>
+ </CardAreaDiv>
+ </CardDiv>
+ </StyledCard>
+ );
}
/*Controls top part of Card*/
@@ -132,7 +136,7 @@ export const CardDiv = styled.div`
/*Override Material UI styling -----------------------------------------------*/
-const StyledCardMedia = styled(CardMedia) `
+const StyledCardMedia = styled(CardMedia)`
height : 100%;
width : 100%;
background-size : cover;
--
GitLab