acetheking987/bsky-social-app
1
0
Fork 0
Code Issues Actions Packages Projects Releases 1 Wiki Activity

Swap data source for saved feeds cards

Browse Source
This commit is contained in:
Eric Bailey
2024-06-25 16:45:12 -05:00
parent b47d03a03f
commit 679974ffc4
2 changed files with 132 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/state/queries/feed.ts
+15
View File
@@ -482,16 +482,19 @@ export function usePinnedFeedsInfos() {
export type SavedFeedItem =
| {
type: 'feed'
key: string
config: AppBskyActorDefs.SavedFeed
view: AppBskyFeedDefs.GeneratorView
}
| {
type: 'list'
key: string
config: AppBskyActorDefs.SavedFeed
view: AppBskyGraphDefs.ListView
}
| {
type: 'timeline'
key: string
config: AppBskyActorDefs.SavedFeed
view: undefined
}
@@ -511,6 +514,10 @@ export function useSavedFeeds() {
previousData || {
// The likely count before we try to resolve them.
count: savedItems.length,
counts: {
pinned: savedItems.filter(f => f.pinned).length,
unpinned: savedItems.filter(f => !f.pinned).length,
},
feeds: [],
}
)
@@ -557,11 +564,13 @@ export function useSavedFeeds() {
precacheList(queryClient, list)
})
let counter = 0
const result: SavedFeedItem[] = []
for (let savedItem of savedItems) {
if (savedItem.type === 'timeline') {
result.push({
type: 'timeline',
key: ['timeline', counter++].join('-'),
config: savedItem,
view: undefined,
})
@@ -570,6 +579,7 @@ export function useSavedFeeds() {
if (resolvedFeed) {
result.push({
type: 'feed',
key: [resolvedFeed.uri, counter++].join('-'),
config: savedItem,
view: resolvedFeed,
})
@@ -579,6 +589,7 @@ export function useSavedFeeds() {
if (resolvedList) {
result.push({
type: 'list',
key: [resolvedList.uri, counter++].join('-'),
config: savedItem,
view: resolvedList,
})
@@ -589,6 +600,10 @@ export function useSavedFeeds() {
return {
// By this point we know the real count.
count: result.length,
counts: {
pinned: result.filter(f => f.config.pinned).length,
unpinned: result.filter(f => !f.config.pinned).length,
},
feeds: result,
}
},
src/view/screens/SavedFeeds.tsx
+117 -69
View File
@@ -1,5 +1,5 @@
import React from 'react'
import {ActivityIndicator, Pressable, StyleSheet, View} from 'react-native'
import {Pressable, StyleSheet, View} from 'react-native'
import {AppBskyActorDefs} from '@atproto/api'
import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
import {msg, Trans} from '@lingui/macro'
@@ -9,12 +9,12 @@ import {NativeStackScreenProps} from '@react-navigation/native-stack'
import {track} from '#/lib/analytics/analytics'
import {logger} from '#/logger'
import {SavedFeedItem, useSavedFeeds} from '#/state/queries/feed'
import {
useOverwriteSavedFeedsMutation,
usePreferencesQuery,
useUpdateSavedFeedsMutation,
} from '#/state/queries/preferences'
import {UsePreferencesQueryResponse} from '#/state/queries/preferences/types'
import {useSetMinimalShellMode} from '#/state/shell'
import {useAnalytics} from 'lib/analytics/analytics'
import {useHaptics} from 'lib/haptics'
@@ -31,6 +31,7 @@ import {CenteredView, ScrollView} from 'view/com/util/Views'
import {NoFollowingFeed} from '#/screens/Feeds/NoFollowingFeed'
import {NoSavedFeedsOfAnyType} from '#/screens/Feeds/NoSavedFeedsOfAnyType'
import {atoms as a, useTheme} from '#/alf'
import * as FeedCard from '#/components/FeedCard'
import {FilterTimeline_Stroke2_Corner0_Rounded as FilterTimeline} from '#/components/icons/FilterTimeline'
import hairlineWidth = StyleSheet.hairlineWidth
@@ -49,17 +50,23 @@ const HITSLOP_BOTTOM = {
type Props = NativeStackScreenProps<CommonNavigatorParams, 'SavedFeeds'>
export function SavedFeeds({}: Props) {
const t = useTheme()
const pal = usePalette('default')
const {_} = useLingui()
const {isMobile, isTabletOrDesktop} = useWebMediaQueries()
const {screen} = useAnalytics()
const setMinimalShellMode = useSetMinimalShellMode()
const {data: preferences} = usePreferencesQuery()
const {
data: savedFeeds,
isPlaceholderData: isSavedFeedsPlaceholder,
// error: savedFeedsError, // TODO
} = useSavedFeeds()
const {
mutateAsync: overwriteSavedFeeds,
variables: optimisticSavedFeedsResponse,
reset: resetSaveFeedsMutationState,
error: savedFeedsError,
error: writeSavedFeedsError,
} = useOverwriteSavedFeedsMutation()
/*
@@ -67,7 +74,7 @@ export function SavedFeeds({}: Props) {
* data
*/
const currentFeeds =
optimisticSavedFeedsResponse && !savedFeedsError
optimisticSavedFeedsResponse && !writeSavedFeedsError
? optimisticSavedFeedsResponse
: preferences?.savedFeeds || []
const pinnedFeeds = currentFeeds.filter(f => f.pinned)
@@ -76,6 +83,13 @@ export function SavedFeeds({}: Props) {
const noFollowingFeed =
currentFeeds.every(f => f.type !== 'timeline') && !noSavedFeedsOfAnyType
const isSavedFeedsLoading =
isSavedFeedsPlaceholder && !savedFeeds?.feeds.length
const numPinnedFeedsPlaceholders = savedFeeds ? savedFeeds.counts.pinned : 4
const numUnpinnedFeedsPlaceholders = savedFeeds
? savedFeeds.counts.unpinned
: 4
useFocusEffect(
React.useCallback(() => {
screen('SavedFeeds')
@@ -104,34 +118,52 @@ export function SavedFeeds({}: Props) {
</Text>
</View>
{preferences ? (
!pinnedFeeds.length ? (
<View
style={[
pal.border,
isMobile && s.flex1,
pal.viewLight,
styles.empty,
]}>
<Text type="lg" style={[pal.text]}>
<Trans>You don't have any pinned feeds.</Trans>
</Text>
</View>
) : (
pinnedFeeds.map(f => (
<ListItem
key={f.id}
feed={f}
isPinned
overwriteSavedFeeds={overwriteSavedFeeds}
resetSaveFeedsMutationState={resetSaveFeedsMutationState}
currentFeeds={currentFeeds}
preferences={preferences}
/>
{isSavedFeedsLoading ? (
Array(numPinnedFeedsPlaceholders)
.fill(0)
.map((_, i) => (
<View
key={i}
style={[
a.px_lg,
a.py_md,
a.border_b,
t.atoms.border_contrast_low,
]}>
<FeedCard.Header>
<FeedCard.AvatarPlaceholder size={36} />
<FeedCard.TitleAndBylinePlaceholder creator />
</FeedCard.Header>
</View>
))
)
) : (
<ActivityIndicator style={{marginTop: 20}} />
<>
{savedFeeds && savedFeeds.feeds.length ? (
savedFeeds.feeds
.filter(f => f.config.pinned)
.map(f => (
<ListItem
key={f.key}
feed={f}
overwriteSavedFeeds={overwriteSavedFeeds}
resetSaveFeedsMutationState={resetSaveFeedsMutationState}
currentFeeds={currentFeeds}
/>
))
) : (
<View
style={[
pal.border,
isMobile && s.flex1,
pal.viewLight,
styles.empty,
]}>
<Text type="lg" style={[pal.text]}>
<Trans>You don't have any pinned feeds.</Trans>
</Text>
</View>
)}
</>
)}
{noFollowingFeed && (
@@ -145,34 +177,53 @@ export function SavedFeeds({}: Props) {
<Trans>Saved Feeds</Trans>
</Text>
</View>
{preferences ? (
!unpinnedFeeds.length ? (
<View
style={[
pal.border,
isMobile && s.flex1,
pal.viewLight,
styles.empty,
]}>
<Text type="lg" style={[pal.text]}>
<Trans>You don't have any saved feeds.</Trans>
</Text>
</View>
) : (
unpinnedFeeds.map(f => (
<ListItem
key={f.id}
feed={f}
isPinned={false}
overwriteSavedFeeds={overwriteSavedFeeds}
resetSaveFeedsMutationState={resetSaveFeedsMutationState}
currentFeeds={currentFeeds}
preferences={preferences}
/>
{isSavedFeedsLoading ? (
Array(numUnpinnedFeedsPlaceholders)
.fill(0)
.map((_, i) => (
<View
key={i}
style={[
a.px_lg,
a.py_md,
a.border_b,
t.atoms.border_contrast_low,
]}>
<FeedCard.Header>
<FeedCard.AvatarPlaceholder size={36} />
<FeedCard.TitleAndBylinePlaceholder creator />
</FeedCard.Header>
</View>
))
)
) : (
<ActivityIndicator style={{marginTop: 20}} />
<>
{savedFeeds && savedFeeds.feeds.length ? (
savedFeeds.feeds
.filter(f => !f.config.pinned)
.map(f => (
<ListItem
key={f.key}
feed={f}
overwriteSavedFeeds={overwriteSavedFeeds}
resetSaveFeedsMutationState={resetSaveFeedsMutationState}
currentFeeds={currentFeeds}
/>
))
) : (
<View
style={[
pal.border,
isMobile && s.flex1,
pal.viewLight,
styles.empty,
]}>
<Text type="lg" style={[pal.text]}>
<Trans>You don't have any saved feeds.</Trans>
</Text>
</View>
)}
</>
)}
<View style={styles.footerText}>
@@ -198,13 +249,11 @@ export function SavedFeeds({}: Props) {
function ListItem({
feed,
isPinned,
currentFeeds,
overwriteSavedFeeds,
resetSaveFeedsMutationState,
}: {
feed: AppBskyActorDefs.SavedFeed
isPinned: boolean
feed: SavedFeedItem
currentFeeds: AppBskyActorDefs.SavedFeed[]
overwriteSavedFeeds: ReturnType<
typeof useOverwriteSavedFeedsMutation
@@ -212,14 +261,13 @@ function ListItem({
resetSaveFeedsMutationState: ReturnType<
typeof useOverwriteSavedFeedsMutation
>['reset']
preferences: UsePreferencesQueryResponse
}) {
const pal = usePalette('default')
const {_} = useLingui()
const playHaptic = useHaptics()
const {isPending: isUpdatePending, mutateAsync: updateSavedFeeds} =
useUpdateSavedFeedsMutation()
const feedUri = feed.value
const isPinned = feed.config.pinned
const onTogglePinned = React.useCallback(async () => {
playHaptic()
@@ -229,8 +277,8 @@ function ListItem({
await updateSavedFeeds([
{
...feed,
pinned: !feed.pinned,
...feed.config,
pinned: !feed.config.pinned,
},
])
} catch (e) {
@@ -244,7 +292,7 @@ function ListItem({
const nextFeeds = currentFeeds.slice()
const ids = currentFeeds.map(f => f.id)
const index = ids.indexOf(feed.id)
const index = ids.indexOf(feed.config.id)
const nextIndex = index - 1
if (index === -1 || index === 0) return
@@ -256,7 +304,7 @@ function ListItem({
try {
await overwriteSavedFeeds(nextFeeds)
track('CustomFeed:Reorder', {
uri: feed.value,
uri: feed.config.value,
index: nextIndex,
})
} catch (e) {
@@ -270,7 +318,7 @@ function ListItem({
const nextFeeds = currentFeeds.slice()
const ids = currentFeeds.map(f => f.id)
const index = ids.indexOf(feed.id)
const index = ids.indexOf(feed.config.id)
const nextIndex = index + 1
if (index === -1 || index >= nextFeeds.length - 1) return
@@ -282,7 +330,7 @@ function ListItem({
try {
await overwriteSavedFeeds(nextFeeds)
track('CustomFeed:Reorder', {
uri: feed.value,
uri: feed.config.value,
index: nextIndex,
})
} catch (e) {
@@ -297,8 +345,8 @@ function ListItem({
<FollowingFeedCard />
) : (
<FeedSourceCard
key={feedUri}
feedUri={feedUri}
key={feed.view.uri}
feedUri={feed.view.uri}
style={[isPinned && {paddingRight: 8}]}
showMinimalPlaceholder
showSaveBtn={!isPinned}