zio
/
bsky-app
2
0
Fork 0
Code Pull Requests Packages Releases Activity

Store/sync pinned feeds on the server

zio/stable
Paul Frazee 2023-05-18 11:51:25 -05:00
parent d88c27a419
commit 7691fe4f48
8 changed files with 278 additions and 240 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/state/models/me.ts
View File

@ -69,7 +69,6 @@ export class MeModel {
displayName: this.displayName,
description: this.description,
avatar: this.avatar,
savedFeeds: this.savedFeeds.serialize(),
}
}
@ -91,9 +90,6 @@ export class MeModel {
if (hasProp(v, 'avatar') && typeof v.avatar === 'string') {
avatar = v.avatar
}
if (hasProp(v, 'savedFeeds') && isObj(v.savedFeeds)) {
this.savedFeeds.hydrate(v.savedFeeds)
}
if (did && handle) {
this.did = did
this.handle = handle
@ -118,7 +114,7 @@ export class MeModel {
/* dont await */ this.notifications.setup().catch(e => {
this.rootStore.log.error('Failed to setup notifications model', e)
})
/* dont await */ this.savedFeeds.refresh()
/* dont await */ this.savedFeeds.refresh(true)
this.rootStore.emitSessionLoaded()
await this.fetchInviteCodes()
await this.fetchAppPasswords()
@ -128,6 +124,7 @@ export class MeModel {
}
async updateIfNeeded() {
/* dont await */ this.savedFeeds.refresh(true)
if (Date.now() - this.lastProfileStateUpdate > PROFILE_UPDATE_INTERVAL) {
this.rootStore.log.debug('Updating me profile information')
this.lastProfileStateUpdate = Date.now()

58
src/state/models/ui/preferences.ts
View File

@ -25,6 +25,7 @@ const LABEL_GROUPS = [
'spam',
'impersonation',
]
const VISIBILITY_VALUES = ['show', 'warn', 'hide']
export class LabelPreferencesModel {
nsfw: LabelPreference = 'hide'
@ -45,6 +46,7 @@ export class PreferencesModel {
contentLanguages: string[] =
deviceLocales?.map?.(locale => locale.languageCode) || []
contentLabels = new LabelPreferencesModel()
pinnedFeeds: string[] = []
constructor(public rootStore: RootStoreModel) {
makeAutoObservable(this, {}, {autoBind: true})
@ -54,6 +56,7 @@ export class PreferencesModel {
return {
contentLanguages: this.contentLanguages,
contentLabels: this.contentLabels,
pinnedFeeds: this.pinnedFeeds,
}
}
@ -72,6 +75,13 @@ export class PreferencesModel {
// default to the device languages
this.contentLanguages = deviceLocales.map(locale => locale.languageCode)
}
if (
hasProp(v, 'pinnedFeeds') &&
Array.isArray(v.pinnedFeeds) &&
typeof v.pinnedFeeds.every(item => typeof item === 'string')
) {
this.pinnedFeeds = v.pinnedFeeds
}
}
}
@ -88,9 +98,18 @@ export class PreferencesModel {
AppBskyActorDefs.isContentLabelPref(pref) &&
AppBskyActorDefs.validateAdultContentPref(pref).success
) {
if (LABEL_GROUPS.includes(pref.label)) {
this.contentLabels[pref.label] = pref.visibility
if (
LABEL_GROUPS.includes(pref.label) &&
VISIBILITY_VALUES.includes(pref.visibility)
) {
this.contentLabels[pref.label as keyof LabelPreferencesModel] =
pref.visibility as LabelPreference
}
} else if (
AppBskyActorDefs.isPinnedFeedsPref(pref) &&
AppBskyActorDefs.validatePinnedFeedsPref(pref).success
) {
this.pinnedFeeds = pref.feeds
}
}
})
@ -200,4 +219,39 @@ export class PreferencesModel {
}
return res
}
async setPinnedFeeds(v: string[]) {
const old = this.pinnedFeeds
this.pinnedFeeds = v
try {
await this.update((prefs: AppBskyActorDefs.Preferences) => {
const existing = prefs.find(
pref =>
AppBskyActorDefs.isPinnedFeedsPref(pref) &&
AppBskyActorDefs.validatePinnedFeedsPref(pref).success,
)
if (existing) {
existing.feeds = v
} else {
prefs.push({
$type: 'app.bsky.actor.defs#pinnedFeedsPref',
feeds: v,
})
}
})
} catch (e) {
runInAction(() => {
this.pinnedFeeds = old
})
throw e
}
}
async addPinnedFeed(v: string) {
return this.setPinnedFeeds([...this.pinnedFeeds, v])
}
async removePinnedFeed(v: string) {
return this.setPinnedFeeds(this.pinnedFeeds.filter(uri => uri !== v))
}
}

226
src/state/models/ui/saved-feeds.ts
View File

@ -1,12 +1,11 @@
import {makeAutoObservable, runInAction} from 'mobx'
import {AppBskyFeedGetSavedFeeds as GetSavedFeeds} from '@atproto/api'
import {AppBskyFeedDefs} from '@atproto/api'
import {RootStoreModel} from '../root-store'
import {bundleAsync} from 'lib/async/bundle'
import {cleanError} from 'lib/strings/errors'
import {CustomFeedModel} from '../feeds/custom-feed'
import {hasProp, isObj} from 'lib/type-guards'
const PAGE_SIZE = 30
const PAGE_SIZE = 100
export class SavedFeedsModel {
// state
@ -14,12 +13,9 @@ export class SavedFeedsModel {
isRefreshing = false
hasLoaded = false
error = ''
hasMore = true
loadMoreCursor?: string
// data
feeds: CustomFeedModel[] = []
pinned: CustomFeedModel[] = []
constructor(public rootStore: RootStoreModel) {
makeAutoObservable(
@ -31,24 +27,6 @@ export class SavedFeedsModel {
)
}
serialize() {
return {
pinned: this.pinned.map(f => f.serialize()),
}
}
hydrate(v: unknown) {
if (isObj(v)) {
if (hasProp(v, 'pinned')) {
const pinnedSerialized = (v as any).pinned as string[]
const pinnedDeserialized = pinnedSerialized.map(
(s: string) => new CustomFeedModel(this.rootStore, JSON.parse(s)),
)
this.pinned = pinnedDeserialized
}
}
}
get hasContent() {
return this.feeds.length > 0
}
@ -61,149 +39,121 @@ export class SavedFeedsModel {
return this.hasLoaded && !this.hasContent
}
get numFeeds() {
return this.feeds.length
get pinned() {
return this.rootStore.preferences.pinnedFeeds
.map(uri => this.feeds.find(f => f.uri === uri) as CustomFeedModel)
.filter(Boolean)
}
get unpinned() {
return this.feeds.filter(
f => !this.pinned.find(p => p.data.uri === f.data.uri),
)
}
get feedNames() {
return this.feeds.map(f => f.displayName)
return this.feeds.filter(f => !this.isPinned(f))
}
get pinnedFeedNames() {
return this.pinned.map(f => f.displayName)
}
togglePinnedFeed(feed: CustomFeedModel) {
if (!this.isPinned(feed)) {
this.pinned = [...this.pinned, feed]
} else {
this.removePinnedFeed(feed.data.uri)
}
}
removePinnedFeed(uri: string) {
this.pinned = this.pinned.filter(f => f.data.uri !== uri)
}
reorderPinnedFeeds(temp: CustomFeedModel[]) {
this.pinned = temp.filter(item => this.isPinned(item))
}
isPinned(feed: CustomFeedModel) {
return this.pinned.find(f => f.data.uri === feed.data.uri) ? true : false
}
movePinnedItem(item: CustomFeedModel, direction: 'up' | 'down') {
if (this.pinned.length < 2) {
throw new Error('Array must have at least 2 items')
}
const index = this.pinned.indexOf(item)
if (index === -1) {
throw new Error('Item not found in array')
}
const len = this.pinned.length
runInAction(() => {
if (direction === 'up') {
if (index === 0) {
// Remove the item from the first place and put it at the end
this.pinned.push(this.pinned.shift()!)
} else {
// Swap the item with the one before it
const temp = this.pinned[index]
this.pinned[index] = this.pinned[index - 1]
this.pinned[index - 1] = temp
}
} else if (direction === 'down') {
if (index === len - 1) {
// Remove the item from the last place and put it at the start
this.pinned.unshift(this.pinned.pop()!)
} else {
// Swap the item with the one after it
const temp = this.pinned[index]
this.pinned[index] = this.pinned[index + 1]
this.pinned[index + 1] = temp
}
}
// this.pinned = [...this.pinned]
})
}
// public api
// =
async refresh(quietRefresh = false) {
return this.loadMore(true, quietRefresh)
}
clear() {
this.isLoading = false
this.isRefreshing = false
this.hasLoaded = false
this.error = ''
this.hasMore = true
this.loadMoreCursor = undefined
this.feeds = []
}
loadMore = bundleAsync(
async (replace: boolean = false, quietRefresh = false) => {
if (!replace && !this.hasMore) {
return
}
this._xLoading(replace && !quietRefresh)
try {
refresh = bundleAsync(async (quietRefresh = false) => {
this._xLoading(!quietRefresh)
try {
let feeds: AppBskyFeedDefs.GeneratorView[] = []
let cursor
for (let i = 0; i < 100; i++) {
const res = await this.rootStore.agent.app.bsky.feed.getSavedFeeds({
limit: PAGE_SIZE,
cursor: replace ? undefined : this.loadMoreCursor,
cursor,
})
if (replace) {
this._replaceAll(res)
} else {
this._appendAll(res)
feeds = feeds.concat(res.data.feeds)
cursor = res.data.cursor
if (!cursor) {
break
}
this._xIdle()
} catch (e: any) {
this._xIdle(e)
}
},
)
runInAction(() => {
this.feeds = feeds.map(f => new CustomFeedModel(this.rootStore, f))
})
this._xIdle()
} catch (e: any) {
this._xIdle(e)
}
})
removeFeed(uri: string) {
this.feeds = this.feeds.filter(f => f.data.uri !== uri)
}
addFeed(algoItem: CustomFeedModel) {
this.feeds.push(new CustomFeedModel(this.rootStore, algoItem.data))
}
async save(algoItem: CustomFeedModel) {
async save(feed: CustomFeedModel) {
try {
await algoItem.save()
this.addFeed(algoItem)
await feed.save()
runInAction(() => {
this.feeds = [
...this.feeds,
new CustomFeedModel(this.rootStore, feed.data),
]
})
} catch (e: any) {
this.rootStore.log.error('Failed to save feed', e)
}
}
async unsave(algoItem: CustomFeedModel) {
const uri = algoItem.uri
async unsave(feed: CustomFeedModel) {
const uri = feed.uri
try {
await algoItem.unsave()
this.removeFeed(uri)
this.removePinnedFeed(uri)
if (this.isPinned(feed)) {
await this.rootStore.preferences.removePinnedFeed(uri)
}
await feed.unsave()
runInAction(() => {
this.feeds = this.feeds.filter(f => f.data.uri !== uri)
})
} catch (e: any) {
this.rootStore.log.error('Failed to unsave feed', e)
}
}
async togglePinnedFeed(feed: CustomFeedModel) {
if (!this.isPinned(feed)) {
return this.rootStore.preferences.addPinnedFeed(feed.uri)
} else {
return this.rootStore.preferences.removePinnedFeed(feed.uri)
}
}
async reorderPinnedFeeds(feeds: CustomFeedModel[]) {
return this.rootStore.preferences.setPinnedFeeds(
feeds.filter(feed => this.isPinned(feed)).map(feed => feed.uri),
)
}
isPinned(feed: CustomFeedModel) {
return this.rootStore.preferences.pinnedFeeds.includes(feed.uri)
}
async movePinnedFeed(item: CustomFeedModel, direction: 'up' | 'down') {
const pinned = this.rootStore.preferences.pinnedFeeds.slice()
const index = pinned.indexOf(item.uri)
if (index === -1) {
return
}
if (direction === 'up' && index !== 0) {
const temp = pinned[index]
pinned[index] = pinned[index - 1]
pinned[index - 1] = temp
} else if (direction === 'down' && index < pinned.length - 1) {
const temp = pinned[index]
pinned[index] = pinned[index + 1]
pinned[index + 1] = temp
}
await this.rootStore.preferences.setPinnedFeeds(pinned)
}
// state transitions
// =
@ -219,23 +169,7 @@ export class SavedFeedsModel {
this.hasLoaded = true
this.error = cleanError(err)
if (err) {
this.rootStore.log.error('Failed to fetch user followers', err)
}
}
// helper functions
// =
_replaceAll(res: GetSavedFeeds.Response) {
this.feeds = []
this._appendAll(res)
}
_appendAll(res: GetSavedFeeds.Response) {
this.loadMoreCursor = res.data.cursor
this.hasMore = !!this.loadMoreCursor
for (const f of res.data.feeds) {
this.feeds.push(new CustomFeedModel(this.rootStore, f))
this.rootStore.log.error('Failed to fetch user feeds', err)
}
}
}

22
src/view/com/feeds/CustomFeed.tsx
View File

@ -39,20 +39,30 @@ export const CustomFeed = observer(
const pal = usePalette('default')
const navigation = useNavigation<NavigationProp>()
const onToggleSaved = React.useCallback(() => {
const onToggleSaved = React.useCallback(async () => {
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')
onPressConfirm: async () => {
try {
await store.me.savedFeeds.unsave(item)
Toast.show('Removed from my feeds')
} catch (e) {
Toast.show('There was an issue contacting your server')
store.log.error('Failed to unsave feed', {e})
}
},
})
} else {
store.me.savedFeeds.save(item)
Toast.show('Added to my feeds')
try {
await store.me.savedFeeds.save(item)
Toast.show('Added to my feeds')
} catch (e) {
Toast.show('There was an issue contacting your server')
store.log.error('Failed to save feed', {e})
}
}
}, [store, item])

6
src/view/com/feeds/SavedFeeds.tsx
View File

@ -29,6 +29,10 @@ export const SavedFeeds = observer(
}
}, [store, isPageFocused])
const onRefresh = useCallback(() => {
store.me.savedFeeds.refresh()
}, [store])
const renderListEmptyComponent = useCallback(() => {
return (
<View
@ -73,7 +77,7 @@ export const SavedFeeds = observer(
refreshControl={
<RefreshControl
refreshing={store.me.savedFeeds.isRefreshing}
onRefresh={() => store.me.savedFeeds.refresh()}
onRefresh={onRefresh}
tintColor={pal.colors.text}
titleColor={pal.colors.text}
progressViewOffset={headerOffset}

99
src/view/com/pager/Pager.web.tsx
View File

@ -1,12 +1,9 @@
import React from 'react'
import {Animated, View} from 'react-native'
import {useAnimatedValue} from 'lib/hooks/useAnimatedValue'
import {View} from 'react-native'
import {s} from 'lib/styles'
export interface RenderTabBarFnProps {
selectedPage: number
position: Animated.Value
offset: Animated.Value
onSelect?: (index: number) => void
}
export type RenderTabBarFn = (props: RenderTabBarFnProps) => JSX.Element
@ -17,53 +14,51 @@ interface Props {
renderTabBar: RenderTabBarFn
onPageSelected?: (index: number) => void
}
export const Pager = ({
children,
tabBarPosition = 'top',
initialPage = 0,
renderTabBar,
onPageSelected,
}: React.PropsWithChildren<Props>) => {
const [selectedPage, setSelectedPage] = React.useState(initialPage)
const position = useAnimatedValue(0)
const offset = useAnimatedValue(0)
export const Pager = React.forwardRef(
(
{
children,
tabBarPosition = 'top',
initialPage = 0,
renderTabBar,
onPageSelected,
}: React.PropsWithChildren<Props>,
ref,
) => {
const [selectedPage, setSelectedPage] = React.useState(initialPage)
const onTabBarSelect = React.useCallback(
(index: number) => {
setSelectedPage(index)
onPageSelected?.(index)
Animated.timing(position, {
toValue: index,
duration: 200,
useNativeDriver: true,
}).start()
},
[setSelectedPage, onPageSelected, position],
)
React.useImperativeHandle(ref, () => ({
setPage: (index: number) => setSelectedPage(index),
}))
return (
<View>
{tabBarPosition === 'top' &&
renderTabBar({
selectedPage,
position,
offset,
onSelect: onTabBarSelect,
})}
{React.Children.map(children, (child, i) => (
<View
style={selectedPage === i ? undefined : s.hidden}
key={`page-${i}`}>
{child}
</View>
))}
{tabBarPosition === 'bottom' &&
renderTabBar({
selectedPage,
position,
offset,
onSelect: onTabBarSelect,
})}
</View>
)
}
const onTabBarSelect = React.useCallback(
(index: number) => {
setSelectedPage(index)
onPageSelected?.(index)
},
[setSelectedPage, onPageSelected],
)
return (
<View>
{tabBarPosition === 'top' &&
renderTabBar({
selectedPage,
onSelect: onTabBarSelect,
})}
{React.Children.map(children, (child, i) => (
<View
style={selectedPage === i ? undefined : s.hidden}
key={`page-${i}`}>
{child}
</View>
))}
{tabBarPosition === 'bottom' &&
renderTabBar({
selectedPage,
onSelect: onTabBarSelect,
})}
</View>
)
},
)

16
src/view/screens/Home.tsx
View File

@ -4,6 +4,7 @@ import {useFocusEffect, useIsFocused} from '@react-navigation/native'
import {AppBskyFeedGetFeed as GetCustomFeed} from '@atproto/api'
import {observer} from 'mobx-react-lite'
import useAppState from 'react-native-appstate-hook'
import isEqual from 'lodash.isequal'
import {NativeStackScreenProps, HomeTabNavigatorParams} from 'lib/routes/types'
import {PostsFeedModel} from 'state/models/feeds/posts'
import {withAuthRequired} from 'view/com/auth/withAuthRequired'
@ -44,15 +45,26 @@ export const HomeScreen = withAuthRequired(
}, [store])
React.useEffect(() => {
const {pinned} = store.me.savedFeeds
if (
isEqual(
pinned.map(p => p.uri),
customFeeds.map(f => (f.params as GetCustomFeed.QueryParams).feed),
)
) {
// no changes
return
}
const feeds = []
for (const feed of store.me.savedFeeds.pinned) {
for (const feed of pinned) {
const model = new PostsFeedModel(store, 'custom', {feed: feed.uri})
model.setup()
feeds.push(model)
}
pagerRef.current?.setPage(0)
setCustomFeeds(feeds)
}, [store, store.me.savedFeeds.pinned, setCustomFeeds])
}, [store, store.me.savedFeeds.pinned, customFeeds, setCustomFeeds])
React.useEffect(() => {
// refresh whats hot when lang preferences change

84
src/view/screens/SavedFeeds.tsx
View File

@ -27,26 +27,26 @@ import DraggableFlatList, {
import {CustomFeed} from 'view/com/feeds/CustomFeed'
import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
import {CustomFeedModel} from 'state/models/feeds/custom-feed'
import * as Toast from 'view/com/util/Toast'
type Props = NativeStackScreenProps<CommonNavigatorParams, 'SavedFeeds'>
export const SavedFeeds = withAuthRequired(
observer(({}: Props) => {
// hooks for global items
const pal = usePalette('default')
const rootStore = useStores()
const store = useStores()
const {screen} = useAnalytics()
// hooks for local
const savedFeeds = useMemo(() => rootStore.me.savedFeeds, [rootStore])
const savedFeeds = useMemo(() => store.me.savedFeeds, [store])
useFocusEffect(
useCallback(() => {
screen('SavedFeeds')
rootStore.shell.setMinimalShellMode(false)
store.shell.setMinimalShellMode(false)
savedFeeds.refresh()
}, [screen, rootStore, savedFeeds]),
}, [screen, store, savedFeeds]),
)
const _ListEmptyComponent = () => {
const renderListEmptyComponent = useCallback(() => {
return (
<View
style={[
@ -56,19 +56,33 @@ export const SavedFeeds = withAuthRequired(
styles.empty,
]}>
<Text type="lg" style={[pal.text]}>
You don't have any pinned feeds. To pin a feed, go back to the Saved
Feeds screen and click the pin icon!
You don't have any saved feeds.
</Text>
</View>
)
}
const _ListFooterComponent = () => {
}, [pal])
const renderListFooterComponent = useCallback(() => {
return (
<View style={styles.footer}>
{savedFeeds.isLoading && <ActivityIndicator />}
</View>
)
}
}, [savedFeeds])
const onRefresh = useCallback(() => savedFeeds.refresh(), [savedFeeds])
const onDragEnd = useCallback(
async ({data}) => {
try {
await savedFeeds.reorderPinnedFeeds(data)
} catch (e) {
Toast.show('There was an issue contacting the server')
store.log.error('Failed to save pinned feed order', {e})
}
},
[savedFeeds, store],
)
return (
<CenteredView
@ -90,17 +104,17 @@ export const SavedFeeds = withAuthRequired(
refreshControl={
<RefreshControl
refreshing={savedFeeds.isRefreshing}
onRefresh={() => savedFeeds.refresh()}
onRefresh={onRefresh}
tintColor={pal.colors.text}
titleColor={pal.colors.text}
/>
}
renderItem={({item, drag}) => <ListItem item={item} drag={drag} />}
initialNumToRender={10}
ListFooterComponent={_ListFooterComponent}
ListEmptyComponent={_ListEmptyComponent}
ListFooterComponent={renderListFooterComponent}
ListEmptyComponent={renderListEmptyComponent}
extraData={savedFeeds.isLoading}
onDragEnd={({data}) => savedFeeds.reorderPinnedFeeds(data)}
onDragEnd={onDragEnd}
/>
</CenteredView>
)
@ -110,13 +124,35 @@ export const SavedFeeds = withAuthRequired(
const ListItem = observer(
({item, drag}: {item: CustomFeedModel; drag: () => void}) => {
const pal = usePalette('default')
const rootStore = useStores()
const savedFeeds = useMemo(() => rootStore.me.savedFeeds, [rootStore])
const store = useStores()
const savedFeeds = useMemo(() => store.me.savedFeeds, [store])
const isPinned = savedFeeds.isPinned(item)
const onTogglePinned = useCallback(
() => savedFeeds.togglePinnedFeed(item),
[savedFeeds, item],
() =>
savedFeeds.togglePinnedFeed(item).catch(e => {
Toast.show('There was an issue contacting the server')
store.log.error('Failed to toggle pinned feed', {e})
}),
[savedFeeds, item, store],
)
const onPressUp = useCallback(
() =>
savedFeeds.movePinnedFeed(item, 'up').catch(e => {
Toast.show('There was an issue contacting the server')
store.log.error('Failed to set pinned feed order', {e})
}),
[store, savedFeeds, item],
)
const onPressDown = useCallback(
() =>
savedFeeds.movePinnedFeed(item, 'down').catch(e => {
Toast.show('There was an issue contacting the server')
store.log.error('Failed to set pinned feed order', {e})
}),
[store, savedFeeds, item],
)
return (
<ScaleDecorator>
<ShadowDecorator>
@ -128,9 +164,7 @@ const ListItem = observer(
<View style={styles.webArrowButtonsContainer}>
<TouchableOpacity
accessibilityRole="button"
onPress={() => {
savedFeeds.movePinnedItem(item, 'up')
}}>
onPress={onPressUp}>
<FontAwesomeIcon
icon="arrow-up"
size={12}
@ -139,9 +173,7 @@ const ListItem = observer(
</TouchableOpacity>
<TouchableOpacity
accessibilityRole="button"
onPress={() => {
savedFeeds.movePinnedItem(item, 'down')
}}>
onPress={onPressDown}>
<FontAwesomeIcon
icon="arrow-down"
size={12}