Page MenuHomePhabricator
Differential D12807

[lib] DMOperationSpec for edit operation
ClosedPublic
Actions

Authored by tomek on Jul 19 2024, 12:59 PM.
Tags
None
Referenced Files
Unknown Object (File)
Wed, Mar 12, 8:16 AM
Unknown Object (File)
Tue, Mar 11, 2:57 PM
Unknown Object (File)
Tue, Mar 4, 9:10 PM
Unknown Object (File)
Tue, Mar 4, 5:39 PM
Unknown Object (File)
Sun, Mar 2, 10:05 AM
Unknown Object (File)
Tue, Feb 25, 2:40 PM
Unknown Object (File)
Feb 18 2025, 4:11 AM
Unknown Object (File)
Feb 18 2025, 4:11 AM
View All Files
Subscribers
ashoat

Details

Reviewers
kamil
inka
Commits
rCOMMf95e8973dae8: [lib] DMOperationSpec for edit operation
Summary

Create the spec.

https://linear.app/comm/issue/ENG-8733/create-dmoperations-for-message-edits

Depends on D12806

Test Plan

Just the Flow. Further testing will be performed after it is connected with the rest of the app.

Diff Detail

Repository
rCOMM Comm
Lint
Lint Not Applicable
Unit
Tests Not Applicable

Event Timeline

tomek created this revision.Jul 19 2024, 12:59 PM
Herald added a subscriber: ashoat. · View Herald TranscriptJul 19 2024, 12:59 PM
Harbormaster completed remote builds in B30517: Diff 42552.Jul 19 2024, 1:16 PM
tomek requested review of this revision.Jul 19 2024, 1:16 PM
tomek updated this revision to Diff 42554.Jul 19 2024, 1:21 PM

Fix the types

tomek updated this revision to Diff 42556.Jul 19 2024, 1:34 PM

Rename a file

Harbormaster completed remote builds in B30519: Diff 42554.Jul 19 2024, 1:39 PM
Harbormaster completed remote builds in B30521: Diff 42556.Jul 19 2024, 1:50 PM
tomek added a child revision: D12835: [lib] DMOperationSpec for add members operation.Jul 22 2024, 6:49 AM
tomek updated this revision to Diff 42700.Jul 23 2024, 7:30 AM

Add to specs

Harbormaster completed remote builds in B30613: Diff 42700.Jul 23 2024, 7:46 AM
inka accepted this revision.Jul 25 2024, 1:04 AM
This revision is now accepted and ready to land.Jul 25 2024, 1:04 AM
tomek updated this revision to Diff 42815.Jul 26 2024, 3:48 AM

Rename

Harbormaster completed remote builds in B30699: Diff 42815.Jul 26 2024, 4:26 AM
tomek updated this revision to Diff 42818.Jul 26 2024, 4:29 AM

Rename

Harbormaster completed remote builds in B30701: Diff 42818.Jul 26 2024, 4:44 AM
Closed by commit rCOMMf95e8973dae8: [lib] DMOperationSpec for edit operation (authored by tomek). · Explain WhyJul 26 2024, 5:22 AM
This revision was automatically updated to reflect the committed changes.
tomek added a commit: rCOMMf95e8973dae8: [lib] DMOperationSpec for edit operation.

Revision Contents
Changeset List

PathSize
lib/
shared/
dm-ops/
2 lines
46 lines
types/
25 lines

Diff 42826

View Options

lib/shared/dm-ops/dm-op-specs.js

// @flow // @flow
import { useActionSheet } from '@expo/react-native-action-sheet';
import invariant from 'invariant';
import * as React from 'react'; import * as React from 'react';
import { View, Text } from 'react-native'; import { View, Text, TouchableOpacity, Platform } from 'react-native';
import { useSafeAreaInsets } from 'react-native-safe-area-context';
import { NeynarClientContext } from 'lib/components/neynar-client-provider.react.js';
import { useCurrentUserFID } from 'lib/utils/farcaster-utils.js';
import type { TagFarcasterChannelNavigationProp } from './tag-farcaster-channel-navigator.react'; import type { TagFarcasterChannelNavigationProp } from './tag-farcaster-channel-navigator.react';
import type { NavigationRoute } from '../../navigation/route-names'; 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, useColors } from '../../themes/colors.js';
type Props = { type Props = {
+navigation: TagFarcasterChannelNavigationProp<'TagFarcasterChannel'>, +navigation: TagFarcasterChannelNavigationProp<'TagFarcasterChannel'>,
+route: NavigationRoute<'TagFarcasterChannel'>, +route: NavigationRoute<'TagFarcasterChannel'>,
}; };
// eslint-disable-next-line no-unused-vars // eslint-disable-next-line no-unused-vars
function TagFarcasterChannel(props: Props): React.Node { function TagFarcasterChannel(props: Props): React.Node {
const styles = useStyles(unboundStyles);
const colors = useColors();
const fid = useCurrentUserFID();
invariant(fid, 'FID should be set');
const [selectedChannel, setSelectedChannel] = React.useState<?string>(null);
const [channelOptions, setChannelOptions] = React.useState<
$ReadOnlyArray<string>,
>([]);
const neynarClientContext = React.useContext(NeynarClientContext);
invariant(neynarClientContext, 'NeynarClientContext is missing');
const { client } = neynarClientContext;
React.useEffect(() => {
void (async () => {
const data = await client.fetchFollowedFarcasterChannels(fid);
const result = data.map(channel => channel.name);
setChannelOptions(result);
})();
}, [client, fid]);
const activeTheme = useSelector(state => state.globalThemeInfo.activeTheme);
const { showActionSheetWithOptions } = useActionSheet();
const insets = useSafeAreaInsets();
const onOptionSelected = React.useCallback(
(selectedIndex: ?number) => {
if (
selectedIndex === undefined ||
selectedIndex === null ||
selectedIndex === channelOptions.length
) {
return;
}
setSelectedChannel(channelOptions[selectedIndex]);
},
[channelOptions],
);
const onPressSelectChannel = React.useCallback(() => {
const options =
Platform.OS === 'ios' ? [...channelOptions, 'Cancel'] : channelOptions;
const cancelButtonIndex = Platform.OS === 'ios' ? options.length - 1 : -1;
const containerStyle = {
paddingBottom: insets.bottom,
};
showActionSheetWithOptions(
{
options,
cancelButtonIndex,
containerStyle,
userInterfaceStyle: activeTheme ?? 'dark',
},
onOptionSelected,
);
}, [
activeTheme,
channelOptions,
insets.bottom,
onOptionSelected,
showActionSheetWithOptions,
]);
const channelSelectionStyles = React.useMemo(
() => [styles.sectionContainer, styles.touchableSectionContainer],
[styles.sectionContainer, styles.touchableSectionContainer],
);
const channelSelectionTextContent = selectedChannel
? selectedChannel
: 'No Farcaster channel tagged';
const tagFarcasterChannel = React.useMemo( const tagFarcasterChannel = React.useMemo(
() => ( () => (
<View> <View>
<Text>TagFarcasterChannel</Text> <View style={styles.sectionContainer}>
<Text style={styles.sectionText}>
Tag a Farcaster channel so followers can find your Comm community!
</Text>
</View>
<Text style={styles.sectionHeaderText}>FARCASTER CHANNEL</Text>
<TouchableOpacity
style={channelSelectionStyles}
onPress={onPressSelectChannel}
>
<Text style={styles.sectionText}>{channelSelectionTextContent}</Text>
<SWMansionIcon
name="edit-1"
size={20}
color={colors.panelForegroundSecondaryLabel}
/>
</TouchableOpacity>
</View> </View>
), ),
[], [
styles.sectionContainer,
styles.sectionText,
styles.sectionHeaderText,
channelSelectionStyles,
onPressSelectChannel,
channelSelectionTextContent,
colors.panelForegroundSecondaryLabel,
],
); );
return tagFarcasterChannel; return tagFarcasterChannel;
} }
const unboundStyles = {
sectionContainer: {
backgroundColor: 'panelForeground',
marginBottom: 24,
padding: 16,
},
sectionText: {
color: 'panelForegroundLabel',
fontSize: 14,
},
sectionHeaderText: {
fontSize: 14,
fontWeight: '400',
lineHeight: 20,
color: 'panelForegroundLabel',
paddingHorizontal: 16,
paddingBottom: 4,
},
touchableSectionContainer: {
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
},
};
export default TagFarcasterChannel; export default TagFarcasterChannel;
View Options

lib/shared/dm-ops/send-edit-message-spec.js

// @flow // @flow
import { useActionSheet } from '@expo/react-native-action-sheet';
import invariant from 'invariant';
import * as React from 'react'; import * as React from 'react';
import { View, Text } from 'react-native'; import { View, Text, TouchableOpacity, Platform } from 'react-native';
import { useSafeAreaInsets } from 'react-native-safe-area-context';
import { NeynarClientContext } from 'lib/components/neynar-client-provider.react.js';
import { useCurrentUserFID } from 'lib/utils/farcaster-utils.js';
import type { TagFarcasterChannelNavigationProp } from './tag-farcaster-channel-navigator.react'; import type { TagFarcasterChannelNavigationProp } from './tag-farcaster-channel-navigator.react';
import type { NavigationRoute } from '../../navigation/route-names'; 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, useColors } from '../../themes/colors.js';
type Props = { type Props = {
+navigation: TagFarcasterChannelNavigationProp<'TagFarcasterChannel'>, +navigation: TagFarcasterChannelNavigationProp<'TagFarcasterChannel'>,
+route: NavigationRoute<'TagFarcasterChannel'>, +route: NavigationRoute<'TagFarcasterChannel'>,
}; };
// eslint-disable-next-line no-unused-vars // eslint-disable-next-line no-unused-vars
function TagFarcasterChannel(props: Props): React.Node { function TagFarcasterChannel(props: Props): React.Node {
const styles = useStyles(unboundStyles);
const colors = useColors();
const fid = useCurrentUserFID();
invariant(fid, 'FID should be set');
const [selectedChannel, setSelectedChannel] = React.useState<?string>(null);
const [channelOptions, setChannelOptions] = React.useState<
$ReadOnlyArray<string>,
>([]);
const neynarClientContext = React.useContext(NeynarClientContext);
invariant(neynarClientContext, 'NeynarClientContext is missing');
const { client } = neynarClientContext;
React.useEffect(() => {
void (async () => {
const data = await client.fetchFollowedFarcasterChannels(fid);
const result = data.map(channel => channel.name);
setChannelOptions(result);
})();
}, [client, fid]);
const activeTheme = useSelector(state => state.globalThemeInfo.activeTheme);
const { showActionSheetWithOptions } = useActionSheet();
const insets = useSafeAreaInsets();
const onOptionSelected = React.useCallback(
(selectedIndex: ?number) => {
if (
selectedIndex === undefined ||
selectedIndex === null ||
selectedIndex === channelOptions.length
) {
return;
}
setSelectedChannel(channelOptions[selectedIndex]);
},
[channelOptions],
);
const onPressSelectChannel = React.useCallback(() => {
const options =
Platform.OS === 'ios' ? [...channelOptions, 'Cancel'] : channelOptions;
const cancelButtonIndex = Platform.OS === 'ios' ? options.length - 1 : -1;
const containerStyle = {
paddingBottom: insets.bottom,
};
showActionSheetWithOptions(
{
options,
cancelButtonIndex,
containerStyle,
userInterfaceStyle: activeTheme ?? 'dark',
},
onOptionSelected,
);
}, [
activeTheme,
channelOptions,
insets.bottom,
onOptionSelected,
showActionSheetWithOptions,
]);
const channelSelectionStyles = React.useMemo(
() => [styles.sectionContainer, styles.touchableSectionContainer],
[styles.sectionContainer, styles.touchableSectionContainer],
);
const channelSelectionTextContent = selectedChannel
? selectedChannel
: 'No Farcaster channel tagged';
const tagFarcasterChannel = React.useMemo( const tagFarcasterChannel = React.useMemo(
() => ( () => (
<View> <View>
<Text>TagFarcasterChannel</Text> <View style={styles.sectionContainer}>
<Text style={styles.sectionText}>
Tag a Farcaster channel so followers can find your Comm community!
</Text>
</View>
<Text style={styles.sectionHeaderText}>FARCASTER CHANNEL</Text>
<TouchableOpacity
style={channelSelectionStyles}
onPress={onPressSelectChannel}
>
<Text style={styles.sectionText}>{channelSelectionTextContent}</Text>
<SWMansionIcon
name="edit-1"
size={20}
color={colors.panelForegroundSecondaryLabel}
/>
</TouchableOpacity>
</View> </View>
), ),
[], [
styles.sectionContainer,
styles.sectionText,
styles.sectionHeaderText,
channelSelectionStyles,
onPressSelectChannel,
channelSelectionTextContent,
colors.panelForegroundSecondaryLabel,
],
); );
return tagFarcasterChannel; return tagFarcasterChannel;
} }
const unboundStyles = {
sectionContainer: {
backgroundColor: 'panelForeground',
marginBottom: 24,
padding: 16,
},
sectionText: {
color: 'panelForegroundLabel',
fontSize: 14,
},
sectionHeaderText: {
fontSize: 14,
fontWeight: '400',
lineHeight: 20,
color: 'panelForegroundLabel',
paddingHorizontal: 16,
paddingBottom: 4,
},
touchableSectionContainer: {
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
},
};
export default TagFarcasterChannel; export default TagFarcasterChannel;
View Options

lib/types/dm-ops.js

// @flow // @flow
import { useActionSheet } from '@expo/react-native-action-sheet';
import invariant from 'invariant';
import * as React from 'react'; import * as React from 'react';
import { View, Text } from 'react-native'; import { View, Text, TouchableOpacity, Platform } from 'react-native';
import { useSafeAreaInsets } from 'react-native-safe-area-context';
import { NeynarClientContext } from 'lib/components/neynar-client-provider.react.js';
import { useCurrentUserFID } from 'lib/utils/farcaster-utils.js';
import type { TagFarcasterChannelNavigationProp } from './tag-farcaster-channel-navigator.react'; import type { TagFarcasterChannelNavigationProp } from './tag-farcaster-channel-navigator.react';
import type { NavigationRoute } from '../../navigation/route-names'; 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, useColors } from '../../themes/colors.js';
type Props = { type Props = {
+navigation: TagFarcasterChannelNavigationProp<'TagFarcasterChannel'>, +navigation: TagFarcasterChannelNavigationProp<'TagFarcasterChannel'>,
+route: NavigationRoute<'TagFarcasterChannel'>, +route: NavigationRoute<'TagFarcasterChannel'>,
}; };
// eslint-disable-next-line no-unused-vars // eslint-disable-next-line no-unused-vars
function TagFarcasterChannel(props: Props): React.Node { function TagFarcasterChannel(props: Props): React.Node {
const styles = useStyles(unboundStyles);
const colors = useColors();
const fid = useCurrentUserFID();
invariant(fid, 'FID should be set');
const [selectedChannel, setSelectedChannel] = React.useState<?string>(null);
const [channelOptions, setChannelOptions] = React.useState<
$ReadOnlyArray<string>,
>([]);
const neynarClientContext = React.useContext(NeynarClientContext);
invariant(neynarClientContext, 'NeynarClientContext is missing');
const { client } = neynarClientContext;
React.useEffect(() => {
void (async () => {
const data = await client.fetchFollowedFarcasterChannels(fid);
const result = data.map(channel => channel.name);
setChannelOptions(result);
})();
}, [client, fid]);
const activeTheme = useSelector(state => state.globalThemeInfo.activeTheme);
const { showActionSheetWithOptions } = useActionSheet();
const insets = useSafeAreaInsets();
const onOptionSelected = React.useCallback(
(selectedIndex: ?number) => {
if (
selectedIndex === undefined ||
selectedIndex === null ||
selectedIndex === channelOptions.length
) {
return;
}
setSelectedChannel(channelOptions[selectedIndex]);
},
[channelOptions],
);
const onPressSelectChannel = React.useCallback(() => {
const options =
Platform.OS === 'ios' ? [...channelOptions, 'Cancel'] : channelOptions;
const cancelButtonIndex = Platform.OS === 'ios' ? options.length - 1 : -1;
const containerStyle = {
paddingBottom: insets.bottom,
};
showActionSheetWithOptions(
{
options,
cancelButtonIndex,
containerStyle,
userInterfaceStyle: activeTheme ?? 'dark',
},
onOptionSelected,
);
}, [
activeTheme,
channelOptions,
insets.bottom,
onOptionSelected,
showActionSheetWithOptions,
]);
const channelSelectionStyles = React.useMemo(
() => [styles.sectionContainer, styles.touchableSectionContainer],
[styles.sectionContainer, styles.touchableSectionContainer],
);
const channelSelectionTextContent = selectedChannel
? selectedChannel
: 'No Farcaster channel tagged';
const tagFarcasterChannel = React.useMemo( const tagFarcasterChannel = React.useMemo(
() => ( () => (
<View> <View>
<Text>TagFarcasterChannel</Text> <View style={styles.sectionContainer}>
<Text style={styles.sectionText}>
Tag a Farcaster channel so followers can find your Comm community!
</Text>
</View>
<Text style={styles.sectionHeaderText}>FARCASTER CHANNEL</Text>
<TouchableOpacity
style={channelSelectionStyles}
onPress={onPressSelectChannel}
>
<Text style={styles.sectionText}>{channelSelectionTextContent}</Text>
<SWMansionIcon
name="edit-1"
size={20}
color={colors.panelForegroundSecondaryLabel}
/>
</TouchableOpacity>
</View> </View>
), ),
[], [
styles.sectionContainer,
styles.sectionText,
styles.sectionHeaderText,
channelSelectionStyles,
onPressSelectChannel,
channelSelectionTextContent,
colors.panelForegroundSecondaryLabel,
],
); );
return tagFarcasterChannel; return tagFarcasterChannel;
} }
const unboundStyles = {
sectionContainer: {
backgroundColor: 'panelForeground',
marginBottom: 24,
padding: 16,
},
sectionText: {
color: 'panelForegroundLabel',
fontSize: 14,
},
sectionHeaderText: {
fontSize: 14,
fontWeight: '400',
lineHeight: 20,
color: 'panelForegroundLabel',
paddingHorizontal: 16,
paddingBottom: 4,
},
touchableSectionContainer: {
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
},
};
export default TagFarcasterChannel; export default TagFarcasterChannel;