Usability improvements to feeds
parent
f0003d1931
commit
6bf8e72157
|
@ -61,24 +61,24 @@ export class SavedFeedsModel {
|
||||||
return this.hasLoaded && !this.hasContent
|
return this.hasLoaded && !this.hasContent
|
||||||
}
|
}
|
||||||
|
|
||||||
get numOfFeeds() {
|
get numFeeds() {
|
||||||
return this.feeds.length
|
return this.feeds.length
|
||||||
}
|
}
|
||||||
|
|
||||||
get listOfFeedNames() {
|
get unpinned() {
|
||||||
return this.feeds.map(f => f.displayName)
|
|
||||||
}
|
|
||||||
|
|
||||||
get listOfPinnedFeedNames() {
|
|
||||||
return this.pinned.map(f => f.displayName)
|
|
||||||
}
|
|
||||||
|
|
||||||
get savedFeedsWithoutPinned() {
|
|
||||||
return this.feeds.filter(
|
return this.feeds.filter(
|
||||||
f => !this.pinned.find(p => p.data.uri === f.data.uri),
|
f => !this.pinned.find(p => p.data.uri === f.data.uri),
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
get feedNames() {
|
||||||
|
return this.feeds.map(f => f.displayName)
|
||||||
|
}
|
||||||
|
|
||||||
|
get pinnedFeedNames() {
|
||||||
|
return this.pinned.map(f => f.displayName)
|
||||||
|
}
|
||||||
|
|
||||||
togglePinnedFeed(feed: CustomFeedModel) {
|
togglePinnedFeed(feed: CustomFeedModel) {
|
||||||
if (!this.isPinned(feed)) {
|
if (!this.isPinned(feed)) {
|
||||||
this.pinned.push(feed)
|
this.pinned.push(feed)
|
||||||
|
@ -92,7 +92,7 @@ export class SavedFeedsModel {
|
||||||
}
|
}
|
||||||
|
|
||||||
reorderPinnedFeeds(temp: CustomFeedModel[]) {
|
reorderPinnedFeeds(temp: CustomFeedModel[]) {
|
||||||
this.pinned = temp
|
this.pinned = temp.filter(item => this.isPinned(item))
|
||||||
}
|
}
|
||||||
|
|
||||||
isPinned(feed: CustomFeedModel) {
|
isPinned(feed: CustomFeedModel) {
|
||||||
|
|
|
@ -1,16 +1,17 @@
|
||||||
import React from 'react'
|
import React from 'react'
|
||||||
import {
|
import {
|
||||||
|
Pressable,
|
||||||
StyleProp,
|
StyleProp,
|
||||||
StyleSheet,
|
StyleSheet,
|
||||||
View,
|
View,
|
||||||
ViewStyle,
|
ViewStyle,
|
||||||
TouchableOpacity,
|
TouchableOpacity,
|
||||||
} from 'react-native'
|
} from 'react-native'
|
||||||
|
import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
|
||||||
import {Text} from '../util/text/Text'
|
import {Text} from '../util/text/Text'
|
||||||
import {usePalette} from 'lib/hooks/usePalette'
|
import {usePalette} from 'lib/hooks/usePalette'
|
||||||
import {s} from 'lib/styles'
|
import {s} from 'lib/styles'
|
||||||
import {UserAvatar} from '../util/UserAvatar'
|
import {UserAvatar} from '../util/UserAvatar'
|
||||||
import {Button} from '../util/forms/Button'
|
|
||||||
import {observer} from 'mobx-react-lite'
|
import {observer} from 'mobx-react-lite'
|
||||||
import {CustomFeedModel} from 'state/models/feeds/custom-feed'
|
import {CustomFeedModel} from 'state/models/feeds/custom-feed'
|
||||||
import {useNavigation} from '@react-navigation/native'
|
import {useNavigation} from '@react-navigation/native'
|
||||||
|
@ -18,6 +19,7 @@ import {NavigationProp} from 'lib/routes/types'
|
||||||
import {useStores} from 'state/index'
|
import {useStores} from 'state/index'
|
||||||
import {pluralize} from 'lib/strings/helpers'
|
import {pluralize} from 'lib/strings/helpers'
|
||||||
import {AtUri} from '@atproto/api'
|
import {AtUri} from '@atproto/api'
|
||||||
|
import * as Toast from 'view/com/util/Toast'
|
||||||
|
|
||||||
export const CustomFeed = observer(
|
export const CustomFeed = observer(
|
||||||
({
|
({
|
||||||
|
@ -37,6 +39,23 @@ export const CustomFeed = observer(
|
||||||
const pal = usePalette('default')
|
const pal = usePalette('default')
|
||||||
const navigation = useNavigation<NavigationProp>()
|
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 (
|
return (
|
||||||
<TouchableOpacity
|
<TouchableOpacity
|
||||||
accessibilityRole="button"
|
accessibilityRole="button"
|
||||||
|
@ -62,17 +81,28 @@ export const CustomFeed = observer(
|
||||||
</View>
|
</View>
|
||||||
{showSaveBtn && (
|
{showSaveBtn && (
|
||||||
<View>
|
<View>
|
||||||
<Button
|
<Pressable
|
||||||
type={item.isSaved ? 'default' : 'inverted'}
|
accessibilityRole="button"
|
||||||
onPress={() => {
|
accessibilityLabel={
|
||||||
if (item.data.viewer?.saved) {
|
item.isSaved ? 'Remove from my feeds' : 'Add to my feeds'
|
||||||
store.me.savedFeeds.unsave(item)
|
}
|
||||||
} else {
|
accessibilityHint=""
|
||||||
store.me.savedFeeds.save(item)
|
onPress={onToggleSaved}
|
||||||
}
|
style={styles.btn}>
|
||||||
}}
|
{item.isSaved ? (
|
||||||
label={item.data.viewer?.saved ? 'Unsave' : 'Save'}
|
<FontAwesomeIcon
|
||||||
/>
|
icon={['far', 'trash-can']}
|
||||||
|
size={19}
|
||||||
|
color={pal.colors.icon}
|
||||||
|
/>
|
||||||
|
) : (
|
||||||
|
<FontAwesomeIcon
|
||||||
|
icon="plus"
|
||||||
|
size={18}
|
||||||
|
color={pal.colors.link}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</Pressable>
|
||||||
</View>
|
</View>
|
||||||
)}
|
)}
|
||||||
</View>
|
</View>
|
||||||
|
@ -84,14 +114,10 @@ export const CustomFeed = observer(
|
||||||
) : null}
|
) : null}
|
||||||
|
|
||||||
{showLikes ? (
|
{showLikes ? (
|
||||||
<View style={styles.bottomContainer}>
|
<Text type="sm-medium" style={[pal.text, pal.textLight]}>
|
||||||
<View style={styles.likedByContainer}>
|
Liked by {item.data.likeCount || 0}{' '}
|
||||||
<Text type="sm-medium" style={[pal.text, pal.textLight]}>
|
{pluralize(item.data.likeCount || 0, 'user')}
|
||||||
Liked by {item.data.likeCount || 0}{' '}
|
</Text>
|
||||||
{pluralize(item.data.likeCount || 0, 'user')}
|
|
||||||
</Text>
|
|
||||||
</View>
|
|
||||||
</View>
|
|
||||||
) : null}
|
) : null}
|
||||||
</TouchableOpacity>
|
</TouchableOpacity>
|
||||||
)
|
)
|
||||||
|
@ -119,14 +145,7 @@ const styles = StyleSheet.create({
|
||||||
flex: 1,
|
flex: 1,
|
||||||
flexWrap: 'wrap',
|
flexWrap: 'wrap',
|
||||||
},
|
},
|
||||||
bottomContainer: {
|
btn: {
|
||||||
flexDirection: 'row',
|
paddingVertical: 6,
|
||||||
justifyContent: 'space-between',
|
|
||||||
alignItems: 'center',
|
|
||||||
},
|
|
||||||
likedByContainer: {
|
|
||||||
flexDirection: 'row',
|
|
||||||
alignItems: 'center',
|
|
||||||
gap: 2,
|
|
||||||
},
|
},
|
||||||
})
|
})
|
||||||
|
|
|
@ -1,41 +1,51 @@
|
||||||
import React from 'react'
|
import React, {useCallback} from 'react'
|
||||||
import {View, TouchableOpacity, StyleSheet} from 'react-native'
|
import {
|
||||||
|
View,
|
||||||
|
TouchableOpacity,
|
||||||
|
StyleSheet,
|
||||||
|
StyleProp,
|
||||||
|
ViewStyle,
|
||||||
|
} from 'react-native'
|
||||||
import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
|
import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
|
||||||
import {colors} from 'lib/styles'
|
import {colors} from 'lib/styles'
|
||||||
import {observer} from 'mobx-react-lite'
|
import {observer} from 'mobx-react-lite'
|
||||||
import {CustomFeedModel} from 'state/models/feeds/custom-feed'
|
import {CustomFeedModel} from 'state/models/feeds/custom-feed'
|
||||||
import {SavedFeedsModel} from 'state/models/ui/saved-feeds'
|
import {SavedFeedsModel} from 'state/models/ui/saved-feeds'
|
||||||
import {CustomFeed} from './CustomFeed'
|
import {CustomFeed} from './CustomFeed'
|
||||||
|
import {usePalette} from 'lib/hooks/usePalette'
|
||||||
|
|
||||||
export const SavedFeedItem = observer(
|
export const SavedFeedItem = observer(
|
||||||
({
|
({
|
||||||
item,
|
item,
|
||||||
savedFeeds,
|
savedFeeds,
|
||||||
|
showSaveBtn = false,
|
||||||
|
style,
|
||||||
}: {
|
}: {
|
||||||
item: CustomFeedModel
|
item: CustomFeedModel
|
||||||
savedFeeds: SavedFeedsModel
|
savedFeeds: SavedFeedsModel
|
||||||
|
showSaveBtn?: boolean
|
||||||
|
style?: StyleProp<ViewStyle>
|
||||||
}) => {
|
}) => {
|
||||||
|
const pal = usePalette('default')
|
||||||
const isPinned = savedFeeds.isPinned(item)
|
const isPinned = savedFeeds.isPinned(item)
|
||||||
|
const onTogglePinned = useCallback(
|
||||||
|
() => savedFeeds.togglePinnedFeed(item),
|
||||||
|
[savedFeeds, item],
|
||||||
|
)
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<View style={styles.itemContainer}>
|
<View style={[styles.itemContainer, style]}>
|
||||||
<CustomFeed
|
<CustomFeed
|
||||||
key={item.data.uri}
|
key={item.data.uri}
|
||||||
item={item}
|
item={item}
|
||||||
style={styles.item}
|
showSaveBtn={showSaveBtn}
|
||||||
showSaveBtn
|
style={styles.noBorder}
|
||||||
/>
|
/>
|
||||||
<TouchableOpacity
|
<TouchableOpacity accessibilityRole="button" onPress={onTogglePinned}>
|
||||||
accessibilityRole="button"
|
|
||||||
onPress={() => {
|
|
||||||
savedFeeds.togglePinnedFeed(item)
|
|
||||||
console.log('pinned', savedFeeds.pinned)
|
|
||||||
console.log('isPinned', savedFeeds.isPinned(item))
|
|
||||||
}}>
|
|
||||||
<FontAwesomeIcon
|
<FontAwesomeIcon
|
||||||
icon="thumb-tack"
|
icon="thumb-tack"
|
||||||
size={20}
|
size={20}
|
||||||
color={isPinned ? colors.blue3 : colors.gray3}
|
color={isPinned ? colors.blue3 : pal.colors.icon}
|
||||||
/>
|
/>
|
||||||
</TouchableOpacity>
|
</TouchableOpacity>
|
||||||
</View>
|
</View>
|
||||||
|
@ -50,7 +60,7 @@ const styles = StyleSheet.create({
|
||||||
alignItems: 'center',
|
alignItems: 'center',
|
||||||
marginRight: 18,
|
marginRight: 18,
|
||||||
},
|
},
|
||||||
item: {
|
noBorder: {
|
||||||
borderTopWidth: 0,
|
borderTopWidth: 0,
|
||||||
},
|
},
|
||||||
})
|
})
|
||||||
|
|
|
@ -1,24 +1,15 @@
|
||||||
import React, {useEffect, useCallback} from 'react'
|
import React, {useEffect, useCallback} from 'react'
|
||||||
import {
|
import {FlatList, RefreshControl, StyleSheet, View} from 'react-native'
|
||||||
ActivityIndicator,
|
|
||||||
FlatList,
|
|
||||||
RefreshControl,
|
|
||||||
StyleSheet,
|
|
||||||
TouchableOpacity,
|
|
||||||
View,
|
|
||||||
} from 'react-native'
|
|
||||||
import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
|
import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
|
||||||
import {usePalette} from 'lib/hooks/usePalette'
|
import {usePalette} from 'lib/hooks/usePalette'
|
||||||
import {observer} from 'mobx-react-lite'
|
import {observer} from 'mobx-react-lite'
|
||||||
import {useStores} from 'state/index'
|
import {useStores} from 'state/index'
|
||||||
import {CustomFeedModel} from 'state/models/feeds/custom-feed'
|
|
||||||
import {SavedFeedsModel} from 'state/models/ui/saved-feeds'
|
|
||||||
import {CenteredView} from 'view/com/util/Views'
|
import {CenteredView} from 'view/com/util/Views'
|
||||||
import {Text} from 'view/com/util/text/Text'
|
import {Text} from 'view/com/util/text/Text'
|
||||||
import {isDesktopWeb} from 'platform/detection'
|
import {isDesktopWeb} from 'platform/detection'
|
||||||
import {s, colors} from 'lib/styles'
|
import {s} from 'lib/styles'
|
||||||
import {Link} from 'view/com/util/Link'
|
import {Link} from 'view/com/util/Link'
|
||||||
import {CustomFeed} from 'view/com/feeds/CustomFeed'
|
import {CustomFeed} from './CustomFeed'
|
||||||
|
|
||||||
export const SavedFeeds = observer(
|
export const SavedFeeds = observer(
|
||||||
({
|
({
|
||||||
|
@ -69,14 +60,8 @@ export const SavedFeeds = observer(
|
||||||
}, [pal])
|
}, [pal])
|
||||||
|
|
||||||
const renderItem = useCallback(
|
const renderItem = useCallback(
|
||||||
({item}) => (
|
({item}) => <CustomFeed key={item.data.uri} item={item} />,
|
||||||
<SavedFeedItem
|
[],
|
||||||
key={item.data.uri}
|
|
||||||
item={item}
|
|
||||||
savedFeeds={store.me.savedFeeds}
|
|
||||||
/>
|
|
||||||
),
|
|
||||||
[store.me.savedFeeds],
|
|
||||||
)
|
)
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
@ -109,35 +94,6 @@ export const SavedFeeds = observer(
|
||||||
},
|
},
|
||||||
)
|
)
|
||||||
|
|
||||||
const SavedFeedItem = observer(
|
|
||||||
({
|
|
||||||
item,
|
|
||||||
savedFeeds,
|
|
||||||
}: {
|
|
||||||
item: CustomFeedModel
|
|
||||||
savedFeeds: SavedFeedsModel
|
|
||||||
}) => {
|
|
||||||
const isPinned = savedFeeds.isPinned(item)
|
|
||||||
const onTogglePinned = useCallback(
|
|
||||||
() => savedFeeds.togglePinnedFeed(item),
|
|
||||||
[savedFeeds, item],
|
|
||||||
)
|
|
||||||
|
|
||||||
return (
|
|
||||||
<View style={styles.itemContainer}>
|
|
||||||
<CustomFeed key={item.data.uri} item={item} />
|
|
||||||
<TouchableOpacity accessibilityRole="button" onPress={onTogglePinned}>
|
|
||||||
<FontAwesomeIcon
|
|
||||||
icon="thumb-tack"
|
|
||||||
size={20}
|
|
||||||
color={isPinned ? colors.blue3 : colors.gray3}
|
|
||||||
/>
|
|
||||||
</TouchableOpacity>
|
|
||||||
</View>
|
|
||||||
)
|
|
||||||
},
|
|
||||||
)
|
|
||||||
|
|
||||||
const styles = StyleSheet.create({
|
const styles = StyleSheet.create({
|
||||||
footerLink: {
|
footerLink: {
|
||||||
flexDirection: 'row',
|
flexDirection: 'row',
|
||||||
|
@ -154,10 +110,7 @@ const styles = StyleSheet.create({
|
||||||
marginHorizontal: 18,
|
marginHorizontal: 18,
|
||||||
marginTop: 10,
|
marginTop: 10,
|
||||||
},
|
},
|
||||||
itemContainer: {
|
feedItem: {
|
||||||
flex: 1,
|
borderTopWidth: 1,
|
||||||
flexDirection: 'row',
|
|
||||||
alignItems: 'center',
|
|
||||||
marginRight: 18,
|
|
||||||
},
|
},
|
||||||
})
|
})
|
||||||
|
|
|
@ -28,12 +28,8 @@ const FeedsTabBarDesktop = observer(
|
||||||
) => {
|
) => {
|
||||||
const store = useStores()
|
const store = useStores()
|
||||||
const items = useMemo(
|
const items = useMemo(
|
||||||
() => [
|
() => ['Following', "What's hot", ...store.me.savedFeeds.pinnedFeedNames],
|
||||||
'Following',
|
[store.me.savedFeeds.pinnedFeedNames],
|
||||||
"What's hot",
|
|
||||||
...store.me.savedFeeds.listOfPinnedFeedNames,
|
|
||||||
],
|
|
||||||
[store.me.savedFeeds.listOfPinnedFeedNames],
|
|
||||||
)
|
)
|
||||||
const pal = usePalette('default')
|
const pal = usePalette('default')
|
||||||
const interp = useAnimatedValue(0)
|
const interp = useAnimatedValue(0)
|
||||||
|
|
|
@ -36,10 +36,10 @@ export const FeedsTabBar = observer(
|
||||||
() => [
|
() => [
|
||||||
'Following',
|
'Following',
|
||||||
"What's hot",
|
"What's hot",
|
||||||
...store.me.savedFeeds.listOfPinnedFeedNames,
|
...store.me.savedFeeds.pinnedFeedNames,
|
||||||
'My feeds',
|
'My feeds',
|
||||||
],
|
],
|
||||||
[store.me.savedFeeds.listOfPinnedFeedNames],
|
[store.me.savedFeeds.pinnedFeedNames],
|
||||||
)
|
)
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
|
|
@ -72,10 +72,10 @@ export const PinnedFeeds = withAuthRequired(
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<CenteredView style={[s.flex1]}>
|
<CenteredView style={[s.flex1]}>
|
||||||
<ViewHeader title="Arrange Pinned Feeds" showOnDesktop />
|
<ViewHeader title="Edit My Feeds" showOnDesktop />
|
||||||
<DraggableFlatList
|
<DraggableFlatList
|
||||||
containerStyle={[!isDesktopWeb && s.flex1]}
|
containerStyle={[!isDesktopWeb && s.flex1]}
|
||||||
data={[...savedFeeds.pinned]} // make a copy so this FlatList re-renders when pinned changes
|
data={[...savedFeeds.pinned, ...savedFeeds.unpinned]} // make a copy so this FlatList re-renders when pinned changes
|
||||||
keyExtractor={item => item.data.uri}
|
keyExtractor={item => item.data.uri}
|
||||||
refreshing={savedFeeds.isRefreshing}
|
refreshing={savedFeeds.isRefreshing}
|
||||||
refreshControl={
|
refreshControl={
|
||||||
|
@ -86,7 +86,7 @@ export const PinnedFeeds = withAuthRequired(
|
||||||
titleColor={pal.colors.text}
|
titleColor={pal.colors.text}
|
||||||
/>
|
/>
|
||||||
}
|
}
|
||||||
renderItem={({item, drag}) => <PinnedItem item={item} drag={drag} />}
|
renderItem={({item, drag}) => <ListItem item={item} drag={drag} />}
|
||||||
initialNumToRender={10}
|
initialNumToRender={10}
|
||||||
ListFooterComponent={_ListFooterComponent}
|
ListFooterComponent={_ListFooterComponent}
|
||||||
ListEmptyComponent={_ListEmptyComponent}
|
ListEmptyComponent={_ListEmptyComponent}
|
||||||
|
@ -100,19 +100,20 @@ export const PinnedFeeds = withAuthRequired(
|
||||||
}),
|
}),
|
||||||
)
|
)
|
||||||
|
|
||||||
const PinnedItem = observer(
|
const ListItem = observer(
|
||||||
({item, drag}: {item: CustomFeedModel; drag: () => void}) => {
|
({item, drag}: {item: CustomFeedModel; drag: () => void}) => {
|
||||||
const pal = usePalette('default')
|
const pal = usePalette('default')
|
||||||
const rootStore = useStores()
|
const rootStore = useStores()
|
||||||
const savedFeeds = useMemo(() => rootStore.me.savedFeeds, [rootStore])
|
const savedFeeds = useMemo(() => rootStore.me.savedFeeds, [rootStore])
|
||||||
|
const isPinned = savedFeeds.isPinned(item)
|
||||||
return (
|
return (
|
||||||
<ScaleDecorator>
|
<ScaleDecorator>
|
||||||
<ShadowDecorator>
|
<ShadowDecorator>
|
||||||
<Pressable
|
<Pressable
|
||||||
accessibilityRole="button"
|
accessibilityRole="button"
|
||||||
onLongPress={drag}
|
onLongPress={isPinned ? drag : undefined}
|
||||||
style={styles.itemContainer}>
|
style={[styles.itemContainer, pal.border]}>
|
||||||
{isWeb ? (
|
{isPinned && isWeb ? (
|
||||||
<View style={styles.webArrowButtonsContainer}>
|
<View style={styles.webArrowButtonsContainer}>
|
||||||
<TouchableOpacity
|
<TouchableOpacity
|
||||||
accessibilityRole="button"
|
accessibilityRole="button"
|
||||||
|
@ -122,7 +123,7 @@ const PinnedItem = observer(
|
||||||
<FontAwesomeIcon
|
<FontAwesomeIcon
|
||||||
icon="arrow-up"
|
icon="arrow-up"
|
||||||
size={20}
|
size={20}
|
||||||
style={[styles.icon, pal.text, styles.webArrowUpButton]}
|
style={[s.mr10, pal.text, styles.webArrowUpButton]}
|
||||||
/>
|
/>
|
||||||
</TouchableOpacity>
|
</TouchableOpacity>
|
||||||
<TouchableOpacity
|
<TouchableOpacity
|
||||||
|
@ -133,18 +134,19 @@ const PinnedItem = observer(
|
||||||
<FontAwesomeIcon
|
<FontAwesomeIcon
|
||||||
icon="arrow-down"
|
icon="arrow-down"
|
||||||
size={20}
|
size={20}
|
||||||
style={[styles.icon, pal.text]}
|
style={[s.mr10, pal.text]}
|
||||||
/>
|
/>
|
||||||
</TouchableOpacity>
|
</TouchableOpacity>
|
||||||
</View>
|
</View>
|
||||||
) : (
|
) : isPinned ? (
|
||||||
<FontAwesomeIcon
|
<FontAwesomeIcon
|
||||||
icon="bars"
|
icon="bars"
|
||||||
size={20}
|
size={20}
|
||||||
style={[styles.icon, pal.text]}
|
color={pal.colors.text}
|
||||||
|
style={s.ml20}
|
||||||
/>
|
/>
|
||||||
)}
|
) : null}
|
||||||
<SavedFeedItem item={item} savedFeeds={savedFeeds} />
|
<SavedFeedItem item={item} savedFeeds={savedFeeds} showSaveBtn />
|
||||||
</Pressable>
|
</Pressable>
|
||||||
</ShadowDecorator>
|
</ShadowDecorator>
|
||||||
</ScaleDecorator>
|
</ScaleDecorator>
|
||||||
|
@ -167,12 +169,8 @@ const styles = StyleSheet.create({
|
||||||
flex: 1,
|
flex: 1,
|
||||||
flexDirection: 'row',
|
flexDirection: 'row',
|
||||||
alignItems: 'center',
|
alignItems: 'center',
|
||||||
marginLeft: 18,
|
borderTopWidth: 1,
|
||||||
},
|
},
|
||||||
item: {
|
|
||||||
borderTopWidth: 0,
|
|
||||||
},
|
|
||||||
icon: {marginRight: 10},
|
|
||||||
webArrowButtonsContainer: {
|
webArrowButtonsContainer: {
|
||||||
flexDirection: 'column',
|
flexDirection: 'column',
|
||||||
justifyContent: 'space-around',
|
justifyContent: 'space-around',
|
||||||
|
|
|
@ -43,10 +43,10 @@ export const ProfileCustomFeed = withAuthRequired(
|
||||||
|
|
||||||
const onToggleSaved = React.useCallback(async () => {
|
const onToggleSaved = React.useCallback(async () => {
|
||||||
try {
|
try {
|
||||||
if (currentFeed.isSaved) {
|
if (currentFeed?.isSaved) {
|
||||||
await currentFeed.unsave()
|
await currentFeed?.unsave()
|
||||||
} else {
|
} else {
|
||||||
await currentFeed.save()
|
await currentFeed?.save()
|
||||||
}
|
}
|
||||||
} catch (err) {
|
} catch (err) {
|
||||||
Toast.show(
|
Toast.show(
|
||||||
|
@ -58,10 +58,10 @@ export const ProfileCustomFeed = withAuthRequired(
|
||||||
|
|
||||||
const onToggleLiked = React.useCallback(async () => {
|
const onToggleLiked = React.useCallback(async () => {
|
||||||
try {
|
try {
|
||||||
if (currentFeed.isLiked) {
|
if (currentFeed?.isLiked) {
|
||||||
await currentFeed.unlike()
|
await currentFeed?.unlike()
|
||||||
} else {
|
} else {
|
||||||
await currentFeed.like()
|
await currentFeed?.like()
|
||||||
}
|
}
|
||||||
} catch (err) {
|
} catch (err) {
|
||||||
Toast.show(
|
Toast.show(
|
||||||
|
@ -90,10 +90,12 @@ export const ProfileCustomFeed = withAuthRequired(
|
||||||
type={currentFeed?.isSaved ? 'default' : 'inverted'}
|
type={currentFeed?.isSaved ? 'default' : 'inverted'}
|
||||||
onPress={onToggleSaved}
|
onPress={onToggleSaved}
|
||||||
accessibilityLabel={
|
accessibilityLabel={
|
||||||
currentFeed?.isSaved ? 'Unsave this feed' : 'Save this feed'
|
currentFeed?.isSaved ? 'Remove from my feeds' : 'Add to my feeds'
|
||||||
}
|
}
|
||||||
accessibilityHint=""
|
accessibilityHint=""
|
||||||
label={currentFeed?.isSaved ? 'Unsave' : 'Save'}
|
label={
|
||||||
|
currentFeed?.isSaved ? 'Remove from My Feeds' : 'Add to My Feeds'
|
||||||
|
}
|
||||||
/>
|
/>
|
||||||
</View>
|
</View>
|
||||||
)
|
)
|
||||||
|
|
Loading…
Reference in New Issue