gaspersic/freeCodeCamp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

refactor(client): avatar-renderer to TypeScript

Browse Source
This commit is contained in:
Marlon Johnson
2021-06-21 14:17:27 -07:00
parent a38ff69aea
commit 78406d55e7
2 changed files with 20 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
client/src/components/helpers/AvatarRenderer.js → client/src/components/helpers/avatar-renderer.tsx
View File

@ -1,26 +1,32 @@
import React from 'react'; import React from 'react';
import PropTypes from 'prop-types';
import { Image } from '@freecodecamp/react-bootstrap'; import { Image } from '@freecodecamp/react-bootstrap';
import DefaultAvatar from '../../assets/icons/DefaultAvatar'; import DefaultAvatar from '../../assets/icons/DefaultAvatar';
import { defaultUserImage } from '../../../../config/misc'; import { defaultUserImage } from '../../../../config/misc';
import { borderColorPicker } from '../helpers'; import { borderColorPicker } from '.';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
const propTypes = { interface AvatarRendererProps {
isDonating: PropTypes.bool, isDonating: boolean;
isTopContributor: PropTypes.bool, isTopContributor: boolean;
picture: PropTypes.any.isRequired, picture: unknown;
userName: PropTypes.string.isRequired userName: string;
}; }
function AvatarRenderer({ picture, userName, isDonating, isTopContributor }) { function AvatarRenderer({
picture,
userName,
isDonating,
isTopContributor
}: AvatarRendererProps): JSX.Element {
const { t } = useTranslation(); const { t } = useTranslation();
let borderColor = borderColorPicker(isDonating, isTopContributor); // eslint-disable-next-line @typescript-eslint/no-unsafe-call
let isPlaceHolderImage = const borderColor: unknown = borderColorPicker(isDonating, isTopContributor);
/example.com|identicon.org/.test(picture) || picture === defaultUserImage; const isPlaceHolderImage =
/example.com|identicon.org/.test(picture as string) ||
picture === defaultUserImage;
return ( return (
<div className={`avatar-container ${borderColor}`}> <div className={`avatar-container ${borderColor as string}`}>
{isPlaceHolderImage ? ( {isPlaceHolderImage ? (
<DefaultAvatar className='avatar default-avatar' /> <DefaultAvatar className='avatar default-avatar' />
) : ( ) : (
@ -35,6 +41,5 @@ function AvatarRenderer({ picture, userName, isDonating, isTopContributor }) {
); );
} }
AvatarRenderer.propTypes = propTypes;
AvatarRenderer.displayName = 'AvatarRenderer'; AvatarRenderer.displayName = 'AvatarRenderer';
export default AvatarRenderer; export default AvatarRenderer;

2
client/src/components/helpers/index.js
View File

@ -7,5 +7,5 @@ export { default as Spacer } from './spacer';
export { default as Link } from './link'; export { default as Link } from './link';
export { default as CurrentChallengeLink } from './current-challenge-link'; export { default as CurrentChallengeLink } from './current-challenge-link';
export { default as ImageLoader } from './image-loader'; export { default as ImageLoader } from './image-loader';
export { default as AvatarRenderer } from './AvatarRenderer'; export { default as AvatarRenderer } from './avatar-renderer';
export { default as borderColorPicker } from './border-color-picker'; export { default as borderColorPicker } from './border-color-picker';