native/themes/colors.js
138–139 ↗	(On Diff #26547)	Do we really need a new family of colors for invite links? Did you try finding any existing families we could use? cc @ted

tomek added inline comments.May 17 2023, 1:46 AM

native/themes/colors.js
138–139 ↗	(On Diff #26547)	For `inviteLinkHeaderColor`, the only other entry with the same color in dark theme is `listSeparatorLabel` - definitely not a good match. For `inviteLinkButtonBackground`, there are a couple other options and there's one which matches both themes `modalSeparator` - but I don't think we should use it. Do you have a suggestion of how we should approach this? For me it seems like spending too much time on such a simple thing as colors isn't effective. We should probably start with creating consistent design, with a couple of predefined color pairs (light and dark) and then update all the components to use them.

ashoat added inline comments.May 17 2023, 6:21 AM

native/themes/colors.js
138–139 ↗	(On Diff #26547)	Do you have a suggestion of how we should approach this? My general feeling is that invite link buttons and headers should not be specific to invite links. We should rely on a consistent design system for things like buttons and headers. I'm pushing back here because this pattern of "every engineer introduces their own button for their screen" leads to an incredibly fractured design system. Can you sync with @ted to figure out if invite link button / headers REALLY need to be distinct? If yes, can we come up with a more generic name for them here that describes what the button / header looks like, and how it can be reused?

Use redux instead of local state. The colors still need to be updated.

tomek edited parent revisions, added: D7877: [lib] Create a store in redux for the invite links; removed: D7728: [lib] Add client side boilerplate for the new endpoint.May 19 2023, 9:47 AM

Harbormaster completed remote builds in B19511: Diff 26676.May 19 2023, 10:05 AM

inka added inline comments.May 23 2023, 4:42 AM

native/invite-links/view-invite-links-screen.react.js
61–63 ↗	(On Diff #26676)	What designs are you using? I see a different message https://www.figma.com/file/a1nkbWgbgjRlrOY9LVurTz/Comm-%2F-Desktop-app?type=design&node-id=12485-235674&t=5pjj80bZzIrM3YOD-4

tomek added inline comments.May 23 2023, 5:19 AM

native/invite-links/view-invite-links-screen.react.js
61–63 ↗	(On Diff #26676)	The state depends on the role of a user. This screen is for regular users https://www.figma.com/file/a1nkbWgbgjRlrOY9LVurTz/Comm-%2F-Desktop-app?type=design&node-id=12485-239352&t=mSlYMlGynVnD8xDZ-0

Looks good, but would love to see an opinion from someone more experienced in @react-navigation (cc. @inka)

This revision is now accepted and ready to land.May 23 2023, 5:23 AM

Update color name

tomek added inline comments.May 23 2023, 5:30 AM

native/themes/colors.js
138–139 ↗	(On Diff #26547)	Talked with @ted and he suggested that: `inviteLinkLinkColor` as a new color should stay `inviteLinkButtonBackground` - we could use instead `panelSecondaryForeground`. Which makes sense from colors point of view, but we should then find a new name as using `foreground` as a `background` is probably worse than introducing a new color. As @ted is off for now, I don't think it makes sense to block this diff on this change.

Harbormaster completed remote builds in B19664: Diff 26872.May 23 2023, 5:45 AM

Looks good

native/invite-links/view-invite-links-screen.react.js
61–63 ↗	(On Diff #26676)	I can't find the code where this is changed based on the permissions

inka accepted this revision.May 23 2023, 6:54 AM

tomek added inline comments.May 23 2023, 7:20 AM

native/invite-links/view-invite-links-screen.react.js
61–63 ↗	(On Diff #26676)	It's a lot later in the stack D7885

As @ted is off for now, I don't think it makes sense to block this diff on this change.

Can you create a DES task and assign it to Ted, to make sure we follow up after he is back?

In D7730#235617, @ashoat wrote:

As @ted is off for now, I don't think it makes sense to block this diff on this change.

Can you create a DES task and assign it to Ted, to make sure we follow up after he is back?

Sure, I've created https://linear.app/comm/issue/DES-90/try-to-use-existing-colors-on-view-invite-links-screen for it.

Closed by commit rCOMMd33be322bf98: [native] Create a modal where invite links are displayed (authored by tomek). · Explain WhyMay 24 2023, 4:23 AM

This revision was automatically updated to reflect the committed changes.

tomek added a commit: rCOMMd33be322bf98: [native] Create a modal where invite links are displayed.

Revision Contents
Changeset List

Path

Size

native/

invite-links/

invite-links-navigator.react.js

83 lines

view-invite-links-header-left-button.react.js

19 lines

view-invite-links-header-title.react.js

25 lines

view-invite-links-screen.react.js

126 lines

navigation/

root-navigator.react.js

7 lines

route-names.js

9 lines

themes/

colors.js

4 lines

Diff 26964

View Options

native/invite-links/invite-links-navigator.react.js

Show All 31 Lines
import { TextInput } from './modal-components.react.js';		import { TextInput } from './modal-components.react.js';
import { setNativeCredentials } from './native-credentials.js';		import { setNativeCredentials } from './native-credentials.js';
import { PanelButton, Panel } from './panel-components.react.js';		import { PanelButton, Panel } from './panel-components.react.js';
import SWMansionIcon from '../components/swmansion-icon.react.js';		import SWMansionIcon from '../components/swmansion-icon.react.js';
import { NavContext } from '../navigation/navigation-context.js';		import { NavContext } from '../navigation/navigation-context.js';
import { useSelector } from '../redux/redux-utils.js';		import { useSelector } from '../redux/redux-utils.js';
import { nativeLogInExtraInfoSelector } from '../selectors/account-selectors.js';		import { nativeLogInExtraInfoSelector } from '../selectors/account-selectors.js';
import type { KeyPressEvent } from '../types/react-native.js';		import type { KeyPressEvent } from '../types/react-native.js';
		import { useInitialNotificationsEncryptedMessage } from '../utils/crypto-utils.js';
import { type StateContainer } from '../utils/state-container.js';		import { type StateContainer } from '../utils/state-container.js';

export type RegisterState = {		export type RegisterState = {
+usernameInputText: string,		+usernameInputText: string,
+passwordInputText: string,		+passwordInputText: string,
+confirmPasswordInputText: string,		+confirmPasswordInputText: string,
};		};
type BaseProps = {		type BaseProps = {
+setActiveAlert: (activeAlert: boolean) => void,		+setActiveAlert: (activeAlert: boolean) => void,
+opacityValue: Animated.Node,		+opacityValue: Animated.Node,
+registerState: StateContainer<RegisterState>,		+registerState: StateContainer<RegisterState>,
};		};
type Props = {		type Props = {
...BaseProps,		...BaseProps,
+loadingStatus: LoadingStatus,		+loadingStatus: LoadingStatus,
+logInExtraInfo: () => Promise<LogInExtraInfo>,		+logInExtraInfo: () => Promise<LogInExtraInfo>,
+dispatchActionPromise: DispatchActionPromise,		+dispatchActionPromise: DispatchActionPromise,
+register: (registerInfo: RegisterInfo) => Promise<RegisterResult>,		+register: (registerInfo: RegisterInfo) => Promise<RegisterResult>,
		+getInitialNotificationsEncryptedMessage: () => Promise<string>,
};		};
type State = {		type State = {
+confirmPasswordFocused: boolean,		+confirmPasswordFocused: boolean,
};		};
class RegisterPanel extends React.PureComponent<Props, State> {		class RegisterPanel extends React.PureComponent<Props, State> {
state: State = {		state: State = {
confirmPasswordFocused: false,		confirmPasswordFocused: false,
};		};
▲ Show 20 Lines • Show All 218 Lines • ▼ Show 20 Lines	) {
'letter or a number, and may contain only letters, numbers, or the ' +		'letter or a number, and may contain only letters, numbers, or the ' +
'characters “-” and “_”',		'characters “-” and “_”',
[{ text: 'OK', onPress: this.onUsernameAlertAcknowledged }],		[{ text: 'OK', onPress: this.onUsernameAlertAcknowledged }],
{ cancelable: false },		{ cancelable: false },
);		);
} else {		} else {
Keyboard.dismiss();		Keyboard.dismiss();
const extraInfo = await this.props.logInExtraInfo();		const extraInfo = await this.props.logInExtraInfo();
		const initialNotificationsEncryptedMessage =
		await this.props.getInitialNotificationsEncryptedMessage();
this.props.dispatchActionPromise(		this.props.dispatchActionPromise(
registerActionTypes,		registerActionTypes,
this.registerAction(extraInfo),		this.registerAction({
		...extraInfo,
		initialNotificationsEncryptedMessage,
		}),
undefined,		undefined,
({ calendarQuery: extraInfo.calendarQuery }: LogInStartingPayload),		({ calendarQuery: extraInfo.calendarQuery }: LogInStartingPayload),
);		);
}		}
};		};

onPasswordAlertAcknowledged = () => {		onPasswordAlertAcknowledged = () => {
this.props.setActiveAlert(false);		this.props.setActiveAlert(false);
▲ Show 20 Lines • Show All 149 Lines • ▼ Show 20 Lines	const logInExtraInfo = useSelector(state =>
nativeLogInExtraInfoSelector({		nativeLogInExtraInfoSelector({
redux: state,		redux: state,
navContext,		navContext,
}),		}),
);		);

const dispatchActionPromise = useDispatchActionPromise();		const dispatchActionPromise = useDispatchActionPromise();
const callRegister = useServerCall(register);		const callRegister = useServerCall(register);
		const getInitialNotificationsEncryptedMessage =
		useInitialNotificationsEncryptedMessage();

return (		return (
<RegisterPanel		<RegisterPanel
{...props}		{...props}
loadingStatus={loadingStatus}		loadingStatus={loadingStatus}
logInExtraInfo={logInExtraInfo}		logInExtraInfo={logInExtraInfo}
dispatchActionPromise={dispatchActionPromise}		dispatchActionPromise={dispatchActionPromise}
register={callRegister}		register={callRegister}
		getInitialNotificationsEncryptedMessage={
		getInitialNotificationsEncryptedMessage
		}
/>		/>
);		);
});		});

export default ConnectedRegisterPanel;		export default ConnectedRegisterPanel;

View Options

native/invite-links/view-invite-links-header-left-button.react.js

Show All 31 Lines
import { TextInput } from './modal-components.react.js';		import { TextInput } from './modal-components.react.js';
import { setNativeCredentials } from './native-credentials.js';		import { setNativeCredentials } from './native-credentials.js';
import { PanelButton, Panel } from './panel-components.react.js';		import { PanelButton, Panel } from './panel-components.react.js';
import SWMansionIcon from '../components/swmansion-icon.react.js';		import SWMansionIcon from '../components/swmansion-icon.react.js';
import { NavContext } from '../navigation/navigation-context.js';		import { NavContext } from '../navigation/navigation-context.js';
import { useSelector } from '../redux/redux-utils.js';		import { useSelector } from '../redux/redux-utils.js';
import { nativeLogInExtraInfoSelector } from '../selectors/account-selectors.js';		import { nativeLogInExtraInfoSelector } from '../selectors/account-selectors.js';
import type { KeyPressEvent } from '../types/react-native.js';		import type { KeyPressEvent } from '../types/react-native.js';
		import { useInitialNotificationsEncryptedMessage } from '../utils/crypto-utils.js';
import { type StateContainer } from '../utils/state-container.js';		import { type StateContainer } from '../utils/state-container.js';

export type RegisterState = {		export type RegisterState = {
+usernameInputText: string,		+usernameInputText: string,
+passwordInputText: string,		+passwordInputText: string,
+confirmPasswordInputText: string,		+confirmPasswordInputText: string,
};		};
type BaseProps = {		type BaseProps = {
+setActiveAlert: (activeAlert: boolean) => void,		+setActiveAlert: (activeAlert: boolean) => void,
+opacityValue: Animated.Node,		+opacityValue: Animated.Node,
+registerState: StateContainer<RegisterState>,		+registerState: StateContainer<RegisterState>,
};		};
type Props = {		type Props = {
...BaseProps,		...BaseProps,
+loadingStatus: LoadingStatus,		+loadingStatus: LoadingStatus,
+logInExtraInfo: () => Promise<LogInExtraInfo>,		+logInExtraInfo: () => Promise<LogInExtraInfo>,
+dispatchActionPromise: DispatchActionPromise,		+dispatchActionPromise: DispatchActionPromise,
+register: (registerInfo: RegisterInfo) => Promise<RegisterResult>,		+register: (registerInfo: RegisterInfo) => Promise<RegisterResult>,
		+getInitialNotificationsEncryptedMessage: () => Promise<string>,
};		};
type State = {		type State = {
+confirmPasswordFocused: boolean,		+confirmPasswordFocused: boolean,
};		};
class RegisterPanel extends React.PureComponent<Props, State> {		class RegisterPanel extends React.PureComponent<Props, State> {
state: State = {		state: State = {
confirmPasswordFocused: false,		confirmPasswordFocused: false,
};		};
▲ Show 20 Lines • Show All 218 Lines • ▼ Show 20 Lines	) {
'letter or a number, and may contain only letters, numbers, or the ' +		'letter or a number, and may contain only letters, numbers, or the ' +
'characters “-” and “_”',		'characters “-” and “_”',
[{ text: 'OK', onPress: this.onUsernameAlertAcknowledged }],		[{ text: 'OK', onPress: this.onUsernameAlertAcknowledged }],
{ cancelable: false },		{ cancelable: false },
);		);
} else {		} else {
Keyboard.dismiss();		Keyboard.dismiss();
const extraInfo = await this.props.logInExtraInfo();		const extraInfo = await this.props.logInExtraInfo();
		const initialNotificationsEncryptedMessage =
		await this.props.getInitialNotificationsEncryptedMessage();
this.props.dispatchActionPromise(		this.props.dispatchActionPromise(
registerActionTypes,		registerActionTypes,
this.registerAction(extraInfo),		this.registerAction({
		...extraInfo,
		initialNotificationsEncryptedMessage,
		}),
undefined,		undefined,
({ calendarQuery: extraInfo.calendarQuery }: LogInStartingPayload),		({ calendarQuery: extraInfo.calendarQuery }: LogInStartingPayload),
);		);
}		}
};		};

onPasswordAlertAcknowledged = () => {		onPasswordAlertAcknowledged = () => {
this.props.setActiveAlert(false);		this.props.setActiveAlert(false);
▲ Show 20 Lines • Show All 149 Lines • ▼ Show 20 Lines	const logInExtraInfo = useSelector(state =>
nativeLogInExtraInfoSelector({		nativeLogInExtraInfoSelector({
redux: state,		redux: state,
navContext,		navContext,
}),		}),
);		);

const dispatchActionPromise = useDispatchActionPromise();		const dispatchActionPromise = useDispatchActionPromise();
const callRegister = useServerCall(register);		const callRegister = useServerCall(register);
		const getInitialNotificationsEncryptedMessage =
		useInitialNotificationsEncryptedMessage();

return (		return (
<RegisterPanel		<RegisterPanel
{...props}		{...props}
loadingStatus={loadingStatus}		loadingStatus={loadingStatus}
logInExtraInfo={logInExtraInfo}		logInExtraInfo={logInExtraInfo}
dispatchActionPromise={dispatchActionPromise}		dispatchActionPromise={dispatchActionPromise}
register={callRegister}		register={callRegister}
		getInitialNotificationsEncryptedMessage={
		getInitialNotificationsEncryptedMessage
		}
/>		/>
);		);
});		});

export default ConnectedRegisterPanel;		export default ConnectedRegisterPanel;

View Options

native/invite-links/view-invite-links-header-title.react.js

Show All 31 Lines
import { TextInput } from './modal-components.react.js';		import { TextInput } from './modal-components.react.js';
import { setNativeCredentials } from './native-credentials.js';		import { setNativeCredentials } from './native-credentials.js';
import { PanelButton, Panel } from './panel-components.react.js';		import { PanelButton, Panel } from './panel-components.react.js';
import SWMansionIcon from '../components/swmansion-icon.react.js';		import SWMansionIcon from '../components/swmansion-icon.react.js';
import { NavContext } from '../navigation/navigation-context.js';		import { NavContext } from '../navigation/navigation-context.js';
import { useSelector } from '../redux/redux-utils.js';		import { useSelector } from '../redux/redux-utils.js';
import { nativeLogInExtraInfoSelector } from '../selectors/account-selectors.js';		import { nativeLogInExtraInfoSelector } from '../selectors/account-selectors.js';
import type { KeyPressEvent } from '../types/react-native.js';		import type { KeyPressEvent } from '../types/react-native.js';
		import { useInitialNotificationsEncryptedMessage } from '../utils/crypto-utils.js';
import { type StateContainer } from '../utils/state-container.js';		import { type StateContainer } from '../utils/state-container.js';

export type RegisterState = {		export type RegisterState = {
+usernameInputText: string,		+usernameInputText: string,
+passwordInputText: string,		+passwordInputText: string,
+confirmPasswordInputText: string,		+confirmPasswordInputText: string,
};		};
type BaseProps = {		type BaseProps = {
+setActiveAlert: (activeAlert: boolean) => void,		+setActiveAlert: (activeAlert: boolean) => void,
+opacityValue: Animated.Node,		+opacityValue: Animated.Node,
+registerState: StateContainer<RegisterState>,		+registerState: StateContainer<RegisterState>,
};		};
type Props = {		type Props = {
...BaseProps,		...BaseProps,
+loadingStatus: LoadingStatus,		+loadingStatus: LoadingStatus,
+logInExtraInfo: () => Promise<LogInExtraInfo>,		+logInExtraInfo: () => Promise<LogInExtraInfo>,
+dispatchActionPromise: DispatchActionPromise,		+dispatchActionPromise: DispatchActionPromise,
+register: (registerInfo: RegisterInfo) => Promise<RegisterResult>,		+register: (registerInfo: RegisterInfo) => Promise<RegisterResult>,
		+getInitialNotificationsEncryptedMessage: () => Promise<string>,
};		};
type State = {		type State = {
+confirmPasswordFocused: boolean,		+confirmPasswordFocused: boolean,
};		};
class RegisterPanel extends React.PureComponent<Props, State> {		class RegisterPanel extends React.PureComponent<Props, State> {
state: State = {		state: State = {
confirmPasswordFocused: false,		confirmPasswordFocused: false,
};		};
▲ Show 20 Lines • Show All 218 Lines • ▼ Show 20 Lines	) {
'letter or a number, and may contain only letters, numbers, or the ' +		'letter or a number, and may contain only letters, numbers, or the ' +
'characters “-” and “_”',		'characters “-” and “_”',
[{ text: 'OK', onPress: this.onUsernameAlertAcknowledged }],		[{ text: 'OK', onPress: this.onUsernameAlertAcknowledged }],
{ cancelable: false },		{ cancelable: false },
);		);
} else {		} else {
Keyboard.dismiss();		Keyboard.dismiss();
const extraInfo = await this.props.logInExtraInfo();		const extraInfo = await this.props.logInExtraInfo();
		const initialNotificationsEncryptedMessage =
		await this.props.getInitialNotificationsEncryptedMessage();
this.props.dispatchActionPromise(		this.props.dispatchActionPromise(
registerActionTypes,		registerActionTypes,
this.registerAction(extraInfo),		this.registerAction({
		...extraInfo,
		initialNotificationsEncryptedMessage,
		}),
undefined,		undefined,
({ calendarQuery: extraInfo.calendarQuery }: LogInStartingPayload),		({ calendarQuery: extraInfo.calendarQuery }: LogInStartingPayload),
);		);
}		}
};		};

onPasswordAlertAcknowledged = () => {		onPasswordAlertAcknowledged = () => {
this.props.setActiveAlert(false);		this.props.setActiveAlert(false);
▲ Show 20 Lines • Show All 149 Lines • ▼ Show 20 Lines	const logInExtraInfo = useSelector(state =>
nativeLogInExtraInfoSelector({		nativeLogInExtraInfoSelector({
redux: state,		redux: state,
navContext,		navContext,
}),		}),
);		);

const dispatchActionPromise = useDispatchActionPromise();		const dispatchActionPromise = useDispatchActionPromise();
const callRegister = useServerCall(register);		const callRegister = useServerCall(register);
		const getInitialNotificationsEncryptedMessage =
		useInitialNotificationsEncryptedMessage();

return (		return (
<RegisterPanel		<RegisterPanel
{...props}		{...props}
loadingStatus={loadingStatus}		loadingStatus={loadingStatus}
logInExtraInfo={logInExtraInfo}		logInExtraInfo={logInExtraInfo}
dispatchActionPromise={dispatchActionPromise}		dispatchActionPromise={dispatchActionPromise}
register={callRegister}		register={callRegister}
		getInitialNotificationsEncryptedMessage={
		getInitialNotificationsEncryptedMessage
		}
/>		/>
);		);
});		});

export default ConnectedRegisterPanel;		export default ConnectedRegisterPanel;

View Options

native/invite-links/view-invite-links-screen.react.js

Show All 31 Lines
import { TextInput } from './modal-components.react.js';		import { TextInput } from './modal-components.react.js';
import { setNativeCredentials } from './native-credentials.js';		import { setNativeCredentials } from './native-credentials.js';
import { PanelButton, Panel } from './panel-components.react.js';		import { PanelButton, Panel } from './panel-components.react.js';
import SWMansionIcon from '../components/swmansion-icon.react.js';		import SWMansionIcon from '../components/swmansion-icon.react.js';
import { NavContext } from '../navigation/navigation-context.js';		import { NavContext } from '../navigation/navigation-context.js';
import { useSelector } from '../redux/redux-utils.js';		import { useSelector } from '../redux/redux-utils.js';
import { nativeLogInExtraInfoSelector } from '../selectors/account-selectors.js';		import { nativeLogInExtraInfoSelector } from '../selectors/account-selectors.js';
import type { KeyPressEvent } from '../types/react-native.js';		import type { KeyPressEvent } from '../types/react-native.js';
		import { useInitialNotificationsEncryptedMessage } from '../utils/crypto-utils.js';
import { type StateContainer } from '../utils/state-container.js';		import { type StateContainer } from '../utils/state-container.js';

export type RegisterState = {		export type RegisterState = {
+usernameInputText: string,		+usernameInputText: string,
+passwordInputText: string,		+passwordInputText: string,
+confirmPasswordInputText: string,		+confirmPasswordInputText: string,
};		};
type BaseProps = {		type BaseProps = {
+setActiveAlert: (activeAlert: boolean) => void,		+setActiveAlert: (activeAlert: boolean) => void,
+opacityValue: Animated.Node,		+opacityValue: Animated.Node,
+registerState: StateContainer<RegisterState>,		+registerState: StateContainer<RegisterState>,
};		};
type Props = {		type Props = {
...BaseProps,		...BaseProps,
+loadingStatus: LoadingStatus,		+loadingStatus: LoadingStatus,
+logInExtraInfo: () => Promise<LogInExtraInfo>,		+logInExtraInfo: () => Promise<LogInExtraInfo>,
+dispatchActionPromise: DispatchActionPromise,		+dispatchActionPromise: DispatchActionPromise,
+register: (registerInfo: RegisterInfo) => Promise<RegisterResult>,		+register: (registerInfo: RegisterInfo) => Promise<RegisterResult>,
		+getInitialNotificationsEncryptedMessage: () => Promise<string>,
};		};
type State = {		type State = {
+confirmPasswordFocused: boolean,		+confirmPasswordFocused: boolean,
};		};
class RegisterPanel extends React.PureComponent<Props, State> {		class RegisterPanel extends React.PureComponent<Props, State> {
state: State = {		state: State = {
confirmPasswordFocused: false,		confirmPasswordFocused: false,
};		};
▲ Show 20 Lines • Show All 218 Lines • ▼ Show 20 Lines	) {
'letter or a number, and may contain only letters, numbers, or the ' +		'letter or a number, and may contain only letters, numbers, or the ' +
'characters “-” and “_”',		'characters “-” and “_”',
[{ text: 'OK', onPress: this.onUsernameAlertAcknowledged }],		[{ text: 'OK', onPress: this.onUsernameAlertAcknowledged }],
{ cancelable: false },		{ cancelable: false },
);		);
} else {		} else {
Keyboard.dismiss();		Keyboard.dismiss();
const extraInfo = await this.props.logInExtraInfo();		const extraInfo = await this.props.logInExtraInfo();
		const initialNotificationsEncryptedMessage =
		await this.props.getInitialNotificationsEncryptedMessage();
this.props.dispatchActionPromise(		this.props.dispatchActionPromise(
registerActionTypes,		registerActionTypes,
this.registerAction(extraInfo),		this.registerAction({
		...extraInfo,
		initialNotificationsEncryptedMessage,
		}),
undefined,		undefined,
({ calendarQuery: extraInfo.calendarQuery }: LogInStartingPayload),		({ calendarQuery: extraInfo.calendarQuery }: LogInStartingPayload),
);		);
}		}
};		};

onPasswordAlertAcknowledged = () => {		onPasswordAlertAcknowledged = () => {
this.props.setActiveAlert(false);		this.props.setActiveAlert(false);
▲ Show 20 Lines • Show All 149 Lines • ▼ Show 20 Lines	const logInExtraInfo = useSelector(state =>
nativeLogInExtraInfoSelector({		nativeLogInExtraInfoSelector({
redux: state,		redux: state,
navContext,		navContext,
}),		}),
);		);

const dispatchActionPromise = useDispatchActionPromise();		const dispatchActionPromise = useDispatchActionPromise();
const callRegister = useServerCall(register);		const callRegister = useServerCall(register);
		const getInitialNotificationsEncryptedMessage =
		useInitialNotificationsEncryptedMessage();

return (		return (
<RegisterPanel		<RegisterPanel
{...props}		{...props}
loadingStatus={loadingStatus}		loadingStatus={loadingStatus}
logInExtraInfo={logInExtraInfo}		logInExtraInfo={logInExtraInfo}
dispatchActionPromise={dispatchActionPromise}		dispatchActionPromise={dispatchActionPromise}
register={callRegister}		register={callRegister}
		getInitialNotificationsEncryptedMessage={
		getInitialNotificationsEncryptedMessage
		}
/>		/>
);		);
});		});

export default ConnectedRegisterPanel;		export default ConnectedRegisterPanel;