[^/]+)/i.test(
+ urlp.pathname,
+ )
+ } catch {}
+ }
+ return false
+}
+
export function convertBskyAppUrlIfNeeded(url: string): string {
if (isBskyAppUrl(url)) {
try {
diff --git a/src/lib/styles.ts b/src/lib/styles.ts
index 00a8638f..fb631c0b 100644
--- a/src/lib/styles.ts
+++ b/src/lib/styles.ts
@@ -1,4 +1,4 @@
-import {StyleProp, StyleSheet, TextStyle} from 'react-native'
+import {Dimensions, StyleProp, StyleSheet, TextStyle} from 'react-native'
import {Theme, TypographyVariant} from './ThemeContext'
import {isMobileWeb} from 'platform/detection'
@@ -52,6 +52,7 @@ export const colors = {
green5: '#082b03',
unreadNotifBg: '#ebf6ff',
+ brandBlue: '#0066FF',
}
export const gradients = {
@@ -169,6 +170,10 @@ export const s = StyleSheet.create({
w100pct: {width: '100%'},
h100pct: {height: '100%'},
hContentRegion: isMobileWeb ? {flex: 1} : {height: '100%'},
+ window: {
+ width: Dimensions.get('window').width,
+ height: Dimensions.get('window').height,
+ },
// text align
textLeft: {textAlign: 'left'},
@@ -214,6 +219,8 @@ export const s = StyleSheet.create({
green3: {color: colors.green3},
green4: {color: colors.green4},
green5: {color: colors.green5},
+
+ brandBlue: {color: colors.brandBlue},
})
export function lh(
diff --git a/src/locale/en/community-guidelines.tsx b/src/locale/en/community-guidelines.tsx
index 5a806999..df19f5b7 100644
--- a/src/locale/en/community-guidelines.tsx
+++ b/src/locale/en/community-guidelines.tsx
@@ -4,7 +4,7 @@ import {H3, H4, P, UL, LI, A, EM, OL} from 'view/com/util/Html'
export default function () {
return (
<>
- Last Updated: 2023/04/06
+ Last Updated: April 6, 2023
The Bluesky app is built on a decentralized social networking protocol,
the AT Protocol (atproto). Atproto is an open protocol that supports
diff --git a/src/locale/en/copyright-policy.tsx b/src/locale/en/copyright-policy.tsx
index 3e995b5d..9412d005 100644
--- a/src/locale/en/copyright-policy.tsx
+++ b/src/locale/en/copyright-policy.tsx
@@ -4,7 +4,7 @@ import {H3, H4, P, UL, LI, A} from 'view/com/util/Html'
export default function () {
return (
<>
-
Last Updated: 2023/04/06
+ Last Updated: April 6, 2023
Notification of Copyright Infringement
Bluesky, PBLLC d.b.a. Bluesky (“Bluesky”) respects the
diff --git a/src/locale/en/privacy-policy.tsx b/src/locale/en/privacy-policy.tsx
index c0bae56f..ea0072ce 100644
--- a/src/locale/en/privacy-policy.tsx
+++ b/src/locale/en/privacy-policy.tsx
@@ -4,7 +4,7 @@ import {H2, H4, P, UL, LI, A} from 'view/com/util/Html'
export default function () {
return (
<>
-
Last Updated: 2023/02/02
+ Last Updated: February 2, 2023
This Privacy Policy is designed to help you understand how Bluesky,
PBLLC d.b.a. Bluesky (“Bluesky,” “we,” “us,” or “our”)
diff --git a/src/locale/en/terms-of-service.tsx b/src/locale/en/terms-of-service.tsx
index 8219cae2..30953a21 100644
--- a/src/locale/en/terms-of-service.tsx
+++ b/src/locale/en/terms-of-service.tsx
@@ -4,7 +4,7 @@ import {H4, P, OL, LI, A, STRONG, EM, UL} from 'view/com/util/Html'
export default function () {
return (
<>
-
Last Updated: 2023/04/06
+ Last Updated: April 6, 2023
Welcome to the Bluesky, PBLLC d.b.a. Bluesky (“Bluesky”,
“we”, or “us”) website located at{' '}
diff --git a/src/platform/polyfills.ts b/src/platform/polyfills.ts
index a64c2c33..d5028c29 100644
--- a/src/platform/polyfills.ts
+++ b/src/platform/polyfills.ts
@@ -23,7 +23,7 @@ globalThis.atob = (str: string): string => {
)
}
- // Adding the padding if missing, for semplicity
+ // Adding the padding if missing, for simplicity
str += '=='.slice(2 - (str.length & 3))
var bitmap,
result = '',
diff --git a/src/routes.ts b/src/routes.ts
index 571aca7f..54faba22 100644
--- a/src/routes.ts
+++ b/src/routes.ts
@@ -3,6 +3,8 @@ import {Router} from 'lib/routes/router'
export const router = new Router({
Home: '/',
Search: '/search',
+ Feeds: '/feeds',
+ DiscoverFeeds: '/search/feeds',
Notifications: '/notifications',
Settings: '/settings',
Moderation: '/moderation',
@@ -16,9 +18,12 @@ export const router = new Router({
PostThread: '/profile/:name/post/:rkey',
PostLikedBy: '/profile/:name/post/:rkey/liked-by',
PostRepostedBy: '/profile/:name/post/:rkey/reposted-by',
+ CustomFeed: '/profile/:name/feed/:rkey',
+ CustomFeedLikedBy: '/profile/:name/feed/:rkey/liked-by',
Debug: '/sys/debug',
Log: '/sys/log',
AppPasswords: '/settings/app-passwords',
+ SavedFeeds: '/settings/saved-feeds',
Support: '/support',
PrivacyPolicy: '/support/privacy',
TermsOfService: '/support/tos',
diff --git a/src/state/models/cache/image-sizes.ts b/src/state/models/cache/image-sizes.ts
index bbfb9612..c30a68f4 100644
--- a/src/state/models/cache/image-sizes.ts
+++ b/src/state/models/cache/image-sizes.ts
@@ -16,6 +16,7 @@ export class ImageSizesCache {
if (Dimensions) {
return Dimensions
}
+
const prom =
this.activeRequests.get(uri) ||
new Promise(resolve => {
diff --git a/src/state/models/content/post-thread.ts b/src/state/models/content/post-thread.ts
index 74a75d80..577b76e0 100644
--- a/src/state/models/content/post-thread.ts
+++ b/src/state/models/content/post-thread.ts
@@ -118,7 +118,7 @@ export class PostThreadItemModel {
assignTreeModels(
v: AppBskyFeedDefs.ThreadViewPost,
- higlightedPostUri: string,
+ highlightedPostUri: string,
includeParent = true,
includeChildren = true,
) {
@@ -130,7 +130,12 @@ export class PostThreadItemModel {
parentModel._showChildReplyLine = true
if (v.parent.parent) {
parentModel._showParentReplyLine = true
- parentModel.assignTreeModels(v.parent, higlightedPostUri, true, false)
+ parentModel.assignTreeModels(
+ v.parent,
+ highlightedPostUri,
+ true,
+ false,
+ )
}
this.parent = parentModel
} else if (AppBskyFeedDefs.isNotFoundPost(v.parent)) {
@@ -147,10 +152,10 @@ export class PostThreadItemModel {
const itemModel = new PostThreadItemModel(this.rootStore, item)
itemModel._depth = this._depth + 1
itemModel._showParentReplyLine =
- itemModel.parentUri !== higlightedPostUri && replies.length === 0
+ itemModel.parentUri !== highlightedPostUri && replies.length === 0
if (item.replies?.length) {
itemModel._showChildReplyLine = true
- itemModel.assignTreeModels(item, higlightedPostUri, false, true)
+ itemModel.assignTreeModels(item, highlightedPostUri, false, true)
}
replies.push(itemModel)
} else if (AppBskyFeedDefs.isNotFoundPost(item)) {
diff --git a/src/state/models/discovery/feeds.ts b/src/state/models/discovery/feeds.ts
new file mode 100644
index 00000000..26a8d650
--- /dev/null
+++ b/src/state/models/discovery/feeds.ts
@@ -0,0 +1,97 @@
+import {makeAutoObservable} from 'mobx'
+import {AppBskyUnspeccedGetPopularFeedGenerators} 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'
+
+export class FeedsDiscoveryModel {
+ // state
+ isLoading = false
+ isRefreshing = false
+ hasLoaded = false
+ error = ''
+
+ // data
+ feeds: CustomFeedModel[] = []
+
+ constructor(public rootStore: RootStoreModel) {
+ makeAutoObservable(
+ this,
+ {
+ rootStore: false,
+ },
+ {autoBind: true},
+ )
+ }
+
+ get hasMore() {
+ return false
+ }
+
+ get hasContent() {
+ return this.feeds.length > 0
+ }
+
+ get hasError() {
+ return this.error !== ''
+ }
+
+ get isEmpty() {
+ return this.hasLoaded && !this.hasContent
+ }
+
+ // public api
+ // =
+
+ refresh = bundleAsync(async () => {
+ this._xLoading()
+ try {
+ const res =
+ await this.rootStore.agent.app.bsky.unspecced.getPopularFeedGenerators(
+ {},
+ )
+ this._replaceAll(res)
+ this._xIdle()
+ } catch (e: any) {
+ this._xIdle(e)
+ }
+ })
+
+ clear() {
+ this.isLoading = false
+ this.isRefreshing = false
+ this.hasLoaded = false
+ this.error = ''
+ this.feeds = []
+ }
+
+ // state transitions
+ // =
+
+ _xLoading() {
+ this.isLoading = true
+ this.isRefreshing = true
+ this.error = ''
+ }
+
+ _xIdle(err?: any) {
+ this.isLoading = false
+ this.isRefreshing = false
+ this.hasLoaded = true
+ this.error = cleanError(err)
+ if (err) {
+ this.rootStore.log.error('Failed to fetch popular feeds', err)
+ }
+ }
+
+ // helper functions
+ // =
+
+ _replaceAll(res: AppBskyUnspeccedGetPopularFeedGenerators.Response) {
+ this.feeds = []
+ for (const f of res.data.feeds) {
+ this.feeds.push(new CustomFeedModel(this.rootStore, f))
+ }
+ }
+}
diff --git a/src/state/models/feeds/custom-feed.ts b/src/state/models/feeds/custom-feed.ts
new file mode 100644
index 00000000..8fc1eb1e
--- /dev/null
+++ b/src/state/models/feeds/custom-feed.ts
@@ -0,0 +1,120 @@
+import {AppBskyFeedDefs} from '@atproto/api'
+import {makeAutoObservable, runInAction} from 'mobx'
+import {RootStoreModel} from 'state/models/root-store'
+import {sanitizeDisplayName} from 'lib/strings/display-names'
+import {updateDataOptimistically} from 'lib/async/revertible'
+
+export class CustomFeedModel {
+ // data
+ _reactKey: string
+ data: AppBskyFeedDefs.GeneratorView
+ isOnline: boolean
+ isValid: boolean
+
+ constructor(
+ public rootStore: RootStoreModel,
+ view: AppBskyFeedDefs.GeneratorView,
+ isOnline?: boolean,
+ isValid?: boolean,
+ ) {
+ this._reactKey = view.uri
+ this.data = view
+ this.isOnline = isOnline ?? true
+ this.isValid = isValid ?? true
+ makeAutoObservable(
+ this,
+ {
+ rootStore: false,
+ },
+ {autoBind: true},
+ )
+ }
+
+ // local actions
+ // =
+
+ get uri() {
+ return this.data.uri
+ }
+
+ get displayName() {
+ if (this.data.displayName) {
+ return sanitizeDisplayName(this.data.displayName)
+ }
+ return `Feed by @${this.data.creator.handle}`
+ }
+
+ get isSaved() {
+ return this.rootStore.preferences.savedFeeds.includes(this.uri)
+ }
+
+ get isLiked() {
+ return this.data.viewer?.like
+ }
+
+ // public apis
+ // =
+
+ async save() {
+ await this.rootStore.preferences.addSavedFeed(this.uri)
+ }
+
+ async unsave() {
+ await this.rootStore.preferences.removeSavedFeed(this.uri)
+ }
+
+ async like() {
+ try {
+ await updateDataOptimistically(
+ this.data,
+ () => {
+ this.data.viewer = this.data.viewer || {}
+ this.data.viewer.like = 'pending'
+ this.data.likeCount = (this.data.likeCount || 0) + 1
+ },
+ () => this.rootStore.agent.like(this.data.uri, this.data.cid),
+ res => {
+ this.data.viewer = this.data.viewer || {}
+ this.data.viewer.like = res.uri
+ },
+ )
+ } catch (e: any) {
+ this.rootStore.log.error('Failed to like feed', e)
+ }
+ }
+
+ async unlike() {
+ if (!this.data.viewer?.like) {
+ return
+ }
+ try {
+ const likeUri = this.data.viewer.like
+ await updateDataOptimistically(
+ this.data,
+ () => {
+ this.data.viewer = this.data.viewer || {}
+ this.data.viewer.like = undefined
+ this.data.likeCount = (this.data.likeCount || 1) - 1
+ },
+ () => this.rootStore.agent.deleteLike(likeUri),
+ )
+ } catch (e: any) {
+ this.rootStore.log.error('Failed to unlike feed', e)
+ }
+ }
+
+ async reload() {
+ const res = await this.rootStore.agent.app.bsky.feed.getFeedGenerator({
+ feed: this.data.uri,
+ })
+ runInAction(() => {
+ this.data = res.data.view
+ this.isOnline = res.data.isOnline
+ this.isValid = res.data.isValid
+ })
+ }
+
+ serialize() {
+ return JSON.stringify(this.data)
+ }
+}
diff --git a/src/state/models/feeds/multi-feed.ts b/src/state/models/feeds/multi-feed.ts
new file mode 100644
index 00000000..3c13041c
--- /dev/null
+++ b/src/state/models/feeds/multi-feed.ts
@@ -0,0 +1,216 @@
+import {makeAutoObservable, runInAction} from 'mobx'
+import {AtUri} from '@atproto/api'
+import {bundleAsync} from 'lib/async/bundle'
+import {RootStoreModel} from '../root-store'
+import {CustomFeedModel} from './custom-feed'
+import {PostsFeedModel} from './posts'
+import {PostsFeedSliceModel} from './post'
+
+const FEED_PAGE_SIZE = 5
+const FEEDS_PAGE_SIZE = 3
+
+export type MultiFeedItem =
+ | {
+ _reactKey: string
+ type: 'header'
+ }
+ | {
+ _reactKey: string
+ type: 'feed-header'
+ avatar: string | undefined
+ title: string
+ }
+ | {
+ _reactKey: string
+ type: 'feed-slice'
+ slice: PostsFeedSliceModel
+ }
+ | {
+ _reactKey: string
+ type: 'feed-loading'
+ }
+ | {
+ _reactKey: string
+ type: 'feed-error'
+ error: string
+ }
+ | {
+ _reactKey: string
+ type: 'feed-footer'
+ title: string
+ uri: string
+ }
+ | {
+ _reactKey: string
+ type: 'footer'
+ }
+
+export class PostsMultiFeedModel {
+ // state
+ isLoading = false
+ isRefreshing = false
+ hasLoaded = false
+ hasMore = true
+
+ // data
+ feedInfos: CustomFeedModel[] = []
+ feeds: PostsFeedModel[] = []
+
+ constructor(public rootStore: RootStoreModel) {
+ makeAutoObservable(this, {rootStore: false}, {autoBind: true})
+ }
+
+ get hasContent() {
+ return this.feeds.length !== 0
+ }
+
+ get isEmpty() {
+ return this.hasLoaded && !this.hasContent
+ }
+
+ get items() {
+ const items: MultiFeedItem[] = [{_reactKey: '__header__', type: 'header'}]
+ for (let i = 0; i < this.feedInfos.length; i++) {
+ if (!this.feeds[i]) {
+ break
+ }
+ const feed = this.feeds[i]
+ const feedInfo = this.feedInfos[i]
+ const urip = new AtUri(feedInfo.uri)
+ items.push({
+ _reactKey: `__feed_header_${i}__`,
+ type: 'feed-header',
+ avatar: feedInfo.data.avatar,
+ title: feedInfo.displayName,
+ })
+ if (feed.isLoading) {
+ items.push({
+ _reactKey: `__feed_loading_${i}__`,
+ type: 'feed-loading',
+ })
+ } else if (feed.hasError) {
+ items.push({
+ _reactKey: `__feed_error_${i}__`,
+ type: 'feed-error',
+ error: feed.error,
+ })
+ } else {
+ for (let j = 0; j < feed.slices.length; j++) {
+ items.push({
+ _reactKey: `__feed_slice_${i}_${j}__`,
+ type: 'feed-slice',
+ slice: feed.slices[j],
+ })
+ }
+ }
+ items.push({
+ _reactKey: `__feed_footer_${i}__`,
+ type: 'feed-footer',
+ title: feedInfo.displayName,
+ uri: `/profile/${feedInfo.data.creator.did}/feed/${urip.rkey}`,
+ })
+ }
+ if (!this.hasMore) {
+ items.push({_reactKey: '__footer__', type: 'footer'})
+ }
+ return items
+ }
+
+ // public api
+ // =
+
+ /**
+ * Nuke all data
+ */
+ clear() {
+ this.rootStore.log.debug('MultiFeedModel:clear')
+ this.isLoading = false
+ this.isRefreshing = false
+ this.hasLoaded = false
+ this.hasMore = true
+ this.feeds = []
+ }
+
+ /**
+ * Register any event listeners. Returns a cleanup function.
+ */
+ registerListeners() {
+ const sub = this.rootStore.onPostDeleted(this.onPostDeleted.bind(this))
+ return () => sub.remove()
+ }
+
+ /**
+ * Reset and load
+ */
+ async refresh() {
+ this.feedInfos = this.rootStore.me.savedFeeds.all.slice() // capture current feeds
+ await this.loadMore(true)
+ }
+
+ /**
+ * Load more posts to the end of the feed
+ */
+ loadMore = bundleAsync(async (isRefreshing: boolean = false) => {
+ if (!isRefreshing && !this.hasMore) {
+ return
+ }
+ if (isRefreshing) {
+ this.isRefreshing = true // set optimistically for UI
+ this.feeds = []
+ }
+ this._xLoading(isRefreshing)
+ const start = this.feeds.length
+ const newFeeds: PostsFeedModel[] = []
+ for (
+ let i = start;
+ i < start + FEEDS_PAGE_SIZE && i < this.feedInfos.length;
+ i++
+ ) {
+ const feed = new PostsFeedModel(this.rootStore, 'custom', {
+ feed: this.feedInfos[i].uri,
+ })
+ feed.pageSize = FEED_PAGE_SIZE
+ await feed.setup()
+ newFeeds.push(feed)
+ }
+ runInAction(() => {
+ this.feeds = this.feeds.concat(newFeeds)
+ this.hasMore = this.feeds.length < this.feedInfos.length
+ })
+ this._xIdle()
+ })
+
+ /**
+ * Attempt to load more again after a failure
+ */
+ async retryLoadMore() {
+ this.hasMore = true
+ return this.loadMore()
+ }
+
+ /**
+ * Removes posts from the feed upon deletion.
+ */
+ onPostDeleted(uri: string) {
+ for (const f of this.feeds) {
+ f.onPostDeleted(uri)
+ }
+ }
+
+ // state transitions
+ // =
+
+ _xLoading(isRefreshing = false) {
+ this.isLoading = true
+ this.isRefreshing = isRefreshing
+ }
+
+ _xIdle() {
+ this.isLoading = false
+ this.isRefreshing = false
+ this.hasLoaded = true
+ }
+
+ // helper functions
+ // =
+}
diff --git a/src/state/models/feeds/notifications.ts b/src/state/models/feeds/notifications.ts
index 73424f03..5005f1d9 100644
--- a/src/state/models/feeds/notifications.ts
+++ b/src/state/models/feeds/notifications.ts
@@ -181,7 +181,7 @@ export class NotificationsFeedItemModel {
return false
}
- get additionaDataUri(): string | undefined {
+ get additionalDataUri(): string | undefined {
if (this.isReply || this.isQuote || this.isMention) {
return this.uri
} else if (this.isLike || this.isRepost) {
@@ -290,7 +290,9 @@ export class NotificationsFeedModel {
}
get hasNewLatest() {
- return this.queuedNotifications && this.queuedNotifications?.length > 0
+ return Boolean(
+ this.queuedNotifications && this.queuedNotifications?.length > 0,
+ )
}
get unreadCountLabel(): string {
@@ -490,7 +492,7 @@ export class NotificationsFeedModel {
'mostRecent',
res.data.notifications[0],
)
- const addedUri = notif.additionaDataUri
+ const addedUri = notif.additionalDataUri
if (addedUri) {
const postsRes = await this.rootStore.agent.app.bsky.feed.getPosts({
uris: [addedUri],
@@ -583,7 +585,7 @@ export class NotificationsFeedModel {
`item-${_idCounter++}`,
item,
)
- const uri = itemModel.additionaDataUri
+ const uri = itemModel.additionalDataUri
if (uri) {
const models = addedPostMap.get(uri) || []
models.push(itemModel)
diff --git a/src/state/models/feeds/post.ts b/src/state/models/feeds/post.ts
new file mode 100644
index 00000000..0c411d44
--- /dev/null
+++ b/src/state/models/feeds/post.ts
@@ -0,0 +1,265 @@
+import {makeAutoObservable} from 'mobx'
+import {AppBskyFeedDefs, AppBskyFeedPost, RichText} from '@atproto/api'
+import {RootStoreModel} from '../root-store'
+import {updateDataOptimistically} from 'lib/async/revertible'
+import {PostLabelInfo, PostModeration} from 'lib/labeling/types'
+import {FeedViewPostsSlice} from 'lib/api/feed-manip'
+import {
+ getEmbedLabels,
+ getEmbedMuted,
+ getEmbedMutedByList,
+ getEmbedBlocking,
+ getEmbedBlockedBy,
+ getPostModeration,
+ filterAccountLabels,
+ filterProfileLabels,
+ mergePostModerations,
+} from 'lib/labeling/helpers'
+
+type FeedViewPost = AppBskyFeedDefs.FeedViewPost
+type ReasonRepost = AppBskyFeedDefs.ReasonRepost
+type PostView = AppBskyFeedDefs.PostView
+
+let _idCounter = 0
+
+export class PostsFeedItemModel {
+ // ui state
+ _reactKey: string = ''
+
+ // data
+ post: PostView
+ postRecord?: AppBskyFeedPost.Record
+ reply?: FeedViewPost['reply']
+ reason?: FeedViewPost['reason']
+ richText?: RichText
+
+ constructor(
+ public rootStore: RootStoreModel,
+ reactKey: string,
+ v: FeedViewPost,
+ ) {
+ this._reactKey = reactKey
+ this.post = v.post
+ if (AppBskyFeedPost.isRecord(this.post.record)) {
+ const valid = AppBskyFeedPost.validateRecord(this.post.record)
+ if (valid.success) {
+ this.postRecord = this.post.record
+ this.richText = new RichText(this.postRecord, {cleanNewlines: true})
+ } else {
+ this.postRecord = undefined
+ this.richText = undefined
+ rootStore.log.warn(
+ 'Received an invalid app.bsky.feed.post record',
+ valid.error,
+ )
+ }
+ } else {
+ this.postRecord = undefined
+ this.richText = undefined
+ rootStore.log.warn(
+ 'app.bsky.feed.getTimeline or app.bsky.feed.getAuthorFeed served an unexpected record type',
+ this.post.record,
+ )
+ }
+ this.reply = v.reply
+ this.reason = v.reason
+ makeAutoObservable(this, {rootStore: false})
+ }
+
+ get rootUri(): string {
+ if (this.reply?.root.uri) {
+ return this.reply.root.uri
+ }
+ return this.post.uri
+ }
+
+ get isThreadMuted() {
+ return this.rootStore.mutedThreads.uris.has(this.rootUri)
+ }
+
+ get labelInfo(): PostLabelInfo {
+ return {
+ postLabels: (this.post.labels || []).concat(
+ getEmbedLabels(this.post.embed),
+ ),
+ accountLabels: filterAccountLabels(this.post.author.labels),
+ profileLabels: filterProfileLabels(this.post.author.labels),
+ isMuted:
+ this.post.author.viewer?.muted ||
+ getEmbedMuted(this.post.embed) ||
+ false,
+ mutedByList:
+ this.post.author.viewer?.mutedByList ||
+ getEmbedMutedByList(this.post.embed),
+ isBlocking:
+ !!this.post.author.viewer?.blocking ||
+ getEmbedBlocking(this.post.embed) ||
+ false,
+ isBlockedBy:
+ !!this.post.author.viewer?.blockedBy ||
+ getEmbedBlockedBy(this.post.embed) ||
+ false,
+ }
+ }
+
+ get moderation(): PostModeration {
+ return getPostModeration(this.rootStore, this.labelInfo)
+ }
+
+ copy(v: FeedViewPost) {
+ this.post = v.post
+ this.reply = v.reply
+ this.reason = v.reason
+ }
+
+ copyMetrics(v: FeedViewPost) {
+ this.post.replyCount = v.post.replyCount
+ this.post.repostCount = v.post.repostCount
+ this.post.likeCount = v.post.likeCount
+ this.post.viewer = v.post.viewer
+ }
+
+ get reasonRepost(): ReasonRepost | undefined {
+ if (this.reason?.$type === 'app.bsky.feed.defs#reasonRepost') {
+ return this.reason as ReasonRepost
+ }
+ }
+
+ async toggleLike() {
+ this.post.viewer = this.post.viewer || {}
+ if (this.post.viewer.like) {
+ const url = this.post.viewer.like
+ await updateDataOptimistically(
+ this.post,
+ () => {
+ this.post.likeCount = (this.post.likeCount || 0) - 1
+ this.post.viewer!.like = undefined
+ },
+ () => this.rootStore.agent.deleteLike(url),
+ )
+ } else {
+ await updateDataOptimistically(
+ this.post,
+ () => {
+ this.post.likeCount = (this.post.likeCount || 0) + 1
+ this.post.viewer!.like = 'pending'
+ },
+ () => this.rootStore.agent.like(this.post.uri, this.post.cid),
+ res => {
+ this.post.viewer!.like = res.uri
+ },
+ )
+ }
+ }
+
+ async toggleRepost() {
+ this.post.viewer = this.post.viewer || {}
+ if (this.post.viewer?.repost) {
+ const url = this.post.viewer.repost
+ await updateDataOptimistically(
+ this.post,
+ () => {
+ this.post.repostCount = (this.post.repostCount || 0) - 1
+ this.post.viewer!.repost = undefined
+ },
+ () => this.rootStore.agent.deleteRepost(url),
+ )
+ } else {
+ await updateDataOptimistically(
+ this.post,
+ () => {
+ this.post.repostCount = (this.post.repostCount || 0) + 1
+ this.post.viewer!.repost = 'pending'
+ },
+ () => this.rootStore.agent.repost(this.post.uri, this.post.cid),
+ res => {
+ this.post.viewer!.repost = res.uri
+ },
+ )
+ }
+ }
+
+ async toggleThreadMute() {
+ if (this.isThreadMuted) {
+ this.rootStore.mutedThreads.uris.delete(this.rootUri)
+ } else {
+ this.rootStore.mutedThreads.uris.add(this.rootUri)
+ }
+ }
+
+ async delete() {
+ await this.rootStore.agent.deletePost(this.post.uri)
+ this.rootStore.emitPostDeleted(this.post.uri)
+ }
+}
+
+export class PostsFeedSliceModel {
+ // ui state
+ _reactKey: string = ''
+
+ // data
+ items: PostsFeedItemModel[] = []
+
+ constructor(
+ public rootStore: RootStoreModel,
+ reactKey: string,
+ slice: FeedViewPostsSlice,
+ ) {
+ this._reactKey = reactKey
+ for (const item of slice.items) {
+ this.items.push(
+ new PostsFeedItemModel(rootStore, `slice-${_idCounter++}`, item),
+ )
+ }
+ makeAutoObservable(this, {rootStore: false})
+ }
+
+ get uri() {
+ if (this.isReply) {
+ return this.items[1].post.uri
+ }
+ return this.items[0].post.uri
+ }
+
+ get isThread() {
+ return (
+ this.items.length > 1 &&
+ this.items.every(
+ item => item.post.author.did === this.items[0].post.author.did,
+ )
+ )
+ }
+
+ get isReply() {
+ return this.items.length > 1 && !this.isThread
+ }
+
+ get rootItem() {
+ if (this.isReply) {
+ return this.items[1]
+ }
+ return this.items[0]
+ }
+
+ get moderation() {
+ return mergePostModerations(this.items.map(item => item.moderation))
+ }
+
+ containsUri(uri: string) {
+ return !!this.items.find(item => item.post.uri === uri)
+ }
+
+ isThreadParentAt(i: number) {
+ if (this.items.length === 1) {
+ return false
+ }
+ return i < this.items.length - 1
+ }
+
+ isThreadChildAt(i: number) {
+ if (this.items.length === 1) {
+ return false
+ }
+ return i > 0
+ }
+}
diff --git a/src/state/models/feeds/posts.ts b/src/state/models/feeds/posts.ts
index b2dffdc6..911cc630 100644
--- a/src/state/models/feeds/posts.ts
+++ b/src/state/models/feeds/posts.ts
@@ -1,11 +1,8 @@
import {makeAutoObservable, runInAction} from 'mobx'
import {
AppBskyFeedGetTimeline as GetTimeline,
- AppBskyFeedDefs,
- AppBskyFeedPost,
AppBskyFeedGetAuthorFeed as GetAuthorFeed,
- RichText,
- jsonToLex,
+ AppBskyFeedGetFeed as GetCustomFeed,
} from '@atproto/api'
import AwaitLock from 'await-lock'
import {bundleAsync} from 'lib/async/bundle'
@@ -19,269 +16,11 @@ import {
mergePosts,
} from 'lib/api/build-suggested-posts'
import {FeedTuner, FeedViewPostsSlice} from 'lib/api/feed-manip'
-import {updateDataOptimistically} from 'lib/async/revertible'
-import {PostLabelInfo, PostModeration} from 'lib/labeling/types'
-import {
- getEmbedLabels,
- getEmbedMuted,
- getEmbedMutedByList,
- getEmbedBlocking,
- getEmbedBlockedBy,
- getPostModeration,
- mergePostModerations,
- filterAccountLabels,
- filterProfileLabels,
-} from 'lib/labeling/helpers'
-
-type FeedViewPost = AppBskyFeedDefs.FeedViewPost
-type ReasonRepost = AppBskyFeedDefs.ReasonRepost
-type PostView = AppBskyFeedDefs.PostView
+import {PostsFeedSliceModel} from './post'
const PAGE_SIZE = 30
let _idCounter = 0
-export class PostsFeedItemModel {
- // ui state
- _reactKey: string = ''
-
- // data
- post: PostView
- postRecord?: AppBskyFeedPost.Record
- reply?: FeedViewPost['reply']
- reason?: FeedViewPost['reason']
- richText?: RichText
-
- constructor(
- public rootStore: RootStoreModel,
- reactKey: string,
- v: FeedViewPost,
- ) {
- this._reactKey = reactKey
- this.post = v.post
- if (AppBskyFeedPost.isRecord(this.post.record)) {
- const valid = AppBskyFeedPost.validateRecord(this.post.record)
- if (valid.success) {
- this.postRecord = this.post.record
- this.richText = new RichText(this.postRecord, {cleanNewlines: true})
- } else {
- this.postRecord = undefined
- this.richText = undefined
- rootStore.log.warn(
- 'Received an invalid app.bsky.feed.post record',
- valid.error,
- )
- }
- } else {
- this.postRecord = undefined
- this.richText = undefined
- rootStore.log.warn(
- 'app.bsky.feed.getTimeline or app.bsky.feed.getAuthorFeed served an unexpected record type',
- this.post.record,
- )
- }
- this.reply = v.reply
- this.reason = v.reason
- makeAutoObservable(this, {rootStore: false})
- }
-
- get rootUri(): string {
- if (this.reply?.root.uri) {
- return this.reply.root.uri
- }
- return this.post.uri
- }
-
- get isThreadMuted() {
- return this.rootStore.mutedThreads.uris.has(this.rootUri)
- }
-
- get labelInfo(): PostLabelInfo {
- return {
- postLabels: (this.post.labels || []).concat(
- getEmbedLabels(this.post.embed),
- ),
- accountLabels: filterAccountLabels(this.post.author.labels),
- profileLabels: filterProfileLabels(this.post.author.labels),
- isMuted:
- this.post.author.viewer?.muted ||
- getEmbedMuted(this.post.embed) ||
- false,
- mutedByList:
- this.post.author.viewer?.mutedByList ||
- getEmbedMutedByList(this.post.embed),
- isBlocking:
- !!this.post.author.viewer?.blocking ||
- getEmbedBlocking(this.post.embed) ||
- false,
- isBlockedBy:
- !!this.post.author.viewer?.blockedBy ||
- getEmbedBlockedBy(this.post.embed) ||
- false,
- }
- }
-
- get moderation(): PostModeration {
- return getPostModeration(this.rootStore, this.labelInfo)
- }
-
- copy(v: FeedViewPost) {
- this.post = v.post
- this.reply = v.reply
- this.reason = v.reason
- }
-
- copyMetrics(v: FeedViewPost) {
- this.post.replyCount = v.post.replyCount
- this.post.repostCount = v.post.repostCount
- this.post.likeCount = v.post.likeCount
- this.post.viewer = v.post.viewer
- }
-
- get reasonRepost(): ReasonRepost | undefined {
- if (this.reason?.$type === 'app.bsky.feed.defs#reasonRepost') {
- return this.reason as ReasonRepost
- }
- }
-
- async toggleLike() {
- this.post.viewer = this.post.viewer || {}
- if (this.post.viewer.like) {
- const url = this.post.viewer.like
- await updateDataOptimistically(
- this.post,
- () => {
- this.post.likeCount = (this.post.likeCount || 0) - 1
- this.post.viewer!.like = undefined
- },
- () => this.rootStore.agent.deleteLike(url),
- )
- } else {
- await updateDataOptimistically(
- this.post,
- () => {
- this.post.likeCount = (this.post.likeCount || 0) + 1
- this.post.viewer!.like = 'pending'
- },
- () => this.rootStore.agent.like(this.post.uri, this.post.cid),
- res => {
- this.post.viewer!.like = res.uri
- },
- )
- }
- }
-
- async toggleRepost() {
- this.post.viewer = this.post.viewer || {}
- if (this.post.viewer?.repost) {
- const url = this.post.viewer.repost
- await updateDataOptimistically(
- this.post,
- () => {
- this.post.repostCount = (this.post.repostCount || 0) - 1
- this.post.viewer!.repost = undefined
- },
- () => this.rootStore.agent.deleteRepost(url),
- )
- } else {
- await updateDataOptimistically(
- this.post,
- () => {
- this.post.repostCount = (this.post.repostCount || 0) + 1
- this.post.viewer!.repost = 'pending'
- },
- () => this.rootStore.agent.repost(this.post.uri, this.post.cid),
- res => {
- this.post.viewer!.repost = res.uri
- },
- )
- }
- }
-
- async toggleThreadMute() {
- if (this.isThreadMuted) {
- this.rootStore.mutedThreads.uris.delete(this.rootUri)
- } else {
- this.rootStore.mutedThreads.uris.add(this.rootUri)
- }
- }
-
- async delete() {
- await this.rootStore.agent.deletePost(this.post.uri)
- this.rootStore.emitPostDeleted(this.post.uri)
- }
-}
-
-export class PostsFeedSliceModel {
- // ui state
- _reactKey: string = ''
-
- // data
- items: PostsFeedItemModel[] = []
-
- constructor(
- public rootStore: RootStoreModel,
- reactKey: string,
- slice: FeedViewPostsSlice,
- ) {
- this._reactKey = reactKey
- for (const item of slice.items) {
- this.items.push(
- new PostsFeedItemModel(rootStore, `item-${_idCounter++}`, item),
- )
- }
- makeAutoObservable(this, {rootStore: false})
- }
-
- get uri() {
- if (this.isReply) {
- return this.items[1].post.uri
- }
- return this.items[0].post.uri
- }
-
- get isThread() {
- return (
- this.items.length > 1 &&
- this.items.every(
- item => item.post.author.did === this.items[0].post.author.did,
- )
- )
- }
-
- get isReply() {
- return this.items.length > 1 && !this.isThread
- }
-
- get rootItem() {
- if (this.isReply) {
- return this.items[1]
- }
- return this.items[0]
- }
-
- get moderation() {
- return mergePostModerations(this.items.map(item => item.moderation))
- }
-
- containsUri(uri: string) {
- return !!this.items.find(item => item.post.uri === uri)
- }
-
- isThreadParentAt(i: number) {
- if (this.items.length === 1) {
- return false
- }
- return i < this.items.length - 1
- }
-
- isThreadChildAt(i: number) {
- if (this.items.length === 1) {
- return false
- }
- return i > 0
- }
-}
-
export class PostsFeedModel {
// state
isLoading = false
@@ -297,6 +36,7 @@ export class PostsFeedModel {
loadMoreCursor: string | undefined
pollCursor: string | undefined
tuner = new FeedTuner()
+ pageSize = PAGE_SIZE
// used to linearize async modifications to state
lock = new AwaitLock()
@@ -309,8 +49,11 @@ export class PostsFeedModel {
constructor(
public rootStore: RootStoreModel,
- public feedType: 'home' | 'author' | 'suggested' | 'goodstuff',
- params: GetTimeline.QueryParams | GetAuthorFeed.QueryParams,
+ public feedType: 'home' | 'author' | 'suggested' | 'custom',
+ params:
+ | GetTimeline.QueryParams
+ | GetAuthorFeed.QueryParams
+ | GetCustomFeed.QueryParams,
) {
makeAutoObservable(
this,
@@ -387,10 +130,9 @@ export class PostsFeedModel {
}
get feedTuners() {
- if (this.feedType === 'goodstuff') {
+ if (this.feedType === 'custom') {
return [
FeedTuner.dedupReposts,
- FeedTuner.likedRepliesOnly,
FeedTuner.preferredLangOnly(
this.rootStore.preferences.contentLanguages,
),
@@ -416,7 +158,7 @@ export class PostsFeedModel {
this.tuner.reset()
this._xLoading(isRefreshing)
try {
- const res = await this._getFeed({limit: PAGE_SIZE})
+ const res = await this._getFeed({limit: this.pageSize})
await this._replaceAll(res)
this._xIdle()
} catch (e: any) {
@@ -455,7 +197,7 @@ export class PostsFeedModel {
try {
const res = await this._getFeed({
cursor: this.loadMoreCursor,
- limit: PAGE_SIZE,
+ limit: this.pageSize,
})
await this._appendAll(res)
this._xIdle()
@@ -524,7 +266,7 @@ export class PostsFeedModel {
if (this.hasNewLatest || this.feedType === 'suggested') {
return
}
- const res = await this._getFeed({limit: PAGE_SIZE})
+ const res = await this._getFeed({limit: this.pageSize})
const tuner = new FeedTuner()
const slices = tuner.tune(res.data.feed, this.feedTuners)
this.setHasNewLatest(slices[0]?.uri !== this.slices[0]?.uri)
@@ -599,13 +341,15 @@ export class PostsFeedModel {
// helper functions
// =
- async _replaceAll(res: GetTimeline.Response | GetAuthorFeed.Response) {
+ async _replaceAll(
+ res: GetTimeline.Response | GetAuthorFeed.Response | GetCustomFeed.Response,
+ ) {
this.pollCursor = res.data.feed[0]?.post.uri
return this._appendAll(res, true)
}
async _appendAll(
- res: GetTimeline.Response | GetAuthorFeed.Response,
+ res: GetTimeline.Response | GetAuthorFeed.Response | GetCustomFeed.Response,
replace = false,
) {
this.loadMoreCursor = res.data.cursor
@@ -644,7 +388,9 @@ export class PostsFeedModel {
})
}
- _updateAll(res: GetTimeline.Response | GetAuthorFeed.Response) {
+ _updateAll(
+ res: GetTimeline.Response | GetAuthorFeed.Response | GetCustomFeed.Response,
+ ) {
for (const item of res.data.feed) {
const existingSlice = this.slices.find(slice =>
slice.containsUri(item.post.uri),
@@ -661,8 +407,13 @@ export class PostsFeedModel {
}
protected async _getFeed(
- params: GetTimeline.QueryParams | GetAuthorFeed.QueryParams = {},
- ): Promise {
+ params:
+ | GetTimeline.QueryParams
+ | GetAuthorFeed.QueryParams
+ | GetCustomFeed.QueryParams,
+ ): Promise<
+ GetTimeline.Response | GetAuthorFeed.Response | GetCustomFeed.Response
+ > {
params = Object.assign({}, this.params, params)
if (this.feedType === 'suggested') {
const responses = await getMultipleAuthorsPosts(
@@ -684,61 +435,31 @@ export class PostsFeedModel {
}
} else if (this.feedType === 'home') {
return this.rootStore.agent.getTimeline(params as GetTimeline.QueryParams)
- } else if (this.feedType === 'goodstuff') {
- const res = await getGoodStuff(
- this.rootStore.session.currentSession?.accessJwt || '',
- params as GetTimeline.QueryParams,
+ } else if (this.feedType === 'custom') {
+ this.checkIfCustomFeedIsOnlineAndValid(
+ params as GetCustomFeed.QueryParams,
)
- res.data.feed = (res.data.feed || []).filter(
- item => !item.post.author.viewer?.muted,
+ return this.rootStore.agent.app.bsky.feed.getFeed(
+ params as GetCustomFeed.QueryParams,
)
- return res
} else {
return this.rootStore.agent.getAuthorFeed(
params as GetAuthorFeed.QueryParams,
)
}
}
-}
-// HACK
-// temporary off-spec route to get the good stuff
-// -prf
-async function getGoodStuff(
- accessJwt: string,
- params: GetTimeline.QueryParams,
-): Promise {
- const controller = new AbortController()
- const to = setTimeout(() => controller.abort(), 15e3)
-
- const uri = new URL('https://bsky.social/xrpc/app.bsky.unspecced.getPopular')
- let k: keyof GetTimeline.QueryParams
- for (k in params) {
- if (typeof params[k] !== 'undefined') {
- uri.searchParams.set(k, String(params[k]))
+ private async checkIfCustomFeedIsOnlineAndValid(
+ params: GetCustomFeed.QueryParams,
+ ) {
+ const res = await this.rootStore.agent.app.bsky.feed.getFeedGenerator({
+ feed: params.feed,
+ })
+ if (!res.data.isOnline || !res.data.isValid) {
+ runInAction(() => {
+ this.error =
+ 'This custom feed is not online or may be experiencing issues.'
+ })
}
}
-
- const res = await fetch(String(uri), {
- method: 'get',
- headers: {
- accept: 'application/json',
- authorization: `Bearer ${accessJwt}`,
- },
- signal: controller.signal,
- })
-
- const resHeaders: Record = {}
- res.headers.forEach((value: string, key: string) => {
- resHeaders[key] = value
- })
- let resBody = await res.json()
-
- clearTimeout(to)
-
- return {
- success: res.status === 200,
- headers: resHeaders,
- data: jsonToLex(resBody),
- }
}
diff --git a/src/state/models/lists/actor-feeds.ts b/src/state/models/lists/actor-feeds.ts
new file mode 100644
index 00000000..0f206058
--- /dev/null
+++ b/src/state/models/lists/actor-feeds.ts
@@ -0,0 +1,120 @@
+import {makeAutoObservable} from 'mobx'
+import {AppBskyFeedGetActorFeeds as GetActorFeeds} 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'
+
+const PAGE_SIZE = 30
+
+export class ActorFeedsModel {
+ // state
+ isLoading = false
+ isRefreshing = false
+ hasLoaded = false
+ error = ''
+ hasMore = true
+ loadMoreCursor?: string
+
+ // data
+ feeds: CustomFeedModel[] = []
+
+ constructor(
+ public rootStore: RootStoreModel,
+ public params: GetActorFeeds.QueryParams,
+ ) {
+ makeAutoObservable(
+ this,
+ {
+ rootStore: false,
+ },
+ {autoBind: true},
+ )
+ }
+
+ get hasContent() {
+ return this.feeds.length > 0
+ }
+
+ get hasError() {
+ return this.error !== ''
+ }
+
+ get isEmpty() {
+ return this.hasLoaded && !this.hasContent
+ }
+
+ // public api
+ // =
+
+ async refresh() {
+ return this.loadMore(true)
+ }
+
+ 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) => {
+ if (!replace && !this.hasMore) {
+ return
+ }
+ this._xLoading(replace)
+ try {
+ const res = await this.rootStore.agent.app.bsky.feed.getActorFeeds({
+ actor: this.params.actor,
+ limit: PAGE_SIZE,
+ cursor: replace ? undefined : this.loadMoreCursor,
+ })
+ if (replace) {
+ this._replaceAll(res)
+ } else {
+ this._appendAll(res)
+ }
+ this._xIdle()
+ } catch (e: any) {
+ this._xIdle(e)
+ }
+ })
+
+ // state transitions
+ // =
+
+ _xLoading(isRefreshing = false) {
+ this.isLoading = true
+ this.isRefreshing = isRefreshing
+ this.error = ''
+ }
+
+ _xIdle(err?: any) {
+ this.isLoading = false
+ this.isRefreshing = false
+ this.hasLoaded = true
+ this.error = cleanError(err)
+ if (err) {
+ this.rootStore.log.error('Failed to fetch user followers', err)
+ }
+ }
+
+ // helper functions
+ // =
+
+ _replaceAll(res: GetActorFeeds.Response) {
+ this.feeds = []
+ this._appendAll(res)
+ }
+
+ _appendAll(res: GetActorFeeds.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))
+ }
+ }
+}
diff --git a/src/state/models/log.ts b/src/state/models/log.ts
index d8061713..7c9c37c0 100644
--- a/src/state/models/log.ts
+++ b/src/state/models/log.ts
@@ -27,6 +27,7 @@ function genId(): string {
export class LogModel {
entries: LogEntry[] = []
+ timers = new Map()
constructor() {
makeAutoObservable(this)
@@ -74,6 +75,21 @@ export class LogModel {
ts: Date.now(),
})
}
+
+ time = (label = 'default') => {
+ this.timers.set(label, performance.now())
+ }
+
+ timeEnd = (label = 'default', warn = false) => {
+ const endTime = performance.now()
+ if (this.timers.has(label)) {
+ const elapsedTime = endTime - this.timers.get(label)!
+ console.log(`${label}: ${elapsedTime.toFixed(3)}ms`)
+ this.timers.delete(label)
+ } else {
+ warn && console.warn(`Timer with label '${label}' does not exist.`)
+ }
+ }
}
function detailsToStr(details?: any) {
diff --git a/src/state/models/me.ts b/src/state/models/me.ts
index ba2dc6f3..81504485 100644
--- a/src/state/models/me.ts
+++ b/src/state/models/me.ts
@@ -8,6 +8,7 @@ import {PostsFeedModel} from './feeds/posts'
import {NotificationsFeedModel} from './feeds/notifications'
import {MyFollowsCache} from './cache/my-follows'
import {isObj, hasProp} from 'lib/type-guards'
+import {SavedFeedsModel} from './ui/saved-feeds'
const PROFILE_UPDATE_INTERVAL = 10 * 60 * 1e3 // 10min
const NOTIFS_UPDATE_INTERVAL = 30 * 1e3 // 30sec
@@ -21,6 +22,7 @@ export class MeModel {
followsCount: number | undefined
followersCount: number | undefined
mainFeed: PostsFeedModel
+ savedFeeds: SavedFeedsModel
notifications: NotificationsFeedModel
follows: MyFollowsCache
invites: ComAtprotoServerDefs.InviteCode[] = []
@@ -43,12 +45,14 @@ export class MeModel {
})
this.notifications = new NotificationsFeedModel(this.rootStore)
this.follows = new MyFollowsCache(this.rootStore)
+ this.savedFeeds = new SavedFeedsModel(this.rootStore)
}
clear() {
this.mainFeed.clear()
this.notifications.clear()
this.follows.clear()
+ this.savedFeeds.clear()
this.did = ''
this.handle = ''
this.displayName = ''
@@ -110,6 +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(true)
this.rootStore.emitSessionLoaded()
await this.fetchInviteCodes()
await this.fetchAppPasswords()
@@ -119,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()
diff --git a/src/state/models/media/gallery.ts b/src/state/models/media/gallery.ts
index 67f8d2ea..52ef8f37 100644
--- a/src/state/models/media/gallery.ts
+++ b/src/state/models/media/gallery.ts
@@ -4,7 +4,6 @@ import {ImageModel} from './image'
import {Image as RNImage} from 'react-native-image-crop-picker'
import {openPicker} from 'lib/media/picker'
import {getImageDim} from 'lib/media/manip'
-import {getDataUriSize} from 'lib/media/util'
import {isNative} from 'platform/detection'
export class GalleryModel {
@@ -24,13 +23,7 @@ export class GalleryModel {
return this.images.length
}
- get paths() {
- return this.images.map(image =>
- image.compressed === undefined ? image.path : image.compressed.path,
- )
- }
-
- async add(image_: RNImage) {
+ async add(image_: Omit) {
if (this.size >= 4) {
return
}
@@ -39,15 +32,9 @@ export class GalleryModel {
if (!this.images.some(i => i.path === image_.path)) {
const image = new ImageModel(this.rootStore, image_)
- if (!isNative) {
- await image.manipulate({})
- } else {
- await image.compress()
- }
-
- runInAction(() => {
- this.images.push(image)
- })
+ // Initial resize
+ image.manipulate({})
+ this.images.push(image)
}
}
@@ -70,11 +57,10 @@ export class GalleryModel {
const {width, height} = await getImageDim(uri)
- const image: RNImage = {
+ const image = {
path: uri,
height,
width,
- size: getDataUriSize(uri),
mime: 'image/jpeg',
}
diff --git a/src/state/models/media/image.ts b/src/state/models/media/image.ts
index ec93bf5b..e524c49d 100644
--- a/src/state/models/media/image.ts
+++ b/src/state/models/media/image.ts
@@ -3,14 +3,11 @@ import {RootStoreModel} from 'state/index'
import {makeAutoObservable, runInAction} from 'mobx'
import {POST_IMG_MAX} from 'lib/constants'
import * as ImageManipulator from 'expo-image-manipulator'
-import {getDataUriSize, scaleDownDimensions} from 'lib/media/util'
+import {getDataUriSize} from 'lib/media/util'
import {openCropper} from 'lib/media/picker'
import {ActionCrop, FlipType, SaveFormat} from 'expo-image-manipulator'
import {Position} from 'react-avatar-editor'
-import {compressAndResizeImageForPost} from 'lib/media/manip'
-
-// TODO: EXIF embed
-// Cases to consider: ExternalEmbed
+import {Dimensions} from 'lib/media/types'
export interface ImageManipulationAttributes {
aspectRatio?: '4:3' | '1:1' | '3:4' | 'None'
@@ -21,17 +18,16 @@ export interface ImageManipulationAttributes {
flipVertical?: boolean
}
-export class ImageModel implements RNImage {
+const MAX_IMAGE_SIZE_IN_BYTES = 976560
+
+export class ImageModel implements Omit {
path: string
mime = 'image/jpeg'
width: number
height: number
- size: number
altText = ''
cropped?: RNImage = undefined
compressed?: RNImage = undefined
- scaledWidth: number = POST_IMG_MAX.width
- scaledHeight: number = POST_IMG_MAX.height
// Web manipulation
prev?: RNImage
@@ -44,7 +40,7 @@ export class ImageModel implements RNImage {
}
prevAttributes: ImageManipulationAttributes = {}
- constructor(public rootStore: RootStoreModel, image: RNImage) {
+ constructor(public rootStore: RootStoreModel, image: Omit) {
makeAutoObservable(this, {
rootStore: false,
})
@@ -52,19 +48,8 @@ export class ImageModel implements RNImage {
this.path = image.path
this.width = image.width
this.height = image.height
- this.size = image.size
- this.calcScaledDimensions()
}
- // TODO: Revisit compression factor due to updated sizing with zoom
- // get compressionFactor() {
- // const MAX_IMAGE_SIZE_IN_BYTES = 976560
-
- // return this.size < MAX_IMAGE_SIZE_IN_BYTES
- // ? 1
- // : MAX_IMAGE_SIZE_IN_BYTES / this.size
- // }
-
setRatio(aspectRatio: ImageManipulationAttributes['aspectRatio']) {
this.attributes.aspectRatio = aspectRatio
}
@@ -93,8 +78,24 @@ export class ImageModel implements RNImage {
}
}
- getDisplayDimensions(
- as: ImageManipulationAttributes['aspectRatio'] = '1:1',
+ getUploadDimensions(
+ dimensions: Dimensions,
+ maxDimensions: Dimensions = POST_IMG_MAX,
+ as: ImageManipulationAttributes['aspectRatio'] = 'None',
+ ) {
+ const {width, height} = dimensions
+ const {width: maxWidth, height: maxHeight} = maxDimensions
+
+ return width < maxWidth && height < maxHeight
+ ? {
+ width,
+ height,
+ }
+ : this.getResizedDimensions(as, POST_IMG_MAX.width)
+ }
+
+ getResizedDimensions(
+ as: ImageManipulationAttributes['aspectRatio'] = 'None',
maxSide: number,
) {
const ratioMultiplier = this.ratioMultipliers[as]
@@ -119,59 +120,70 @@ export class ImageModel implements RNImage {
}
}
- calcScaledDimensions() {
- const {width, height} = scaleDownDimensions(
- {width: this.width, height: this.height},
- POST_IMG_MAX,
- )
- this.scaledWidth = width
- this.scaledHeight = height
- }
-
async setAltText(altText: string) {
this.altText = altText
}
- // Only for mobile
+ // Only compress prior to upload
+ async compress() {
+ for (let i = 10; i > 0; i--) {
+ // Float precision
+ const factor = Math.round(i) / 10
+ const compressed = await ImageManipulator.manipulateAsync(
+ this.cropped?.path ?? this.path,
+ undefined,
+ {
+ compress: factor,
+ base64: true,
+ format: SaveFormat.JPEG,
+ },
+ )
+
+ if (compressed.base64 !== undefined) {
+ const size = getDataUriSize(compressed.base64)
+
+ if (size < MAX_IMAGE_SIZE_IN_BYTES) {
+ runInAction(() => {
+ this.compressed = {
+ mime: 'image/jpeg',
+ path: compressed.uri,
+ size,
+ ...compressed,
+ }
+ })
+ return
+ }
+ }
+ }
+
+ // Compression fails when removing redundant information is not possible.
+ // This can be tested with images that have high variance in noise.
+ throw new Error('Failed to compress image')
+ }
+
+ // Mobile
async crop() {
try {
- const cropped = await openCropper({
+ // openCropper requires an output width and height hence
+ // getting upload dimensions before cropping is necessary.
+ const {width, height} = this.getUploadDimensions({
+ width: this.width,
+ height: this.height,
+ })
+
+ const cropped = await openCropper(this.rootStore, {
mediaType: 'photo',
path: this.path,
freeStyleCropEnabled: true,
- width: this.scaledWidth,
- height: this.scaledHeight,
- })
- runInAction(() => {
- this.cropped = cropped
- this.compress()
- })
- } catch (err) {
- this.rootStore.log.error('Failed to crop photo', err)
- }
- }
-
- async compress() {
- try {
- const {width, height} = scaleDownDimensions(
- this.cropped
- ? {width: this.cropped.width, height: this.cropped.height}
- : {width: this.width, height: this.height},
- POST_IMG_MAX,
- )
-
- // TODO: Revisit this - currently iOS uses this as well
- const compressed = await compressAndResizeImageForPost({
- ...(this.cropped === undefined ? this : this.cropped),
width,
height,
})
runInAction(() => {
- this.compressed = compressed
+ this.cropped = cropped
})
} catch (err) {
- this.rootStore.log.error('Failed to compress photo', err)
+ this.rootStore.log.error('Failed to crop photo', err)
}
}
@@ -181,6 +193,9 @@ export class ImageModel implements RNImage {
crop?: ActionCrop['crop']
} & ImageManipulationAttributes,
) {
+ let uploadWidth: number | undefined
+ let uploadHeight: number | undefined
+
const {aspectRatio, crop, position, scale} = attributes
const modifiers = []
@@ -197,14 +212,34 @@ export class ImageModel implements RNImage {
}
if (crop !== undefined) {
+ const croppedHeight = crop.height * this.height
+ const croppedWidth = crop.width * this.width
modifiers.push({
crop: {
originX: crop.originX * this.width,
originY: crop.originY * this.height,
- height: crop.height * this.height,
- width: crop.width * this.width,
+ height: croppedHeight,
+ width: croppedWidth,
},
})
+
+ const uploadDimensions = this.getUploadDimensions(
+ {width: croppedWidth, height: croppedHeight},
+ POST_IMG_MAX,
+ aspectRatio,
+ )
+
+ uploadWidth = uploadDimensions.width
+ uploadHeight = uploadDimensions.height
+ } else {
+ const uploadDimensions = this.getUploadDimensions(
+ {width: this.width, height: this.height},
+ POST_IMG_MAX,
+ aspectRatio,
+ )
+
+ uploadWidth = uploadDimensions.width
+ uploadHeight = uploadDimensions.height
}
if (scale !== undefined) {
@@ -222,36 +257,40 @@ export class ImageModel implements RNImage {
const ratioMultiplier =
this.ratioMultipliers[this.attributes.aspectRatio ?? '1:1']
- const MAX_SIDE = 2000
-
const result = await ImageManipulator.manipulateAsync(
this.path,
[
...modifiers,
- {resize: ratioMultiplier > 1 ? {width: MAX_SIDE} : {height: MAX_SIDE}},
+ {
+ resize:
+ ratioMultiplier > 1 ? {width: uploadWidth} : {height: uploadHeight},
+ },
],
{
- compress: 0.9,
+ base64: true,
format: SaveFormat.JPEG,
},
)
runInAction(() => {
- this.compressed = {
+ this.cropped = {
mime: 'image/jpeg',
path: result.uri,
- size: getDataUriSize(result.uri),
+ size:
+ result.base64 !== undefined
+ ? getDataUriSize(result.base64)
+ : MAX_IMAGE_SIZE_IN_BYTES + 999, // shouldn't hit this unless manipulation fails
...result,
}
})
}
- resetCompressed() {
+ resetCropped() {
this.manipulate({})
}
previous() {
- this.compressed = this.prev
+ this.cropped = this.prev
this.attributes = this.prevAttributes
}
}
diff --git a/src/state/models/session.ts b/src/state/models/session.ts
index c3653760..aa9c9775 100644
--- a/src/state/models/session.ts
+++ b/src/state/models/session.ts
@@ -187,7 +187,7 @@ export class SessionModel {
account => account.service === service && account.did === did,
)
- // fall back to any pre-existing access tokens
+ // fall back to any preexisting access tokens
let refreshJwt = session?.refreshJwt || existingAccount?.refreshJwt
let accessJwt = session?.accessJwt || existingAccount?.accessJwt
if (event === 'expired') {
@@ -247,7 +247,7 @@ export class SessionModel {
const res = await agent.getProfile({actor: did}).catch(_e => undefined)
if (res) {
return {
- dispayName: res.data.displayName,
+ displayName: res.data.displayName,
aviUrl: res.data.avatar,
}
}
diff --git a/src/state/models/ui/preferences.ts b/src/state/models/ui/preferences.ts
index 1471420f..dcf6b9a7 100644
--- a/src/state/models/ui/preferences.ts
+++ b/src/state/models/ui/preferences.ts
@@ -11,6 +11,7 @@ import {
ALWAYS_FILTER_LABEL_GROUP,
ALWAYS_WARN_LABEL_GROUP,
} from 'lib/labeling/const'
+import {DEFAULT_FEEDS} from 'lib/constants'
import {isIOS} from 'platform/detection'
const deviceLocales = getLocales()
@@ -25,6 +26,7 @@ const LABEL_GROUPS = [
'spam',
'impersonation',
]
+const VISIBILITY_VALUES = ['show', 'warn', 'hide']
export class LabelPreferencesModel {
nsfw: LabelPreference = 'hide'
@@ -45,6 +47,8 @@ export class PreferencesModel {
contentLanguages: string[] =
deviceLocales?.map?.(locale => locale.languageCode) || []
contentLabels = new LabelPreferencesModel()
+ savedFeeds: string[] = []
+ pinnedFeeds: string[] = []
constructor(public rootStore: RootStoreModel) {
makeAutoObservable(this, {}, {autoBind: true})
@@ -54,9 +58,16 @@ export class PreferencesModel {
return {
contentLanguages: this.contentLanguages,
contentLabels: this.contentLabels,
+ savedFeeds: this.savedFeeds,
+ pinnedFeeds: this.pinnedFeeds,
}
}
+ /**
+ * The function hydrates an object with properties related to content languages, labels, saved feeds,
+ * and pinned feeds that it gets from the parameter `v` (probably local storage)
+ * @param {unknown} v - the data object to hydrate from
+ */
hydrate(v: unknown) {
if (isObj(v)) {
if (
@@ -72,10 +83,29 @@ export class PreferencesModel {
// default to the device languages
this.contentLanguages = deviceLocales.map(locale => locale.languageCode)
}
+ if (
+ hasProp(v, 'savedFeeds') &&
+ Array.isArray(v.savedFeeds) &&
+ typeof v.savedFeeds.every(item => typeof item === 'string')
+ ) {
+ this.savedFeeds = v.savedFeeds
+ }
+ if (
+ hasProp(v, 'pinnedFeeds') &&
+ Array.isArray(v.pinnedFeeds) &&
+ typeof v.pinnedFeeds.every(item => typeof item === 'string')
+ ) {
+ this.pinnedFeeds = v.pinnedFeeds
+ }
}
}
+ /**
+ * This function fetches preferences and sets defaults for missing items.
+ */
async sync() {
+ // fetch preferences
+ let hasSavedFeedsPref = false
const res = await this.rootStore.agent.app.bsky.actor.getPreferences({})
runInAction(() => {
for (const pref of res.data.preferences) {
@@ -88,22 +118,83 @@ 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.isSavedFeedsPref(pref) &&
+ AppBskyActorDefs.validateSavedFeedsPref(pref).success
+ ) {
+ this.savedFeeds = pref.saved
+ this.pinnedFeeds = pref.pinned
+ hasSavedFeedsPref = true
}
}
})
+
+ // set defaults on missing items
+ if (!hasSavedFeedsPref) {
+ const {saved, pinned} = await DEFAULT_FEEDS(
+ this.rootStore.agent.service.toString(),
+ (handle: string) =>
+ this.rootStore.agent
+ .resolveHandle({handle})
+ .then(({data}) => data.did),
+ )
+ runInAction(() => {
+ this.savedFeeds = saved
+ this.pinnedFeeds = pinned
+ })
+ res.data.preferences.push({
+ $type: 'app.bsky.actor.defs#savedFeedsPref',
+ saved,
+ pinned,
+ })
+ await this.rootStore.agent.app.bsky.actor.putPreferences({
+ preferences: res.data.preferences,
+ })
+ /* dont await */ this.rootStore.me.savedFeeds.refresh()
+ }
}
- async update(cb: (prefs: AppBskyActorDefs.Preferences) => void) {
+ /**
+ * This function updates the preferences of a user and allows for a callback function to be executed
+ * before the update.
+ * @param cb - cb is a callback function that takes in a single parameter of type
+ * AppBskyActorDefs.Preferences and returns either a boolean or void. This callback function is used to
+ * update the preferences of the user. The function is called with the current preferences as an
+ * argument and if the callback returns false, the preferences are not updated.
+ * @returns void
+ */
+ async update(cb: (prefs: AppBskyActorDefs.Preferences) => boolean | void) {
const res = await this.rootStore.agent.app.bsky.actor.getPreferences({})
- cb(res.data.preferences)
+ if (cb(res.data.preferences) === false) {
+ return
+ }
await this.rootStore.agent.app.bsky.actor.putPreferences({
preferences: res.data.preferences,
})
}
+ /**
+ * This function resets the preferences to an empty array of no preferences.
+ */
+ async reset() {
+ runInAction(() => {
+ this.contentLabels = new LabelPreferencesModel()
+ this.contentLanguages = deviceLocales.map(locale => locale.languageCode)
+ this.savedFeeds = []
+ this.pinnedFeeds = []
+ })
+ await this.rootStore.agent.app.bsky.actor.putPreferences({
+ preferences: [],
+ })
+ }
+
hasContentLanguage(code2: string) {
return this.contentLanguages.includes(code2)
}
@@ -200,4 +291,62 @@ export class PreferencesModel {
}
return res
}
+
+ setFeeds(saved: string[], pinned: string[]) {
+ this.savedFeeds = saved
+ this.pinnedFeeds = pinned
+ }
+
+ async setSavedFeeds(saved: string[], pinned: string[]) {
+ const oldSaved = this.savedFeeds
+ const oldPinned = this.pinnedFeeds
+ this.setFeeds(saved, pinned)
+ try {
+ await this.update((prefs: AppBskyActorDefs.Preferences) => {
+ const existing = prefs.find(
+ pref =>
+ AppBskyActorDefs.isSavedFeedsPref(pref) &&
+ AppBskyActorDefs.validateSavedFeedsPref(pref).success,
+ )
+ if (existing) {
+ existing.saved = saved
+ existing.pinned = pinned
+ } else {
+ prefs.push({
+ $type: 'app.bsky.actor.defs#savedFeedsPref',
+ saved,
+ pinned,
+ })
+ }
+ })
+ } catch (e) {
+ runInAction(() => {
+ this.savedFeeds = oldSaved
+ this.pinnedFeeds = oldPinned
+ })
+ throw e
+ }
+ }
+
+ async addSavedFeed(v: string) {
+ return this.setSavedFeeds([...this.savedFeeds, v], this.pinnedFeeds)
+ }
+
+ async removeSavedFeed(v: string) {
+ return this.setSavedFeeds(
+ this.savedFeeds.filter(uri => uri !== v),
+ this.pinnedFeeds.filter(uri => uri !== v),
+ )
+ }
+
+ async addPinnedFeed(v: string) {
+ return this.setSavedFeeds(this.savedFeeds, [...this.pinnedFeeds, v])
+ }
+
+ async removePinnedFeed(v: string) {
+ return this.setSavedFeeds(
+ this.savedFeeds,
+ this.pinnedFeeds.filter(uri => uri !== v),
+ )
+ }
}
diff --git a/src/state/models/ui/profile.ts b/src/state/models/ui/profile.ts
index 861b3df0..81daf797 100644
--- a/src/state/models/ui/profile.ts
+++ b/src/state/models/ui/profile.ts
@@ -2,20 +2,16 @@ import {makeAutoObservable} from 'mobx'
import {RootStoreModel} from '../root-store'
import {ProfileModel} from '../content/profile'
import {PostsFeedModel} from '../feeds/posts'
+import {ActorFeedsModel} from '../lists/actor-feeds'
import {ListsListModel} from '../lists/lists-list'
export enum Sections {
Posts = 'Posts',
PostsWithReplies = 'Posts & replies',
+ CustomAlgorithms = 'Feeds',
Lists = 'Lists',
}
-const USER_SELECTOR_ITEMS = [
- Sections.Posts,
- Sections.PostsWithReplies,
- Sections.Lists,
-]
-
export interface ProfileUiParams {
user: string
}
@@ -28,6 +24,7 @@ export class ProfileUiModel {
// data
profile: ProfileModel
feed: PostsFeedModel
+ algos: ActorFeedsModel
lists: ListsListModel
// ui state
@@ -50,10 +47,11 @@ export class ProfileUiModel {
actor: params.user,
limit: 10,
})
+ this.algos = new ActorFeedsModel(rootStore, {actor: params.user})
this.lists = new ListsListModel(rootStore, params.user)
}
- get currentView(): PostsFeedModel | ListsListModel {
+ get currentView(): PostsFeedModel | ActorFeedsModel | ListsListModel {
if (
this.selectedView === Sections.Posts ||
this.selectedView === Sections.PostsWithReplies
@@ -62,6 +60,9 @@ export class ProfileUiModel {
} else if (this.selectedView === Sections.Lists) {
return this.lists
}
+ if (this.selectedView === Sections.CustomAlgorithms) {
+ return this.algos
+ }
throw new Error(`Invalid selector value: ${this.selectedViewIndex}`)
}
@@ -75,7 +76,14 @@ export class ProfileUiModel {
}
get selectorItems() {
- return USER_SELECTOR_ITEMS
+ const items = [Sections.Posts, Sections.PostsWithReplies]
+ if (this.algos.hasLoaded && !this.algos.isEmpty) {
+ items.push(Sections.CustomAlgorithms)
+ }
+ if (this.lists.hasLoaded && !this.lists.isEmpty) {
+ items.push(Sections.Lists)
+ }
+ return items
}
get selectedView() {
@@ -84,9 +92,11 @@ export class ProfileUiModel {
get uiItems() {
let arr: any[] = []
+ // if loading, return loading item to show loading spinner
if (this.isInitialLoading) {
arr = arr.concat([ProfileUiModel.LOADING_ITEM])
} else if (this.currentView.hasError) {
+ // if error, return error item to show error message
arr = arr.concat([
{
_reactKey: '__error__',
@@ -94,12 +104,16 @@ export class ProfileUiModel {
},
])
} else {
+ // not loading, no error, show content
if (
this.selectedView === Sections.Posts ||
- this.selectedView === Sections.PostsWithReplies
+ this.selectedView === Sections.PostsWithReplies ||
+ this.selectedView === Sections.CustomAlgorithms
) {
if (this.feed.hasContent) {
- if (this.selectedView === Sections.Posts) {
+ if (this.selectedView === Sections.CustomAlgorithms) {
+ arr = this.algos.feeds
+ } else if (this.selectedView === Sections.Posts) {
arr = this.feed.nonReplyFeed
} else {
arr = this.feed.slices.slice()
@@ -117,6 +131,7 @@ export class ProfileUiModel {
arr = arr.concat([ProfileUiModel.EMPTY_ITEM])
}
} else {
+ // fallback, add empty item, to show empty message
arr = arr.concat([ProfileUiModel.EMPTY_ITEM])
}
}
@@ -151,6 +166,7 @@ export class ProfileUiModel {
.setup()
.catch(err => this.rootStore.log.error('Failed to fetch feed', err)),
])
+ this.algos.refresh()
// HACK: need to use the DID as a param, not the username -prf
this.lists.source = this.profile.did
this.lists
diff --git a/src/state/models/ui/saved-feeds.ts b/src/state/models/ui/saved-feeds.ts
new file mode 100644
index 00000000..979fddf4
--- /dev/null
+++ b/src/state/models/ui/saved-feeds.ts
@@ -0,0 +1,185 @@
+import {makeAutoObservable, runInAction} from 'mobx'
+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'
+
+export class SavedFeedsModel {
+ // state
+ isLoading = false
+ isRefreshing = false
+ hasLoaded = false
+ error = ''
+
+ // data
+ feeds: CustomFeedModel[] = []
+
+ constructor(public rootStore: RootStoreModel) {
+ makeAutoObservable(
+ this,
+ {
+ rootStore: false,
+ },
+ {autoBind: true},
+ )
+ }
+
+ get hasContent() {
+ return this.feeds.length > 0
+ }
+
+ get hasError() {
+ return this.error !== ''
+ }
+
+ get isEmpty() {
+ return this.hasLoaded && !this.hasContent
+ }
+
+ 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.isPinned(f))
+ }
+
+ get all() {
+ return this.pinned.concat(this.unpinned)
+ }
+
+ get pinnedFeedNames() {
+ return this.pinned.map(f => f.displayName)
+ }
+
+ // public api
+ // =
+
+ clear() {
+ this.isLoading = false
+ this.isRefreshing = false
+ this.hasLoaded = false
+ this.error = ''
+ this.feeds = []
+ }
+
+ refresh = bundleAsync(async (quietRefresh = false) => {
+ this._xLoading(!quietRefresh)
+ try {
+ let feeds: AppBskyFeedDefs.GeneratorView[] = []
+ for (
+ let i = 0;
+ i < this.rootStore.preferences.savedFeeds.length;
+ i += 25
+ ) {
+ const res = await this.rootStore.agent.app.bsky.feed.getFeedGenerators({
+ feeds: this.rootStore.preferences.savedFeeds.slice(i, 25),
+ })
+ feeds = feeds.concat(res.data.feeds)
+ }
+ runInAction(() => {
+ this.feeds = feeds.map(f => new CustomFeedModel(this.rootStore, f))
+ })
+ this._xIdle()
+ } catch (e: any) {
+ this._xIdle(e)
+ }
+ })
+
+ async save(feed: CustomFeedModel) {
+ try {
+ 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(feed: CustomFeedModel) {
+ const uri = feed.uri
+ try {
+ 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.setSavedFeeds(
+ this.rootStore.preferences.savedFeeds,
+ feeds.filter(feed => this.isPinned(feed)).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') {
+ 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.setSavedFeeds(
+ this.rootStore.preferences.savedFeeds,
+ pinned,
+ )
+ }
+
+ // state transitions
+ // =
+
+ _xLoading(isRefreshing = false) {
+ this.isLoading = true
+ this.isRefreshing = isRefreshing
+ this.error = ''
+ }
+
+ _xIdle(err?: any) {
+ this.isLoading = false
+ this.isRefreshing = false
+ this.hasLoaded = true
+ this.error = cleanError(err)
+ if (err) {
+ this.rootStore.log.error('Failed to fetch user feeds', err)
+ }
+ }
+}
diff --git a/src/state/models/ui/shell.ts b/src/state/models/ui/shell.ts
index 187342ec..a77ffbdf 100644
--- a/src/state/models/ui/shell.ts
+++ b/src/state/models/ui/shell.ts
@@ -119,7 +119,7 @@ export type Modal =
// Moderation
| ReportAccountModal
| ReportPostModal
- | CreateMuteListModal
+ | CreateOrEditMuteListModal
| ListAddRemoveUserModal
// Posts
diff --git a/src/view/com/auth/create/Step1.tsx b/src/view/com/auth/create/Step1.tsx
index ac0d706d..57747f07 100644
--- a/src/view/com/auth/create/Step1.tsx
+++ b/src/view/com/auth/create/Step1.tsx
@@ -32,7 +32,7 @@ export const Step1 = observer(({model}: {model: CreateAccountModel}) => {
model.setServiceDescription(undefined)
}, [setIsDefaultSelected, model])
- const fetchServiceDesription = React.useMemo(
+ const fetchServiceDescription = React.useMemo(
() => debounce(() => model.fetchServiceDescription(), 1e3),
[model],
)
@@ -40,9 +40,9 @@ export const Step1 = observer(({model}: {model: CreateAccountModel}) => {
const onChangeServiceUrl = React.useCallback(
(v: string) => {
model.setServiceUrl(v)
- fetchServiceDesription()
+ fetchServiceDescription()
},
- [model, fetchServiceDesription],
+ [model, fetchServiceDescription],
)
const onDebugChangeServiceUrl = React.useCallback(
diff --git a/src/view/com/auth/login/Login.tsx b/src/view/com/auth/login/Login.tsx
index 87512287..9f5d581b 100644
--- a/src/view/com/auth/login/Login.tsx
+++ b/src/view/com/auth/login/Login.tsx
@@ -420,6 +420,7 @@ const LoginForm = ({
textContentType="oneTimeCode"
value={password}
onChangeText={setPassword}
+ onSubmitEditing={onPressNext}
editable={!isProcessing}
accessibilityLabel="Password"
accessibilityHint={
diff --git a/src/view/com/composer/Composer.tsx b/src/view/com/composer/Composer.tsx
index 3891fa26..d7a4a42d 100644
--- a/src/view/com/composer/Composer.tsx
+++ b/src/view/com/composer/Composer.tsx
@@ -37,8 +37,7 @@ import {useExternalLinkFetch} from './useExternalLinkFetch'
import {isDesktopWeb, isAndroid} from 'platform/detection'
import {GalleryModel} from 'state/models/media/gallery'
import {Gallery} from './photos/Gallery'
-
-const MAX_GRAPHEME_LENGTH = 300
+import {MAX_GRAPHEME_LENGTH} from 'lib/constants'
type Props = ComposerOpts & {
onClose: () => void
@@ -310,7 +309,7 @@ export const ComposePost = observer(function ComposePost({
onError={setError}
accessible={true}
accessibilityLabel="Write post"
- accessibilityHint="Compose posts up to 300 characters in length"
+ accessibilityHint={`Compose posts up to ${MAX_GRAPHEME_LENGTH} characters in length`}
/>
diff --git a/src/view/com/composer/char-progress/CharProgress.tsx b/src/view/com/composer/char-progress/CharProgress.tsx
index eaaaea5e..6b3b98e4 100644
--- a/src/view/com/composer/char-progress/CharProgress.tsx
+++ b/src/view/com/composer/char-progress/CharProgress.tsx
@@ -7,9 +7,9 @@ import ProgressCircle from 'react-native-progress/Circle'
import ProgressPie from 'react-native-progress/Pie'
import {s} from 'lib/styles'
import {usePalette} from 'lib/hooks/usePalette'
+import {MAX_GRAPHEME_LENGTH} from 'lib/constants'
-const MAX_LENGTH = 300
-const DANGER_LENGTH = MAX_LENGTH
+const DANGER_LENGTH = MAX_GRAPHEME_LENGTH
export function CharProgress({count}: {count: number}) {
const pal = usePalette('default')
@@ -17,7 +17,9 @@ export function CharProgress({count}: {count: number}) {
const circleColor = count > DANGER_LENGTH ? '#e60000' : pal.colors.link
return (
<>
- {MAX_LENGTH - count}
+
+ {MAX_GRAPHEME_LENGTH - count}
+
{count > DANGER_LENGTH ? (
diff --git a/src/view/com/composer/photos/Gallery.tsx b/src/view/com/composer/photos/Gallery.tsx
index 43682495..f46c0533 100644
--- a/src/view/com/composer/photos/Gallery.tsx
+++ b/src/view/com/composer/photos/Gallery.tsx
@@ -104,63 +104,61 @@ export const Gallery = observer(function ({gallery}: Props) {
return !gallery.isEmpty ? (
- {gallery.images.map(image =>
- image.compressed !== undefined ? (
-
+ {gallery.images.map(image => (
+
+ {
+ handleAddImageAltText(image)
+ }}
+ style={imageControlLabelStyle}>
+ ALT
+
+
{
- handleAddImageAltText(image)
+ handleEditPhoto(image)
}}
- style={imageControlLabelStyle}>
- ALT
+ style={styles.imageControl}>
+
+ handleRemovePhoto(image)}
+ style={styles.imageControl}>
+
-
- {
- handleEditPhoto(image)
- }}
- style={styles.imageControl}>
-
- handleRemovePhoto(image)}
- style={styles.imageControl}>
-
-
-
-
- ) : null,
- )}
+
+
+ ))}
) : null
})
diff --git a/src/view/com/composer/useExternalLinkFetch.ts b/src/view/com/composer/useExternalLinkFetch.ts
index 45c2dfd0..8d3b8cac 100644
--- a/src/view/com/composer/useExternalLinkFetch.ts
+++ b/src/view/com/composer/useExternalLinkFetch.ts
@@ -2,9 +2,9 @@ import {useState, useEffect} from 'react'
import {useStores} from 'state/index'
import * as apilib from 'lib/api/index'
import {getLinkMeta} from 'lib/link-meta/link-meta'
-import {getPostAsQuote} from 'lib/link-meta/bsky'
+import {getPostAsQuote, getFeedAsEmbed} from 'lib/link-meta/bsky'
import {downloadAndResize} from 'lib/media/manip'
-import {isBskyPostUrl} from 'lib/strings/url-helpers'
+import {isBskyPostUrl, isBskyCustomFeedUrl} from 'lib/strings/url-helpers'
import {ComposerOpts} from 'state/models/ui/shell'
import {POST_IMG_MAX} from 'lib/constants'
@@ -41,6 +41,24 @@ export function useExternalLinkFetch({
setExtLink(undefined)
},
)
+ } else if (isBskyCustomFeedUrl(extLink.uri)) {
+ getFeedAsEmbed(store, extLink.uri).then(
+ ({embed, meta}) => {
+ if (aborted) {
+ return
+ }
+ setExtLink({
+ uri: extLink.uri,
+ isLoading: false,
+ meta,
+ embed,
+ })
+ },
+ err => {
+ store.log.error('Failed to fetch feed for embedding', {err})
+ setExtLink(undefined)
+ },
+ )
} else {
getLinkMeta(store, extLink.uri).then(meta => {
if (aborted) {
diff --git a/src/view/com/feeds/CustomFeed.tsx b/src/view/com/feeds/CustomFeed.tsx
new file mode 100644
index 00000000..748b89c0
--- /dev/null
+++ b/src/view/com/feeds/CustomFeed.tsx
@@ -0,0 +1,162 @@
+import React from 'react'
+import {
+ Pressable,
+ StyleProp,
+ StyleSheet,
+ View,
+ ViewStyle,
+ TouchableOpacity,
+} from 'react-native'
+import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
+import {Text} from '../util/text/Text'
+import {usePalette} from 'lib/hooks/usePalette'
+import {s} from 'lib/styles'
+import {UserAvatar} from '../util/UserAvatar'
+import {observer} from 'mobx-react-lite'
+import {CustomFeedModel} from 'state/models/feeds/custom-feed'
+import {useNavigation} from '@react-navigation/native'
+import {NavigationProp} from 'lib/routes/types'
+import {useStores} from 'state/index'
+import {pluralize} from 'lib/strings/helpers'
+import {AtUri} from '@atproto/api'
+import * as Toast from 'view/com/util/Toast'
+
+export const CustomFeed = observer(
+ ({
+ item,
+ style,
+ showSaveBtn = false,
+ showDescription = false,
+ showLikes = false,
+ }: {
+ item: CustomFeedModel
+ style?: StyleProp
+ showSaveBtn?: boolean
+ showDescription?: boolean
+ showLikes?: boolean
+ }) => {
+ const store = useStores()
+ const pal = usePalette('default')
+ const navigation = useNavigation()
+
+ const onToggleSaved = React.useCallback(async () => {
+ if (item.isSaved) {
+ store.shell.openModal({
+ name: 'confirm',
+ title: 'Remove from my feeds',
+ message: `Remove ${item.displayName} 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 {
+ 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])
+
+ return (
+ {
+ navigation.navigate('CustomFeed', {
+ name: item.data.creator.did,
+ rkey: new AtUri(item.data.uri).rkey,
+ })
+ }}
+ key={item.data.uri}>
+
+
+
+
+
+ {item.displayName}
+
+
+ by @{item.data.creator.handle}
+
+
+ {showSaveBtn && (
+
+
+ {item.isSaved ? (
+
+
+ )}
+
+
+ {showDescription && item.data.description ? (
+
+ {item.data.description}
+
+ ) : null}
+
+ {showLikes ? (
+
+ Liked by {item.data.likeCount || 0}{' '}
+ {pluralize(item.data.likeCount || 0, 'user')}
+
+ ) : null}
+
+ )
+ },
+)
+
+const styles = StyleSheet.create({
+ container: {
+ paddingHorizontal: 18,
+ paddingVertical: 20,
+ flexDirection: 'column',
+ flex: 1,
+ borderTopWidth: 1,
+ gap: 14,
+ },
+ headerContainer: {
+ flexDirection: 'row',
+ },
+ headerTextContainer: {
+ flexDirection: 'column',
+ columnGap: 4,
+ flex: 1,
+ },
+ description: {
+ flex: 1,
+ flexWrap: 'wrap',
+ },
+ btn: {
+ paddingVertical: 6,
+ },
+})
diff --git a/src/view/com/lightbox/Lightbox.web.tsx b/src/view/com/lightbox/Lightbox.web.tsx
index d389279b..61446519 100644
--- a/src/view/com/lightbox/Lightbox.web.tsx
+++ b/src/view/com/lightbox/Lightbox.web.tsx
@@ -65,30 +65,34 @@ function LightboxInner({
const canGoLeft = index >= 1
const canGoRight = index < imgs.length - 1
- const onPressLeft = () => {
+ const onPressLeft = useCallback(() => {
if (canGoLeft) {
setIndex(index - 1)
}
- }
- const onPressRight = () => {
+ }, [index, canGoLeft])
+ const onPressRight = useCallback(() => {
if (canGoRight) {
setIndex(index + 1)
}
- }
+ }, [index, canGoRight])
- const onEscape = useCallback(
+ const onKeyDown = useCallback(
(e: KeyboardEvent) => {
if (e.key === 'Escape') {
onClose()
+ } else if (e.key === 'ArrowLeft') {
+ onPressLeft()
+ } else if (e.key === 'ArrowRight') {
+ onPressRight()
}
},
- [onClose],
+ [onClose, onPressLeft, onPressRight],
)
useEffect(() => {
- window.addEventListener('keydown', onEscape)
- return () => window.removeEventListener('keydown', onEscape)
- }, [onEscape])
+ window.addEventListener('keydown', onKeyDown)
+ return () => window.removeEventListener('keydown', onKeyDown)
+ }, [onKeyDown])
return (
diff --git a/src/view/com/lists/ListCard.tsx b/src/view/com/lists/ListCard.tsx
index 7cbdaaf6..0e13ca33 100644
--- a/src/view/com/lists/ListCard.tsx
+++ b/src/view/com/lists/ListCard.tsx
@@ -60,7 +60,7 @@ export const ListCard = ({
anchorNoUnderline>
-
-
diff --git a/src/view/com/modals/ContentFilteringSettings.tsx b/src/view/com/modals/ContentFilteringSettings.tsx
index 1256bd42..5215c9cb 100644
--- a/src/view/com/modals/ContentFilteringSettings.tsx
+++ b/src/view/com/modals/ContentFilteringSettings.tsx
@@ -52,8 +52,8 @@ export const Component = observer(({}: {}) => {
Adult content can only be enabled via the Web at{' '}
Content Languages
- Which languages would you like to see in the What's Hot feed? (Leave
- them all unchecked to see any language.)
+ Which languages would you like to see in the your feed? (Leave them all
+ unchecked to see any language.)
{languages.map(lang => (
diff --git a/src/view/com/modals/CreateOrEditMuteList.tsx b/src/view/com/modals/CreateOrEditMuteList.tsx
index 0c13f243..736deae7 100644
--- a/src/view/com/modals/CreateOrEditMuteList.tsx
+++ b/src/view/com/modals/CreateOrEditMuteList.tsx
@@ -143,6 +143,7 @@ export function Component({
List Avatar
{
- image.prev = image.compressed
+ image.prev = image.cropped
image.prevAttributes = image.attributes
- image.resetCompressed()
+ image.resetCropped()
}, [image])
const onCloseModal = useCallback(() => {
@@ -152,7 +152,7 @@ export const Component = observer(function ({image, gallery}: Props) {
: {}),
})
- image.prev = image.compressed
+ image.prev = image.cropped
image.prevAttributes = image.attributes
onCloseModal()
}, [altText, image, position, scale, onCloseModal])
@@ -168,8 +168,7 @@ export const Component = observer(function ({image, gallery}: Props) {
}
}, [])
- // Prevents preliminary flash when transformations are being applied
- if (image.compressed === undefined) {
+ if (image.cropped === undefined) {
return null
}
@@ -177,7 +176,7 @@ export const Component = observer(function ({image, gallery}: Props) {
windowDimensions.width > 500 ? 410 : windowDimensions.width - 80
const sideLength = isDesktopWeb ? 300 : computedWidth
- const dimensions = image.getDisplayDimensions(aspectRatio, sideLength)
+ const dimensions = image.getResizedDimensions(aspectRatio, sideLength)
const imgContainerStyles = {width: sideLength, height: sideLength}
const imgControlStyles = {
@@ -196,7 +195,7 @@ export const Component = observer(function ({image, gallery}: Props) {
+>(function DraggableScrollView(props, ref) {
+ const {refs} = useDraggableScroll({
+ outerRef: ref,
+ cursor: 'grab', // optional, default
+ })
+
+ return
diff --git a/src/view/com/pager/FeedsTabBarMobile.tsx b/src/view/com/pager/FeedsTabBarMobile.tsx
index 725c4460..9c713881 100644
--- a/src/view/com/pager/FeedsTabBarMobile.tsx
+++ b/src/view/com/pager/FeedsTabBarMobile.tsx
@@ -1,12 +1,17 @@
-import React from 'react'
-import {Animated, StyleSheet, TouchableOpacity} from 'react-native'
+import React, {useMemo} from 'react'
+import {Animated, StyleSheet, TouchableOpacity, View} from 'react-native'
import {observer} from 'mobx-react-lite'
import {TabBar} from 'view/com/pager/TabBar'
import {RenderTabBarFnProps} from 'view/com/pager/Pager'
-import {UserAvatar} from '../util/UserAvatar'
import {useStores} from 'state/index'
import {usePalette} from 'lib/hooks/usePalette'
import {useAnimatedValue} from 'lib/hooks/useAnimatedValue'
+import {useColorSchemeStyle} from 'lib/hooks/useColorSchemeStyle'
+import {Link} from '../util/Link'
+import {Text} from '../util/text/Text'
+import {CogIcon} from 'lib/icons'
+import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
+import {s} from 'lib/styles'
export const FeedsTabBar = observer(
(
@@ -28,25 +33,51 @@ export const FeedsTabBar = observer(
transform: [{translateY: Animated.multiply(interp, -100)}],
}
+ const brandBlue = useColorSchemeStyle(s.brandBlue, s.blue3)
+
const onPressAvi = React.useCallback(() => {
store.shell.openDrawer()
}, [store])
+ const items = useMemo(
+ () => ['Following', ...store.me.savedFeeds.pinnedFeedNames],
+ [store.me.savedFeeds.pinnedFeedNames],
+ )
+
return (
-
-
+
+
+
+
+
+ Bluesky
+
+
+
@@ -61,13 +92,20 @@ const styles = StyleSheet.create({
left: 0,
right: 0,
top: 0,
- flexDirection: 'row',
+ flexDirection: 'column',
alignItems: 'center',
- paddingHorizontal: 18,
borderBottomWidth: 1,
},
- tabBarAvi: {
- marginTop: 1,
- marginRight: 18,
+ topBar: {
+ flexDirection: 'row',
+ justifyContent: 'space-between',
+ alignItems: 'center',
+ paddingHorizontal: 18,
+ paddingTop: 8,
+ paddingBottom: 2,
+ width: '100%',
+ },
+ title: {
+ fontSize: 21,
},
})
diff --git a/src/view/com/pager/Pager.tsx b/src/view/com/pager/Pager.tsx
index 34747db6..e2c8bf6d 100644
--- a/src/view/com/pager/Pager.tsx
+++ b/src/view/com/pager/Pager.tsx
@@ -1,16 +1,17 @@
-import React from 'react'
+import React, {forwardRef} from 'react'
import {Animated, View} from 'react-native'
import PagerView, {PagerViewOnPageSelectedEvent} from 'react-native-pager-view'
-import {useAnimatedValue} from 'lib/hooks/useAnimatedValue'
import {s} from 'lib/styles'
export type PageSelectedEvent = PagerViewOnPageSelectedEvent
const AnimatedPagerView = Animated.createAnimatedComponent(PagerView)
+export interface PagerRef {
+ setPage: (index: number) => void
+}
+
export interface RenderTabBarFnProps {
selectedPage: number
- position: Animated.Value
- offset: Animated.Value
onSelect?: (index: number) => void
}
export type RenderTabBarFn = (props: RenderTabBarFnProps) => JSX.Element
@@ -22,68 +23,60 @@ interface Props {
onPageSelected?: (index: number) => void
testID?: string
}
-export const Pager = ({
- children,
- tabBarPosition = 'top',
- initialPage = 0,
- renderTabBar,
- onPageSelected,
- testID,
-}: React.PropsWithChildren) => {
- const [selectedPage, setSelectedPage] = React.useState(0)
- const position = useAnimatedValue(0)
- const offset = useAnimatedValue(0)
- const pagerView = React.useRef()
+export const Pager = forwardRef>(
+ (
+ {
+ children,
+ tabBarPosition = 'top',
+ initialPage = 0,
+ renderTabBar,
+ onPageSelected,
+ testID,
+ }: React.PropsWithChildren,
+ ref,
+ ) => {
+ const [selectedPage, setSelectedPage] = React.useState(0)
+ const pagerView = React.useRef()
- const onPageSelectedInner = React.useCallback(
- (e: PageSelectedEvent) => {
- setSelectedPage(e.nativeEvent.position)
- onPageSelected?.(e.nativeEvent.position)
- },
- [setSelectedPage, onPageSelected],
- )
+ React.useImperativeHandle(ref, () => ({
+ setPage: (index: number) => pagerView.current?.setPage(index),
+ }))
- const onTabBarSelect = React.useCallback(
- (index: number) => {
- pagerView.current?.setPage(index)
- },
- [pagerView],
- )
+ const onPageSelectedInner = React.useCallback(
+ (e: PageSelectedEvent) => {
+ setSelectedPage(e.nativeEvent.position)
+ onPageSelected?.(e.nativeEvent.position)
+ },
+ [setSelectedPage, onPageSelected],
+ )
- return (
-
- {tabBarPosition === 'top' &&
- renderTabBar({
- selectedPage,
- position,
- offset,
- onSelect: onTabBarSelect,
- })}
-
- {children}
-
- {tabBarPosition === 'bottom' &&
- renderTabBar({
- selectedPage,
- position,
- offset,
- onSelect: onTabBarSelect,
- })}
-
- )
-}
+ const onTabBarSelect = React.useCallback(
+ (index: number) => {
+ pagerView.current?.setPage(index)
+ },
+ [pagerView],
+ )
+
+ return (
+
+ {tabBarPosition === 'top' &&
+ renderTabBar({
+ selectedPage,
+ onSelect: onTabBarSelect,
+ })}
+
+ {children}
+
+ {tabBarPosition === 'bottom' &&
+ renderTabBar({
+ selectedPage,
+ onSelect: onTabBarSelect,
+ })}
+
+ )
+ },
+)
diff --git a/src/view/com/pager/Pager.web.tsx b/src/view/com/pager/Pager.web.tsx
index 107497f6..7be2b11e 100644
--- a/src/view/com/pager/Pager.web.tsx
+++ b/src/view/com/pager/Pager.web.tsx
@@ -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) => {
- 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,
+ 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 (
-
- {tabBarPosition === 'top' &&
- renderTabBar({
- selectedPage,
- position,
- offset,
- onSelect: onTabBarSelect,
- })}
- {React.Children.map(children, (child, i) => (
-
- {child}
-
- ))}
- {tabBarPosition === 'bottom' &&
- renderTabBar({
- selectedPage,
- position,
- offset,
- onSelect: onTabBarSelect,
- })}
-
- )
-}
+ const onTabBarSelect = React.useCallback(
+ (index: number) => {
+ setSelectedPage(index)
+ onPageSelected?.(index)
+ },
+ [setSelectedPage, onPageSelected],
+ )
+
+ return (
+
+ {tabBarPosition === 'top' &&
+ renderTabBar({
+ selectedPage,
+ onSelect: onTabBarSelect,
+ })}
+ {React.Children.map(children, (child, i) => (
+
+ {child}
+
+ ))}
+ {tabBarPosition === 'bottom' &&
+ renderTabBar({
+ selectedPage,
+ onSelect: onTabBarSelect,
+ })}
+
+ )
+ },
+)
diff --git a/src/view/com/pager/TabBar.tsx b/src/view/com/pager/TabBar.tsx
index a0b72a93..d7121fde 100644
--- a/src/view/com/pager/TabBar.tsx
+++ b/src/view/com/pager/TabBar.tsx
@@ -1,22 +1,22 @@
-import React, {createRef, useState, useMemo, useRef} from 'react'
-import {Animated, StyleSheet, View} from 'react-native'
+import React, {
+ useRef,
+ createRef,
+ useMemo,
+ useEffect,
+ useState,
+ useCallback,
+} from 'react'
+import {StyleSheet, View, ScrollView} from 'react-native'
import {Text} from '../util/text/Text'
import {PressableWithHover} from '../util/PressableWithHover'
import {usePalette} from 'lib/hooks/usePalette'
-import {isDesktopWeb} from 'platform/detection'
-
-interface Layout {
- x: number
- width: number
-}
+import {isDesktopWeb, isMobileWeb} from 'platform/detection'
+import {DraggableScrollView} from './DraggableScrollView'
export interface TabBarProps {
testID?: string
selectedPage: number
items: string[]
- position: Animated.Value
- offset: Animated.Value
- indicatorPosition?: 'top' | 'bottom'
indicatorColor?: string
onSelect?: (index: number) => void
onPressSelected?: () => void
@@ -26,69 +26,27 @@ export function TabBar({
testID,
selectedPage,
items,
- position,
- offset,
- indicatorPosition = 'bottom',
indicatorColor,
onSelect,
onPressSelected,
}: TabBarProps) {
const pal = usePalette('default')
- const [itemLayouts, setItemLayouts] = useState(
- items.map(() => ({x: 0, width: 0})),
- )
+ const scrollElRef = useRef(null)
+ const [itemXs, setItemXs] = useState([])
const itemRefs = useMemo(
() => Array.from({length: items.length}).map(() => createRef()),
[items.length],
)
- const panX = Animated.add(position, offset)
- const containerRef = useRef(null)
+ const indicatorStyle = useMemo(
+ () => ({borderBottomColor: indicatorColor || pal.colors.link}),
+ [indicatorColor, pal],
+ )
- const indicatorStyle = {
- backgroundColor: indicatorColor || pal.colors.link,
- bottom:
- indicatorPosition === 'bottom' ? (isDesktopWeb ? 0 : -1) : undefined,
- top: indicatorPosition === 'top' ? (isDesktopWeb ? 0 : -1) : undefined,
- transform: [
- {
- translateX: panX.interpolate({
- inputRange: items.map((_item, i) => i),
- outputRange: itemLayouts.map(l => l.x + l.width / 2),
- }),
- },
- {
- scaleX: panX.interpolate({
- inputRange: items.map((_item, i) => i),
- outputRange: itemLayouts.map(l => l.width),
- }),
- },
- ],
- }
+ useEffect(() => {
+ scrollElRef.current?.scrollTo({x: itemXs[selectedPage] || 0})
+ }, [scrollElRef, itemXs, selectedPage])
- const onLayout = React.useCallback(() => {
- const promises = []
- for (let i = 0; i < items.length; i++) {
- promises.push(
- new Promise(resolve => {
- if (!containerRef.current || !itemRefs[i].current) {
- return resolve({x: 0, width: 0})
- }
-
- itemRefs[i].current?.measureLayout(
- containerRef.current,
- (x: number, _y: number, width: number) => {
- resolve({x, width})
- },
- )
- }),
- )
- }
- Promise.all(promises).then((layouts: Layout[]) => {
- setItemLayouts(layouts)
- })
- }, [containerRef, itemRefs, setItemLayouts, items.length])
-
- const onPressItem = React.useCallback(
+ const onPressItem = useCallback(
(index: number) => {
onSelect?.(index)
if (index === selectedPage) {
@@ -98,33 +56,51 @@ export function TabBar({
[onSelect, onPressSelected, selectedPage],
)
+ const onLayout = React.useCallback(() => {
+ const promises = []
+ for (let i = 0; i < items.length; i++) {
+ promises.push(
+ new Promise(resolve => {
+ if (!itemRefs[i].current) {
+ return resolve(0)
+ }
+
+ itemRefs[i].current?.measure((x: number) => resolve(x))
+ }),
+ )
+ }
+ Promise.all(promises).then((Xs: number[]) => {
+ setItemXs(Xs)
+ })
+ }, [itemRefs, setItemXs, items.length])
+
return (
-
- onPressItem(i)}>
-
- {item}
-
-
- )
- })}
+
+
+ {items.map((item, i) => {
+ const selected = i === selectedPage
+ return (
+ onPressItem(i)}>
+
+ {item}
+
+
+ )
+ })}
+
)
}
@@ -133,45 +109,39 @@ const styles = isDesktopWeb
? StyleSheet.create({
outer: {
flexDirection: 'row',
- paddingHorizontal: 18,
+ width: 598,
},
- itemTop: {
- paddingTop: 16,
- paddingBottom: 14,
- paddingHorizontal: 12,
+ contentContainer: {
+ columnGap: 8,
+ marginLeft: 14,
+ paddingRight: 14,
+ backgroundColor: 'transparent',
},
- itemBottom: {
+ item: {
paddingTop: 14,
- paddingBottom: 16,
- paddingHorizontal: 12,
- },
- indicator: {
- position: 'absolute',
- left: 0,
- width: 1,
- height: 3,
- zIndex: 1,
+ paddingBottom: 12,
+ paddingHorizontal: 10,
+ borderBottomWidth: 3,
+ borderBottomColor: 'transparent',
},
})
: StyleSheet.create({
outer: {
+ flex: 1,
flexDirection: 'row',
- paddingHorizontal: 14,
+ backgroundColor: 'transparent',
},
- itemTop: {
+ contentContainer: {
+ columnGap: isMobileWeb ? 0 : 20,
+ marginLeft: isMobileWeb ? 0 : 18,
+ paddingRight: isMobileWeb ? 0 : 36,
+ backgroundColor: 'transparent',
+ },
+ item: {
paddingTop: 10,
paddingBottom: 10,
- marginRight: 24,
- },
- itemBottom: {
- paddingTop: 8,
- paddingBottom: 12,
- marginRight: 24,
- },
- indicator: {
- position: 'absolute',
- left: 0,
- width: 1,
- height: 3,
+ paddingHorizontal: isMobileWeb ? 8 : 0,
+ borderBottomWidth: 3,
+ borderBottomColor: 'transparent',
},
})
diff --git a/src/view/com/post-thread/PostThreadItem.tsx b/src/view/com/post-thread/PostThreadItem.tsx
index 084e30a2..4ba2e1a4 100644
--- a/src/view/com/post-thread/PostThreadItem.tsx
+++ b/src/view/com/post-thread/PostThreadItem.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, {useCallback, useMemo} from 'react'
import {observer} from 'mobx-react-lite'
import {Linking, StyleSheet, View} from 'react-native'
import Clipboard from '@react-native-clipboard/clipboard'
@@ -99,7 +99,11 @@ export const PostThreadItem = observer(function PostThreadItem({
const onOpenTranslate = React.useCallback(() => {
Linking.openURL(
- encodeURI(`https://translate.google.com/#auto|en|${record?.text || ''}`),
+ encodeURI(
+ `https://translate.google.com/?sl=auto&tl=en&text=${
+ record?.text || ''
+ }`,
+ ),
)
}, [record])
@@ -129,6 +133,40 @@ export const PostThreadItem = observer(function PostThreadItem({
)
}, [item, store])
+ const accessibilityActions = useMemo(
+ () => [
+ {
+ name: 'reply',
+ label: 'Reply',
+ },
+ {
+ name: 'repost',
+ label: item.post.viewer?.repost ? 'Undo repost' : 'Repost',
+ },
+ {name: 'like', label: item.post.viewer?.like ? 'Unlike' : 'Like'},
+ ],
+ [item.post.viewer?.like, item.post.viewer?.repost],
+ )
+
+ const onAccessibilityAction = useCallback(
+ event => {
+ switch (event.nativeEvent.actionName) {
+ case 'like':
+ onPressToggleLike()
+ break
+ case 'reply':
+ onPressReply()
+ break
+ case 'repost':
+ onPressToggleRepost()
+ break
+ default:
+ break
+ }
+ },
+ [onPressReply, onPressToggleLike, onPressToggleRepost],
+ )
+
if (!record) {
return
+ moderation={item.moderation.thread}
+ accessibilityActions={accessibilityActions}
+ onAccessibilityAction={onAccessibilityAction}>
{
Linking.openURL(
encodeURI(
- `https://translate.google.com/#auto|en|${record?.text || ''}`,
+ `https://translate.google.com/?sl=auto&tl=en&text=${
+ record?.text || ''
+ }`,
),
)
}, [record])
@@ -203,11 +205,47 @@ const PostLoaded = observer(
)
}, [item, setDeleted, store])
+ const accessibilityActions = useMemo(
+ () => [
+ {
+ name: 'reply',
+ label: 'Reply',
+ },
+ {
+ name: 'repost',
+ label: item.post.viewer?.repost ? 'Undo repost' : 'Repost',
+ },
+ {name: 'like', label: item.post.viewer?.like ? 'Unlike' : 'Like'},
+ ],
+ [item.post.viewer?.like, item.post.viewer?.repost],
+ )
+
+ const onAccessibilityAction = useCallback(
+ event => {
+ switch (event.nativeEvent.actionName) {
+ case 'like':
+ onPressToggleLike()
+ break
+ case 'reply':
+ onPressReply()
+ break
+ case 'repost':
+ onPressToggleRepost()
+ break
+ default:
+ break
+ }
+ },
+ [onPressReply, onPressToggleLike, onPressToggleRepost],
+ )
+
return (
+ moderation={item.moderation.list}
+ accessibilityActions={accessibilityActions}
+ onAccessibilityAction={onAccessibilityAction}>
{showReplyLine &&
diff --git a/src/view/com/posts/WhatsHotEmptyState.tsx b/src/view/com/posts/CustomFeedEmptyState.tsx
similarity index 69%
rename from src/view/com/posts/WhatsHotEmptyState.tsx
rename to src/view/com/posts/CustomFeedEmptyState.tsx
index ade94ca3..e83a94f0 100644
--- a/src/view/com/posts/WhatsHotEmptyState.tsx
+++ b/src/view/com/posts/CustomFeedEmptyState.tsx
@@ -1,5 +1,6 @@
import React from 'react'
import {StyleSheet, View} from 'react-native'
+import {useNavigation} from '@react-navigation/native'
import {
FontAwesomeIcon,
FontAwesomeIconStyle,
@@ -7,18 +8,24 @@ import {
import {Text} from '../util/text/Text'
import {Button} from '../util/forms/Button'
import {MagnifyingGlassIcon} from 'lib/icons'
-import {useStores} from 'state/index'
+import {NavigationProp} from 'lib/routes/types'
import {usePalette} from 'lib/hooks/usePalette'
import {s} from 'lib/styles'
+import {isWeb} from 'platform/detection'
-export function WhatsHotEmptyState() {
+export function CustomFeedEmptyState() {
const pal = usePalette('default')
const palInverted = usePalette('inverted')
- const store = useStores()
+ const navigation = useNavigation()
- const onPressSettings = React.useCallback(() => {
- store.shell.openModal({name: 'content-languages-settings'})
- }, [store])
+ const onPressFindAccounts = React.useCallback(() => {
+ if (isWeb) {
+ navigation.navigate('Search', {})
+ } else {
+ navigation.navigate('SearchTab')
+ navigation.popToTop()
+ }
+ }, [navigation])
return (
@@ -26,12 +33,15 @@ export function WhatsHotEmptyState() {
- Your What's Hot feed is empty! This is because there aren't enough users
- posting in your selected language.
+ This feed is empty! You may need to follow more users or tune your
+ language settings.
-
+
- Update my settings
+ Find accounts to follow
@@ -41,11 +45,15 @@ export const Feed = observer(function Feed({
scrollElRef?: MutableRefObject | null>
onPressTryAgain?: () => void
onScroll?: OnScrollCb
+ scrollEventThrottle?: number
renderEmptyState?: () => JSX.Element
testID?: string
headerOffset?: number
+ ListHeaderComponent?: () => JSX.Element
+ extraData?: any
}) {
const pal = usePalette('default')
+ const theme = useTheme()
const {track} = useAnalytics()
const [isRefreshing, setIsRefreshing] = React.useState(false)
@@ -163,6 +171,7 @@ export const Feed = observer(function Feed({
keyExtractor={item => item._reactKey}
renderItem={renderItem}
ListFooterComponent={FeedFooter}
+ ListHeaderComponent={ListHeaderComponent}
refreshControl={
+ moderation={moderation}
+ accessibilityActions={accessibilityActions}
+ onAccessibilityAction={onAccessibilityAction}>
{isThreadChild && (
()
const onPressFindAccounts = React.useCallback(() => {
- navigation.navigate('SearchTab')
- navigation.popToTop()
+ if (isWeb) {
+ navigation.navigate('Search', {})
+ } else {
+ navigation.navigate('SearchTab')
+ navigation.popToTop()
+ }
}, [navigation])
return (
diff --git a/src/view/com/posts/MultiFeed.tsx b/src/view/com/posts/MultiFeed.tsx
new file mode 100644
index 00000000..db353909
--- /dev/null
+++ b/src/view/com/posts/MultiFeed.tsx
@@ -0,0 +1,246 @@
+import React, {MutableRefObject} from 'react'
+import {observer} from 'mobx-react-lite'
+import {
+ ActivityIndicator,
+ RefreshControl,
+ StyleProp,
+ StyleSheet,
+ View,
+ ViewStyle,
+} from 'react-native'
+import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
+import {FlatList} from '../util/Views'
+import {PostFeedLoadingPlaceholder} from '../util/LoadingPlaceholder'
+import {ErrorMessage} from '../util/error/ErrorMessage'
+import {PostsMultiFeedModel, MultiFeedItem} from 'state/models/feeds/multi-feed'
+import {FeedSlice} from './FeedSlice'
+import {Text} from '../util/text/Text'
+import {Link} from '../util/Link'
+import {UserAvatar} from '../util/UserAvatar'
+import {OnScrollCb} from 'lib/hooks/useOnMainScroll'
+import {s} from 'lib/styles'
+import {useAnalytics} from 'lib/analytics'
+import {usePalette} from 'lib/hooks/usePalette'
+import {useTheme} from 'lib/ThemeContext'
+import {isDesktopWeb} from 'platform/detection'
+import {CogIcon} from 'lib/icons'
+
+export const MultiFeed = observer(function Feed({
+ multifeed,
+ style,
+ showPostFollowBtn,
+ scrollElRef,
+ onScroll,
+ scrollEventThrottle,
+ testID,
+ headerOffset = 0,
+ extraData,
+}: {
+ multifeed: PostsMultiFeedModel
+ style?: StyleProp
+ showPostFollowBtn?: boolean
+ scrollElRef?: MutableRefObject | null>
+ onPressTryAgain?: () => void
+ onScroll?: OnScrollCb
+ scrollEventThrottle?: number
+ renderEmptyState?: () => JSX.Element
+ testID?: string
+ headerOffset?: number
+ extraData?: any
+}) {
+ const pal = usePalette('default')
+ const theme = useTheme()
+ const {track} = useAnalytics()
+ const [isRefreshing, setIsRefreshing] = React.useState(false)
+
+ // events
+ // =
+
+ const onRefresh = React.useCallback(async () => {
+ track('MultiFeed:onRefresh')
+ setIsRefreshing(true)
+ try {
+ await multifeed.refresh()
+ } catch (err) {
+ multifeed.rootStore.log.error('Failed to refresh posts feed', err)
+ }
+ setIsRefreshing(false)
+ }, [multifeed, track, setIsRefreshing])
+
+ const onEndReached = React.useCallback(async () => {
+ track('MultiFeed:onEndReached')
+ try {
+ await multifeed.loadMore()
+ } catch (err) {
+ multifeed.rootStore.log.error('Failed to load more posts', err)
+ }
+ }, [multifeed, track])
+
+ // rendering
+ // =
+
+ const renderItem = React.useCallback(
+ ({item}: {item: MultiFeedItem}) => {
+ if (item.type === 'header') {
+ if (isDesktopWeb) {
+ return (
+
+
+ My Feeds
+
+
+ )
+ }
+ return
+
+ {item.title}
+
+
+ )
+ } else if (item.type === 'feed-slice') {
+ return (
+
+ See more from {item.title}
+
+
+ Discover new feeds
+
+
+ )
+ }
+ return null
+ },
+ [showPostFollowBtn, pal],
+ )
+
+ const FeedFooter = React.useCallback(
+ () =>
+ multifeed.isLoading && !isRefreshing ? (
+
+
+ ) : (
+
+ {multifeed.items.length > 0 && (
+ item._reactKey}
+ renderItem={renderItem}
+ ListFooterComponent={FeedFooter}
+ refreshControl={
+
+ )
+})
+
+const styles = StyleSheet.create({
+ container: {
+ height: '100%',
+ },
+ header: {
+ borderTopWidth: 1,
+ marginBottom: 4,
+ },
+ headerDesktop: {
+ flexDirection: 'row',
+ alignItems: 'center',
+ justifyContent: 'space-between',
+ borderBottomWidth: 1,
+ marginBottom: 4,
+ paddingHorizontal: 16,
+ paddingVertical: 8,
+ },
+ feedHeader: {
+ flexDirection: 'row',
+ gap: 8,
+ alignItems: 'center',
+ paddingHorizontal: 16,
+ paddingBottom: 8,
+ marginTop: 12,
+ },
+ feedHeaderTitle: {
+ fontWeight: 'bold',
+ },
+ feedFooter: {
+ flexDirection: 'row',
+ justifyContent: 'space-between',
+ alignItems: 'center',
+ paddingHorizontal: 16,
+ paddingVertical: 16,
+ marginBottom: 12,
+ borderTopWidth: 1,
+ borderBottomWidth: 1,
+ },
+ footerLink: {
+ flexDirection: 'row',
+ alignItems: 'center',
+ justifyContent: 'center',
+ borderRadius: 8,
+ paddingHorizontal: 14,
+ paddingVertical: 12,
+ marginHorizontal: 8,
+ marginBottom: 8,
+ gap: 8,
+ },
+ loadMore: {
+ paddingTop: 10,
+ },
+})
diff --git a/src/view/com/profile/FollowButton.tsx b/src/view/com/profile/FollowButton.tsx
index 7715358c..fcb2225d 100644
--- a/src/view/com/profile/FollowButton.tsx
+++ b/src/view/com/profile/FollowButton.tsx
@@ -33,7 +33,7 @@ export const FollowButton = observer(
store.me.follows.removeFollow(did)
onToggleFollow?.(false)
} catch (e: any) {
- store.log.error('Failed fo delete follow', e)
+ store.log.error('Failed to delete follow', e)
Toast.show('An issue occurred, please try again.')
}
} else if (updatedFollowState === FollowState.NotFollowing) {
@@ -42,7 +42,7 @@ export const FollowButton = observer(
store.me.follows.addFollow(did, res.uri)
onToggleFollow?.(true)
} catch (e: any) {
- store.log.error('Failed fo create follow', e)
+ store.log.error('Failed to create follow', e)
Toast.show('An issue occurred, please try again.')
}
}
diff --git a/src/view/com/profile/ProfileHeader.tsx b/src/view/com/profile/ProfileHeader.tsx
index 3b9ca67c..9b4df098 100644
--- a/src/view/com/profile/ProfileHeader.tsx
+++ b/src/view/com/profile/ProfileHeader.tsx
@@ -218,7 +218,7 @@ const ProfileHeaderLoaded = observer(
onRefreshAll()
Toast.show('Account unblocked')
} catch (e: any) {
- store.log.error('Failed to block unaccount', e)
+ store.log.error('Failed to unblock account', e)
Toast.show(`There was an issue! ${e.toString()}`)
}
},
@@ -289,6 +289,9 @@ const ProfileHeaderLoaded = observer(
])
const blockHide = !isMe && (view.viewer.blocking || view.viewer.blockedBy)
+ const following = formatCount(view.followsCount)
+ const followers = formatCount(view.followersCount)
+ const pluralizedFollowers = pluralize(view.followersCount, 'follower')
return (
@@ -394,13 +397,13 @@ const ProfileHeaderLoaded = observer(
style={[s.flexRow, s.mr10]}
onPress={onPressFollowers}
accessibilityRole="button"
- accessibilityLabel={`Show ${view.handle}'s followers`}
- accessibilityHint={`Shows folks following ${view.handle}`}>
+ accessibilityLabel={`${followers} ${pluralizedFollowers}`}
+ accessibilityHint={'Opens followers list'}>
- {formatCount(view.followersCount)}
+ {followers}
- {pluralize(view.followersCount, 'follower')}
+ {pluralizedFollowers}
+ accessibilityLabel={`${following} following`}
+ accessibilityHint={'Opens following list'}>
- {formatCount(view.followsCount)}
+ {following}
following
diff --git a/src/view/com/search/HeaderWithInput.tsx b/src/view/com/search/HeaderWithInput.tsx
index 7a9e0cc6..d4467371 100644
--- a/src/view/com/search/HeaderWithInput.tsx
+++ b/src/view/com/search/HeaderWithInput.tsx
@@ -4,7 +4,6 @@ import {
FontAwesomeIcon,
FontAwesomeIconStyle,
} from '@fortawesome/react-native-fontawesome'
-import {UserAvatar} from 'view/com/util/UserAvatar'
import {Text} from 'view/com/util/text/Text'
import {MagnifyingGlassIcon} from 'lib/icons'
import {useTheme} from 'lib/ThemeContext'
@@ -56,9 +55,9 @@ export function HeaderWithInput({
hitSlop={MENU_HITSLOP}
style={styles.headerMenuBtn}
accessibilityRole="button"
- accessibilityLabel="Back"
- accessibilityHint="">
-
+
+
+ )
+ }
return (
{
+ if (type === 'algo' || type === 'list') {
+ return {
+ width: size,
+ height: size,
+ borderRadius: 8,
+ }
+ }
+ return {
+ width: size,
+ height: size,
+ borderRadius: Math.floor(size / 2),
+ }
+ }, [type, size])
+
const dropdownItems = useMemo(
() => [
!isWeb && {
@@ -146,16 +208,12 @@ export function UserAvatar({
{avatar ? (
) : (
-
)
@@ -201,11 +255,6 @@ const styles = StyleSheet.create({
justifyContent: 'center',
backgroundColor: colors.gray5,
},
- avatarImage: {
- width: 80,
- height: 80,
- borderRadius: 40,
- },
warningIconContainer: {
position: 'absolute',
right: 0,
diff --git a/src/view/com/util/ViewHeader.tsx b/src/view/com/util/ViewHeader.tsx
index 97802394..732a46d0 100644
--- a/src/view/com/util/ViewHeader.tsx
+++ b/src/view/com/util/ViewHeader.tsx
@@ -4,7 +4,6 @@ import {Animated, StyleSheet, TouchableOpacity, View} from 'react-native'
import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
import {useNavigation} from '@react-navigation/native'
import {CenteredView} from './Views'
-import {UserAvatar} from './UserAvatar'
import {Text} from './text/Text'
import {useStores} from 'state/index'
import {usePalette} from 'lib/hooks/usePalette'
@@ -20,12 +19,14 @@ export const ViewHeader = observer(function ({
canGoBack,
hideOnScroll,
showOnDesktop,
+ showBorder,
renderButton,
}: {
title: string
canGoBack?: boolean
hideOnScroll?: boolean
showOnDesktop?: boolean
+ showBorder?: boolean
renderButton?: () => JSX.Element
}) {
const pal = usePalette('default')
@@ -57,7 +58,7 @@ export const ViewHeader = observer(function ({
}
return (
-
+
+ accessibilityHint={
+ canGoBack ? '' : 'Access navigation links and settings'
+ }>
{canGoBack ? (
@@ -115,9 +122,11 @@ const Container = observer(
({
children,
hideOnScroll,
+ showBorder,
}: {
children: React.ReactNode
hideOnScroll: boolean
+ showBorder?: boolean
}) => {
const store = useStores()
const pal = usePalette('default')
@@ -145,11 +154,28 @@ const Container = observer(
}
if (!hideOnScroll) {
- return {children}
+ return (
+
+ {children}
+
+ )
}
return (
+ style={[
+ styles.header,
+ pal.view,
+ pal.border,
+ styles.headerFloating,
+ transform,
+ showBorder && styles.border,
+ ]}>
{children}
)
@@ -172,6 +198,9 @@ const styles = StyleSheet.create({
borderBottomWidth: 1,
paddingVertical: 12,
},
+ border: {
+ borderBottomWidth: 1,
+ },
titleContainer: {
marginLeft: 'auto',
diff --git a/src/view/com/util/ViewSelector.tsx b/src/view/com/util/ViewSelector.tsx
index f9ef0945..5b671d06 100644
--- a/src/view/com/util/ViewSelector.tsx
+++ b/src/view/com/util/ViewSelector.tsx
@@ -1,5 +1,5 @@
import React, {useEffect, useState} from 'react'
-import {Pressable, StyleSheet, View} from 'react-native'
+import {Pressable, RefreshControl, StyleSheet, View} from 'react-native'
import {FlatList} from './Views'
import {OnScrollCb} from 'lib/hooks/useOnMainScroll'
import {useColorSchemeStyle} from 'lib/hooks/useColorSchemeStyle'
@@ -41,6 +41,7 @@ export function ViewSelector({
onRefresh?: () => void
onEndReached?: (info: {distanceFromEnd: number}) => void
}) {
+ const pal = usePalette('default')
const [selectedIndex, setSelectedIndex] = useState(0)
// events
@@ -93,10 +94,15 @@ export function ViewSelector({
ListFooterComponent={ListFooterComponent}
// NOTE sticky header disabled on android due to major performance issues -prf
stickyHeaderIndices={isAndroid ? undefined : STICKY_HEADER_INDICES}
- refreshing={refreshing}
onScroll={onScroll}
- onRefresh={onRefresh}
onEndReached={onEndReached}
+ refreshControl={
+
-
+
{children}
diff --git a/src/view/com/util/load-latest/LoadLatestBtn.web.tsx b/src/view/com/util/load-latest/LoadLatestBtn.web.tsx
index 83968502..fefc540c 100644
--- a/src/view/com/util/load-latest/LoadLatestBtn.web.tsx
+++ b/src/view/com/util/load-latest/LoadLatestBtn.web.tsx
@@ -1,8 +1,8 @@
import React from 'react'
import {StyleSheet, TouchableOpacity} from 'react-native'
+import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
import {Text} from '../text/Text'
import {usePalette} from 'lib/hooks/usePalette'
-import {UpIcon} from 'lib/icons'
import {LoadLatestBtn as LoadLatestBtnMobile} from './LoadLatestBtnMobile'
import {isMobileWeb} from 'platform/detection'
@@ -11,51 +11,97 @@ const HITSLOP = {left: 20, top: 20, right: 20, bottom: 20}
export const LoadLatestBtn = ({
onPress,
label,
+ showIndicator,
+ minimalShellMode,
}: {
onPress: () => void
label: string
+ showIndicator: boolean
+ minimalShellMode?: boolean
}) => {
const pal = usePalette('default')
if (isMobileWeb) {
- return
-
-
-
+ <>
+ {showIndicator && (
+
+
+ {label}
+
+
+ )}
+
+
+
+
+
)
}
const styles = StyleSheet.create({
loadLatest: {
flexDirection: 'row',
+ alignItems: 'center',
+ justifyContent: 'center',
position: 'absolute',
left: '50vw',
// @ts-ignore web only -prf
- transform: 'translateX(-50%)',
- top: 60,
- shadowColor: '#000',
- shadowOpacity: 0.2,
- shadowOffset: {width: 0, height: 2},
- shadowRadius: 4,
- paddingLeft: 20,
- paddingRight: 24,
- paddingVertical: 10,
+ transform: 'translateX(-282px)',
+ bottom: 40,
+ width: 54,
+ height: 54,
borderRadius: 30,
borderWidth: 1,
},
icon: {
position: 'relative',
top: 2,
- marginRight: 5,
+ },
+ loadLatestCentered: {
+ flexDirection: 'row',
+ alignItems: 'center',
+ justifyContent: 'center',
+ position: 'absolute',
+ left: '50vw',
+ // @ts-ignore web only -prf
+ transform: 'translateX(-50%)',
+ top: 60,
+ paddingHorizontal: 24,
+ paddingVertical: 14,
+ borderRadius: 30,
+ borderWidth: 1,
+ },
+ loadLatestCenteredMinimal: {
+ top: 20,
},
})
diff --git a/src/view/com/util/load-latest/LoadLatestBtnMobile.tsx b/src/view/com/util/load-latest/LoadLatestBtnMobile.tsx
index 5279696a..412b9b80 100644
--- a/src/view/com/util/load-latest/LoadLatestBtnMobile.tsx
+++ b/src/view/com/util/load-latest/LoadLatestBtnMobile.tsx
@@ -1,23 +1,35 @@
import React from 'react'
-import {StyleSheet, TouchableOpacity} from 'react-native'
+import {StyleSheet, TouchableOpacity, View} from 'react-native'
import {observer} from 'mobx-react-lite'
-import LinearGradient from 'react-native-linear-gradient'
+import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
import {useSafeAreaInsets} from 'react-native-safe-area-context'
-import {Text} from '../text/Text'
-import {colors, gradients} from 'lib/styles'
import {clamp} from 'lodash'
import {useStores} from 'state/index'
+import {usePalette} from 'lib/hooks/usePalette'
+import {colors} from 'lib/styles'
const HITSLOP = {left: 20, top: 20, right: 20, bottom: 20}
export const LoadLatestBtn = observer(
- ({onPress, label}: {onPress: () => void; label: string}) => {
+ ({
+ onPress,
+ label,
+ showIndicator,
+ }: {
+ onPress: () => void
+ label: string
+ showIndicator: boolean
+ minimalShellMode?: boolean // NOTE not used on mobile -prf
+ }) => {
const store = useStores()
+ const pal = usePalette('default')
const safeAreaInsets = useSafeAreaInsets()
return (
-
-
- Load new {label}
-
-
+ accessibilityLabel={label}
+ accessibilityHint="">
+
)
},
@@ -44,19 +49,24 @@ export const LoadLatestBtn = observer(
const styles = StyleSheet.create({
loadLatest: {
position: 'absolute',
- left: 20,
+ left: 18,
bottom: 35,
- shadowColor: '#000',
- shadowOpacity: 0.3,
- shadowOffset: {width: 0, height: 1},
- },
- loadLatestInner: {
+ borderWidth: 1,
+ width: 52,
+ height: 52,
+ borderRadius: 26,
flexDirection: 'row',
- paddingHorizontal: 14,
- paddingVertical: 10,
- borderRadius: 30,
+ alignItems: 'center',
+ justifyContent: 'center',
},
- loadLatestText: {
- color: colors.white,
+ indicator: {
+ position: 'absolute',
+ top: 3,
+ right: 3,
+ backgroundColor: colors.blue3,
+ width: 12,
+ height: 12,
+ borderRadius: 6,
+ borderWidth: 1,
},
})
diff --git a/src/view/com/util/moderation/ImageHider.tsx b/src/view/com/util/moderation/ImageHider.tsx
index b42c6397..40add5b6 100644
--- a/src/view/com/util/moderation/ImageHider.tsx
+++ b/src/view/com/util/moderation/ImageHider.tsx
@@ -27,6 +27,10 @@ export function ImageHider({
setOverride(false)
}, [setOverride])
+ if (moderation.behavior === ModerationBehaviorCode.Hide) {
+ return null
+ }
+
if (moderation.behavior !== ModerationBehaviorCode.WarnImages) {
return (
@@ -35,10 +39,6 @@ export function ImageHider({
)
}
- if (moderation.behavior === ModerationBehaviorCode.Hide) {
- return null
- }
-
return (
diff --git a/src/view/com/util/moderation/PostHider.tsx b/src/view/com/util/moderation/PostHider.tsx
index 2cc7ea62..50ccf595 100644
--- a/src/view/com/util/moderation/PostHider.tsx
+++ b/src/view/com/util/moderation/PostHider.tsx
@@ -1,11 +1,5 @@
-import React from 'react'
-import {
- StyleProp,
- StyleSheet,
- TouchableOpacity,
- View,
- ViewStyle,
-} from 'react-native'
+import React, {ComponentProps} from 'react'
+import {StyleSheet, TouchableOpacity, View} from 'react-native'
import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
import {usePalette} from 'lib/hooks/usePalette'
import {Link} from '../Link'
@@ -13,18 +7,21 @@ import {Text} from '../text/Text'
import {addStyle} from 'lib/styles'
import {ModerationBehaviorCode, ModerationBehavior} from 'lib/labeling/types'
+interface Props extends ComponentProps {
+ // testID?: string
+ // href?: string
+ // style: StyleProp
+ moderation: ModerationBehavior
+}
+
export function PostHider({
testID,
href,
moderation,
style,
children,
-}: React.PropsWithChildren<{
- testID?: string
- href?: string
- moderation: ModerationBehavior
- style: StyleProp
-}>) {
+ ...props
+}: Props) {
const pal = usePalette('default')
const [override, setOverride] = React.useState(false)
const bg = override ? pal.viewLight : pal.view
@@ -70,7 +67,14 @@ export function PostHider({
// NOTE: any further label enforcement should occur in ContentContainer
return (
- }
+ style={styles.ctrlIconLiked}
size={opts.big ? 22 : 16}
/>
) : (
diff --git a/src/view/com/util/post-ctrls/RepostButton.tsx b/src/view/com/util/post-ctrls/RepostButton.tsx
index e6de4cb1..59f7f6ee 100644
--- a/src/view/com/util/post-ctrls/RepostButton.tsx
+++ b/src/view/com/util/post-ctrls/RepostButton.tsx
@@ -50,11 +50,7 @@ export const RepostButton = ({
style={styles.control}
accessibilityRole="button"
accessibilityLabel={isReposted ? 'Undo repost' : 'Repost'}
- accessibilityHint={
- isReposted
- ? `Remove your repost of the post`
- : `Repost or quote post the post`
- }>
+ accessibilityHint="">
{
if (firstImageToShow !== item.uri) {
- // First image already prefeched above
+ // First image already prefetched above
RNImage.prefetch(item.uri)
}
})
@@ -132,10 +141,11 @@ export function PostEmbeds({
/>
)
- // }
}
}
+ // external link embed
+ // =
if (AppBskyEmbedExternal.isView(embed)) {
const link = embed.external
const youtubeVideoId = getYoutubeVideoId(link.uri)
@@ -153,9 +163,35 @@ export function PostEmbeds({
)
}
+
+ // custom feed embed (i.e. generator view)
+ // =
+ if (
+ AppBskyEmbedRecord.isView(embed) &&
+ AppBskyFeedDefs.isGeneratorView(embed.record)
+ ) {
+ return
+export const CustomFeedScreen = withAuthRequired(
+ observer(({route}: Props) => {
+ const store = useStores()
+ const pal = usePalette('default')
+ const {rkey, name} = route.params
+ const uri = useMemo(
+ () => makeRecordUri(name, 'app.bsky.feed.generator', rkey),
+ [rkey, name],
+ )
+ const scrollElRef = useRef(null)
+ const currentFeed = useCustomFeed(uri)
+ const algoFeed: PostsFeedModel = useMemo(() => {
+ const feed = new PostsFeedModel(store, 'custom', {
+ feed: uri,
+ })
+ feed.setup()
+ return feed
+ }, [store, uri])
+ const isPinned = store.me.savedFeeds.isPinned(uri)
+ const [onMainScroll, isScrolledDown, resetMainScroll] =
+ useOnMainScroll(store)
+ useSetTitle(currentFeed?.displayName)
+
+ const onToggleSaved = React.useCallback(async () => {
+ try {
+ Haptics.default()
+ if (currentFeed?.isSaved) {
+ await currentFeed?.unsave()
+ } else {
+ await currentFeed?.save()
+ }
+ } catch (err) {
+ Toast.show(
+ 'There was an an issue updating your feeds, please check your internet connection and try again.',
+ )
+ store.log.error('Failed up update feeds', {err})
+ }
+ }, [store, currentFeed])
+
+ const onToggleLiked = React.useCallback(async () => {
+ Haptics.default()
+ try {
+ if (currentFeed?.isLiked) {
+ await currentFeed?.unlike()
+ } else {
+ await currentFeed?.like()
+ }
+ } catch (err) {
+ Toast.show(
+ 'There was an an issue contacting the server, please check your internet connection and try again.',
+ )
+ store.log.error('Failed up toggle like', {err})
+ }
+ }, [store, currentFeed])
+
+ const onTogglePinned = React.useCallback(async () => {
+ Haptics.default()
+ store.me.savedFeeds.togglePinnedFeed(currentFeed!).catch(e => {
+ Toast.show('There was an issue contacting the server')
+ store.log.error('Failed to toggle pinned feed', {e})
+ })
+ }, [store, currentFeed])
+
+ const onPressShare = React.useCallback(() => {
+ const url = toShareUrl(`/profile/${name}/feed/${rkey}`)
+ shareUrl(url)
+ }, [name, rkey])
+
+ const onScrollToTop = React.useCallback(() => {
+ scrollElRef.current?.scrollToOffset({offset: 0, animated: true})
+ resetMainScroll()
+ }, [scrollElRef, resetMainScroll])
+
+ const onPressCompose = React.useCallback(() => {
+ store.shell.openComposer({})
+ }, [store])
+
+ const dropdownItems: DropdownItem[] = React.useMemo(() => {
+ let items: DropdownItem[] = [
+ {
+ testID: 'feedHeaderDropdownRemoveBtn',
+ label: 'Remove from my feeds',
+ onPress: onToggleSaved,
+ },
+ {
+ testID: 'feedHeaderDropdownShareBtn',
+ label: 'Share link',
+ onPress: onPressShare,
+ },
+ ]
+ return items
+ }, [onToggleSaved, onPressShare])
+
+ const renderHeaderBtns = React.useCallback(() => {
+ return (
+
+
+ {currentFeed?.isLiked ? (
+
+ {currentFeed?.isSaved ? (
+
+
+ ) : undefined}
+ {currentFeed?.isSaved ? (
+
+
+ ) : (
+
+
+ Add to My Feeds
+
+
+ )}
+
+ )
+ }, [
+ pal,
+ currentFeed?.isSaved,
+ currentFeed?.isLiked,
+ isPinned,
+ onToggleSaved,
+ onTogglePinned,
+ onToggleLiked,
+ dropdownItems,
+ ])
+
+ const renderListHeaderComponent = React.useCallback(() => {
+ return (
+ <>
+
+
+
+ {currentFeed?.displayName}
+
+ {currentFeed && (
+
+ by{' '}
+ {currentFeed.data.creator.did === store.me.did ? (
+ 'you'
+ ) : (
+
+ )}
+ {isDesktopWeb && (
+
+
+
+
+ {currentFeed?.isLiked ? (
+
+
+
+
+ )}
+
+
+
+
+
+ {currentFeed?.data.description ? (
+
+ {currentFeed.data.description}
+
+ ) : null}
+
+ {currentFeed ? (
+
+
+
+
+
+ Feed
+
+
+
+
+ )
+ }, [
+ pal,
+ currentFeed,
+ store.me.did,
+ onToggleSaved,
+ onToggleLiked,
+ onPressShare,
+ name,
+ rkey,
+ isPinned,
+ onTogglePinned,
+ ])
+
+ const renderEmptyState = React.useCallback(() => {
+ return
+
+ )
+ }),
+)
+
+const styles = StyleSheet.create({
+ header: {
+ flexDirection: 'row',
+ gap: 12,
+ paddingHorizontal: 16,
+ paddingTop: 12,
+ paddingBottom: 16,
+ borderTopWidth: 1,
+ },
+ headerBtns: {
+ flexDirection: 'row',
+ alignItems: 'center',
+ },
+ headerBtnsDesktop: {
+ marginTop: 8,
+ gap: 4,
+ },
+ headerAddBtn: {
+ flexDirection: 'row',
+ alignItems: 'center',
+ gap: 4,
+ paddingLeft: 4,
+ },
+ headerDetails: {
+ paddingHorizontal: 16,
+ paddingBottom: 16,
+ },
+ headerDetailsFooter: {
+ flexDirection: 'row',
+ alignItems: 'center',
+ justifyContent: 'space-between',
+ },
+ fakeSelector: {
+ flexDirection: 'row',
+ paddingHorizontal: isDesktopWeb ? 16 : 6,
+ },
+ fakeSelectorItem: {
+ paddingHorizontal: 12,
+ paddingBottom: 8,
+ borderBottomWidth: 3,
+ },
+ liked: {
+ color: colors.red3,
+ },
+ top1: {
+ position: 'relative',
+ top: 1,
+ },
+ top2: {
+ position: 'relative',
+ top: 2,
+ },
+})
diff --git a/src/view/screens/CustomFeedLikedBy.tsx b/src/view/screens/CustomFeedLikedBy.tsx
new file mode 100644
index 00000000..49d0d048
--- /dev/null
+++ b/src/view/screens/CustomFeedLikedBy.tsx
@@ -0,0 +1,29 @@
+import React from 'react'
+import {View} from 'react-native'
+import {useFocusEffect} from '@react-navigation/native'
+import {NativeStackScreenProps, CommonNavigatorParams} from 'lib/routes/types'
+import {withAuthRequired} from 'view/com/auth/withAuthRequired'
+import {ViewHeader} from '../com/util/ViewHeader'
+import {PostLikedBy as PostLikedByComponent} from '../com/post-thread/PostLikedBy'
+import {useStores} from 'state/index'
+import {makeRecordUri} from 'lib/strings/url-helpers'
+
+type Props = NativeStackScreenProps
+export const CustomFeedLikedByScreen = withAuthRequired(({route}: Props) => {
+ const store = useStores()
+ const {name, rkey} = route.params
+ const uri = makeRecordUri(name, 'app.bsky.feed.generator', rkey)
+
+ useFocusEffect(
+ React.useCallback(() => {
+ store.shell.setMinimalShellMode(false)
+ }, [store]),
+ )
+
+ return (
+
+
+ )
+})
diff --git a/src/view/screens/DiscoverFeeds.tsx b/src/view/screens/DiscoverFeeds.tsx
new file mode 100644
index 00000000..cd32ec65
--- /dev/null
+++ b/src/view/screens/DiscoverFeeds.tsx
@@ -0,0 +1,112 @@
+import React from 'react'
+import {RefreshControl, StyleSheet, View} from 'react-native'
+import {observer} from 'mobx-react-lite'
+import {useFocusEffect} from '@react-navigation/native'
+import {NativeStackScreenProps, CommonNavigatorParams} from 'lib/routes/types'
+import {withAuthRequired} from 'view/com/auth/withAuthRequired'
+import {ViewHeader} from '../com/util/ViewHeader'
+import {useStores} from 'state/index'
+import {FeedsDiscoveryModel} from 'state/models/discovery/feeds'
+import {CenteredView, FlatList} from 'view/com/util/Views'
+import {CustomFeed} from 'view/com/feeds/CustomFeed'
+import {Text} from 'view/com/util/text/Text'
+import {isDesktopWeb} from 'platform/detection'
+import {usePalette} from 'lib/hooks/usePalette'
+import {s} from 'lib/styles'
+
+type Props = NativeStackScreenProps
+export const DiscoverFeedsScreen = withAuthRequired(
+ observer(({}: Props) => {
+ const store = useStores()
+ const pal = usePalette('default')
+ const feeds = React.useMemo(() => new FeedsDiscoveryModel(store), [store])
+
+ useFocusEffect(
+ React.useCallback(() => {
+ store.shell.setMinimalShellMode(false)
+ feeds.refresh()
+ }, [store, feeds]),
+ )
+
+ const onRefresh = React.useCallback(() => {
+ store.me.savedFeeds.refresh()
+ }, [store])
+
+ const renderListEmptyComponent = React.useCallback(() => {
+ return (
+
+
+ {feeds.isLoading
+ ? 'Loading...'
+ : `We can't find any feeds for some reason. This is probably an error - try refreshing!`}
+
+
+ )
+ }, [pal, feeds.isLoading])
+
+ const renderItem = React.useCallback(
+ ({item}) => (
+
+
+
+ item.data.uri}
+ contentContainerStyle={styles.contentContainer}
+ refreshControl={
+
+ )
+ }),
+)
+
+const styles = StyleSheet.create({
+ container: {
+ flex: 1,
+ },
+ contentContainer: {
+ paddingBottom: 100,
+ },
+ containerDesktop: {
+ borderLeftWidth: 1,
+ borderRightWidth: 1,
+ },
+ empty: {
+ paddingHorizontal: 18,
+ paddingVertical: 16,
+ borderRadius: 8,
+ marginHorizontal: 18,
+ marginTop: 10,
+ },
+})
diff --git a/src/view/screens/Feeds.tsx b/src/view/screens/Feeds.tsx
new file mode 100644
index 00000000..169f8879
--- /dev/null
+++ b/src/view/screens/Feeds.tsx
@@ -0,0 +1,126 @@
+import React from 'react'
+import {StyleSheet, View} from 'react-native'
+import {useFocusEffect} from '@react-navigation/native'
+import isEqual from 'lodash.isequal'
+import {withAuthRequired} from 'view/com/auth/withAuthRequired'
+import {FlatList} from 'view/com/util/Views'
+import {ViewHeader} from 'view/com/util/ViewHeader'
+import {LoadLatestBtn} from 'view/com/util/load-latest/LoadLatestBtn'
+import {FAB} from 'view/com/util/fab/FAB'
+import {Link} from 'view/com/util/Link'
+import {NativeStackScreenProps, FeedsTabNavigatorParams} from 'lib/routes/types'
+import {observer} from 'mobx-react-lite'
+import {PostsMultiFeedModel} from 'state/models/feeds/multi-feed'
+import {MultiFeed} from 'view/com/posts/MultiFeed'
+import {isDesktopWeb} from 'platform/detection'
+import {usePalette} from 'lib/hooks/usePalette'
+import {useStores} from 'state/index'
+import {useOnMainScroll} from 'lib/hooks/useOnMainScroll'
+import {ComposeIcon2, CogIcon} from 'lib/icons'
+import {s} from 'lib/styles'
+
+const HEADER_OFFSET = isDesktopWeb ? 0 : 40
+
+type Props = NativeStackScreenProps
+export const FeedsScreen = withAuthRequired(
+ observer(({}: Props) => {
+ const pal = usePalette('default')
+ const store = useStores()
+ const flatListRef = React.useRef(null)
+ const multifeed = React.useMemo(
+ () => new PostsMultiFeedModel(store),
+ [store],
+ )
+ const [onMainScroll, isScrolledDown, resetMainScroll] =
+ useOnMainScroll(store)
+
+ const onSoftReset = React.useCallback(() => {
+ flatListRef.current?.scrollToOffset({offset: 0})
+ resetMainScroll()
+ }, [flatListRef, resetMainScroll])
+
+ useFocusEffect(
+ React.useCallback(() => {
+ const softResetSub = store.onScreenSoftReset(onSoftReset)
+ const multifeedCleanup = multifeed.registerListeners()
+ const cleanup = () => {
+ softResetSub.remove()
+ multifeedCleanup()
+ }
+
+ store.shell.setMinimalShellMode(false)
+ return cleanup
+ }, [store, multifeed, onSoftReset]),
+ )
+
+ React.useEffect(() => {
+ if (
+ isEqual(
+ multifeed.feedInfos.map(f => f.uri),
+ store.me.savedFeeds.all.map(f => f.uri),
+ )
+ ) {
+ // no changes
+ return
+ }
+ multifeed.refresh()
+ }, [multifeed, store.me.savedFeeds.all])
+
+ const onPressCompose = React.useCallback(() => {
+ store.shell.openComposer({})
+ }, [store])
+
+ const renderHeaderBtn = React.useCallback(() => {
+ return (
+
+
+ )
+ }),
+)
+
+const styles = StyleSheet.create({
+ container: {
+ flex: 1,
+ },
+})
diff --git a/src/view/screens/Home.tsx b/src/view/screens/Home.tsx
index 0ead6b65..d7a2aa23 100644
--- a/src/view/screens/Home.tsx
+++ b/src/view/screens/Home.tsx
@@ -1,18 +1,20 @@
import React from 'react'
import {FlatList, View} from 'react-native'
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'
import {useTabFocusEffect} from 'lib/hooks/useTabFocusEffect'
import {Feed} from '../com/posts/Feed'
import {FollowingEmptyState} from 'view/com/posts/FollowingEmptyState'
-import {WhatsHotEmptyState} from 'view/com/posts/WhatsHotEmptyState'
+import {CustomFeedEmptyState} from 'view/com/posts/CustomFeedEmptyState'
import {LoadLatestBtn} from '../com/util/load-latest/LoadLatestBtn'
import {FeedsTabBar} from '../com/pager/FeedsTabBar'
-import {Pager, RenderTabBarFnProps} from 'view/com/pager/Pager'
+import {Pager, PagerRef, RenderTabBarFnProps} from 'view/com/pager/Pager'
import {FAB} from '../com/util/fab/FAB'
import {useStores} from 'state/index'
import {s} from 'lib/styles'
@@ -21,30 +23,37 @@ import {useAnalytics} from 'lib/analytics'
import {ComposeIcon2} from 'lib/icons'
import {isDesktopWeb} from 'platform/detection'
-const HEADER_OFFSET = isDesktopWeb ? 50 : 40
+const HEADER_OFFSET = isDesktopWeb ? 50 : 78
const POLL_FREQ = 30e3 // 30sec
type Props = NativeStackScreenProps
export const HomeScreen = withAuthRequired(
observer((_opts: Props) => {
const store = useStores()
+ const pagerRef = React.useRef(null)
const [selectedPage, setSelectedPage] = React.useState(0)
- const [initialLanguages] = React.useState(
- store.preferences.contentLanguages,
- )
-
- const algoFeed: PostsFeedModel = React.useMemo(() => {
- const feed = new PostsFeedModel(store, 'goodstuff', {})
- feed.setup()
- return feed
- }, [store])
+ const [customFeeds, setCustomFeeds] = React.useState([])
React.useEffect(() => {
- // refresh whats hot when lang preferences change
- if (initialLanguages !== store.preferences.contentLanguages) {
- algoFeed.refresh()
+ const {pinned} = store.me.savedFeeds
+ if (
+ isEqual(
+ pinned.map(p => p.uri),
+ customFeeds.map(f => (f.params as GetCustomFeed.QueryParams).feed),
+ )
+ ) {
+ // no changes
+ return
}
- }, [initialLanguages, store.preferences.contentLanguages, algoFeed])
+
+ const feeds = []
+ for (const feed of pinned) {
+ const model = new PostsFeedModel(store, 'custom', {feed: feed.uri})
+ model.setup()
+ feeds.push(model)
+ }
+ setCustomFeeds(feeds)
+ }, [store, store.me.savedFeeds.pinned, customFeeds, setCustomFeeds])
useFocusEffect(
React.useCallback(() => {
@@ -86,18 +95,17 @@ export const HomeScreen = withAuthRequired(
return
+ tabBarPosition="top">
)
}),
@@ -130,7 +142,8 @@ const FeedPage = observer(
renderEmptyState?: () => JSX.Element
}) => {
const store = useStores()
- const onMainScroll = useOnMainScroll(store)
+ const [onMainScroll, isScrolledDown, resetMainScroll] =
+ useOnMainScroll(store)
const {screen, track} = useAnalytics()
const scrollElRef = React.useRef(null)
const {appState} = useAppState({
@@ -158,12 +171,13 @@ const FeedPage = observer(
const scrollToTop = React.useCallback(() => {
scrollElRef.current?.scrollToOffset({offset: -HEADER_OFFSET})
- }, [scrollElRef])
+ resetMainScroll()
+ }, [scrollElRef, resetMainScroll])
const onSoftReset = React.useCallback(() => {
if (isPageFocused) {
- feed.refresh()
scrollToTop()
+ feed.refresh()
}
}, [isPageFocused, scrollToTop, feed])
@@ -188,7 +202,7 @@ const FeedPage = observer(
}
}, [store, doPoll, onSoftReset, screen, feed]),
)
- // fires when tab is actived/deactivated
+ // fires when tab is activated/deactivated
// - check for latest
useTabFocusEffect(
'Home',
@@ -224,6 +238,7 @@ const FeedPage = observer(
feed.refresh()
}, [feed, scrollToTop])
+ const hasNew = feed.hasNewLatest && !feed.isRefreshing
return (
item.did}
+ keyExtractor={item => item.did}
refreshControl={
{
const store = useStores()
- const onMainScroll = useOnMainScroll(store)
+ const [onMainScroll, isScrolledDown, resetMainScroll] =
+ useOnMainScroll(store)
const scrollElRef = React.useRef(null)
const {screen} = useAnalytics()
@@ -37,7 +38,8 @@ export const NotificationsScreen = withAuthRequired(
const scrollToTop = React.useCallback(() => {
scrollElRef.current?.scrollToOffset({offset: 0})
- }, [scrollElRef])
+ resetMainScroll()
+ }, [scrollElRef, resetMainScroll])
const onPressLoadLatest = React.useCallback(() => {
scrollToTop()
@@ -86,6 +88,9 @@ export const NotificationsScreen = withAuthRequired(
),
)
+ const hasNew =
+ store.me.notifications.hasNewLatest &&
+ !store.me.notifications.isRefreshing
return (
)
}),
diff --git a/src/view/screens/Profile.tsx b/src/view/screens/Profile.tsx
index b6d92e46..a34ceb32 100644
--- a/src/view/screens/Profile.tsx
+++ b/src/view/screens/Profile.tsx
@@ -9,7 +9,7 @@ import {CenteredView} from '../com/util/Views'
import {ScreenHider} from 'view/com/util/moderation/ScreenHider'
import {ProfileUiModel, Sections} from 'state/models/ui/profile'
import {useStores} from 'state/index'
-import {PostsFeedSliceModel} from 'state/models/feeds/posts'
+import {PostsFeedSliceModel} from 'state/models/feeds/post'
import {ProfileHeader} from '../com/profile/ProfileHeader'
import {FeedSlice} from '../com/posts/FeedSlice'
import {ListCard} from 'view/com/lists/ListCard'
@@ -25,6 +25,8 @@ import {FAB} from '../com/util/fab/FAB'
import {s, colors} from 'lib/styles'
import {useAnalytics} from 'lib/analytics'
import {ComposeIcon2} from 'lib/icons'
+import {CustomFeed} from 'view/com/feeds/CustomFeed'
+import {CustomFeedModel} from 'state/models/feeds/custom-feed'
import {useSetTitle} from 'lib/hooks/useSetTitle'
import {combinedDisplayName} from 'lib/strings/display-names'
@@ -45,6 +47,10 @@ export const ProfileScreen = withAuthRequired(
)
useSetTitle(combinedDisplayName(uiState.profile))
+ useEffect(() => {
+ setHasSetup(false)
+ }, [route.params.name])
+
useFocusEffect(
React.useCallback(() => {
let aborted = false
@@ -118,6 +124,7 @@ export const ProfileScreen = withAuthRequired(
}, [uiState.showLoadingMoreFooter])
const renderItem = React.useCallback(
(item: any) => {
+ // if section is lists
if (uiState.selectedView === Sections.Lists) {
if (item === ProfileUiModel.LOADING_ITEM) {
return
+
+ )
+ } else if (item === ProfileUiModel.EMPTY_ITEM) {
+ return (
+ - end of feed -
diff --git a/src/view/screens/ProfileList.tsx b/src/view/screens/ProfileList.tsx
index 01f27bae..7c3ed831 100644
--- a/src/view/screens/ProfileList.tsx
+++ b/src/view/screens/ProfileList.tsx
@@ -87,7 +87,7 @@ export const ProfileListScreen = withAuthRequired(
return
{list?.isOwner && (
@@ -148,7 +148,7 @@ export const ProfileListScreen = withAuthRequired(
pal.border,
]}
testID="moderationMutelistsScreen">
-
+
+export const SavedFeeds = withAuthRequired(
+ observer(({}: Props) => {
+ const pal = usePalette('default')
+ const store = useStores()
+ const {screen} = useAnalytics()
+
+ const savedFeeds = useMemo(() => store.me.savedFeeds, [store])
+ useFocusEffect(
+ useCallback(() => {
+ screen('SavedFeeds')
+ store.shell.setMinimalShellMode(false)
+ savedFeeds.refresh()
+ }, [screen, store, savedFeeds]),
+ )
+
+ const renderListEmptyComponent = useCallback(() => {
+ return (
+
+
+ You don't have any saved feeds.
+
+
+ )
+ }, [pal])
+
+ const renderListFooterComponent = useCallback(() => {
+ return (
+ <>
+
+
+ Discover new feeds
+
+
+
+
+
+ Feeds are custom algorithms that users build with a little coding
+ expertise.{' '}
+
+
+ {savedFeeds.isLoading &&
+ item.data.uri}
+ refreshing={savedFeeds.isRefreshing}
+ refreshControl={
+
+ )
+ }),
+)
+
+const ListItem = observer(
+ ({item, drag}: {item: CustomFeedModel; drag: () => void}) => {
+ const pal = usePalette('default')
+ const store = useStores()
+ const savedFeeds = useMemo(() => store.me.savedFeeds, [store])
+ const isPinned = savedFeeds.isPinned(item)
+
+ const onTogglePinned = useCallback(() => {
+ Haptics.default()
+ 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 (
+
+
+
+ {isPinned && isWeb ? (
+
+
+
+
+
+
+ ) : isPinned ? (
+
+
+
+
+
+ )
+ },
+)
+
+const styles = StyleSheet.create({
+ desktopContainer: {
+ borderLeftWidth: 1,
+ borderRightWidth: 1,
+ minHeight: '100vh',
+ },
+ empty: {
+ paddingHorizontal: 20,
+ paddingVertical: 20,
+ borderRadius: 16,
+ marginHorizontal: 24,
+ marginTop: 10,
+ },
+ itemContainer: {
+ flex: 1,
+ flexDirection: 'row',
+ alignItems: 'center',
+ borderBottomWidth: 1,
+ paddingRight: 16,
+ },
+ webArrowButtonsContainer: {
+ paddingLeft: 16,
+ flexDirection: 'column',
+ justifyContent: 'space-around',
+ },
+ webArrowUpButton: {
+ marginBottom: 10,
+ },
+ noBorder: {
+ borderTopWidth: 0,
+ },
+ footerText: {
+ paddingHorizontal: 26,
+ paddingTop: 22,
+ paddingBottom: 100,
+ },
+ footerLinks: {
+ borderBottomWidth: 1,
+ borderTopWidth: 0,
+ },
+ footerLink: {
+ flexDirection: 'row',
+ paddingHorizontal: 26,
+ paddingVertical: 18,
+ gap: 18,
+ },
+})
diff --git a/src/view/screens/SearchMobile.tsx b/src/view/screens/SearchMobile.tsx
index f9b4864b..c9d09373 100644
--- a/src/view/screens/SearchMobile.tsx
+++ b/src/view/screens/SearchMobile.tsx
@@ -35,7 +35,7 @@ export const SearchScreen = withAuthRequired(
const store = useStores()
const scrollViewRef = React.useRef(null)
const flatListRef = React.useRef(null)
- const onMainScroll = useOnMainScroll(store)
+ const [onMainScroll] = useOnMainScroll(store)
const [isInputFocused, setIsInputFocused] = React.useState(false)
const [query, setQuery] = React.useState('')
const autocompleteView = React.useMemo(
diff --git a/src/view/screens/Settings.tsx b/src/view/screens/Settings.tsx
index b222d7db..3f6fa84d 100644
--- a/src/view/screens/Settings.tsx
+++ b/src/view/screens/Settings.tsx
@@ -142,6 +142,11 @@ export const SettingsScreen = withAuthRequired(
store.shell.openModal({name: 'delete-account'})
}, [store])
+ const onPressResetPreferences = React.useCallback(async () => {
+ await store.preferences.reset()
+ Toast.show('Preferences reset')
+ }, [store])
+
return (
+
+
+ Saved Feeds
+
+
+ {__DEV__ ? (
+
+ Reset preferences state
+
+
+ ) : null}
- Build version {AppInfo.appVersion} ({AppInfo.buildVersion})
+ Build version {AppInfo.appVersion}
diff --git a/src/view/shell/Drawer.tsx b/src/view/shell/Drawer.tsx
index 79c713e2..cf863933 100644
--- a/src/view/shell/Drawer.tsx
+++ b/src/view/shell/Drawer.tsx
@@ -2,6 +2,7 @@ import React, {ComponentProps} from 'react'
import {
Linking,
SafeAreaView,
+ ScrollView,
StyleProp,
StyleSheet,
TouchableOpacity,
@@ -27,6 +28,8 @@ import {
MagnifyingGlassIcon2,
MagnifyingGlassIcon2Solid,
UserIconSolid,
+ SatelliteDishIcon,
+ SatelliteDishIconSolid,
HandIcon,
} from 'lib/icons'
import {UserAvatar} from 'view/com/util/UserAvatar'
@@ -39,7 +42,7 @@ import {getTabState, TabState} from 'lib/routes/helpers'
import {NavigationProp} from 'lib/routes/types'
import {useNavigationTabState} from 'lib/hooks/useNavigationTabState'
import {isWeb} from 'platform/detection'
-import {formatCount} from 'view/com/util/numeric/format'
+import {formatCount, formatCountShortOnly} from 'view/com/util/numeric/format'
export const DrawerContent = observer(() => {
const theme = useTheme()
@@ -47,7 +50,7 @@ export const DrawerContent = observer(() => {
const store = useStores()
const navigation = useNavigation()
const {track} = useAnalytics()
- const {isAtHome, isAtSearch, isAtNotifications, isAtMyProfile} =
+ const {isAtHome, isAtSearch, isAtFeeds, isAtNotifications, isAtMyProfile} =
useNavigationTabState()
const {notifications} = store.me
@@ -94,6 +97,11 @@ export const DrawerContent = observer(() => {
onPressTab('MyProfile')
}, [onPressTab])
+ const onPressMyFeeds = React.useCallback(
+ () => onPressTab('Feeds'),
+ [onPressTab],
+ )
+
const onPressModeration = React.useCallback(() => {
track('Menu:ItemClicked', {url: 'Moderation'})
navigation.navigate('Moderation')
@@ -140,19 +148,18 @@ export const DrawerContent = observer(() => {
type="xl"
style={[pal.textLight, styles.profileCardFollowers]}>
- {formatCount(store.me.followersCount ?? 0)}
+ {formatCountShortOnly(store.me.followersCount ?? 0)}
{' '}
{pluralize(store.me.followersCount || 0, 'follower')} ·{' '}
- {formatCount(store.me.followsCount ?? 0)}
+ {formatCountShortOnly(store.me.followsCount ?? 0)}
{' '}
following
+
{
/>
-
{
const store = useStores()
const pal = usePalette('default')
const safeAreaInsets = useSafeAreaInsets()
const {track} = useAnalytics()
- const {isAtHome, isAtSearch, isAtNotifications, isAtMyProfile} =
+ const {isAtHome, isAtSearch, isAtFeeds, isAtNotifications, isAtMyProfile} =
useNavigationTabState()
const {footerMinimalShellTransform} = useMinimalShellMode()
@@ -60,6 +61,10 @@ export const BottomBar = observer(({navigation}: BottomTabBarProps) => {
() => onPressTab('Search'),
[onPressTab],
)
+ const onPressFeeds = React.useCallback(
+ () => onPressTab('Feeds'),
+ [onPressTab],
+ )
const onPressNotifications = React.useCallback(
() => onPressTab('Notifications'),
[onPressTab],
@@ -121,6 +126,28 @@ export const BottomBar = observer(({navigation}: BottomTabBarProps) => {
accessibilityLabel="Search"
accessibilityHint=""
/>
+ {
icon={
{isAtMyProfile ? (
-
+
) : (
-
+
)}
}
diff --git a/src/view/shell/bottom-bar/BottomBarStyles.tsx b/src/view/shell/bottom-bar/BottomBarStyles.tsx
index 3d5adbc9..2414b991 100644
--- a/src/view/shell/bottom-bar/BottomBarStyles.tsx
+++ b/src/view/shell/bottom-bar/BottomBarStyles.tsx
@@ -58,4 +58,9 @@ export const styles = StyleSheet.create({
profileIcon: {
top: -4,
},
+ onProfile: {
+ borderColor: colors.black,
+ borderWidth: 1,
+ borderRadius: 100,
+ },
})
diff --git a/src/view/shell/bottom-bar/BottomBarWeb.tsx b/src/view/shell/bottom-bar/BottomBarWeb.tsx
index b7daac5a..cbaafd1f 100644
--- a/src/view/shell/bottom-bar/BottomBarWeb.tsx
+++ b/src/view/shell/bottom-bar/BottomBarWeb.tsx
@@ -15,6 +15,8 @@ import {
HomeIconSolid,
MagnifyingGlassIcon2,
MagnifyingGlassIcon2Solid,
+ SatelliteDishIcon,
+ SatelliteDishIconSolid,
UserIcon,
} from 'lib/icons'
import {Link} from 'view/com/util/Link'
@@ -61,6 +63,18 @@ export const BottomBarWeb = observer(() => {
)
}}
+
+ {({isActive}) => {
+ const Icon = isActive ? SatelliteDishIconSolid : SatelliteDishIcon
+ return (
+
{({isActive}) => {
const Icon = isActive ? BellIconSolid : BellIcon
diff --git a/src/view/shell/desktop/LeftNav.tsx b/src/view/shell/desktop/LeftNav.tsx
index ba48dd2a..914dfb53 100644
--- a/src/view/shell/desktop/LeftNav.tsx
+++ b/src/view/shell/desktop/LeftNav.tsx
@@ -30,6 +30,8 @@ import {
CogIconSolid,
ComposeIcon2,
HandIcon,
+ SatelliteDishIcon,
+ SatelliteDishIconSolid,
} from 'lib/icons'
import {getCurrentRoute, isTab, isStateAtTabRoot} from 'lib/routes/helpers'
import {NavigationProp} from 'lib/routes/types'
@@ -89,14 +91,17 @@ const NavItem = observer(
const pal = usePalette('default')
const store = useStores()
const [pathName] = React.useMemo(() => router.matchPath(href), [href])
- const currentRouteName = useNavigationState(state => {
+ const currentRouteInfo = useNavigationState(state => {
if (!state) {
- return 'Home'
+ return {name: 'Home'}
}
- return getCurrentRoute(state).name
+ return getCurrentRoute(state)
})
-
- const isCurrent = isTab(currentRouteName, pathName)
+ let isCurrent =
+ currentRouteInfo.name === 'Profile'
+ ? isTab(currentRouteInfo.name, pathName) &&
+ currentRouteInfo.params.name === store.me.handle
+ : isTab(currentRouteInfo.name, pathName)
const {onPress} = useLinkProps({to: href})
const onPressWrapped = React.useCallback(
(e: React.MouseEvent) => {
@@ -195,6 +200,24 @@ export const DesktopLeftNav = observer(function DesktopLeftNav() {
}
label="Search"
/>
+ {
- {isDesktop && (
+ {isDesktop && store.session.hasSession && (
<>