diff --git a/native/account/fullscreen-siwe-panel.react.js b/native/account/fullscreen-siwe-panel.react.js
index c5f3506f2..87b588bef 100644
--- a/native/account/fullscreen-siwe-panel.react.js
+++ b/native/account/fullscreen-siwe-panel.react.js
@@ -1,80 +1,81 @@
// @flow
import * as React from 'react';
-import { Alert, ActivityIndicator, View } from 'react-native';
+import { ActivityIndicator, View } from 'react-native';
import { useDispatch } from 'react-redux';
import { setDataLoadedActionType } from 'lib/actions/client-db-store-actions.js';
import type { SIWEResult } from 'lib/types/siwe-types.js';
import { useSIWEServerCall } from './siwe-hooks.js';
import SIWEPanel from './siwe-panel.react.js';
+import Alert from '../utils/alert.js';
type Props = {
+goBackToPrompt: () => mixed,
+closing: boolean,
};
function FullscreenSIWEPanel(props: Props): React.Node {
const [loading, setLoading] = React.useState(true);
const activity = loading ? : null;
const activityContainer = React.useMemo(
() => ({
flex: 1,
}),
[],
);
const { goBackToPrompt } = props;
const siweServerCallParams = React.useMemo(() => {
const onServerCallFailure = () => {
Alert.alert(
'Unknown error',
'Uhh... try again?',
[{ text: 'OK', onPress: goBackToPrompt }],
{ cancelable: false },
);
};
return { onFailure: onServerCallFailure };
}, [goBackToPrompt]);
const siweServerCall = useSIWEServerCall(siweServerCallParams);
const successRef = React.useRef(false);
const dispatch = useDispatch();
const onSuccess = React.useCallback(
async (result: SIWEResult) => {
successRef.current = true;
await siweServerCall(result);
dispatch({
type: setDataLoadedActionType,
payload: {
dataLoaded: true,
},
});
},
[siweServerCall, dispatch],
);
const ifBeforeSuccessGoBackToPrompt = React.useCallback(() => {
if (!successRef.current) {
goBackToPrompt();
}
}, [goBackToPrompt]);
const { closing } = props;
return (
<>
{activity}
);
}
export default FullscreenSIWEPanel;
diff --git a/native/account/log-in-panel.react.js b/native/account/log-in-panel.react.js
index dabb2500d..9cdd0ab42 100644
--- a/native/account/log-in-panel.react.js
+++ b/native/account/log-in-panel.react.js
@@ -1,389 +1,390 @@
// @flow
import invariant from 'invariant';
import * as React from 'react';
-import { View, StyleSheet, Alert, Keyboard, Platform } from 'react-native';
+import { View, StyleSheet, Keyboard, Platform } from 'react-native';
import Animated from 'react-native-reanimated';
import { logInActionTypes, logIn } from 'lib/actions/user-actions.js';
import { createLoadingStatusSelector } from 'lib/selectors/loading-selectors.js';
import {
validEmailRegex,
oldValidUsernameRegex,
} from 'lib/shared/account-utils.js';
import {
type LogInInfo,
type LogInExtraInfo,
type LogInResult,
type LogInStartingPayload,
logInActionSources,
} from 'lib/types/account-types.js';
import type { LoadingStatus } from 'lib/types/loading-types.js';
import {
useServerCall,
useDispatchActionPromise,
type DispatchActionPromise,
} from 'lib/utils/action-utils.js';
import { TextInput } from './modal-components.react.js';
import {
fetchNativeCredentials,
setNativeCredentials,
} from './native-credentials.js';
import { PanelButton, Panel } from './panel-components.react.js';
import PasswordInput from './password-input.react.js';
import SWMansionIcon from '../components/swmansion-icon.react.js';
import { NavContext } from '../navigation/navigation-context.js';
import { useSelector } from '../redux/redux-utils.js';
import { nativeLogInExtraInfoSelector } from '../selectors/account-selectors.js';
import type { KeyPressEvent } from '../types/react-native.js';
+import Alert from '../utils/alert.js';
import { useInitialNotificationsEncryptedMessage } from '../utils/crypto-utils.js';
import type { StateContainer } from '../utils/state-container.js';
export type LogInState = {
+usernameInputText: ?string,
+passwordInputText: ?string,
};
type BaseProps = {
+setActiveAlert: (activeAlert: boolean) => void,
+opacityValue: Animated.Node,
+logInState: StateContainer,
};
type Props = {
...BaseProps,
+loadingStatus: LoadingStatus,
+logInExtraInfo: () => Promise,
+dispatchActionPromise: DispatchActionPromise,
+logIn: (logInInfo: LogInInfo) => Promise,
+getInitialNotificationsEncryptedMessage: () => Promise,
};
class LogInPanel extends React.PureComponent {
usernameInput: ?TextInput;
passwordInput: ?PasswordInput;
componentDidMount() {
this.attemptToFetchCredentials();
}
get usernameInputText(): string {
return this.props.logInState.state.usernameInputText || '';
}
get passwordInputText(): string {
return this.props.logInState.state.passwordInputText || '';
}
async attemptToFetchCredentials() {
if (
this.props.logInState.state.usernameInputText !== null &&
this.props.logInState.state.usernameInputText !== undefined
) {
return;
}
const credentials = await fetchNativeCredentials();
if (!credentials) {
return;
}
if (
this.props.logInState.state.usernameInputText !== null &&
this.props.logInState.state.usernameInputText !== undefined
) {
return;
}
this.props.logInState.setState({
usernameInputText: credentials.username,
passwordInputText: credentials.password,
});
}
render(): React.Node {
return (
);
}
usernameInputRef: (usernameInput: ?TextInput) => void = usernameInput => {
this.usernameInput = usernameInput;
if (Platform.OS === 'ios' && usernameInput) {
setTimeout(() => usernameInput.focus());
}
};
focusUsernameInput: () => void = () => {
invariant(this.usernameInput, 'ref should be set');
this.usernameInput.focus();
};
passwordInputRef: (passwordInput: ?PasswordInput) => void = passwordInput => {
this.passwordInput = passwordInput;
};
focusPasswordInput: () => void = () => {
invariant(this.passwordInput, 'ref should be set');
this.passwordInput.focus();
};
onChangeUsernameInputText: (text: string) => void = text => {
this.props.logInState.setState({ usernameInputText: text.trim() });
};
onUsernameKeyPress: (event: KeyPressEvent) => void = event => {
const { key } = event.nativeEvent;
if (
key.length > 1 &&
key !== 'Backspace' &&
key !== 'Enter' &&
this.passwordInputText.length === 0
) {
this.focusPasswordInput();
}
};
onChangePasswordInputText: (text: string) => void = text => {
this.props.logInState.setState({ passwordInputText: text });
};
onSubmit: () => Promise = async () => {
this.props.setActiveAlert(true);
if (this.usernameInputText.search(validEmailRegex) > -1) {
Alert.alert(
'Can’t log in with email',
'You need to log in with your username now',
[{ text: 'OK', onPress: this.onUsernameAlertAcknowledged }],
{ cancelable: false },
);
return;
} else if (this.usernameInputText.search(oldValidUsernameRegex) === -1) {
Alert.alert(
'Invalid username',
'Alphanumeric usernames only',
[{ text: 'OK', onPress: this.onUsernameAlertAcknowledged }],
{ cancelable: false },
);
return;
} else if (this.passwordInputText === '') {
Alert.alert(
'Empty password',
'Password cannot be empty',
[{ text: 'OK', onPress: this.onPasswordAlertAcknowledged }],
{ cancelable: false },
);
return;
}
Keyboard.dismiss();
const extraInfo = await this.props.logInExtraInfo();
const initialNotificationsEncryptedMessage =
await this.props.getInitialNotificationsEncryptedMessage();
this.props.dispatchActionPromise(
logInActionTypes,
this.logInAction({ ...extraInfo, initialNotificationsEncryptedMessage }),
undefined,
({ calendarQuery: extraInfo.calendarQuery }: LogInStartingPayload),
);
};
async logInAction(extraInfo: LogInExtraInfo): Promise {
try {
const result = await this.props.logIn({
...extraInfo,
username: this.usernameInputText,
password: this.passwordInputText,
logInActionSource: logInActionSources.logInFromNativeForm,
});
this.props.setActiveAlert(false);
await setNativeCredentials({
username: result.currentUserInfo.username,
password: this.passwordInputText,
});
return result;
} catch (e) {
if (e.message === 'invalid_credentials') {
Alert.alert(
'Incorrect username or password',
"Either that user doesn't exist, or the password is incorrect",
[{ text: 'OK', onPress: this.onUnsuccessfulLoginAlertAckowledged }],
{ cancelable: false },
);
} else if (e.message === 'client_version_unsupported') {
const app = Platform.select({
ios: 'App Store',
android: 'Play Store',
});
Alert.alert(
'App out of date',
'Your app version is pretty old, and the server doesn’t know how ' +
`to speak to it anymore. Please use the ${app} app to update!`,
[{ text: 'OK', onPress: this.onAppOutOfDateAlertAcknowledged }],
{ cancelable: false },
);
} else {
Alert.alert(
'Unknown error',
'Uhh... try again?',
[{ text: 'OK', onPress: this.onUnknownErrorAlertAcknowledged }],
{ cancelable: false },
);
}
throw e;
}
}
onUnsuccessfulLoginAlertAckowledged: () => void = () => {
this.props.setActiveAlert(false);
this.props.logInState.setState(
{
usernameInputText: '',
passwordInputText: '',
},
this.focusUsernameInput,
);
};
onUsernameAlertAcknowledged: () => void = () => {
this.props.setActiveAlert(false);
this.props.logInState.setState(
{
usernameInputText: '',
},
this.focusUsernameInput,
);
};
onPasswordAlertAcknowledged: () => void = () => {
this.props.setActiveAlert(false);
this.props.logInState.setState(
{
passwordInputText: '',
},
this.focusPasswordInput,
);
};
onUnknownErrorAlertAcknowledged: () => void = () => {
this.props.setActiveAlert(false);
this.props.logInState.setState(
{
usernameInputText: '',
passwordInputText: '',
},
this.focusUsernameInput,
);
};
onAppOutOfDateAlertAcknowledged: () => void = () => {
this.props.setActiveAlert(false);
};
}
export type InnerLogInPanel = LogInPanel;
const styles = StyleSheet.create({
footer: {
flexDirection: 'row',
justifyContent: 'flex-end',
},
icon: {
bottom: 10,
left: 4,
position: 'absolute',
},
input: {
paddingLeft: 35,
},
row: {
marginHorizontal: 24,
},
});
const loadingStatusSelector = createLoadingStatusSelector(logInActionTypes);
const ConnectedLogInPanel: React.ComponentType =
React.memo(function ConnectedLogInPanel(props: BaseProps) {
const loadingStatus = useSelector(loadingStatusSelector);
const navContext = React.useContext(NavContext);
const logInExtraInfo = useSelector(state =>
nativeLogInExtraInfoSelector({
redux: state,
navContext,
}),
);
const dispatchActionPromise = useDispatchActionPromise();
const callLogIn = useServerCall(logIn);
const getInitialNotificationsEncryptedMessage =
useInitialNotificationsEncryptedMessage();
return (
);
});
export default ConnectedLogInPanel;
diff --git a/native/account/register-panel.react.js b/native/account/register-panel.react.js
index c92e6830a..afe17bdd2 100644
--- a/native/account/register-panel.react.js
+++ b/native/account/register-panel.react.js
@@ -1,496 +1,496 @@
// @flow
import invariant from 'invariant';
import * as React from 'react';
import {
Text,
View,
StyleSheet,
Platform,
Keyboard,
- Alert,
Linking,
} from 'react-native';
import Animated from 'react-native-reanimated';
import { useDispatch } from 'react-redux';
import { setDataLoadedActionType } from 'lib/actions/client-db-store-actions.js';
import { registerActionTypes, register } from 'lib/actions/user-actions.js';
import { createLoadingStatusSelector } from 'lib/selectors/loading-selectors.js';
import { validUsernameRegex } from 'lib/shared/account-utils.js';
import type {
RegisterInfo,
LogInExtraInfo,
RegisterResult,
LogInStartingPayload,
} from 'lib/types/account-types.js';
import type { LoadingStatus } from 'lib/types/loading-types.js';
import type { Dispatch } from 'lib/types/redux-types.js';
import {
useServerCall,
useDispatchActionPromise,
type DispatchActionPromise,
} from 'lib/utils/action-utils.js';
import { TextInput } from './modal-components.react.js';
import { setNativeCredentials } from './native-credentials.js';
import { PanelButton, Panel } from './panel-components.react.js';
import SWMansionIcon from '../components/swmansion-icon.react.js';
import { NavContext } from '../navigation/navigation-context.js';
import { useSelector } from '../redux/redux-utils.js';
import { nativeLogInExtraInfoSelector } from '../selectors/account-selectors.js';
import type { KeyPressEvent } from '../types/react-native.js';
+import Alert from '../utils/alert.js';
import { useInitialNotificationsEncryptedMessage } from '../utils/crypto-utils.js';
import { type StateContainer } from '../utils/state-container.js';
export type RegisterState = {
+usernameInputText: string,
+passwordInputText: string,
+confirmPasswordInputText: string,
};
type BaseProps = {
+setActiveAlert: (activeAlert: boolean) => void,
+opacityValue: Animated.Node,
+registerState: StateContainer,
};
type Props = {
...BaseProps,
+loadingStatus: LoadingStatus,
+logInExtraInfo: () => Promise,
+dispatch: Dispatch,
+dispatchActionPromise: DispatchActionPromise,
+register: (registerInfo: RegisterInfo) => Promise,
+getInitialNotificationsEncryptedMessage: () => Promise,
};
type State = {
+confirmPasswordFocused: boolean,
};
class RegisterPanel extends React.PureComponent {
state: State = {
confirmPasswordFocused: false,
};
usernameInput: ?TextInput;
passwordInput: ?TextInput;
confirmPasswordInput: ?TextInput;
passwordBeingAutoFilled = false;
render() {
let confirmPasswordTextInputExtraProps;
if (
Platform.OS !== 'ios' ||
this.state.confirmPasswordFocused ||
this.props.registerState.state.confirmPasswordInputText.length > 0
) {
confirmPasswordTextInputExtraProps = {
secureTextEntry: true,
textContentType: 'password',
};
}
let onPasswordKeyPress;
if (Platform.OS === 'ios') {
onPasswordKeyPress = this.onPasswordKeyPress;
}
/* eslint-disable react-native/no-raw-text */
const privatePolicyNotice = (
By signing up, you agree to our{' '}
Terms
{' & '}
Privacy Policy
.
);
/* eslint-enable react-native/no-raw-text */
return (
{privatePolicyNotice}
);
}
usernameInputRef = (usernameInput: ?TextInput) => {
this.usernameInput = usernameInput;
};
passwordInputRef = (passwordInput: ?TextInput) => {
this.passwordInput = passwordInput;
};
confirmPasswordInputRef = (confirmPasswordInput: ?TextInput) => {
this.confirmPasswordInput = confirmPasswordInput;
};
focusUsernameInput = () => {
invariant(this.usernameInput, 'ref should be set');
this.usernameInput.focus();
};
focusPasswordInput = () => {
invariant(this.passwordInput, 'ref should be set');
this.passwordInput.focus();
};
focusConfirmPasswordInput = () => {
invariant(this.confirmPasswordInput, 'ref should be set');
this.confirmPasswordInput.focus();
};
onTermsOfUsePressed = () => {
Linking.openURL('https://comm.app/terms');
};
onPrivacyPolicyPressed = () => {
Linking.openURL('https://comm.app/privacy');
};
onChangeUsernameInputText = (text: string) => {
this.props.registerState.setState({ usernameInputText: text });
};
onChangePasswordInputText = (text: string) => {
const stateUpdate = {};
stateUpdate.passwordInputText = text;
if (this.passwordBeingAutoFilled) {
this.passwordBeingAutoFilled = false;
stateUpdate.confirmPasswordInputText = text;
}
this.props.registerState.setState(stateUpdate);
};
onPasswordKeyPress = (event: KeyPressEvent) => {
const { key } = event.nativeEvent;
if (
key.length > 1 &&
key !== 'Backspace' &&
key !== 'Enter' &&
this.props.registerState.state.confirmPasswordInputText.length === 0
) {
this.passwordBeingAutoFilled = true;
}
};
onChangeConfirmPasswordInputText = (text: string) => {
this.props.registerState.setState({ confirmPasswordInputText: text });
};
onConfirmPasswordFocus = () => {
this.setState({ confirmPasswordFocused: true });
};
onSubmit = async () => {
this.props.setActiveAlert(true);
if (this.props.registerState.state.passwordInputText === '') {
Alert.alert(
'Empty password',
'Password cannot be empty',
[{ text: 'OK', onPress: this.onPasswordAlertAcknowledged }],
{ cancelable: false },
);
} else if (
this.props.registerState.state.passwordInputText !==
this.props.registerState.state.confirmPasswordInputText
) {
Alert.alert(
'Passwords don’t match',
'Password fields must contain the same password',
[{ text: 'OK', onPress: this.onPasswordAlertAcknowledged }],
{ cancelable: false },
);
} else if (
this.props.registerState.state.usernameInputText.search(
validUsernameRegex,
) === -1
) {
Alert.alert(
'Invalid username',
'Usernames must be at least six characters long, start with either a ' +
'letter or a number, and may contain only letters, numbers, or the ' +
'characters “-” and “_”',
[{ text: 'OK', onPress: this.onUsernameAlertAcknowledged }],
{ cancelable: false },
);
} else {
Keyboard.dismiss();
const extraInfo = await this.props.logInExtraInfo();
const initialNotificationsEncryptedMessage =
await this.props.getInitialNotificationsEncryptedMessage();
this.props.dispatchActionPromise(
registerActionTypes,
this.registerAction({
...extraInfo,
initialNotificationsEncryptedMessage,
}),
undefined,
({ calendarQuery: extraInfo.calendarQuery }: LogInStartingPayload),
);
}
};
onPasswordAlertAcknowledged = () => {
this.props.setActiveAlert(false);
this.props.registerState.setState(
{
passwordInputText: '',
confirmPasswordInputText: '',
},
() => {
invariant(this.passwordInput, 'ref should exist');
this.passwordInput.focus();
},
);
};
onUsernameAlertAcknowledged = () => {
this.props.setActiveAlert(false);
this.props.registerState.setState(
{
usernameInputText: '',
},
() => {
invariant(this.usernameInput, 'ref should exist');
this.usernameInput.focus();
},
);
};
async registerAction(extraInfo: LogInExtraInfo) {
try {
const result = await this.props.register({
...extraInfo,
username: this.props.registerState.state.usernameInputText,
password: this.props.registerState.state.passwordInputText,
});
this.props.setActiveAlert(false);
this.props.dispatch({
type: setDataLoadedActionType,
payload: {
dataLoaded: true,
},
});
await setNativeCredentials({
username: result.currentUserInfo.username,
password: this.props.registerState.state.passwordInputText,
});
return result;
} catch (e) {
if (e.message === 'username_reserved') {
Alert.alert(
'Username reserved',
'This username is currently reserved. Please contact support@' +
'comm.app if you would like to claim this account.',
[{ text: 'OK', onPress: this.onUsernameAlertAcknowledged }],
{ cancelable: false },
);
} else if (e.message === 'username_taken') {
Alert.alert(
'Username taken',
'An account with that username already exists',
[{ text: 'OK', onPress: this.onUsernameAlertAcknowledged }],
{ cancelable: false },
);
} else if (e.message === 'client_version_unsupported') {
const app = Platform.select({
ios: 'App Store',
android: 'Play Store',
});
Alert.alert(
'App out of date',
'Your app version is pretty old, and the server doesn’t know how ' +
`to speak to it anymore. Please use the ${app} app to update!`,
[{ text: 'OK', onPress: this.onAppOutOfDateAlertAcknowledged }],
{ cancelable: false },
);
} else {
Alert.alert(
'Unknown error',
'Uhh... try again?',
[{ text: 'OK', onPress: this.onUnknownErrorAlertAcknowledged }],
{ cancelable: false },
);
}
throw e;
}
}
onUnknownErrorAlertAcknowledged = () => {
this.props.setActiveAlert(false);
this.props.registerState.setState(
{
usernameInputText: '',
passwordInputText: '',
confirmPasswordInputText: '',
},
() => {
invariant(this.usernameInput, 'ref should exist');
this.usernameInput.focus();
},
);
};
onAppOutOfDateAlertAcknowledged = () => {
this.props.setActiveAlert(false);
};
}
const styles = StyleSheet.create({
container: {
zIndex: 2,
},
footer: {
alignItems: 'stretch',
flexDirection: 'row',
flexShrink: 1,
justifyContent: 'space-between',
paddingLeft: 24,
},
hyperlinkText: {
color: '#036AFF',
fontWeight: 'bold',
},
icon: {
bottom: 10,
left: 4,
position: 'absolute',
},
input: {
paddingLeft: 35,
},
notice: {
alignSelf: 'center',
display: 'flex',
flexShrink: 1,
maxWidth: 190,
paddingBottom: 18,
paddingRight: 8,
paddingTop: 12,
},
noticeText: {
color: '#444',
fontSize: 13,
lineHeight: 20,
textAlign: 'center',
},
row: {
marginHorizontal: 24,
},
});
const loadingStatusSelector = createLoadingStatusSelector(registerActionTypes);
const ConnectedRegisterPanel: React.ComponentType =
React.memo(function ConnectedRegisterPanel(props: BaseProps) {
const loadingStatus = useSelector(loadingStatusSelector);
const navContext = React.useContext(NavContext);
const logInExtraInfo = useSelector(state =>
nativeLogInExtraInfoSelector({
redux: state,
navContext,
}),
);
const dispatch = useDispatch();
const dispatchActionPromise = useDispatchActionPromise();
const callRegister = useServerCall(register);
const getInitialNotificationsEncryptedMessage =
useInitialNotificationsEncryptedMessage();
return (
);
});
export default ConnectedRegisterPanel;
diff --git a/native/account/registration/existing-ethereum-account.react.js b/native/account/registration/existing-ethereum-account.react.js
index 76327417f..6bdd917f2 100644
--- a/native/account/registration/existing-ethereum-account.react.js
+++ b/native/account/registration/existing-ethereum-account.react.js
@@ -1,139 +1,140 @@
// @flow
import * as React from 'react';
-import { Text, View, Alert } from 'react-native';
+import { Text, View } from 'react-native';
import { useDispatch } from 'react-redux';
import { setDataLoadedActionType } from 'lib/actions/client-db-store-actions.js';
import { siweAuthActionTypes } from 'lib/actions/siwe-actions.js';
import { useENSName } from 'lib/hooks/ens-cache.js';
import { createLoadingStatusSelector } from 'lib/selectors/loading-selectors.js';
import type { SIWEResult } from 'lib/types/siwe-types.js';
import RegistrationButtonContainer from './registration-button-container.react.js';
import RegistrationButton from './registration-button.react.js';
import RegistrationContainer from './registration-container.react.js';
import RegistrationContentContainer from './registration-content-container.react.js';
import type { RegistrationNavigationProp } from './registration-navigator.react.js';
import type { NavigationRoute } from '../../navigation/route-names.js';
import { useSelector } from '../../redux/redux-utils.js';
import { useStyles } from '../../themes/colors.js';
+import Alert from '../../utils/alert.js';
import { useSIWEServerCall } from '../siwe-hooks.js';
const siweAuthLoadingStatusSelector =
createLoadingStatusSelector(siweAuthActionTypes);
export type ExistingEthereumAccountParams = SIWEResult;
type Props = {
+navigation: RegistrationNavigationProp<'ExistingEthereumAccount'>,
+route: NavigationRoute<'ExistingEthereumAccount'>,
};
function ExistingEthereumAccount(props: Props): React.Node {
const siweServerCallParams = React.useMemo(() => {
const onServerCallFailure = () => {
Alert.alert('Unknown error', 'Uhh... try again?', [{ text: 'OK' }], {
cancelable: false,
});
};
return { onFailure: onServerCallFailure };
}, []);
const siweServerCall = useSIWEServerCall(siweServerCallParams);
const { params } = props.route;
const dispatch = useDispatch();
const onProceedToLogIn = React.useCallback(async () => {
await siweServerCall(params);
dispatch({
type: setDataLoadedActionType,
payload: {
dataLoaded: true,
},
});
}, [siweServerCall, params, dispatch]);
const siweAuthCallLoading = useSelector(
state => siweAuthLoadingStatusSelector(state) === 'loading',
);
const { address } = params;
const walletIdentifier = useENSName(address);
const walletIdentifierTitle =
walletIdentifier === address ? 'Ethereum wallet' : 'ENS name';
const { goBack } = props.navigation;
const styles = useStyles(unboundStyles);
return (
Account already exists for wallet
You can proceed to log in with this wallet, or go back and use a
different wallet.
{walletIdentifierTitle}
{walletIdentifier}
);
}
const unboundStyles = {
header: {
fontSize: 24,
color: 'panelForegroundLabel',
paddingBottom: 16,
},
body: {
fontFamily: 'Arial',
fontSize: 15,
lineHeight: 20,
color: 'panelForegroundSecondaryLabel',
paddingBottom: 40,
},
walletTile: {
backgroundColor: 'panelForeground',
borderRadius: 8,
padding: 24,
alignItems: 'center',
},
walletIdentifierTitleText: {
fontSize: 17,
color: 'panelForegroundLabel',
textAlign: 'center',
},
walletIdentifier: {
backgroundColor: 'panelSecondaryForeground',
paddingVertical: 8,
paddingHorizontal: 24,
borderRadius: 56,
marginTop: 8,
alignItems: 'center',
},
walletIdentifierText: {
fontSize: 15,
color: 'panelForegroundLabel',
},
};
export default ExistingEthereumAccount;
diff --git a/native/account/registration/registration-server-call.js b/native/account/registration/registration-server-call.js
index f373e84e1..ce8b4c053 100644
--- a/native/account/registration/registration-server-call.js
+++ b/native/account/registration/registration-server-call.js
@@ -1,234 +1,235 @@
// @flow
import * as React from 'react';
-import { Alert, Platform } from 'react-native';
+import { Platform } from 'react-native';
import { useDispatch } from 'react-redux';
import { setDataLoadedActionType } from 'lib/actions/client-db-store-actions.js';
import { registerActionTypes, register } from 'lib/actions/user-actions.js';
import type { LogInStartingPayload } from 'lib/types/account-types.js';
import {
useServerCall,
useDispatchActionPromise,
} from 'lib/utils/action-utils.js';
import { setURLPrefix } from 'lib/utils/url-utils.js';
import type {
RegistrationServerCallInput,
UsernameAccountSelection,
AvatarData,
} from './registration-types.js';
import {
useNativeSetUserAvatar,
useUploadSelectedMedia,
} from '../../avatars/avatar-hooks.js';
import { NavContext } from '../../navigation/navigation-context.js';
import { useSelector } from '../../redux/redux-utils.js';
import { nativeLogInExtraInfoSelector } from '../../selectors/account-selectors.js';
+import Alert from '../../utils/alert.js';
import { setNativeCredentials } from '../native-credentials.js';
import { useSIWEServerCall } from '../siwe-hooks.js';
// We can't just do everything in one async callback, since the server calls
// would get bound to Redux state from before the registration. The registration
// flow has multiple steps where critical Redux state is changed, where
// subsequent steps depend on accessing the updated Redux state.
// To address this, we break the registration process up into multiple steps.
// When each step completes we update the currentStep state, and we have Redux
// selectors that trigger useEffects for subsequent steps when relevant data
// starts to appear in Redux.
type CurrentStep =
| { +step: 'inactive' }
| {
+step: 'waiting_for_registration_call',
+avatarData: ?AvatarData,
+resolve: () => void,
+reject: Error => void,
};
const inactiveStep = { step: 'inactive' };
function useRegistrationServerCall(): RegistrationServerCallInput => Promise {
const [currentStep, setCurrentStep] =
React.useState(inactiveStep);
// STEP 1: ACCOUNT REGISTRATION
const navContext = React.useContext(NavContext);
const logInExtraInfo = useSelector(state =>
nativeLogInExtraInfoSelector({
redux: state,
navContext,
}),
);
const dispatchActionPromise = useDispatchActionPromise();
const callRegister = useServerCall(register);
const registerUsernameAccount = React.useCallback(
async (
accountSelection: UsernameAccountSelection,
keyserverURL: string,
) => {
const extraInfo = await logInExtraInfo();
const registerPromise = (async () => {
try {
const result = await callRegister(
{
...extraInfo,
username: accountSelection.username,
password: accountSelection.password,
},
{
urlPrefixOverride: keyserverURL,
},
);
await setNativeCredentials({
username: result.currentUserInfo.username,
password: accountSelection.password,
});
return result;
} catch (e) {
if (e.message === 'username_reserved') {
Alert.alert(
'Username reserved',
'This username is currently reserved. Please contact support@' +
'comm.app if you would like to claim this account.',
);
} else if (e.message === 'username_taken') {
Alert.alert(
'Username taken',
'An account with that username already exists',
);
} else if (e.message === 'client_version_unsupported') {
const app = Platform.select({
ios: 'App Store',
android: 'Play Store',
});
Alert.alert(
'App out of date',
'Your app version is pretty old, and the server doesn’t know how ' +
`to speak to it anymore. Please use the ${app} app to update!`,
);
} else {
Alert.alert('Unknown error', 'Uhh... try again?');
}
throw e;
}
})();
dispatchActionPromise(
registerActionTypes,
registerPromise,
undefined,
({ calendarQuery: extraInfo.calendarQuery }: LogInStartingPayload),
);
await registerPromise;
},
[logInExtraInfo, callRegister, dispatchActionPromise],
);
const siweServerCallParams = React.useMemo(() => {
const onServerCallFailure = () => {
Alert.alert('Unknown error', 'Uhh... try again?');
};
return { onFailure: onServerCallFailure };
}, []);
const siweServerCall = useSIWEServerCall(siweServerCallParams);
const dispatch = useDispatch();
const returnedFunc = React.useCallback(
(input: RegistrationServerCallInput) =>
new Promise(
// eslint-disable-next-line no-async-promise-executor
async (resolve, reject) => {
try {
if (currentStep.step !== 'inactive') {
return;
}
const { accountSelection, avatarData, keyserverURL } = input;
if (accountSelection.accountType === 'username') {
await registerUsernameAccount(accountSelection, keyserverURL);
} else {
await siweServerCall(accountSelection, {
urlPrefixOverride: keyserverURL,
});
}
dispatch({
type: setURLPrefix,
payload: keyserverURL,
});
setCurrentStep({
step: 'waiting_for_registration_call',
avatarData,
resolve,
reject,
});
} catch (e) {
reject(e);
}
},
),
[currentStep, registerUsernameAccount, siweServerCall, dispatch],
);
// STEP 2: SETTING AVATAR
const uploadSelectedMedia = useUploadSelectedMedia();
const nativeSetUserAvatar = useNativeSetUserAvatar();
const hasCurrentUserInfo = useSelector(
state => !!state.currentUserInfo && !state.currentUserInfo.anonymous,
);
const avatarBeingSetRef = React.useRef(false);
React.useEffect(() => {
if (
!hasCurrentUserInfo ||
currentStep.step !== 'waiting_for_registration_call' ||
avatarBeingSetRef.current
) {
return;
}
avatarBeingSetRef.current = true;
const { avatarData, resolve } = currentStep;
(async () => {
try {
if (!avatarData) {
return;
}
let updateUserAvatarRequest;
if (!avatarData.needsUpload) {
({ updateUserAvatarRequest } = avatarData);
} else {
const { mediaSelection } = avatarData;
updateUserAvatarRequest = await uploadSelectedMedia(mediaSelection);
if (!updateUserAvatarRequest) {
return;
}
}
await nativeSetUserAvatar(updateUserAvatarRequest);
} finally {
dispatch({
type: setDataLoadedActionType,
payload: {
dataLoaded: true,
},
});
setCurrentStep(inactiveStep);
avatarBeingSetRef.current = false;
resolve();
}
})();
}, [
currentStep,
hasCurrentUserInfo,
uploadSelectedMedia,
nativeSetUserAvatar,
dispatch,
]);
return returnedFunc;
}
export { useRegistrationServerCall };
diff --git a/native/account/siwe-panel.react.js b/native/account/siwe-panel.react.js
index bc5ab46a7..c436eb684 100644
--- a/native/account/siwe-panel.react.js
+++ b/native/account/siwe-panel.react.js
@@ -1,218 +1,218 @@
// @flow
import BottomSheet from '@gorhom/bottom-sheet';
import * as React from 'react';
-import { Alert } from 'react-native';
import { useSafeAreaInsets } from 'react-native-safe-area-context';
import WebView from 'react-native-webview';
import {
getSIWENonce,
getSIWENonceActionTypes,
siweAuthActionTypes,
} from 'lib/actions/siwe-actions.js';
import { createLoadingStatusSelector } from 'lib/selectors/loading-selectors.js';
import type { SIWEWebViewMessage, SIWEResult } from 'lib/types/siwe-types.js';
import {
useServerCall,
useDispatchActionPromise,
type BindServerCallsParams,
} from 'lib/utils/action-utils.js';
import { commCoreModule } from '../native-modules.js';
import { useSelector } from '../redux/redux-utils.js';
+import Alert from '../utils/alert.js';
import { defaultLandingURLPrefix } from '../utils/url-utils.js';
const commSIWE = `${defaultLandingURLPrefix}/siwe`;
const getSIWENonceLoadingStatusSelector = createLoadingStatusSelector(
getSIWENonceActionTypes,
);
const siweAuthLoadingStatusSelector =
createLoadingStatusSelector(siweAuthActionTypes);
type Props = {
+onClosed: () => mixed,
+onClosing: () => mixed,
+onSuccessfulWalletSignature: SIWEResult => mixed,
+closing: boolean,
+setLoading: boolean => mixed,
+keyserverCallParamOverride?: $Shape,
};
function SIWEPanel(props: Props): React.Node {
const dispatchActionPromise = useDispatchActionPromise();
const getSIWENonceCall = useServerCall(
getSIWENonce,
props.keyserverCallParamOverride,
);
const getSIWENonceCallFailed = useSelector(
state => getSIWENonceLoadingStatusSelector(state) === 'error',
);
const { onClosing } = props;
React.useEffect(() => {
if (getSIWENonceCallFailed) {
Alert.alert(
'Unknown error',
'Uhh... try again?',
[{ text: 'OK', onPress: onClosing }],
{ cancelable: false },
);
}
}, [getSIWENonceCallFailed, onClosing]);
const siweAuthCallLoading = useSelector(
state => siweAuthLoadingStatusSelector(state) === 'loading',
);
const [nonce, setNonce] = React.useState(null);
const [primaryIdentityPublicKey, setPrimaryIdentityPublicKey] =
React.useState(null);
React.useEffect(() => {
(async () => {
dispatchActionPromise(
getSIWENonceActionTypes,
(async () => {
const response = await getSIWENonceCall();
setNonce(response);
})(),
);
await commCoreModule.initializeCryptoAccount();
const {
primaryIdentityPublicKeys: { ed25519 },
} = await commCoreModule.getUserPublicKey();
setPrimaryIdentityPublicKey(ed25519);
})();
}, [dispatchActionPromise, getSIWENonceCall]);
const [isLoading, setLoading] = React.useState(true);
const [walletConnectModalHeight, setWalletConnectModalHeight] =
React.useState(0);
const insets = useSafeAreaInsets();
const bottomInset = insets.bottom;
const snapPoints = React.useMemo(() => {
if (isLoading) {
return [1];
} else if (walletConnectModalHeight) {
const baseHeight = bottomInset + walletConnectModalHeight;
if (baseHeight < 400) {
return [baseHeight + 3];
} else {
return [baseHeight - 17];
}
} else {
return [bottomInset + 435, bottomInset + 600];
}
}, [isLoading, walletConnectModalHeight, bottomInset]);
const bottomSheetRef = React.useRef();
const snapToIndex = bottomSheetRef.current?.snapToIndex;
React.useEffect(() => {
// When the snapPoints change, always reset to the first one
// Without this, when we close the WalletConnect modal we don't resize
snapToIndex?.(0);
}, [snapToIndex, snapPoints]);
const closeBottomSheet = bottomSheetRef.current?.close;
const { closing, onSuccessfulWalletSignature } = props;
const handleMessage = React.useCallback(
async event => {
const data: SIWEWebViewMessage = JSON.parse(event.nativeEvent.data);
if (data.type === 'siwe_success') {
const { address, message, signature } = data;
if (address && signature) {
closeBottomSheet?.();
await onSuccessfulWalletSignature({ address, message, signature });
}
} else if (data.type === 'siwe_closed') {
onClosing();
closeBottomSheet?.();
} else if (data.type === 'walletconnect_modal_update') {
const height = data.state === 'open' ? data.height : 0;
setWalletConnectModalHeight(height);
}
},
[onSuccessfulWalletSignature, onClosing, closeBottomSheet],
);
const prevClosingRef = React.useRef();
React.useEffect(() => {
if (closing && !prevClosingRef.current) {
closeBottomSheet?.();
}
prevClosingRef.current = closing;
}, [closing, closeBottomSheet]);
const source = React.useMemo(
() => ({
uri: commSIWE,
headers: {
'siwe-nonce': nonce,
'siwe-primary-identity-public-key': primaryIdentityPublicKey,
},
}),
[nonce, primaryIdentityPublicKey],
);
const onWebViewLoaded = React.useCallback(() => {
setLoading(false);
}, []);
const walletConnectModalOpen = walletConnectModalHeight !== 0;
const backgroundStyle = React.useMemo(
() => ({
backgroundColor: walletConnectModalOpen ? '#3396ff' : '#242529',
}),
[walletConnectModalOpen],
);
const bottomSheetHandleIndicatorStyle = React.useMemo(
() => ({
backgroundColor: 'white',
}),
[],
);
const { onClosed } = props;
const onBottomSheetChange = React.useCallback(
(index: number) => {
if (index === -1) {
onClosed();
}
},
[onClosed],
);
let bottomSheet;
if (nonce && primaryIdentityPublicKey) {
bottomSheet = (
);
}
const setLoadingProp = props.setLoading;
const loading = !getSIWENonceCallFailed && (isLoading || siweAuthCallLoading);
React.useEffect(() => {
setLoadingProp(loading);
}, [setLoadingProp, loading]);
return bottomSheet;
}
export default SIWEPanel;
diff --git a/native/avatars/avatar-hooks.js b/native/avatars/avatar-hooks.js
index 251d52725..9a00c6e8f 100644
--- a/native/avatars/avatar-hooks.js
+++ b/native/avatars/avatar-hooks.js
@@ -1,443 +1,443 @@
// @flow
import { useActionSheet } from '@expo/react-native-action-sheet';
import * as ImagePicker from 'expo-image-picker';
import invariant from 'invariant';
import * as React from 'react';
import { Platform } from 'react-native';
-import Alert from 'react-native/Libraries/Alert/Alert.js';
import filesystem from 'react-native-fs';
import { useSafeAreaInsets } from 'react-native-safe-area-context';
import { uploadMultimedia } from 'lib/actions/upload-actions.js';
import { EditUserAvatarContext } from 'lib/components/edit-user-avatar-provider.react.js';
import {
extensionFromFilename,
filenameFromPathOrURI,
} from 'lib/media/file-utils.js';
import type {
ImageAvatarDBContent,
UpdateUserAvatarRequest,
} from 'lib/types/avatar-types.js';
import type {
NativeMediaSelection,
MediaLibrarySelection,
MediaMissionFailure,
UploadMultimediaResult,
} from 'lib/types/media-types.js';
import { useServerCall } from 'lib/utils/action-utils.js';
import CommIcon from '../components/comm-icon.react.js';
import SWMansionIcon from '../components/swmansion-icon.react.js';
import { getCompatibleMediaURI } from '../media/identifier-utils.js';
import type { MediaResult } from '../media/media-utils.js';
import { processMedia } from '../media/media-utils.js';
import { useSelector } from '../redux/redux-utils.js';
import { useStyles } from '../themes/colors.js';
+import Alert from '../utils/alert.js';
import { useStaffCanSee } from '../utils/staff-utils.js';
function displayAvatarUpdateFailureAlert(): void {
Alert.alert(
'Couldn’t save avatar',
'Please try again later',
[{ text: 'OK' }],
{ cancelable: true },
);
}
function useUploadProcessedMedia(): MediaResult => Promise {
const callUploadMultimedia = useServerCall(uploadMultimedia);
const uploadProcessedMultimedia: MediaResult => Promise =
React.useCallback(
processedMedia => {
const { uploadURI, filename, mime, dimensions } = processedMedia;
return callUploadMultimedia(
{
uri: uploadURI,
name: filename,
type: mime,
},
dimensions,
);
},
[callUploadMultimedia],
);
return uploadProcessedMultimedia;
}
function useProcessSelectedMedia(): NativeMediaSelection => Promise<
MediaMissionFailure | MediaResult,
> {
const hasWiFi = useSelector(state => state.connectivity.hasWiFi);
const staffCanSee = useStaffCanSee();
const processSelectedMedia = React.useCallback(
async (selection: NativeMediaSelection) => {
const { resultPromise } = processMedia(selection, {
hasWiFi,
finalFileHeaderCheck: staffCanSee,
});
return await resultPromise;
},
[hasWiFi, staffCanSee],
);
return processSelectedMedia;
}
async function selectFromGallery(): Promise {
try {
const { assets, canceled } = await ImagePicker.launchImageLibraryAsync({
mediaTypes: ImagePicker.MediaTypeOptions.Images,
allowsEditing: true,
allowsMultipleSelection: false,
quality: 1,
});
if (canceled || assets.length === 0) {
return undefined;
}
const asset = assets.pop();
const { width, height, assetId: mediaNativeID } = asset;
const assetFilename =
asset.fileName || filenameFromPathOrURI(asset.uri) || '';
const uri = getCompatibleMediaURI(
asset.uri,
extensionFromFilename(assetFilename),
);
const currentTime = Date.now();
const selection: MediaLibrarySelection = {
step: 'photo_library',
dimensions: { height, width },
uri,
filename: assetFilename,
mediaNativeID,
selectTime: currentTime,
sendTime: currentTime,
retries: 0,
};
return selection;
} catch (e) {
console.log(e);
return undefined;
}
}
function useUploadSelectedMedia(
setProcessingOrUploadInProgress?: (inProgress: boolean) => mixed,
): (selection: NativeMediaSelection) => Promise {
const processSelectedMedia = useProcessSelectedMedia();
const uploadProcessedMedia = useUploadProcessedMedia();
return React.useCallback(
async (selection: NativeMediaSelection) => {
setProcessingOrUploadInProgress?.(true);
const urisToBeDisposed: Set = new Set([selection.uri]);
let processedMedia;
try {
processedMedia = await processSelectedMedia(selection);
if (processedMedia.uploadURI) {
urisToBeDisposed.add(processedMedia.uploadURI);
}
} catch (e) {
urisToBeDisposed.forEach(filesystem.unlink);
Alert.alert(
'Media processing failed',
'Unable to process selected media.',
);
setProcessingOrUploadInProgress?.(false);
return undefined;
}
if (!processedMedia.success) {
urisToBeDisposed.forEach(filesystem.unlink);
Alert.alert(
'Media processing failed',
'Unable to process selected media.',
);
setProcessingOrUploadInProgress?.(false);
return undefined;
}
let uploadedMedia: UploadMultimediaResult;
try {
uploadedMedia = await uploadProcessedMedia(processedMedia);
urisToBeDisposed.forEach(filesystem.unlink);
} catch {
urisToBeDisposed.forEach(filesystem.unlink);
Alert.alert(
'Media upload failed',
'Unable to upload selected media. Please try again.',
);
setProcessingOrUploadInProgress?.(false);
return undefined;
}
if (!uploadedMedia.id) {
return undefined;
}
return {
type: 'image',
uploadID: uploadedMedia.id,
};
},
[
processSelectedMedia,
setProcessingOrUploadInProgress,
uploadProcessedMedia,
],
);
}
function useNativeSetUserAvatar(): (
request: UpdateUserAvatarRequest,
) => Promise {
const editUserAvatarContext = React.useContext(EditUserAvatarContext);
invariant(editUserAvatarContext, 'editUserAvatarContext must be defined');
const {
baseSetUserAvatar,
getRegistrationModeEnabled,
getRegistrationModeSuccessCallback,
} = editUserAvatarContext;
const nativeSetUserAvatar = React.useCallback(
async (request: UpdateUserAvatarRequest) => {
const registrationModeEnabled = getRegistrationModeEnabled();
if (registrationModeEnabled) {
const successCallback = getRegistrationModeSuccessCallback();
invariant(
successCallback,
'successCallback must be defined if registrationModeEnabled is true',
);
successCallback({
needsUpload: false,
updateUserAvatarRequest: request,
});
return;
}
try {
await baseSetUserAvatar(request);
} catch {
displayAvatarUpdateFailureAlert();
}
},
[
getRegistrationModeEnabled,
getRegistrationModeSuccessCallback,
baseSetUserAvatar,
],
);
return nativeSetUserAvatar;
}
function useNativeUpdateUserImageAvatar(): (
selection: NativeMediaSelection,
) => Promise {
const editUserAvatarContext = React.useContext(EditUserAvatarContext);
invariant(editUserAvatarContext, 'editUserAvatarContext must be defined');
const {
baseSetUserAvatar,
getRegistrationModeEnabled,
getRegistrationModeSuccessCallback,
setUserAvatarMediaUploadInProgress,
} = editUserAvatarContext;
const uploadSelectedMedia = useUploadSelectedMedia(
setUserAvatarMediaUploadInProgress,
);
const nativeUpdateUserImageAvatar = React.useCallback(
async (selection: NativeMediaSelection) => {
const registrationModeEnabled = getRegistrationModeEnabled();
if (registrationModeEnabled) {
const successCallback = getRegistrationModeSuccessCallback();
invariant(
successCallback,
'successCallback must be defined if registrationModeEnabled is true',
);
successCallback({
needsUpload: true,
mediaSelection: selection,
});
return;
}
const imageAvatarUpdateRequest = await uploadSelectedMedia(selection);
if (!imageAvatarUpdateRequest) {
return;
}
try {
await baseSetUserAvatar(imageAvatarUpdateRequest);
} catch {
displayAvatarUpdateFailureAlert();
}
},
[
getRegistrationModeEnabled,
getRegistrationModeSuccessCallback,
baseSetUserAvatar,
uploadSelectedMedia,
],
);
return nativeUpdateUserImageAvatar;
}
function useSelectFromGalleryAndUpdateUserAvatar(): () => Promise {
const nativeUpdateUserImageAvatar = useNativeUpdateUserImageAvatar();
const selectFromGalleryAndUpdateUserAvatar =
React.useCallback(async (): Promise => {
const selection = await selectFromGallery();
if (!selection) {
return;
}
await nativeUpdateUserImageAvatar(selection);
}, [nativeUpdateUserImageAvatar]);
return selectFromGalleryAndUpdateUserAvatar;
}
type ShowAvatarActionSheetOptions = {
+id: 'emoji' | 'image' | 'camera' | 'ens' | 'cancel' | 'remove',
+onPress?: () => mixed,
};
function useShowAvatarActionSheet(
options: $ReadOnlyArray,
): () => void {
options = Platform.OS === 'ios' ? [...options, { id: 'cancel' }] : options;
const insets = useSafeAreaInsets();
const { showActionSheetWithOptions } = useActionSheet();
const styles = useStyles(unboundStyles);
const showAvatarActionSheet = React.useCallback(() => {
const texts = options.map((option: ShowAvatarActionSheetOptions) => {
if (option.id === 'emoji') {
return 'Select emoji';
} else if (option.id === 'image') {
return 'Select image';
} else if (option.id === 'camera') {
return 'Open camera';
} else if (option.id === 'ens') {
return 'Use ENS avatar';
} else if (option.id === 'remove') {
return 'Reset to default';
} else {
return 'Cancel';
}
});
const cancelButtonIndex = options.findIndex(
option => option.id === 'cancel',
);
const containerStyle = {
paddingBotton: insets.bottom,
};
const icons = options.map(option => {
if (option.id === 'emoji') {
return (
);
} else if (option.id === 'image') {
return (
);
} else if (option.id === 'camera') {
return (
);
} else if (option.id === 'ens') {
return (
);
} else if (option.id === 'remove') {
return (
);
} else {
return undefined;
}
});
const onPressAction = (selectedIndex: ?number) => {
if (
selectedIndex === null ||
selectedIndex === undefined ||
selectedIndex < 0
) {
return;
}
const option = options[selectedIndex];
if (option.onPress) {
option.onPress();
}
};
showActionSheetWithOptions(
{
options: texts,
cancelButtonIndex,
containerStyle,
icons,
},
onPressAction,
);
}, [
insets.bottom,
options,
showActionSheetWithOptions,
styles.bottomSheetIcon,
]);
return showAvatarActionSheet;
}
const unboundStyles = {
bottomSheetIcon: {
color: '#000000',
},
};
export {
displayAvatarUpdateFailureAlert,
selectFromGallery,
useUploadSelectedMedia,
useUploadProcessedMedia,
useProcessSelectedMedia,
useShowAvatarActionSheet,
useSelectFromGalleryAndUpdateUserAvatar,
useNativeSetUserAvatar,
useNativeUpdateUserImageAvatar,
};
diff --git a/native/avatars/native-edit-thread-avatar-provider.react.js b/native/avatars/native-edit-thread-avatar-provider.react.js
index 9e55240c6..f21d0ffe3 100644
--- a/native/avatars/native-edit-thread-avatar-provider.react.js
+++ b/native/avatars/native-edit-thread-avatar-provider.react.js
@@ -1,44 +1,44 @@
// @flow
import * as React from 'react';
-import { Alert } from 'react-native';
import { BaseEditThreadAvatarProvider } from 'lib/components/base-edit-thread-avatar-provider.react.js';
import { selectFromGallery, useUploadSelectedMedia } from './avatar-hooks.js';
import { activeThreadSelector } from '../navigation/nav-selectors.js';
import { NavContext } from '../navigation/navigation-context.js';
+import Alert from '../utils/alert.js';
const displayAvatarUpdateFailureAlert = () =>
Alert.alert(
'Couldn’t save avatar',
'Please try again later',
[{ text: 'OK' }],
{ cancelable: true },
);
type Props = {
+children: React.Node,
};
function NativeEditThreadAvatarProvider(props: Props): React.Node {
const { children } = props;
const navContext = React.useContext(NavContext);
const activeThreadID = React.useMemo(
() => activeThreadSelector(navContext) ?? '',
[navContext],
);
return (
{children}
);
}
export default NativeEditThreadAvatarProvider;
diff --git a/native/calendar/entry.react.js b/native/calendar/entry.react.js
index cb466e685..1d1c0b67d 100644
--- a/native/calendar/entry.react.js
+++ b/native/calendar/entry.react.js
@@ -1,821 +1,821 @@
// @flow
import Icon from '@expo/vector-icons/FontAwesome.js';
import invariant from 'invariant';
import _isEqual from 'lodash/fp/isEqual.js';
import _omit from 'lodash/fp/omit.js';
import * as React from 'react';
import {
View,
Text,
TextInput as BaseTextInput,
Platform,
TouchableWithoutFeedback,
- Alert,
LayoutAnimation,
Keyboard,
} from 'react-native';
import { useDispatch } from 'react-redux';
import shallowequal from 'shallowequal';
import tinycolor from 'tinycolor2';
import {
createEntryActionTypes,
createEntry,
saveEntryActionTypes,
saveEntry,
deleteEntryActionTypes,
deleteEntry,
concurrentModificationResetActionType,
} from 'lib/actions/entry-actions.js';
import { registerFetchKey } from 'lib/reducers/loading-reducer.js';
import { colorIsDark } from 'lib/shared/color-utils.js';
import { entryKey } from 'lib/shared/entry-utils.js';
import { threadHasPermission } from 'lib/shared/thread-utils.js';
import type { Shape } from 'lib/types/core.js';
import type {
CreateEntryInfo,
SaveEntryInfo,
SaveEntryResult,
SaveEntryPayload,
CreateEntryPayload,
DeleteEntryInfo,
DeleteEntryResult,
CalendarQuery,
} from 'lib/types/entry-types.js';
import type { LoadingStatus } from 'lib/types/loading-types.js';
import type { Dispatch } from 'lib/types/redux-types.js';
import { threadPermissions } from 'lib/types/thread-permission-types.js';
import {
type ThreadInfo,
type ResolvedThreadInfo,
} from 'lib/types/thread-types.js';
import {
useServerCall,
useDispatchActionPromise,
type DispatchActionPromise,
} from 'lib/utils/action-utils.js';
import { dateString } from 'lib/utils/date-utils.js';
import { useResolvedThreadInfo } from 'lib/utils/entity-helpers.js';
import { ServerError } from 'lib/utils/errors.js';
import sleep from 'lib/utils/sleep.js';
import type { EntryInfoWithHeight } from './calendar.react.js';
import LoadingIndicator from './loading-indicator.react.js';
import {
type MessageListParams,
useNavigateToThread,
} from '../chat/message-list-types.js';
import Button from '../components/button.react.js';
import { SingleLine } from '../components/single-line.react.js';
import TextInput from '../components/text-input.react.js';
import Markdown from '../markdown/markdown.react.js';
import { inlineMarkdownRules } from '../markdown/rules.react.js';
import {
createIsForegroundSelector,
nonThreadCalendarQuery,
} from '../navigation/nav-selectors.js';
import { NavContext } from '../navigation/navigation-context.js';
import { ThreadPickerModalRouteName } from '../navigation/route-names.js';
import type { TabNavigationProp } from '../navigation/tab-navigator.react.js';
import { useSelector } from '../redux/redux-utils.js';
import { colors, useStyles } from '../themes/colors.js';
import type { LayoutEvent } from '../types/react-native.js';
+import Alert from '../utils/alert.js';
import { waitForInteractions } from '../utils/timers.js';
function hueDistance(firstColor: string, secondColor: string): number {
const firstHue = tinycolor(firstColor).toHsv().h;
const secondHue = tinycolor(secondColor).toHsv().h;
const distance = Math.abs(firstHue - secondHue);
return distance > 180 ? 360 - distance : distance;
}
const omitEntryInfo = _omit(['entryInfo']);
function dummyNodeForEntryHeightMeasurement(
entryText: string,
): React.Element {
const text = entryText === '' ? ' ' : entryText;
return (
{text}
);
}
type SharedProps = {
+navigation: TabNavigationProp<'Calendar'>,
+entryInfo: EntryInfoWithHeight,
+visible: boolean,
+active: boolean,
+makeActive: (entryKey: string, active: boolean) => void,
+onEnterEditMode: (entryInfo: EntryInfoWithHeight) => void,
+onConcludeEditMode: (entryInfo: EntryInfoWithHeight) => void,
+onPressWhitespace: () => void,
+entryRef: (entryKey: string, entry: ?InternalEntry) => void,
};
type BaseProps = {
...SharedProps,
+threadInfo: ThreadInfo,
};
type Props = {
...SharedProps,
+threadInfo: ResolvedThreadInfo,
// Redux state
+calendarQuery: () => CalendarQuery,
+online: boolean,
+styles: typeof unboundStyles,
// Nav state
+threadPickerActive: boolean,
+navigateToThread: (params: MessageListParams) => void,
// Redux dispatch functions
+dispatch: Dispatch,
+dispatchActionPromise: DispatchActionPromise,
// async functions that hit server APIs
+createEntry: (info: CreateEntryInfo) => Promise,
+saveEntry: (info: SaveEntryInfo) => Promise,
+deleteEntry: (info: DeleteEntryInfo) => Promise,
};
type State = {
+editing: boolean,
+text: string,
+loadingStatus: LoadingStatus,
+height: number,
};
class InternalEntry extends React.Component {
textInput: ?React.ElementRef;
creating: boolean = false;
needsUpdateAfterCreation: boolean = false;
needsDeleteAfterCreation: boolean = false;
nextSaveAttemptIndex: number = 0;
mounted: boolean = false;
deleted: boolean = false;
currentlySaving: ?string;
constructor(props: Props) {
super(props);
this.state = {
editing: false,
text: props.entryInfo.text,
loadingStatus: 'inactive',
height: props.entryInfo.textHeight,
};
this.state = {
...this.state,
editing: InternalEntry.isActive(props, this.state),
};
}
guardedSetState(input: Shape) {
if (this.mounted) {
this.setState(input);
}
}
shouldComponentUpdate(nextProps: Props, nextState: State): boolean {
return (
!shallowequal(nextState, this.state) ||
!shallowequal(omitEntryInfo(nextProps), omitEntryInfo(this.props)) ||
!_isEqual(nextProps.entryInfo)(this.props.entryInfo)
);
}
componentDidUpdate(prevProps: Props, prevState: State) {
const wasActive = InternalEntry.isActive(prevProps, prevState);
const isActive = InternalEntry.isActive(this.props, this.state);
if (
!isActive &&
(this.props.entryInfo.text !== prevProps.entryInfo.text ||
this.props.entryInfo.textHeight !== prevProps.entryInfo.textHeight) &&
(this.props.entryInfo.text !== this.state.text ||
this.props.entryInfo.textHeight !== this.state.height)
) {
this.guardedSetState({
text: this.props.entryInfo.text,
height: this.props.entryInfo.textHeight,
});
this.currentlySaving = null;
}
if (
!this.props.active &&
this.state.text === prevState.text &&
this.state.height !== prevState.height &&
this.state.height !== this.props.entryInfo.textHeight
) {
const approxMeasuredHeight = Math.round(this.state.height * 1000) / 1000;
const approxExpectedHeight =
Math.round(this.props.entryInfo.textHeight * 1000) / 1000;
console.log(
`Entry height for ${entryKey(this.props.entryInfo)} was expected to ` +
`be ${approxExpectedHeight} but is actually ` +
`${approxMeasuredHeight}. This means Calendar's FlatList isn't ` +
'getting the right item height for some of its nodes, which is ' +
'guaranteed to cause glitchy behavior. Please investigate!!',
);
}
// Our parent will set the active prop to false if something else gets
// pressed or if the Entry is scrolled out of view. In either of those cases
// we should complete the edit process.
if (!this.props.active && prevProps.active) {
this.completeEdit();
}
if (this.state.height !== prevState.height || isActive !== wasActive) {
LayoutAnimation.easeInEaseOut();
}
if (
this.props.online &&
!prevProps.online &&
this.state.loadingStatus === 'error'
) {
this.save();
}
if (
this.state.editing &&
prevState.editing &&
(this.state.text.trim() === '') !== (prevState.text.trim() === '')
) {
LayoutAnimation.easeInEaseOut();
}
}
componentDidMount() {
this.mounted = true;
this.props.entryRef(entryKey(this.props.entryInfo), this);
}
componentWillUnmount() {
this.mounted = false;
this.props.entryRef(entryKey(this.props.entryInfo), null);
this.props.onConcludeEditMode(this.props.entryInfo);
}
static isActive(props: Props, state: State): boolean {
return (
props.active ||
state.editing ||
!props.entryInfo.id ||
state.loadingStatus !== 'inactive'
);
}
render(): React.Node {
const active = InternalEntry.isActive(this.props, this.state);
const { editing } = this.state;
const threadColor = `#${this.props.threadInfo.color}`;
const darkColor = colorIsDark(this.props.threadInfo.color);
let actionLinks = null;
if (active) {
const actionLinksColor = darkColor ? '#D3D3D3' : '#404040';
const actionLinksTextStyle = { color: actionLinksColor };
const { modalIosHighlightUnderlay: actionLinksUnderlayColor } = darkColor
? colors.dark
: colors.light;
const loadingIndicatorCanUseRed = hueDistance('red', threadColor) > 50;
let editButtonContent = null;
if (editing && this.state.text.trim() === '') {
// nothing
} else if (editing) {
editButtonContent = (
SAVE
);
} else {
editButtonContent = (
EDIT
);
}
actionLinks = (
);
}
const textColor = darkColor ? 'white' : 'black';
let textInput;
if (editing) {
const textInputStyle = {
color: textColor,
backgroundColor: threadColor,
};
const selectionColor = darkColor ? '#129AFF' : '#036AFF';
textInput = (
);
}
let rawText = this.state.text;
if (rawText === '' || rawText.slice(-1) === '\n') {
rawText += ' ';
}
const textStyle = {
...this.props.styles.text,
color: textColor,
opacity: textInput ? 0 : 1,
};
// We use an empty View to set the height of the entry, and then position
// the Text and TextInput absolutely. This allows to measure height changes
// to the Text while controlling the actual height of the entry.
const heightStyle = { height: this.state.height };
const entryStyle = { backgroundColor: threadColor };
const opacity = editing ? 1.0 : 0.6;
const canEditEntry = threadHasPermission(
this.props.threadInfo,
threadPermissions.EDIT_ENTRIES,
);
return (
);
}
textInputRef: (textInput: ?React.ElementRef) => void =
textInput => {
this.textInput = textInput;
if (textInput && this.state.editing) {
this.enterEditMode();
}
};
enterEditMode: () => Promise = async () => {
this.setActive();
this.props.onEnterEditMode(this.props.entryInfo);
if (Platform.OS === 'android') {
// If we don't do this, the TextInput focuses
// but the soft keyboard doesn't come up
await waitForInteractions();
await sleep(15);
}
this.focus();
};
focus: () => void = () => {
const { textInput } = this;
if (!textInput) {
return;
}
textInput.focus();
};
onFocus: () => void = () => {
if (this.props.threadPickerActive) {
this.props.navigation.goBack();
}
};
setActive: () => void = () => this.makeActive(true);
completeEdit: () => void = () => {
// This gets called from CalendarInputBar (save button above keyboard),
// onPressEdit (save button in Entry action links), and in
// componentDidUpdate above when Calendar sets this Entry to inactive.
// Calendar does this if something else gets pressed or the Entry is
// scrolled out of view. Note that an Entry won't consider itself inactive
// until it's done updating the server with its state, and if the network
// requests fail it may stay "active".
if (this.textInput) {
this.textInput.blur();
}
this.onBlur();
};
onBlur: () => void = () => {
if (this.state.text.trim() === '') {
this.delete();
} else if (this.props.entryInfo.text !== this.state.text) {
this.save();
}
this.guardedSetState({ editing: false });
this.makeActive(false);
this.props.onConcludeEditMode(this.props.entryInfo);
};
save: () => void = () => {
this.dispatchSave(this.props.entryInfo.id, this.state.text);
};
onTextContainerLayout: (event: LayoutEvent) => void = event => {
this.guardedSetState({
height: Math.ceil(event.nativeEvent.layout.height),
});
};
onChangeText: (newText: string) => void = newText => {
this.guardedSetState({ text: newText });
};
makeActive(active: boolean) {
const { threadInfo } = this.props;
if (!threadHasPermission(threadInfo, threadPermissions.EDIT_ENTRIES)) {
return;
}
this.props.makeActive(entryKey(this.props.entryInfo), active);
}
dispatchSave(serverID: ?string, newText: string) {
if (this.currentlySaving === newText) {
return;
}
this.currentlySaving = newText;
if (newText.trim() === '') {
// We don't save the empty string, since as soon as the element becomes
// inactive it'll get deleted
return;
}
if (!serverID) {
if (this.creating) {
// We need the first save call to return so we know the ID of the entry
// we're updating, so we'll need to handle this save later
this.needsUpdateAfterCreation = true;
return;
} else {
this.creating = true;
}
}
this.guardedSetState({ loadingStatus: 'loading' });
if (!serverID) {
this.props.dispatchActionPromise(
createEntryActionTypes,
this.createAction(newText),
);
} else {
this.props.dispatchActionPromise(
saveEntryActionTypes,
this.saveAction(serverID, newText),
);
}
}
async createAction(text: string): Promise {
const localID = this.props.entryInfo.localID;
invariant(localID, "if there's no serverID, there should be a localID");
const curSaveAttempt = this.nextSaveAttemptIndex++;
try {
const response = await this.props.createEntry({
text,
timestamp: this.props.entryInfo.creationTime,
date: dateString(
this.props.entryInfo.year,
this.props.entryInfo.month,
this.props.entryInfo.day,
),
threadID: this.props.entryInfo.threadID,
localID,
calendarQuery: this.props.calendarQuery(),
});
if (curSaveAttempt + 1 === this.nextSaveAttemptIndex) {
this.guardedSetState({ loadingStatus: 'inactive' });
}
this.creating = false;
if (this.needsUpdateAfterCreation) {
this.needsUpdateAfterCreation = false;
this.dispatchSave(response.entryID, this.state.text);
}
if (this.needsDeleteAfterCreation) {
this.needsDeleteAfterCreation = false;
this.dispatchDelete(response.entryID);
}
return response;
} catch (e) {
if (curSaveAttempt + 1 === this.nextSaveAttemptIndex) {
this.guardedSetState({ loadingStatus: 'error' });
}
this.currentlySaving = null;
this.creating = false;
throw e;
}
}
async saveAction(
entryID: string,
newText: string,
): Promise {
const curSaveAttempt = this.nextSaveAttemptIndex++;
try {
const response = await this.props.saveEntry({
entryID,
text: newText,
prevText: this.props.entryInfo.text,
timestamp: Date.now(),
calendarQuery: this.props.calendarQuery(),
});
if (curSaveAttempt + 1 === this.nextSaveAttemptIndex) {
this.guardedSetState({ loadingStatus: 'inactive' });
}
return { ...response, threadID: this.props.entryInfo.threadID };
} catch (e) {
if (curSaveAttempt + 1 === this.nextSaveAttemptIndex) {
this.guardedSetState({ loadingStatus: 'error' });
}
this.currentlySaving = null;
if (e instanceof ServerError && e.message === 'concurrent_modification') {
const revertedText = e.payload?.db;
const onRefresh = () => {
this.guardedSetState({
loadingStatus: 'inactive',
text: revertedText,
});
this.props.dispatch({
type: concurrentModificationResetActionType,
payload: { id: entryID, dbText: revertedText },
});
};
Alert.alert(
'Concurrent modification',
'It looks like somebody is attempting to modify that field at the ' +
'same time as you! Please try again.',
[{ text: 'OK', onPress: onRefresh }],
{ cancelable: false },
);
}
throw e;
}
}
delete: () => void = () => {
this.dispatchDelete(this.props.entryInfo.id);
};
onPressEdit: () => void = () => {
if (this.state.editing) {
this.completeEdit();
} else {
this.guardedSetState({ editing: true });
}
};
dispatchDelete(serverID: ?string) {
if (this.deleted) {
return;
}
this.deleted = true;
LayoutAnimation.easeInEaseOut();
const { localID } = this.props.entryInfo;
this.props.dispatchActionPromise(
deleteEntryActionTypes,
this.deleteAction(serverID),
undefined,
{ localID, serverID },
);
}
async deleteAction(serverID: ?string): Promise {
if (serverID) {
return await this.props.deleteEntry({
entryID: serverID,
prevText: this.props.entryInfo.text,
calendarQuery: this.props.calendarQuery(),
});
} else if (this.creating) {
this.needsDeleteAfterCreation = true;
}
return null;
}
onPressThreadName: () => void = () => {
Keyboard.dismiss();
this.props.navigateToThread({ threadInfo: this.props.threadInfo });
};
}
const unboundStyles = {
actionLinks: {
flex: 1,
flexDirection: 'row',
justifyContent: 'space-between',
marginTop: -5,
},
button: {
padding: 5,
},
buttonContents: {
flex: 1,
flexDirection: 'row',
},
container: {
backgroundColor: 'listBackground',
},
entry: {
borderRadius: 8,
margin: 5,
overflow: 'hidden',
},
leftLinks: {
flex: 1,
flexDirection: 'row',
justifyContent: 'flex-start',
paddingHorizontal: 5,
},
leftLinksText: {
fontSize: 12,
fontWeight: 'bold',
paddingLeft: 5,
},
pencilIcon: {
lineHeight: 13,
paddingTop: 1,
},
rightLinks: {
flex: 1,
flexDirection: 'row',
justifyContent: 'flex-end',
paddingHorizontal: 5,
},
rightLinksText: {
fontSize: 12,
fontWeight: 'bold',
},
text: {
fontFamily: 'System',
fontSize: 16,
},
textContainer: {
position: 'absolute',
top: 0,
paddingBottom: 6,
paddingLeft: 10,
paddingRight: 10,
paddingTop: 5,
transform: (Platform.select({
ios: [{ translateY: -1 / 3 }],
default: [],
}): $ReadOnlyArray<{ +translateY: number }>),
},
textInput: {
fontFamily: 'System',
fontSize: 16,
left: ((Platform.OS === 'android' ? 9.8 : 10): number),
margin: 0,
padding: 0,
position: 'absolute',
right: 10,
top: ((Platform.OS === 'android' ? 4.8 : 0.5): number),
},
};
registerFetchKey(saveEntryActionTypes);
registerFetchKey(deleteEntryActionTypes);
const activeThreadPickerSelector = createIsForegroundSelector(
ThreadPickerModalRouteName,
);
const Entry: React.ComponentType = React.memo(
function ConnectedEntry(props: BaseProps) {
const navContext = React.useContext(NavContext);
const threadPickerActive = activeThreadPickerSelector(navContext);
const calendarQuery = useSelector(state =>
nonThreadCalendarQuery({
redux: state,
navContext,
}),
);
const online = useSelector(
state => state.connection.status === 'connected',
);
const styles = useStyles(unboundStyles);
const navigateToThread = useNavigateToThread();
const dispatch = useDispatch();
const dispatchActionPromise = useDispatchActionPromise();
const callCreateEntry = useServerCall(createEntry);
const callSaveEntry = useServerCall(saveEntry);
const callDeleteEntry = useServerCall(deleteEntry);
const { threadInfo: unresolvedThreadInfo, ...restProps } = props;
const threadInfo = useResolvedThreadInfo(unresolvedThreadInfo);
return (
);
},
);
export { InternalEntry, Entry, dummyNodeForEntryHeightMeasurement };
diff --git a/native/chat/chat-input-bar.react.js b/native/chat/chat-input-bar.react.js
index 46b3eb062..4618957e6 100644
--- a/native/chat/chat-input-bar.react.js
+++ b/native/chat/chat-input-bar.react.js
@@ -1,1414 +1,1414 @@
// @flow
import Icon from '@expo/vector-icons/Ionicons.js';
import invariant from 'invariant';
import _throttle from 'lodash/throttle.js';
import * as React from 'react';
import {
View,
TextInput,
TouchableOpacity,
Platform,
Text,
ActivityIndicator,
TouchableWithoutFeedback,
NativeAppEventEmitter,
} from 'react-native';
-import Alert from 'react-native/Libraries/Alert/Alert.js';
import { TextInputKeyboardMangerIOS } from 'react-native-keyboard-input';
import Animated, {
EasingNode,
FadeInDown,
FadeOutDown,
} from 'react-native-reanimated';
import { useDispatch } from 'react-redux';
import {
moveDraftActionType,
updateDraftActionType,
} from 'lib/actions/draft-actions.js';
import {
joinThreadActionTypes,
joinThread,
newThreadActionTypes,
} from 'lib/actions/thread-actions.js';
import { createLoadingStatusSelector } from 'lib/selectors/loading-selectors.js';
import { threadInfoSelector } from 'lib/selectors/thread-selectors.js';
import { userStoreSearchIndex } from 'lib/selectors/user-selectors.js';
import { colorIsDark } from 'lib/shared/color-utils.js';
import { useEditMessage } from 'lib/shared/edit-messages-utils.js';
import {
getTypeaheadUserSuggestions,
getTypeaheadRegexMatches,
type Selection,
getMentionsCandidates,
} from 'lib/shared/mention-utils.js';
import {
localIDPrefix,
trimMessage,
useMessagePreview,
messageKey,
type MessagePreviewResult,
} from 'lib/shared/message-utils.js';
import SearchIndex from 'lib/shared/search-index.js';
import {
threadHasPermission,
viewerIsMember,
threadFrozenDueToViewerBlock,
threadActualMembers,
checkIfDefaultMembersAreVoiced,
draftKeyFromThreadID,
} from 'lib/shared/thread-utils.js';
import type { CalendarQuery } from 'lib/types/entry-types.js';
import type { LoadingStatus } from 'lib/types/loading-types.js';
import type { PhotoPaste } from 'lib/types/media-types.js';
import { messageTypes } from 'lib/types/message-types-enum.js';
import type {
SendEditMessageResponse,
MessageInfo,
} from 'lib/types/message-types.js';
import type { Dispatch } from 'lib/types/redux-types.js';
import { threadPermissions } from 'lib/types/thread-permission-types.js';
import {
type ThreadInfo,
type ClientThreadJoinRequest,
type ThreadJoinPayload,
type RelativeMemberInfo,
} from 'lib/types/thread-types.js';
import { type UserInfos } from 'lib/types/user-types.js';
import {
type DispatchActionPromise,
useServerCall,
useDispatchActionPromise,
} from 'lib/utils/action-utils.js';
import { ChatContext } from './chat-context.js';
import type { ChatNavigationProp } from './chat.react.js';
import {
MessageEditingContext,
type MessageEditingContextType,
} from './message-editing-context.react.js';
import type { RemoveEditMode } from './message-list-types.js';
import TypeaheadTooltip from './typeahead-tooltip.react.js';
import Button from '../components/button.react.js';
// eslint-disable-next-line import/extensions
import ClearableTextInput from '../components/clearable-text-input.react';
import type { SyncedSelectionData } from '../components/selectable-text-input.js';
// eslint-disable-next-line import/extensions
import SelectableTextInput from '../components/selectable-text-input.react';
import { SingleLine } from '../components/single-line.react.js';
import SWMansionIcon from '../components/swmansion-icon.react.js';
import {
type InputState,
InputStateContext,
type EditInputBarMessageParameters,
} from '../input/input-state.js';
import KeyboardInputHost from '../keyboard/keyboard-input-host.react.js';
import {
type KeyboardState,
KeyboardContext,
} from '../keyboard/keyboard-state.js';
import { getKeyboardHeight } from '../keyboard/keyboard.js';
import { getDefaultTextMessageRules } from '../markdown/rules.react.js';
import {
nonThreadCalendarQuery,
activeThreadSelector,
} from '../navigation/nav-selectors.js';
import { NavContext } from '../navigation/navigation-context.js';
import { OverlayContext } from '../navigation/overlay-context.js';
import type { OverlayContextType } from '../navigation/overlay-context.js';
import {
type NavigationRoute,
ChatCameraModalRouteName,
ImagePasteModalRouteName,
} from '../navigation/route-names.js';
import { useSelector } from '../redux/redux-utils.js';
import { type Colors, useStyles, useColors } from '../themes/colors.js';
import type { LayoutEvent } from '../types/react-native.js';
import { type AnimatedViewStyle, AnimatedView } from '../types/styles.js';
+import Alert from '../utils/alert.js';
import { runTiming } from '../utils/animation-utils.js';
import { exitEditAlert } from '../utils/edit-messages-utils.js';
import { nativeTypeaheadRegex } from '../utils/typeahead-utils.js';
/* eslint-disable import/no-named-as-default-member */
const { Value, Clock, block, set, cond, neq, sub, interpolateNode, stopClock } =
Animated;
/* eslint-enable import/no-named-as-default-member */
const expandoButtonsAnimationConfig = {
duration: 150,
easing: EasingNode.inOut(EasingNode.ease),
};
const sendButtonAnimationConfig = {
duration: 150,
easing: EasingNode.inOut(EasingNode.ease),
};
type BaseProps = {
+threadInfo: ThreadInfo,
};
type Props = {
...BaseProps,
+viewerID: ?string,
+draft: string,
+joinThreadLoadingStatus: LoadingStatus,
+threadCreationInProgress: boolean,
+calendarQuery: () => CalendarQuery,
+nextLocalID: number,
+userInfos: UserInfos,
+colors: Colors,
+styles: typeof unboundStyles,
+onInputBarLayout?: (event: LayoutEvent) => mixed,
+openCamera: () => mixed,
+isActive: boolean,
+keyboardState: ?KeyboardState,
+dispatch: Dispatch,
+dispatchActionPromise: DispatchActionPromise,
+joinThread: (request: ClientThreadJoinRequest) => Promise,
+inputState: ?InputState,
+userSearchIndex: SearchIndex,
+mentionsCandidates: $ReadOnlyArray,
+parentThreadInfo: ?ThreadInfo,
+editedMessagePreview: ?MessagePreviewResult,
+editedMessageInfo: ?MessageInfo,
+editMessage: (
messageID: string,
text: string,
) => Promise,
+navigation: ?ChatNavigationProp<'MessageList'>,
+overlayContext: ?OverlayContextType,
+messageEditingContext: ?MessageEditingContextType,
};
type State = {
+text: string,
+textEdited: boolean,
+buttonsExpanded: boolean,
+selectionState: SyncedSelectionData,
+isExitingDuringEditMode: boolean,
};
class ChatInputBar extends React.PureComponent {
textInput: ?React.ElementRef;
clearableTextInput: ?ClearableTextInput;
selectableTextInput: ?React.ElementRef;
expandoButtonsOpen: Value;
targetExpandoButtonsOpen: Value;
expandoButtonsStyle: AnimatedViewStyle;
cameraRollIconStyle: AnimatedViewStyle;
cameraIconStyle: AnimatedViewStyle;
expandIconStyle: AnimatedViewStyle;
sendButtonContainerOpen: Value;
targetSendButtonContainerOpen: Value;
sendButtonContainerStyle: AnimatedViewStyle;
clearBeforeRemoveListener: () => void;
clearFocusListener: () => void;
clearBlurListener: () => void;
constructor(props: Props) {
super(props);
this.state = {
text: props.draft,
textEdited: false,
buttonsExpanded: true,
selectionState: { text: props.draft, selection: { start: 0, end: 0 } },
isExitingDuringEditMode: false,
};
this.setUpActionIconAnimations();
this.setUpSendIconAnimations();
}
setUpActionIconAnimations() {
this.expandoButtonsOpen = new Value(1);
this.targetExpandoButtonsOpen = new Value(1);
const prevTargetExpandoButtonsOpen = new Value(1);
const expandoButtonClock = new Clock();
const expandoButtonsOpen = block([
cond(neq(this.targetExpandoButtonsOpen, prevTargetExpandoButtonsOpen), [
stopClock(expandoButtonClock),
set(prevTargetExpandoButtonsOpen, this.targetExpandoButtonsOpen),
]),
cond(
neq(this.expandoButtonsOpen, this.targetExpandoButtonsOpen),
set(
this.expandoButtonsOpen,
runTiming(
expandoButtonClock,
this.expandoButtonsOpen,
this.targetExpandoButtonsOpen,
true,
expandoButtonsAnimationConfig,
),
),
),
this.expandoButtonsOpen,
]);
this.cameraRollIconStyle = {
...unboundStyles.cameraRollIcon,
opacity: expandoButtonsOpen,
};
this.cameraIconStyle = {
...unboundStyles.cameraIcon,
opacity: expandoButtonsOpen,
};
const expandoButtonsWidth = interpolateNode(expandoButtonsOpen, {
inputRange: [0, 1],
outputRange: [26, 66],
});
this.expandoButtonsStyle = {
...unboundStyles.expandoButtons,
width: expandoButtonsWidth,
};
const expandOpacity = sub(1, expandoButtonsOpen);
this.expandIconStyle = {
...unboundStyles.expandIcon,
opacity: expandOpacity,
};
}
setUpSendIconAnimations() {
const initialSendButtonContainerOpen = trimMessage(this.props.draft)
? 1
: 0;
this.sendButtonContainerOpen = new Value(initialSendButtonContainerOpen);
this.targetSendButtonContainerOpen = new Value(
initialSendButtonContainerOpen,
);
const prevTargetSendButtonContainerOpen = new Value(
initialSendButtonContainerOpen,
);
const sendButtonClock = new Clock();
const sendButtonContainerOpen = block([
cond(
neq(
this.targetSendButtonContainerOpen,
prevTargetSendButtonContainerOpen,
),
[
stopClock(sendButtonClock),
set(
prevTargetSendButtonContainerOpen,
this.targetSendButtonContainerOpen,
),
],
),
cond(
neq(this.sendButtonContainerOpen, this.targetSendButtonContainerOpen),
set(
this.sendButtonContainerOpen,
runTiming(
sendButtonClock,
this.sendButtonContainerOpen,
this.targetSendButtonContainerOpen,
true,
sendButtonAnimationConfig,
),
),
),
this.sendButtonContainerOpen,
]);
const sendButtonContainerWidth = interpolateNode(sendButtonContainerOpen, {
inputRange: [0, 1],
outputRange: [4, 38],
});
this.sendButtonContainerStyle = { width: sendButtonContainerWidth };
}
static mediaGalleryOpen(props: Props) {
const { keyboardState } = props;
return !!(keyboardState && keyboardState.mediaGalleryOpen);
}
static systemKeyboardShowing(props: Props) {
const { keyboardState } = props;
return !!(keyboardState && keyboardState.systemKeyboardShowing);
}
get systemKeyboardShowing() {
return ChatInputBar.systemKeyboardShowing(this.props);
}
immediatelyShowSendButton() {
this.sendButtonContainerOpen.setValue(1);
this.targetSendButtonContainerOpen.setValue(1);
}
updateSendButton(currentText: string) {
if (this.shouldShowTextInput) {
this.targetSendButtonContainerOpen.setValue(currentText === '' ? 0 : 1);
} else {
this.setUpSendIconAnimations();
}
}
componentDidMount() {
const { isActive, navigation } = this.props;
if (isActive) {
this.addEditInputMessageListener();
}
if (!navigation) {
return;
}
this.clearBeforeRemoveListener = navigation.addListener(
'beforeRemove',
this.onNavigationBeforeRemove,
);
this.clearFocusListener = navigation.addListener(
'focus',
this.onNavigationFocus,
);
this.clearBlurListener = navigation.addListener(
'blur',
this.onNavigationBlur,
);
}
componentWillUnmount() {
if (this.props.isActive) {
this.removeEditInputMessageListener();
}
if (this.clearBeforeRemoveListener) {
this.clearBeforeRemoveListener();
}
if (this.clearFocusListener) {
this.clearFocusListener();
}
if (this.clearBlurListener) {
this.clearBlurListener();
}
}
componentDidUpdate(prevProps: Props, prevState: State) {
if (
this.state.textEdited &&
this.state.text &&
this.props.threadInfo.id !== prevProps.threadInfo.id
) {
this.props.dispatch({
type: moveDraftActionType,
payload: {
oldKey: draftKeyFromThreadID(prevProps.threadInfo.id),
newKey: draftKeyFromThreadID(this.props.threadInfo.id),
},
});
} else if (!this.state.textEdited && this.props.draft !== prevProps.draft) {
this.setState({ text: this.props.draft });
}
if (this.props.isActive && !prevProps.isActive) {
this.addEditInputMessageListener();
} else if (!this.props.isActive && prevProps.isActive) {
this.removeEditInputMessageListener();
}
const currentText = trimMessage(this.state.text);
const prevText = trimMessage(prevState.text);
if (
(currentText === '' && prevText !== '') ||
(currentText !== '' && prevText === '')
) {
this.updateSendButton(currentText);
}
const systemKeyboardIsShowing = ChatInputBar.systemKeyboardShowing(
this.props,
);
const systemKeyboardWasShowing =
ChatInputBar.systemKeyboardShowing(prevProps);
if (systemKeyboardIsShowing && !systemKeyboardWasShowing) {
this.hideButtons();
} else if (!systemKeyboardIsShowing && systemKeyboardWasShowing) {
this.expandButtons();
}
const imageGalleryIsOpen = ChatInputBar.mediaGalleryOpen(this.props);
const imageGalleryWasOpen = ChatInputBar.mediaGalleryOpen(prevProps);
if (!imageGalleryIsOpen && imageGalleryWasOpen) {
this.hideButtons();
} else if (imageGalleryIsOpen && !imageGalleryWasOpen) {
this.expandButtons();
this.setIOSKeyboardHeight();
}
if (
this.props.messageEditingContext?.editState.editedMessage &&
!prevProps.messageEditingContext?.editState.editedMessage
) {
this.blockNavigation();
}
}
addEditInputMessageListener() {
invariant(
this.props.inputState,
'inputState should be set in addEditInputMessageListener',
);
this.props.inputState.addEditInputMessageListener(this.focusAndUpdateText);
}
removeEditInputMessageListener() {
invariant(
this.props.inputState,
'inputState should be set in removeEditInputMessageListener',
);
this.props.inputState.removeEditInputMessageListener(
this.focusAndUpdateText,
);
}
setIOSKeyboardHeight() {
if (Platform.OS !== 'ios') {
return;
}
const { textInput } = this;
if (!textInput) {
return;
}
const keyboardHeight = getKeyboardHeight();
if (keyboardHeight === null || keyboardHeight === undefined) {
return;
}
TextInputKeyboardMangerIOS.setKeyboardHeight(textInput, keyboardHeight);
}
get shouldShowTextInput(): boolean {
if (threadHasPermission(this.props.threadInfo, threadPermissions.VOICED)) {
return true;
}
// If the thread is created by somebody else while the viewer is attempting
// to create it, the threadInfo might be modified in-place
// and won't list the viewer as a member,
// which will end up hiding the input.
// In this case, we will assume that our creation action
// will get translated into a join, and as long
// as members are voiced, we can show the input.
if (!this.props.threadCreationInProgress) {
return false;
}
return checkIfDefaultMembersAreVoiced(this.props.threadInfo);
}
render() {
const isMember = viewerIsMember(this.props.threadInfo);
const canJoin = threadHasPermission(
this.props.threadInfo,
threadPermissions.JOIN_THREAD,
);
let joinButton = null;
const threadColor = `#${this.props.threadInfo.color}`;
const isEditMode = this.isEditMode();
if (!isMember && canJoin && !this.props.threadCreationInProgress) {
let buttonContent;
if (this.props.joinThreadLoadingStatus === 'loading') {
buttonContent = (
);
} else {
const textStyle = colorIsDark(this.props.threadInfo.color)
? this.props.styles.joinButtonTextLight
: this.props.styles.joinButtonTextDark;
buttonContent = (
Join Chat
);
}
joinButton = (
);
}
const typeaheadRegexMatches = getTypeaheadRegexMatches(
this.state.selectionState.text,
this.state.selectionState.selection,
nativeTypeaheadRegex,
);
let typeaheadTooltip = null;
if (typeaheadRegexMatches && !isEditMode) {
const typeaheadMatchedStrings = {
textBeforeAtSymbol: typeaheadRegexMatches[1] ?? '',
usernamePrefix: typeaheadRegexMatches[4] ?? '',
};
const suggestedUsers = getTypeaheadUserSuggestions(
this.props.userSearchIndex,
this.props.mentionsCandidates,
this.props.viewerID,
typeaheadMatchedStrings.usernamePrefix,
);
if (suggestedUsers.length > 0) {
typeaheadTooltip = (
);
}
}
let content;
const defaultMembersAreVoiced = checkIfDefaultMembersAreVoiced(
this.props.threadInfo,
);
if (this.shouldShowTextInput) {
content = this.renderInput();
} else if (
threadFrozenDueToViewerBlock(
this.props.threadInfo,
this.props.viewerID,
this.props.userInfos,
) &&
threadActualMembers(this.props.threadInfo.members).length === 2
) {
content = (
You can’t send messages to a user that you’ve blocked.
);
} else if (isMember) {
content = (
You don’t have permission to send messages.
);
} else if (defaultMembersAreVoiced && canJoin) {
content = null;
} else {
content = (
You don’t have permission to send messages.
);
}
const keyboardInputHost =
Platform.OS === 'android' ? null : (
);
let editedMessage;
if (isEditMode && this.props.editedMessagePreview) {
const { message } = this.props.editedMessagePreview;
editedMessage = (
Editing message
{message.text}
);
}
return (
{typeaheadTooltip}
{joinButton}
{editedMessage}
{content}
{keyboardInputHost}
);
}
renderInput() {
const expandoButton = (
);
const threadColor = `#${this.props.threadInfo.color}`;
const expandoButtonsViewStyle = [this.props.styles.innerExpandoButtons];
if (this.isEditMode()) {
expandoButtonsViewStyle.push({ display: 'none' });
}
return (
{this.state.buttonsExpanded ? expandoButton : null}
{this.state.buttonsExpanded ? null : expandoButton}
);
}
textInputRef = (textInput: ?React.ElementRef) => {
this.textInput = textInput;
};
clearableTextInputRef = (clearableTextInput: ?ClearableTextInput) => {
this.clearableTextInput = clearableTextInput;
};
selectableTextInputRef = (
selectableTextInput: ?React.ElementRef,
) => {
this.selectableTextInput = selectableTextInput;
};
updateText = (text: string) => {
if (this.state.isExitingDuringEditMode) {
return;
}
this.setState({ text, textEdited: true });
this.props.messageEditingContext?.setEditedMessageChanged(
this.isMessageEdited(text),
);
if (this.isEditMode()) {
return;
}
this.saveDraft(text);
};
updateSelectionState: (data: SyncedSelectionData) => void = data => {
this.setState({ selectionState: data });
};
saveDraft = _throttle(text => {
this.props.dispatch({
type: updateDraftActionType,
payload: {
key: draftKeyFromThreadID(this.props.threadInfo.id),
text,
},
});
}, 400);
focusAndUpdateTextAndSelection = (text: string, selection: Selection) => {
this.selectableTextInput?.prepareForSelectionMutation(text, selection);
this.setState({
text,
textEdited: true,
selectionState: { text, selection },
});
this.saveDraft(text);
this.focusAndUpdateButtonsVisibility();
};
focusAndUpdateText = (params: EditInputBarMessageParameters) => {
const { message: text, mode } = params;
const currentText = this.state.text;
if (mode === 'replace') {
this.updateText(text);
} else if (!currentText.startsWith(text)) {
const prependedText = text.concat(currentText);
this.updateText(prependedText);
}
this.focusAndUpdateButtonsVisibility();
};
focusAndUpdateButtonsVisibility = () => {
const { textInput } = this;
if (!textInput) {
return;
}
this.immediatelyShowSendButton();
this.immediatelyHideButtons();
textInput.focus();
};
onSend = async () => {
if (!trimMessage(this.state.text)) {
return;
}
const editedMessage = this.getEditedMessage();
if (editedMessage && editedMessage.id) {
this.editMessage(editedMessage.id, this.state.text);
return;
}
this.updateSendButton('');
const { clearableTextInput } = this;
invariant(
clearableTextInput,
'clearableTextInput should be sent in onSend',
);
let text = await clearableTextInput.getValueAndReset();
text = trimMessage(text);
if (!text) {
return;
}
const localID = `${localIDPrefix}${this.props.nextLocalID}`;
const creatorID = this.props.viewerID;
invariant(creatorID, 'should have viewer ID in order to send a message');
invariant(
this.props.inputState,
'inputState should be set in ChatInputBar.onSend',
);
this.props.inputState.sendTextMessage(
{
type: messageTypes.TEXT,
localID,
threadID: this.props.threadInfo.id,
text,
creatorID,
time: Date.now(),
},
this.props.threadInfo,
this.props.parentThreadInfo,
);
};
isEditMode = () => {
const editState = this.props.messageEditingContext?.editState;
const isThisThread =
editState?.editedMessage?.threadID === this.props.threadInfo.id;
return editState && editState.editedMessage !== null && isThisThread;
};
isMessageEdited = newText => {
let text = newText ?? this.state.text;
text = trimMessage(text);
const originalText = this.props.editedMessageInfo?.text;
return text !== originalText;
};
unblockNavigation = () => {
const { navigation } = this.props;
if (!navigation) {
return;
}
navigation.setParams({ removeEditMode: null });
};
removeEditMode: RemoveEditMode = action => {
const { navigation } = this.props;
if (!navigation || this.state.isExitingDuringEditMode) {
return 'ignore_action';
}
if (!this.isMessageEdited()) {
this.unblockNavigation();
return 'reduce_action';
}
const unblockAndDispatch = () => {
this.unblockNavigation();
navigation.dispatch(action);
};
const onContinueEditing = () => {
this.props.overlayContext?.resetScrollBlockingModalStatus();
};
exitEditAlert({
onDiscard: unblockAndDispatch,
onContinueEditing,
});
return 'ignore_action';
};
blockNavigation = () => {
const { navigation } = this.props;
if (!navigation || !navigation.isFocused()) {
return;
}
navigation.setParams({
removeEditMode: this.removeEditMode,
});
};
editMessage = async (messageID: string, text: string) => {
if (!this.isMessageEdited()) {
this.exitEditMode();
return;
}
text = trimMessage(text);
try {
await this.props.editMessage(messageID, text);
this.exitEditMode();
} catch (error) {
Alert.alert(
'Couldn’t edit the message',
'Please try again later',
[{ text: 'OK' }],
{
cancelable: true,
},
);
}
};
getEditedMessage = () => {
const editState = this.props.messageEditingContext?.editState;
return editState?.editedMessage;
};
onPressExitEditMode = () => {
if (!this.isMessageEdited()) {
this.exitEditMode();
return;
}
exitEditAlert({
onDiscard: this.exitEditMode,
});
};
scrollToEditedMessage = () => {
const editedMessage = this.getEditedMessage();
if (!editedMessage) {
return;
}
const editedMessageKey = messageKey(editedMessage);
this.props.inputState?.scrollToMessage(editedMessageKey);
};
exitEditMode = () => {
this.props.messageEditingContext?.setEditedMessage(null, () => {
this.unblockNavigation();
this.updateText(this.props.draft);
this.focusAndUpdateButtonsVisibility();
this.updateSendButton(this.props.draft);
});
};
onNavigationFocus = () => {
this.setState({ isExitingDuringEditMode: false });
};
onNavigationBlur = () => {
if (!this.isEditMode()) {
return;
}
this.setState(
{ text: this.props.draft, isExitingDuringEditMode: true },
this.exitEditMode,
);
};
onNavigationBeforeRemove = e => {
if (!this.isEditMode()) {
return;
}
const { action } = e.data;
e.preventDefault();
const saveExit = () => {
this.props.messageEditingContext?.setEditedMessage(null, () => {
this.setState({ isExitingDuringEditMode: true }, () => {
if (!this.props.navigation) {
return;
}
this.props.navigation.dispatch(action);
});
});
};
if (!this.isMessageEdited()) {
saveExit();
return;
}
exitEditAlert({
onDiscard: saveExit,
});
};
onPressJoin = () => {
this.props.dispatchActionPromise(joinThreadActionTypes, this.joinAction());
};
async joinAction() {
const query = this.props.calendarQuery();
return await this.props.joinThread({
threadID: this.props.threadInfo.id,
calendarQuery: {
startDate: query.startDate,
endDate: query.endDate,
filters: [
...query.filters,
{ type: 'threads', threadIDs: [this.props.threadInfo.id] },
],
},
});
}
expandButtons = () => {
if (this.state.buttonsExpanded || this.isEditMode()) {
return;
}
this.targetExpandoButtonsOpen.setValue(1);
this.setState({ buttonsExpanded: true });
};
hideButtons() {
if (
ChatInputBar.mediaGalleryOpen(this.props) ||
!this.systemKeyboardShowing ||
!this.state.buttonsExpanded
) {
return;
}
this.targetExpandoButtonsOpen.setValue(0);
this.setState({ buttonsExpanded: false });
}
immediatelyHideButtons() {
this.expandoButtonsOpen.setValue(0);
this.targetExpandoButtonsOpen.setValue(0);
this.setState({ buttonsExpanded: false });
}
showMediaGallery = () => {
const { keyboardState } = this.props;
invariant(keyboardState, 'keyboardState should be initialized');
keyboardState.showMediaGallery(this.props.threadInfo);
};
dismissKeyboard = () => {
const { keyboardState } = this.props;
keyboardState && keyboardState.dismissKeyboard();
};
}
const unboundStyles = {
cameraIcon: {
paddingBottom: Platform.OS === 'android' ? 11 : 8,
paddingRight: 5,
},
cameraRollIcon: {
paddingBottom: Platform.OS === 'android' ? 11 : 8,
paddingRight: 5,
},
container: {
backgroundColor: 'listBackground',
paddingLeft: Platform.OS === 'android' ? 10 : 5,
},
expandButton: {
bottom: 0,
position: 'absolute',
right: 0,
},
expandIcon: {
paddingBottom: Platform.OS === 'android' ? 13 : 11,
paddingRight: 2,
},
expandoButtons: {
alignSelf: 'flex-end',
},
explanation: {
color: 'listBackgroundSecondaryLabel',
paddingBottom: 4,
paddingTop: 1,
textAlign: 'center',
},
innerExpandoButtons: {
alignItems: 'flex-end',
alignSelf: 'flex-end',
flexDirection: 'row',
},
inputContainer: {
flexDirection: 'row',
},
joinButton: {
borderRadius: 8,
flex: 1,
justifyContent: 'center',
marginHorizontal: 12,
marginVertical: 3,
},
joinButtonContainer: {
flexDirection: 'row',
height: 48,
marginBottom: 8,
},
editView: {
marginLeft: 20,
marginRight: 20,
padding: 10,
flexDirection: 'row',
justifyContent: 'space-between',
},
editViewContent: {
flex: 1,
paddingRight: 6,
},
exitEditButton: {
marginTop: 6,
},
editingLabel: {
paddingBottom: 4,
},
editingMessagePreview: {
color: 'listForegroundLabel',
},
joinButtonContent: {
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
},
joinButtonTextLight: {
color: 'white',
fontSize: 20,
marginHorizontal: 4,
},
joinButtonTextDark: {
color: 'black',
fontSize: 20,
marginHorizontal: 4,
},
joinThreadLoadingIndicator: {
paddingVertical: 2,
},
sendButton: {
position: 'absolute',
bottom: 4,
left: 0,
},
sendIcon: {
paddingLeft: 9,
paddingRight: 8,
paddingVertical: 6,
},
textInput: {
backgroundColor: 'listInputBackground',
borderRadius: 8,
color: 'listForegroundLabel',
fontSize: 16,
marginLeft: 4,
marginRight: 4,
marginTop: 6,
marginBottom: 8,
maxHeight: 110,
paddingHorizontal: 10,
paddingVertical: 5,
},
};
const joinThreadLoadingStatusSelector = createLoadingStatusSelector(
joinThreadActionTypes,
);
const createThreadLoadingStatusSelector =
createLoadingStatusSelector(newThreadActionTypes);
type ConnectedChatInputBarBaseProps = {
...BaseProps,
+onInputBarLayout?: (event: LayoutEvent) => mixed,
+openCamera: () => mixed,
+navigation?: ChatNavigationProp<'MessageList'>,
};
function ConnectedChatInputBarBase(props: ConnectedChatInputBarBaseProps) {
const navContext = React.useContext(NavContext);
const keyboardState = React.useContext(KeyboardContext);
const inputState = React.useContext(InputStateContext);
const overlayContext = React.useContext(OverlayContext);
const viewerID = useSelector(
state => state.currentUserInfo && state.currentUserInfo.id,
);
const draft = useSelector(
state =>
state.draftStore.drafts[draftKeyFromThreadID(props.threadInfo.id)] ?? '',
);
const joinThreadLoadingStatus = useSelector(joinThreadLoadingStatusSelector);
const createThreadLoadingStatus = useSelector(
createThreadLoadingStatusSelector,
);
const threadCreationInProgress = createThreadLoadingStatus === 'loading';
const calendarQuery = useSelector(state =>
nonThreadCalendarQuery({
redux: state,
navContext,
}),
);
const nextLocalID = useSelector(state => state.nextLocalID);
const userInfos = useSelector(state => state.userStore.userInfos);
const styles = useStyles(unboundStyles);
const colors = useColors();
const isActive = React.useMemo(
() => props.threadInfo.id === activeThreadSelector(navContext),
[props.threadInfo.id, navContext],
);
const dispatch = useDispatch();
const dispatchActionPromise = useDispatchActionPromise();
const callJoinThread = useServerCall(joinThread);
const userSearchIndex = useSelector(userStoreSearchIndex);
const { parentThreadID } = props.threadInfo;
const parentThreadInfo = useSelector(state =>
parentThreadID ? threadInfoSelector(state)[parentThreadID] : null,
);
const mentionsCandidates = getMentionsCandidates(
props.threadInfo,
parentThreadInfo,
);
const messageEditingContext = React.useContext(MessageEditingContext);
const editedMessageInfo = messageEditingContext?.editState.editedMessage;
const editedMessagePreview = useMessagePreview(
editedMessageInfo,
props.threadInfo,
getDefaultTextMessageRules().simpleMarkdownRules,
);
const editMessage = useEditMessage();
return (
);
}
type DummyChatInputBarProps = {
...BaseProps,
+onHeightMeasured: (height: number) => mixed,
};
const noop = () => {};
function DummyChatInputBar(props: DummyChatInputBarProps): React.Node {
const { onHeightMeasured, ...restProps } = props;
const onInputBarLayout = React.useCallback(
(event: LayoutEvent) => {
const { height } = event.nativeEvent.layout;
onHeightMeasured(height);
},
[onHeightMeasured],
);
return (
);
}
type ChatInputBarProps = {
...BaseProps,
+navigation: ChatNavigationProp<'MessageList'>,
+route: NavigationRoute<'MessageList'>,
};
const ConnectedChatInputBar: React.ComponentType =
React.memo(function ConnectedChatInputBar(
props: ChatInputBarProps,
) {
const { navigation, route, ...restProps } = props;
const keyboardState = React.useContext(KeyboardContext);
const { threadInfo } = props;
const imagePastedCallback = React.useCallback(
imagePastedEvent => {
if (threadInfo.id !== imagePastedEvent.threadID) {
return;
}
const pastedImage: PhotoPaste = {
step: 'photo_paste',
dimensions: {
height: imagePastedEvent.height,
width: imagePastedEvent.width,
},
filename: imagePastedEvent.fileName,
uri: 'file://' + imagePastedEvent.filePath,
selectTime: 0,
sendTime: 0,
retries: 0,
};
navigation.navigate<'ImagePasteModal'>({
name: ImagePasteModalRouteName,
params: {
imagePasteStagingInfo: pastedImage,
thread: threadInfo,
},
});
},
[navigation, threadInfo],
);
React.useEffect(() => {
const imagePasteListener = NativeAppEventEmitter.addListener(
'imagePasted',
imagePastedCallback,
);
return () => imagePasteListener.remove();
}, [imagePastedCallback]);
const chatContext = React.useContext(ChatContext);
invariant(chatContext, 'should be set');
const { setChatInputBarHeight, deleteChatInputBarHeight } = chatContext;
const onInputBarLayout = React.useCallback(
(event: LayoutEvent) => {
const { height } = event.nativeEvent.layout;
setChatInputBarHeight(threadInfo.id, height);
},
[threadInfo.id, setChatInputBarHeight],
);
React.useEffect(() => {
return () => {
deleteChatInputBarHeight(threadInfo.id);
};
}, [deleteChatInputBarHeight, threadInfo.id]);
const openCamera = React.useCallback(() => {
keyboardState?.dismissKeyboard();
navigation.navigate<'ChatCameraModal'>({
name: ChatCameraModalRouteName,
params: {
presentedFrom: route.key,
thread: threadInfo,
},
});
}, [keyboardState, navigation, route.key, threadInfo]);
return (
);
});
export { ConnectedChatInputBar as ChatInputBar, DummyChatInputBar };
diff --git a/native/chat/compose-subchannel.react.js b/native/chat/compose-subchannel.react.js
index c8c4db7ec..0e4af96f2 100644
--- a/native/chat/compose-subchannel.react.js
+++ b/native/chat/compose-subchannel.react.js
@@ -1,382 +1,383 @@
// @flow
import invariant from 'invariant';
import _filter from 'lodash/fp/filter.js';
import _flow from 'lodash/fp/flow.js';
import _sortBy from 'lodash/fp/sortBy.js';
import * as React from 'react';
-import { View, Text, Alert } from 'react-native';
+import { View, Text } from 'react-native';
import { newThreadActionTypes, newThread } from 'lib/actions/thread-actions.js';
import { useENSNames } from 'lib/hooks/ens-cache.js';
import { threadInfoSelector } from 'lib/selectors/thread-selectors.js';
import {
userInfoSelectorForPotentialMembers,
userSearchIndexForPotentialMembers,
} from 'lib/selectors/user-selectors.js';
import { getPotentialMemberItems } from 'lib/shared/search-utils.js';
import { threadInFilterList, userIsMember } from 'lib/shared/thread-utils.js';
import { type ThreadType, threadTypes } from 'lib/types/thread-types-enum.js';
import { type ThreadInfo } from 'lib/types/thread-types.js';
import { type AccountUserInfo } from 'lib/types/user-types.js';
import {
useServerCall,
useDispatchActionPromise,
} from 'lib/utils/action-utils.js';
import type { ChatNavigationProp } from './chat.react.js';
import { useNavigateToThread } from './message-list-types.js';
import ParentThreadHeader from './parent-thread-header.react.js';
import LinkButton from '../components/link-button.react.js';
import { createTagInput } from '../components/tag-input.react.js';
import ThreadList from '../components/thread-list.react.js';
import UserList from '../components/user-list.react.js';
import { useCalendarQuery } from '../navigation/nav-selectors.js';
import type { NavigationRoute } from '../navigation/route-names.js';
import { useSelector } from '../redux/redux-utils.js';
import { useStyles } from '../themes/colors.js';
+import Alert from '../utils/alert.js';
const TagInput = createTagInput();
const tagInputProps = {
placeholder: 'username',
autoFocus: true,
returnKeyType: 'go',
};
const tagDataLabelExtractor = (userInfo: AccountUserInfo) => userInfo.username;
export type ComposeSubchannelParams = {
+threadType: ThreadType,
+parentThreadInfo: ThreadInfo,
};
type Props = {
+navigation: ChatNavigationProp<'ComposeSubchannel'>,
+route: NavigationRoute<'ComposeSubchannel'>,
};
function ComposeSubchannel(props: Props): React.Node {
const [usernameInputText, setUsernameInputText] = React.useState('');
const [userInfoInputArray, setUserInfoInputArray] = React.useState<
$ReadOnlyArray,
>([]);
const [createButtonEnabled, setCreateButtonEnabled] =
React.useState(true);
const tagInputRef = React.useRef();
const onUnknownErrorAlertAcknowledged = React.useCallback(() => {
setUsernameInputText('');
tagInputRef.current?.focus();
}, []);
const waitingOnThreadIDRef = React.useRef();
const { threadType, parentThreadInfo } = props.route.params;
const userInfoInputIDs = userInfoInputArray.map(userInfo => userInfo.id);
const callNewThread = useServerCall(newThread);
const calendarQuery = useCalendarQuery();
const newChatThreadAction = React.useCallback(async () => {
try {
const assumedThreadType =
threadType ?? threadTypes.COMMUNITY_SECRET_SUBTHREAD;
const query = calendarQuery();
invariant(
assumedThreadType === 3 ||
assumedThreadType === 4 ||
assumedThreadType === 6 ||
assumedThreadType === 7,
"Sidebars and communities can't be created from the thread composer",
);
const result = await callNewThread({
type: assumedThreadType,
parentThreadID: parentThreadInfo.id,
initialMemberIDs: userInfoInputIDs,
color: parentThreadInfo.color,
calendarQuery: query,
});
waitingOnThreadIDRef.current = result.newThreadID;
return result;
} catch (e) {
setCreateButtonEnabled(true);
Alert.alert(
'Unknown error',
'Uhh... try again?',
[{ text: 'OK', onPress: onUnknownErrorAlertAcknowledged }],
{ cancelable: false },
);
throw e;
}
}, [
threadType,
userInfoInputIDs,
calendarQuery,
parentThreadInfo,
callNewThread,
onUnknownErrorAlertAcknowledged,
]);
const dispatchActionPromise = useDispatchActionPromise();
const dispatchNewChatThreadAction = React.useCallback(() => {
setCreateButtonEnabled(false);
dispatchActionPromise(newThreadActionTypes, newChatThreadAction());
}, [dispatchActionPromise, newChatThreadAction]);
const userInfoInputArrayEmpty = userInfoInputArray.length === 0;
const onPressCreateThread = React.useCallback(() => {
if (!createButtonEnabled) {
return;
}
if (userInfoInputArrayEmpty) {
Alert.alert(
'Chatting to yourself?',
'Are you sure you want to create a channel containing only yourself?',
[
{ text: 'Cancel', style: 'cancel' },
{ text: 'Confirm', onPress: dispatchNewChatThreadAction },
],
{ cancelable: true },
);
} else {
dispatchNewChatThreadAction();
}
}, [
createButtonEnabled,
userInfoInputArrayEmpty,
dispatchNewChatThreadAction,
]);
const { navigation } = props;
const { setOptions } = navigation;
React.useEffect(() => {
setOptions({
// eslint-disable-next-line react/display-name
headerRight: () => (
),
});
}, [setOptions, onPressCreateThread, createButtonEnabled]);
const { setParams } = navigation;
const parentThreadInfoID = parentThreadInfo.id;
const reduxParentThreadInfo = useSelector(
state => threadInfoSelector(state)[parentThreadInfoID],
);
React.useEffect(() => {
if (reduxParentThreadInfo) {
setParams({ parentThreadInfo: reduxParentThreadInfo });
}
}, [reduxParentThreadInfo, setParams]);
const threadInfos = useSelector(threadInfoSelector);
const newlyCreatedThreadInfo = waitingOnThreadIDRef.current
? threadInfos[waitingOnThreadIDRef.current]
: null;
const { pushNewThread } = navigation;
React.useEffect(() => {
if (!newlyCreatedThreadInfo) {
return;
}
const waitingOnThreadID = waitingOnThreadIDRef.current;
if (waitingOnThreadID === null || waitingOnThreadID === undefined) {
return;
}
waitingOnThreadIDRef.current = undefined;
pushNewThread(newlyCreatedThreadInfo);
}, [newlyCreatedThreadInfo, pushNewThread]);
const otherUserInfos = useSelector(userInfoSelectorForPotentialMembers);
const userSearchIndex = useSelector(userSearchIndexForPotentialMembers);
const { community } = parentThreadInfo;
const communityThreadInfo = useSelector(state =>
community ? threadInfoSelector(state)[community] : null,
);
const userSearchResults = React.useMemo(
() =>
getPotentialMemberItems({
text: usernameInputText,
userInfos: otherUserInfos,
searchIndex: userSearchIndex,
excludeUserIDs: userInfoInputIDs,
inputParentThreadInfo: parentThreadInfo,
inputCommunityThreadInfo: communityThreadInfo,
threadType,
}),
[
usernameInputText,
otherUserInfos,
userSearchIndex,
userInfoInputIDs,
parentThreadInfo,
communityThreadInfo,
threadType,
],
);
const existingThreads = React.useMemo(() => {
if (userInfoInputIDs.length === 0) {
return [];
}
return _flow(
_filter(
(threadInfo: ThreadInfo) =>
threadInFilterList(threadInfo) &&
threadInfo.parentThreadID === parentThreadInfo.id &&
userInfoInputIDs.every(userID => userIsMember(threadInfo, userID)),
),
_sortBy(
([
'members.length',
(threadInfo: ThreadInfo) => (threadInfo.name ? 1 : 0),
]: $ReadOnlyArray mixed)>),
),
)(threadInfos);
}, [userInfoInputIDs, threadInfos, parentThreadInfo]);
const navigateToThread = useNavigateToThread();
const onSelectExistingThread = React.useCallback(
(threadID: string) => {
const threadInfo = threadInfos[threadID];
navigateToThread({ threadInfo });
},
[threadInfos, navigateToThread],
);
const onUserSelect = React.useCallback(
({ id }: AccountUserInfo) => {
if (userInfoInputIDs.some(existingUserID => id === existingUserID)) {
return;
}
setUserInfoInputArray(oldUserInfoInputArray => [
...oldUserInfoInputArray,
otherUserInfos[id],
]);
setUsernameInputText('');
},
[userInfoInputIDs, otherUserInfos],
);
const styles = useStyles(unboundStyles);
let existingThreadsSection = null;
if (existingThreads.length > 0) {
existingThreadsSection = (
Existing channels
);
}
const inputProps = React.useMemo(
() => ({
...tagInputProps,
onSubmitEditing: onPressCreateThread,
}),
[onPressCreateThread],
);
const userSearchResultWithENSNames = useENSNames(userSearchResults);
const userInfoInputArrayWithENSNames = useENSNames(userInfoInputArray);
return (
To:
{existingThreadsSection}
);
}
const unboundStyles = {
container: {
flex: 1,
},
existingThreadList: {
backgroundColor: 'modalBackground',
flex: 1,
paddingRight: 12,
},
existingThreads: {
flex: 1,
},
existingThreadsLabel: {
color: 'modalForegroundSecondaryLabel',
fontSize: 16,
paddingLeft: 12,
textAlign: 'center',
},
existingThreadsRow: {
backgroundColor: 'modalForeground',
borderBottomWidth: 1,
borderColor: 'modalForegroundBorder',
borderTopWidth: 1,
paddingVertical: 6,
},
listItem: {
color: 'modalForegroundLabel',
},
tagInputContainer: {
flex: 1,
marginLeft: 8,
paddingRight: 12,
},
tagInputLabel: {
color: 'modalForegroundSecondaryLabel',
fontSize: 16,
paddingLeft: 12,
},
userList: {
backgroundColor: 'modalBackground',
flex: 1,
paddingLeft: 35,
paddingRight: 12,
},
userSelectionRow: {
alignItems: 'center',
backgroundColor: 'modalForeground',
borderBottomWidth: 1,
borderColor: 'modalForegroundBorder',
flexDirection: 'row',
paddingVertical: 6,
},
};
const MemoizedComposeSubchannel: React.ComponentType =
React.memo(ComposeSubchannel);
export default MemoizedComposeSubchannel;
diff --git a/native/chat/message-report-utils.js b/native/chat/message-report-utils.js
index c459ebee3..83521621e 100644
--- a/native/chat/message-report-utils.js
+++ b/native/chat/message-report-utils.js
@@ -1,61 +1,61 @@
// @flow
import * as React from 'react';
-import { Alert } from 'react-native';
import {
sendMessageReport,
sendMessageReportActionTypes,
} from 'lib/actions/message-report-actions.js';
import {
useServerCall,
useDispatchActionPromise,
} from 'lib/utils/action-utils.js';
import { displayActionResultModal } from '../navigation/action-result-modal.js';
import type { TooltipRoute } from '../tooltip/tooltip.react.js';
+import Alert from '../utils/alert.js';
const confirmReport = () => displayActionResultModal('reported to admin');
function useOnPressReport(
route:
| TooltipRoute<'TextMessageTooltipModal'>
| TooltipRoute<'MultimediaMessageTooltipModal'>,
): () => mixed {
const messageID = route.params.item.messageInfo.id;
const dispatchActionPromise = useDispatchActionPromise();
const callSendMessageReport = useServerCall(sendMessageReport);
return React.useCallback(() => {
if (!messageID) {
Alert.alert(
'Couldn’t send the report',
'Uhh... try again?',
[{ text: 'OK' }],
{
cancelable: false,
},
);
return;
}
const messageReportPromise = (async () => {
try {
const result = await callSendMessageReport({ messageID });
confirmReport();
return result;
} catch (e) {
Alert.alert(
'Couldn’t send the report',
'Uhh... try again?',
[{ text: 'OK' }],
{
cancelable: false,
},
);
throw e;
}
})();
dispatchActionPromise(sendMessageReportActionTypes, messageReportPromise);
}, [callSendMessageReport, messageID, dispatchActionPromise]);
}
export { useOnPressReport };
diff --git a/native/chat/reaction-message-utils.js b/native/chat/reaction-message-utils.js
index c6ed789ed..abb8b22db 100644
--- a/native/chat/reaction-message-utils.js
+++ b/native/chat/reaction-message-utils.js
@@ -1,207 +1,207 @@
// @flow
import invariant from 'invariant';
import * as React from 'react';
-import Alert from 'react-native/Libraries/Alert/Alert.js';
import {
sendReactionMessage,
sendReactionMessageActionTypes,
} from 'lib/actions/message-actions.js';
import type { ReactionInfo } from 'lib/selectors/chat-selectors.js';
import { messageTypes } from 'lib/types/message-types-enum.js';
import type { RawReactionMessageInfo } from 'lib/types/messages/reaction.js';
import {
useDispatchActionPromise,
useServerCall,
} from 'lib/utils/action-utils.js';
import { cloneError } from 'lib/utils/errors.js';
import { useSelector } from '../redux/redux-utils.js';
import type {
LayoutCoordinates,
VerticalBounds,
} from '../types/layout-types.js';
+import Alert from '../utils/alert.js';
function useSendReaction(
messageID: ?string,
localID: string,
threadID: string,
reactions: ReactionInfo,
): (reaction: string) => mixed {
const viewerID = useSelector(
state => state.currentUserInfo && state.currentUserInfo.id,
);
const callSendReactionMessage = useServerCall(sendReactionMessage);
const dispatchActionPromise = useDispatchActionPromise();
return React.useCallback(
reaction => {
if (!messageID) {
return;
}
invariant(viewerID, 'viewerID should be set');
const viewerReacted = reactions[reaction]
? reactions[reaction].viewerReacted
: false;
const action = viewerReacted ? 'remove_reaction' : 'add_reaction';
const reactionMessagePromise = (async () => {
try {
const result = await callSendReactionMessage({
threadID,
localID,
targetMessageID: messageID,
reaction,
action,
});
return {
localID,
serverID: result.id,
threadID,
time: result.time,
interface: result.interface,
};
} catch (e) {
Alert.alert(
'Couldn’t send the reaction',
'Please try again later',
[{ text: 'OK' }],
{
cancelable: true,
},
);
const copy = cloneError(e);
copy.localID = localID;
copy.threadID = threadID;
throw copy;
}
})();
const startingPayload: RawReactionMessageInfo = {
type: messageTypes.REACTION,
threadID,
localID,
creatorID: viewerID,
time: Date.now(),
targetMessageID: messageID,
reaction,
action,
};
dispatchActionPromise(
sendReactionMessageActionTypes,
reactionMessagePromise,
undefined,
startingPayload,
);
},
[
messageID,
viewerID,
reactions,
threadID,
localID,
dispatchActionPromise,
callSendReactionMessage,
],
);
}
type ReactionSelectionPopoverPositionArgs = {
+initialCoordinates: LayoutCoordinates,
+verticalBounds: VerticalBounds,
+margin: ?number,
};
type ReactionSelectionPopoverPosition = {
+containerStyle: {
+position: 'absolute',
+left?: number,
+right?: number,
+bottom?: number,
+top?: number,
...
},
+popoverLocation: 'above' | 'below',
};
function useReactionSelectionPopoverPosition({
initialCoordinates,
verticalBounds,
margin,
}: ReactionSelectionPopoverPositionArgs): ReactionSelectionPopoverPosition {
const calculatedMargin = getCalculatedMargin(margin);
const windowWidth = useSelector(state => state.dimensions.width);
const popoverLocation: 'above' | 'below' = (() => {
const { y, height } = initialCoordinates;
const contentTop = y;
const contentBottom = y + height;
const boundsTop = verticalBounds.y;
const boundsBottom = verticalBounds.y + verticalBounds.height;
const fullHeight =
reactionSelectionPopoverDimensions.height + calculatedMargin;
if (
contentBottom + fullHeight > boundsBottom &&
contentTop - fullHeight > boundsTop
) {
return 'above';
}
return 'below';
})();
const containerStyle = React.useMemo(() => {
const { x, width, height } = initialCoordinates;
const style = {};
style.position = 'absolute';
const extraLeftSpace = x;
const extraRightSpace = windowWidth - width - x;
if (extraLeftSpace < extraRightSpace) {
style.left = 0;
} else {
style.right = 0;
}
if (popoverLocation === 'above') {
style.bottom = height + calculatedMargin / 2;
} else {
style.top = height + calculatedMargin / 2;
}
return style;
}, [calculatedMargin, initialCoordinates, popoverLocation, windowWidth]);
return React.useMemo(
() => ({
popoverLocation,
containerStyle,
}),
[popoverLocation, containerStyle],
);
}
function getCalculatedMargin(margin: ?number): number {
return margin ?? 16;
}
const reactionSelectionPopoverDimensions = {
height: 56,
width: 316,
};
export {
useSendReaction,
useReactionSelectionPopoverPosition,
getCalculatedMargin,
reactionSelectionPopoverDimensions,
};
diff --git a/native/chat/relationship-prompt.react.js b/native/chat/relationship-prompt.react.js
index 811929001..0edf9b3b7 100644
--- a/native/chat/relationship-prompt.react.js
+++ b/native/chat/relationship-prompt.react.js
@@ -1,166 +1,167 @@
// @flow
import Icon from '@expo/vector-icons/FontAwesome5.js';
import * as React from 'react';
-import { Alert, Text, View } from 'react-native';
+import { Text, View } from 'react-native';
import { useRelationshipPrompt } from 'lib/hooks/relationship-prompt.js';
import { userRelationshipStatus } from 'lib/types/relationship-types.js';
import type { ThreadInfo } from 'lib/types/thread-types.js';
import type { UserInfo } from 'lib/types/user-types.js';
import Button from '../components/button.react.js';
import { useStyles } from '../themes/colors.js';
+import Alert from '../utils/alert.js';
type Props = {
+pendingPersonalThreadUserInfo: ?UserInfo,
+threadInfo: ThreadInfo,
};
const RelationshipPrompt: React.ComponentType = React.memo(
function RelationshipPrompt({
pendingPersonalThreadUserInfo,
threadInfo,
}: Props) {
const onErrorCallback = React.useCallback(() => {
Alert.alert('Unknown error', 'Uhh... try again?', [{ text: 'OK' }]);
}, []);
const {
otherUserInfo,
callbacks: { blockUser, unblockUser, friendUser, unfriendUser },
} = useRelationshipPrompt(
threadInfo,
onErrorCallback,
pendingPersonalThreadUserInfo,
);
const styles = useStyles(unboundStyles);
if (
!otherUserInfo ||
!otherUserInfo.username ||
otherUserInfo.relationshipStatus === userRelationshipStatus.FRIEND
) {
return null;
}
if (
otherUserInfo.relationshipStatus === userRelationshipStatus.BLOCKED_VIEWER
) {
return (
);
}
if (
otherUserInfo.relationshipStatus ===
userRelationshipStatus.BOTH_BLOCKED ||
otherUserInfo.relationshipStatus ===
userRelationshipStatus.BLOCKED_BY_VIEWER
) {
return (
);
}
if (
otherUserInfo.relationshipStatus ===
userRelationshipStatus.REQUEST_RECEIVED
) {
return (
);
}
if (
otherUserInfo.relationshipStatus === userRelationshipStatus.REQUEST_SENT
) {
return (
);
}
return (
);
},
);
const unboundStyles = {
container: {
paddingVertical: 10,
paddingHorizontal: 5,
backgroundColor: 'panelBackground',
flexDirection: 'row',
},
button: {
padding: 10,
borderRadius: 5,
flex: 1,
flexDirection: 'row',
justifyContent: 'center',
marginHorizontal: 5,
},
greenButton: {
backgroundColor: 'vibrantGreenButton',
},
redButton: {
backgroundColor: 'vibrantRedButton',
},
buttonText: {
fontSize: 11,
color: 'white',
fontWeight: 'bold',
textAlign: 'center',
marginLeft: 5,
},
};
export default RelationshipPrompt;
diff --git a/native/chat/settings/add-users-modal.react.js b/native/chat/settings/add-users-modal.react.js
index 7315f7542..eefe7329f 100644
--- a/native/chat/settings/add-users-modal.react.js
+++ b/native/chat/settings/add-users-modal.react.js
@@ -1,298 +1,299 @@
// @flow
import * as React from 'react';
-import { View, Text, ActivityIndicator, Alert } from 'react-native';
+import { View, Text, ActivityIndicator } from 'react-native';
import {
changeThreadSettingsActionTypes,
changeThreadSettings,
} from 'lib/actions/thread-actions.js';
import { useENSNames } from 'lib/hooks/ens-cache.js';
import { createLoadingStatusSelector } from 'lib/selectors/loading-selectors.js';
import { threadInfoSelector } from 'lib/selectors/thread-selectors.js';
import {
userInfoSelectorForPotentialMembers,
userSearchIndexForPotentialMembers,
} from 'lib/selectors/user-selectors.js';
import { getPotentialMemberItems } from 'lib/shared/search-utils.js';
import { threadActualMembers } from 'lib/shared/thread-utils.js';
import { type ThreadInfo } from 'lib/types/thread-types.js';
import { type AccountUserInfo } from 'lib/types/user-types.js';
import {
useServerCall,
useDispatchActionPromise,
} from 'lib/utils/action-utils.js';
import Button from '../../components/button.react.js';
import Modal from '../../components/modal.react.js';
import { createTagInput } from '../../components/tag-input.react.js';
import UserList from '../../components/user-list.react.js';
import type { RootNavigationProp } from '../../navigation/root-navigator.react.js';
import type { NavigationRoute } from '../../navigation/route-names.js';
import { useSelector } from '../../redux/redux-utils.js';
import { useStyles } from '../../themes/colors.js';
+import Alert from '../../utils/alert.js';
const TagInput = createTagInput();
const tagInputProps = {
placeholder: 'Select users to add',
autoFocus: true,
returnKeyType: 'go',
};
const tagDataLabelExtractor = (userInfo: AccountUserInfo) => userInfo.username;
export type AddUsersModalParams = {
+presentedFrom: string,
+threadInfo: ThreadInfo,
};
type Props = {
+navigation: RootNavigationProp<'AddUsersModal'>,
+route: NavigationRoute<'AddUsersModal'>,
};
function AddUsersModal(props: Props): React.Node {
const [usernameInputText, setUsernameInputText] = React.useState('');
const [userInfoInputArray, setUserInfoInputArray] = React.useState<
$ReadOnlyArray,
>([]);
const tagInputRef = React.useRef();
const onUnknownErrorAlertAcknowledged = React.useCallback(() => {
setUsernameInputText('');
setUserInfoInputArray([]);
tagInputRef.current?.focus();
}, []);
const { navigation } = props;
const { goBackOnce } = navigation;
const close = React.useCallback(() => {
goBackOnce();
}, [goBackOnce]);
const callChangeThreadSettings = useServerCall(changeThreadSettings);
const userInfoInputIDs = userInfoInputArray.map(userInfo => userInfo.id);
const { route } = props;
const { threadInfo } = route.params;
const threadID = threadInfo.id;
const addUsersToThread = React.useCallback(async () => {
try {
const result = await callChangeThreadSettings({
threadID: threadID,
changes: { newMemberIDs: userInfoInputIDs },
});
close();
return result;
} catch (e) {
Alert.alert(
'Unknown error',
'Uhh... try again?',
[{ text: 'OK', onPress: onUnknownErrorAlertAcknowledged }],
{ cancelable: false },
);
throw e;
}
}, [
callChangeThreadSettings,
threadID,
userInfoInputIDs,
close,
onUnknownErrorAlertAcknowledged,
]);
const inputLength = userInfoInputArray.length;
const dispatchActionPromise = useDispatchActionPromise();
const userInfoInputArrayEmpty = inputLength === 0;
const onPressAdd = React.useCallback(() => {
if (userInfoInputArrayEmpty) {
return;
}
dispatchActionPromise(changeThreadSettingsActionTypes, addUsersToThread());
}, [userInfoInputArrayEmpty, dispatchActionPromise, addUsersToThread]);
const changeThreadSettingsLoadingStatus = useSelector(
createLoadingStatusSelector(changeThreadSettingsActionTypes),
);
const isLoading = changeThreadSettingsLoadingStatus === 'loading';
const styles = useStyles(unboundStyles);
let addButton = null;
if (inputLength > 0) {
let activityIndicator = null;
if (isLoading) {
activityIndicator = (
);
}
const addButtonText = `Add (${inputLength})`;
addButton = (
);
}
let cancelButton;
if (!isLoading) {
cancelButton = (
);
} else {
cancelButton = ;
}
const threadMemberIDs = React.useMemo(
() => threadActualMembers(threadInfo.members),
[threadInfo.members],
);
const excludeUserIDs = React.useMemo(
() => userInfoInputIDs.concat(threadMemberIDs),
[userInfoInputIDs, threadMemberIDs],
);
const otherUserInfos = useSelector(userInfoSelectorForPotentialMembers);
const userSearchIndex = useSelector(userSearchIndexForPotentialMembers);
const { parentThreadID, community } = props.route.params.threadInfo;
const parentThreadInfo = useSelector(state =>
parentThreadID ? threadInfoSelector(state)[parentThreadID] : null,
);
const communityThreadInfo = useSelector(state =>
community ? threadInfoSelector(state)[community] : null,
);
const userSearchResults = React.useMemo(
() =>
getPotentialMemberItems({
text: usernameInputText,
userInfos: otherUserInfos,
searchIndex: userSearchIndex,
excludeUserIDs,
inputParentThreadInfo: parentThreadInfo,
inputCommunityThreadInfo: communityThreadInfo,
threadType: threadInfo.type,
}),
[
usernameInputText,
otherUserInfos,
userSearchIndex,
excludeUserIDs,
parentThreadInfo,
communityThreadInfo,
threadInfo.type,
],
);
const onChangeTagInput = React.useCallback(
(newUserInfoInputArray: $ReadOnlyArray) => {
if (!isLoading) {
setUserInfoInputArray(newUserInfoInputArray);
}
},
[isLoading],
);
const onChangeTagInputText = React.useCallback(
(text: string) => {
if (!isLoading) {
setUsernameInputText(text);
}
},
[isLoading],
);
const onUserSelect = React.useCallback(
({ id }: AccountUserInfo) => {
if (isLoading) {
return;
}
if (userInfoInputIDs.some(existingUserID => id === existingUserID)) {
return;
}
setUserInfoInputArray(oldUserInfoInputArray => [
...oldUserInfoInputArray,
otherUserInfos[id],
]);
setUsernameInputText('');
},
[isLoading, userInfoInputIDs, otherUserInfos],
);
const inputProps = React.useMemo(
() => ({
...tagInputProps,
onSubmitEditing: onPressAdd,
}),
[onPressAdd],
);
const userSearchResultWithENSNames = useENSNames(userSearchResults);
const userInfoInputArrayWithENSNames = useENSNames(userInfoInputArray);
return (
{cancelButton}
{addButton}
);
}
const unboundStyles = {
activityIndicator: {
paddingRight: 6,
},
addButton: {
backgroundColor: 'vibrantGreenButton',
borderRadius: 3,
flexDirection: 'row',
paddingHorizontal: 10,
paddingVertical: 4,
},
addText: {
color: 'white',
fontSize: 18,
},
buttons: {
flexDirection: 'row',
justifyContent: 'space-between',
marginTop: 12,
},
cancelButton: {
backgroundColor: 'modalButton',
borderRadius: 3,
paddingHorizontal: 10,
paddingVertical: 4,
},
cancelText: {
color: 'modalButtonLabel',
fontSize: 18,
},
};
const MemoizedAddUsersModal: React.ComponentType =
React.memo(AddUsersModal);
export default MemoizedAddUsersModal;
diff --git a/native/chat/settings/color-selector-modal.react.js b/native/chat/settings/color-selector-modal.react.js
index 805f232cd..85c138090 100644
--- a/native/chat/settings/color-selector-modal.react.js
+++ b/native/chat/settings/color-selector-modal.react.js
@@ -1,192 +1,193 @@
// @flow
import Icon from '@expo/vector-icons/FontAwesome.js';
import * as React from 'react';
-import { TouchableHighlight, Alert } from 'react-native';
+import { TouchableHighlight } from 'react-native';
import {
changeThreadSettingsActionTypes,
changeThreadSettings,
} from 'lib/actions/thread-actions.js';
import {
type ThreadInfo,
type ChangeThreadSettingsPayload,
type UpdateThreadRequest,
} from 'lib/types/thread-types.js';
import type { DispatchActionPromise } from 'lib/utils/action-utils.js';
import {
useServerCall,
useDispatchActionPromise,
} from 'lib/utils/action-utils.js';
import ColorSelector from '../../components/color-selector.react.js';
import Modal from '../../components/modal.react.js';
import type { RootNavigationProp } from '../../navigation/root-navigator.react.js';
import type { NavigationRoute } from '../../navigation/route-names.js';
import { useSelector } from '../../redux/redux-utils.js';
import { type Colors, useStyles, useColors } from '../../themes/colors.js';
+import Alert from '../../utils/alert.js';
export type ColorSelectorModalParams = {
+presentedFrom: string,
+color: string,
+threadInfo: ThreadInfo,
+setColor: (color: string) => void,
};
type BaseProps = {
+navigation: RootNavigationProp<'ColorSelectorModal'>,
+route: NavigationRoute<'ColorSelectorModal'>,
};
type Props = {
...BaseProps,
// Redux state
+colors: Colors,
+styles: typeof unboundStyles,
+windowWidth: number,
// Redux dispatch functions
+dispatchActionPromise: DispatchActionPromise,
// async functions that hit server APIs
+changeThreadSettings: (
request: UpdateThreadRequest,
) => Promise,
};
function ColorSelectorModal(props: Props): React.Node {
const {
changeThreadSettings: updateThreadSettings,
dispatchActionPromise,
windowWidth,
} = props;
const { threadInfo, setColor } = props.route.params;
const close = props.navigation.goBackOnce;
const onErrorAcknowledged = React.useCallback(() => {
setColor(threadInfo.color);
}, [setColor, threadInfo.color]);
const editColor = React.useCallback(
async (newColor: string) => {
const threadID = threadInfo.id;
try {
return await updateThreadSettings({
threadID,
changes: { color: newColor },
});
} catch (e) {
Alert.alert(
'Unknown error',
'Uhh... try again?',
[{ text: 'OK', onPress: onErrorAcknowledged }],
{ cancelable: false },
);
throw e;
}
},
[onErrorAcknowledged, threadInfo.id, updateThreadSettings],
);
const onColorSelected = React.useCallback(
(color: string) => {
const colorEditValue = color.substr(1);
setColor(colorEditValue);
close();
const action = changeThreadSettingsActionTypes.started;
const threadID = props.route.params.threadInfo.id;
dispatchActionPromise(
changeThreadSettingsActionTypes,
editColor(colorEditValue),
{
customKeyName: `${action}:${threadID}:color`,
},
);
},
[
setColor,
close,
dispatchActionPromise,
editColor,
props.route.params.threadInfo.id,
],
);
const { colorSelectorContainer, closeButton, closeButtonIcon } = props.styles;
// Based on the assumption we are always in portrait,
// and consequently width is the lowest dimensions
const modalStyle = React.useMemo(
() => [colorSelectorContainer, { height: 0.75 * windowWidth }],
[colorSelectorContainer, windowWidth],
);
const { modalIosHighlightUnderlay } = props.colors;
const { color } = props.route.params;
return (
);
}
const unboundStyles = {
closeButton: {
borderRadius: 3,
height: 18,
position: 'absolute',
right: 5,
top: 5,
width: 18,
},
closeButtonIcon: {
color: 'modalBackgroundSecondaryLabel',
left: 3,
position: 'absolute',
},
colorSelector: {
bottom: 10,
left: 10,
position: 'absolute',
right: 10,
top: 10,
},
colorSelectorContainer: {
backgroundColor: 'modalBackground',
borderRadius: 5,
flex: 0,
marginHorizontal: 15,
marginVertical: 20,
},
};
const ConnectedColorSelectorModal: React.ComponentType =
React.memo(function ConnectedColorSelectorModal(props: BaseProps) {
const styles = useStyles(unboundStyles);
const colors = useColors();
const windowWidth = useSelector(state => state.dimensions.width);
const dispatchActionPromise = useDispatchActionPromise();
const callChangeThreadSettings = useServerCall(changeThreadSettings);
return (
);
});
export default ConnectedColorSelectorModal;
diff --git a/native/chat/settings/thread-settings-description.react.js b/native/chat/settings/thread-settings-description.react.js
index 87821d14a..bc912f34e 100644
--- a/native/chat/settings/thread-settings-description.react.js
+++ b/native/chat/settings/thread-settings-description.react.js
@@ -1,323 +1,323 @@
// @flow
import invariant from 'invariant';
import * as React from 'react';
import {
Text,
- Alert,
ActivityIndicator,
TextInput as BaseTextInput,
View,
} from 'react-native';
import {
changeThreadSettingsActionTypes,
changeThreadSettings,
} from 'lib/actions/thread-actions.js';
import { createLoadingStatusSelector } from 'lib/selectors/loading-selectors.js';
import { threadHasPermission } from 'lib/shared/thread-utils.js';
import type { LoadingStatus } from 'lib/types/loading-types.js';
import { threadPermissions } from 'lib/types/thread-permission-types.js';
import {
type ThreadInfo,
type ChangeThreadSettingsPayload,
type UpdateThreadRequest,
} from 'lib/types/thread-types.js';
import {
type DispatchActionPromise,
useServerCall,
useDispatchActionPromise,
} from 'lib/utils/action-utils.js';
import SaveSettingButton from './save-setting-button.react.js';
import {
ThreadSettingsCategoryHeader,
ThreadSettingsCategoryFooter,
} from './thread-settings-category.react.js';
import Button from '../../components/button.react.js';
import EditSettingButton from '../../components/edit-setting-button.react.js';
import SWMansionIcon from '../../components/swmansion-icon.react.js';
import TextInput from '../../components/text-input.react.js';
import { useSelector } from '../../redux/redux-utils.js';
import { type Colors, useStyles, useColors } from '../../themes/colors.js';
import type {
LayoutEvent,
ContentSizeChangeEvent,
} from '../../types/react-native.js';
+import Alert from '../../utils/alert.js';
type BaseProps = {
+threadInfo: ThreadInfo,
+descriptionEditValue: ?string,
+setDescriptionEditValue: (value: ?string, callback?: () => void) => void,
+descriptionTextHeight: ?number,
+setDescriptionTextHeight: (number: number) => void,
+canChangeSettings: boolean,
};
type Props = {
...BaseProps,
// Redux state
+loadingStatus: LoadingStatus,
+colors: Colors,
+styles: typeof unboundStyles,
// Redux dispatch functions
+dispatchActionPromise: DispatchActionPromise,
// async functions that hit server APIs
+changeThreadSettings: (
update: UpdateThreadRequest,
) => Promise,
};
class ThreadSettingsDescription extends React.PureComponent {
textInput: ?React.ElementRef;
render() {
if (
this.props.descriptionEditValue !== null &&
this.props.descriptionEditValue !== undefined
) {
const textInputStyle = {};
if (
this.props.descriptionTextHeight !== undefined &&
this.props.descriptionTextHeight !== null
) {
textInputStyle.height = this.props.descriptionTextHeight;
}
return (
{this.renderButton()}
);
}
if (this.props.threadInfo.description) {
return (
{this.props.threadInfo.description}
{this.renderButton()}
);
}
const canEditThreadDescription = threadHasPermission(
this.props.threadInfo,
threadPermissions.EDIT_THREAD_DESCRIPTION,
);
const { panelIosHighlightUnderlay } = this.props.colors;
if (canEditThreadDescription) {
return (
);
}
return null;
}
renderButton() {
if (this.props.loadingStatus === 'loading') {
return (
);
} else if (
this.props.descriptionEditValue === null ||
this.props.descriptionEditValue === undefined
) {
return (
);
}
return ;
}
textInputRef = (textInput: ?React.ElementRef) => {
this.textInput = textInput;
};
onLayoutText = (event: LayoutEvent) => {
this.props.setDescriptionTextHeight(event.nativeEvent.layout.height);
};
onTextInputContentSizeChange = (event: ContentSizeChangeEvent) => {
this.props.setDescriptionTextHeight(event.nativeEvent.contentSize.height);
};
onPressEdit = () => {
this.props.setDescriptionEditValue(this.props.threadInfo.description);
};
onSubmit = () => {
invariant(
this.props.descriptionEditValue !== null &&
this.props.descriptionEditValue !== undefined,
'should be set',
);
const description = this.props.descriptionEditValue.trim();
if (description === this.props.threadInfo.description) {
this.props.setDescriptionEditValue(null);
return;
}
const editDescriptionPromise = this.editDescription(description);
const action = changeThreadSettingsActionTypes.started;
const threadID = this.props.threadInfo.id;
this.props.dispatchActionPromise(
changeThreadSettingsActionTypes,
editDescriptionPromise,
{
customKeyName: `${action}:${threadID}:description`,
},
);
editDescriptionPromise.then(() => {
this.props.setDescriptionEditValue(null);
});
};
async editDescription(newDescription: string) {
try {
return await this.props.changeThreadSettings({
threadID: this.props.threadInfo.id,
changes: { description: newDescription },
});
} catch (e) {
Alert.alert(
'Unknown error',
'Uhh... try again?',
[{ text: 'OK', onPress: this.onErrorAcknowledged }],
{ cancelable: false },
);
throw e;
}
}
onErrorAcknowledged = () => {
this.props.setDescriptionEditValue(
this.props.threadInfo.description,
() => {
invariant(this.textInput, 'textInput should be set');
this.textInput.focus();
},
);
};
}
const unboundStyles = {
addDescriptionButton: {
flexDirection: 'row',
paddingHorizontal: 24,
paddingVertical: 10,
},
addDescriptionText: {
color: 'panelForegroundTertiaryLabel',
flex: 1,
fontSize: 16,
},
editIcon: {
color: 'panelForegroundTertiaryLabel',
paddingLeft: 10,
textAlign: 'right',
},
outlineCategory: {
backgroundColor: 'panelForeground',
borderColor: 'panelForegroundBorder',
borderRadius: 1,
borderStyle: 'dashed',
borderWidth: 1,
marginLeft: -1,
marginRight: -1,
},
row: {
backgroundColor: 'panelForeground',
flexDirection: 'row',
paddingHorizontal: 24,
paddingVertical: 4,
},
text: {
color: 'panelForegroundSecondaryLabel',
flex: 1,
fontFamily: 'Arial',
fontSize: 16,
margin: 0,
padding: 0,
borderBottomColor: 'transparent',
},
};
const ConnectedThreadSettingsDescription: React.ComponentType =
React.memo(function ConnectedThreadSettingsDescription(
props: BaseProps,
) {
const threadID = props.threadInfo.id;
const loadingStatus = useSelector(
createLoadingStatusSelector(
changeThreadSettingsActionTypes,
`${changeThreadSettingsActionTypes.started}:${threadID}:description`,
),
);
const colors = useColors();
const styles = useStyles(unboundStyles);
const dispatchActionPromise = useDispatchActionPromise();
const callChangeThreadSettings = useServerCall(changeThreadSettings);
return (
);
});
export default ConnectedThreadSettingsDescription;
diff --git a/native/chat/settings/thread-settings-edit-relationship.react.js b/native/chat/settings/thread-settings-edit-relationship.react.js
index ca3e70a5c..8dbce795c 100644
--- a/native/chat/settings/thread-settings-edit-relationship.react.js
+++ b/native/chat/settings/thread-settings-edit-relationship.react.js
@@ -1,128 +1,129 @@
// @flow
import invariant from 'invariant';
import * as React from 'react';
-import { Alert, Text, View } from 'react-native';
+import { Text, View } from 'react-native';
import {
updateRelationships as serverUpdateRelationships,
updateRelationshipsActionTypes,
} from 'lib/actions/relationship-actions.js';
import { useENSNames } from 'lib/hooks/ens-cache.js';
import {
getRelationshipActionText,
getRelationshipDispatchAction,
} from 'lib/shared/relationship-utils.js';
import { getSingleOtherUser } from 'lib/shared/thread-utils.js';
import {
type RelationshipAction,
type RelationshipButton,
} from 'lib/types/relationship-types.js';
import type { ThreadInfo } from 'lib/types/thread-types.js';
import {
useDispatchActionPromise,
useServerCall,
} from 'lib/utils/action-utils.js';
import Button from '../../components/button.react.js';
import { useSelector } from '../../redux/redux-utils.js';
import { useStyles, useColors } from '../../themes/colors.js';
import type { ViewStyle } from '../../types/styles.js';
+import Alert from '../../utils/alert.js';
type Props = {
+threadInfo: ThreadInfo,
+buttonStyle: ViewStyle,
+relationshipButton: RelationshipButton,
};
const ThreadSettingsEditRelationship: React.ComponentType =
React.memo(function ThreadSettingsEditRelationship(props: Props) {
const otherUserInfoFromRedux = useSelector(state => {
const currentUserID = state.currentUserInfo?.id;
const otherUserID = getSingleOtherUser(props.threadInfo, currentUserID);
invariant(otherUserID, 'Other user should be specified');
const { userInfos } = state.userStore;
return userInfos[otherUserID];
});
invariant(otherUserInfoFromRedux, 'Other user info should be specified');
const [otherUserInfo] = useENSNames([otherUserInfoFromRedux]);
const callUpdateRelationships = useServerCall(serverUpdateRelationships);
const updateRelationship = React.useCallback(
async (action: RelationshipAction) => {
try {
return await callUpdateRelationships({
action,
userIDs: [otherUserInfo.id],
});
} catch (e) {
Alert.alert('Unknown error', 'Uhh... try again?', [{ text: 'OK' }], {
cancelable: true,
});
throw e;
}
},
[callUpdateRelationships, otherUserInfo],
);
const { relationshipButton } = props;
const relationshipAction = React.useMemo(
() => getRelationshipDispatchAction(relationshipButton),
[relationshipButton],
);
const dispatchActionPromise = useDispatchActionPromise();
const onButtonPress = React.useCallback(() => {
dispatchActionPromise(
updateRelationshipsActionTypes,
updateRelationship(relationshipAction),
);
}, [dispatchActionPromise, relationshipAction, updateRelationship]);
const colors = useColors();
const { panelIosHighlightUnderlay } = colors;
const styles = useStyles(unboundStyles);
const otherUserInfoUsername = otherUserInfo.username;
invariant(otherUserInfoUsername, 'Other user username should be specified');
const relationshipButtonText = React.useMemo(
() =>
getRelationshipActionText(relationshipButton, otherUserInfoUsername),
[otherUserInfoUsername, relationshipButton],
);
return (
);
});
const unboundStyles = {
button: {
flexDirection: 'row',
paddingHorizontal: 12,
paddingVertical: 10,
},
container: {
backgroundColor: 'panelForeground',
paddingHorizontal: 12,
},
text: {
color: 'redText',
flex: 1,
fontSize: 16,
},
};
export default ThreadSettingsEditRelationship;
diff --git a/native/chat/settings/thread-settings-leave-thread.react.js b/native/chat/settings/thread-settings-leave-thread.react.js
index 5d7816e4f..ac2c95c61 100644
--- a/native/chat/settings/thread-settings-leave-thread.react.js
+++ b/native/chat/settings/thread-settings-leave-thread.react.js
@@ -1,183 +1,184 @@
// @flow
import invariant from 'invariant';
import * as React from 'react';
-import { Text, Alert, ActivityIndicator, View } from 'react-native';
+import { Text, ActivityIndicator, View } from 'react-native';
import {
leaveThreadActionTypes,
leaveThread,
} from 'lib/actions/thread-actions.js';
import { createLoadingStatusSelector } from 'lib/selectors/loading-selectors.js';
import { otherUsersButNoOtherAdmins } from 'lib/selectors/thread-selectors.js';
import { identifyInvalidatedThreads } from 'lib/shared/thread-utils.js';
import type { LoadingStatus } from 'lib/types/loading-types.js';
import type { ThreadInfo, LeaveThreadPayload } from 'lib/types/thread-types.js';
import {
type DispatchActionPromise,
useServerCall,
useDispatchActionPromise,
} from 'lib/utils/action-utils.js';
import Button from '../../components/button.react.js';
import { clearThreadsActionType } from '../../navigation/action-types.js';
import {
NavContext,
type NavContextType,
} from '../../navigation/navigation-context.js';
import { useSelector } from '../../redux/redux-utils.js';
import { type Colors, useColors, useStyles } from '../../themes/colors.js';
import type { ViewStyle } from '../../types/styles.js';
+import Alert from '../../utils/alert.js';
type BaseProps = {
+threadInfo: ThreadInfo,
+buttonStyle: ViewStyle,
};
type Props = {
...BaseProps,
// Redux state
+loadingStatus: LoadingStatus,
+otherUsersButNoOtherAdmins: boolean,
+colors: Colors,
+styles: typeof unboundStyles,
// Redux dispatch functions
+dispatchActionPromise: DispatchActionPromise,
// async functions that hit server APIs
+leaveThread: (threadID: string) => Promise,
// withNavContext
+navContext: ?NavContextType,
};
class ThreadSettingsLeaveThread extends React.PureComponent {
render() {
const { panelIosHighlightUnderlay, panelForegroundSecondaryLabel } =
this.props.colors;
const loadingIndicator =
this.props.loadingStatus === 'loading' ? (
) : null;
return (
);
}
onPress = () => {
if (this.props.otherUsersButNoOtherAdmins) {
Alert.alert(
'Need another admin',
'Make somebody else an admin before you leave!',
undefined,
{ cancelable: true },
);
return;
}
Alert.alert(
'Confirm action',
'Are you sure you want to leave this chat?',
[
{ text: 'Cancel', style: 'cancel' },
{ text: 'OK', onPress: this.onConfirmLeaveThread },
],
{ cancelable: true },
);
};
onConfirmLeaveThread = () => {
const threadID = this.props.threadInfo.id;
this.props.dispatchActionPromise(
leaveThreadActionTypes,
this.leaveThread(),
{
customKeyName: `${leaveThreadActionTypes.started}:${threadID}`,
},
);
};
async leaveThread() {
const threadID = this.props.threadInfo.id;
const { navContext } = this.props;
invariant(navContext, 'navContext should exist in leaveThread');
navContext.dispatch({
type: clearThreadsActionType,
payload: { threadIDs: [threadID] },
});
try {
const result = await this.props.leaveThread(threadID);
const invalidated = identifyInvalidatedThreads(
result.updatesResult.newUpdates,
);
navContext.dispatch({
type: clearThreadsActionType,
payload: { threadIDs: [...invalidated] },
});
return result;
} catch (e) {
Alert.alert('Unknown error', 'Uhh... try again?', undefined, {
cancelable: true,
});
throw e;
}
}
}
const unboundStyles = {
button: {
flexDirection: 'row',
paddingHorizontal: 12,
paddingVertical: 10,
},
container: {
backgroundColor: 'panelForeground',
paddingHorizontal: 12,
},
text: {
color: 'redText',
flex: 1,
fontSize: 16,
},
};
const ConnectedThreadSettingsLeaveThread: React.ComponentType =
React.memo(function ConnectedThreadSettingsLeaveThread(
props: BaseProps,
) {
const threadID = props.threadInfo.id;
const loadingStatus = useSelector(
createLoadingStatusSelector(
leaveThreadActionTypes,
`${leaveThreadActionTypes.started}:${threadID}`,
),
);
const otherUsersButNoOtherAdminsValue = useSelector(
otherUsersButNoOtherAdmins(props.threadInfo.id),
);
const colors = useColors();
const styles = useStyles(unboundStyles);
const dispatchActionPromise = useDispatchActionPromise();
const callLeaveThread = useServerCall(leaveThread);
const navContext = React.useContext(NavContext);
return (
);
});
export default ConnectedThreadSettingsLeaveThread;
diff --git a/native/chat/settings/thread-settings-member-tooltip-modal.react.js b/native/chat/settings/thread-settings-member-tooltip-modal.react.js
index a000ac341..64f4341f1 100644
--- a/native/chat/settings/thread-settings-member-tooltip-modal.react.js
+++ b/native/chat/settings/thread-settings-member-tooltip-modal.react.js
@@ -1,114 +1,114 @@
// @flow
import * as React from 'react';
-import { Alert } from 'react-native';
import { removeUsersFromThread } from 'lib/actions/thread-actions.js';
import { removeMemberFromThread } from 'lib/shared/thread-utils.js';
import { stringForUser } from 'lib/shared/user-utils.js';
import type { ThreadInfo, RelativeMemberInfo } from 'lib/types/thread-types.js';
import {
useDispatchActionPromise,
useServerCall,
} from 'lib/utils/action-utils.js';
import ThreadSettingsMemberTooltipButton from './thread-settings-member-tooltip-button.react.js';
import type { AppNavigationProp } from '../../navigation/app-navigator.react';
import { ChangeRolesScreenRouteName } from '../../navigation/route-names.js';
import {
createTooltip,
type TooltipParams,
type TooltipRoute,
type BaseTooltipProps,
type TooltipMenuProps,
} from '../../tooltip/tooltip.react.js';
+import Alert from '../../utils/alert.js';
export type ThreadSettingsMemberTooltipModalParams = TooltipParams<{
+memberInfo: RelativeMemberInfo,
+threadInfo: ThreadInfo,
}>;
function useOnRemoveUser(
route: TooltipRoute<'ThreadSettingsMemberTooltipModal'>,
) {
const { memberInfo, threadInfo } = route.params;
const boundRemoveUsersFromThread = useServerCall(removeUsersFromThread);
const dispatchActionPromise = useDispatchActionPromise();
const onConfirmRemoveUser = React.useCallback(
() =>
removeMemberFromThread(
threadInfo,
memberInfo,
dispatchActionPromise,
boundRemoveUsersFromThread,
),
[threadInfo, memberInfo, dispatchActionPromise, boundRemoveUsersFromThread],
);
const userText = stringForUser(memberInfo);
return React.useCallback(() => {
Alert.alert(
'Confirm removal',
`Are you sure you want to remove ${userText} from this chat?`,
[
{ text: 'Cancel', style: 'cancel' },
{ text: 'OK', onPress: onConfirmRemoveUser },
],
{ cancelable: true },
);
}, [onConfirmRemoveUser, userText]);
}
function useOnChangeRole(
route: TooltipRoute<'ThreadSettingsMemberTooltipModal'>,
navigation: AppNavigationProp<'ThreadSettingsMemberTooltipModal'>,
) {
const { threadInfo, memberInfo } = route.params;
return React.useCallback(() => {
navigation.navigate<'ChangeRolesScreen'>({
name: ChangeRolesScreenRouteName,
params: {
threadInfo,
memberInfo,
role: memberInfo.role,
},
key: route.key,
});
}, [navigation, route.key, threadInfo, memberInfo]);
}
function TooltipMenu(
props: TooltipMenuProps<'ThreadSettingsMemberTooltipModal'>,
): React.Node {
const { route, navigation, tooltipItem: TooltipItem } = props;
const onChangeRole = useOnChangeRole(route, navigation);
const onRemoveUser = useOnRemoveUser(route);
return (
<>
);
}
const ThreadSettingsMemberTooltipModal: React.ComponentType<
BaseTooltipProps<'ThreadSettingsMemberTooltipModal'>,
> = createTooltip<'ThreadSettingsMemberTooltipModal'>(
ThreadSettingsMemberTooltipButton,
TooltipMenu,
);
export default ThreadSettingsMemberTooltipModal;
diff --git a/native/chat/settings/thread-settings-name.react.js b/native/chat/settings/thread-settings-name.react.js
index d3dbff113..fdad78302 100644
--- a/native/chat/settings/thread-settings-name.react.js
+++ b/native/chat/settings/thread-settings-name.react.js
@@ -1,247 +1,247 @@
// @flow
import invariant from 'invariant';
import * as React from 'react';
import {
Text,
- Alert,
ActivityIndicator,
TextInput as BaseTextInput,
View,
} from 'react-native';
import {
changeThreadSettingsActionTypes,
changeThreadSettings,
} from 'lib/actions/thread-actions.js';
import { createLoadingStatusSelector } from 'lib/selectors/loading-selectors.js';
import { chatNameMaxLength } from 'lib/shared/thread-utils.js';
import type { LoadingStatus } from 'lib/types/loading-types.js';
import {
type ResolvedThreadInfo,
type ChangeThreadSettingsPayload,
type UpdateThreadRequest,
} from 'lib/types/thread-types.js';
import {
type DispatchActionPromise,
useServerCall,
useDispatchActionPromise,
} from 'lib/utils/action-utils.js';
import { firstLine } from 'lib/utils/string-utils.js';
import SaveSettingButton from './save-setting-button.react.js';
import EditSettingButton from '../../components/edit-setting-button.react.js';
import { SingleLine } from '../../components/single-line.react.js';
import TextInput from '../../components/text-input.react.js';
import { useSelector } from '../../redux/redux-utils.js';
import { type Colors, useStyles, useColors } from '../../themes/colors.js';
+import Alert from '../../utils/alert.js';
type BaseProps = {
+threadInfo: ResolvedThreadInfo,
+nameEditValue: ?string,
+setNameEditValue: (value: ?string, callback?: () => void) => void,
+canChangeSettings: boolean,
};
type Props = {
...BaseProps,
// Redux state
+loadingStatus: LoadingStatus,
+colors: Colors,
+styles: typeof unboundStyles,
// Redux dispatch functions
+dispatchActionPromise: DispatchActionPromise,
// async functions that hit server APIs
+changeThreadSettings: (
update: UpdateThreadRequest,
) => Promise,
};
class ThreadSettingsName extends React.PureComponent {
textInput: ?React.ElementRef;
render() {
return (
Name
{this.renderContent()}
);
}
renderButton() {
if (this.props.loadingStatus === 'loading') {
return (
);
} else if (
this.props.nameEditValue === null ||
this.props.nameEditValue === undefined
) {
return (
);
}
return ;
}
renderContent() {
if (
this.props.nameEditValue === null ||
this.props.nameEditValue === undefined
) {
return (
{this.props.threadInfo.uiName}
{this.renderButton()}
);
}
return (
{this.renderButton()}
);
}
textInputRef = (textInput: ?React.ElementRef) => {
this.textInput = textInput;
};
threadEditName() {
return firstLine(
this.props.threadInfo.name ? this.props.threadInfo.name : '',
);
}
onPressEdit = () => {
this.props.setNameEditValue(this.threadEditName());
};
onSubmit = () => {
invariant(
this.props.nameEditValue !== null &&
this.props.nameEditValue !== undefined,
'should be set',
);
const name = firstLine(this.props.nameEditValue);
if (name === this.threadEditName()) {
this.props.setNameEditValue(null);
return;
}
const editNamePromise = this.editName(name);
const action = changeThreadSettingsActionTypes.started;
const threadID = this.props.threadInfo.id;
this.props.dispatchActionPromise(
changeThreadSettingsActionTypes,
editNamePromise,
{
customKeyName: `${action}:${threadID}:name`,
},
);
editNamePromise.then(() => {
this.props.setNameEditValue(null);
});
};
async editName(newName: string) {
try {
return await this.props.changeThreadSettings({
threadID: this.props.threadInfo.id,
changes: { name: newName },
});
} catch (e) {
Alert.alert(
'Unknown error',
'Uhh... try again?',
[{ text: 'OK', onPress: this.onErrorAcknowledged }],
{ cancelable: false },
);
throw e;
}
}
onErrorAcknowledged = () => {
this.props.setNameEditValue(this.threadEditName(), () => {
invariant(this.textInput, 'textInput should be set');
this.textInput.focus();
});
};
}
const unboundStyles = {
currentValue: {
color: 'panelForegroundSecondaryLabel',
flex: 1,
fontFamily: 'Arial',
fontSize: 16,
margin: 0,
paddingLeft: 4,
paddingRight: 0,
paddingVertical: 0,
borderBottomColor: 'transparent',
},
label: {
color: 'panelForegroundTertiaryLabel',
fontSize: 16,
width: 96,
},
row: {
backgroundColor: 'panelForeground',
flexDirection: 'row',
paddingHorizontal: 24,
paddingVertical: 8,
},
};
const ConnectedThreadSettingsName: React.ComponentType =
React.memo(function ConnectedThreadSettingsName(props: BaseProps) {
const styles = useStyles(unboundStyles);
const colors = useColors();
const threadID = props.threadInfo.id;
const loadingStatus = useSelector(
createLoadingStatusSelector(
changeThreadSettingsActionTypes,
`${changeThreadSettingsActionTypes.started}:${threadID}:name`,
),
);
const dispatchActionPromise = useDispatchActionPromise();
const callChangeThreadSettings = useServerCall(changeThreadSettings);
return (
);
});
export default ConnectedThreadSettingsName;
diff --git a/native/chat/settings/thread-settings-promote-sidebar.react.js b/native/chat/settings/thread-settings-promote-sidebar.react.js
index f63f45036..7917587b9 100644
--- a/native/chat/settings/thread-settings-promote-sidebar.react.js
+++ b/native/chat/settings/thread-settings-promote-sidebar.react.js
@@ -1,113 +1,114 @@
// @flow
import * as React from 'react';
-import { Text, ActivityIndicator, View, Alert } from 'react-native';
+import { Text, ActivityIndicator, View } from 'react-native';
import { usePromoteSidebar } from 'lib/hooks/promote-sidebar.react.js';
import type { LoadingStatus } from 'lib/types/loading-types.js';
import type { ThreadInfo } from 'lib/types/thread-types.js';
import Button from '../../components/button.react.js';
import { type Colors, useColors, useStyles } from '../../themes/colors.js';
import type { ViewStyle } from '../../types/styles.js';
+import Alert from '../../utils/alert.js';
type BaseProps = {
+threadInfo: ThreadInfo,
+buttonStyle: ViewStyle,
};
type Props = {
...BaseProps,
+loadingStatus: LoadingStatus,
+colors: Colors,
+styles: typeof unboundStyles,
+promoteSidebar: () => mixed,
};
class ThreadSettingsPromoteSidebar extends React.PureComponent {
onClick = () => {
Alert.alert(
'Are you sure?',
'Promoting a thread to a channel cannot be undone.',
[
{
text: 'Cancel',
style: 'cancel',
},
{
text: 'Yes',
onPress: this.props.promoteSidebar,
},
],
);
};
render() {
const { panelIosHighlightUnderlay, panelForegroundSecondaryLabel } =
this.props.colors;
const loadingIndicator =
this.props.loadingStatus === 'loading' ? (
) : null;
return (
);
}
}
const unboundStyles = {
button: {
flexDirection: 'row',
paddingHorizontal: 12,
paddingVertical: 10,
},
container: {
backgroundColor: 'panelForeground',
paddingHorizontal: 12,
},
text: {
color: 'panelForegroundSecondaryLabel',
flex: 1,
fontSize: 16,
},
};
const onError = () => {
Alert.alert('Unknown error', 'Uhh... try again?', undefined, {
cancelable: true,
});
};
const ConnectedThreadSettingsPromoteSidebar: React.ComponentType =
React.memo(function ConnectedThreadSettingsPromoteSidebar(
props: BaseProps,
) {
const { threadInfo } = props;
const colors = useColors();
const styles = useStyles(unboundStyles);
const { onPromoteSidebar, loading } = usePromoteSidebar(
threadInfo,
onError,
);
return (
);
});
export default ConnectedThreadSettingsPromoteSidebar;
diff --git a/native/chat/settings/thread-settings-push-notifs.react.js b/native/chat/settings/thread-settings-push-notifs.react.js
index 5f34401ea..88786df8f 100644
--- a/native/chat/settings/thread-settings-push-notifs.react.js
+++ b/native/chat/settings/thread-settings-push-notifs.react.js
@@ -1,194 +1,194 @@
// @flow
import * as React from 'react';
import { View, Switch, TouchableOpacity, Platform } from 'react-native';
-import Alert from 'react-native/Libraries/Alert/Alert.js';
import Linking from 'react-native/Libraries/Linking/Linking.js';
import {
updateSubscriptionActionTypes,
updateSubscription,
} from 'lib/actions/user-actions.js';
import type {
SubscriptionUpdateRequest,
SubscriptionUpdateResult,
} from 'lib/types/subscription-types.js';
import { type ThreadInfo } from 'lib/types/thread-types.js';
import type { DispatchActionPromise } from 'lib/utils/action-utils.js';
import {
useServerCall,
useDispatchActionPromise,
} from 'lib/utils/action-utils.js';
import { SingleLine } from '../../components/single-line.react.js';
import SWMansionIcon from '../../components/swmansion-icon.react.js';
import { CommAndroidNotifications } from '../../push/android.js';
import { useSelector } from '../../redux/redux-utils.js';
import { useStyles } from '../../themes/colors.js';
+import Alert from '../../utils/alert.js';
type BaseProps = {
+threadInfo: ThreadInfo,
};
type Props = {
...BaseProps,
// Redux state
+styles: typeof unboundStyles,
// Redux dispatch functions
+dispatchActionPromise: DispatchActionPromise,
// async functions that hit server APIs
+hasPushPermissions: boolean,
+updateSubscription: (
subscriptionUpdate: SubscriptionUpdateRequest,
) => Promise,
};
type State = {
+currentValue: boolean,
};
class ThreadSettingsPushNotifs extends React.PureComponent {
constructor(props: Props) {
super(props);
this.state = {
currentValue: props.threadInfo.currentUser.subscription.pushNotifs,
};
}
render() {
const componentLabel = 'Push notifs';
let notificationsSettingsLinkingIcon = undefined;
if (!this.props.hasPushPermissions) {
notificationsSettingsLinkingIcon = (
);
}
return (
{componentLabel}
{notificationsSettingsLinkingIcon}
);
}
onValueChange = (value: boolean) => {
this.setState({ currentValue: value });
this.props.dispatchActionPromise(
updateSubscriptionActionTypes,
this.props.updateSubscription({
threadID: this.props.threadInfo.id,
updatedFields: {
pushNotifs: value,
},
}),
);
};
onNotificationsSettingsLinkingIconPress = async () => {
let platformRequestsPermission;
if (Platform.OS !== 'android') {
platformRequestsPermission = true;
} else {
platformRequestsPermission =
await CommAndroidNotifications.canRequestNotificationsPermissionFromUser();
}
const alertTitle = platformRequestsPermission
? 'Need notif permissions'
: 'Unable to initialize notifs';
const notificationsSettingsPath =
Platform.OS === 'ios'
? 'Settings App → Notifications → Comm'
: 'Settings → Apps → Comm → Notifications';
let alertMessage;
if (platformRequestsPermission && this.state.currentValue) {
alertMessage =
'Notifs for this chat are enabled, but cannot be delivered ' +
'to this device because you haven’t granted notif permissions to Comm. ' +
'Please enable them in ' +
notificationsSettingsPath;
} else if (platformRequestsPermission) {
alertMessage =
'In order to enable push notifs for this chat, ' +
'you need to first grant notif permissions to Comm. ' +
'Please enable them in ' +
notificationsSettingsPath;
} else {
alertMessage =
'Please check your network connection, make sure Google Play ' +
'services are installed and enabled, and confirm that your Google ' +
'Play credentials are valid in the Google Play Store.';
}
Alert.alert(alertTitle, alertMessage, [
{
text: 'Go to settings',
onPress: () => Linking.openSettings(),
},
{
text: 'Cancel',
style: 'cancel',
},
]);
};
}
const unboundStyles = {
currentValue: {
alignItems: 'flex-end',
margin: 0,
paddingLeft: 4,
paddingRight: 0,
paddingVertical: 0,
},
label: {
color: 'panelForegroundTertiaryLabel',
fontSize: 16,
flex: 1,
},
row: {
alignItems: 'center',
backgroundColor: 'panelForeground',
flexDirection: 'row',
paddingHorizontal: 24,
paddingVertical: 3,
},
infoIcon: {
paddingRight: 20,
},
};
const ConnectedThreadSettingsPushNotifs: React.ComponentType =
React.memo(function ConnectedThreadSettingsPushNotifs(
props: BaseProps,
) {
const styles = useStyles(unboundStyles);
const dispatchActionPromise = useDispatchActionPromise();
const callUpdateSubscription = useServerCall(updateSubscription);
const hasPushPermissions = useSelector(
state => state.deviceToken !== null && state.deviceToken !== undefined,
);
return (
);
});
export default ConnectedThreadSettingsPushNotifs;
diff --git a/native/chat/thread-screen-pruner.react.js b/native/chat/thread-screen-pruner.react.js
index b3934c425..a3c9bd3af 100644
--- a/native/chat/thread-screen-pruner.react.js
+++ b/native/chat/thread-screen-pruner.react.js
@@ -1,116 +1,116 @@
// @flow
import invariant from 'invariant';
import * as React from 'react';
-import { Alert } from 'react-native';
import { threadIsPending } from 'lib/shared/thread-utils.js';
import { clearThreadsActionType } from '../navigation/action-types.js';
import { useActiveThread } from '../navigation/nav-selectors.js';
import { NavContext } from '../navigation/navigation-context.js';
import {
getThreadIDFromRoute,
getChildRouteFromNavigatorRoute,
} from '../navigation/navigation-utils.js';
import {
AppRouteName,
ChatRouteName,
CommunityDrawerNavigatorRouteName,
TabNavigatorRouteName,
} from '../navigation/route-names.js';
import { useSelector } from '../redux/redux-utils.js';
import type { AppState } from '../redux/state-types.js';
+import Alert from '../utils/alert.js';
const ThreadScreenPruner: React.ComponentType<{}> = React.memo<{}>(
function ThreadScreenPruner() {
const rawThreadInfos = useSelector(
(state: AppState) => state.threadStore.threadInfos,
);
const navContext = React.useContext(NavContext);
const chatRouteState = React.useMemo(() => {
if (!navContext) {
return null;
}
const { state } = navContext;
const appRoute = state.routes.find(route => route.name === AppRouteName);
invariant(
appRoute,
'Navigation context should contain route for AppNavigator ' +
'when ThreadScreenPruner is rendered',
);
const communityDrawerRoute = getChildRouteFromNavigatorRoute(
appRoute,
CommunityDrawerNavigatorRouteName,
);
if (!communityDrawerRoute) {
return null;
}
const tabRoute = getChildRouteFromNavigatorRoute(
communityDrawerRoute,
TabNavigatorRouteName,
);
if (!tabRoute) {
return null;
}
const chatRoute = getChildRouteFromNavigatorRoute(
tabRoute,
ChatRouteName,
);
if (!chatRoute?.state) {
return null;
}
return chatRoute.state;
}, [navContext]);
const inStackThreadIDs = React.useMemo(() => {
const threadIDs = new Set();
if (!chatRouteState) {
return threadIDs;
}
for (const route of chatRouteState.routes) {
const threadID = getThreadIDFromRoute(route);
if (threadID && !threadIsPending(threadID)) {
threadIDs.add(threadID);
}
}
return threadIDs;
}, [chatRouteState]);
const pruneThreadIDs = React.useMemo(() => {
const threadIDs = [];
for (const threadID of inStackThreadIDs) {
if (!rawThreadInfos[threadID]) {
threadIDs.push(threadID);
}
}
return threadIDs;
}, [inStackThreadIDs, rawThreadInfos]);
const activeThreadID = useActiveThread();
React.useEffect(() => {
if (pruneThreadIDs.length === 0 || !navContext) {
return;
}
if (activeThreadID && pruneThreadIDs.includes(activeThreadID)) {
Alert.alert(
'Chat invalidated',
'You no longer have permission to view this chat :(',
[{ text: 'OK' }],
{ cancelable: true },
);
}
navContext.dispatch({
type: clearThreadsActionType,
payload: { threadIDs: pruneThreadIDs },
});
}, [pruneThreadIDs, navContext, activeThreadID]);
return null;
},
);
export default ThreadScreenPruner;
diff --git a/native/components/user-list-user.react.js b/native/components/user-list-user.react.js
index 428d21f0f..ca8514532 100644
--- a/native/components/user-list-user.react.js
+++ b/native/components/user-list-user.react.js
@@ -1,97 +1,98 @@
// @flow
import * as React from 'react';
-import { Text, Platform, Alert } from 'react-native';
+import { Text, Platform } from 'react-native';
import type { UserListItem, AccountUserInfo } from 'lib/types/user-types.js';
import Button from './button.react.js';
import { SingleLine } from './single-line.react.js';
import UserAvatar from '../avatars/user-avatar.react.js';
import { type Colors, useColors, useStyles } from '../themes/colors.js';
import type { TextStyle } from '../types/styles.js';
+import Alert from '../utils/alert.js';
// eslint-disable-next-line no-unused-vars
const getUserListItemHeight = (item: UserListItem): number => {
// TODO consider parent thread notice
return Platform.OS === 'ios' ? 31.5 : 33.5;
};
type BaseProps = {
+userInfo: UserListItem,
+onSelect: (user: AccountUserInfo) => void,
+textStyle?: TextStyle,
};
type Props = {
...BaseProps,
// Redux state
+colors: Colors,
+styles: typeof unboundStyles,
};
class UserListUser extends React.PureComponent {
render() {
const { userInfo } = this.props;
let notice = null;
if (userInfo.notice) {
notice = {userInfo.notice};
}
const { modalIosHighlightUnderlay: underlayColor } = this.props.colors;
return (
);
}
onSelect = () => {
const { userInfo } = this.props;
if (!userInfo.alert) {
const { alert, notice, disabled, ...accountUserInfo } = userInfo;
this.props.onSelect(accountUserInfo);
return;
}
Alert.alert(userInfo.alert.title, userInfo.alert.text, [{ text: 'OK' }], {
cancelable: true,
});
};
}
const unboundStyles = {
button: {
alignItems: 'center',
flexDirection: 'row',
justifyContent: 'space-between',
},
notice: {
color: 'modalForegroundSecondaryLabel',
fontStyle: 'italic',
},
text: {
color: 'modalForegroundLabel',
flex: 1,
fontSize: 16,
paddingHorizontal: 12,
paddingVertical: 6,
},
};
const ConnectedUserListUser: React.ComponentType =
React.memo(function ConnectedUserListUser(props: BaseProps) {
const colors = useColors();
const styles = useStyles(unboundStyles);
return ;
});
export { ConnectedUserListUser as UserListUser, getUserListItemHeight };
diff --git a/native/data/sqlite-data-handler.js b/native/data/sqlite-data-handler.js
index 1238be4ce..553e38164 100644
--- a/native/data/sqlite-data-handler.js
+++ b/native/data/sqlite-data-handler.js
@@ -1,226 +1,226 @@
// @flow
import * as React from 'react';
-import { Alert } from 'react-native';
import { useDispatch } from 'react-redux';
import { setClientDBStoreActionType } from 'lib/actions/client-db-store-actions.js';
import { MediaCacheContext } from 'lib/components/media-cache-provider.react.js';
import { reportStoreOpsHandlers } from 'lib/ops/report-store-ops.js';
import { threadStoreOpsHandlers } from 'lib/ops/thread-store-ops.js';
import { cookieSelector } from 'lib/selectors/keyserver-selectors.js';
import { isLoggedIn } from 'lib/selectors/user-selectors.js';
import {
logInActionSources,
type LogInActionSource,
} from 'lib/types/account-types.js';
import { fetchNewCookieFromNativeCredentials } from 'lib/utils/action-utils.js';
import { getMessageForException } from 'lib/utils/errors.js';
import { filesystemMediaCache } from '../media/media-cache.js';
import { commCoreModule } from '../native-modules.js';
import { setStoreLoadedActionType } from '../redux/action-types.js';
import { useSelector } from '../redux/redux-utils.js';
import { StaffContext } from '../staff/staff-context.js';
+import Alert from '../utils/alert.js';
import { useInitialNotificationsEncryptedMessage } from '../utils/crypto-utils.js';
import { isTaskCancelledError } from '../utils/error-handling.js';
import { useStaffCanSee } from '../utils/staff-utils.js';
function SQLiteDataHandler(): React.Node {
const storeLoaded = useSelector(state => state.storeLoaded);
const dispatch = useDispatch();
const rehydrateConcluded = useSelector(
state => !!(state._persist && state._persist.rehydrated),
);
const cookie = useSelector(cookieSelector);
const urlPrefix = useSelector(state => state.urlPrefix);
const staffCanSee = useStaffCanSee();
const { staffUserHasBeenLoggedIn } = React.useContext(StaffContext);
const loggedIn = useSelector(isLoggedIn);
const currentLoggedInUserID = useSelector(state =>
state.currentUserInfo?.anonymous ? undefined : state.currentUserInfo?.id,
);
const mediaCacheContext = React.useContext(MediaCacheContext);
const getInitialNotificationsEncryptedMessage =
useInitialNotificationsEncryptedMessage();
const callFetchNewCookieFromNativeCredentials = React.useCallback(
async (source: LogInActionSource) => {
try {
await fetchNewCookieFromNativeCredentials(
dispatch,
cookie,
urlPrefix,
source,
getInitialNotificationsEncryptedMessage,
);
dispatch({ type: setStoreLoadedActionType });
} catch (fetchCookieException) {
if (staffCanSee) {
Alert.alert(
`Error fetching new cookie from native credentials: ${
getMessageForException(fetchCookieException) ??
'{no exception message}'
}. Please kill the app.`,
);
} else {
commCoreModule.terminate();
}
}
},
[
cookie,
dispatch,
staffCanSee,
urlPrefix,
getInitialNotificationsEncryptedMessage,
],
);
const callClearSensitiveData = React.useCallback(
async (triggeredBy: string) => {
if (staffCanSee || staffUserHasBeenLoggedIn) {
Alert.alert('Starting SQLite database deletion process');
}
await commCoreModule.clearSensitiveData();
try {
await filesystemMediaCache.clearCache();
} catch {
throw new Error('clear_media_cache_failed');
}
if (staffCanSee || staffUserHasBeenLoggedIn) {
Alert.alert(
'SQLite database successfully deleted',
`SQLite database deletion was triggered by ${triggeredBy}`,
);
}
},
[staffCanSee, staffUserHasBeenLoggedIn],
);
const handleSensitiveData = React.useCallback(async () => {
try {
const databaseCurrentUserInfoID = await commCoreModule.getCurrentUserID();
if (
databaseCurrentUserInfoID &&
databaseCurrentUserInfoID !== currentLoggedInUserID
) {
await callClearSensitiveData('change in logged-in user credentials');
}
if (currentLoggedInUserID) {
await commCoreModule.setCurrentUserID(currentLoggedInUserID);
}
const databaseDeviceID = await commCoreModule.getDeviceID();
if (!databaseDeviceID) {
await commCoreModule.setDeviceID('MOBILE');
}
} catch (e) {
if (isTaskCancelledError(e)) {
return;
}
if (__DEV__) {
throw e;
}
console.log(e);
if (e.message !== 'clear_media_cache_failed') {
commCoreModule.terminate();
}
}
}, [callClearSensitiveData, currentLoggedInUserID]);
React.useEffect(() => {
if (!rehydrateConcluded) {
return;
}
const databaseNeedsDeletion = commCoreModule.checkIfDatabaseNeedsDeletion();
if (databaseNeedsDeletion) {
(async () => {
try {
await callClearSensitiveData('detecting corrupted database');
} catch (e) {
if (__DEV__) {
throw e;
}
console.log(e);
if (e.message !== 'clear_media_cache_failed') {
commCoreModule.terminate();
}
}
await callFetchNewCookieFromNativeCredentials(
logInActionSources.corruptedDatabaseDeletion,
);
})();
return;
}
const sensitiveDataHandled = handleSensitiveData();
if (storeLoaded) {
return;
}
if (!loggedIn) {
dispatch({ type: setStoreLoadedActionType });
return;
}
(async () => {
await Promise.all([
sensitiveDataHandled,
mediaCacheContext?.evictCache(),
]);
try {
const { threads, messages, drafts, messageStoreThreads, reports } =
await commCoreModule.getClientDBStore();
const threadInfosFromDB =
threadStoreOpsHandlers.translateClientDBData(threads);
const reportsFromDb =
reportStoreOpsHandlers.translateClientDBData(reports);
dispatch({
type: setClientDBStoreActionType,
payload: {
drafts,
messages,
threadStore: { threadInfos: threadInfosFromDB },
currentUserID: currentLoggedInUserID,
messageStoreThreads,
reports: reportsFromDb,
},
});
} catch (setStoreException) {
if (isTaskCancelledError(setStoreException)) {
dispatch({ type: setStoreLoadedActionType });
return;
}
if (staffCanSee) {
Alert.alert(
'Error setting threadStore or messageStore',
getMessageForException(setStoreException) ??
'{no exception message}',
);
}
await callFetchNewCookieFromNativeCredentials(
logInActionSources.sqliteLoadFailure,
);
}
})();
}, [
currentLoggedInUserID,
handleSensitiveData,
loggedIn,
cookie,
dispatch,
rehydrateConcluded,
staffCanSee,
storeLoaded,
urlPrefix,
staffUserHasBeenLoggedIn,
callFetchNewCookieFromNativeCredentials,
callClearSensitiveData,
mediaCacheContext,
]);
return null;
}
export { SQLiteDataHandler };
diff --git a/native/dev-menu.js b/native/dev-menu.js
index 907466f8f..7a23e7d0d 100644
--- a/native/dev-menu.js
+++ b/native/dev-menu.js
@@ -1,39 +1,39 @@
// @flow
import { registerDevMenuItems } from 'expo-dev-menu';
-import { Alert } from 'react-native';
import { getMessageForException } from 'lib/utils/errors.js';
import { filesystemMediaCache } from './media/media-cache.js';
+import Alert from './utils/alert.js';
import { wipeAndExit } from './utils/crash-utils.js';
// see https://docs.expo.dev/develop/development-builds/development-workflows/#extending-the-dev-menu
// for details on extending the dev menu
if (__DEV__) {
const devMenuItems = [
{
name: 'Clear media cache',
callback: async () => {
try {
await filesystemMediaCache.clearCache();
Alert.alert('Media cache cleared');
} catch (e) {
Alert.alert('Cache clear failed', getMessageForException(e));
}
},
},
{
name: 'Wipe state and kill app',
callback: async () => {
try {
await wipeAndExit();
} catch (e) {
Alert.alert('Wipe failed', getMessageForException(e));
}
},
},
];
registerDevMenuItems(devMenuItems);
}
diff --git a/native/invite-links/manage-public-link-screen.react.js b/native/invite-links/manage-public-link-screen.react.js
index 8b53ca5f7..211e09ab6 100644
--- a/native/invite-links/manage-public-link-screen.react.js
+++ b/native/invite-links/manage-public-link-screen.react.js
@@ -1,222 +1,223 @@
// @flow
import * as React from 'react';
-import { Text, View, Alert } from 'react-native';
+import { Text, View } from 'react-native';
import { inviteLinkUrl } from 'lib/facts/links.js';
import { useInviteLinksActions } from 'lib/hooks/invite-links.js';
import { primaryInviteLinksSelector } from 'lib/selectors/invite-links-selectors.js';
import {
defaultErrorMessage,
inviteLinkErrorMessages,
} from 'lib/shared/invite-links.js';
import type { ThreadInfo } from 'lib/types/thread-types.js';
import Button from '../components/button.react.js';
import TextInput from '../components/text-input.react.js';
import type { RootNavigationProp } from '../navigation/root-navigator.react.js';
import type { NavigationRoute } from '../navigation/route-names.js';
import { useSelector } from '../redux/redux-utils.js';
import { useStyles } from '../themes/colors.js';
+import Alert from '../utils/alert.js';
export type ManagePublicLinkScreenParams = {
+community: ThreadInfo,
};
type Props = {
+navigation: RootNavigationProp<'ManagePublicLink'>,
+route: NavigationRoute<'ManagePublicLink'>,
};
function ManagePublicLinkScreen(props: Props): React.Node {
const { community } = props.route.params;
const inviteLink = useSelector(primaryInviteLinksSelector)[community.id];
const {
error,
isLoading,
name,
setName,
createOrUpdateInviteLink,
disableInviteLink,
} = useInviteLinksActions(community.id, inviteLink);
const styles = useStyles(unboundStyles);
let errorComponent = null;
if (error) {
errorComponent = (
{inviteLinkErrorMessages[error] ?? defaultErrorMessage}
);
}
const onDisableButtonClick = React.useCallback(() => {
Alert.alert(
'Disable public link',
'Are you sure you want to disable your public link?\n' +
'\n' +
'Other communities will be able to claim the same URL.',
[
{
text: 'Confirm disable',
style: 'destructive',
onPress: disableInviteLink,
},
{
text: 'Cancel',
},
],
{
cancelable: true,
},
);
}, [disableInviteLink]);
let disablePublicLinkSection = null;
if (inviteLink) {
disablePublicLinkSection = (
You may also disable the community public link.
);
}
return (
Invite links make it easy for your friends to join your community.
Anybody who knows your community’s invite link will be able to join
it.
Note that if you change your public link’s URL, other communities will
be able to claim the old URL.
INVITE URL
{inviteLinkUrl('')}
{errorComponent}
{disablePublicLinkSection}
);
}
const unboundStyles = {
sectionTitle: {
fontSize: 14,
fontWeight: '400',
lineHeight: 20,
color: 'modalBackgroundLabel',
paddingHorizontal: 16,
paddingBottom: 4,
},
section: {
borderBottomColor: 'modalSeparator',
borderBottomWidth: 1,
borderTopColor: 'modalSeparator',
borderTopWidth: 1,
backgroundColor: 'modalForeground',
padding: 16,
marginBottom: 24,
},
disableLinkSection: {
marginTop: 16,
},
sectionText: {
fontSize: 14,
fontWeight: '400',
lineHeight: 22,
color: 'modalBackgroundLabel',
},
withMargin: {
marginBottom: 12,
},
inviteLink: {
flexDirection: 'row',
alignItems: 'center',
marginBottom: 8,
},
inviteLinkPrefix: {
fontSize: 14,
fontWeight: '400',
lineHeight: 22,
color: 'disabledButtonText',
marginRight: 2,
},
input: {
color: 'panelForegroundLabel',
borderColor: 'panelSecondaryForegroundBorder',
borderWidth: 1,
borderRadius: 8,
paddingVertical: 13,
paddingHorizontal: 16,
flex: 1,
},
button: {
borderRadius: 8,
paddingVertical: 12,
paddingHorizontal: 24,
marginTop: 8,
},
buttonPrimary: {
backgroundColor: 'purpleButton',
},
destructiveButton: {
borderWidth: 1,
borderRadius: 8,
borderColor: 'vibrantRedButton',
},
destructiveButtonText: {
fontSize: 16,
fontWeight: '500',
lineHeight: 24,
color: 'vibrantRedButton',
textAlign: 'center',
},
buttonText: {
color: 'whiteText',
textAlign: 'center',
fontWeight: '500',
fontSize: 16,
lineHeight: 24,
},
error: {
fontSize: 12,
fontWeight: '400',
lineHeight: 18,
textAlign: 'center',
color: 'redText',
},
};
export default ManagePublicLinkScreen;
diff --git a/native/markdown/markdown-link.react.js b/native/markdown/markdown-link.react.js
index ecee51dcd..53a1e5a2a 100644
--- a/native/markdown/markdown-link.react.js
+++ b/native/markdown/markdown-link.react.js
@@ -1,107 +1,108 @@
// @flow
import invariant from 'invariant';
import * as React from 'react';
-import { Text, Linking, Alert } from 'react-native';
+import { Text, Linking } from 'react-native';
import { inviteLinkUrl } from 'lib/facts/links.js';
import {
MarkdownContext,
type MarkdownContextType,
} from './markdown-context.js';
import { MarkdownSpoilerContext } from './markdown-spoiler-context.js';
import { MessagePressResponderContext } from '../chat/message-press-responder-context.js';
import { TextMessageMarkdownContext } from '../chat/text-message-markdown-context.js';
import { InviteLinksContext } from '../invite-links/invite-links-context-provider.react.js';
+import Alert from '../utils/alert.js';
import { normalizeURL } from '../utils/url-utils.js';
function useHandleLinkClick(
inputURL: string,
markdownContext: MarkdownContextType,
messageKey: ?string,
) {
const { setLinkModalActive } = markdownContext;
const onDismiss = React.useCallback(() => {
messageKey && setLinkModalActive({ [messageKey]: false });
}, [setLinkModalActive, messageKey]);
const url = normalizeURL(inputURL);
const onConfirm = React.useCallback(() => {
onDismiss();
Linking.openURL(url);
}, [url, onDismiss]);
let displayURL = url.substring(0, 64);
if (url.length > displayURL.length) {
displayURL += '…';
}
const inviteLinksContext = React.useContext(InviteLinksContext);
return React.useCallback(() => {
if (url.startsWith(inviteLinkUrl(''))) {
inviteLinksContext?.setCurrentLinkUrl(url);
return;
}
messageKey && setLinkModalActive({ [messageKey]: true });
Alert.alert(
'External link',
`You sure you want to open this link?\n\n${displayURL}`,
[
{ text: 'Cancel', style: 'cancel', onPress: onDismiss },
{ text: 'Open', onPress: onConfirm },
],
{ cancelable: true, onDismiss },
);
}, [
url,
messageKey,
setLinkModalActive,
displayURL,
onDismiss,
onConfirm,
inviteLinksContext,
]);
}
type TextProps = React.ElementConfig;
type Props = {
+target: string,
+children: React.Node,
...TextProps,
};
function MarkdownLink(props: Props): React.Node {
const { target, ...rest } = props;
const markdownContext = React.useContext(MarkdownContext);
invariant(markdownContext, 'MarkdownContext should be set');
const markdownSpoilerContext = React.useContext(MarkdownSpoilerContext);
// Since MarkdownSpoilerContext may not be set, we need
// to default isRevealed to true for when
// we use the ternary operator in the onPress
const isRevealed = markdownSpoilerContext?.isRevealed ?? true;
const textMessageMarkdownContext = React.useContext(
TextMessageMarkdownContext,
);
const messageKey = textMessageMarkdownContext?.messageKey;
const messagePressResponderContext = React.useContext(
MessagePressResponderContext,
);
const onPressMessage = messagePressResponderContext?.onPressMessage;
const onPressLink = useHandleLinkClick(target, markdownContext, messageKey);
return (
);
}
export default MarkdownLink;
diff --git a/native/profile/default-notifications-preferences.react.js b/native/profile/default-notifications-preferences.react.js
index 63673fb4b..072db24e1 100644
--- a/native/profile/default-notifications-preferences.react.js
+++ b/native/profile/default-notifications-preferences.react.js
@@ -1,213 +1,214 @@
// @flow
import * as React from 'react';
-import { View, Text, Platform, Alert } from 'react-native';
+import { View, Text, Platform } from 'react-native';
import { ScrollView } from 'react-native-gesture-handler';
import {
setUserSettings,
setUserSettingsActionTypes,
} from 'lib/actions/user-actions.js';
import { registerFetchKey } from 'lib/reducers/loading-reducer.js';
import {
type UpdateUserSettingsRequest,
type NotificationTypes,
type DefaultNotificationPayload,
notificationTypes,
userSettingsTypes,
} from 'lib/types/account-types.js';
import {
type DispatchActionPromise,
useServerCall,
useDispatchActionPromise,
} from 'lib/utils/action-utils.js';
import type { ProfileNavigationProp } from './profile.react.js';
import Action from '../components/action-row.react.js';
import SWMansionIcon from '../components/swmansion-icon.react.js';
import type { NavigationRoute } from '../navigation/route-names.js';
import { useSelector } from '../redux/redux-utils.js';
import { useStyles } from '../themes/colors.js';
+import Alert from '../utils/alert.js';
const CheckIcon = () => (
);
type ProfileRowProps = {
+content: string,
+onPress: () => void,
+danger?: boolean,
+selected?: boolean,
};
function NotificationRow(props: ProfileRowProps): React.Node {
const { content, onPress, danger, selected } = props;
return (
{selected ? : null}
);
}
type BaseProps = {
+navigation: ProfileNavigationProp<>,
+route: NavigationRoute<'DefaultNotifications'>,
};
type Props = {
...BaseProps,
+styles: typeof unboundStyles,
+dispatchActionPromise: DispatchActionPromise,
+changeNotificationSettings: (
notificationSettingsRequest: UpdateUserSettingsRequest,
) => Promise,
+selectedDefaultNotification: NotificationTypes,
};
class DefaultNotificationsPreferences extends React.PureComponent {
async updatedDefaultNotifications(
data: NotificationTypes,
): Promise {
const { changeNotificationSettings } = this.props;
try {
await changeNotificationSettings({
name: userSettingsTypes.DEFAULT_NOTIFICATIONS,
data,
});
} catch (e) {
Alert.alert(
'Unknown error',
'Uhh... try again?',
[{ text: 'OK', onPress: () => {} }],
{ cancelable: false },
);
}
return {
[userSettingsTypes.DEFAULT_NOTIFICATIONS]: data,
};
}
selectNotificationSetting = (data: NotificationTypes) => {
const { dispatchActionPromise } = this.props;
dispatchActionPromise(
setUserSettingsActionTypes,
this.updatedDefaultNotifications(data),
);
};
selectAllNotifications = () => {
this.selectNotificationSetting(notificationTypes.FOCUSED);
};
selectBackgroundNotifications = () => {
this.selectNotificationSetting(notificationTypes.BACKGROUND);
};
selectNoneNotifications = () => {
this.selectNotificationSetting(notificationTypes.BADGE_ONLY);
};
render() {
const { styles, selectedDefaultNotification } = this.props;
return (
NOTIFICATIONS
);
}
}
const unboundStyles = {
scrollView: {
backgroundColor: 'panelBackground',
},
scrollViewContentContainer: {
paddingTop: 24,
},
section: {
backgroundColor: 'panelForeground',
borderBottomWidth: 1,
borderColor: 'panelForegroundBorder',
borderTopWidth: 1,
marginBottom: 24,
marginVertical: 2,
},
icon: {
lineHeight: Platform.OS === 'ios' ? 18 : 20,
},
header: {
color: 'panelBackgroundLabel',
fontSize: 12,
fontWeight: '400',
paddingBottom: 3,
paddingHorizontal: 24,
},
};
registerFetchKey(setUserSettingsActionTypes);
const ConnectedDefaultNotificationPreferences: React.ComponentType =
React.memo(function ConnectedDefaultNotificationPreferences(
props: BaseProps,
) {
const styles = useStyles(unboundStyles);
const dispatchActionPromise = useDispatchActionPromise();
const changeNotificationSettings = useServerCall(setUserSettings);
const defaultNotification = userSettingsTypes.DEFAULT_NOTIFICATIONS;
const selectedDefaultNotification = useSelector(
({ currentUserInfo }) => {
if (
currentUserInfo?.settings &&
currentUserInfo?.settings[defaultNotification]
) {
return currentUserInfo?.settings[defaultNotification];
}
return notificationTypes.FOCUSED;
},
);
return (
);
});
export default ConnectedDefaultNotificationPreferences;
diff --git a/native/profile/delete-account.react.js b/native/profile/delete-account.react.js
index 9dfc949e6..9bd8adeb9 100644
--- a/native/profile/delete-account.react.js
+++ b/native/profile/delete-account.react.js
@@ -1,280 +1,280 @@
// @flow
import invariant from 'invariant';
import * as React from 'react';
import {
Text,
View,
TextInput as BaseTextInput,
- Alert,
ActivityIndicator,
} from 'react-native';
import { ScrollView } from 'react-native-gesture-handler';
import {
deleteAccountActionTypes,
deleteAccount,
} from 'lib/actions/user-actions.js';
import { preRequestUserStateSelector } from 'lib/selectors/account-selectors.js';
import { createLoadingStatusSelector } from 'lib/selectors/loading-selectors.js';
import { accountHasPassword } from 'lib/shared/account-utils.js';
import type { LogOutResult } from 'lib/types/account-types.js';
import type { LoadingStatus } from 'lib/types/loading-types.js';
import type { PreRequestUserState } from 'lib/types/session-types.js';
import type { DispatchActionPromise } from 'lib/utils/action-utils.js';
import {
useServerCall,
useDispatchActionPromise,
} from 'lib/utils/action-utils.js';
import { deleteNativeCredentialsFor } from '../account/native-credentials.js';
import Button from '../components/button.react.js';
import TextInput from '../components/text-input.react.js';
import { useSelector } from '../redux/redux-utils.js';
import { type Colors, useColors, useStyles } from '../themes/colors.js';
import type { GlobalTheme } from '../types/themes.js';
+import Alert from '../utils/alert.js';
type Props = {
// Redux state
+isAccountWithPassword: boolean,
+loadingStatus: LoadingStatus,
+preRequestUserState: PreRequestUserState,
+activeTheme: ?GlobalTheme,
+colors: Colors,
+styles: typeof unboundStyles,
// Redux dispatch functions
+dispatchActionPromise: DispatchActionPromise,
// async functions that hit server APIs
+deleteAccount: (
password: ?string,
preRequestUserState: PreRequestUserState,
) => Promise,
};
type State = {
+password: ?string,
};
class DeleteAccount extends React.PureComponent {
state: State = {
password: null,
};
mounted = false;
passwordInput: ?React.ElementRef;
componentDidMount() {
this.mounted = true;
}
componentWillUnmount() {
this.mounted = false;
}
render() {
const buttonContent =
this.props.loadingStatus === 'loading' ? (
) : (
Delete account
);
const { panelForegroundTertiaryLabel } = this.props.colors;
let inputPasswordPrompt;
if (this.props.isAccountWithPassword) {
inputPasswordPrompt = (
<>
PASSWORD
);
}
return (
Your account will be permanently deleted.
There is no way to reverse this.
{inputPasswordPrompt}
);
}
onChangePasswordText = (newPassword: string) => {
this.setState({ password: newPassword });
};
passwordInputRef = (
passwordInput: ?React.ElementRef,
) => {
this.passwordInput = passwordInput;
};
focusPasswordInput = () => {
invariant(this.passwordInput, 'passwordInput should be set');
this.passwordInput.focus();
};
submitDeletion = () => {
this.props.dispatchActionPromise(
deleteAccountActionTypes,
this.deleteAccount(),
);
};
async deleteAccount() {
try {
await deleteNativeCredentialsFor();
const result = await this.props.deleteAccount(
this.state.password,
this.props.preRequestUserState,
);
return result;
} catch (e) {
if (e.message === 'invalid_credentials') {
Alert.alert(
'Incorrect password',
'The password you entered is incorrect',
[{ text: 'OK', onPress: this.onErrorAlertAcknowledged }],
{ cancelable: false },
);
} else {
Alert.alert(
'Unknown error',
'Uhh... try again?',
[{ text: 'OK', onPress: this.onErrorAlertAcknowledged }],
{ cancelable: false },
);
}
throw e;
}
}
onErrorAlertAcknowledged = () => {
this.setState({ password: '' }, this.focusPasswordInput);
};
}
const unboundStyles = {
deleteButton: {
backgroundColor: 'vibrantRedButton',
borderRadius: 5,
flex: 1,
marginHorizontal: 24,
marginVertical: 12,
padding: 12,
},
header: {
color: 'panelBackgroundLabel',
fontSize: 12,
fontWeight: '400',
paddingBottom: 3,
paddingHorizontal: 24,
},
input: {
color: 'panelForegroundLabel',
flex: 1,
fontFamily: 'Arial',
fontSize: 16,
paddingVertical: 0,
borderBottomColor: 'transparent',
},
lastWarningText: {
marginBottom: 24,
},
saveText: {
color: 'white',
fontSize: 18,
textAlign: 'center',
},
scrollView: {
backgroundColor: 'panelBackground',
},
scrollViewContentContainer: {
paddingTop: 24,
},
section: {
backgroundColor: 'panelForeground',
borderBottomWidth: 1,
borderColor: 'panelForegroundBorder',
borderTopWidth: 1,
flexDirection: 'row',
justifyContent: 'space-between',
marginBottom: 24,
paddingHorizontal: 24,
paddingVertical: 12,
},
warningText: {
color: 'panelForegroundLabel',
fontSize: 16,
marginHorizontal: 24,
textAlign: 'center',
},
};
const loadingStatusSelector = createLoadingStatusSelector(
deleteAccountActionTypes,
);
const ConnectedDeleteAccount: React.ComponentType<{ ... }> = React.memo<{
...
}>(function ConnectedDeleteAccount() {
const isAccountWithPassword = useSelector(state =>
accountHasPassword(state.currentUserInfo),
);
const loadingStatus = useSelector(loadingStatusSelector);
const preRequestUserState = useSelector(preRequestUserStateSelector);
const activeTheme = useSelector(state => state.globalThemeInfo.activeTheme);
const colors = useColors();
const styles = useStyles(unboundStyles);
const dispatchActionPromise = useDispatchActionPromise();
const callDeleteAccount = useServerCall(deleteAccount);
return (
);
});
export default ConnectedDeleteAccount;
diff --git a/native/profile/edit-password.react.js b/native/profile/edit-password.react.js
index 7954f90ea..f93463cd4 100644
--- a/native/profile/edit-password.react.js
+++ b/native/profile/edit-password.react.js
@@ -1,375 +1,375 @@
// @flow
import { CommonActions } from '@react-navigation/native';
import invariant from 'invariant';
import * as React from 'react';
import {
Text,
View,
TextInput as BaseTextInput,
- Alert,
ActivityIndicator,
} from 'react-native';
import { ScrollView } from 'react-native-gesture-handler';
import {
changeUserPasswordActionTypes,
changeUserPassword,
} from 'lib/actions/user-actions.js';
import { createLoadingStatusSelector } from 'lib/selectors/loading-selectors.js';
import type { LoadingStatus } from 'lib/types/loading-types.js';
import type { PasswordUpdate } from 'lib/types/user-types.js';
import {
useServerCall,
useDispatchActionPromise,
type DispatchActionPromise,
} from 'lib/utils/action-utils.js';
import type { ProfileNavigationProp } from './profile.react.js';
import { setNativeCredentials } from '../account/native-credentials.js';
import Button from '../components/button.react.js';
import TextInput from '../components/text-input.react.js';
import type { NavigationRoute } from '../navigation/route-names.js';
import { useSelector } from '../redux/redux-utils.js';
import { type Colors, useColors, useStyles } from '../themes/colors.js';
import type { GlobalTheme } from '../types/themes.js';
+import Alert from '../utils/alert.js';
type BaseProps = {
+navigation: ProfileNavigationProp<'EditPassword'>,
+route: NavigationRoute<'EditPassword'>,
};
type Props = {
...BaseProps,
// Redux state
+loadingStatus: LoadingStatus,
+username: ?string,
+activeTheme: ?GlobalTheme,
+colors: Colors,
+styles: typeof unboundStyles,
// Redux dispatch functions
+dispatchActionPromise: DispatchActionPromise,
// async functions that hit server APIs
+changeUserPassword: (passwordUpdate: PasswordUpdate) => Promise,
};
type State = {
+currentPassword: string,
+newPassword: string,
+confirmPassword: string,
};
class EditPassword extends React.PureComponent {
state: State = {
currentPassword: '',
newPassword: '',
confirmPassword: '',
};
mounted = false;
currentPasswordInput: ?React.ElementRef;
newPasswordInput: ?React.ElementRef;
confirmPasswordInput: ?React.ElementRef;
componentDidMount() {
this.mounted = true;
}
componentWillUnmount() {
this.mounted = false;
}
render() {
const buttonContent =
this.props.loadingStatus === 'loading' ? (
) : (
Save
);
const { panelForegroundTertiaryLabel } = this.props.colors;
return (
CURRENT PASSWORD
NEW PASSWORD
);
}
onChangeCurrentPassword = (currentPassword: string) => {
this.setState({ currentPassword });
};
currentPasswordRef = (
currentPasswordInput: ?React.ElementRef,
) => {
this.currentPasswordInput = currentPasswordInput;
};
focusCurrentPassword = () => {
invariant(this.currentPasswordInput, 'currentPasswordInput should be set');
this.currentPasswordInput.focus();
};
onChangeNewPassword = (newPassword: string) => {
this.setState({ newPassword });
};
newPasswordRef = (
newPasswordInput: ?React.ElementRef,
) => {
this.newPasswordInput = newPasswordInput;
};
focusNewPassword = () => {
invariant(this.newPasswordInput, 'newPasswordInput should be set');
this.newPasswordInput.focus();
};
onChangeConfirmPassword = (confirmPassword: string) => {
this.setState({ confirmPassword });
};
confirmPasswordRef = (
confirmPasswordInput: ?React.ElementRef,
) => {
this.confirmPasswordInput = confirmPasswordInput;
};
focusConfirmPassword = () => {
invariant(this.confirmPasswordInput, 'confirmPasswordInput should be set');
this.confirmPasswordInput.focus();
};
goBackOnce() {
this.props.navigation.dispatch(state => ({
...CommonActions.goBack(),
target: state.key,
}));
}
submitPassword = () => {
if (this.state.newPassword === '') {
Alert.alert(
'Empty password',
'New password cannot be empty',
[{ text: 'OK', onPress: this.onNewPasswordAlertAcknowledged }],
{ cancelable: false },
);
} else if (this.state.newPassword !== this.state.confirmPassword) {
Alert.alert(
'Passwords don’t match',
'New password fields must contain the same password',
[{ text: 'OK', onPress: this.onNewPasswordAlertAcknowledged }],
{ cancelable: false },
);
} else if (this.state.newPassword === this.state.currentPassword) {
this.goBackOnce();
} else {
this.props.dispatchActionPromise(
changeUserPasswordActionTypes,
this.savePassword(),
);
}
};
async savePassword() {
const { username } = this.props;
if (!username) {
return;
}
try {
await this.props.changeUserPassword({
updatedFields: {
password: this.state.newPassword,
},
currentPassword: this.state.currentPassword,
});
await setNativeCredentials({
username,
password: this.state.newPassword,
});
this.goBackOnce();
} catch (e) {
if (e.message === 'invalid_credentials') {
Alert.alert(
'Incorrect password',
'The current password you entered is incorrect',
[{ text: 'OK', onPress: this.onCurrentPasswordAlertAcknowledged }],
{ cancelable: false },
);
} else {
Alert.alert(
'Unknown error',
'Uhh... try again?',
[{ text: 'OK', onPress: this.onUnknownErrorAlertAcknowledged }],
{ cancelable: false },
);
}
}
}
onNewPasswordAlertAcknowledged = () => {
this.setState(
{ newPassword: '', confirmPassword: '' },
this.focusNewPassword,
);
};
onCurrentPasswordAlertAcknowledged = () => {
this.setState({ currentPassword: '' }, this.focusCurrentPassword);
};
onUnknownErrorAlertAcknowledged = () => {
this.setState(
{ currentPassword: '', newPassword: '', confirmPassword: '' },
this.focusCurrentPassword,
);
};
}
const unboundStyles = {
header: {
color: 'panelBackgroundLabel',
fontSize: 12,
fontWeight: '400',
paddingBottom: 3,
paddingHorizontal: 24,
},
hr: {
backgroundColor: 'panelForegroundBorder',
height: 1,
marginHorizontal: 15,
},
input: {
color: 'panelForegroundLabel',
flex: 1,
fontFamily: 'Arial',
fontSize: 16,
paddingVertical: 0,
borderBottomColor: 'transparent',
},
row: {
flexDirection: 'row',
justifyContent: 'space-between',
paddingHorizontal: 24,
paddingVertical: 9,
},
saveButton: {
backgroundColor: 'vibrantGreenButton',
borderRadius: 5,
flex: 1,
marginHorizontal: 24,
marginVertical: 12,
padding: 12,
},
saveText: {
color: 'white',
fontSize: 18,
textAlign: 'center',
},
scrollView: {
backgroundColor: 'panelBackground',
},
scrollViewContentContainer: {
paddingTop: 24,
},
section: {
backgroundColor: 'panelForeground',
borderBottomWidth: 1,
borderColor: 'panelForegroundBorder',
borderTopWidth: 1,
marginBottom: 24,
paddingVertical: 3,
},
};
const loadingStatusSelector = createLoadingStatusSelector(
changeUserPasswordActionTypes,
);
const ConnectedEditPassword: React.ComponentType =
React.memo(function ConnectedEditPassword(props: BaseProps) {
const loadingStatus = useSelector(loadingStatusSelector);
const username = useSelector(state => {
if (state.currentUserInfo && !state.currentUserInfo.anonymous) {
return state.currentUserInfo.username;
}
return undefined;
});
const activeTheme = useSelector(state => state.globalThemeInfo.activeTheme);
const colors = useColors();
const styles = useStyles(unboundStyles);
const dispatchActionPromise = useDispatchActionPromise();
const callChangeUserPassword = useServerCall(changeUserPassword);
return (
);
});
export default ConnectedEditPassword;
diff --git a/native/profile/profile-screen.react.js b/native/profile/profile-screen.react.js
index 68ef52122..8c44e8a72 100644
--- a/native/profile/profile-screen.react.js
+++ b/native/profile/profile-screen.react.js
@@ -1,411 +1,412 @@
// @flow
import * as React from 'react';
-import { View, Text, Alert, Platform, ScrollView } from 'react-native';
+import { View, Text, Platform, ScrollView } from 'react-native';
import { logOutActionTypes, logOut } from 'lib/actions/user-actions.js';
import { useStringForUser } from 'lib/hooks/ens-cache.js';
import { preRequestUserStateSelector } from 'lib/selectors/account-selectors.js';
import { createLoadingStatusSelector } from 'lib/selectors/loading-selectors.js';
import { accountHasPassword } from 'lib/shared/account-utils.js';
import type { LogOutResult } from 'lib/types/account-types.js';
import { type PreRequestUserState } from 'lib/types/session-types.js';
import { type CurrentUserInfo } from 'lib/types/user-types.js';
import {
type DispatchActionPromise,
useDispatchActionPromise,
useServerCall,
} from 'lib/utils/action-utils.js';
import type { ProfileNavigationProp } from './profile.react.js';
import { deleteNativeCredentialsFor } from '../account/native-credentials.js';
import EditUserAvatar from '../avatars/edit-user-avatar.react.js';
import Action from '../components/action-row.react.js';
import Button from '../components/button.react.js';
import EditSettingButton from '../components/edit-setting-button.react.js';
import { SingleLine } from '../components/single-line.react.js';
import type { NavigationRoute } from '../navigation/route-names.js';
import {
EditPasswordRouteName,
DeleteAccountRouteName,
BuildInfoRouteName,
DevToolsRouteName,
AppearancePreferencesRouteName,
FriendListRouteName,
BlockListRouteName,
PrivacyPreferencesRouteName,
DefaultNotificationsPreferencesRouteName,
} from '../navigation/route-names.js';
import { useSelector } from '../redux/redux-utils.js';
import { type Colors, useColors, useStyles } from '../themes/colors.js';
+import Alert from '../utils/alert.js';
import { useStaffCanSee } from '../utils/staff-utils.js';
type ProfileRowProps = {
+content: string,
+onPress: () => void,
+danger?: boolean,
};
function ProfileRow(props: ProfileRowProps): React.Node {
const { content, onPress, danger } = props;
return (
);
}
type BaseProps = {
+navigation: ProfileNavigationProp<'ProfileScreen'>,
+route: NavigationRoute<'ProfileScreen'>,
};
type Props = {
...BaseProps,
+currentUserInfo: ?CurrentUserInfo,
+preRequestUserState: PreRequestUserState,
+logOutLoading: boolean,
+colors: Colors,
+styles: typeof unboundStyles,
+dispatchActionPromise: DispatchActionPromise,
+logOut: (preRequestUserState: PreRequestUserState) => Promise,
+staffCanSee: boolean,
+stringForUser: ?string,
+isAccountWithPassword: boolean,
};
class ProfileScreen extends React.PureComponent {
get loggedOutOrLoggingOut() {
return (
!this.props.currentUserInfo ||
this.props.currentUserInfo.anonymous ||
this.props.logOutLoading
);
}
render() {
let developerTools, defaultNotifications;
const { staffCanSee } = this.props;
if (staffCanSee) {
developerTools = (
);
defaultNotifications = (
);
}
let passwordEditionUI;
if (accountHasPassword(this.props.currentUserInfo)) {
passwordEditionUI = (
Password
••••••••••••••••
);
}
return (
USER AVATAR
ACCOUNT
Logged in as
{this.props.stringForUser}
{passwordEditionUI}
PREFERENCES
{defaultNotifications}
{developerTools}
);
}
onPressLogOut = () => {
if (this.loggedOutOrLoggingOut) {
return;
}
if (!this.props.isAccountWithPassword) {
Alert.alert(
'Log out',
'Are you sure you want to log out?',
[
{ text: 'No', style: 'cancel' },
{
text: 'Yes',
onPress: this.logOutWithoutDeletingNativeCredentialsWrapper,
style: 'destructive',
},
],
{ cancelable: true },
);
return;
}
const alertTitle =
Platform.OS === 'ios' ? 'Keep Login Info in Keychain' : 'Keep Login Info';
const alertDescription =
'We will automatically fill out log-in forms with your credentials ' +
'in the app.';
Alert.alert(
alertTitle,
alertDescription,
[
{ text: 'Cancel', style: 'cancel' },
{
text: 'Keep',
onPress: this.logOutWithoutDeletingNativeCredentialsWrapper,
},
{
text: 'Remove',
onPress: this.logOutAndDeleteNativeCredentialsWrapper,
style: 'destructive',
},
],
{ cancelable: true },
);
};
logOutWithoutDeletingNativeCredentialsWrapper = () => {
if (this.loggedOutOrLoggingOut) {
return;
}
this.logOut();
};
logOutAndDeleteNativeCredentialsWrapper = async () => {
if (this.loggedOutOrLoggingOut) {
return;
}
await this.deleteNativeCredentials();
this.logOut();
};
logOut() {
this.props.dispatchActionPromise(
logOutActionTypes,
this.props.logOut(this.props.preRequestUserState),
);
}
async deleteNativeCredentials() {
await deleteNativeCredentialsFor();
}
navigateIfActive(name) {
this.props.navigation.navigate({ name });
}
onPressEditPassword = () => {
this.navigateIfActive(EditPasswordRouteName);
};
onPressDeleteAccount = () => {
this.navigateIfActive(DeleteAccountRouteName);
};
onPressBuildInfo = () => {
this.navigateIfActive(BuildInfoRouteName);
};
onPressDevTools = () => {
this.navigateIfActive(DevToolsRouteName);
};
onPressAppearance = () => {
this.navigateIfActive(AppearancePreferencesRouteName);
};
onPressPrivacy = () => {
this.navigateIfActive(PrivacyPreferencesRouteName);
};
onPressDefaultNotifications = () => {
this.navigateIfActive(DefaultNotificationsPreferencesRouteName);
};
onPressFriendList = () => {
this.navigateIfActive(FriendListRouteName);
};
onPressBlockList = () => {
this.navigateIfActive(BlockListRouteName);
};
}
const unboundStyles = {
avatarSection: {
alignItems: 'center',
paddingVertical: 16,
},
container: {
flex: 1,
},
content: {
flex: 1,
},
deleteAccountButton: {
paddingHorizontal: 24,
paddingVertical: 12,
},
editPasswordButton: {
paddingTop: Platform.OS === 'android' ? 3 : 2,
},
header: {
color: 'panelBackgroundLabel',
fontSize: 12,
fontWeight: '400',
paddingBottom: 3,
paddingHorizontal: 24,
},
label: {
color: 'panelForegroundTertiaryLabel',
fontSize: 16,
paddingRight: 12,
},
loggedInLabel: {
color: 'panelForegroundTertiaryLabel',
fontSize: 16,
},
logOutText: {
color: 'link',
fontSize: 16,
paddingLeft: 6,
},
row: {
flex: 1,
flexDirection: 'row',
justifyContent: 'space-between',
},
scrollView: {
backgroundColor: 'panelBackground',
},
scrollViewContentContainer: {
paddingTop: 24,
},
paddedRow: {
flex: 1,
flexDirection: 'row',
justifyContent: 'space-between',
paddingHorizontal: 24,
paddingVertical: 10,
},
section: {
backgroundColor: 'panelForeground',
borderBottomWidth: 1,
borderColor: 'panelForegroundBorder',
borderTopWidth: 1,
marginBottom: 24,
paddingVertical: 1,
},
unpaddedSection: {
backgroundColor: 'panelForeground',
borderBottomWidth: 1,
borderColor: 'panelForegroundBorder',
borderTopWidth: 1,
marginBottom: 24,
},
username: {
color: 'panelForegroundLabel',
flex: 1,
},
value: {
color: 'panelForegroundLabel',
fontSize: 16,
textAlign: 'right',
},
};
const logOutLoadingStatusSelector =
createLoadingStatusSelector(logOutActionTypes);
const ConnectedProfileScreen: React.ComponentType =
React.memo(function ConnectedProfileScreen(props: BaseProps) {
const currentUserInfo = useSelector(state => state.currentUserInfo);
const preRequestUserState = useSelector(preRequestUserStateSelector);
const logOutLoading =
useSelector(logOutLoadingStatusSelector) === 'loading';
const colors = useColors();
const styles = useStyles(unboundStyles);
const callLogOut = useServerCall(logOut);
const dispatchActionPromise = useDispatchActionPromise();
const staffCanSee = useStaffCanSee();
const stringForUser = useStringForUser(currentUserInfo);
const isAccountWithPassword = useSelector(state =>
accountHasPassword(state.currentUserInfo),
);
return (
);
});
export default ConnectedProfileScreen;
diff --git a/native/profile/relationship-list-item-tooltip-modal.react.js b/native/profile/relationship-list-item-tooltip-modal.react.js
index 7216233d6..8568fa359 100644
--- a/native/profile/relationship-list-item-tooltip-modal.react.js
+++ b/native/profile/relationship-list-item-tooltip-modal.react.js
@@ -1,140 +1,141 @@
// @flow
import * as React from 'react';
-import { Alert, TouchableOpacity } from 'react-native';
+import { TouchableOpacity } from 'react-native';
import {
updateRelationshipsActionTypes,
updateRelationships,
} from 'lib/actions/relationship-actions.js';
import { stringForUser } from 'lib/shared/user-utils.js';
import type { RelativeUserInfo } from 'lib/types/user-types.js';
import {
useDispatchActionPromise,
useServerCall,
} from 'lib/utils/action-utils.js';
import PencilIcon from '../components/pencil-icon.react.js';
import type { AppNavigationProp } from '../navigation/app-navigator.react.js';
import {
createTooltip,
type TooltipParams,
type BaseTooltipProps,
type TooltipMenuProps,
} from '../tooltip/tooltip.react.js';
+import Alert from '../utils/alert.js';
type Action = 'unfriend' | 'unblock';
export type RelationshipListItemTooltipModalParams = TooltipParams<{
+relativeUserInfo: RelativeUserInfo,
}>;
type OnRemoveUserProps = {
...RelationshipListItemTooltipModalParams,
+action: Action,
};
function useRelationshipAction(input: OnRemoveUserProps) {
const boundRemoveRelationships = useServerCall(updateRelationships);
const dispatchActionPromise = useDispatchActionPromise();
const userText = stringForUser(input.relativeUserInfo);
return React.useCallback(() => {
const callRemoveRelationships = async () => {
try {
return await boundRemoveRelationships({
action: input.action,
userIDs: [input.relativeUserInfo.id],
});
} catch (e) {
Alert.alert('Unknown error', 'Uhh... try again?', [{ text: 'OK' }], {
cancelable: true,
});
throw e;
}
};
const onConfirmRemoveUser = () => {
const customKeyName = `${updateRelationshipsActionTypes.started}:${input.relativeUserInfo.id}`;
dispatchActionPromise(
updateRelationshipsActionTypes,
callRemoveRelationships(),
{ customKeyName },
);
};
const action = {
unfriend: 'removal',
unblock: 'unblock',
}[input.action];
const message = {
unfriend: `remove ${userText} from friends?`,
unblock: `unblock ${userText}?`,
}[input.action];
Alert.alert(
`Confirm ${action}`,
`Are you sure you want to ${message}`,
[
{ text: 'Cancel', style: 'cancel' },
{ text: 'OK', onPress: onConfirmRemoveUser },
],
{ cancelable: true },
);
}, [boundRemoveRelationships, dispatchActionPromise, userText, input]);
}
function TooltipMenu(
props: TooltipMenuProps<'RelationshipListItemTooltipModal'>,
): React.Node {
const { route, tooltipItem: TooltipItem } = props;
const onRemoveUser = useRelationshipAction({
...route.params,
action: 'unfriend',
});
const onUnblockUser = useRelationshipAction({
...route.params,
action: 'unblock',
});
return (
<>
);
}
type Props = {
+navigation: AppNavigationProp<'RelationshipListItemTooltipModal'>,
...
};
class RelationshipListItemTooltipButton extends React.PureComponent {
render() {
return (
);
}
onPress = () => {
this.props.navigation.goBackOnce();
};
}
const RelationshipListItemTooltipModal: React.ComponentType<
BaseTooltipProps<'RelationshipListItemTooltipModal'>,
> = createTooltip<'RelationshipListItemTooltipModal'>(
RelationshipListItemTooltipButton,
TooltipMenu,
);
export default RelationshipListItemTooltipModal;
diff --git a/native/profile/relationship-list-item.react.js b/native/profile/relationship-list-item.react.js
index 8a88fc849..ea58945d0 100644
--- a/native/profile/relationship-list-item.react.js
+++ b/native/profile/relationship-list-item.react.js
@@ -1,349 +1,344 @@
// @flow
import invariant from 'invariant';
import * as React from 'react';
-import {
- Alert,
- View,
- Text,
- TouchableOpacity,
- ActivityIndicator,
-} from 'react-native';
+import { View, Text, TouchableOpacity, ActivityIndicator } from 'react-native';
import {
updateRelationshipsActionTypes,
updateRelationships,
} from 'lib/actions/relationship-actions.js';
import { createLoadingStatusSelector } from 'lib/selectors/loading-selectors.js';
import type { LoadingStatus } from 'lib/types/loading-types.js';
import {
type RelationshipRequest,
type RelationshipAction,
type RelationshipErrors,
userRelationshipStatus,
relationshipActions,
} from 'lib/types/relationship-types.js';
import type {
AccountUserInfo,
GlobalAccountUserInfo,
} from 'lib/types/user-types.js';
import {
type DispatchActionPromise,
useServerCall,
useDispatchActionPromise,
} from 'lib/utils/action-utils.js';
import type { RelationshipListNavigate } from './relationship-list.react.js';
import UserAvatar from '../avatars/user-avatar.react.js';
import PencilIcon from '../components/pencil-icon.react.js';
import { SingleLine } from '../components/single-line.react.js';
import {
type KeyboardState,
KeyboardContext,
} from '../keyboard/keyboard-state.js';
import {
OverlayContext,
type OverlayContextType,
} from '../navigation/overlay-context.js';
import type { NavigationRoute } from '../navigation/route-names.js';
import {
RelationshipListItemTooltipModalRouteName,
FriendListRouteName,
BlockListRouteName,
} from '../navigation/route-names.js';
import { useSelector } from '../redux/redux-utils.js';
import { type Colors, useColors, useStyles } from '../themes/colors.js';
import type { VerticalBounds } from '../types/layout-types.js';
+import Alert from '../utils/alert.js';
type BaseProps = {
+userInfo: AccountUserInfo,
+lastListItem: boolean,
+verticalBounds: ?VerticalBounds,
+relationshipListRoute: NavigationRoute<'FriendList' | 'BlockList'>,
+navigate: RelationshipListNavigate,
+onSelect: (selectedUser: GlobalAccountUserInfo) => void,
};
type Props = {
...BaseProps,
// Redux state
+removeUserLoadingStatus: LoadingStatus,
+colors: Colors,
+styles: typeof unboundStyles,
// Redux dispatch functions
+dispatchActionPromise: DispatchActionPromise,
// async functions that hit server APIs
+updateRelationships: (
request: RelationshipRequest,
) => Promise,
// withOverlayContext
+overlayContext: ?OverlayContextType,
// withKeyboardState
+keyboardState: ?KeyboardState,
};
class RelationshipListItem extends React.PureComponent {
editButton = React.createRef>();
render() {
const {
lastListItem,
removeUserLoadingStatus,
userInfo,
relationshipListRoute,
} = this.props;
const relationshipsToEdit = {
[FriendListRouteName]: [userRelationshipStatus.FRIEND],
[BlockListRouteName]: [
userRelationshipStatus.BOTH_BLOCKED,
userRelationshipStatus.BLOCKED_BY_VIEWER,
],
}[relationshipListRoute.name];
const canEditFriendRequest = {
[FriendListRouteName]: true,
[BlockListRouteName]: false,
}[relationshipListRoute.name];
const borderBottom = lastListItem ? null : this.props.styles.borderBottom;
let editButton = null;
if (removeUserLoadingStatus === 'loading') {
editButton = (
);
} else if (relationshipsToEdit.includes(userInfo.relationshipStatus)) {
editButton = (
);
} else if (
userInfo.relationshipStatus === userRelationshipStatus.REQUEST_RECEIVED &&
canEditFriendRequest
) {
editButton = (
Accept
Reject
);
} else if (
userInfo.relationshipStatus === userRelationshipStatus.REQUEST_SENT &&
canEditFriendRequest
) {
editButton = (
Cancel request
);
} else {
editButton = (
Add
);
}
return (
{this.props.userInfo.username}
{editButton}
);
}
onSelect = () => {
const { id, username } = this.props.userInfo;
this.props.onSelect({ id, username });
};
visibleEntryIDs() {
const { relationshipListRoute } = this.props;
const id = {
[FriendListRouteName]: 'unfriend',
[BlockListRouteName]: 'unblock',
}[relationshipListRoute.name];
return [id];
}
onPressEdit = () => {
if (this.props.keyboardState?.dismissKeyboardIfShowing()) {
return;
}
const {
editButton,
props: { verticalBounds },
} = this;
const { overlayContext, userInfo } = this.props;
invariant(
overlayContext,
'RelationshipListItem should have OverlayContext',
);
overlayContext.setScrollBlockingModalStatus('open');
if (!editButton.current || !verticalBounds) {
return;
}
const { relationshipStatus, ...restUserInfo } = userInfo;
const relativeUserInfo = {
...restUserInfo,
isViewer: false,
};
editButton.current.measure((x, y, width, height, pageX, pageY) => {
const coordinates = { x: pageX, y: pageY, width, height };
this.props.navigate<'RelationshipListItemTooltipModal'>({
name: RelationshipListItemTooltipModalRouteName,
params: {
presentedFrom: this.props.relationshipListRoute.key,
initialCoordinates: coordinates,
verticalBounds,
visibleEntryIDs: this.visibleEntryIDs(),
relativeUserInfo,
},
});
});
};
// We need to set onLayout in order to allow .measure() to be on the ref
onLayout = () => {};
onPressFriendUser = () => {
this.onPressUpdateFriendship(relationshipActions.FRIEND);
};
onPressUnfriendUser = () => {
this.onPressUpdateFriendship(relationshipActions.UNFRIEND);
};
onPressUpdateFriendship(action: RelationshipAction) {
const { id } = this.props.userInfo;
const customKeyName = `${updateRelationshipsActionTypes.started}:${id}`;
this.props.dispatchActionPromise(
updateRelationshipsActionTypes,
this.updateFriendship(action),
{ customKeyName },
);
}
async updateFriendship(action: RelationshipAction) {
try {
return await this.props.updateRelationships({
action,
userIDs: [this.props.userInfo.id],
});
} catch (e) {
Alert.alert('Unknown error', 'Uhh... try again?', [{ text: 'OK' }], {
cancelable: true,
});
throw e;
}
}
}
const unboundStyles = {
editButton: {
paddingLeft: 10,
},
container: {
flex: 1,
paddingHorizontal: 12,
backgroundColor: 'panelForeground',
},
innerContainer: {
paddingVertical: 10,
paddingHorizontal: 12,
borderColor: 'panelForegroundBorder',
flexDirection: 'row',
},
borderBottom: {
borderBottomWidth: 1,
},
buttonContainer: {
flexDirection: 'row',
},
editButtonWithMargin: {
marginLeft: 15,
},
username: {
color: 'panelForegroundSecondaryLabel',
flex: 1,
fontSize: 16,
lineHeight: 20,
marginLeft: 8,
},
blueAction: {
color: 'link',
fontSize: 16,
paddingLeft: 6,
},
redAction: {
color: 'redText',
fontSize: 16,
paddingLeft: 6,
},
};
const ConnectedRelationshipListItem: React.ComponentType =
React.memo(function ConnectedRelationshipListItem(
props: BaseProps,
) {
const removeUserLoadingStatus = useSelector(state =>
createLoadingStatusSelector(
updateRelationshipsActionTypes,
`${updateRelationshipsActionTypes.started}:${props.userInfo.id}`,
)(state),
);
const colors = useColors();
const styles = useStyles(unboundStyles);
const dispatchActionPromise = useDispatchActionPromise();
const boundUpdateRelationships = useServerCall(updateRelationships);
const overlayContext = React.useContext(OverlayContext);
const keyboardState = React.useContext(KeyboardContext);
return (
);
});
export default ConnectedRelationshipListItem;
diff --git a/native/profile/relationship-list.react.js b/native/profile/relationship-list.react.js
index d88b3fd15..917731753 100644
--- a/native/profile/relationship-list.react.js
+++ b/native/profile/relationship-list.react.js
@@ -1,498 +1,499 @@
// @flow
import invariant from 'invariant';
import * as React from 'react';
-import { View, Text, Alert, Platform } from 'react-native';
+import { View, Text, Platform } from 'react-native';
import { FlatList } from 'react-native-gesture-handler';
import {
updateRelationshipsActionTypes,
updateRelationships,
} from 'lib/actions/relationship-actions.js';
import {
searchUsersActionTypes,
searchUsers,
} from 'lib/actions/user-actions.js';
import { useENSNames } from 'lib/hooks/ens-cache.js';
import { registerFetchKey } from 'lib/reducers/loading-reducer.js';
import { userRelationshipsSelector } from 'lib/selectors/relationship-selectors.js';
import { userStoreSearchIndex as userStoreSearchIndexSelector } from 'lib/selectors/user-selectors.js';
import {
userRelationshipStatus,
relationshipActions,
} from 'lib/types/relationship-types.js';
import type {
GlobalAccountUserInfo,
AccountUserInfo,
} from 'lib/types/user-types.js';
import {
useServerCall,
useDispatchActionPromise,
} from 'lib/utils/action-utils.js';
import type { ProfileNavigationProp } from './profile.react.js';
import RelationshipListItem from './relationship-list-item.react.js';
import LinkButton from '../components/link-button.react.js';
import { createTagInput, BaseTagInput } from '../components/tag-input.react.js';
import { KeyboardContext } from '../keyboard/keyboard-state.js';
import { OverlayContext } from '../navigation/overlay-context.js';
import type { NavigationRoute } from '../navigation/route-names.js';
import {
FriendListRouteName,
BlockListRouteName,
} from '../navigation/route-names.js';
import { useSelector } from '../redux/redux-utils.js';
import { useStyles, useIndicatorStyle } from '../themes/colors.js';
import type { VerticalBounds } from '../types/layout-types.js';
+import Alert from '../utils/alert.js';
const TagInput = createTagInput();
export type RelationshipListNavigate = $PropertyType<
ProfileNavigationProp<'FriendList' | 'BlockList'>,
'navigate',
>;
const tagInputProps = {
placeholder: 'username',
autoFocus: true,
returnKeyType: 'go',
};
type ListItem =
| { +type: 'empty', +because: 'no-relationships' | 'no-results' }
| { +type: 'header' }
| { +type: 'footer' }
| {
+type: 'user',
+userInfo: AccountUserInfo,
+lastListItem: boolean,
+verticalBounds: ?VerticalBounds,
};
// ESLint doesn't recognize that invariant always throws
// eslint-disable-next-line consistent-return
function keyExtractor(item: ListItem) {
if (item.userInfo) {
return item.userInfo.id;
} else if (item.type === 'empty') {
return 'empty';
} else if (item.type === 'header') {
return 'header';
} else if (item.type === 'footer') {
return 'footer';
}
invariant(false, 'keyExtractor conditions should be exhaustive');
}
const tagDataLabelExtractor = (userInfo: GlobalAccountUserInfo) =>
userInfo.username;
type Props = {
+navigation: ProfileNavigationProp<>,
+route: NavigationRoute<'FriendList' | 'BlockList'>,
};
function RelationshipList(props: Props): React.Node {
const callSearchUsers = useServerCall(searchUsers);
const userInfos = useSelector(state => state.userStore.userInfos);
const searchUsersOnServer = React.useCallback(
async (usernamePrefix: string) => {
if (usernamePrefix.length === 0) {
return [];
}
const userInfosResult = await callSearchUsers(usernamePrefix);
return userInfosResult.userInfos;
},
[callSearchUsers],
);
const [searchInputText, setSearchInputText] = React.useState('');
const [userStoreSearchResults, setUserStoreSearchResults] = React.useState<
$ReadOnlySet,
>(new Set());
const [serverSearchResults, setServerSearchResults] = React.useState<
$ReadOnlyArray,
>([]);
const { route } = props;
const routeName = route.name;
const userStoreSearchIndex = useSelector(userStoreSearchIndexSelector);
const onChangeSearchText = React.useCallback(
async (searchText: string) => {
setSearchInputText(searchText);
const excludeStatuses = {
[FriendListRouteName]: [
userRelationshipStatus.BLOCKED_VIEWER,
userRelationshipStatus.BOTH_BLOCKED,
],
[BlockListRouteName]: [],
}[routeName];
const results = userStoreSearchIndex
.getSearchResults(searchText)
.filter(userID => {
const relationship = userInfos[userID].relationshipStatus;
return !excludeStatuses.includes(relationship);
});
setUserStoreSearchResults(new Set(results));
const searchResultsFromServer = await searchUsersOnServer(searchText);
const filteredServerSearchResults = searchResultsFromServer.filter(
searchUserInfo => {
const userInfo = userInfos[searchUserInfo.id];
return (
!userInfo || !excludeStatuses.includes(userInfo.relationshipStatus)
);
},
);
setServerSearchResults(filteredServerSearchResults);
},
[routeName, userStoreSearchIndex, userInfos, searchUsersOnServer],
);
const overlayContext = React.useContext(OverlayContext);
invariant(overlayContext, 'RelationshipList should have OverlayContext');
const scrollEnabled = overlayContext.scrollBlockingModalStatus === 'closed';
const tagInputRef = React.useRef>();
const flatListContainerRef = React.useRef>();
const keyboardState = React.useContext(KeyboardContext);
const keyboardNotShowing = !!(
keyboardState && !keyboardState.keyboardShowing
);
const [verticalBounds, setVerticalBounds] =
React.useState(null);
const onFlatListContainerLayout = React.useCallback(() => {
if (!flatListContainerRef.current) {
return;
}
if (!keyboardNotShowing) {
return;
}
flatListContainerRef.current.measure(
(x, y, width, height, pageX, pageY) => {
if (
height === null ||
height === undefined ||
pageY === null ||
pageY === undefined
) {
return;
}
setVerticalBounds({ height, y: pageY });
},
);
}, [keyboardNotShowing]);
const [currentTags, setCurrentTags] = React.useState<
$ReadOnlyArray,
>([]);
const onSelect = React.useCallback(
(selectedUser: GlobalAccountUserInfo) => {
if (currentTags.find(o => o.id === selectedUser.id)) {
return;
}
setSearchInputText('');
setCurrentTags(prevCurrentTags => prevCurrentTags.concat(selectedUser));
},
[currentTags],
);
const onUnknownErrorAlertAcknowledged = React.useCallback(() => {
setCurrentTags([]);
setSearchInputText('');
tagInputRef.current?.focus();
}, []);
const callUpdateRelationships = useServerCall(updateRelationships);
const updateRelationshipsOnServer = React.useCallback(async () => {
const action = {
[FriendListRouteName]: relationshipActions.FRIEND,
[BlockListRouteName]: relationshipActions.BLOCK,
}[routeName];
const userIDs = currentTags.map(userInfo => userInfo.id);
try {
const result = await callUpdateRelationships({
action,
userIDs,
});
setCurrentTags([]);
setSearchInputText('');
return result;
} catch (e) {
Alert.alert(
'Unknown error',
'Uhh... try again?',
[{ text: 'OK', onPress: onUnknownErrorAlertAcknowledged }],
{ cancelable: true, onDismiss: onUnknownErrorAlertAcknowledged },
);
throw e;
}
}, [
routeName,
currentTags,
callUpdateRelationships,
onUnknownErrorAlertAcknowledged,
]);
const dispatchActionPromise = useDispatchActionPromise();
const noCurrentTags = currentTags.length === 0;
const onPressAdd = React.useCallback(() => {
if (noCurrentTags) {
return;
}
dispatchActionPromise(
updateRelationshipsActionTypes,
updateRelationshipsOnServer(),
);
}, [noCurrentTags, dispatchActionPromise, updateRelationshipsOnServer]);
const inputProps = React.useMemo(
() => ({
...tagInputProps,
onSubmitEditing: onPressAdd,
}),
[onPressAdd],
);
const { navigation } = props;
const { navigate } = navigation;
const styles = useStyles(unboundStyles);
const renderItem = React.useCallback(
// ESLint doesn't recognize that invariant always throws
// eslint-disable-next-line consistent-return
({ item }: { item: ListItem, ... }) => {
if (item.type === 'empty') {
const action = {
[FriendListRouteName]: 'added',
[BlockListRouteName]: 'blocked',
}[routeName];
const emptyMessage =
item.because === 'no-relationships'
? `You haven't ${action} any users yet`
: 'No results';
return {emptyMessage};
} else if (item.type === 'header' || item.type === 'footer') {
return ;
} else if (item.type === 'user') {
return (
);
} else {
invariant(false, `unexpected RelationshipList item type ${item.type}`);
}
},
[routeName, navigate, route, onSelect, styles.emptyText, styles.separator],
);
const { setOptions } = navigation;
const prevNoCurrentTags = React.useRef(noCurrentTags);
React.useEffect(() => {
let setSaveButtonDisabled;
if (!prevNoCurrentTags.current && noCurrentTags) {
setSaveButtonDisabled = true;
} else if (prevNoCurrentTags.current && !noCurrentTags) {
setSaveButtonDisabled = false;
}
prevNoCurrentTags.current = noCurrentTags;
if (setSaveButtonDisabled === undefined) {
return;
}
setOptions({
// eslint-disable-next-line react/display-name
headerRight: () => (
),
});
}, [setOptions, noCurrentTags, onPressAdd]);
const relationships = useSelector(userRelationshipsSelector);
const viewerID = useSelector(
state => state.currentUserInfo && state.currentUserInfo.id,
);
const usersWithoutENSNames = React.useMemo(() => {
if (searchInputText === '') {
return {
[FriendListRouteName]: relationships.friends,
[BlockListRouteName]: relationships.blocked,
}[routeName];
}
const mergedUserInfos: { [id: string]: AccountUserInfo } = {};
for (const userInfo of serverSearchResults) {
mergedUserInfos[userInfo.id] = userInfo;
}
for (const id of userStoreSearchResults) {
const { username, relationshipStatus } = userInfos[id];
if (username) {
mergedUserInfos[id] = { id, username, relationshipStatus };
}
}
const excludeUserIDsArray = currentTags
.map(userInfo => userInfo.id)
.concat(viewerID || []);
const excludeUserIDs = new Set(excludeUserIDsArray);
const sortToEnd = [];
const userSearchResults = [];
const sortRelationshipTypesToEnd = {
[FriendListRouteName]: [userRelationshipStatus.FRIEND],
[BlockListRouteName]: [
userRelationshipStatus.BLOCKED_BY_VIEWER,
userRelationshipStatus.BOTH_BLOCKED,
],
}[routeName];
for (const userID in mergedUserInfos) {
if (excludeUserIDs.has(userID)) {
continue;
}
const userInfo = mergedUserInfos[userID];
if (sortRelationshipTypesToEnd.includes(userInfo.relationshipStatus)) {
sortToEnd.push(userInfo);
} else {
userSearchResults.push(userInfo);
}
}
return userSearchResults.concat(sortToEnd);
}, [
searchInputText,
relationships,
routeName,
viewerID,
currentTags,
serverSearchResults,
userStoreSearchResults,
userInfos,
]);
const displayUsers = useENSNames(usersWithoutENSNames);
const listData = React.useMemo(() => {
let emptyItem;
if (displayUsers.length === 0 && searchInputText === '') {
emptyItem = { type: 'empty', because: 'no-relationships' };
} else if (displayUsers.length === 0) {
emptyItem = { type: 'empty', because: 'no-results' };
}
const mappedUsers = displayUsers.map((userInfo, index) => ({
type: 'user',
userInfo,
lastListItem: displayUsers.length - 1 === index,
verticalBounds,
}));
return []
.concat(emptyItem ? emptyItem : [])
.concat(emptyItem ? [] : { type: 'header' })
.concat(mappedUsers)
.concat(emptyItem ? [] : { type: 'footer' });
}, [displayUsers, verticalBounds, searchInputText]);
const indicatorStyle = useIndicatorStyle();
const currentTagsWithENSNames = useENSNames(currentTags);
return (
Search:
);
}
const unboundStyles = {
container: {
flex: 1,
backgroundColor: 'panelBackground',
},
contentContainer: {
paddingTop: 12,
paddingBottom: 24,
},
separator: {
backgroundColor: 'panelForegroundBorder',
height: Platform.OS === 'android' ? 1.5 : 1,
},
emptyText: {
color: 'panelForegroundSecondaryLabel',
flex: 1,
fontSize: 16,
lineHeight: 20,
textAlign: 'center',
paddingHorizontal: 12,
paddingVertical: 10,
marginHorizontal: 12,
},
tagInput: {
flex: 1,
marginLeft: 8,
paddingRight: 12,
},
tagInputLabel: {
color: 'panelForegroundTertiaryLabel',
fontSize: 16,
paddingLeft: 12,
},
tagInputContainer: {
alignItems: 'center',
backgroundColor: 'panelForeground',
borderBottomWidth: 1,
borderColor: 'panelForegroundBorder',
flexDirection: 'row',
paddingVertical: 6,
},
};
registerFetchKey(searchUsersActionTypes);
registerFetchKey(updateRelationshipsActionTypes);
const MemoizedRelationshipList: React.ComponentType =
React.memo(RelationshipList);
MemoizedRelationshipList.displayName = 'RelationshipList';
export default MemoizedRelationshipList;
diff --git a/native/push/push-handler.react.js b/native/push/push-handler.react.js
index 9497cfb88..2be5225f4 100644
--- a/native/push/push-handler.react.js
+++ b/native/push/push-handler.react.js
@@ -1,672 +1,673 @@
// @flow
import * as Haptics from 'expo-haptics';
import * as React from 'react';
-import { Platform, Alert, LogBox } from 'react-native';
+import { Platform, LogBox } from 'react-native';
import { Notification as InAppNotification } from 'react-native-in-app-message';
import { useDispatch } from 'react-redux';
import {
setDeviceTokenActionTypes,
setDeviceToken,
} from 'lib/actions/device-actions.js';
import { saveMessagesActionType } from 'lib/actions/message-actions.js';
import {
unreadCount,
threadInfoSelector,
} from 'lib/selectors/thread-selectors.js';
import { isLoggedIn } from 'lib/selectors/user-selectors.js';
import { mergePrefixIntoBody } from 'lib/shared/notif-utils.js';
import type { RawMessageInfo } from 'lib/types/message-types.js';
import type { Dispatch } from 'lib/types/redux-types.js';
import { type ConnectionInfo } from 'lib/types/socket-types.js';
import { type ThreadInfo } from 'lib/types/thread-types.js';
import {
useServerCall,
useDispatchActionPromise,
type DispatchActionPromise,
} from 'lib/utils/action-utils.js';
import {
convertNotificationMessageInfoToNewIDSchema,
convertNotificationThreadIDToNewIDSchema,
} from 'lib/utils/migration-utils.js';
import {
type NotifPermissionAlertInfo,
recordNotifPermissionAlertActionType,
shouldSkipPushPermissionAlert,
} from 'lib/utils/push-alerts.js';
import sleep from 'lib/utils/sleep.js';
import {
parseAndroidMessage,
androidNotificationChannelID,
handleAndroidMessage,
getCommAndroidNotificationsEventEmitter,
type AndroidMessage,
CommAndroidNotifications,
} from './android.js';
import {
CommIOSNotification,
type CoreIOSNotificationData,
type CoreIOSNotificationDataWithRequestIdentifier,
} from './comm-ios-notification.js';
import InAppNotif from './in-app-notif.react.js';
import {
requestIOSPushPermissions,
iosPushPermissionResponseReceived,
CommIOSNotifications,
getCommIOSNotificationsEventEmitter,
} from './ios.js';
import {
type MessageListParams,
useNavigateToThread,
} from '../chat/message-list-types.js';
import {
addLifecycleListener,
getCurrentLifecycleState,
} from '../lifecycle/lifecycle.js';
import { replaceWithThreadActionType } from '../navigation/action-types.js';
import { activeMessageListSelector } from '../navigation/nav-selectors.js';
import { NavContext } from '../navigation/navigation-context.js';
import type { RootNavigationProp } from '../navigation/root-navigator.react.js';
import { useSelector } from '../redux/redux-utils.js';
import { RootContext, type RootContextType } from '../root-context.js';
import type { EventSubscription } from '../types/react-native.js';
import { type GlobalTheme } from '../types/themes.js';
+import Alert from '../utils/alert.js';
LogBox.ignoreLogs([
// react-native-in-app-message
'ForceTouchGestureHandler is not available',
]);
type BaseProps = {
+navigation: RootNavigationProp<'App'>,
};
type Props = {
...BaseProps,
// Navigation state
+activeThread: ?string,
// Redux state
+unreadCount: number,
+deviceToken: ?string,
+threadInfos: { +[id: string]: ThreadInfo },
+notifPermissionAlertInfo: NotifPermissionAlertInfo,
+connection: ConnectionInfo,
+updatesCurrentAsOf: number,
+activeTheme: ?GlobalTheme,
+loggedIn: boolean,
+navigateToThread: (params: MessageListParams) => void,
// Redux dispatch functions
+dispatch: Dispatch,
+dispatchActionPromise: DispatchActionPromise,
// async functions that hit server APIs
+setDeviceToken: (deviceToken: ?string) => Promise,
// withRootContext
+rootContext: ?RootContextType,
};
type State = {
+inAppNotifProps: ?{
+customComponent: React.Node,
+blurType: ?('xlight' | 'dark'),
+onPress: () => void,
},
};
class PushHandler extends React.PureComponent {
state: State = {
inAppNotifProps: null,
};
currentState: ?string = getCurrentLifecycleState();
appStarted = 0;
androidNotificationsEventSubscriptions: Array = [];
androidNotificationsPermissionPromise: ?Promise = undefined;
initialAndroidNotifHandled = false;
openThreadOnceReceived: Set = new Set();
lifecycleSubscription: ?EventSubscription;
iosNotificationEventSubscriptions: Array = [];
componentDidMount() {
this.appStarted = Date.now();
this.lifecycleSubscription = addLifecycleListener(
this.handleAppStateChange,
);
this.onForeground();
if (Platform.OS === 'ios') {
const commIOSNotificationsEventEmitter =
getCommIOSNotificationsEventEmitter();
this.iosNotificationEventSubscriptions.push(
commIOSNotificationsEventEmitter.addListener(
CommIOSNotifications.getConstants()
.REMOTE_NOTIFICATIONS_REGISTERED_EVENT,
registration =>
this.registerPushPermissions(registration?.deviceToken),
),
commIOSNotificationsEventEmitter.addListener(
CommIOSNotifications.getConstants()
.REMOTE_NOTIFICATIONS_REGISTRATION_FAILED_EVENT,
this.failedToRegisterPushPermissionsIOS,
),
commIOSNotificationsEventEmitter.addListener(
CommIOSNotifications.getConstants()
.NOTIFICATION_RECEIVED_FOREGROUND_EVENT,
this.iosForegroundNotificationReceived,
),
commIOSNotificationsEventEmitter.addListener(
CommIOSNotifications.getConstants().NOTIFICATION_OPENED_EVENT,
this.iosNotificationOpened,
),
commIOSNotificationsEventEmitter.addListener(
CommIOSNotifications.getConstants()
.NOTIFICATION_RECEIVED_BACKGROUND_EVENT,
this.iosBackgroundNotificationReceived,
),
);
} else if (Platform.OS === 'android') {
CommAndroidNotifications.createChannel(
androidNotificationChannelID,
'Default',
CommAndroidNotifications.getConstants().NOTIFICATIONS_IMPORTANCE_HIGH,
'Comm notifications channel',
);
const commAndroidNotificationsEventEmitter =
getCommAndroidNotificationsEventEmitter();
this.androidNotificationsEventSubscriptions.push(
commAndroidNotificationsEventEmitter.addListener(
CommAndroidNotifications.getConstants()
.COMM_ANDROID_NOTIFICATIONS_TOKEN,
this.handleAndroidDeviceToken,
),
commAndroidNotificationsEventEmitter.addListener(
CommAndroidNotifications.getConstants()
.COMM_ANDROID_NOTIFICATIONS_MESSAGE,
this.androidMessageReceived,
),
commAndroidNotificationsEventEmitter.addListener(
CommAndroidNotifications.getConstants()
.COMM_ANDROID_NOTIFICATIONS_NOTIFICATION_OPENED,
this.androidNotificationOpened,
),
);
}
if (this.props.connection.status === 'connected') {
this.updateBadgeCount();
}
}
componentWillUnmount() {
if (this.lifecycleSubscription) {
this.lifecycleSubscription.remove();
}
if (Platform.OS === 'ios') {
for (const iosNotificationEventSubscription of this
.iosNotificationEventSubscriptions) {
iosNotificationEventSubscription.remove();
}
} else if (Platform.OS === 'android') {
for (const androidNotificationsEventSubscription of this
.androidNotificationsEventSubscriptions) {
androidNotificationsEventSubscription.remove();
}
this.androidNotificationsEventSubscriptions = [];
}
}
handleAppStateChange = (nextState: ?string) => {
if (!nextState || nextState === 'unknown') {
return;
}
const lastState = this.currentState;
this.currentState = nextState;
if (lastState === 'background' && nextState === 'active') {
this.onForeground();
this.clearNotifsOfThread();
}
};
onForeground() {
if (this.props.loggedIn) {
this.ensurePushNotifsEnabled();
} else if (this.props.deviceToken) {
// We do this in case there was a crash, so we can clear deviceToken from
// any other cookies it might be set for
this.setDeviceToken(this.props.deviceToken);
}
}
componentDidUpdate(prevProps: Props, prevState: State) {
if (this.props.activeThread !== prevProps.activeThread) {
this.clearNotifsOfThread();
}
if (
this.props.connection.status === 'connected' &&
(prevProps.connection.status !== 'connected' ||
this.props.unreadCount !== prevProps.unreadCount)
) {
this.updateBadgeCount();
}
for (const threadID of this.openThreadOnceReceived) {
const threadInfo = this.props.threadInfos[threadID];
if (threadInfo) {
this.navigateToThread(threadInfo, false);
this.openThreadOnceReceived.clear();
break;
}
}
if (
(this.props.loggedIn && !prevProps.loggedIn) ||
(!this.props.deviceToken && prevProps.deviceToken)
) {
this.ensurePushNotifsEnabled();
}
if (!this.props.loggedIn && prevProps.loggedIn) {
this.clearAllNotifs();
}
if (
this.state.inAppNotifProps &&
this.state.inAppNotifProps !== prevState.inAppNotifProps
) {
Haptics.notificationAsync();
InAppNotification.show();
}
}
updateBadgeCount() {
const curUnreadCount = this.props.unreadCount;
if (Platform.OS === 'ios') {
CommIOSNotifications.setBadgesCount(curUnreadCount);
} else if (Platform.OS === 'android') {
CommAndroidNotifications.setBadge(curUnreadCount);
}
}
clearAllNotifs() {
if (Platform.OS === 'ios') {
CommIOSNotifications.removeAllDeliveredNotifications();
} else if (Platform.OS === 'android') {
CommAndroidNotifications.removeAllDeliveredNotifications();
}
}
clearNotifsOfThread() {
const { activeThread } = this.props;
if (!activeThread) {
return;
}
if (Platform.OS === 'ios') {
CommIOSNotifications.getDeliveredNotifications(notifications =>
PushHandler.clearDeliveredIOSNotificationsForThread(
activeThread,
notifications,
),
);
} else if (Platform.OS === 'android') {
CommAndroidNotifications.removeAllActiveNotificationsForThread(
activeThread,
);
}
}
static clearDeliveredIOSNotificationsForThread(
threadID: string,
notifications: $ReadOnlyArray,
) {
const identifiersToClear = [];
for (const notification of notifications) {
if (notification.threadID === threadID) {
identifiersToClear.push(notification.identifier);
}
}
if (identifiersToClear) {
CommIOSNotifications.removeDeliveredNotifications(identifiersToClear);
}
}
async ensurePushNotifsEnabled() {
if (!this.props.loggedIn) {
return;
}
if (Platform.OS === 'ios') {
const missingDeviceToken =
this.props.deviceToken === null || this.props.deviceToken === undefined;
await requestIOSPushPermissions(missingDeviceToken);
} else if (Platform.OS === 'android') {
await this.ensureAndroidPushNotifsEnabled();
}
}
async ensureAndroidPushNotifsEnabled() {
const permissionPromisesResult = await Promise.all([
CommAndroidNotifications.hasPermission(),
CommAndroidNotifications.canRequestNotificationsPermissionFromUser(),
]);
let [hasPermission] = permissionPromisesResult;
const [, canRequestPermission] = permissionPromisesResult;
if (!hasPermission && canRequestPermission) {
const permissionResponse = await (async () => {
// We issue a call to sleep to match iOS behavior where prompt
// doesn't appear immediately but after logged-out modal disappears
await sleep(10);
await this.requestAndroidNotificationsPermission();
})();
hasPermission = permissionResponse;
}
if (!hasPermission) {
this.failedToRegisterPushPermissionsAndroid(!canRequestPermission);
return;
}
try {
const fcmToken = await CommAndroidNotifications.getToken();
await this.handleAndroidDeviceToken(fcmToken);
} catch (e) {
this.failedToRegisterPushPermissionsAndroid(!canRequestPermission);
}
}
requestAndroidNotificationsPermission = () => {
if (!this.androidNotificationsPermissionPromise) {
this.androidNotificationsPermissionPromise = (async () => {
const notifPermission =
await CommAndroidNotifications.requestNotificationsPermission();
this.androidNotificationsPermissionPromise = undefined;
return notifPermission;
})();
}
return this.androidNotificationsPermissionPromise;
};
handleAndroidDeviceToken = async (deviceToken: string) => {
this.registerPushPermissions(deviceToken);
await this.handleInitialAndroidNotification();
};
async handleInitialAndroidNotification() {
if (this.initialAndroidNotifHandled) {
return;
}
this.initialAndroidNotifHandled = true;
const initialNotifThreadID =
await CommAndroidNotifications.getInitialNotificationThreadID();
if (initialNotifThreadID) {
await this.androidNotificationOpened(initialNotifThreadID);
}
}
registerPushPermissions = (deviceToken: ?string) => {
const deviceType = Platform.OS;
if (deviceType !== 'android' && deviceType !== 'ios') {
return;
}
if (deviceType === 'ios') {
iosPushPermissionResponseReceived();
}
if (deviceToken !== this.props.deviceToken) {
this.setDeviceToken(deviceToken);
}
};
setDeviceToken(deviceToken: ?string) {
this.props.dispatchActionPromise(
setDeviceTokenActionTypes,
this.props.setDeviceToken(deviceToken),
);
}
failedToRegisterPushPermissionsIOS = () => {
this.setDeviceToken(null);
if (!this.props.loggedIn) {
return;
}
iosPushPermissionResponseReceived();
};
failedToRegisterPushPermissionsAndroid = (
shouldShowAlertOnAndroid: boolean,
) => {
this.setDeviceToken(null);
if (!this.props.loggedIn) {
return;
}
if (shouldShowAlertOnAndroid) {
this.showNotifAlertOnAndroid();
}
};
showNotifAlertOnAndroid() {
const alertInfo = this.props.notifPermissionAlertInfo;
if (shouldSkipPushPermissionAlert(alertInfo)) {
return;
}
this.props.dispatch({
type: recordNotifPermissionAlertActionType,
payload: { time: Date.now() },
});
Alert.alert(
'Unable to initialize notifs!',
'Please check your network connection, make sure Google Play ' +
'services are installed and enabled, and confirm that your Google ' +
'Play credentials are valid in the Google Play Store.',
undefined,
{ cancelable: true },
);
}
navigateToThread(threadInfo: ThreadInfo, clearChatRoutes: boolean) {
if (clearChatRoutes) {
this.props.navigation.dispatch({
type: replaceWithThreadActionType,
payload: { threadInfo },
});
} else {
this.props.navigateToThread({ threadInfo });
}
}
onPressNotificationForThread(threadID: string, clearChatRoutes: boolean) {
const threadInfo = this.props.threadInfos[threadID];
if (threadInfo) {
this.navigateToThread(threadInfo, clearChatRoutes);
} else {
this.openThreadOnceReceived.add(threadID);
}
}
saveMessageInfos(rawMessageInfos: ?$ReadOnlyArray) {
if (!rawMessageInfos) {
return;
}
const { updatesCurrentAsOf } = this.props;
this.props.dispatch({
type: saveMessagesActionType,
payload: { rawMessageInfos, updatesCurrentAsOf },
});
}
iosForegroundNotificationReceived = (
rawNotification: CoreIOSNotificationData,
) => {
const notification = new CommIOSNotification(rawNotification);
if (Date.now() < this.appStarted + 1500) {
// On iOS, when the app is opened from a notif press, for some reason this
// callback gets triggered before iosNotificationOpened. In fact this
// callback shouldn't be triggered at all. To avoid weirdness we are
// ignoring any foreground notification received within the first second
// of the app being started, since they are most likely to be erroneous.
notification.finish(
CommIOSNotifications.getConstants().FETCH_RESULT_NO_DATA,
);
return;
}
const threadID = notification.getData().threadID;
const messageInfos = notification.getData().messageInfos;
this.saveMessageInfos(messageInfos);
let title = notification.getData().title;
let body = notification.getData().body;
if (title && body) {
({ title, body } = mergePrefixIntoBody({ title, body }));
} else {
body = notification.getMessage();
}
if (body) {
this.showInAppNotification(threadID, body, title);
} else {
console.log(
'Non-rescind foreground notification without alert received!',
);
}
notification.finish(
CommIOSNotifications.getConstants().FETCH_RESULT_NEW_DATA,
);
};
iosBackgroundNotificationReceived = backgroundData => {
const convertedMessageInfos = convertNotificationMessageInfoToNewIDSchema(
backgroundData.messageInfos,
);
if (!convertedMessageInfos) {
return;
}
this.saveMessageInfos(convertedMessageInfos);
};
onPushNotifBootsApp() {
if (
this.props.rootContext &&
this.props.rootContext.detectUnsupervisedBackground
) {
this.props.rootContext.detectUnsupervisedBackground(false);
}
}
iosNotificationOpened = (rawNotification: CoreIOSNotificationData) => {
const notification = new CommIOSNotification(rawNotification);
this.onPushNotifBootsApp();
const threadID = notification.getData().threadID;
const messageInfos = notification.getData().messageInfos;
this.saveMessageInfos(messageInfos);
this.onPressNotificationForThread(threadID, true);
notification.finish(
CommIOSNotifications.getConstants().FETCH_RESULT_NEW_DATA,
);
};
showInAppNotification(threadID: string, message: string, title?: ?string) {
if (threadID === this.props.activeThread) {
return;
}
this.setState({
inAppNotifProps: {
customComponent: (
),
blurType: this.props.activeTheme === 'dark' ? 'xlight' : 'dark',
onPress: () => {
InAppNotification.hide();
this.onPressNotificationForThread(threadID, false);
},
},
});
}
androidNotificationOpened = async (threadID: string) => {
const convertedThreadID =
convertNotificationThreadIDToNewIDSchema(threadID);
this.onPushNotifBootsApp();
this.onPressNotificationForThread(convertedThreadID, true);
};
androidMessageReceived = async (message: AndroidMessage) => {
const parsedMessage = parseAndroidMessage(message);
this.onPushNotifBootsApp();
const { messageInfos } = parsedMessage;
this.saveMessageInfos(messageInfos);
handleAndroidMessage(
parsedMessage,
this.props.updatesCurrentAsOf,
this.handleAndroidNotificationIfActive,
);
};
handleAndroidNotificationIfActive = (
threadID: string,
texts: { body: string, title: ?string },
) => {
if (this.currentState !== 'active') {
return false;
}
this.showInAppNotification(threadID, texts.body, texts.title);
return true;
};
render() {
return (
);
}
}
const ConnectedPushHandler: React.ComponentType =
React.memo(function ConnectedPushHandler(props: BaseProps) {
const navContext = React.useContext(NavContext);
const activeThread = activeMessageListSelector(navContext);
const boundUnreadCount = useSelector(unreadCount);
const deviceToken = useSelector(state => state.deviceToken);
const threadInfos = useSelector(threadInfoSelector);
const notifPermissionAlertInfo = useSelector(
state => state.notifPermissionAlertInfo,
);
const connection = useSelector(state => state.connection);
const updatesCurrentAsOf = useSelector(state => state.updatesCurrentAsOf);
const activeTheme = useSelector(state => state.globalThemeInfo.activeTheme);
const loggedIn = useSelector(isLoggedIn);
const navigateToThread = useNavigateToThread();
const dispatch = useDispatch();
const dispatchActionPromise = useDispatchActionPromise();
const boundSetDeviceToken = useServerCall(setDeviceToken);
const rootContext = React.useContext(RootContext);
return (
);
});
export default ConnectedPushHandler;
diff --git a/native/roles/change-roles-header-left-button.react.js b/native/roles/change-roles-header-left-button.react.js
index 3f686af1a..b3617e47d 100644
--- a/native/roles/change-roles-header-left-button.react.js
+++ b/native/roles/change-roles-header-left-button.react.js
@@ -1,58 +1,59 @@
// @flow
import { HeaderBackButton as BaseHeaderBackButton } from '@react-navigation/elements';
import invariant from 'invariant';
import * as React from 'react';
-import { Alert, Text } from 'react-native';
+import { Text } from 'react-native';
import { TouchableOpacity } from 'react-native-gesture-handler';
import type { NavigationRoute } from '../navigation/route-names';
import { useColors } from '../themes/colors.js';
+import Alert from '../utils/alert.js';
type ChangeRolesHeaderLeftButtonProps = {
+route: NavigationRoute<'ChangeRolesScreen'>,
...React.ElementConfig,
};
function ChangeRolesHeaderLeftButton(
props: ChangeRolesHeaderLeftButtonProps,
): React.Node {
const { memberInfo, role: selectedRole } = props.route.params;
const { role: memberRole } = memberInfo;
const onCancel = React.useCallback(() => {
const { onPress } = props;
invariant(onPress, 'onPress must be defined');
if (selectedRole === memberRole) {
onPress();
return;
}
Alert.alert(
'Discard changes?',
'You have unsaved changes which will be discarded if you navigate away.',
[
{ text: 'Leave', onPress },
{ text: 'Stay', style: 'cancel' },
],
);
}, [memberRole, props, selectedRole]);
const { panelForegroundSecondaryLabel } = useColors();
const labelStyle = React.useMemo(
() => ({
color: panelForegroundSecondaryLabel,
marginLeft: 10,
}),
[panelForegroundSecondaryLabel],
);
return (
Cancel
);
}
export default ChangeRolesHeaderLeftButton;
diff --git a/native/roles/role-utils.react.js b/native/roles/role-utils.react.js
index f0294fcd5..4af5c54a8 100644
--- a/native/roles/role-utils.react.js
+++ b/native/roles/role-utils.react.js
@@ -1,64 +1,65 @@
// @flow
import * as React from 'react';
-import { Alert } from 'react-native';
import {
deleteCommunityRole,
deleteCommunityRoleActionTypes,
} from 'lib/actions/thread-actions.js';
import type { ThreadInfo } from 'lib/types/thread-types.js';
import {
useDispatchActionPromise,
useServerCall,
} from 'lib/utils/action-utils.js';
import { constructRoleDeletionMessagePrompt } from 'lib/utils/role-utils.js';
+import Alert from '../utils/alert.js';
+
function useDisplayDeleteRoleAlert(
threadInfo: ThreadInfo,
existingRoleID: string,
defaultRoleID: string,
memberCount: number,
): () => void {
const defaultRoleName = threadInfo.roles[defaultRoleID].name;
const callDeleteCommunityRole = useServerCall(deleteCommunityRole);
const dispatchActionPromise = useDispatchActionPromise();
const onDeleteRole = React.useCallback(() => {
dispatchActionPromise(
deleteCommunityRoleActionTypes,
callDeleteCommunityRole({
community: threadInfo.id,
roleID: existingRoleID,
}),
);
}, [
callDeleteCommunityRole,
dispatchActionPromise,
existingRoleID,
threadInfo.id,
]);
const message = constructRoleDeletionMessagePrompt(
defaultRoleName,
memberCount,
);
return React.useCallback(
() =>
Alert.alert('Delete role', message, [
{
text: 'Yes, delete role',
style: 'destructive',
onPress: onDeleteRole,
},
{
text: 'Cancel',
style: 'cancel',
},
]),
[message, onDeleteRole],
);
}
export { useDisplayDeleteRoleAlert };
diff --git a/native/socket.react.js b/native/socket.react.js
index 4314c1016..a78a5a602 100644
--- a/native/socket.react.js
+++ b/native/socket.react.js
@@ -1,163 +1,163 @@
// @flow
import * as React from 'react';
-import Alert from 'react-native/Libraries/Alert/Alert.js';
import { useDispatch } from 'react-redux';
import { logOut, logOutActionTypes } from 'lib/actions/user-actions.js';
import { preRequestUserStateSelector } from 'lib/selectors/account-selectors.js';
import { cookieSelector } from 'lib/selectors/keyserver-selectors.js';
import { isLoggedIn } from 'lib/selectors/user-selectors.js';
import { accountHasPassword } from 'lib/shared/account-utils.js';
import Socket, { type BaseSocketProps } from 'lib/socket/socket.react.js';
import { logInActionSources } from 'lib/types/account-types.js';
import {
useServerCall,
useDispatchActionPromise,
fetchNewCookieFromNativeCredentials,
} from 'lib/utils/action-utils.js';
import { InputStateContext } from './input/input-state.js';
import {
activeMessageListSelector,
nativeCalendarQuery,
} from './navigation/nav-selectors.js';
import { NavContext } from './navigation/navigation-context.js';
import { useSelector } from './redux/redux-utils.js';
import { noDataAfterPolicyAcknowledgmentSelector } from './selectors/account-selectors.js';
import {
openSocketSelector,
sessionIdentificationSelector,
nativeGetClientResponsesSelector,
nativeSessionStateFuncSelector,
} from './selectors/socket-selectors.js';
+import Alert from './utils/alert.js';
import { useInitialNotificationsEncryptedMessage } from './utils/crypto-utils.js';
const NativeSocket: React.ComponentType =
React.memo(function NativeSocket(props: BaseSocketProps) {
const inputState = React.useContext(InputStateContext);
const navContext = React.useContext(NavContext);
const cookie = useSelector(cookieSelector);
const urlPrefix = useSelector(state => state.urlPrefix);
const connection = useSelector(state => state.connection);
const frozen = useSelector(state => state.frozen);
const active = useSelector(
state => isLoggedIn(state) && state.lifecycleState !== 'background',
);
const noDataAfterPolicyAcknowledgment = useSelector(
noDataAfterPolicyAcknowledgmentSelector,
);
const currentUserInfo = useSelector(state => state.currentUserInfo);
const openSocket = useSelector(openSocketSelector);
const sessionIdentification = useSelector(sessionIdentificationSelector);
const preRequestUserState = useSelector(preRequestUserStateSelector);
const getInitialNotificationsEncryptedMessage =
useInitialNotificationsEncryptedMessage();
const getClientResponses = useSelector(state =>
nativeGetClientResponsesSelector({
redux: state,
navContext,
getInitialNotificationsEncryptedMessage,
}),
);
const sessionStateFunc = useSelector(state =>
nativeSessionStateFuncSelector({
redux: state,
navContext,
}),
);
const currentCalendarQuery = useSelector(state =>
nativeCalendarQuery({
redux: state,
navContext,
}),
);
const canSendReports = useSelector(
state =>
!state.frozen &&
state.connectivity.hasWiFi &&
(!inputState || !inputState.uploadInProgress()),
);
const activeThread = React.useMemo(() => {
if (!active) {
return null;
}
return activeMessageListSelector(navContext);
}, [active, navContext]);
const lastCommunicatedPlatformDetails = useSelector(
state => state.lastCommunicatedPlatformDetails[urlPrefix],
);
const dispatch = useDispatch();
const dispatchActionPromise = useDispatchActionPromise();
const callLogOut = useServerCall(logOut);
const socketCrashLoopRecovery = React.useCallback(async () => {
if (!accountHasPassword(currentUserInfo)) {
dispatchActionPromise(
logOutActionTypes,
callLogOut(preRequestUserState),
);
Alert.alert(
'Log in needed',
'After acknowledging the policies, we need you to log in to your account again',
[{ text: 'OK' }],
);
return;
}
await fetchNewCookieFromNativeCredentials(
dispatch,
cookie,
urlPrefix,
logInActionSources.refetchUserDataAfterAcknowledgment,
getInitialNotificationsEncryptedMessage,
);
}, [
callLogOut,
cookie,
currentUserInfo,
dispatch,
dispatchActionPromise,
preRequestUserState,
urlPrefix,
getInitialNotificationsEncryptedMessage,
]);
return (
);
});
export default NativeSocket;
diff --git a/native/types/message-types-validator.js b/native/types/message-types-validator.js
index be4c57873..5536628d3 100644
--- a/native/types/message-types-validator.js
+++ b/native/types/message-types-validator.js
@@ -1,29 +1,29 @@
// @flow
-import { Alert } from 'react-native';
import { messageSpecs } from 'lib/shared/messages/message-specs.js';
import { messageTypes } from 'lib/types/message-types-enum.js';
import { commConstants } from '../native-modules.js';
+import Alert from '../utils/alert.js';
if (__DEV__) {
const messageTypesCpp = new Set(commConstants.NATIVE_MESSAGE_TYPES);
const missingMessageTypesCpp = [];
for (const messageName in messageTypes) {
const messageType = messageTypes[messageName];
if (
messageSpecs[messageType]?.generatesNotifs &&
!messageTypesCpp.has(messageType)
) {
missingMessageTypesCpp.push(messageName);
}
}
if (missingMessageTypesCpp.length !== 0) {
Alert.alert(
'C++ MessageSpecs missing',
'C++ MessageSpec implementation missing for message types: ' +
missingMessageTypesCpp.join(', '),
);
}
}
diff --git a/native/utils/edit-messages-utils.js b/native/utils/edit-messages-utils.js
index 662405649..609ab09c3 100644
--- a/native/utils/edit-messages-utils.js
+++ b/native/utils/edit-messages-utils.js
@@ -1,30 +1,30 @@
// @flow
-import Alert from 'react-native/Libraries/Alert/Alert.js';
+import Alert from './alert.js';
type ExitAlertOptions = {
onDiscard: () => void,
onContinueEditing?: () => void,
};
function exitEditAlert(options: ExitAlertOptions): void {
const { onDiscard, onContinueEditing } = options;
Alert.alert(
'Discard changes?',
'You have unsaved changes which will be discarded if you navigate away.',
[
{
text: 'Continue editing',
style: 'cancel',
onPress: onContinueEditing,
},
{
text: 'Discard edit',
style: 'destructive',
onPress: onDiscard,
},
],
);
}
export { exitEditAlert };