From b5ce9be31993f5b4bee9abbe57d775b7ea407507 Mon Sep 17 00:00:00 2001
From: eug-vs <eug-vs@keemail.me>
Date: Tue, 11 Aug 2020 22:19:23 +0300
Subject: refactor: create separate Avatar component

---
 src/components/Avatar/Avatar.tsx | 36 ++++++++++++++++++++++++++++++++++++
 1 file changed, 36 insertions(+)
 create mode 100644 src/components/Avatar/Avatar.tsx

(limited to 'src/components/Avatar')

diff --git a/src/components/Avatar/Avatar.tsx b/src/components/Avatar/Avatar.tsx
new file mode 100644
index 0000000..e445891
--- /dev/null
+++ b/src/components/Avatar/Avatar.tsx
@@ -0,0 +1,36 @@
+import React from 'react';
+import { useHistory } from 'react-router-dom';
+import { Avatar as AvatarBase } from '@material-ui/core';
+import AccountCircle from '@material-ui/icons/AccountCircle';
+import { User } from 'which-types';
+
+interface PropTypes {
+  user: User;
+  className?: string;
+}
+
+const Avatar: React.FC<PropTypes> = ({ user, className }) => {
+  const history = useHistory();
+  const { username, avatarUrl } = user;
+
+  const handleClick = () => {
+    history.push(`/profile/${username}`);
+  };
+
+  return avatarUrl ? (
+    <AvatarBase
+      src={avatarUrl}
+      alt={username[0].toUpperCase()}
+      onClick={handleClick}
+      className={className}
+      style={{ cursor: 'pointer' }}
+    />
+  ) : (
+    <AccountCircle
+      className={className}
+      onClick={handleClick}
+    />
+  );
+};
+
+export default Avatar;
-- 
cgit v1.2.3