Page MenuHomePhabricator
Differential D11618

[native][web] Read thread activity entries from SQLite on app start
ClosedPublic
Actions

Authored by will on Apr 9 2024, 11:13 PM.
Tags
None
Referenced Files
Unknown Object (File)
Sat, Mar 15, 5:34 AM
Unknown Object (File)
Thu, Feb 27, 10:43 PM
Unknown Object (File)
Tue, Feb 25, 7:17 AM
Unknown Object (File)
Sat, Feb 22, 9:25 PM
Unknown Object (File)
Feb 16 2025, 3:58 AM
Unknown Object (File)
Feb 16 2025, 3:58 AM
Unknown Object (File)
Feb 16 2025, 3:58 AM
Unknown Object (File)
Feb 16 2025, 3:58 AM
View All Files
Subscribers
ashoat
tomek

Details

Reviewers
kamil
atul
Commits
rCOMMa11214af00e9: [native][web] Read thread activity entries from SQLite on app start
Summary

This reads thread activity entries from SQLite on app start

Depends on D11665

Test Plan

flow check.

Tested on native. On clicking through threads, verified sqlite database was updated with lastNavigatedTo values. On relaunching the app, values properly persisted. No assertion failures between redux persist and sqlite.

Tested on web. Downloaded sqlite web database and verified properly being updated on clicking through threads. Assertion not checked for web.

Diff Detail

Repository
rCOMM Comm
Lint
Lint Not Applicable
Unit
Tests Not Applicable

Event Timeline

will created this revision.Apr 9 2024, 11:13 PM
Herald added subscribers: tomek, ashoat. · View Herald TranscriptApr 9 2024, 11:13 PM
will edited the summary of this revision. (Show Details)Apr 9 2024, 11:14 PM
will added a parent revision: D11617: [native][web] Start processing thread activity store with sqlite operations.
Harbormaster completed remote builds in B28121: Diff 38977.Apr 9 2024, 11:29 PM
will requested review of this revision.Apr 9 2024, 11:29 PM
atul accepted this revision.Apr 11 2024, 6:18 PM
This revision is now accepted and ready to land.Apr 11 2024, 6:18 PM
will updated this revision to Diff 39122.Apr 15 2024, 6:32 AM

entrie to entries

Harbormaster completed remote builds in B28223: Diff 39122.Apr 15 2024, 6:48 AM
will edited the summary of this revision. (Show Details)Apr 15 2024, 2:30 PM
will added a parent revision: D11665: [web] convert updating thread activity `lastThreadNavigatedTo` on web to use sqlite.
will removed a parent revision: D11617: [native][web] Start processing thread activity store with sqlite operations.
will updated this revision to Diff 39167.Apr 16 2024, 8:59 PM

rebase

Harbormaster completed remote builds in B28256: Diff 39167.Apr 16 2024, 9:15 PM
will updated this revision to Diff 39174.Apr 16 2024, 10:19 PM

rebase

Harbormaster completed remote builds in B28259: Diff 39174.Apr 16 2024, 10:35 PM
will updated this revision to Diff 39300.Apr 19 2024, 11:27 AM

Do not assert equality of threadActivity on web

will planned changes to this revision.Apr 19 2024, 11:29 AM
will updated this revision to Diff 39301.Apr 19 2024, 11:35 AM

style. rebase before landing

This revision is now accepted and ready to land.Apr 19 2024, 11:35 AM
will edited the test plan for this revision. (Show Details)Apr 19 2024, 11:39 AM
will updated this revision to Diff 39306.Apr 19 2024, 11:42 AM
will edited the test plan for this revision. (Show Details)

rebase before landing

Harbormaster completed remote builds in B28336: Diff 39300.Apr 19 2024, 11:43 AM
Harbormaster completed remote builds in B28337: Diff 39301.Apr 19 2024, 11:51 AM
Harbormaster completed remote builds in B28340: Diff 39306.Apr 19 2024, 12:07 PM
Closed by commit rCOMMa11214af00e9: [native][web] Read thread activity entries from SQLite on app start (authored by will). · Explain WhyApr 19 2024, 1:09 PM
This revision was automatically updated to reflect the committed changes.
will added a commit: rCOMMa11214af00e9: [native][web] Read thread activity entries from SQLite on app start.

Revision Contents
Changeset List

PathSize
lib/
reducers/
1 line
45 lines
types/
2 lines
native/
data/
8 lines
web/
shared-worker/
utils/
12 lines

Diff 39325

View Options

lib/reducers/message-reducer.test.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/reducers/thread-activity-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/types/store-ops-types.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

native/data/sqlite-data-handler.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

web/shared-worker/utils/store.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;