Page MenuHomePhabricator
Differential D7524

[native] Create invitation modal
ClosedPublic
Actions

Authored by tomek on Apr 19 2023, 5:34 AM.
Tags
None
Referenced Files
Unknown Object (File)
Sat, Mar 15, 4:56 PM
Unknown Object (File)
Wed, Mar 5, 10:06 PM
Unknown Object (File)
Wed, Mar 5, 10:06 PM
Unknown Object (File)
Wed, Mar 5, 10:06 PM
Unknown Object (File)
Wed, Mar 5, 10:06 PM
Unknown Object (File)
Wed, Mar 5, 10:05 PM
Unknown Object (File)
Wed, Mar 5, 9:59 PM
Unknown Object (File)
Wed, Mar 5, 10:11 AM
View All Files
Subscribers
ashoat
atul

Details

Reviewers
bartek
kamil
inka
Commits
rCOMM6725c0b6164d: [native] Create invitation modal
Summary

After user clicks a link, we're going to call link verification endpoint. Based on the result, we will navigate user to this modal.

invite-invalid.png (2×1 px, 226 KB)
invite-valid.png (2×1 px, 220 KB)

Depends on D7522

Test Plan

Open a link that:

  • is valid => user should see two buttons, one for joining and one for canceling
  • is invalid => user should see an error message
  • points to a community where the user is a member => modal should not be displayed

Diff Detail

Repository
rCOMM Comm
Lint
No Lint Coverage
Unit
No Test Coverage

Event Timeline

tomek created this revision.Apr 19 2023, 5:34 AM
Herald added subscribers: atul, ashoat. · View Herald TranscriptApr 19 2023, 5:34 AM
tomek added inline comments.Apr 19 2023, 5:34 AM
native/navigation/invite-link-modal.react.js
62

This function is introduced in later diff

tomek edited the summary of this revision. (Show Details)Apr 19 2023, 5:39 AM
Harbormaster completed remote builds in B18503: Diff 25339.Apr 19 2023, 6:03 AM
tomek requested review of this revision.Apr 19 2023, 6:03 AM
inka added a comment.Apr 19 2023, 7:00 AM

Would it make sense to add an invariant to check that this modal is not called with `status: 'already_joined'? Currently there is nothing stopping someone from doing that, because there is no type checking. And the modal would be displayed without errors, with a message that would be incorrect and misleading.

tomek added a child revision: D7525: [keyserver] Introduce invite link handler.Apr 19 2023, 9:49 AM
bartek accepted this revision.Apr 21 2023, 2:25 AM
This revision is now accepted and ready to land.Apr 21 2023, 2:25 AM
tomek added a comment.Apr 26 2023, 1:48 AM
In D7524#223171, @inka wrote:

Would it make sense to add an invariant to check that this modal is not called with `status: 'already_joined'? Currently there is nothing stopping someone from doing that, because there is no type checking. And the modal would be displayed without errors, with a message that would be incorrect and misleading.

Yeah, adding some validation is a good idea!

tomek updated this revision to Diff 25765.Apr 26 2023, 6:51 AM

Do not show a modal in already_joined state

tomek added a comment.Apr 26 2023, 6:53 AM
In D7524#226197, @tomek wrote:
In D7524#223171, @inka wrote:

Would it make sense to add an invariant to check that this modal is not called with `status: 'already_joined'? Currently there is nothing stopping someone from doing that, because there is no type checking. And the modal would be displayed without errors, with a message that would be incorrect and misleading.

Yeah, adding some validation is a good idea!

Instead of using an invariant I decided that we can simply close the modal. This is consistent with our approach that a modal shouldn't be opened when a user is a member of the community.

Harbormaster failed remote builds in B18807: Diff 25765!Apr 26 2023, 7:05 AM
tomek updated this revision to Diff 25774.Apr 26 2023, 12:50 PM

Rebase

Harbormaster completed remote builds in B18814: Diff 25774.Apr 26 2023, 1:06 PM
Closed by commit rCOMM6725c0b6164d: [native] Create invitation modal (authored by tomek). · Explain WhyApr 27 2023, 7:15 AM
This revision was automatically updated to reflect the committed changes.
tomek added a commit: rCOMM6725c0b6164d: [native] Create invitation modal.

Revision Contents
Changeset List

PathSize
native/
navigation/
168 lines
7 lines
3 lines
themes/
4 lines

Diff 25339

View Options

native/navigation/invite-link-modal.react.js

// @flow // @flow
import invariant from 'invariant'; import invariant from 'invariant';
import _maxBy from 'lodash/fp/maxBy.js'; import _maxBy from 'lodash/fp/maxBy.js';
import _orderBy from 'lodash/fp/orderBy.js'; import _orderBy from 'lodash/fp/orderBy.js';
import * as React from 'react'; import * as React from 'react';
import { codeBlockRegex, type ParserRules } from './markdown.js'; import { codeBlockRegex, type ParserRules } from './markdown.js';
import type { CreationSideEffectsFunc } from './messages/message-spec.js'; import type { CreationSideEffectsFunc } from './messages/message-spec.js';
import { messageSpecs } from './messages/message-specs.js'; import { messageSpecs } from './messages/message-specs.js';
import { threadIsGroupChat } from './thread-utils.js'; import { threadIsGroupChat } from './thread-utils.js';
import { useStringForUser } from '../hooks/ens-cache.js'; import { useStringForUser } from '../hooks/ens-cache.js';
import { contentStringForMediaArray } from '../media/media-utils.js';
import { userIDsToRelativeUserInfos } from '../selectors/user-selectors.js'; import { userIDsToRelativeUserInfos } from '../selectors/user-selectors.js';
import { type PlatformDetails, isWebPlatform } from '../types/device-types.js'; import { type PlatformDetails, isWebPlatform } from '../types/device-types.js';
import type { Media } from '../types/media-types.js'; import type { Media } from '../types/media-types.js';
import { import {
type MessageInfo, type MessageInfo,
type RawMessageInfo, type RawMessageInfo,
type RobotextMessageInfo, type RobotextMessageInfo,
type RawMultimediaMessageInfo, type RawMultimediaMessageInfo,
▲ Show 20 Lines • Show All 543 Lines • ▼ Show 20 Lines): CreationSideEffectsFunc<Info> {
invariant(messageSpec, `we're not aware of messageType ${messageType}`); invariant(messageSpec, `we're not aware of messageType ${messageType}`);
invariant( invariant(
messageSpec.useCreationSideEffectsFunc, messageSpec.useCreationSideEffectsFunc,
`no useCreationSideEffectsFunc in message spec for ${messageType}`, `no useCreationSideEffectsFunc in message spec for ${messageType}`,
); );
return messageSpec.useCreationSideEffectsFunc(); return messageSpec.useCreationSideEffectsFunc();
} }
function getPinnedContentFromMessage(targetMessage: RawMessageInfo): string {
let pinnedContent;
if (
targetMessage.type === messageTypes.IMAGES ||
targetMessage.type === messageTypes.MULTIMEDIA
) {
pinnedContent = contentStringForMediaArray(targetMessage.media);
} else {
pinnedContent = 'a message';
}
return pinnedContent;
}
export { export {
localIDPrefix, localIDPrefix,
messageKey, messageKey,
messageID, messageID,
robotextForMessageInfo, robotextForMessageInfo,
createMessageInfo, createMessageInfo,
sortMessageInfoList, sortMessageInfoList,
sortMessageIDs, sortMessageIDs,
rawMessageInfoFromMessageData, rawMessageInfoFromMessageData,
mostRecentMessageTimestamp, mostRecentMessageTimestamp,
usersInMessageInfos, usersInMessageInfos,
combineTruncationStatuses, combineTruncationStatuses,
shimUnsupportedRawMessageInfos, shimUnsupportedRawMessageInfos,
createMediaMessageData, createMediaMessageData,
createMediaMessageInfo, createMediaMessageInfo,
stripLocalIDs, stripLocalIDs,
trimMessage, trimMessage,
createMessageQuote, createMessageQuote,
createMessageReply, createMessageReply,
getMostRecentNonLocalMessageID, getMostRecentNonLocalMessageID,
getMessageTitle, getMessageTitle,
mergeThreadMessageInfos, mergeThreadMessageInfos,
useMessagePreview, useMessagePreview,
useMessageCreationSideEffectsFunc, useMessageCreationSideEffectsFunc,
getPinnedContentFromMessage,
}; };
View Options

native/navigation/root-navigator.react.js

// @flow // @flow
import invariant from 'invariant'; import invariant from 'invariant';
import _maxBy from 'lodash/fp/maxBy.js'; import _maxBy from 'lodash/fp/maxBy.js';
import _orderBy from 'lodash/fp/orderBy.js'; import _orderBy from 'lodash/fp/orderBy.js';
import * as React from 'react'; import * as React from 'react';
import { codeBlockRegex, type ParserRules } from './markdown.js'; import { codeBlockRegex, type ParserRules } from './markdown.js';
import type { CreationSideEffectsFunc } from './messages/message-spec.js'; import type { CreationSideEffectsFunc } from './messages/message-spec.js';
import { messageSpecs } from './messages/message-specs.js'; import { messageSpecs } from './messages/message-specs.js';
import { threadIsGroupChat } from './thread-utils.js'; import { threadIsGroupChat } from './thread-utils.js';
import { useStringForUser } from '../hooks/ens-cache.js'; import { useStringForUser } from '../hooks/ens-cache.js';
import { contentStringForMediaArray } from '../media/media-utils.js';
import { userIDsToRelativeUserInfos } from '../selectors/user-selectors.js'; import { userIDsToRelativeUserInfos } from '../selectors/user-selectors.js';
import { type PlatformDetails, isWebPlatform } from '../types/device-types.js'; import { type PlatformDetails, isWebPlatform } from '../types/device-types.js';
import type { Media } from '../types/media-types.js'; import type { Media } from '../types/media-types.js';
import { import {
type MessageInfo, type MessageInfo,
type RawMessageInfo, type RawMessageInfo,
type RobotextMessageInfo, type RobotextMessageInfo,
type RawMultimediaMessageInfo, type RawMultimediaMessageInfo,
▲ Show 20 Lines • Show All 543 Lines • ▼ Show 20 Lines): CreationSideEffectsFunc<Info> {
invariant(messageSpec, `we're not aware of messageType ${messageType}`); invariant(messageSpec, `we're not aware of messageType ${messageType}`);
invariant( invariant(
messageSpec.useCreationSideEffectsFunc, messageSpec.useCreationSideEffectsFunc,
`no useCreationSideEffectsFunc in message spec for ${messageType}`, `no useCreationSideEffectsFunc in message spec for ${messageType}`,
); );
return messageSpec.useCreationSideEffectsFunc(); return messageSpec.useCreationSideEffectsFunc();
} }
function getPinnedContentFromMessage(targetMessage: RawMessageInfo): string {
let pinnedContent;
if (
targetMessage.type === messageTypes.IMAGES ||
targetMessage.type === messageTypes.MULTIMEDIA
) {
pinnedContent = contentStringForMediaArray(targetMessage.media);
} else {
pinnedContent = 'a message';
}
return pinnedContent;
}
export { export {
localIDPrefix, localIDPrefix,
messageKey, messageKey,
messageID, messageID,
robotextForMessageInfo, robotextForMessageInfo,
createMessageInfo, createMessageInfo,
sortMessageInfoList, sortMessageInfoList,
sortMessageIDs, sortMessageIDs,
rawMessageInfoFromMessageData, rawMessageInfoFromMessageData,
mostRecentMessageTimestamp, mostRecentMessageTimestamp,
usersInMessageInfos, usersInMessageInfos,
combineTruncationStatuses, combineTruncationStatuses,
shimUnsupportedRawMessageInfos, shimUnsupportedRawMessageInfos,
createMediaMessageData, createMediaMessageData,
createMediaMessageInfo, createMediaMessageInfo,
stripLocalIDs, stripLocalIDs,
trimMessage, trimMessage,
createMessageQuote, createMessageQuote,
createMessageReply, createMessageReply,
getMostRecentNonLocalMessageID, getMostRecentNonLocalMessageID,
getMessageTitle, getMessageTitle,
mergeThreadMessageInfos, mergeThreadMessageInfos,
useMessagePreview, useMessagePreview,
useMessageCreationSideEffectsFunc, useMessageCreationSideEffectsFunc,
getPinnedContentFromMessage,
}; };
View Options

native/navigation/route-names.js

// @flow // @flow
import invariant from 'invariant'; import invariant from 'invariant';
import _maxBy from 'lodash/fp/maxBy.js'; import _maxBy from 'lodash/fp/maxBy.js';
import _orderBy from 'lodash/fp/orderBy.js'; import _orderBy from 'lodash/fp/orderBy.js';
import * as React from 'react'; import * as React from 'react';
import { codeBlockRegex, type ParserRules } from './markdown.js'; import { codeBlockRegex, type ParserRules } from './markdown.js';
import type { CreationSideEffectsFunc } from './messages/message-spec.js'; import type { CreationSideEffectsFunc } from './messages/message-spec.js';
import { messageSpecs } from './messages/message-specs.js'; import { messageSpecs } from './messages/message-specs.js';
import { threadIsGroupChat } from './thread-utils.js'; import { threadIsGroupChat } from './thread-utils.js';
import { useStringForUser } from '../hooks/ens-cache.js'; import { useStringForUser } from '../hooks/ens-cache.js';
import { contentStringForMediaArray } from '../media/media-utils.js';
import { userIDsToRelativeUserInfos } from '../selectors/user-selectors.js'; import { userIDsToRelativeUserInfos } from '../selectors/user-selectors.js';
import { type PlatformDetails, isWebPlatform } from '../types/device-types.js'; import { type PlatformDetails, isWebPlatform } from '../types/device-types.js';
import type { Media } from '../types/media-types.js'; import type { Media } from '../types/media-types.js';
import { import {
type MessageInfo, type MessageInfo,
type RawMessageInfo, type RawMessageInfo,
type RobotextMessageInfo, type RobotextMessageInfo,
type RawMultimediaMessageInfo, type RawMultimediaMessageInfo,
▲ Show 20 Lines • Show All 543 Lines • ▼ Show 20 Lines): CreationSideEffectsFunc<Info> {
invariant(messageSpec, `we're not aware of messageType ${messageType}`); invariant(messageSpec, `we're not aware of messageType ${messageType}`);
invariant( invariant(
messageSpec.useCreationSideEffectsFunc, messageSpec.useCreationSideEffectsFunc,
`no useCreationSideEffectsFunc in message spec for ${messageType}`, `no useCreationSideEffectsFunc in message spec for ${messageType}`,
); );
return messageSpec.useCreationSideEffectsFunc(); return messageSpec.useCreationSideEffectsFunc();
} }
function getPinnedContentFromMessage(targetMessage: RawMessageInfo): string {
let pinnedContent;
if (
targetMessage.type === messageTypes.IMAGES ||
targetMessage.type === messageTypes.MULTIMEDIA
) {
pinnedContent = contentStringForMediaArray(targetMessage.media);
} else {
pinnedContent = 'a message';
}
return pinnedContent;
}
export { export {
localIDPrefix, localIDPrefix,
messageKey, messageKey,
messageID, messageID,
robotextForMessageInfo, robotextForMessageInfo,
createMessageInfo, createMessageInfo,
sortMessageInfoList, sortMessageInfoList,
sortMessageIDs, sortMessageIDs,
rawMessageInfoFromMessageData, rawMessageInfoFromMessageData,
mostRecentMessageTimestamp, mostRecentMessageTimestamp,
usersInMessageInfos, usersInMessageInfos,
combineTruncationStatuses, combineTruncationStatuses,
shimUnsupportedRawMessageInfos, shimUnsupportedRawMessageInfos,
createMediaMessageData, createMediaMessageData,
createMediaMessageInfo, createMediaMessageInfo,
stripLocalIDs, stripLocalIDs,
trimMessage, trimMessage,
createMessageQuote, createMessageQuote,
createMessageReply, createMessageReply,
getMostRecentNonLocalMessageID, getMostRecentNonLocalMessageID,
getMessageTitle, getMessageTitle,
mergeThreadMessageInfos, mergeThreadMessageInfos,
useMessagePreview, useMessagePreview,
useMessageCreationSideEffectsFunc, useMessageCreationSideEffectsFunc,
getPinnedContentFromMessage,
}; };
View Options

native/themes/colors.js

// @flow // @flow
import invariant from 'invariant'; import invariant from 'invariant';
import _maxBy from 'lodash/fp/maxBy.js'; import _maxBy from 'lodash/fp/maxBy.js';
import _orderBy from 'lodash/fp/orderBy.js'; import _orderBy from 'lodash/fp/orderBy.js';
import * as React from 'react'; import * as React from 'react';
import { codeBlockRegex, type ParserRules } from './markdown.js'; import { codeBlockRegex, type ParserRules } from './markdown.js';
import type { CreationSideEffectsFunc } from './messages/message-spec.js'; import type { CreationSideEffectsFunc } from './messages/message-spec.js';
import { messageSpecs } from './messages/message-specs.js'; import { messageSpecs } from './messages/message-specs.js';
import { threadIsGroupChat } from './thread-utils.js'; import { threadIsGroupChat } from './thread-utils.js';
import { useStringForUser } from '../hooks/ens-cache.js'; import { useStringForUser } from '../hooks/ens-cache.js';
import { contentStringForMediaArray } from '../media/media-utils.js';
import { userIDsToRelativeUserInfos } from '../selectors/user-selectors.js'; import { userIDsToRelativeUserInfos } from '../selectors/user-selectors.js';
import { type PlatformDetails, isWebPlatform } from '../types/device-types.js'; import { type PlatformDetails, isWebPlatform } from '../types/device-types.js';
import type { Media } from '../types/media-types.js'; import type { Media } from '../types/media-types.js';
import { import {
type MessageInfo, type MessageInfo,
type RawMessageInfo, type RawMessageInfo,
type RobotextMessageInfo, type RobotextMessageInfo,
type RawMultimediaMessageInfo, type RawMultimediaMessageInfo,
▲ Show 20 Lines • Show All 543 Lines • ▼ Show 20 Lines): CreationSideEffectsFunc<Info> {
invariant(messageSpec, `we're not aware of messageType ${messageType}`); invariant(messageSpec, `we're not aware of messageType ${messageType}`);
invariant( invariant(
messageSpec.useCreationSideEffectsFunc, messageSpec.useCreationSideEffectsFunc,
`no useCreationSideEffectsFunc in message spec for ${messageType}`, `no useCreationSideEffectsFunc in message spec for ${messageType}`,
); );
return messageSpec.useCreationSideEffectsFunc(); return messageSpec.useCreationSideEffectsFunc();
} }
function getPinnedContentFromMessage(targetMessage: RawMessageInfo): string {
let pinnedContent;
if (
targetMessage.type === messageTypes.IMAGES ||
targetMessage.type === messageTypes.MULTIMEDIA
) {
pinnedContent = contentStringForMediaArray(targetMessage.media);
} else {
pinnedContent = 'a message';
}
return pinnedContent;
}
export { export {
localIDPrefix, localIDPrefix,
messageKey, messageKey,
messageID, messageID,
robotextForMessageInfo, robotextForMessageInfo,
createMessageInfo, createMessageInfo,
sortMessageInfoList, sortMessageInfoList,
sortMessageIDs, sortMessageIDs,
rawMessageInfoFromMessageData, rawMessageInfoFromMessageData,
mostRecentMessageTimestamp, mostRecentMessageTimestamp,
usersInMessageInfos, usersInMessageInfos,
combineTruncationStatuses, combineTruncationStatuses,
shimUnsupportedRawMessageInfos, shimUnsupportedRawMessageInfos,
createMediaMessageData, createMediaMessageData,
createMediaMessageInfo, createMediaMessageInfo,
stripLocalIDs, stripLocalIDs,
trimMessage, trimMessage,
createMessageQuote, createMessageQuote,
createMessageReply, createMessageReply,
getMostRecentNonLocalMessageID, getMostRecentNonLocalMessageID,
getMessageTitle, getMessageTitle,
mergeThreadMessageInfos, mergeThreadMessageInfos,
useMessagePreview, useMessagePreview,
useMessageCreationSideEffectsFunc, useMessageCreationSideEffectsFunc,
getPinnedContentFromMessage,
}; };