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 @@ -4,6 +4,7 @@ import { useModalContext } from 'lib/components/modal-provider.react.js'; import { primaryInviteLinksSelector } from 'lib/selectors/invite-links-selectors.js'; +import { threadInfoSelector } from 'lib/selectors/thread-selectors.js'; import type { InviteLink } from 'lib/types/link-types.js'; import EditLinkModal from './manage/edit-link-modal.react.js'; @@ -22,6 +23,9 @@ const inviteLink: ?InviteLink = useSelector(primaryInviteLinksSelector)[ communityID ]; + const community = useSelector( + state => threadInfoSelector(state)[communityID], + ); const { popModal } = useModalContext(); const [modalStage, setModalStage] = React.useState('view'); @@ -30,7 +34,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('')} - - - - Back - - Save & enable public link + {errorComponent} + + + Back + + + Save & enable public link + + 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); }