Page MenuHomePhabricator
Differential D12892

[lib] DMOperationSpec for update relationship operation
AbandonedPublicDraft
Actions

Authored by tomek on Jul 26 2024, 5:17 AM.
Tags
None
Referenced Files
Unknown Object (File)
Mon, Mar 17, 1:38 AM
Unknown Object (File)
Thu, Feb 27, 8:50 AM
Unknown Object (File)
Feb 18 2025, 3:12 AM
Unknown Object (File)
Feb 18 2025, 3:12 AM
Unknown Object (File)
Feb 18 2025, 3:12 AM
Unknown Object (File)
Feb 4 2025, 4:26 AM
Unknown Object (File)
Jan 16 2025, 4:27 AM
Unknown Object (File)
Jan 15 2025, 9:43 AM
View All 50 Files
Subscribers
ashoat

Details

Reviewers
kamil
inka
Summary

Create the spec.

https://linear.app/comm/issue/ENG-8750/create-dmoperations-for-updaterelationshipmessageinfo

Depends on D12881

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
Branch
dmops
Lint
No Lint Coverage
Unit
No Test Coverage

Revision Contents
Changeset List

Diff 42824

View Options

lib/reducers/user-reducer.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/add-members-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/shared/dm-ops/change-relationship-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/shared/dm-ops/change-thread-settings-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/shared/dm-ops/create-sidebar-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/shared/dm-ops/create-thread-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/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/join-thread-spec.js

Loading...
View Options

lib/shared/dm-ops/leave-thread-spec.js

Loading...
View Options

lib/shared/dm-ops/process-dm-ops.js

Loading...
View Options

lib/shared/dm-ops/remove-members-spec.js

Loading...
View Options

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

Loading...
View Options

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

Loading...
View Options

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

Loading...
View Options

lib/types/dm-ops.js

Loading...