feat(avatars): use right avatar source

dis-moi · Aug 14, 2020 · 61ab983 · 61ab983
1 parent 51a5dec
commit 61ab983
Show file tree

Hide file tree

Showing 5 changed files with 30 additions and 13 deletions.
diff --git a/src/app/profiles/App/Profiles/Profile/ProfileIntro.tsx b/src/app/profiles/App/Profiles/Profile/ProfileIntro.tsx
@@ -113,6 +113,7 @@ export const ProfileIntro = ({
           onSubscribe={subscribe}
           onUnsubscribe={unsubscribe}
           loading={loading}
+          avatarSize="large"
         >
           {contributor && !!contributor.website && (
             <ExternalLink href={contributor.website}>

diff --git a/src/components/molecules/Avatar/Avatar.tsx b/src/components/molecules/Avatar/Avatar.tsx
@@ -43,21 +43,35 @@ interface AvatarProps<S = LocationState> {
   loading?: boolean;
 }
 
+const getUrlForSize = (
+  contributor: {
+    avatar?: AvatarType;
+  },
+  size: AvatarSize
+): string | undefined => {
+  if (size === 'large') return contributor.avatar?.large.url;
+  if (size === 'normal') return contributor.avatar?.normal.url;
+  return contributor.avatar?.small.url;
+};
+
 const Avatar = ({
   contributor,
   size,
   className,
   onClick,
   to,
   loading
-}: AvatarProps) => (
-  <Wrapper size={size} className={className} onClick={onClick} to={to}>
-    {!loading && contributor?.avatar && contributor.avatar[size].url ? (
-      <img src={contributor.avatar.normal.url} alt={contributor.name} />
-    ) : (
-      <AvatarDefault />
-    )}
-  </Wrapper>
-);
+}: AvatarProps) => {
+  const url = contributor ? getUrlForSize(contributor, size) : '';
+  return (
+    <Wrapper size={size} className={className} onClick={onClick} to={to}>
+      {!loading && url ? (
+        <img src={url} alt={contributor?.name} />
+      ) : (
+        <AvatarDefault />
+      )}
+    </Wrapper>
+  );
+};
 
 export default styled(Avatar)``;
diff --git a/src/components/organisms/Contributor/ContributorCompact.tsx b/src/components/organisms/Contributor/ContributorCompact.tsx
@@ -44,7 +44,7 @@ export const ContributorCompact = ({
   className
 }: Props) => (
   <Wrapper className={className}>
-    <Avatar contributor={contributor} size="small" to={to} />
+    <Avatar contributor={contributor} size="normal" to={to} />
 
     <ContributorInfos>
       <UserName>

diff --git a/src/components/organisms/Contributor/ContributorLarge.tsx b/src/components/organisms/Contributor/ContributorLarge.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import styled from 'styled-components';
 import { LocationDescriptor, LocationState } from 'history';
-import { StatefulContributor } from 'app/lmem/contributor';
+import { AvatarSize, StatefulContributor } from 'app/lmem/contributor';
 import Avatar from 'components/molecules/Avatar/Avatar';
 import UserName from 'components/atoms/UserName/UserName';
 import ContributorButton from './ContributorButton';
@@ -39,6 +39,7 @@ const ContributorIntro = styled.div.attrs<IntroProps>(
 
 interface ContributorLargeProps<S = LocationState> {
   contributor?: StatefulContributor;
+  avatarSize?: AvatarSize;
   onSubscribe: () => void;
   onUnsubscribe: () => void;
   className?: string;
@@ -49,6 +50,7 @@ interface ContributorLargeProps<S = LocationState> {
 
 const ContributorLarge = ({
   contributor,
+  avatarSize,
   onSubscribe,
   onUnsubscribe,
   children,
@@ -60,7 +62,7 @@ const ContributorLarge = ({
     <>
       <ContributorWrapper>
         <Avatar
-          size="normal"
+          size={avatarSize || 'normal'}
           contributor={contributor}
           to={to}
           loading={loading}

diff --git a/src/components/organisms/NoticeDetails/NoticeDetails.tsx b/src/components/organisms/NoticeDetails/NoticeDetails.tsx
@@ -201,7 +201,7 @@ class NoticeDetails extends PureComponent<NoticeDetailsProps, CountDownState> {
           <DetailsMeta>
             <AvatarNotice
               contributor={contributor}
-              size="small"
+              size="normal"
               onClick={this.handleContributorClicked}
             />
             <DetailsMetaValue>