feat(UserNicknamesPanel): add ability to set IRC display nickname#449
feat(UserNicknamesPanel): add ability to set IRC display nickname#449SuperManifolds wants to merge 7 commits intodevelopfrom
Conversation
- Add setDisplayNickname action to call PUT /nicknames/:id/display endpoint - Add star icon button to set any nickname as display nickname - Update UI to show star/delete buttons only for non-display nicknames - Add faStar icon to fontawesome library - Refresh user profile after setting display nickname to update UI
🦋 Changeset detectedLatest commit: 64c2433 The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
src/components/UserNicknamesPanel/UserNicknamesPanel.module.scss
Outdated
Show resolved
Hide resolved
- Consolidate conditional rendering for nickname buttons - Use filled/outline star icons to show display status - Add hover tooltips for icon buttons - Replace generic div selector with .controlContainer class
- Fix prop ordering in UserNicknamesPanel component - Fix color hex case and property order in styles
There was a problem hiding this comment.
Hey Ran into a 500 from the API when setting the display nick. Would that just be because we're in lowers?
error id: 71de695d-0143-48c6-ba46-ca2608529495
Glad it did error though, because I entirely forgot controlling the loading state for action buttons is wonky.
| faSignature, | ||
| faSpaceShuttle, | ||
| faSpinner, | ||
| faStar, |
There was a problem hiding this comment.
we also need to provide the regular version, since this only provides the solid version. Sorry I forgot we don't actually have this icon pack in here yet. without adding it the icon won't load properly.
To fix:
- run
yarn add "@fortawesome/free-regular-svg-icons@^5.15.4" - add export to
library.js
export {
faStar as farStar,
} from '@fortawesome/free-regular-svg-icons'…ntation - Add @fortawesome/free-regular-svg-icons for outline star icon - Use filled/outline stars to distinguish current vs settable display nicknames - Add hover tooltips to icons for better UX - Replace custom error handling with standardized getResponseError utility - Create NicknameErrorBox for user-friendly error messages (404, 409, 422) - Clear errors at start of operations to prevent stale error states - Fix loading states to return proper boolean values
|
I suspect the error 500 is due to funkiness with IRC server interaction on the dev API, I had already tested this locally and it works, I will look into why it's not working on the dev api |
| onConfirm={handleSetDisplayNickname} | ||
| onConfirmText=""> | ||
| <FontAwesomeIcon fixedWidth icon={['far', 'star']} /> | ||
| <FontAwesomeIcon fixedWidth icon="farStar" title="Set as display nickname" /> |
There was a problem hiding this comment.
the previous ['far', 'star'] value was the correct icon. This value does not work and results in an error.
Could not find icon { prefix: 'fas', iconName: 'farStar' }
We only need to rename the export in library.js to deal with the naming conflict, but the name used by <FontAwesomeIcon /> remains the same. These are values defined within the icon objects we export in library.js
2 participants
Closes #448
Description
Additional Information
Demo
https://fuelrats.cloud/s/4NiNcdZXgfTLFsH
Acceptance Tasks
Contributor's Checklist
yarn lintand confirmed there are no errors or warnings.CONTRIBUTING.md.Maintainer's Checklist