diff options
Diffstat (limited to 'src/view/com/feeds/CustomFeed.tsx')
-rw-r--r-- | src/view/com/feeds/CustomFeed.tsx | 77 |
1 files changed, 48 insertions, 29 deletions
diff --git a/src/view/com/feeds/CustomFeed.tsx b/src/view/com/feeds/CustomFeed.tsx index 5440a8e8f..5201ca848 100644 --- a/src/view/com/feeds/CustomFeed.tsx +++ b/src/view/com/feeds/CustomFeed.tsx @@ -1,16 +1,17 @@ import React from 'react' import { + Pressable, StyleProp, StyleSheet, View, ViewStyle, TouchableOpacity, } from 'react-native' +import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' import {Text} from '../util/text/Text' import {usePalette} from 'lib/hooks/usePalette' import {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 {useNavigation} from '@react-navigation/native' @@ -18,6 +19,7 @@ import {NavigationProp} from 'lib/routes/types' import {useStores} from 'state/index' import {pluralize} from 'lib/strings/helpers' import {AtUri} from '@atproto/api' +import * as Toast from 'view/com/util/Toast' export const CustomFeed = observer( ({ @@ -37,6 +39,23 @@ export const CustomFeed = observer( const pal = usePalette('default') const navigation = useNavigation<NavigationProp>() + const onToggleSaved = React.useCallback(() => { + if (item.data.viewer?.saved) { + store.shell.openModal({ + name: 'confirm', + title: 'Remove from my feeds', + message: `Remove ${item.displayName} from my feeds?`, + onPressConfirm: () => { + store.me.savedFeeds.unsave(item) + Toast.show('Removed from my feeds') + }, + }) + } else { + store.me.savedFeeds.save(item) + Toast.show('Added to my feeds') + } + }, [store, item]) + return ( <TouchableOpacity accessibilityRole="button" @@ -62,17 +81,28 @@ export const CustomFeed = observer( </View> {showSaveBtn && ( <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'} - /> + <Pressable + accessibilityRole="button" + accessibilityLabel={ + item.isSaved ? 'Remove from my feeds' : 'Add to my feeds' + } + accessibilityHint="" + onPress={onToggleSaved} + style={styles.btn}> + {item.isSaved ? ( + <FontAwesomeIcon + icon={['far', 'trash-can']} + size={19} + color={pal.colors.icon} + /> + ) : ( + <FontAwesomeIcon + icon="plus" + size={18} + color={pal.colors.link} + /> + )} + </Pressable> </View> )} </View> @@ -84,14 +114,10 @@ export const CustomFeed = observer( ) : null} {showLikes ? ( - <View style={styles.bottomContainer}> - <View style={styles.likedByContainer}> - <Text type="sm-medium" style={[pal.text, pal.textLight]}> - Liked by {item.data.likeCount || 0}{' '} - {pluralize(item.data.likeCount || 0, 'user')} - </Text> - </View> - </View> + <Text type="sm-medium" style={[pal.text, pal.textLight]}> + Liked by {item.data.likeCount || 0}{' '} + {pluralize(item.data.likeCount || 0, 'user')} + </Text> ) : null} </TouchableOpacity> ) @@ -119,14 +145,7 @@ const styles = StyleSheet.create({ flex: 1, flexWrap: 'wrap', }, - bottomContainer: { - flexDirection: 'row', - justifyContent: 'space-between', - alignItems: 'center', - }, - likedByContainer: { - flexDirection: 'row', - alignItems: 'center', - gap: 2, + btn: { + paddingVertical: 6, }, }) |