Paths

Table of Contentst

-
native/components/
-
components/
-
community-list-item.react.js
-
community-list.react.js

Differential D13995

[native] introduce community list component
ClosedPublic
Actions

Authored by varun on Nov 21 2024, 1:41 PM.

Details

Reviewers

ashoat

Commits

rCOMM3427c719adc5: [native] introduce community list component

Summary

this component is basically a fork of the native ThreadList component

the differences are, the new component:

renders CommunityListItems
does not have an onSelect (we may consider adding this in the future to display community info)
does not have a searchRef (we don't want to call focus() on the textInput, keyboard should not display unless user presses search bar)

Depends on D13994

Test Plan

see video

Diff Detail

Repository

rCOMM Comm

Lint

Lint Not Applicable

Unit

Tests Not Applicable

Event Timeline

varun created this revision.Nov 21 2024, 1:41 PM

Herald added a subscriber: tomek. · View Herald TranscriptNov 21 2024, 1:41 PM

varun edited the test plan for this revision. (Show Details)Nov 21 2024, 1:44 PM

varun attached a referenced file: F3336053: RPReplay_Final1732225392.MP4. (Show Details)

varun mentioned this in D13994: [native] community list item component.

Harbormaster completed remote builds in B32756: Diff 45932.Nov 21 2024, 2:00 PM

varun requested review of this revision.Nov 21 2024, 2:00 PM

React class components should not be used for new components in 95% of cases... can you try to make this a function component?

native/components/community-list.react.js
44 ↗	(On Diff #45932)	We should not be introducing any new class components
50–65 ↗	(On Diff #45932)	This messy pattern is approximating `React.useMemo`
84 ↗	(On Diff #45932)	There's a shorthand for this now
95 ↗	(On Diff #45932)

This revision now requires changes to proceed.Nov 21 2024, 6:28 PM

varun added a child revision: D13996: [native] community joiner modal.Nov 21 2024, 7:58 PM

rewrite as a functional component

Harbormaster completed remote builds in B33052: Diff 46370.Dec 11 2024, 9:00 PM

ashoat accepted this revision.Dec 12 2024, 10:49 AM

ashoat added inline comments.

native/components/community-list.react.js
24–26 ↗	(On Diff #46370)	Do we actually have multiple use cases for this component? If not, I think: We should avoid having optional properties, and make them all requires We should remove any properties that are not used in our upcoming first (and only?) use case
48–50 ↗	(On Diff #46370)	Nit: shorthand

This revision is now accepted and ready to land.Dec 12 2024, 10:49 AM

varun added inline comments.Jan 14 2025, 1:08 PM

native/components/community-list.react.js
24–26 ↗	(On Diff #46370)	made similar changes downstream

Closed by commit rCOMM3427c719adc5: [native] introduce community list component (authored by varun). · Explain WhyJan 14 2025, 1:09 PM

This revision was automatically updated to reflect the committed changes.

varun added a commit: rCOMM3427c719adc5: [native] introduce community list component.

Revision Contents
Changeset List

Path

Size

native/

components/

community-list-item.react.js

12 lines

community-list.react.js

104 lines

Diff 46682

View Options

native/components/community-list-item.react.js

	// @flow			// @flow

	import invariant from 'invariant';			import invariant from 'invariant';
	import * as React from 'react';			import * as React from 'react';

	import { usePeerOlmSessionsCreatorContext } from '../components/peer-olm-session-creator-provider.react.js';
	import {			import {
	useBroadcastDeviceListUpdates,			useBroadcastDeviceListUpdates,
	useBroadcastAccountDeletion,			useBroadcastAccountDeletion,
	} from '../hooks/peer-list-hooks.js';			} from '../hooks/peer-list-hooks.js';
	import type {			import type {
	CallSingleKeyserverEndpoint,			CallSingleKeyserverEndpoint,
	CallSingleKeyserverEndpointOptions,			CallSingleKeyserverEndpointOptions,
	} from '../keyserver-conn/call-single-keyserver-endpoint.js';			} from '../keyserver-conn/call-single-keyserver-endpoint.js';
	Show All 12 Lines
	} from '../shared/crypto-utils.js';			} from '../shared/crypto-utils.js';
	import { fetchLatestDeviceList } from '../shared/device-list-utils.js';			import { fetchLatestDeviceList } from '../shared/device-list-utils.js';
	import { IdentityClientContext } from '../shared/identity-client-context.js';			import { IdentityClientContext } from '../shared/identity-client-context.js';
	import threadWatcher from '../shared/thread-watcher.js';			import threadWatcher from '../shared/thread-watcher.js';
	import {			import {
	permissionsAndAuthRelatedRequestTimeout,			permissionsAndAuthRelatedRequestTimeout,
	callIdentityServiceTimeout,			callIdentityServiceTimeout,
	} from '../shared/timeouts.js';			} from '../shared/timeouts.js';
	import { useTunnelbroker } from '../tunnelbroker/tunnelbroker-context.js';			import { usePeerToPeerCommunication } from '../tunnelbroker/peer-to-peer-context.js';
	import type {			import type {
	LegacyLogInInfo,			LegacyLogInInfo,
	LegacyLogInResult,			LegacyLogInResult,
	LegacyRegisterResult,			LegacyRegisterResult,
	LegacyRegisterInfo,			LegacyRegisterInfo,
	UpdateUserSettingsRequest,			UpdateUserSettingsRequest,
	PolicyAcknowledgmentRequest,			PolicyAcknowledgmentRequest,
	ClaimUsernameRequest,			ClaimUsernameRequest,
	Show All 26 Lines
	} from '../types/search-types.js';			} from '../types/search-types.js';
	import type { PreRequestUserState } from '../types/session-types.js';			import type { PreRequestUserState } from '../types/session-types.js';
	import type {			import type {
	SubscriptionUpdateRequest,			SubscriptionUpdateRequest,
	SubscriptionUpdateResult,			SubscriptionUpdateResult,
	} from '../types/subscription-types.js';			} from '../types/subscription-types.js';
	import type { RawThreadInfos } from '../types/thread-types.js';			import type { RawThreadInfos } from '../types/thread-types.js';
	import {			import {
	peerToPeerMessageTypes,
	type EncryptedMessage,
	} from '../types/tunnelbroker/peer-to-peer-message-types.js';
	import {
	userActionsP2PMessageTypes,			userActionsP2PMessageTypes,
	type PrimaryDeviceLogoutP2PMessage,			type PrimaryDeviceLogoutP2PMessage,
	type SecondaryDeviceLogoutP2PMessage,			type SecondaryDeviceLogoutP2PMessage,
	} from '../types/tunnelbroker/user-actions-peer-to-peer-message-types.js';			} from '../types/tunnelbroker/user-actions-peer-to-peer-message-types.js';
	import type {			import type {
	CurrentUserInfo,			CurrentUserInfo,
	UserInfo,			UserInfo,
	PasswordUpdate,			PasswordUpdate,
	▲ Show 20 Lines • Show All 173 Lines • ▼ Show 20 Lines
	});			});

	function usePrimaryDeviceLogOut(): () => Promise<LogOutResult> {			function usePrimaryDeviceLogOut(): () => Promise<LogOutResult> {
	const identityContext = React.useContext(IdentityClientContext);			const identityContext = React.useContext(IdentityClientContext);
	if (!identityContext) {			if (!identityContext) {
	throw new Error('Identity service client is not initialized');			throw new Error('Identity service client is not initialized');
	}			}

	const { sendMessageToDevice } = useTunnelbroker();
	const broadcastDeviceListUpdates = useBroadcastDeviceListUpdates();			const broadcastDeviceListUpdates = useBroadcastDeviceListUpdates();
				const { broadcastEphemeralMessage } = usePeerToPeerCommunication();
	const foreignPeerDevices = useSelector(getForeignPeerDevices);			const foreignPeerDevices = useSelector(getForeignPeerDevices);

	const logOut = useLogOut(primaryDeviceLogOutOptions);			const logOut = useLogOut(primaryDeviceLogOutOptions);
	const { createOlmSessionsWithPeer } = usePeerOlmSessionsCreatorContext();
	return React.useCallback(async () => {			return React.useCallback(async () => {
	const { identityClient, getAuthMetadata } = identityContext;			const { identityClient, getAuthMetadata } = identityContext;
	const authMetadata = await getAuthMetadata();			const authMetadata = await getAuthMetadata();
	const { userID, deviceID: thisDeviceID } = authMetadata;			const { userID, deviceID: thisDeviceID } = authMetadata;
	if (!thisDeviceID \|\| !userID) {			if (!thisDeviceID \|\| !userID) {
	throw new Error('No auth metadata');			throw new Error('No auth metadata');
	}			}
	const {			const {
	devices: [primaryDeviceID, ...secondaryDevices],			devices: [primaryDeviceID, ...secondaryDevices],
	} = await fetchLatestDeviceList(identityClient, userID);			} = await fetchLatestDeviceList(identityClient, userID);
	if (thisDeviceID !== primaryDeviceID) {			if (thisDeviceID !== primaryDeviceID) {
	throw new Error('Used primary device logout on a non-primary device');			throw new Error('Used primary device logout on a non-primary device');
	}			}

	// create and send Olm Tunnelbroker messages to secondaryDevices
	const { olmAPI } = getConfig();
	await olmAPI.initializeCryptoAccount();
	const messageContents: PrimaryDeviceLogoutP2PMessage = {			const messageContents: PrimaryDeviceLogoutP2PMessage = {
	type: userActionsP2PMessageTypes.LOG_OUT_PRIMARY_DEVICE,			type: userActionsP2PMessageTypes.LOG_OUT_PRIMARY_DEVICE,
	};			};
	for (const deviceID of secondaryDevices) {			const recipients = secondaryDevices.map(deviceID => ({ userID, deviceID }));
	try {			await broadcastEphemeralMessage(
	const encryptedData = await olmAPI.encrypt(
	JSON.stringify(messageContents),
	deviceID,
	);
	const encryptedMessage: EncryptedMessage = {
	type: peerToPeerMessageTypes.ENCRYPTED_MESSAGE,
	senderInfo: { deviceID: thisDeviceID, userID },
	encryptedData,
	};
	await sendMessageToDevice({
	deviceID,
	payload: JSON.stringify(encryptedMessage),
	});
	} catch {
	try {
	await createOlmSessionsWithPeer(userID, deviceID);
	const encryptedData = await olmAPI.encrypt(
	JSON.stringify(messageContents),			JSON.stringify(messageContents),
	deviceID,			recipients,
				authMetadata,
	);			);
	const encryptedMessage: EncryptedMessage = {
	type: peerToPeerMessageTypes.ENCRYPTED_MESSAGE,
	senderInfo: { deviceID: thisDeviceID, userID },
	encryptedData,
	};
	await sendMessageToDevice({
	deviceID,
	payload: JSON.stringify(encryptedMessage),
	});
	} catch (err) {
	console.warn(
	`Error sending primary device logout message to device ${deviceID}:`,
	err,
	);
	}
	}
	}

	// - logOut() performs device list update by calling Identity RPC			// - logOut() performs device list update by calling Identity RPC
	// - broadcastDeviceListUpdates asks peers to download it from identity			// - broadcastDeviceListUpdates asks peers to download it from identity
	// so we need to call them in this order to make sure peers have latest			// so we need to call them in this order to make sure peers have latest
	// device list.			// device list.
	// We're relying on Tunnelbroker session stil existing after calling logout			// We're relying on Tunnelbroker session stil existing after calling logout
	// and auth metadata not yet cleared at this point.			// and auth metadata not yet cleared at this point.
	const logOutResult = await logOut();			const logOutResult = await logOut();
	await broadcastDeviceListUpdates(foreignPeerDevices);			await broadcastDeviceListUpdates(foreignPeerDevices);
	return logOutResult;			return logOutResult;
	}, [			}, [
	createOlmSessionsWithPeer,
	broadcastDeviceListUpdates,			broadcastDeviceListUpdates,
				broadcastEphemeralMessage,
	foreignPeerDevices,			foreignPeerDevices,
	identityContext,			identityContext,
	logOut,			logOut,
	sendMessageToDevice,
	]);			]);
	}			}

	const secondaryDeviceLogOutOptions = Object.freeze({			const secondaryDeviceLogOutOptions = Object.freeze({
	logOutType: 'secondary_device',			logOutType: 'secondary_device',
	});			});

	function useSecondaryDeviceLogOut(): () => Promise<LogOutResult> {			function useSecondaryDeviceLogOut(): () => Promise<LogOutResult> {
	const { sendMessageToDevice } = useTunnelbroker();
	const logOut = useLogOut(secondaryDeviceLogOutOptions);			const logOut = useLogOut(secondaryDeviceLogOutOptions);

	const identityContext = React.useContext(IdentityClientContext);			const identityContext = React.useContext(IdentityClientContext);
	if (!identityContext) {			if (!identityContext) {
	throw new Error('Identity service client is not initialized');			throw new Error('Identity service client is not initialized');
	}			}
	const { createOlmSessionsWithPeer } = usePeerOlmSessionsCreatorContext();			const { broadcastEphemeralMessage } = usePeerToPeerCommunication();

	return React.useCallback(async () => {			return React.useCallback(async () => {
	const { identityClient, getAuthMetadata } = identityContext;			const { identityClient, getAuthMetadata } = identityContext;
	const authMetadata = await getAuthMetadata();			const authMetadata = await getAuthMetadata();
	const { userID, deviceID } = authMetadata;			const { userID, deviceID } = authMetadata;
	if (!deviceID \|\| !userID) {			if (!deviceID \|\| !userID) {
	throw new Error('No auth metadata');			throw new Error('No auth metadata');
	}			}

	// get current device list and primary device ID			// get current device list and primary device ID
	const { devices } = await fetchLatestDeviceList(identityClient, userID);			const { devices } = await fetchLatestDeviceList(identityClient, userID);
	const primaryDeviceID = devices[0];			const primaryDeviceID = devices[0];
	if (deviceID === primaryDeviceID) {			if (deviceID === primaryDeviceID) {
	throw new Error('Used secondary device logout on primary device');			throw new Error('Used secondary device logout on primary device');
	}			}

	// create and send Olm Tunnelbroker message to primary device			// create and send Olm Tunnelbroker message to primary device
	const { olmAPI } = getConfig();			const { olmAPI } = getConfig();
	await olmAPI.initializeCryptoAccount();			await olmAPI.initializeCryptoAccount();
	const messageContents: SecondaryDeviceLogoutP2PMessage = {			const messageContents: SecondaryDeviceLogoutP2PMessage = {
	type: userActionsP2PMessageTypes.LOG_OUT_SECONDARY_DEVICE,			type: userActionsP2PMessageTypes.LOG_OUT_SECONDARY_DEVICE,
	};			};
	try {			const recipient = { userID, deviceID: primaryDeviceID };
	const encryptedData = await olmAPI.encrypt(			await broadcastEphemeralMessage(
	JSON.stringify(messageContents),
	primaryDeviceID,
	);
	const encryptedMessage: EncryptedMessage = {
	type: peerToPeerMessageTypes.ENCRYPTED_MESSAGE,
	senderInfo: { deviceID, userID },
	encryptedData,
	};
	await sendMessageToDevice({
	deviceID: primaryDeviceID,
	payload: JSON.stringify(encryptedMessage),
	});
	} catch {
	try {
	await createOlmSessionsWithPeer(userID, primaryDeviceID);
	const encryptedData = await olmAPI.encrypt(
	JSON.stringify(messageContents),			JSON.stringify(messageContents),
	primaryDeviceID,			[recipient],
				authMetadata,
	);			);
	const encryptedMessage: EncryptedMessage = {
	type: peerToPeerMessageTypes.ENCRYPTED_MESSAGE,
	senderInfo: { deviceID, userID },
	encryptedData,
	};
	await sendMessageToDevice({
	deviceID: primaryDeviceID,
	payload: JSON.stringify(encryptedMessage),
	});
	} catch (err) {
	console.warn('Error sending secondary device logout message:', err);
	}
	}

	// log out of identity service, keyserver and visually			// log out of identity service, keyserver and visually
	return logOut();			return logOut();
	}, [createOlmSessionsWithPeer, identityContext, sendMessageToDevice, logOut]);			}, [identityContext, broadcastEphemeralMessage, logOut]);
	}			}

	const claimUsernameActionTypes = Object.freeze({			const claimUsernameActionTypes = Object.freeze({
	started: 'CLAIM_USERNAME_STARTED',			started: 'CLAIM_USERNAME_STARTED',
	success: 'CLAIM_USERNAME_SUCCESS',			success: 'CLAIM_USERNAME_SUCCESS',
	failed: 'CLAIM_USERNAME_FAILED',			failed: 'CLAIM_USERNAME_FAILED',
	});			});
	const claimUsername =			const claimUsername =
	▲ Show 20 Lines • Show All 1,028 Lines • Show Last 20 Lines