added user profile popup

src/components/comment/CommentAvatar/index.tsx

@@ -1,27 +1,59 @@
-import React, { FC, useCallback } from 'react';
-import { getURLFromString } from '~/utils/dom';
-import { PRESETS } from '~/constants/urls';
+import React, { FC, useCallback, useState } from 'react';
+import { IUser } from '~/redux/auth/types';
+import { Avatar } from '~/components/common/Avatar';
+import { path } from 'ramda';
+import { Manager, Popper, Reference } from 'react-popper';
 import styles from './styles.module.scss';
-import classNames from 'classnames';
-import { openUserProfile } from '~/utils/user';
+import { useRandomPhrase } from '~/constants/phrases';
 
 interface Props {
-  url?: string;
-  username?: string;
-  size?: number;
+  user: IUser;
+  withDetails: boolean;
   className?: string;
 }
 
-const CommentAvatar: FC<Props> = ({ url, username, size, className }) => {
-  const backgroundImage = !!url ? `url('${getURLFromString(url, PRESETS.avatar)}')` : undefined;
-  const onOpenProfile = useCallback(() => openUserProfile(username), [username]);
+const modifiers = [
+  {
+    name: 'offset',
+    options: {
+      offset: [0, 10],
+    },
+  },
+];
+
+const CommentAvatar: FC<Props> = ({ user, withDetails, className }) => {
+  const [hovered, setHovered] = useState(false);
+  const randomPhrase = useRandomPhrase('USER_DESCRIPTION');
+
+  const onMouseOver = useCallback(() => setHovered(true), [setHovered]);
+  const onMouseOut = useCallback(() => setHovered(false), [setHovered]);
 
   return (
-    <div
-      className={classNames(styles.avatar, className)}
-      style={{ backgroundImage }}
-      onClick={onOpenProfile}
-    />
+    <Manager>
+      <Reference>
+        {({ ref }) => (
+          <Avatar
+            url={path(['photo', 'url'], user)}
+            username={user.username}
+            className={className}
+            innerRef={ref}
+            onMouseOver={onMouseOver}
+            onMouseOut={onMouseOut}
+          />
+        )}
+      </Reference>
+
+      {hovered && withDetails && (
+        <Popper placement="right" modifiers={modifiers}>
+          {({ style, ref }) => (
+            <div style={style} ref={ref} className={styles.popper}>
+              <h4 className={styles.username}>{user.fullname || user.username}</h4>
+              <div className={styles.description}>{user.description || randomPhrase}</div>
+            </div>
+          )}
+        </Popper>
+      )}
+    </Manager>
   );
 };