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