Page MenuHomePhabricator
Differential D7445

[native] Added message editing
ClosedPublic
Actions

Authored by • kuba on Apr 14 2023, 1:19 AM.
Tags
None
Referenced Files
Unknown Object (File)
Mon, Mar 17, 2:45 PM
Unknown Object (File)
Mon, Mar 17, 2:45 PM
Unknown Object (File)
Mon, Mar 17, 2:44 PM
Unknown Object (File)
Mon, Mar 17, 2:36 PM
Unknown Object (File)
Wed, Mar 12, 3:34 PM
Unknown Object (File)
Thu, Feb 27, 1:10 PM
Unknown Object (File)
Tue, Feb 25, 6:24 PM
Unknown Object (File)
Tue, Feb 25, 4:50 AM
View All 99 Files
Subscribers
ashoat
atul
tomek

Details

Reviewers
michal
inka
ginsu
Commits
rCOMMfba08e783972: [native] Added message editing
Summary

After pressing send button in edit mode, the message will be edited with new content.

Test Plan

Tested on iOS, in edit mode:

  • modified the content, pressed the sent button (the message has been edited, exited edit mode, restored draft),
  • modified the content, pressed the sent button with disabled keyserver (an alert appeared, remained in edit mode):

Screenshot 2023-04-14 at 10.21.42.png (762×734 px, 174 KB)

  • left the content the same, pressed the sent button (exited edit mode without alert, restored the draft).

Diff Detail

Repository
rCOMM Comm
Lint
Lint Not Applicable
Unit
Tests Not Applicable

Revision Contents
Changeset List

PathSize
native/
chat/
45 lines

Diff 25669

View Options

native/chat/chat-input-bar.react.js

// @flow // @flow
import invariant from 'invariant'; import invariant from 'invariant';
import * as React from 'react'; import * as React from 'react';
import { Text } from 'react-native'; import { Text, View, Image, Linking } from 'react-native';
import RegistrationButtonContainer from './registration-button-container.react.js'; import RegistrationButtonContainer from './registration-button-container.react.js';
import RegistrationButton from './registration-button.react.js'; import RegistrationButton from './registration-button.react.js';
import RegistrationContainer from './registration-container.react.js'; import RegistrationContainer from './registration-container.react.js';
import RegistrationContentContainer from './registration-content-container.react.js'; import RegistrationContentContainer from './registration-content-container.react.js';
import { RegistrationContext } from './registration-context.js'; import { RegistrationContext } from './registration-context.js';
import type { RegistrationNavigationProp } from './registration-navigator.react.js'; import type { RegistrationNavigationProp } from './registration-navigator.react.js';
import type { import type {
CoolOrNerdMode, CoolOrNerdMode,
AccountSelection, AccountSelection,
AvatarData, AvatarData,
} from './registration-types.js'; } from './registration-types.js';
import commSwooshSource from '../../img/comm-swoosh.png';
import type { NavigationRoute } from '../../navigation/route-names.js'; import type { NavigationRoute } from '../../navigation/route-names.js';
import { useStyles } from '../../themes/colors.js'; import { useStyles } from '../../themes/colors.js';
export type RegistrationTermsParams = { export type RegistrationTermsParams = {
+userSelections: { +userSelections: {
+coolOrNerdMode: CoolOrNerdMode, +coolOrNerdMode: CoolOrNerdMode,
+keyserverUsername: string, +keyserverUsername: string,
+accountSelection: AccountSelection, +accountSelection: AccountSelection,
+avatarData: ?AvatarData, +avatarData: ?AvatarData,
}, },
}; };
const onTermsOfUsePressed = () => {
Linking.openURL('https://comm.app/terms');
};
const onPrivacyPolicyPressed = () => {
Linking.openURL('https://comm.app/privacy');
};
type Props = { type Props = {
+navigation: RegistrationNavigationProp<'RegistrationTerms'>, +navigation: RegistrationNavigationProp<'RegistrationTerms'>,
+route: NavigationRoute<'RegistrationTerms'>, +route: NavigationRoute<'RegistrationTerms'>,
}; };
function RegistrationTerms(props: Props): React.Node { function RegistrationTerms(props: Props): React.Node {
const registrationContext = React.useContext(RegistrationContext); const registrationContext = React.useContext(RegistrationContext);
invariant(registrationContext, 'registrationContext should be set'); invariant(registrationContext, 'registrationContext should be set');
const { register } = registrationContext; const { register } = registrationContext;
const [registrationInProgress, setRegistrationInProgress] = const [registrationInProgress, setRegistrationInProgress] =
React.useState(false); React.useState(false);
const { userSelections } = props.route.params; const { userSelections } = props.route.params;
const onProceed = React.useCallback(async () => { const onProceed = React.useCallback(async () => {
setRegistrationInProgress(true); setRegistrationInProgress(true);
try { try {
await register(userSelections); await register(userSelections);
} finally { } finally {
setRegistrationInProgress(false); setRegistrationInProgress(false);
} }
}, [register, userSelections]); }, [register, userSelections]);
const styles = useStyles(unboundStyles); const styles = useStyles(unboundStyles);
/* eslint-disable react-native/no-raw-text */
const termsNotice = (
<Text style={styles.body}>
By registering, you are agreeing to our{' '}
<Text style={styles.hyperlinkText} onPress={onTermsOfUsePressed}>
Terms of Use
</Text>
{' and '}
<Text style={styles.hyperlinkText} onPress={onPrivacyPolicyPressed}>
Privacy Policy
</Text>
.
</Text>
);
/* eslint-enable react-native/no-raw-text */
return ( return (
<RegistrationContainer> <RegistrationContainer>
<RegistrationContentContainer> <RegistrationContentContainer style={styles.scrollViewContentContainer}>
<Text style={styles.header}>Finish registration</Text> <Text style={styles.header}>Finish registration</Text>
{termsNotice}
<View style={styles.commSwooshContainer}>
<Image source={commSwooshSource} style={styles.commSwoosh} />
</View>
</RegistrationContentContainer> </RegistrationContentContainer>
<RegistrationButtonContainer> <RegistrationButtonContainer>
<RegistrationButton <RegistrationButton
onPress={onProceed} onPress={onProceed}
label="Register" label="Register"
variant={registrationInProgress ? 'loading' : 'enabled'} variant={registrationInProgress ? 'loading' : 'enabled'}
/> />
</RegistrationButtonContainer> </RegistrationButtonContainer>
</RegistrationContainer> </RegistrationContainer>
); );
} }
const unboundStyles = { const unboundStyles = {
scrollViewContentContainer: {
flexGrow: 1,
},
header: { header: {
fontSize: 24, fontSize: 24,
color: 'panelForegroundLabel', color: 'panelForegroundLabel',
paddingBottom: 16, paddingBottom: 16,
}, },
body: {
fontFamily: 'Arial',
fontSize: 15,
lineHeight: 20,
color: 'panelForegroundSecondaryLabel',
paddingBottom: 16,
},
commSwooshContainer: {
flexGrow: 1,
flexShrink: 1,
alignItems: 'center',
justifyContent: 'center',
},
commSwoosh: {
resizeMode: 'center',
width: '100%',
height: '100%',
},
hyperlinkText: {
color: 'purpleLink',
},
}; };
export default RegistrationTerms; export default RegistrationTerms;