WIP Abstract dot to single component

src/sections/Chat/OnlineUsers/User/index.tsx → src/components/Dot/index.tsx

@@ -8,39 +8,65 @@ import { User } from 'store/types'
 
 type Props = {
   user: User
+  isDraft?: boolean
+  isPrivate?: boolean
+  isOnline?: boolean
+  pointOp?: boolean
+  showOverlay?: boolean
 }
 
-export default ({ user }: Props) => {
+export default ({
+  user,
+  isDraft = false,
+  isPrivate = false,
+  isOnline = true,
+  showOverlay = false,
+  pointOp = false,
+}: Props) => {
   const { state } = useGlobalState()
 
   const isCurrentUser =
     state.auth.user && user.user_id === state.auth.user.user_id
+  const isSystem = user.user_id === 'dotdot'
+  const userColor = user.contrastColor || `#${user.color}`
 
   let iconName: IconName = 'circle'
   let inactive = ''
 
-  // Set icon
-  if (user.icon) {
-    iconName = user.icon
-  } else if (isCurrentUser) {
+  // Icon name
+  if (isSystem) {
+    iconName = 'cog'
+  } else if (isDraft) {
+    iconName = 'circle-notch'
+  } else if (isPrivate) {
+    iconName = 'lock'
+  } else if (!isOnline || !user.isActive) {
+    iconName = 'meh'
+  } else if (isCurrentUser && pointOp) {
     iconName = 'dot-circle'
+  } else if (user.icon) {
+    iconName = user.icon
   }
 
-  // Set status
   if (!user.isActive) {
-    iconName = 'meh'
     inactive = ' (away)'
   }
 
-  // TODO: Do we need this?
+  // Set to far for other users
   let icon: IconProp = iconName
-  if (isCurrentUser) {
+  if (isCurrentUser && !isPrivate && !isDraft) {
     icon = ['far', iconName]
   }
 
-  const userColor = user.contrastColor || `#${user.color}`
+  const Icon = () => (
+    <FontAwesomeIcon
+      style={{ color: userColor }}
+      icon={icon}
+      spin={isDraft && !isPrivate}
+    />
+  )
 
-  return (
+  const IconWithOverlay = () => (
     <OverlayTrigger
       key={user.user_id}
       placement="bottom"
@@ -51,7 +77,9 @@ export default ({ user }: Props) => {
         </Tooltip>
       }
     >
-      <FontAwesomeIcon style={{ color: userColor }} icon={icon} />
+      <Icon />
     </OverlayTrigger>
   )
+
+  return showOverlay ? <IconWithOverlay /> : <Icon />
 }

src/sections/Chat/Messages/Message/Heading/index.tsx

@@ -6,14 +6,14 @@ import { OverlayTrigger, Tooltip } from 'react-bootstrap'
 
 import { User } from 'store/types'
 import styles from './index.module.scss'
+import Dot from 'components/Dot'
 
 type Props = {
   user: User
   timestamp: Date
   isDraft: boolean
   isPrivate: boolean
   isOnline: boolean
-  isCurrentUser: boolean
   isReply?: boolean
 }
 
@@ -23,65 +23,11 @@ const Heading = ({
   isDraft,
   isPrivate,
   isOnline,
-  isCurrentUser,
   isReply,
 }: Props) => {
-  const userContrastColor = user.contrastColor || `#${user.color}`
-  const isSystem = user.user_id === 'dotdot'
+  const userColor = user.contrastColor || `#${user.color}`
 
-  let iconName: IconName = 'circle'
-  if (user.icon) {
-    iconName = user.icon
-  } else if (isCurrentUser) {
-    iconName = 'dot-circle'
-  }
-
-  // special icons
-  if (isSystem) {
-    iconName = 'cog'
-  } else if (isDraft) {
-    iconName = 'circle-notch'
-  } else if (isPrivate) {
-    iconName = 'lock'
-  } else if (!isOnline) {
-    iconName = 'meh'
-  }
-
-  let icon: IconProp = iconName
-  if (isCurrentUser && !isPrivate && !isDraft) {
-    icon = ['far', iconName]
-  }
-
-  const UserIcon = () => {
-    const justIcon = (
-      <FontAwesomeIcon icon={icon} spin={!isPrivate && isDraft} />
-    )
-
-    return (
-      <span className={styles.icon} style={{ color: userContrastColor }}>
-        {isPrivate ? (
-          <OverlayTrigger
-            placement="right"
-            overlay={
-              <Tooltip id={`user-${user.user_id}`}>
-                Private message from <b>@{user.name}</b>
-                <br />
-                Only you can see this.
-              </Tooltip>
-            }
-          >
-            {justIcon}
-          </OverlayTrigger>
-        ) : (
-          justIcon
-        )}
-      </span>
-    )
-  }
-
-  const Username = () => (
-    <span style={{ color: userContrastColor }}>{user.name}</span>
-  )
+  const Username = () => <span style={{ color: userColor }}>{user.name}</span>
   const TimeStamp = () => (
     <span className={classNames(styles.timestamp)}>
       {timestamp.toLocaleTimeString([], {
@@ -93,7 +39,17 @@ const Heading = ({
 
   return (
     <>
-      {!isReply && <UserIcon />}
+      {!isReply && (
+        <span className={styles.icon}>
+          <Dot
+            isDraft={isDraft}
+            isOnline={isOnline}
+            isPrivate={isPrivate}
+            pointOp={true}
+            user={user}
+          />
+        </span>
+      )}
 
       <div className={classNames(styles.user)}>
         <Username />

src/sections/Chat/Messages/Message/index.tsx

@@ -88,7 +88,6 @@ const MessageComponent = React.memo(({ message, onClick, reply }: Props) => {
           isOnline={isUserOnline}
           isDraft={message.attributes.draft}
           isPrivate={message.attributes.private}
-          isCurrentUser={userData.user_id === state.auth.user?.user_id}
         />
       </div>
 

src/sections/Chat/OnlineUsers/index.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 
 import styles from './index.module.scss'
 import useGlobalState from 'store/state'
-import User from './User'
+import Dot from '../../../components/Dot'
 
 export default () => {
   const { state } = useGlobalState()
@@ -12,7 +12,7 @@ export default () => {
       <span className={styles.count}>{state.onlineUsers.length}</span>
 
       {state.onlineUsers.map((user) => (
-        <User user={user} key={user.user_id} />
+        <Dot isOnline user={user} key={user.user_id} />
       ))}
     </div>
   )

src/sections/Chat/Session/UserBadge/index.tsx

@@ -4,6 +4,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 
 import useGlobalState from 'store/state'
 import { IconProp } from '@fortawesome/fontawesome-svg-core'
+import Dot from 'components/Dot'
 
 import styles from './index.module.scss'
 
@@ -22,11 +23,8 @@ export default ({ onClick, small }: Props) => {
 
   return (
     <button className={styles.badge} onClick={onClick}>
-      <span
-        className={ styles.dot }
-        style={{ color: `#${state.auth.user.color}` }}
-      >
-        <FontAwesomeIcon icon={ state.auth.user.icon || 'circle' } />
+      <span className={styles.dot}>
+        <Dot isOnline user={state.auth.user} />
       </span>
       <span className={styles.name}>{state.auth.user.name}</span>
       <FontAwesomeIcon