diff --git a/web/invite-links/manage-invite-links-modal.react.js b/web/invite-links/manage-invite-links-modal.react.js --- a/web/invite-links/manage-invite-links-modal.react.js +++ b/web/invite-links/manage-invite-links-modal.react.js @@ -36,7 +36,11 @@ if (modalStage === 'edit') { return ( - + ); } diff --git a/web/invite-links/manage/edit-link-modal.react.js b/web/invite-links/manage/edit-link-modal.react.js --- a/web/invite-links/manage/edit-link-modal.react.js +++ b/web/invite-links/manage/edit-link-modal.react.js @@ -5,7 +5,9 @@ import { useModalContext } from 'lib/components/modal-provider.react.js'; import { inviteLinkUrl } from 'lib/facts/links.js'; +import { useInviteLinksActions } from 'lib/hooks/invite-links.js'; import type { InviteLink } from 'lib/types/link-types.js'; +import type { ThreadInfo } from 'lib/types/thread-types.js'; import css from './manage-invite-links-modal.css'; import Button from '../../components/button.react.js'; @@ -15,22 +17,27 @@ type Props = { +inviteLink: ?InviteLink, +enterViewMode: () => mixed, + +community: ThreadInfo, }; function EditLinkModal(props: Props): React.Node { - const { inviteLink, enterViewMode } = props; - const [name, setName] = React.useState( - inviteLink?.name ?? Math.random().toString(36).slice(-9), - ); + const { inviteLink, enterViewMode, community } = props; const { popModal } = useModalContext(); + const { error, isLoading, name, setName, createOrUpdateInviteLink } = + useInviteLinksActions(community.id, inviteLink); const onChangeName = React.useCallback( (event: SyntheticEvent) => { setName(event.currentTarget.value); }, - [], + [setName], ); + let errorComponent = null; + if (error) { + errorComponent =
{error}
; + } + return (
@@ -50,12 +57,23 @@ {inviteLinkUrl('')}
- -
- - + {errorComponent} +
+ + +
diff --git a/web/invite-links/manage/manage-invite-links-modal.css b/web/invite-links/manage/manage-invite-links-modal.css --- a/web/invite-links/manage/manage-invite-links-modal.css +++ b/web/invite-links/manage/manage-invite-links-modal.css @@ -61,4 +61,16 @@ display: flex; justify-content: flex-end; gap: 8px; + margin-top: 16px; +} + +.buttonRowWithError { + margin-top: 8px; +} + +.errorContainer { + display: flex; + justify-content: center; + font-size: var(--s-font-14); + color: var(--error-primary); }