feat(UserNicknamesPanel): add ability to set IRC display nickname

.changeset/irc-display-nickname.md

@@ -4,6 +4,8 @@
 
 Add ability to set IRC display nickname in user profile
 
-- Users can now select which of their registered IRC nicknames should be their display nickname
-- Added a star icon button next to each non-display nickname to set it as the display nickname
-- The current display nickname is indicated by the absence of action buttons
+Users can now choose which of their registered IRC nicknames appears as their primary display name. In the IRC Nicknames section of your profile:
+
+- A filled star indicates your current display nickname
+- Click the outline star next to any other nickname to set it as your new display nickname
+- Hover over the star icons for helpful tooltips

package.json

@@ -28,6 +28,7 @@
     "@fingerprintjs/fingerprintjs": "^3.3.1",
     "@fortawesome/fontawesome-svg-core": "^1.2.36",
     "@fortawesome/free-brands-svg-icons": "^5.15.4",
+    "@fortawesome/free-regular-svg-icons": "^7.0.1",
     "@fortawesome/free-solid-svg-icons": "^5.15.4",
     "@fortawesome/react-fontawesome": "^0.1.16",
     "@fuelrats/next-adorable-avatars": "^0.4.0",

src/components/UserNicknamesPanel/NicknameErrorBox.js

@@ -0,0 +1,38 @@
+import { HttpStatus } from '@fuelrats/web-util/http'
+import PropTypes from 'prop-types'
+
+import ApiErrorBox from '~/components/MessageBox/ApiErrorBox'
+
+
+function getErrorText (error) {
+  switch (error.code) {
+    case HttpStatus.CONFLICT:
+      return 'Nickname already registered.'
+
+    case HttpStatus.NOT_FOUND:
+      return 'Nickname not found or no longer exists.'
+
+    case HttpStatus.UNPROCESSABLE_ENTITY:
+      return 'Nickname format is invalid.'
+
+    default:
+      return undefined
+  }
+}
+
+function NicknameErrorBox (props) {
+  const { error } = props
+
+  if (!error) {
+    return null
+  }
+
+  return (<ApiErrorBox error={error} renderError={getErrorText} />)
+}
+
+NicknameErrorBox.propTypes = {
+  error: PropTypes.object,
+}
+
+
+export default NicknameErrorBox

src/components/UserNicknamesPanel/UserNicknamesPanel.js

@@ -1,19 +1,18 @@
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { HttpStatus } from '@fuelrats/web-util/http'
-import { isError } from 'flux-standard-action'
 import { useCallback, useState } from 'react'
 import { useDispatch, useSelector } from 'react-redux'
 
 import ConfirmActionButton from '~/components/ConfirmActionButton'
 import AddNicknameForm from '~/components/Forms/AddNicknameForm/AddNicknameForm'
-import MessageBox from '~/components/MessageBox'
 import { deleteNickname, setDisplayNickname, getUserProfile } from '~/store/actions/user'
 import {
   selectUserById,
   withCurrentUserId,
   selectNicknamesByUserId,
 } from '~/store/selectors'
+import getResponseError from '~/util/getResponseError'
 
+import NicknameErrorBox from './NicknameErrorBox'
 import styles from './UserNicknamesPanel.module.scss'
 
 
@@ -34,40 +33,37 @@ function UserNicknamesPanel () {
   const user = useSelector(withCurrentUserId(selectUserById))
 
   const handleDeleteNickname = useCallback(async (event) => {
+    setError(null)
     const response = await dispatch(deleteNickname(user, nicknames.find((nick) => {
       return nick.id === event.target.name
     })))
 
-    if (isError(response)) {
-      const { meta, payload } = response
-      let errorMessage = 'Unknown error occurred.'
-
-      if (HttpStatus.isClientError(meta.response.status)) {
-        errorMessage = payload.errors?.length ? payload.errors[0].detail : 'Client communication error'
-      }
-
-      if (HttpStatus.isServerError(meta.response.status)) {
-        errorMessage = 'Server communication error'
-      }
-
-      setError(errorMessage)
-      return errorMessage
+    const responseError = getResponseError(response)
+    if (responseError) {
+      setError(responseError)
+      return responseError
     }
 
-    return undefined
+    return true
   }, [dispatch, nicknames, user])
 
   const handleSetDisplayNickname = useCallback(async (event) => {
+    setError(null)
     const nickname = nicknames.find((nick) => {
       return nick.id === event.target.name
     })
 
     const response = await dispatch(setDisplayNickname(nickname.id, nickname.attributes.nick))
 
-    if (!isError(response)) {
-      // Refresh user profile to get updated nicknames
-      await dispatch(getUserProfile())
+    const responseError = getResponseError(response)
+    if (responseError) {
+      setError(responseError)
+      return responseError
     }
+
+    // Refresh user profile to get updated nicknames
+    await dispatch(getUserProfile())
+    return true
   }, [dispatch, nicknames])
 
   const nickCount = nicknames?.length
@@ -85,7 +81,7 @@ function UserNicknamesPanel () {
       <div className={styles.userNicknames}>
         {
           error && (
-            <MessageBox>{error}</MessageBox>
+            <NicknameErrorBox error={error} />
           )
         }
         <ul className={styles.nickList}>
@@ -125,7 +121,7 @@ function UserNicknamesPanel () {
                             title="Set as display nickname"
                             onConfirm={handleSetDisplayNickname}
                             onConfirmText="">
-                            <FontAwesomeIcon fixedWidth icon={['far', 'star']} />
+                            <FontAwesomeIcon fixedWidth icon="farStar" title="Set as display nickname" />
                           </ConfirmActionButton>
                           <ConfirmActionButton
                             className="icon"
@@ -136,7 +132,7 @@ function UserNicknamesPanel () {
                             title="Delete nickname"
                             onConfirm={handleDeleteNickname}
                             onConfirmText="">
-                            <FontAwesomeIcon fixedWidth icon="trash" />
+                            <FontAwesomeIcon fixedWidth icon="trash" title="Delete nickname" />
                           </ConfirmActionButton>
                         </>
                       )

src/util/fontawesome/library.js

@@ -56,3 +56,7 @@ export {
   faPlaystation,
   faXbox,
 } from '@fortawesome/free-brands-svg-icons'
+
+export {
+  faStar as farStar,
+} from '@fortawesome/free-regular-svg-icons'

yarn.lock

@@ -2015,6 +2015,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@fortawesome/fontawesome-common-types@npm:7.0.1":
+  version: 7.0.1
+  resolution: "@fortawesome/fontawesome-common-types@npm:7.0.1"
+  checksum: 64f7b9fb2a62220d6816c8973836143498c3e7b86559f4db63263b1d5bf98a2f5234da5a66fb6a0609f37b34a6847a5a443b037c74d131aed5e56d9c36d9956c
+  languageName: node
+  linkType: hard
+
 "@fortawesome/fontawesome-common-types@npm:^0.2.36":
   version: 0.2.36
   resolution: "@fortawesome/fontawesome-common-types@npm:0.2.36"
@@ -2040,6 +2047,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@fortawesome/free-regular-svg-icons@npm:^7.0.1":
+  version: 7.0.1
+  resolution: "@fortawesome/free-regular-svg-icons@npm:7.0.1"
+  dependencies:
+    "@fortawesome/fontawesome-common-types": 7.0.1
+  checksum: 21f479508d58e1f48f928808b6f1553cb5839571149c90ad43c3601dfbd0ff67519d6913f3818397db9e352e40631a6f4aa110dfb7b34cc81d807f3f4d4da513
+  languageName: node
+  linkType: hard
+
 "@fortawesome/free-solid-svg-icons@npm:^5.15.4":
   version: 5.15.4
   resolution: "@fortawesome/free-solid-svg-icons@npm:5.15.4"
@@ -5852,6 +5868,7 @@ __metadata:
     "@fingerprintjs/fingerprintjs": ^3.3.1
     "@fortawesome/fontawesome-svg-core": ^1.2.36
     "@fortawesome/free-brands-svg-icons": ^5.15.4
+    "@fortawesome/free-regular-svg-icons": ^7.0.1
     "@fortawesome/free-solid-svg-icons": ^5.15.4
     "@fortawesome/react-fontawesome": ^0.1.16
     "@fuelrats/babel-plugin-classnames": ^0.3.0