diff options
Diffstat (limited to 'src/view/com/algos/AlgoItem.tsx')
-rw-r--r-- | src/view/com/algos/AlgoItem.tsx | 153 |
1 files changed, 0 insertions, 153 deletions
diff --git a/src/view/com/algos/AlgoItem.tsx b/src/view/com/algos/AlgoItem.tsx deleted file mode 100644 index ea45005d3..000000000 --- a/src/view/com/algos/AlgoItem.tsx +++ /dev/null @@ -1,153 +0,0 @@ -import React from 'react' -import { - StyleProp, - StyleSheet, - View, - ViewStyle, - TouchableOpacity, -} from 'react-native' -import {Text} from '../util/text/Text' -import {usePalette} from 'lib/hooks/usePalette' -import {colors, s} from 'lib/styles' -import {UserAvatar} from '../util/UserAvatar' -import {Button} from '../util/forms/Button' -import {observer} from 'mobx-react-lite' -import {CustomFeedModel} from 'state/models/feeds/custom-feed' -import {useFocusEffect, useNavigation} from '@react-navigation/native' -import {NavigationProp} from 'lib/routes/types' -import {useStores} from 'state/index' -import {HeartIconSolid} from 'lib/icons' -import {pluralize} from 'lib/strings/helpers' -import {AtUri} from '@atproto/api' -import {isWeb} from 'platform/detection' - -const AlgoItem = observer( - ({ - item, - style, - showBottom = true, - reloadOnFocus = false, - }: { - item: CustomFeedModel - style?: StyleProp<ViewStyle> - showBottom?: boolean - reloadOnFocus?: boolean - }) => { - const store = useStores() - const pal = usePalette('default') - const navigation = useNavigation<NavigationProp>() - - // TODO: this is pretty hacky, but it works for now - // causes issues on web - useFocusEffect(() => { - if (reloadOnFocus && !isWeb) { - item.reload() - } - }) - - return ( - <TouchableOpacity - accessibilityRole="button" - style={[styles.container, style]} - onPress={() => { - navigation.navigate('CustomFeed', { - name: item.data.creator.did, - rkey: new AtUri(item.data.uri).rkey, - displayName: - item.data.displayName ?? - `${item.data.creator.displayName}'s feed`, - }) - }} - key={item.data.uri}> - <View style={[styles.headerContainer]}> - <View style={[s.mr10]}> - <UserAvatar type="algo" size={36} avatar={item.data.avatar} /> - </View> - <View style={[styles.headerTextContainer]}> - <Text style={[pal.text, s.bold]}> - {item.data.displayName ?? 'Feed name'} - </Text> - <Text style={[pal.textLight, styles.description]} numberOfLines={5}> - {item.data.description ?? - "Explore our Feed for the latest updates and insights! Dive into a world of intriguing articles, trending news, and exciting stories that cover a wide range of topics. From technology breakthroughs to lifestyle tips, there's something here for everyone. Stay informed and get inspired with us. Join the conversation now!"} - </Text> - </View> - </View> - - {showBottom ? ( - <View style={styles.bottomContainer}> - <View style={styles.likedByContainer}> - {/* <View style={styles.likedByAvatars}> - <UserAvatar size={24} avatar={item.data.avatar} /> - <UserAvatar size={24} avatar={item.data.avatar} /> - <UserAvatar size={24} avatar={item.data.avatar} /> - </View> */} - - <HeartIconSolid size={16} style={[s.mr2, {color: colors.red3}]} /> - <Text style={[pal.text, pal.textLight]}> - {item.data.likeCount && item.data.likeCount > 0 - ? `Liked by ${item.data.likeCount} ${pluralize( - item.data.likeCount, - 'other', - )}` - : 'Be the first to like this'} - </Text> - </View> - <View> - <Button - type={item.isSaved ? 'default' : 'inverted'} - onPress={() => { - if (item.data.viewer?.saved) { - store.me.savedFeeds.unsave(item) - } else { - store.me.savedFeeds.save(item) - } - }} - label={item.data.viewer?.saved ? 'Unsave' : 'Save'} - /> - </View> - </View> - ) : null} - </TouchableOpacity> - ) - }, -) -export default AlgoItem - -const styles = StyleSheet.create({ - container: { - paddingHorizontal: 18, - paddingVertical: 20, - flexDirection: 'column', - flex: 1, - borderTopWidth: 1, - borderTopColor: '#E5E5E5', - gap: 18, - }, - headerContainer: { - flexDirection: 'row', - }, - headerTextContainer: { - flexDirection: 'column', - columnGap: 4, - flex: 1, - }, - description: { - flex: 1, - flexWrap: 'wrap', - }, - bottomContainer: { - flexDirection: 'row', - justifyContent: 'space-between', - alignItems: 'center', - }, - likedByContainer: { - flexDirection: 'row', - alignItems: 'center', - gap: 2, - }, - likedByAvatars: { - flexDirection: 'row', - gap: -12, - }, -}) |