Page MenuHomePhabricator
Differential D12530

[web] introduce TagFarcasterChannelModal
ClosedPublic
Actions

Authored by ginsu on Jun 20 2024, 8:16 PM.
Tags
None
Referenced Files
Unknown Object (File)
Sat, Mar 22, 2:42 AM
Unknown Object (File)
Sun, Mar 16, 11:20 AM
Unknown Object (File)
Tue, Mar 11, 3:59 PM
Unknown Object (File)
Tue, Mar 11, 3:57 PM
Unknown Object (File)
Tue, Mar 11, 3:54 PM
Unknown Object (File)
Tue, Mar 11, 3:39 PM
Unknown Object (File)
Sun, Mar 9, 6:41 AM
Unknown Object (File)
Sun, Mar 9, 6:41 AM
View All 93 Files
Subscribers
ashoat
tomek

Details

Reviewers
inka
ashoat
kamil
Commits
rCOMM084003ee186f: [web] introduce TagFarcasterChannelModal
Summary

This diff introduces the TagFarcasterChannelModal component. This modal will show the selected farcaster channel if there is one tag otherwise it will let the user create a tag. Subsequent diffs in this stack will extend this modal

Test Plan

Please see the screenshot below

w/ tagged channel

Screenshot 2024-06-20 at 11.18.48 PM.png (2×3 px, 801 KB)

w/o tagged channel

Screenshot 2024-06-20 at 11.17.36 PM.png (2×3 px, 895 KB)

Diff Detail

Repository
rCOMM Comm
Lint
Lint Not Applicable
Unit
Tests Not Applicable

Event Timeline

ginsu created this revision.Jun 20 2024, 8:16 PM
Herald added subscribers: tomek, ashoat. · View Herald TranscriptJun 20 2024, 8:16 PM
ginsu edited the summary of this revision. (Show Details)Jun 20 2024, 8:21 PM
ginsu edited the test plan for this revision. (Show Details)
ginsu added reviewers: kamil, inka.
ginsu edited the summary of this revision. (Show Details)
ginsu attached a referenced file: F2059113: Screenshot 2024-06-20 at 11.17.36 PM.png. (Show Details)
ginsu attached a referenced file: F2059111: Screenshot 2024-06-20 at 11.18.48 PM.png. (Show Details)
ginsu added a reviewer: ashoat.

copy review

web/tag-farcaster-channel/tag-farcaster-channel-modal.react.js
43 ↗(On Diff #41588)

This copy is taken from here, but still want to get the green light from @ashoat

https://github.com/CommE2E/comm/blob/master/native/community-settings/tag-farcaster-channel/tag-farcaster-channel.react.js#L87

ginsu updated this revision to Diff 41589.Jun 20 2024, 8:26 PM
ginsu edited the summary of this revision. (Show Details)

update

ginsu added inline comments.Jun 20 2024, 8:28 PM
web/tag-farcaster-channel/tag-farcaster-channel-modal.react.js
28 ↗(On Diff #41589)

This copy is taken from here, but still want to get the green light from @ashoat

https://github.com/CommE2E/comm/blob/master/native/community-settings/tag-farcaster-channel/tag-farcaster-channel.react.js#L53

41 ↗(On Diff #41589)

This copy is taken from here, but still want to get the green light from @ashoat

https://github.com/CommE2E/comm/blob/master/native/community-settings/tag-farcaster-channel/tag-farcaster-channel-navigator.react.js#L55

43 ↗(On Diff #41589)

This copy is taken from here, but still want to get the green light from @ashoat

https://github.com/CommE2E/comm/blob/master/native/community-settings/tag-farcaster-channel/tag-farcaster-channel.react.js#L87

45 ↗(On Diff #41589)

This copy is taken from here, but still want to get the green light from @ashoat

https://github.com/CommE2E/comm/blob/master/native/community-settings/tag-farcaster-channel/tag-farcaster-channel.react.js#L92

ginsu added a child revision: D12532: [lib/native] introduce useRemoveFarcasterChannelTag.Jun 20 2024, 8:31 PM
Harbormaster completed remote builds in B29853: Diff 41588.Jun 20 2024, 8:31 PM
Harbormaster completed remote builds in B29854: Diff 41589.Jun 20 2024, 8:42 PM
ginsu requested review of this revision.Jun 20 2024, 8:42 PM
inka accepted this revision.Jun 21 2024, 12:42 AM
kamil resigned from this revision.Jun 21 2024, 3:51 AM
ginsu removed a child revision: D12532: [lib/native] introduce useRemoveFarcasterChannelTag.Jun 21 2024, 11:17 AM
ginsu added a child revision: D12534: [lib/native/web] introduce RemoveTagButton.Jun 21 2024, 11:26 AM
ashoat accepted this revision.Jun 27 2024, 9:51 AM

Looks good, but can you dedup the copy-pasted strings before landing?

This revision is now accepted and ready to land.Jun 27 2024, 9:51 AM
ginsu updated this revision to Diff 41812.Jun 28 2024, 10:52 AM

address comments

Harbormaster completed remote builds in B30001: Diff 41812.Jun 28 2024, 11:08 AM
Closed by commit rCOMM084003ee186f: [web] introduce TagFarcasterChannelModal (authored by ginsu). · Explain WhyJun 28 2024, 11:50 AM
This revision was automatically updated to reflect the committed changes.
ginsu added a commit: rCOMM084003ee186f: [web] introduce TagFarcasterChannelModal.

Revision Contents
Changeset List

PathSize
lib/
shared/
8 lines
native/
community-settings/
tag-farcaster-channel/
11 lines
web/
tag-farcaster-channel/
22 lines
60 lines

Diff 41814

View Options

lib/shared/community-utils.js

Show First 20 Lines • Show All 97 Lines • ▼ Show 20 Lines [
identityClient, identityClient,
primaryDeviceRequestedLogOut, primaryDeviceRequestedLogOut,
], ],
); );
} }
function usePeerToPeerMessageHandler(): ( function usePeerToPeerMessageHandler(): (
message: PeerToPeerMessage, message: PeerToPeerMessage,
messageID: string,
) => Promise<void> { ) => Promise<void> {
const { olmAPI, sqliteAPI } = getConfig(); const { olmAPI, sqliteAPI } = getConfig();
const identityContext = React.useContext(IdentityClientContext); const identityContext = React.useContext(IdentityClientContext);
invariant(identityContext, 'Identity context should be set'); invariant(identityContext, 'Identity context should be set');
const { identityClient, getAuthMetadata } = identityContext; const { identityClient, getAuthMetadata } = identityContext;
const foreignPeerDevices = useSelector(getForeignPeerDevices); const foreignPeerDevices = useSelector(getForeignPeerDevices);
const broadcastDeviceListUpdates = useBroadcastDeviceListUpdates(); const broadcastDeviceListUpdates = useBroadcastDeviceListUpdates();
const getAndUpdateDeviceListsForUsers = useGetAndUpdateDeviceListsForUsers(); const getAndUpdateDeviceListsForUsers = useGetAndUpdateDeviceListsForUsers();
const handleOlmMessageToDevice = useHandleOlmMessageToDevice(); const handleOlmMessageToDevice = useHandleOlmMessageToDevice();
return React.useCallback( return React.useCallback(
async (message: PeerToPeerMessage, messageID: string) => { async (message: PeerToPeerMessage) => {
if (message.type === peerToPeerMessageTypes.OUTBOUND_SESSION_CREATION) { if (message.type === peerToPeerMessageTypes.OUTBOUND_SESSION_CREATION) {
const { senderInfo, encryptedData, sessionVersion } = message; const { senderInfo, encryptedData, sessionVersion } = message;
const { userID: senderUserID, deviceID: senderDeviceID } = senderInfo; const { userID: senderUserID, deviceID: senderDeviceID } = senderInfo;
let deviceKeys: ?DeviceOlmInboundKeys = null; let deviceKeys: ?DeviceOlmInboundKeys = null;
try { try {
const { keys } = const { keys } =
await identityClient.getInboundKeysForUser(senderUserID); await identityClient.getInboundKeysForUser(senderUserID);
▲ Show 20 Lines • Show All 59 Lines • ▼ Show 20 Lines async (message: PeerToPeerMessage) => {
`${senderDeviceID}: ${e.message}, ` + `${senderDeviceID}: ${e.message}, ` +
`session version: ${sessionVersion}`, `session version: ${sessionVersion}`,
); );
} }
} }
} else if (message.type === peerToPeerMessageTypes.ENCRYPTED_MESSAGE) { } else if (message.type === peerToPeerMessageTypes.ENCRYPTED_MESSAGE) {
try { try {
await olmAPI.initializeCryptoAccount(); await olmAPI.initializeCryptoAccount();
const decrypted = await olmAPI.decryptSequentialAndPersist( const decrypted = await olmAPI.decrypt(
message.encryptedData, message.encryptedData,
message.senderInfo.deviceID, message.senderInfo.deviceID,
messageID,
); );
console.log( console.log(
'Decrypted message from device ' + 'Decrypted message from device ' +
`${message.senderInfo.deviceID}: ${decrypted}`, `${message.senderInfo.deviceID}: ${decrypted}`,
); );
try { try {
await handleOlmMessageToDevice(decrypted, message.senderInfo); await handleOlmMessageToDevice(decrypted, message.senderInfo);
▲ Show 20 Lines • Show All 119 Lines • Show Last 20 Lines
View Options

native/community-settings/tag-farcaster-channel/tag-farcaster-channel.react.js

Show First 20 Lines • Show All 97 Lines • ▼ Show 20 Lines [
identityClient, identityClient,
primaryDeviceRequestedLogOut, primaryDeviceRequestedLogOut,
], ],
); );
} }
function usePeerToPeerMessageHandler(): ( function usePeerToPeerMessageHandler(): (
message: PeerToPeerMessage, message: PeerToPeerMessage,
messageID: string,
) => Promise<void> { ) => Promise<void> {
const { olmAPI, sqliteAPI } = getConfig(); const { olmAPI, sqliteAPI } = getConfig();
const identityContext = React.useContext(IdentityClientContext); const identityContext = React.useContext(IdentityClientContext);
invariant(identityContext, 'Identity context should be set'); invariant(identityContext, 'Identity context should be set');
const { identityClient, getAuthMetadata } = identityContext; const { identityClient, getAuthMetadata } = identityContext;
const foreignPeerDevices = useSelector(getForeignPeerDevices); const foreignPeerDevices = useSelector(getForeignPeerDevices);
const broadcastDeviceListUpdates = useBroadcastDeviceListUpdates(); const broadcastDeviceListUpdates = useBroadcastDeviceListUpdates();
const getAndUpdateDeviceListsForUsers = useGetAndUpdateDeviceListsForUsers(); const getAndUpdateDeviceListsForUsers = useGetAndUpdateDeviceListsForUsers();
const handleOlmMessageToDevice = useHandleOlmMessageToDevice(); const handleOlmMessageToDevice = useHandleOlmMessageToDevice();
return React.useCallback( return React.useCallback(
async (message: PeerToPeerMessage, messageID: string) => { async (message: PeerToPeerMessage) => {
if (message.type === peerToPeerMessageTypes.OUTBOUND_SESSION_CREATION) { if (message.type === peerToPeerMessageTypes.OUTBOUND_SESSION_CREATION) {
const { senderInfo, encryptedData, sessionVersion } = message; const { senderInfo, encryptedData, sessionVersion } = message;
const { userID: senderUserID, deviceID: senderDeviceID } = senderInfo; const { userID: senderUserID, deviceID: senderDeviceID } = senderInfo;
let deviceKeys: ?DeviceOlmInboundKeys = null; let deviceKeys: ?DeviceOlmInboundKeys = null;
try { try {
const { keys } = const { keys } =
await identityClient.getInboundKeysForUser(senderUserID); await identityClient.getInboundKeysForUser(senderUserID);
▲ Show 20 Lines • Show All 59 Lines • ▼ Show 20 Lines async (message: PeerToPeerMessage) => {
`${senderDeviceID}: ${e.message}, ` + `${senderDeviceID}: ${e.message}, ` +
`session version: ${sessionVersion}`, `session version: ${sessionVersion}`,
); );
} }
} }
} else if (message.type === peerToPeerMessageTypes.ENCRYPTED_MESSAGE) { } else if (message.type === peerToPeerMessageTypes.ENCRYPTED_MESSAGE) {
try { try {
await olmAPI.initializeCryptoAccount(); await olmAPI.initializeCryptoAccount();
const decrypted = await olmAPI.decryptSequentialAndPersist( const decrypted = await olmAPI.decrypt(
message.encryptedData, message.encryptedData,
message.senderInfo.deviceID, message.senderInfo.deviceID,
messageID,
); );
console.log( console.log(
'Decrypted message from device ' + 'Decrypted message from device ' +
`${message.senderInfo.deviceID}: ${decrypted}`, `${message.senderInfo.deviceID}: ${decrypted}`,
); );
try { try {
await handleOlmMessageToDevice(decrypted, message.senderInfo); await handleOlmMessageToDevice(decrypted, message.senderInfo);
▲ Show 20 Lines • Show All 119 Lines • Show Last 20 Lines
View Options

web/tag-farcaster-channel/tag-farcaster-channel-modal.css

Show First 20 Lines • Show All 97 Lines • ▼ Show 20 Lines [
identityClient, identityClient,
primaryDeviceRequestedLogOut, primaryDeviceRequestedLogOut,
], ],
); );
} }
function usePeerToPeerMessageHandler(): ( function usePeerToPeerMessageHandler(): (
message: PeerToPeerMessage, message: PeerToPeerMessage,
messageID: string,
) => Promise<void> { ) => Promise<void> {
const { olmAPI, sqliteAPI } = getConfig(); const { olmAPI, sqliteAPI } = getConfig();
const identityContext = React.useContext(IdentityClientContext); const identityContext = React.useContext(IdentityClientContext);
invariant(identityContext, 'Identity context should be set'); invariant(identityContext, 'Identity context should be set');
const { identityClient, getAuthMetadata } = identityContext; const { identityClient, getAuthMetadata } = identityContext;
const foreignPeerDevices = useSelector(getForeignPeerDevices); const foreignPeerDevices = useSelector(getForeignPeerDevices);
const broadcastDeviceListUpdates = useBroadcastDeviceListUpdates(); const broadcastDeviceListUpdates = useBroadcastDeviceListUpdates();
const getAndUpdateDeviceListsForUsers = useGetAndUpdateDeviceListsForUsers(); const getAndUpdateDeviceListsForUsers = useGetAndUpdateDeviceListsForUsers();
const handleOlmMessageToDevice = useHandleOlmMessageToDevice(); const handleOlmMessageToDevice = useHandleOlmMessageToDevice();
return React.useCallback( return React.useCallback(
async (message: PeerToPeerMessage, messageID: string) => { async (message: PeerToPeerMessage) => {
if (message.type === peerToPeerMessageTypes.OUTBOUND_SESSION_CREATION) { if (message.type === peerToPeerMessageTypes.OUTBOUND_SESSION_CREATION) {
const { senderInfo, encryptedData, sessionVersion } = message; const { senderInfo, encryptedData, sessionVersion } = message;
const { userID: senderUserID, deviceID: senderDeviceID } = senderInfo; const { userID: senderUserID, deviceID: senderDeviceID } = senderInfo;
let deviceKeys: ?DeviceOlmInboundKeys = null; let deviceKeys: ?DeviceOlmInboundKeys = null;
try { try {
const { keys } = const { keys } =
await identityClient.getInboundKeysForUser(senderUserID); await identityClient.getInboundKeysForUser(senderUserID);
▲ Show 20 Lines • Show All 59 Lines • ▼ Show 20 Lines async (message: PeerToPeerMessage) => {
`${senderDeviceID}: ${e.message}, ` + `${senderDeviceID}: ${e.message}, ` +
`session version: ${sessionVersion}`, `session version: ${sessionVersion}`,
); );
} }
} }
} else if (message.type === peerToPeerMessageTypes.ENCRYPTED_MESSAGE) { } else if (message.type === peerToPeerMessageTypes.ENCRYPTED_MESSAGE) {
try { try {
await olmAPI.initializeCryptoAccount(); await olmAPI.initializeCryptoAccount();
const decrypted = await olmAPI.decryptSequentialAndPersist( const decrypted = await olmAPI.decrypt(
message.encryptedData, message.encryptedData,
message.senderInfo.deviceID, message.senderInfo.deviceID,
messageID,
); );
console.log( console.log(
'Decrypted message from device ' + 'Decrypted message from device ' +
`${message.senderInfo.deviceID}: ${decrypted}`, `${message.senderInfo.deviceID}: ${decrypted}`,
); );
try { try {
await handleOlmMessageToDevice(decrypted, message.senderInfo); await handleOlmMessageToDevice(decrypted, message.senderInfo);
▲ Show 20 Lines • Show All 119 Lines • Show Last 20 Lines
View Options

web/tag-farcaster-channel/tag-farcaster-channel-modal.react.js

Show First 20 Lines • Show All 97 Lines • ▼ Show 20 Lines [
identityClient, identityClient,
primaryDeviceRequestedLogOut, primaryDeviceRequestedLogOut,
], ],
); );
} }
function usePeerToPeerMessageHandler(): ( function usePeerToPeerMessageHandler(): (
message: PeerToPeerMessage, message: PeerToPeerMessage,
messageID: string,
) => Promise<void> { ) => Promise<void> {
const { olmAPI, sqliteAPI } = getConfig(); const { olmAPI, sqliteAPI } = getConfig();
const identityContext = React.useContext(IdentityClientContext); const identityContext = React.useContext(IdentityClientContext);
invariant(identityContext, 'Identity context should be set'); invariant(identityContext, 'Identity context should be set');
const { identityClient, getAuthMetadata } = identityContext; const { identityClient, getAuthMetadata } = identityContext;
const foreignPeerDevices = useSelector(getForeignPeerDevices); const foreignPeerDevices = useSelector(getForeignPeerDevices);
const broadcastDeviceListUpdates = useBroadcastDeviceListUpdates(); const broadcastDeviceListUpdates = useBroadcastDeviceListUpdates();
const getAndUpdateDeviceListsForUsers = useGetAndUpdateDeviceListsForUsers(); const getAndUpdateDeviceListsForUsers = useGetAndUpdateDeviceListsForUsers();
const handleOlmMessageToDevice = useHandleOlmMessageToDevice(); const handleOlmMessageToDevice = useHandleOlmMessageToDevice();
return React.useCallback( return React.useCallback(
async (message: PeerToPeerMessage, messageID: string) => { async (message: PeerToPeerMessage) => {
if (message.type === peerToPeerMessageTypes.OUTBOUND_SESSION_CREATION) { if (message.type === peerToPeerMessageTypes.OUTBOUND_SESSION_CREATION) {
const { senderInfo, encryptedData, sessionVersion } = message; const { senderInfo, encryptedData, sessionVersion } = message;
const { userID: senderUserID, deviceID: senderDeviceID } = senderInfo; const { userID: senderUserID, deviceID: senderDeviceID } = senderInfo;
let deviceKeys: ?DeviceOlmInboundKeys = null; let deviceKeys: ?DeviceOlmInboundKeys = null;
try { try {
const { keys } = const { keys } =
await identityClient.getInboundKeysForUser(senderUserID); await identityClient.getInboundKeysForUser(senderUserID);
▲ Show 20 Lines • Show All 59 Lines • ▼ Show 20 Lines async (message: PeerToPeerMessage) => {
`${senderDeviceID}: ${e.message}, ` + `${senderDeviceID}: ${e.message}, ` +
`session version: ${sessionVersion}`, `session version: ${sessionVersion}`,
); );
} }
} }
} else if (message.type === peerToPeerMessageTypes.ENCRYPTED_MESSAGE) { } else if (message.type === peerToPeerMessageTypes.ENCRYPTED_MESSAGE) {
try { try {
await olmAPI.initializeCryptoAccount(); await olmAPI.initializeCryptoAccount();
const decrypted = await olmAPI.decryptSequentialAndPersist( const decrypted = await olmAPI.decrypt(
message.encryptedData, message.encryptedData,
message.senderInfo.deviceID, message.senderInfo.deviceID,
messageID,
); );
console.log( console.log(
'Decrypted message from device ' + 'Decrypted message from device ' +
`${message.senderInfo.deviceID}: ${decrypted}`, `${message.senderInfo.deviceID}: ${decrypted}`,
); );
try { try {
await handleOlmMessageToDevice(decrypted, message.senderInfo); await handleOlmMessageToDevice(decrypted, message.senderInfo);
▲ Show 20 Lines • Show All 119 Lines • Show Last 20 Lines