Lists updates: curate lists and blocklists (#1689)

* Add lists screen

* Update Lists screen and List create/edit modal to support curate lists

* Rework the ProfileList screen and add curatelist support

* More ProfileList progress

* Update list modals

* Rename mutelists to modlists

* Layout updates/fixes

* More layout fixes

* Modal fixes

* List list screen updates

* Update feed page to give more info

* Layout fixes to ListAddUser modal

* Layout fixes to FlatList and Feed on desktop

* Layout fix to LoadLatestBtn on Web

* Handle did resolution before showing the ProfileList screen

* Rename the CustomFeed routes to ProfileFeed for consistency

* Fix layout issues with the pager and feeds

* Factor out some common code

* Fix UIs for mobile

* Fix user list rendering

* Fix: dont bubble custom feed errors in the merge feed

* Refactor feed models to reduce usage of the SavedFeeds model

* Replace CustomFeedModel with FeedSourceModel which abstracts feed-generators and lists

* Add the ability to pin lists

* Add pinned lists to mobile

* Remove dead code

* Rework the ProfileScreenHeader to create more real-estate for action buttons

* Improve layout behavior on web mobile breakpoints

* Refactor feed & list pages to use new Tabs layout component

* Refactor to ProfileSubpageHeader

* Implement modlist block and mute

* Switch to new api and just modify state on modlist actions

* Fix some UI overflows

* Fix: dont show edit buttons on lists you dont own

* Fix alignment issue on long titles

* Improve loading and error states for feeds & lists

* Update list dropdown icons for ios

* Fetch feed display names in the mergefeed

* Improve rendering off offline feeds in the feed-listing page

* Update Feeds listing UI to react to changes in saved/pinned state

* Refresh list and feed on posts tab press

* Fix pinned feed ordering UI

* Fixes to list pinning

* Remove view=simple qp

* Add list to feed tuners

* Render richtext

* Add list href

* Add 'view avatar'

* Remove unused import

* Fix missing import

* Correctly reflect block by list state

* Replace the <Tabs> component with the more effective <PagerWithHeader> component

* Improve the responsiveness of the PagerWithHeader

* Fix visual jank in the feed loading state

* Improve performance of the PagerWithHeader

* Fix a case that would cause the header to animate too aggressively

* Add the ability to scroll to top by tapping the selected tab

* Fix unit test runner

* Update modlists test

* Add curatelist tests

* Fix: remove link behavior in ListAddUser modal

* Fix some layout jank in the PagerWithHeader on iOS

* Simplify ListItems header rendering

* Wait for the appview to recognize the list before proceeding with list creation

* Fix glitch in the onPageSelecting index of the Pager

* Fix until()

* Copy fix

Co-authored-by: Eric Bailey <git@esb.lol>

---------

Co-authored-by: Eric Bailey <git@esb.lol>
This commit is contained in:
Paul Frazee 2023-11-01 16:15:40 -07:00 committed by GitHub
parent f9944b55e2
commit f57a8cf8ba
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
87 changed files with 4090 additions and 1988 deletions

View file

@ -2,7 +2,7 @@ import {makeAutoObservable, runInAction} from 'mobx'
import {RootStoreModel} from '../root-store'
import {bundleAsync} from 'lib/async/bundle'
import {cleanError} from 'lib/strings/errors'
import {CustomFeedModel} from '../feeds/custom-feed'
import {FeedSourceModel} from '../content/feed-source'
import {track} from 'lib/analytics/analytics'
export class SavedFeedsModel {
@ -13,7 +13,7 @@ export class SavedFeedsModel {
error = ''
// data
_feedModelCache: Record<string, CustomFeedModel> = {}
all: FeedSourceModel[] = []
constructor(public rootStore: RootStoreModel) {
makeAutoObservable(
@ -38,20 +38,11 @@ export class SavedFeedsModel {
}
get pinned() {
return this.rootStore.preferences.pinnedFeeds
.map(uri => this._feedModelCache[uri] as CustomFeedModel)
.filter(Boolean)
return this.all.filter(feed => feed.isPinned)
}
get unpinned() {
return this.rootStore.preferences.savedFeeds
.filter(uri => !this.isPinned(uri))
.map(uri => this._feedModelCache[uri] as CustomFeedModel)
.filter(Boolean)
}
get all() {
return [...this.pinned, ...this.unpinned]
return this.all.filter(feed => !feed.isPinned)
}
get pinnedFeedNames() {
@ -61,121 +52,39 @@ export class SavedFeedsModel {
// public api
// =
/**
* Syncs the cached models against the current state
* - Should only be called by the preferences model after syncing state
*/
updateCache = bundleAsync(async (clearCache?: boolean) => {
let newFeedModels: Record<string, CustomFeedModel> = {}
if (!clearCache) {
newFeedModels = {...this._feedModelCache}
}
// collect the feed URIs that havent been synced yet
const neededFeedUris = []
for (const feedUri of this.rootStore.preferences.savedFeeds) {
if (!(feedUri in newFeedModels)) {
neededFeedUris.push(feedUri)
}
}
// early exit if no feeds need to be fetched
if (!neededFeedUris.length || neededFeedUris.length === 0) {
return
}
// fetch the missing models
try {
for (let i = 0; i < neededFeedUris.length; i += 25) {
const res = await this.rootStore.agent.app.bsky.feed.getFeedGenerators({
feeds: neededFeedUris.slice(i, 25),
})
for (const feedInfo of res.data.feeds) {
newFeedModels[feedInfo.uri] = new CustomFeedModel(
this.rootStore,
feedInfo,
)
}
}
} catch (error) {
console.error('Failed to fetch feed models', error)
this.rootStore.log.error('Failed to fetch feed models', error)
}
// merge into the cache
runInAction(() => {
this._feedModelCache = newFeedModels
})
})
/**
* Refresh the preferences then reload all feed infos
*/
refresh = bundleAsync(async () => {
this._xLoading(true)
try {
await this.rootStore.preferences.sync({clearCache: true})
await this.rootStore.preferences.sync()
const uris = dedup(
this.rootStore.preferences.pinnedFeeds.concat(
this.rootStore.preferences.savedFeeds,
),
)
const feeds = uris.map(uri => new FeedSourceModel(this.rootStore, uri))
await Promise.all(feeds.map(f => f.setup()))
runInAction(() => {
this.all = feeds
this._updatePinSortOrder()
})
this._xIdle()
} catch (e: any) {
this._xIdle(e)
}
})
async save(feed: CustomFeedModel) {
try {
await feed.save()
await this.updateCache()
} catch (e: any) {
this.rootStore.log.error('Failed to save feed', e)
}
}
async unsave(feed: CustomFeedModel) {
const uri = feed.uri
try {
if (this.isPinned(feed)) {
await this.rootStore.preferences.removePinnedFeed(uri)
}
await feed.unsave()
} catch (e: any) {
this.rootStore.log.error('Failed to unsave feed', e)
}
}
async togglePinnedFeed(feed: CustomFeedModel) {
if (!this.isPinned(feed)) {
track('CustomFeed:Pin', {
name: feed.data.displayName,
uri: feed.uri,
})
return this.rootStore.preferences.addPinnedFeed(feed.uri)
} else {
track('CustomFeed:Unpin', {
name: feed.data.displayName,
uri: feed.uri,
})
return this.rootStore.preferences.removePinnedFeed(feed.uri)
}
}
async reorderPinnedFeeds(feeds: CustomFeedModel[]) {
return this.rootStore.preferences.setSavedFeeds(
async reorderPinnedFeeds(feeds: FeedSourceModel[]) {
this._updatePinSortOrder(feeds.map(f => f.uri))
await this.rootStore.preferences.setSavedFeeds(
this.rootStore.preferences.savedFeeds,
feeds.filter(feed => this.isPinned(feed)).map(feed => feed.uri),
feeds.filter(feed => feed.isPinned).map(feed => feed.uri),
)
}
isPinned(feedOrUri: CustomFeedModel | string) {
let uri: string
if (typeof feedOrUri === 'string') {
uri = feedOrUri
} else {
uri = feedOrUri.uri
}
return this.rootStore.preferences.pinnedFeeds.includes(uri)
}
async movePinnedFeed(item: CustomFeedModel, direction: 'up' | 'down') {
async movePinnedFeed(item: FeedSourceModel, direction: 'up' | 'down') {
const pinned = this.rootStore.preferences.pinnedFeeds.slice()
const index = pinned.indexOf(item.uri)
if (index === -1) {
@ -194,8 +103,9 @@ export class SavedFeedsModel {
this.rootStore.preferences.savedFeeds,
pinned,
)
this._updatePinSortOrder()
track('CustomFeed:Reorder', {
name: item.data.displayName,
name: item.displayName,
uri: item.uri,
index: pinned.indexOf(item.uri),
})
@ -219,4 +129,20 @@ export class SavedFeedsModel {
this.rootStore.log.error('Failed to fetch user feeds', err)
}
}
// helpers
// =
_updatePinSortOrder(order?: string[]) {
order ??= this.rootStore.preferences.pinnedFeeds.concat(
this.rootStore.preferences.savedFeeds,
)
this.all.sort((a, b) => {
return order!.indexOf(a.uri) - order!.indexOf(b.uri)
})
}
}
function dedup(strings: string[]): string[] {
return Array.from(new Set(strings))
}