diff --git a/web/settings/relationship/add-users-list.css b/web/settings/relationship/add-users-list.css --- a/web/settings/relationship/add-users-list.css +++ b/web/settings/relationship/add-users-list.css @@ -52,3 +52,12 @@ visibility: hidden; height: 0; } + +.error { + padding-bottom: 8px; + font-size: var(--s-font-14); + line-height: var(--line-height-display); + color: var(--error); + padding-left: 6px; + font-style: italic; +} diff --git a/web/settings/relationship/add-users-list.react.js b/web/settings/relationship/add-users-list.react.js --- a/web/settings/relationship/add-users-list.react.js +++ b/web/settings/relationship/add-users-list.react.js @@ -185,15 +185,22 @@ [filteredUsers, selectUser], ); + const [errorMessage, setErrorMessage] = React.useState(''); const callUpdateRelationships = useServerCall(updateRelationships); const dispatchActionPromise = useDispatchActionPromise(); const updateRelationshipsPromiseCreator = React.useCallback(async () => { - const result = await callUpdateRelationships({ - action: relationshipAction, - userIDs: Array.from(pendingUserIDs), - }); - closeModal(); - return result; + try { + setErrorMessage(''); + const result = await callUpdateRelationships({ + action: relationshipAction, + userIDs: Array.from(pendingUserIDs), + }); + closeModal(); + return result; + } catch (e) { + setErrorMessage('unknown error'); + throw e; + } }, [callUpdateRelationships, closeModal, pendingUserIDs, relationshipAction]); const confirmSelection = React.useCallback( () => @@ -214,10 +221,16 @@ ); } + let errors; + if (errorMessage) { + errors =
{errorMessage}
; + } + return (
{userTags}
{userRows}
+ {errors}