Usability improvements to feeds

zio/stable
Paul Frazee 2023-05-17 21:23:32 -05:00
parent f0003d1931
commit 6bf8e72157
8 changed files with 120 additions and 142 deletions

View File

@ -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) {

View File

@ -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,
}, },
}) })

View File

@ -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,
}, },
}) })

View File

@ -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,
}, },
}) })

View File

@ -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)

View File

@ -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 (

View File

@ -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',

View File

@ -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>
) )