Merge pull request #6846 from weseek/imprv/user-picture-with-next-router

imprv: UserPicture with next/router

packages/app/src/components/Admin/AuditLog/ActivityTable.tsx

@@ -47,7 +47,7 @@ export const ActivityTable : FC<Props> = (props: Props) => {
                 <td>
                   { activity.user != null && (
                     <>
-                      <UserPicture user={activity.user} className="picture rounded-circle" />
+                      <UserPicture user={activity.user} />
                       <a className="ml-2" href={pagePathUtils.userPageRoot(activity.user)}>{activity.snapshot?.username}</a>
                     </>
                   )}

packages/app/src/components/Admin/UserGroupDetail/UserGroupUserTable.tsx

@@ -44,7 +44,7 @@ export const UserGroupUserTable = (props: Props): JSX.Element => {
           return (
             <tr key={relation._id}>
               <td>
-                <UserPicture user={relatedUser} className="picture rounded-circle" />
+                <UserPicture user={relatedUser} />
               </td>
               <td>
                 <strong>{relatedUser.username}</strong>

packages/app/src/components/Admin/Users/UserTable.jsx

@@ -188,7 +188,7 @@ class UserTable extends React.Component {
                 return (
                   <tr data-testid="user-table-tr" key={user._id}>
                     <td>
-                      <UserPicture user={user} className="picture rounded-circle" />
+                      <UserPicture user={user} />
                     </td>
                     <td>{this.getUserStatusLabel(user.status)} {this.getUserAdminLabel(user.admin)}</td>
                     <td>

packages/app/src/styles/bootstrap/_override.scss

@@ -167,3 +167,8 @@ fieldset[disabled] .btn {
   word-break: break-word;
   overflow-wrap: break-word;
 }
+
+// prevent tooltip flickering (flashing) on hover
+.tooltip {
+  pointer-events: none;
+}

packages/ui/src/components/User/UserPicture.jsx

@@ -1,104 +0,0 @@
-import React from 'react';
-
-import { pagePathUtils } from '@growi/core';
-import PropTypes from 'prop-types';
-import { UncontrolledTooltip } from 'reactstrap';
-
-
-const { userPageRoot } = pagePathUtils;
-
-
-const DEFAULT_IMAGE = '/images/icons/user.svg';
-
-export class UserPicture extends React.Component {
-
-  getClassName() {
-    const className = ['rounded-circle', 'picture'];
-    // size
-    if (this.props.size) {
-      className.push(`picture-${this.props.size}`);
-    }
-
-    return className.join(' ');
-  }
-
-  renderForNull() {
-    return (
-      <img
-        src={DEFAULT_IMAGE}
-        alt="someone"
-        className={this.getClassName()}
-      />
-    );
-  }
-
-  RootElmWithoutLink = (props) => {
-    return <span {...props}>{props.children}</span>;
-  };
-
-  RootElmWithLink = (props) => {
-    const { user } = this.props;
-    const href = userPageRoot(user);
-    // Using <span> tag here instead of <a> tag because UserPicture is used in SearchResultList which is essentially a anchor tag.
-    // Nested anchor tags causes a warning.
-    // https://stackoverflow.com/questions/13052598/creating-anchor-tag-inside-anchor-taga
-    return <span onClick={() => { window.location.href = href }} {...props}>{props.children}</span>;
-  };
-
-  withTooltip = (RootElm) => {
-    const { user } = this.props;
-    const id = `user-picture-${Math.random().toString(32).substring(2)}`;
-
-    return props => (
-      <>
-        <RootElm id={id}>{props.children}</RootElm>
-        <UncontrolledTooltip placement="bottom" target={id} delay={0} fade={false}>
-          @{user.username}<br />
-          {user.name}
-        </UncontrolledTooltip>
-      </>
-    );
-  };
-
-  render() {
-    const user = this.props.user;
-
-    if (user == null) {
-      return this.renderForNull();
-    }
-
-    const { noLink, noTooltip } = this.props;
-
-    // determine RootElm
-    let RootElm = noLink ? this.RootElmWithoutLink : this.RootElmWithLink;
-    if (!noTooltip) {
-      RootElm = this.withTooltip(RootElm);
-    }
-
-    const userPictureSrc = user.imageUrlCached || DEFAULT_IMAGE;
-
-    return (
-      <RootElm>
-        <img
-          src={userPictureSrc}
-          alt={user.username}
-          className={this.getClassName()}
-        />
-      </RootElm>
-    );
-  }
-
-}
-
-UserPicture.propTypes = {
-  user: PropTypes.object,
-  size: PropTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl']),
-  noLink: PropTypes.bool,
-  noTooltip: PropTypes.bool,
-};
-
-UserPicture.defaultProps = {
-  size: null,
-  noLink: false,
-  noTooltip: false,
-};

packages/ui/src/components/User/UserPicture.tsx

@@ -0,0 +1,120 @@
+import React, {
+  forwardRef, useCallback, useRef,
+} from 'react';
+
+import type { Ref, IUser } from '@growi/core';
+import { pagePathUtils } from '@growi/core';
+import dynamic from 'next/dynamic';
+import { useRouter } from 'next/router';
+import type { UncontrolledTooltipProps } from 'reactstrap';
+
+const UncontrolledTooltip = dynamic<UncontrolledTooltipProps>(() => import('reactstrap').then(mod => mod.UncontrolledTooltip), { ssr: false });
+
+const { userPageRoot } = pagePathUtils;
+
+const DEFAULT_IMAGE = '/images/icons/user.svg';
+
+
+type UserPictureRootProps = {
+  user: Partial<IUser>,
+  className?: string,
+  children?: React.ReactNode,
+}
+
+const UserPictureRootWithoutLink = forwardRef<HTMLSpanElement, UserPictureRootProps>((props, ref) => {
+  return <span ref={ref} className={props.className}>{props.children}</span>;
+});
+
+const UserPictureRootWithLink = forwardRef<HTMLSpanElement, UserPictureRootProps>((props, ref) => {
+  const router = useRouter();
+
+  const { user } = props;
+  const href = userPageRoot(user);
+
+  const clickHandler = useCallback(() => {
+    router.push(href);
+  }, [href, router]);
+
+  // Using <span> tag here instead of <a> tag because UserPicture is used in SearchResultList which is essentially a anchor tag.
+  // Nested anchor tags causes a warning.
+  // https://stackoverflow.com/questions/13052598/creating-anchor-tag-inside-anchor-taga
+  return <span ref={ref} className={props.className} onClick={clickHandler} style={{ cursor: 'pointer' }}>{props.children}</span>;
+});
+
+
+// wrapper with Tooltip
+const withTooltip = (UserPictureSpanElm: React.ForwardRefExoticComponent<UserPictureRootProps & React.RefAttributes<HTMLSpanElement>>) => {
+  return (props: UserPictureRootProps) => {
+    const { user } = props;
+
+    const userPictureRef = useRef<HTMLSpanElement>(null);
+
+    return (
+      <>
+        <UserPictureSpanElm ref={userPictureRef} user={user}>{props.children}</UserPictureSpanElm>
+        <UncontrolledTooltip placement="bottom" target={userPictureRef} delay={0} fade={false}>
+          @{user.username}<br />
+          {user.name}
+        </UncontrolledTooltip>
+      </>
+    );
+  };
+};
+
+
+/**
+ * type guard to determine whether the specified object is IUser
+ */
+const isUserObj = (obj: Partial<IUser> | Ref<IUser>): obj is Partial<IUser> => {
+  return typeof obj !== 'string' && 'username' in obj;
+};
+
+
+type Props = {
+  user?: Partial<IUser> | Ref<IUser> | null,
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl',
+  noLink?: boolean,
+  noTooltip?: boolean,
+};
+
+export const UserPicture = React.memo((props: Props): JSX.Element => {
+
+  const {
+    user, size, noLink, noTooltip,
+  } = props;
+
+  const classNames = ['rounded-circle', 'picture'];
+  if (size != null) {
+    classNames.push(`picture-${size}`);
+  }
+  const className = classNames.join(' ');
+
+  if (user == null || !isUserObj(user)) {
+    return (
+      <img
+        src={DEFAULT_IMAGE}
+        alt="someone"
+        className={className}
+      />
+    );
+  }
+
+  // determine RootElm
+  const UserPictureSpanElm = noLink ? UserPictureRootWithoutLink : UserPictureRootWithLink;
+  const UserPictureRootElm = noTooltip
+    ? UserPictureSpanElm
+    : withTooltip(UserPictureSpanElm);
+
+  const userPictureSrc = user.imageUrlCached ?? DEFAULT_IMAGE;
+
+  return (
+    <UserPictureRootElm user={user}>
+      <img
+        src={userPictureSrc}
+        alt={user.username}
+        className={className}
+      />
+    </UserPictureRootElm>
+  );
+});
+UserPicture.displayName = 'UserPicture';