Feed UI update working branch [WIP] (#1420)
* Feeds navigation on right side of desktop (#1403) * Remove home feed header on desktop * Add feeds to right sidebar * Add simple non-moving header to desktop * Improve loading state of custom feed header * Remove log Co-authored-by: Eric Bailey <git@esb.lol> * Remove dead comment --------- Co-authored-by: Eric Bailey <git@esb.lol> * Redesign feeds tab (#1439) * consolidate saved feeds and discover into one screen * Add hoverStyle behavior to <Link> * More UI work on SavedFeeds * Replace satellite icon with a hashtag * Tune My Feeds mobile ui * Handle no results in my feeds * Remove old DiscoverFeeds screen * Remove multifeed * Remove DiscoverFeeds from router * Improve loading placeholders * Small fixes * Fix types * Fix overflow issue on firefox * Add icons prompting to open feeds --------- Co-authored-by: Paul Frazee <pfrazee@gmail.com> * Merge feed prototype [WIP] (#1398) * POC WIP for the mergefeed * Add feed API wrapper and move mergefeed into it * Show feed source in mergefeed * Add lodash.random dep * Improve mergefeed sampling and reliability * Tune source ui element * Improve mergefeed edge condition handling * Remove in-place update of feeds for performance * Fix link on native * Fix bad ref * Improve variety in mergefeed sampling * Fix types * Fix rebase error * Add missing source field (got dropped in merge) * Update find more link * Simplify the right hand feeds nav * Bring back load latest button on desktop & unify impl * Add 'From' to source * Add simple headers to desktop home & notifications * Fix thread view jumping around horizontally * Add unread indicators to desktop headers * Add home feed preference for enabling the mergefeed * Add a preference for showing replies among followed users only (#1448) * Add a preference for showing replies among followed users only * Simplify the reply filter UI * Fix typo * Simplified custom feed header * Add soft reset to custom feed screen * Drop all the in-post translate links except when expanded (#1455) * Update mobile feed settings links to match desktop * Fixes to feeds screen loading states * Bolder active state of feeds tab on mobile web * Fix dark mode issue --------- Co-authored-by: Eric Bailey <git@esb.lol> Co-authored-by: Ansh <anshnanda10@gmail.com>zio/stable
parent
3118e3e933
commit
ea885339cf
|
@ -102,6 +102,7 @@
|
||||||
"lodash.isequal": "^4.5.0",
|
"lodash.isequal": "^4.5.0",
|
||||||
"lodash.omit": "^4.5.0",
|
"lodash.omit": "^4.5.0",
|
||||||
"lodash.once": "^4.1.1",
|
"lodash.once": "^4.1.1",
|
||||||
|
"lodash.random": "^3.2.0",
|
||||||
"lodash.samplesize": "^4.2.0",
|
"lodash.samplesize": "^4.2.0",
|
||||||
"lodash.set": "^4.3.2",
|
"lodash.set": "^4.3.2",
|
||||||
"lodash.shuffle": "^4.2.0",
|
"lodash.shuffle": "^4.2.0",
|
||||||
|
@ -168,6 +169,7 @@
|
||||||
"@types/lodash.isequal": "^4.5.6",
|
"@types/lodash.isequal": "^4.5.6",
|
||||||
"@types/lodash.omit": "^4.5.7",
|
"@types/lodash.omit": "^4.5.7",
|
||||||
"@types/lodash.once": "^4.1.7",
|
"@types/lodash.once": "^4.1.7",
|
||||||
|
"@types/lodash.random": "^3.2.7",
|
||||||
"@types/lodash.samplesize": "^4.2.7",
|
"@types/lodash.samplesize": "^4.2.7",
|
||||||
"@types/lodash.set": "^4.3.7",
|
"@types/lodash.set": "^4.3.7",
|
||||||
"@types/lodash.shuffle": "^4.2.7",
|
"@types/lodash.shuffle": "^4.2.7",
|
||||||
|
|
|
@ -40,7 +40,6 @@ import {FeedsScreen} from './view/screens/Feeds'
|
||||||
import {NotificationsScreen} from './view/screens/Notifications'
|
import {NotificationsScreen} from './view/screens/Notifications'
|
||||||
import {ModerationScreen} from './view/screens/Moderation'
|
import {ModerationScreen} from './view/screens/Moderation'
|
||||||
import {ModerationMuteListsScreen} from './view/screens/ModerationMuteLists'
|
import {ModerationMuteListsScreen} from './view/screens/ModerationMuteLists'
|
||||||
import {DiscoverFeedsScreen} from 'view/screens/DiscoverFeeds'
|
|
||||||
import {NotFoundScreen} from './view/screens/NotFound'
|
import {NotFoundScreen} from './view/screens/NotFound'
|
||||||
import {SettingsScreen} from './view/screens/Settings'
|
import {SettingsScreen} from './view/screens/Settings'
|
||||||
import {ProfileScreen} from './view/screens/Profile'
|
import {ProfileScreen} from './view/screens/Profile'
|
||||||
|
@ -113,11 +112,6 @@ function commonScreens(Stack: typeof HomeTab, unreadCountLabel?: string) {
|
||||||
component={ModerationBlockedAccounts}
|
component={ModerationBlockedAccounts}
|
||||||
options={{title: title('Blocked Accounts')}}
|
options={{title: title('Blocked Accounts')}}
|
||||||
/>
|
/>
|
||||||
<Stack.Screen
|
|
||||||
name="DiscoverFeeds"
|
|
||||||
component={DiscoverFeedsScreen}
|
|
||||||
options={{title: title('Discover Feeds')}}
|
|
||||||
/>
|
|
||||||
<Stack.Screen
|
<Stack.Screen
|
||||||
name="Settings"
|
name="Settings"
|
||||||
component={SettingsScreen}
|
component={SettingsScreen}
|
||||||
|
|
|
@ -4,6 +4,7 @@ import {
|
||||||
AppBskyEmbedRecordWithMedia,
|
AppBskyEmbedRecordWithMedia,
|
||||||
AppBskyEmbedRecord,
|
AppBskyEmbedRecord,
|
||||||
} from '@atproto/api'
|
} from '@atproto/api'
|
||||||
|
import {FeedSourceInfo} from './feed/types'
|
||||||
import {isPostInLanguage} from '../../locale/helpers'
|
import {isPostInLanguage} from '../../locale/helpers'
|
||||||
type FeedViewPost = AppBskyFeedDefs.FeedViewPost
|
type FeedViewPost = AppBskyFeedDefs.FeedViewPost
|
||||||
|
|
||||||
|
@ -64,6 +65,11 @@ export class FeedViewPostsSlice {
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
get source(): FeedSourceInfo | undefined {
|
||||||
|
return this.items.find(item => '__source' in item && !!item.__source)
|
||||||
|
?.__source as FeedSourceInfo
|
||||||
|
}
|
||||||
|
|
||||||
containsUri(uri: string) {
|
containsUri(uri: string) {
|
||||||
return !!this.items.find(item => item.post.uri === uri)
|
return !!this.items.find(item => item.post.uri === uri)
|
||||||
}
|
}
|
||||||
|
@ -91,6 +97,23 @@ export class FeedViewPostsSlice {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
isFollowingAllAuthors(userDid: string) {
|
||||||
|
const item = this.rootItem
|
||||||
|
if (item.post.author.did === userDid) {
|
||||||
|
return true
|
||||||
|
}
|
||||||
|
if (AppBskyFeedDefs.isPostView(item.reply?.parent)) {
|
||||||
|
const parent = item.reply?.parent
|
||||||
|
if (parent?.author.did === userDid) {
|
||||||
|
return true
|
||||||
|
}
|
||||||
|
return (
|
||||||
|
parent?.author.viewer?.following && item.post.author.viewer?.following
|
||||||
|
)
|
||||||
|
}
|
||||||
|
return false
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
export class FeedTuner {
|
export class FeedTuner {
|
||||||
|
@ -222,20 +245,34 @@ export class FeedTuner {
|
||||||
return slices
|
return slices
|
||||||
}
|
}
|
||||||
|
|
||||||
static likedRepliesOnly({repliesThreshold}: {repliesThreshold: number}) {
|
static thresholdRepliesOnly({
|
||||||
|
userDid,
|
||||||
|
minLikes,
|
||||||
|
followedOnly,
|
||||||
|
}: {
|
||||||
|
userDid: string
|
||||||
|
minLikes: number
|
||||||
|
followedOnly: boolean
|
||||||
|
}) {
|
||||||
return (
|
return (
|
||||||
tuner: FeedTuner,
|
tuner: FeedTuner,
|
||||||
slices: FeedViewPostsSlice[],
|
slices: FeedViewPostsSlice[],
|
||||||
): FeedViewPostsSlice[] => {
|
): FeedViewPostsSlice[] => {
|
||||||
// remove any replies without at least repliesThreshold likes
|
// remove any replies without at least minLikes likes
|
||||||
for (let i = slices.length - 1; i >= 0; i--) {
|
for (let i = slices.length - 1; i >= 0; i--) {
|
||||||
if (slices[i].isFullThread || !slices[i].isReply) {
|
const slice = slices[i]
|
||||||
|
if (slice.isFullThread || !slice.isReply) {
|
||||||
continue
|
continue
|
||||||
}
|
}
|
||||||
|
|
||||||
const item = slices[i].rootItem
|
const item = slice.rootItem
|
||||||
const isRepost = Boolean(item.reason)
|
const isRepost = Boolean(item.reason)
|
||||||
if (!isRepost && (item.post.likeCount || 0) < repliesThreshold) {
|
if (isRepost) {
|
||||||
|
continue
|
||||||
|
}
|
||||||
|
if ((item.post.likeCount || 0) < minLikes) {
|
||||||
|
slices.splice(i, 1)
|
||||||
|
} else if (followedOnly && !slice.isFollowingAllAuthors(userDid)) {
|
||||||
slices.splice(i, 1)
|
slices.splice(i, 1)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -0,0 +1,45 @@
|
||||||
|
import {
|
||||||
|
AppBskyFeedDefs,
|
||||||
|
AppBskyFeedGetAuthorFeed as GetAuthorFeed,
|
||||||
|
} from '@atproto/api'
|
||||||
|
import {RootStoreModel} from 'state/index'
|
||||||
|
import {FeedAPI, FeedAPIResponse} from './types'
|
||||||
|
|
||||||
|
export class AuthorFeedAPI implements FeedAPI {
|
||||||
|
cursor: string | undefined
|
||||||
|
|
||||||
|
constructor(
|
||||||
|
public rootStore: RootStoreModel,
|
||||||
|
public params: GetAuthorFeed.QueryParams,
|
||||||
|
) {}
|
||||||
|
|
||||||
|
reset() {
|
||||||
|
this.cursor = undefined
|
||||||
|
}
|
||||||
|
|
||||||
|
async peekLatest(): Promise<AppBskyFeedDefs.FeedViewPost> {
|
||||||
|
const res = await this.rootStore.agent.getAuthorFeed({
|
||||||
|
...this.params,
|
||||||
|
limit: 1,
|
||||||
|
})
|
||||||
|
return res.data.feed[0]
|
||||||
|
}
|
||||||
|
|
||||||
|
async fetchNext({limit}: {limit: number}): Promise<FeedAPIResponse> {
|
||||||
|
const res = await this.rootStore.agent.getAuthorFeed({
|
||||||
|
...this.params,
|
||||||
|
cursor: this.cursor,
|
||||||
|
limit,
|
||||||
|
})
|
||||||
|
if (res.success) {
|
||||||
|
this.cursor = res.data.cursor
|
||||||
|
return {
|
||||||
|
cursor: res.data.cursor,
|
||||||
|
feed: res.data.feed,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return {
|
||||||
|
feed: [],
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
|
@ -0,0 +1,52 @@
|
||||||
|
import {
|
||||||
|
AppBskyFeedDefs,
|
||||||
|
AppBskyFeedGetFeed as GetCustomFeed,
|
||||||
|
} from '@atproto/api'
|
||||||
|
import {RootStoreModel} from 'state/index'
|
||||||
|
import {FeedAPI, FeedAPIResponse} from './types'
|
||||||
|
|
||||||
|
export class CustomFeedAPI implements FeedAPI {
|
||||||
|
cursor: string | undefined
|
||||||
|
|
||||||
|
constructor(
|
||||||
|
public rootStore: RootStoreModel,
|
||||||
|
public params: GetCustomFeed.QueryParams,
|
||||||
|
) {}
|
||||||
|
|
||||||
|
reset() {
|
||||||
|
this.cursor = undefined
|
||||||
|
}
|
||||||
|
|
||||||
|
async peekLatest(): Promise<AppBskyFeedDefs.FeedViewPost> {
|
||||||
|
const res = await this.rootStore.agent.app.bsky.feed.getFeed({
|
||||||
|
...this.params,
|
||||||
|
limit: 1,
|
||||||
|
})
|
||||||
|
return res.data.feed[0]
|
||||||
|
}
|
||||||
|
|
||||||
|
async fetchNext({limit}: {limit: number}): Promise<FeedAPIResponse> {
|
||||||
|
const res = await this.rootStore.agent.app.bsky.feed.getFeed({
|
||||||
|
...this.params,
|
||||||
|
cursor: this.cursor,
|
||||||
|
limit,
|
||||||
|
})
|
||||||
|
if (res.success) {
|
||||||
|
this.cursor = res.data.cursor
|
||||||
|
// NOTE
|
||||||
|
// some custom feeds fail to enforce the pagination limit
|
||||||
|
// so we manually truncate here
|
||||||
|
// -prf
|
||||||
|
if (res.data.feed.length > limit) {
|
||||||
|
res.data.feed = res.data.feed.slice(0, limit)
|
||||||
|
}
|
||||||
|
return {
|
||||||
|
cursor: res.data.cursor,
|
||||||
|
feed: res.data.feed,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return {
|
||||||
|
feed: [],
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
|
@ -0,0 +1,37 @@
|
||||||
|
import {AppBskyFeedDefs} from '@atproto/api'
|
||||||
|
import {RootStoreModel} from 'state/index'
|
||||||
|
import {FeedAPI, FeedAPIResponse} from './types'
|
||||||
|
|
||||||
|
export class FollowingFeedAPI implements FeedAPI {
|
||||||
|
cursor: string | undefined
|
||||||
|
|
||||||
|
constructor(public rootStore: RootStoreModel) {}
|
||||||
|
|
||||||
|
reset() {
|
||||||
|
this.cursor = undefined
|
||||||
|
}
|
||||||
|
|
||||||
|
async peekLatest(): Promise<AppBskyFeedDefs.FeedViewPost> {
|
||||||
|
const res = await this.rootStore.agent.getTimeline({
|
||||||
|
limit: 1,
|
||||||
|
})
|
||||||
|
return res.data.feed[0]
|
||||||
|
}
|
||||||
|
|
||||||
|
async fetchNext({limit}: {limit: number}): Promise<FeedAPIResponse> {
|
||||||
|
const res = await this.rootStore.agent.getTimeline({
|
||||||
|
cursor: this.cursor,
|
||||||
|
limit,
|
||||||
|
})
|
||||||
|
if (res.success) {
|
||||||
|
this.cursor = res.data.cursor
|
||||||
|
return {
|
||||||
|
cursor: res.data.cursor,
|
||||||
|
feed: res.data.feed,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return {
|
||||||
|
feed: [],
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
|
@ -0,0 +1,45 @@
|
||||||
|
import {
|
||||||
|
AppBskyFeedDefs,
|
||||||
|
AppBskyFeedGetActorLikes as GetActorLikes,
|
||||||
|
} from '@atproto/api'
|
||||||
|
import {RootStoreModel} from 'state/index'
|
||||||
|
import {FeedAPI, FeedAPIResponse} from './types'
|
||||||
|
|
||||||
|
export class LikesFeedAPI implements FeedAPI {
|
||||||
|
cursor: string | undefined
|
||||||
|
|
||||||
|
constructor(
|
||||||
|
public rootStore: RootStoreModel,
|
||||||
|
public params: GetActorLikes.QueryParams,
|
||||||
|
) {}
|
||||||
|
|
||||||
|
reset() {
|
||||||
|
this.cursor = undefined
|
||||||
|
}
|
||||||
|
|
||||||
|
async peekLatest(): Promise<AppBskyFeedDefs.FeedViewPost> {
|
||||||
|
const res = await this.rootStore.agent.getActorLikes({
|
||||||
|
...this.params,
|
||||||
|
limit: 1,
|
||||||
|
})
|
||||||
|
return res.data.feed[0]
|
||||||
|
}
|
||||||
|
|
||||||
|
async fetchNext({limit}: {limit: number}): Promise<FeedAPIResponse> {
|
||||||
|
const res = await this.rootStore.agent.getActorLikes({
|
||||||
|
...this.params,
|
||||||
|
cursor: this.cursor,
|
||||||
|
limit,
|
||||||
|
})
|
||||||
|
if (res.success) {
|
||||||
|
this.cursor = res.data.cursor
|
||||||
|
return {
|
||||||
|
cursor: res.data.cursor,
|
||||||
|
feed: res.data.feed,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return {
|
||||||
|
feed: [],
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
|
@ -0,0 +1,236 @@
|
||||||
|
import {AppBskyFeedDefs, AppBskyFeedGetTimeline} from '@atproto/api'
|
||||||
|
import shuffle from 'lodash.shuffle'
|
||||||
|
import {RootStoreModel} from 'state/index'
|
||||||
|
import {timeout} from 'lib/async/timeout'
|
||||||
|
import {bundleAsync} from 'lib/async/bundle'
|
||||||
|
import {feedUriToHref} from 'lib/strings/url-helpers'
|
||||||
|
import {FeedAPI, FeedAPIResponse, FeedSourceInfo} from './types'
|
||||||
|
|
||||||
|
const REQUEST_WAIT_MS = 500 // 500ms
|
||||||
|
const POST_AGE_CUTOFF = 60e3 * 60 * 24 // 24hours
|
||||||
|
|
||||||
|
export class MergeFeedAPI implements FeedAPI {
|
||||||
|
following: MergeFeedSource_Following
|
||||||
|
customFeeds: MergeFeedSource_Custom[] = []
|
||||||
|
feedCursor = 0
|
||||||
|
itemCursor = 0
|
||||||
|
sampleCursor = 0
|
||||||
|
|
||||||
|
constructor(public rootStore: RootStoreModel) {
|
||||||
|
this.following = new MergeFeedSource_Following(this.rootStore)
|
||||||
|
}
|
||||||
|
|
||||||
|
reset() {
|
||||||
|
this.following = new MergeFeedSource_Following(this.rootStore)
|
||||||
|
this.customFeeds = [] // just empty the array, they will be captured in _fetchNext()
|
||||||
|
this.feedCursor = 0
|
||||||
|
this.itemCursor = 0
|
||||||
|
this.sampleCursor = 0
|
||||||
|
}
|
||||||
|
|
||||||
|
async peekLatest(): Promise<AppBskyFeedDefs.FeedViewPost> {
|
||||||
|
const res = await this.rootStore.agent.getTimeline({
|
||||||
|
limit: 1,
|
||||||
|
})
|
||||||
|
return res.data.feed[0]
|
||||||
|
}
|
||||||
|
|
||||||
|
async fetchNext({limit}: {limit: number}): Promise<FeedAPIResponse> {
|
||||||
|
// we capture here to ensure the data has loaded
|
||||||
|
this._captureFeedsIfNeeded()
|
||||||
|
|
||||||
|
const promises = []
|
||||||
|
|
||||||
|
// always keep following topped up
|
||||||
|
if (this.following.numReady < limit) {
|
||||||
|
promises.push(this.following.fetchNext(30))
|
||||||
|
}
|
||||||
|
|
||||||
|
// pick the next feeds to sample from
|
||||||
|
const feeds = this.customFeeds.slice(this.feedCursor, this.feedCursor + 3)
|
||||||
|
this.feedCursor += 3
|
||||||
|
if (this.feedCursor > this.customFeeds.length) {
|
||||||
|
this.feedCursor = 0
|
||||||
|
}
|
||||||
|
|
||||||
|
// top up the feeds
|
||||||
|
for (const feed of feeds) {
|
||||||
|
if (feed.numReady < 5) {
|
||||||
|
promises.push(feed.fetchNext(10))
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// wait for requests (all capped at a fixed timeout)
|
||||||
|
await Promise.all(promises)
|
||||||
|
|
||||||
|
// assemble a response by sampling from feeds with content
|
||||||
|
const posts: AppBskyFeedDefs.FeedViewPost[] = []
|
||||||
|
while (posts.length < limit) {
|
||||||
|
let slice = this.sampleItem()
|
||||||
|
if (slice[0]) {
|
||||||
|
posts.push(slice[0])
|
||||||
|
} else {
|
||||||
|
break
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
cursor: posts.length ? 'fake' : undefined,
|
||||||
|
feed: posts,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
sampleItem() {
|
||||||
|
const i = this.itemCursor++
|
||||||
|
const candidateFeeds = this.customFeeds.filter(f => f.numReady > 0)
|
||||||
|
const canSample = candidateFeeds.length > 0
|
||||||
|
const hasFollows = this.following.numReady > 0
|
||||||
|
|
||||||
|
// this condition establishes the frequency that custom feeds are woven into follows
|
||||||
|
const shouldSample =
|
||||||
|
i >= 15 && candidateFeeds.length >= 2 && (i % 4 === 0 || i % 5 === 0)
|
||||||
|
|
||||||
|
if (!canSample && !hasFollows) {
|
||||||
|
// no data available
|
||||||
|
return []
|
||||||
|
}
|
||||||
|
if (shouldSample || !hasFollows) {
|
||||||
|
// time to sample, or the user isnt following anybody
|
||||||
|
return candidateFeeds[this.sampleCursor++ % candidateFeeds.length].take(1)
|
||||||
|
}
|
||||||
|
// not time to sample
|
||||||
|
return this.following.take(1)
|
||||||
|
}
|
||||||
|
|
||||||
|
_captureFeedsIfNeeded() {
|
||||||
|
if (!this.rootStore.preferences.homeFeedMergeFeedEnabled) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
if (this.customFeeds.length === 0) {
|
||||||
|
this.customFeeds = shuffle(
|
||||||
|
this.rootStore.me.savedFeeds.all.map(
|
||||||
|
feed =>
|
||||||
|
new MergeFeedSource_Custom(
|
||||||
|
this.rootStore,
|
||||||
|
feed.uri,
|
||||||
|
feed.displayName,
|
||||||
|
),
|
||||||
|
),
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
class MergeFeedSource {
|
||||||
|
sourceInfo: FeedSourceInfo | undefined
|
||||||
|
cursor: string | undefined = undefined
|
||||||
|
queue: AppBskyFeedDefs.FeedViewPost[] = []
|
||||||
|
hasMore = true
|
||||||
|
|
||||||
|
constructor(public rootStore: RootStoreModel) {}
|
||||||
|
|
||||||
|
get numReady() {
|
||||||
|
return this.queue.length
|
||||||
|
}
|
||||||
|
|
||||||
|
get needsFetch() {
|
||||||
|
return this.hasMore && this.queue.length === 0
|
||||||
|
}
|
||||||
|
|
||||||
|
reset() {
|
||||||
|
this.cursor = undefined
|
||||||
|
this.queue = []
|
||||||
|
this.hasMore = true
|
||||||
|
}
|
||||||
|
|
||||||
|
take(n: number): AppBskyFeedDefs.FeedViewPost[] {
|
||||||
|
return this.queue.splice(0, n)
|
||||||
|
}
|
||||||
|
|
||||||
|
async fetchNext(n: number) {
|
||||||
|
await Promise.race([this._fetchNextInner(n), timeout(REQUEST_WAIT_MS)])
|
||||||
|
}
|
||||||
|
|
||||||
|
_fetchNextInner = bundleAsync(async (n: number) => {
|
||||||
|
const res = await this._getFeed(this.cursor, n)
|
||||||
|
if (res.success) {
|
||||||
|
this.cursor = res.data.cursor
|
||||||
|
if (res.data.feed.length) {
|
||||||
|
this.queue = this.queue.concat(res.data.feed)
|
||||||
|
} else {
|
||||||
|
this.hasMore = false
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
this.hasMore = false
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
protected _getFeed(
|
||||||
|
_cursor: string | undefined,
|
||||||
|
_limit: number,
|
||||||
|
): Promise<AppBskyFeedGetTimeline.Response> {
|
||||||
|
throw new Error('Must be overridden')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
class MergeFeedSource_Following extends MergeFeedSource {
|
||||||
|
async fetchNext(n: number) {
|
||||||
|
return this._fetchNextInner(n)
|
||||||
|
}
|
||||||
|
|
||||||
|
protected async _getFeed(
|
||||||
|
cursor: string | undefined,
|
||||||
|
limit: number,
|
||||||
|
): Promise<AppBskyFeedGetTimeline.Response> {
|
||||||
|
const res = await this.rootStore.agent.getTimeline({cursor, limit})
|
||||||
|
// filter out mutes pre-emptively to ensure better mixing
|
||||||
|
res.data.feed = res.data.feed.filter(
|
||||||
|
post => !post.post.author.viewer?.muted,
|
||||||
|
)
|
||||||
|
return res
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
class MergeFeedSource_Custom extends MergeFeedSource {
|
||||||
|
minDate: Date
|
||||||
|
|
||||||
|
constructor(
|
||||||
|
public rootStore: RootStoreModel,
|
||||||
|
public feedUri: string,
|
||||||
|
public feedDisplayName: string,
|
||||||
|
) {
|
||||||
|
super(rootStore)
|
||||||
|
this.sourceInfo = {
|
||||||
|
displayName: feedDisplayName,
|
||||||
|
uri: feedUriToHref(feedUri),
|
||||||
|
}
|
||||||
|
this.minDate = new Date(Date.now() - POST_AGE_CUTOFF)
|
||||||
|
}
|
||||||
|
|
||||||
|
protected async _getFeed(
|
||||||
|
cursor: string | undefined,
|
||||||
|
limit: number,
|
||||||
|
): Promise<AppBskyFeedGetTimeline.Response> {
|
||||||
|
const res = await this.rootStore.agent.app.bsky.feed.getFeed({
|
||||||
|
cursor,
|
||||||
|
limit,
|
||||||
|
feed: this.feedUri,
|
||||||
|
})
|
||||||
|
// NOTE
|
||||||
|
// some custom feeds fail to enforce the pagination limit
|
||||||
|
// so we manually truncate here
|
||||||
|
// -prf
|
||||||
|
if (limit && res.data.feed.length > limit) {
|
||||||
|
res.data.feed = res.data.feed.slice(0, limit)
|
||||||
|
}
|
||||||
|
// filter out older posts
|
||||||
|
res.data.feed = res.data.feed.filter(
|
||||||
|
post => new Date(post.post.indexedAt) > this.minDate,
|
||||||
|
)
|
||||||
|
// attach source info
|
||||||
|
for (const post of res.data.feed) {
|
||||||
|
post.__source = this.sourceInfo
|
||||||
|
}
|
||||||
|
return res
|
||||||
|
}
|
||||||
|
}
|
|
@ -0,0 +1,17 @@
|
||||||
|
import {AppBskyFeedDefs} from '@atproto/api'
|
||||||
|
|
||||||
|
export interface FeedAPIResponse {
|
||||||
|
cursor?: string
|
||||||
|
feed: AppBskyFeedDefs.FeedViewPost[]
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface FeedAPI {
|
||||||
|
reset(): void
|
||||||
|
peekLatest(): Promise<AppBskyFeedDefs.FeedViewPost>
|
||||||
|
fetchNext({limit}: {limit: number}): Promise<FeedAPIResponse>
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface FeedSourceInfo {
|
||||||
|
uri: string
|
||||||
|
displayName: string
|
||||||
|
}
|
|
@ -1,6 +1,6 @@
|
||||||
import React from 'react'
|
import React from 'react'
|
||||||
import {StyleProp, TextStyle, ViewStyle} from 'react-native'
|
import {StyleProp, TextStyle, ViewStyle} from 'react-native'
|
||||||
import Svg, {Path, Rect, Line, Ellipse, Circle} from 'react-native-svg'
|
import Svg, {Path, Rect, Line, Ellipse} from 'react-native-svg'
|
||||||
|
|
||||||
export function GridIcon({
|
export function GridIcon({
|
||||||
style,
|
style,
|
||||||
|
@ -884,45 +884,7 @@ export function HandIcon({
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
export function SatelliteDishIconSolid({
|
export function HashtagIcon({
|
||||||
style,
|
|
||||||
size,
|
|
||||||
strokeWidth = 1.5,
|
|
||||||
}: {
|
|
||||||
style?: StyleProp<ViewStyle>
|
|
||||||
size?: string | number
|
|
||||||
strokeWidth?: number
|
|
||||||
}) {
|
|
||||||
return (
|
|
||||||
<Svg
|
|
||||||
width={size || 24}
|
|
||||||
height={size || 24}
|
|
||||||
viewBox="0 0 22 22"
|
|
||||||
style={style}
|
|
||||||
fill="none"
|
|
||||||
stroke="none">
|
|
||||||
<Path
|
|
||||||
d="M16 19.6622C14.5291 20.513 12.8214 21 11 21C5.47715 21 1 16.5229 1 11C1 9.17858 1.48697 7.47088 2.33782 6.00002C3.18867 4.52915 6 7.66219 6 7.66219L14.5 16.1622C14.5 16.1622 17.4709 18.8113 16 19.6622Z"
|
|
||||||
fill="currentColor"
|
|
||||||
/>
|
|
||||||
<Path
|
|
||||||
d="M8 1.62961C9.04899 1.22255 10.1847 1 11.3704 1C16.6887 1 21 5.47715 21 11C21 12.0452 20.8456 13.053 20.5592 14"
|
|
||||||
stroke="currentColor"
|
|
||||||
strokeWidth={strokeWidth}
|
|
||||||
strokeLinecap="round"
|
|
||||||
/>
|
|
||||||
<Path
|
|
||||||
d="M9 5.38745C9.64553 5.13695 10.3444 5 11.0741 5C14.3469 5 17 7.75517 17 11.1538C17 11.797 16.905 12.4172 16.7287 13"
|
|
||||||
stroke="currentColor"
|
|
||||||
strokeWidth={strokeWidth}
|
|
||||||
strokeLinecap="round"
|
|
||||||
/>
|
|
||||||
<Circle cx="10" cy="12" r="2" fill="currentColor" />
|
|
||||||
</Svg>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
export function SatelliteDishIcon({
|
|
||||||
style,
|
style,
|
||||||
size,
|
size,
|
||||||
strokeWidth = 1.5,
|
strokeWidth = 1.5,
|
||||||
|
@ -934,26 +896,16 @@ export function SatelliteDishIcon({
|
||||||
return (
|
return (
|
||||||
<Svg
|
<Svg
|
||||||
fill="none"
|
fill="none"
|
||||||
viewBox="0 0 22 22"
|
|
||||||
strokeWidth={strokeWidth}
|
|
||||||
stroke="currentColor"
|
stroke="currentColor"
|
||||||
|
viewBox="0 0 30 30"
|
||||||
|
strokeWidth={strokeWidth}
|
||||||
width={size}
|
width={size}
|
||||||
height={size}
|
height={size}
|
||||||
style={style}>
|
style={style}>
|
||||||
<Path d="M 12.705346,15.777547 C 14.4635,17.5315 14.7526,17.8509 14.9928,18.1812 c 0.2139,0.2943 0.3371,0.5275 0.3889,0.6822 C 14.0859,19.5872 12.5926,20 11,20 6.02944,20 2,15.9706 2,11 2,9.4151 2.40883,7.9285 3.12619,6.63699 3.304,6.69748 3.56745,6.84213 3.89275,7.08309 4.3705644,7.4380098 4.7486794,7.8160923 6.4999995,9.5689376 8.2513197,11.321783 10.947192,14.023595 12.705346,15.777547 Z" />
|
<Path d="M2 10H28" strokeLinecap="round" />
|
||||||
<Path
|
<Path d="M2 20H28" strokeLinecap="round" />
|
||||||
d="M8 1.62961C9.04899 1.22255 10.1847 1 11.3704 1C16.6887 1 21 5.47715 21 11C21 12.0452 20.8456 13.053 20.5592 14"
|
<Path d="M11 3L9 27" strokeLinecap="round" />
|
||||||
strokeLinecap="round"
|
<Path d="M21 3L19 27" strokeLinecap="round" />
|
||||||
/>
|
|
||||||
<Path
|
|
||||||
d="M9 5.38745C9.64553 5.13695 10.3444 5 11.0741 5C14.3469 5 17 7.75517 17 11.1538C17 11.797 16.905 12.4172 16.7287 13"
|
|
||||||
strokeLinecap="round"
|
|
||||||
/>
|
|
||||||
<Path
|
|
||||||
d="M12 12C12 12.7403 11.5978 13.3866 11 13.7324L8.26756 11C8.61337 10.4022 9.25972 10 10 10C11.1046 10 12 10.8954 12 12Z"
|
|
||||||
fill="currentColor"
|
|
||||||
stroke="none"
|
|
||||||
/>
|
|
||||||
</Svg>
|
</Svg>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
|
@ -9,7 +9,6 @@ export type CommonNavigatorParams = {
|
||||||
ModerationMuteLists: undefined
|
ModerationMuteLists: undefined
|
||||||
ModerationMutedAccounts: undefined
|
ModerationMutedAccounts: undefined
|
||||||
ModerationBlockedAccounts: undefined
|
ModerationBlockedAccounts: undefined
|
||||||
DiscoverFeeds: undefined
|
|
||||||
Settings: undefined
|
Settings: undefined
|
||||||
Profile: {name: string; hideBackButton?: boolean}
|
Profile: {name: string; hideBackButton?: boolean}
|
||||||
ProfileFollowers: {name: string}
|
ProfileFollowers: {name: string}
|
||||||
|
|
|
@ -129,6 +129,15 @@ export function listUriToHref(url: string): string {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export function feedUriToHref(url: string): string {
|
||||||
|
try {
|
||||||
|
const {hostname, rkey} = new AtUri(url)
|
||||||
|
return `/profile/${hostname}/feed/${rkey}`
|
||||||
|
} catch {
|
||||||
|
return ''
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
export function getYoutubeVideoId(link: string): string | undefined {
|
export function getYoutubeVideoId(link: string): string | undefined {
|
||||||
let url
|
let url
|
||||||
try {
|
try {
|
||||||
|
|
|
@ -4,7 +4,6 @@ export const router = new Router({
|
||||||
Home: '/',
|
Home: '/',
|
||||||
Search: '/search',
|
Search: '/search',
|
||||||
Feeds: '/feeds',
|
Feeds: '/feeds',
|
||||||
DiscoverFeeds: '/search/feeds',
|
|
||||||
Notifications: '/notifications',
|
Notifications: '/notifications',
|
||||||
Settings: '/settings',
|
Settings: '/settings',
|
||||||
Moderation: '/moderation',
|
Moderation: '/moderation',
|
||||||
|
|
|
@ -1,227 +0,0 @@
|
||||||
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 './posts-slice'
|
|
||||||
import {makeProfileLink} from 'lib/routes/links'
|
|
||||||
|
|
||||||
const FEED_PAGE_SIZE = 10
|
|
||||||
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: makeProfileLink(feedInfo.data.creator, 'feed', urip.rkey),
|
|
||||||
})
|
|
||||||
}
|
|
||||||
if (!this.hasMore && this.hasContent) {
|
|
||||||
// only show if hasContent to avoid double discover-feed links
|
|
||||||
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 latest in the active feeds
|
|
||||||
*/
|
|
||||||
loadLatest() {
|
|
||||||
for (const feed of this.feeds) {
|
|
||||||
/* dont await */ feed.refresh()
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 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
|
|
||||||
// =
|
|
||||||
}
|
|
|
@ -2,6 +2,7 @@ import {makeAutoObservable} from 'mobx'
|
||||||
import {RootStoreModel} from '../root-store'
|
import {RootStoreModel} from '../root-store'
|
||||||
import {FeedViewPostsSlice} from 'lib/api/feed-manip'
|
import {FeedViewPostsSlice} from 'lib/api/feed-manip'
|
||||||
import {PostsFeedItemModel} from './post'
|
import {PostsFeedItemModel} from './post'
|
||||||
|
import {FeedSourceInfo} from 'lib/api/feed/types'
|
||||||
|
|
||||||
export class PostsFeedSliceModel {
|
export class PostsFeedSliceModel {
|
||||||
// ui state
|
// ui state
|
||||||
|
@ -9,9 +10,11 @@ export class PostsFeedSliceModel {
|
||||||
|
|
||||||
// data
|
// data
|
||||||
items: PostsFeedItemModel[] = []
|
items: PostsFeedItemModel[] = []
|
||||||
|
source: FeedSourceInfo | undefined
|
||||||
|
|
||||||
constructor(public rootStore: RootStoreModel, slice: FeedViewPostsSlice) {
|
constructor(public rootStore: RootStoreModel, slice: FeedViewPostsSlice) {
|
||||||
this._reactKey = slice._reactKey
|
this._reactKey = slice._reactKey
|
||||||
|
this.source = slice.source
|
||||||
for (let i = 0; i < slice.items.length; i++) {
|
for (let i = 0; i < slice.items.length; i++) {
|
||||||
this.items.push(
|
this.items.push(
|
||||||
new PostsFeedItemModel(
|
new PostsFeedItemModel(
|
||||||
|
|
|
@ -14,6 +14,13 @@ import {PostsFeedSliceModel} from './posts-slice'
|
||||||
import {track} from 'lib/analytics/analytics'
|
import {track} from 'lib/analytics/analytics'
|
||||||
import {FeedViewPostsSlice} from 'lib/api/feed-manip'
|
import {FeedViewPostsSlice} from 'lib/api/feed-manip'
|
||||||
|
|
||||||
|
import {FeedAPI, FeedAPIResponse} from 'lib/api/feed/types'
|
||||||
|
import {FollowingFeedAPI} from 'lib/api/feed/following'
|
||||||
|
import {AuthorFeedAPI} from 'lib/api/feed/author'
|
||||||
|
import {LikesFeedAPI} from 'lib/api/feed/likes'
|
||||||
|
import {CustomFeedAPI} from 'lib/api/feed/custom'
|
||||||
|
import {MergeFeedAPI} from 'lib/api/feed/merge'
|
||||||
|
|
||||||
const PAGE_SIZE = 30
|
const PAGE_SIZE = 30
|
||||||
|
|
||||||
type Options = {
|
type Options = {
|
||||||
|
@ -27,6 +34,7 @@ type Options = {
|
||||||
type QueryParams =
|
type QueryParams =
|
||||||
| GetTimeline.QueryParams
|
| GetTimeline.QueryParams
|
||||||
| GetAuthorFeed.QueryParams
|
| GetAuthorFeed.QueryParams
|
||||||
|
| GetActorLikes.QueryParams
|
||||||
| GetCustomFeed.QueryParams
|
| GetCustomFeed.QueryParams
|
||||||
|
|
||||||
export class PostsFeedModel {
|
export class PostsFeedModel {
|
||||||
|
@ -41,8 +49,8 @@ export class PostsFeedModel {
|
||||||
loadMoreError = ''
|
loadMoreError = ''
|
||||||
params: QueryParams
|
params: QueryParams
|
||||||
hasMore = true
|
hasMore = true
|
||||||
loadMoreCursor: string | undefined
|
|
||||||
pollCursor: string | undefined
|
pollCursor: string | undefined
|
||||||
|
api: FeedAPI
|
||||||
tuner = new FeedTuner()
|
tuner = new FeedTuner()
|
||||||
pageSize = PAGE_SIZE
|
pageSize = PAGE_SIZE
|
||||||
options: Options = {}
|
options: Options = {}
|
||||||
|
@ -50,7 +58,7 @@ export class PostsFeedModel {
|
||||||
// used to linearize async modifications to state
|
// used to linearize async modifications to state
|
||||||
lock = new AwaitLock()
|
lock = new AwaitLock()
|
||||||
|
|
||||||
// used to track if what's hot is coming up empty
|
// used to track if a feed is coming up empty
|
||||||
emptyFetches = 0
|
emptyFetches = 0
|
||||||
|
|
||||||
// data
|
// data
|
||||||
|
@ -58,7 +66,7 @@ export class PostsFeedModel {
|
||||||
|
|
||||||
constructor(
|
constructor(
|
||||||
public rootStore: RootStoreModel,
|
public rootStore: RootStoreModel,
|
||||||
public feedType: 'home' | 'author' | 'custom' | 'likes',
|
public feedType: 'home' | 'following' | 'author' | 'custom' | 'likes',
|
||||||
params: QueryParams,
|
params: QueryParams,
|
||||||
options?: Options,
|
options?: Options,
|
||||||
) {
|
) {
|
||||||
|
@ -67,12 +75,33 @@ export class PostsFeedModel {
|
||||||
{
|
{
|
||||||
rootStore: false,
|
rootStore: false,
|
||||||
params: false,
|
params: false,
|
||||||
loadMoreCursor: false,
|
|
||||||
},
|
},
|
||||||
{autoBind: true},
|
{autoBind: true},
|
||||||
)
|
)
|
||||||
this.params = params
|
this.params = params
|
||||||
this.options = options || {}
|
this.options = options || {}
|
||||||
|
if (feedType === 'home') {
|
||||||
|
this.api = new MergeFeedAPI(rootStore)
|
||||||
|
} else if (feedType === 'following') {
|
||||||
|
this.api = new FollowingFeedAPI(rootStore)
|
||||||
|
} else if (feedType === 'author') {
|
||||||
|
this.api = new AuthorFeedAPI(
|
||||||
|
rootStore,
|
||||||
|
params as GetAuthorFeed.QueryParams,
|
||||||
|
)
|
||||||
|
} else if (feedType === 'likes') {
|
||||||
|
this.api = new LikesFeedAPI(
|
||||||
|
rootStore,
|
||||||
|
params as GetActorLikes.QueryParams,
|
||||||
|
)
|
||||||
|
} else if (feedType === 'custom') {
|
||||||
|
this.api = new CustomFeedAPI(
|
||||||
|
rootStore,
|
||||||
|
params as GetCustomFeed.QueryParams,
|
||||||
|
)
|
||||||
|
} else {
|
||||||
|
this.api = new FollowingFeedAPI(rootStore)
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
get hasContent() {
|
get hasContent() {
|
||||||
|
@ -105,7 +134,6 @@ export class PostsFeedModel {
|
||||||
this.hasLoaded = false
|
this.hasLoaded = false
|
||||||
this.error = ''
|
this.error = ''
|
||||||
this.hasMore = true
|
this.hasMore = true
|
||||||
this.loadMoreCursor = undefined
|
|
||||||
this.pollCursor = undefined
|
this.pollCursor = undefined
|
||||||
this.slices = []
|
this.slices = []
|
||||||
this.tuner.reset()
|
this.tuner.reset()
|
||||||
|
@ -113,6 +141,8 @@ export class PostsFeedModel {
|
||||||
|
|
||||||
get feedTuners() {
|
get feedTuners() {
|
||||||
const areRepliesEnabled = this.rootStore.preferences.homeFeedRepliesEnabled
|
const areRepliesEnabled = this.rootStore.preferences.homeFeedRepliesEnabled
|
||||||
|
const areRepliesByFollowedOnlyEnabled =
|
||||||
|
this.rootStore.preferences.homeFeedRepliesByFollowedOnlyEnabled
|
||||||
const repliesThreshold = this.rootStore.preferences.homeFeedRepliesThreshold
|
const repliesThreshold = this.rootStore.preferences.homeFeedRepliesThreshold
|
||||||
const areRepostsEnabled = this.rootStore.preferences.homeFeedRepostsEnabled
|
const areRepostsEnabled = this.rootStore.preferences.homeFeedRepostsEnabled
|
||||||
const areQuotePostsEnabled =
|
const areQuotePostsEnabled =
|
||||||
|
@ -126,7 +156,7 @@ export class PostsFeedModel {
|
||||||
),
|
),
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
if (this.feedType === 'home') {
|
if (this.feedType === 'home' || this.feedType === 'following') {
|
||||||
const feedTuners = []
|
const feedTuners = []
|
||||||
|
|
||||||
if (areRepostsEnabled) {
|
if (areRepostsEnabled) {
|
||||||
|
@ -136,7 +166,13 @@ export class PostsFeedModel {
|
||||||
}
|
}
|
||||||
|
|
||||||
if (areRepliesEnabled) {
|
if (areRepliesEnabled) {
|
||||||
feedTuners.push(FeedTuner.likedRepliesOnly({repliesThreshold}))
|
feedTuners.push(
|
||||||
|
FeedTuner.thresholdRepliesOnly({
|
||||||
|
userDid: this.rootStore.session.data?.did || '',
|
||||||
|
minLikes: repliesThreshold,
|
||||||
|
followedOnly: areRepliesByFollowedOnlyEnabled,
|
||||||
|
}),
|
||||||
|
)
|
||||||
} else {
|
} else {
|
||||||
feedTuners.push(FeedTuner.removeReplies)
|
feedTuners.push(FeedTuner.removeReplies)
|
||||||
}
|
}
|
||||||
|
@ -161,10 +197,11 @@ export class PostsFeedModel {
|
||||||
await this.lock.acquireAsync()
|
await this.lock.acquireAsync()
|
||||||
try {
|
try {
|
||||||
this.setHasNewLatest(false)
|
this.setHasNewLatest(false)
|
||||||
|
this.api.reset()
|
||||||
this.tuner.reset()
|
this.tuner.reset()
|
||||||
this._xLoading(isRefreshing)
|
this._xLoading(isRefreshing)
|
||||||
try {
|
try {
|
||||||
const res = await this._getFeed({limit: this.pageSize})
|
const res = await this.api.fetchNext({limit: this.pageSize})
|
||||||
await this._replaceAll(res)
|
await this._replaceAll(res)
|
||||||
this._xIdle()
|
this._xIdle()
|
||||||
} catch (e: any) {
|
} catch (e: any) {
|
||||||
|
@ -201,8 +238,7 @@ export class PostsFeedModel {
|
||||||
}
|
}
|
||||||
this._xLoading()
|
this._xLoading()
|
||||||
try {
|
try {
|
||||||
const res = await this._getFeed({
|
const res = await this.api.fetchNext({
|
||||||
cursor: this.loadMoreCursor,
|
|
||||||
limit: this.pageSize,
|
limit: this.pageSize,
|
||||||
})
|
})
|
||||||
await this._appendAll(res)
|
await this._appendAll(res)
|
||||||
|
@ -230,44 +266,6 @@ export class PostsFeedModel {
|
||||||
return this.loadMore()
|
return this.loadMore()
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
|
||||||
* Update content in-place
|
|
||||||
*/
|
|
||||||
update = bundleAsync(async () => {
|
|
||||||
await this.lock.acquireAsync()
|
|
||||||
try {
|
|
||||||
if (!this.slices.length) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
this._xLoading()
|
|
||||||
let numToFetch = this.slices.length
|
|
||||||
let cursor
|
|
||||||
try {
|
|
||||||
do {
|
|
||||||
const res: GetTimeline.Response = await this._getFeed({
|
|
||||||
cursor,
|
|
||||||
limit: Math.min(numToFetch, 100),
|
|
||||||
})
|
|
||||||
if (res.data.feed.length === 0) {
|
|
||||||
break // sanity check
|
|
||||||
}
|
|
||||||
this._updateAll(res)
|
|
||||||
numToFetch -= res.data.feed.length
|
|
||||||
cursor = res.data.cursor
|
|
||||||
} while (cursor && numToFetch > 0)
|
|
||||||
this._xIdle()
|
|
||||||
} catch (e: any) {
|
|
||||||
this._xIdle() // don't bubble the error to the user
|
|
||||||
this.rootStore.log.error('FeedView: Failed to update', {
|
|
||||||
params: this.params,
|
|
||||||
e,
|
|
||||||
})
|
|
||||||
}
|
|
||||||
} finally {
|
|
||||||
this.lock.release()
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Check if new posts are available
|
* Check if new posts are available
|
||||||
*/
|
*/
|
||||||
|
@ -275,9 +273,9 @@ export class PostsFeedModel {
|
||||||
if (!this.hasLoaded || this.hasNewLatest || this.isLoading) {
|
if (!this.hasLoaded || this.hasNewLatest || this.isLoading) {
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
const res = await this._getFeed({limit: 1})
|
const post = await this.api.peekLatest()
|
||||||
if (res.data.feed[0]) {
|
if (post) {
|
||||||
const slices = this.tuner.tune(res.data.feed, this.feedTuners, {
|
const slices = this.tuner.tune([post], this.feedTuners, {
|
||||||
dryRun: true,
|
dryRun: true,
|
||||||
})
|
})
|
||||||
if (slices[0]) {
|
if (slices[0]) {
|
||||||
|
@ -345,33 +343,27 @@ export class PostsFeedModel {
|
||||||
// helper functions
|
// helper functions
|
||||||
// =
|
// =
|
||||||
|
|
||||||
async _replaceAll(
|
async _replaceAll(res: FeedAPIResponse) {
|
||||||
res: GetTimeline.Response | GetAuthorFeed.Response | GetCustomFeed.Response,
|
this.pollCursor = res.feed[0]?.post.uri
|
||||||
) {
|
|
||||||
this.pollCursor = res.data.feed[0]?.post.uri
|
|
||||||
return this._appendAll(res, true)
|
return this._appendAll(res, true)
|
||||||
}
|
}
|
||||||
|
|
||||||
async _appendAll(
|
async _appendAll(res: FeedAPIResponse, replace = false) {
|
||||||
res: GetTimeline.Response | GetAuthorFeed.Response | GetCustomFeed.Response,
|
this.hasMore = !!res.cursor
|
||||||
replace = false,
|
|
||||||
) {
|
|
||||||
this.loadMoreCursor = res.data.cursor
|
|
||||||
this.hasMore = !!this.loadMoreCursor
|
|
||||||
if (replace) {
|
if (replace) {
|
||||||
this.emptyFetches = 0
|
this.emptyFetches = 0
|
||||||
}
|
}
|
||||||
|
|
||||||
this.rootStore.me.follows.hydrateProfiles(
|
this.rootStore.me.follows.hydrateProfiles(
|
||||||
res.data.feed.map(item => item.post.author),
|
res.feed.map(item => item.post.author),
|
||||||
)
|
)
|
||||||
for (const item of res.data.feed) {
|
for (const item of res.feed) {
|
||||||
this.rootStore.posts.fromFeedItem(item)
|
this.rootStore.posts.fromFeedItem(item)
|
||||||
}
|
}
|
||||||
|
|
||||||
const slices = this.options.isSimpleFeed
|
const slices = this.options.isSimpleFeed
|
||||||
? res.data.feed.map(item => new FeedViewPostsSlice([item]))
|
? res.feed.map(item => new FeedViewPostsSlice([item]))
|
||||||
: this.tuner.tune(res.data.feed, this.feedTuners)
|
: this.tuner.tune(res.feed, this.feedTuners)
|
||||||
|
|
||||||
const toAppend: PostsFeedSliceModel[] = []
|
const toAppend: PostsFeedSliceModel[] = []
|
||||||
for (const slice of slices) {
|
for (const slice of slices) {
|
||||||
|
@ -401,54 +393,4 @@ export class PostsFeedModel {
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
_updateAll(
|
|
||||||
res: GetTimeline.Response | GetAuthorFeed.Response | GetCustomFeed.Response,
|
|
||||||
) {
|
|
||||||
for (const item of res.data.feed) {
|
|
||||||
this.rootStore.posts.fromFeedItem(item)
|
|
||||||
const existingSlice = this.slices.find(slice =>
|
|
||||||
slice.containsUri(item.post.uri),
|
|
||||||
)
|
|
||||||
if (existingSlice) {
|
|
||||||
const existingItem = existingSlice.items.find(
|
|
||||||
item2 => item2.post.uri === item.post.uri,
|
|
||||||
)
|
|
||||||
if (existingItem) {
|
|
||||||
existingItem.copyMetrics(item)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
protected async _getFeed(
|
|
||||||
params: QueryParams,
|
|
||||||
): Promise<
|
|
||||||
GetTimeline.Response | GetAuthorFeed.Response | GetCustomFeed.Response
|
|
||||||
> {
|
|
||||||
params = Object.assign({}, this.params, params)
|
|
||||||
if (this.feedType === 'home') {
|
|
||||||
return this.rootStore.agent.getTimeline(params as GetTimeline.QueryParams)
|
|
||||||
} else if (this.feedType === 'custom') {
|
|
||||||
const res = await this.rootStore.agent.app.bsky.feed.getFeed(
|
|
||||||
params as GetCustomFeed.QueryParams,
|
|
||||||
)
|
|
||||||
// NOTE
|
|
||||||
// some custom feeds fail to enforce the pagination limit
|
|
||||||
// so we manually truncate here
|
|
||||||
// -prf
|
|
||||||
if (params.limit && res.data.feed.length > params.limit) {
|
|
||||||
res.data.feed = res.data.feed.slice(0, params.limit)
|
|
||||||
}
|
|
||||||
return res
|
|
||||||
} else if (this.feedType === 'author') {
|
|
||||||
return this.rootStore.agent.getAuthorFeed(
|
|
||||||
params as GetAuthorFeed.QueryParams,
|
|
||||||
)
|
|
||||||
} else {
|
|
||||||
return this.rootStore.agent.getActorLikes(
|
|
||||||
params as GetActorLikes.QueryParams,
|
|
||||||
)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
|
@ -139,7 +139,7 @@ export class RootStoreModel {
|
||||||
this.agent = agent
|
this.agent = agent
|
||||||
applyDebugHeader(this.agent)
|
applyDebugHeader(this.agent)
|
||||||
this.me.clear()
|
this.me.clear()
|
||||||
/* dont await */ this.preferences.sync()
|
await this.preferences.sync()
|
||||||
await this.me.load()
|
await this.me.load()
|
||||||
if (!hadSession) {
|
if (!hadSession) {
|
||||||
await resetNavigation()
|
await resetNavigation()
|
||||||
|
|
|
@ -0,0 +1,157 @@
|
||||||
|
import {makeAutoObservable} from 'mobx'
|
||||||
|
import {FeedsDiscoveryModel} from '../discovery/feeds'
|
||||||
|
import {CustomFeedModel} from '../feeds/custom-feed'
|
||||||
|
import {RootStoreModel} from '../root-store'
|
||||||
|
|
||||||
|
export type MyFeedsItem =
|
||||||
|
| {
|
||||||
|
_reactKey: string
|
||||||
|
type: 'spinner'
|
||||||
|
}
|
||||||
|
| {
|
||||||
|
_reactKey: string
|
||||||
|
type: 'discover-feeds-loading'
|
||||||
|
}
|
||||||
|
| {
|
||||||
|
_reactKey: string
|
||||||
|
type: 'error'
|
||||||
|
error: string
|
||||||
|
}
|
||||||
|
| {
|
||||||
|
_reactKey: string
|
||||||
|
type: 'saved-feeds-header'
|
||||||
|
}
|
||||||
|
| {
|
||||||
|
_reactKey: string
|
||||||
|
type: 'saved-feed'
|
||||||
|
feed: CustomFeedModel
|
||||||
|
}
|
||||||
|
| {
|
||||||
|
_reactKey: string
|
||||||
|
type: 'saved-feeds-load-more'
|
||||||
|
}
|
||||||
|
| {
|
||||||
|
_reactKey: string
|
||||||
|
type: 'discover-feeds-header'
|
||||||
|
}
|
||||||
|
| {
|
||||||
|
_reactKey: string
|
||||||
|
type: 'discover-feeds-no-results'
|
||||||
|
}
|
||||||
|
| {
|
||||||
|
_reactKey: string
|
||||||
|
type: 'discover-feed'
|
||||||
|
feed: CustomFeedModel
|
||||||
|
}
|
||||||
|
|
||||||
|
export class MyFeedsUIModel {
|
||||||
|
discovery: FeedsDiscoveryModel
|
||||||
|
|
||||||
|
constructor(public rootStore: RootStoreModel) {
|
||||||
|
makeAutoObservable(this)
|
||||||
|
this.discovery = new FeedsDiscoveryModel(this.rootStore)
|
||||||
|
}
|
||||||
|
|
||||||
|
get saved() {
|
||||||
|
return this.rootStore.me.savedFeeds
|
||||||
|
}
|
||||||
|
|
||||||
|
get isRefreshing() {
|
||||||
|
return !this.saved.isLoading && this.saved.isRefreshing
|
||||||
|
}
|
||||||
|
|
||||||
|
get isLoading() {
|
||||||
|
return this.saved.isLoading || this.discovery.isLoading
|
||||||
|
}
|
||||||
|
|
||||||
|
async setup() {
|
||||||
|
if (!this.saved.hasLoaded) {
|
||||||
|
await this.saved.refresh()
|
||||||
|
}
|
||||||
|
if (!this.discovery.hasLoaded) {
|
||||||
|
await this.discovery.refresh()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async refresh() {
|
||||||
|
return Promise.all([this.saved.refresh(), this.discovery.refresh()])
|
||||||
|
}
|
||||||
|
|
||||||
|
async loadMore() {
|
||||||
|
return this.discovery.loadMore()
|
||||||
|
}
|
||||||
|
|
||||||
|
get items() {
|
||||||
|
let items: MyFeedsItem[] = []
|
||||||
|
|
||||||
|
items.push({
|
||||||
|
_reactKey: '__saved_feeds_header__',
|
||||||
|
type: 'saved-feeds-header',
|
||||||
|
})
|
||||||
|
if (this.saved.isLoading) {
|
||||||
|
items.push({
|
||||||
|
_reactKey: '__saved_feeds_loading__',
|
||||||
|
type: 'spinner',
|
||||||
|
})
|
||||||
|
} else if (this.saved.hasError) {
|
||||||
|
items.push({
|
||||||
|
_reactKey: '__saved_feeds_error__',
|
||||||
|
type: 'error',
|
||||||
|
error: this.saved.error,
|
||||||
|
})
|
||||||
|
} else {
|
||||||
|
const savedSorted = this.saved.all
|
||||||
|
.slice()
|
||||||
|
.sort((a, b) => a.displayName.localeCompare(b.displayName))
|
||||||
|
items = items.concat(
|
||||||
|
savedSorted.map(feed => ({
|
||||||
|
_reactKey: `saved-${feed.uri}`,
|
||||||
|
type: 'saved-feed',
|
||||||
|
feed,
|
||||||
|
})),
|
||||||
|
)
|
||||||
|
items.push({
|
||||||
|
_reactKey: '__saved_feeds_load_more__',
|
||||||
|
type: 'saved-feeds-load-more',
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
items.push({
|
||||||
|
_reactKey: '__discover_feeds_header__',
|
||||||
|
type: 'discover-feeds-header',
|
||||||
|
})
|
||||||
|
if (this.discovery.isLoading && !this.discovery.hasContent) {
|
||||||
|
items.push({
|
||||||
|
_reactKey: '__discover_feeds_loading__',
|
||||||
|
type: 'discover-feeds-loading',
|
||||||
|
})
|
||||||
|
} else if (this.discovery.hasError) {
|
||||||
|
items.push({
|
||||||
|
_reactKey: '__discover_feeds_error__',
|
||||||
|
type: 'error',
|
||||||
|
error: this.discovery.error,
|
||||||
|
})
|
||||||
|
} else if (this.discovery.isEmpty) {
|
||||||
|
items.push({
|
||||||
|
_reactKey: '__discover_feeds_no_results__',
|
||||||
|
type: 'discover-feeds-no-results',
|
||||||
|
})
|
||||||
|
} else {
|
||||||
|
items = items.concat(
|
||||||
|
this.discovery.feeds.map(feed => ({
|
||||||
|
_reactKey: `discover-${feed.uri}`,
|
||||||
|
type: 'discover-feed',
|
||||||
|
feed,
|
||||||
|
})),
|
||||||
|
)
|
||||||
|
if (this.discovery.isLoading) {
|
||||||
|
items.push({
|
||||||
|
_reactKey: '__discover_feeds_loading_more__',
|
||||||
|
type: 'spinner',
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return items
|
||||||
|
}
|
||||||
|
}
|
|
@ -50,9 +50,11 @@ export class PreferencesModel {
|
||||||
pinnedFeeds: string[] = []
|
pinnedFeeds: string[] = []
|
||||||
birthDate: Date | undefined = undefined
|
birthDate: Date | undefined = undefined
|
||||||
homeFeedRepliesEnabled: boolean = true
|
homeFeedRepliesEnabled: boolean = true
|
||||||
homeFeedRepliesThreshold: number = 2
|
homeFeedRepliesByFollowedOnlyEnabled: boolean = true
|
||||||
|
homeFeedRepliesThreshold: number = 0
|
||||||
homeFeedRepostsEnabled: boolean = true
|
homeFeedRepostsEnabled: boolean = true
|
||||||
homeFeedQuotePostsEnabled: boolean = true
|
homeFeedQuotePostsEnabled: boolean = true
|
||||||
|
homeFeedMergeFeedEnabled: boolean = false
|
||||||
requireAltTextEnabled: boolean = false
|
requireAltTextEnabled: boolean = false
|
||||||
|
|
||||||
// used to linearize async modifications to state
|
// used to linearize async modifications to state
|
||||||
|
@ -78,9 +80,12 @@ export class PreferencesModel {
|
||||||
savedFeeds: this.savedFeeds,
|
savedFeeds: this.savedFeeds,
|
||||||
pinnedFeeds: this.pinnedFeeds,
|
pinnedFeeds: this.pinnedFeeds,
|
||||||
homeFeedRepliesEnabled: this.homeFeedRepliesEnabled,
|
homeFeedRepliesEnabled: this.homeFeedRepliesEnabled,
|
||||||
|
homeFeedRepliesByFollowedOnlyEnabled:
|
||||||
|
this.homeFeedRepliesByFollowedOnlyEnabled,
|
||||||
homeFeedRepliesThreshold: this.homeFeedRepliesThreshold,
|
homeFeedRepliesThreshold: this.homeFeedRepliesThreshold,
|
||||||
homeFeedRepostsEnabled: this.homeFeedRepostsEnabled,
|
homeFeedRepostsEnabled: this.homeFeedRepostsEnabled,
|
||||||
homeFeedQuotePostsEnabled: this.homeFeedQuotePostsEnabled,
|
homeFeedQuotePostsEnabled: this.homeFeedQuotePostsEnabled,
|
||||||
|
homeFeedMergeFeedEnabled: this.homeFeedMergeFeedEnabled,
|
||||||
requireAltTextEnabled: this.requireAltTextEnabled,
|
requireAltTextEnabled: this.requireAltTextEnabled,
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -148,6 +153,14 @@ export class PreferencesModel {
|
||||||
) {
|
) {
|
||||||
this.homeFeedRepliesEnabled = v.homeFeedRepliesEnabled
|
this.homeFeedRepliesEnabled = v.homeFeedRepliesEnabled
|
||||||
}
|
}
|
||||||
|
// check if home feed replies "followed only" are enabled in preferences, then hydrate
|
||||||
|
if (
|
||||||
|
hasProp(v, 'homeFeedRepliesByFollowedOnlyEnabled') &&
|
||||||
|
typeof v.homeFeedRepliesByFollowedOnlyEnabled === 'boolean'
|
||||||
|
) {
|
||||||
|
this.homeFeedRepliesByFollowedOnlyEnabled =
|
||||||
|
v.homeFeedRepliesByFollowedOnlyEnabled
|
||||||
|
}
|
||||||
// check if home feed replies threshold is enabled in preferences, then hydrate
|
// check if home feed replies threshold is enabled in preferences, then hydrate
|
||||||
if (
|
if (
|
||||||
hasProp(v, 'homeFeedRepliesThreshold') &&
|
hasProp(v, 'homeFeedRepliesThreshold') &&
|
||||||
|
@ -169,6 +182,13 @@ export class PreferencesModel {
|
||||||
) {
|
) {
|
||||||
this.homeFeedQuotePostsEnabled = v.homeFeedQuotePostsEnabled
|
this.homeFeedQuotePostsEnabled = v.homeFeedQuotePostsEnabled
|
||||||
}
|
}
|
||||||
|
// check if home feed mergefeed is enabled in preferences, then hydrate
|
||||||
|
if (
|
||||||
|
hasProp(v, 'homeFeedMergeFeedEnabled') &&
|
||||||
|
typeof v.homeFeedMergeFeedEnabled === 'boolean'
|
||||||
|
) {
|
||||||
|
this.homeFeedMergeFeedEnabled = v.homeFeedMergeFeedEnabled
|
||||||
|
}
|
||||||
// check if requiring alt text is enabled in preferences, then hydrate
|
// check if requiring alt text is enabled in preferences, then hydrate
|
||||||
if (
|
if (
|
||||||
hasProp(v, 'requireAltTextEnabled') &&
|
hasProp(v, 'requireAltTextEnabled') &&
|
||||||
|
@ -449,6 +469,11 @@ export class PreferencesModel {
|
||||||
this.homeFeedRepliesEnabled = !this.homeFeedRepliesEnabled
|
this.homeFeedRepliesEnabled = !this.homeFeedRepliesEnabled
|
||||||
}
|
}
|
||||||
|
|
||||||
|
toggleHomeFeedRepliesByFollowedOnlyEnabled() {
|
||||||
|
this.homeFeedRepliesByFollowedOnlyEnabled =
|
||||||
|
!this.homeFeedRepliesByFollowedOnlyEnabled
|
||||||
|
}
|
||||||
|
|
||||||
setHomeFeedRepliesThreshold(threshold: number) {
|
setHomeFeedRepliesThreshold(threshold: number) {
|
||||||
this.homeFeedRepliesThreshold = threshold
|
this.homeFeedRepliesThreshold = threshold
|
||||||
}
|
}
|
||||||
|
@ -461,6 +486,10 @@ export class PreferencesModel {
|
||||||
this.homeFeedQuotePostsEnabled = !this.homeFeedQuotePostsEnabled
|
this.homeFeedQuotePostsEnabled = !this.homeFeedQuotePostsEnabled
|
||||||
}
|
}
|
||||||
|
|
||||||
|
toggleHomeFeedMergeFeedEnabled() {
|
||||||
|
this.homeFeedMergeFeedEnabled = !this.homeFeedMergeFeedEnabled
|
||||||
|
}
|
||||||
|
|
||||||
toggleRequireAltTextEnabled() {
|
toggleRequireAltTextEnabled() {
|
||||||
this.requireAltTextEnabled = !this.requireAltTextEnabled
|
this.requireAltTextEnabled = !this.requireAltTextEnabled
|
||||||
}
|
}
|
||||||
|
|
|
@ -240,13 +240,6 @@ export class ProfileUiModel {
|
||||||
.catch(err => this.rootStore.log.error('Failed to fetch lists', err))
|
.catch(err => this.rootStore.log.error('Failed to fetch lists', err))
|
||||||
}
|
}
|
||||||
|
|
||||||
async update() {
|
|
||||||
const view = this.currentView
|
|
||||||
if (view instanceof PostsFeedModel) {
|
|
||||||
await view.update()
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
async refresh() {
|
async refresh() {
|
||||||
await Promise.all([this.profile.refresh(), this.currentView.refresh()])
|
await Promise.all([this.profile.refresh(), this.currentView.refresh()])
|
||||||
}
|
}
|
||||||
|
|
|
@ -21,11 +21,13 @@ export const Feed = observer(function Feed({
|
||||||
scrollElRef,
|
scrollElRef,
|
||||||
onPressTryAgain,
|
onPressTryAgain,
|
||||||
onScroll,
|
onScroll,
|
||||||
|
ListHeaderComponent,
|
||||||
}: {
|
}: {
|
||||||
view: NotificationsFeedModel
|
view: NotificationsFeedModel
|
||||||
scrollElRef?: MutableRefObject<FlatList<any> | null>
|
scrollElRef?: MutableRefObject<FlatList<any> | null>
|
||||||
onPressTryAgain?: () => void
|
onPressTryAgain?: () => void
|
||||||
onScroll?: OnScrollCb
|
onScroll?: OnScrollCb
|
||||||
|
ListHeaderComponent?: () => JSX.Element
|
||||||
}) {
|
}) {
|
||||||
const pal = usePalette('default')
|
const pal = usePalette('default')
|
||||||
const [isPTRing, setIsPTRing] = React.useState(false)
|
const [isPTRing, setIsPTRing] = React.useState(false)
|
||||||
|
@ -142,6 +144,7 @@ export const Feed = observer(function Feed({
|
||||||
data={data}
|
data={data}
|
||||||
keyExtractor={item => item._reactKey}
|
keyExtractor={item => item._reactKey}
|
||||||
renderItem={renderItem}
|
renderItem={renderItem}
|
||||||
|
ListHeaderComponent={ListHeaderComponent}
|
||||||
ListFooterComponent={FeedFooter}
|
ListFooterComponent={FeedFooter}
|
||||||
refreshControl={
|
refreshControl={
|
||||||
<RefreshControl
|
<RefreshControl
|
||||||
|
@ -156,6 +159,8 @@ export const Feed = observer(function Feed({
|
||||||
onScroll={onScroll}
|
onScroll={onScroll}
|
||||||
scrollEventThrottle={100}
|
scrollEventThrottle={100}
|
||||||
contentContainerStyle={s.contentContainer}
|
contentContainerStyle={s.contentContainer}
|
||||||
|
// @ts-ignore our .web version only -prf
|
||||||
|
desktopFixedHeight
|
||||||
/>
|
/>
|
||||||
) : null}
|
) : null}
|
||||||
</View>
|
</View>
|
||||||
|
|
|
@ -12,15 +12,17 @@ import {FeedsTabBar as FeedsTabBarMobile} from './FeedsTabBarMobile'
|
||||||
export const FeedsTabBar = observer(function FeedsTabBarImpl(
|
export const FeedsTabBar = observer(function FeedsTabBarImpl(
|
||||||
props: RenderTabBarFnProps & {testID?: string; onPressSelected: () => void},
|
props: RenderTabBarFnProps & {testID?: string; onPressSelected: () => void},
|
||||||
) {
|
) {
|
||||||
const {isMobile} = useWebMediaQueries()
|
const {isMobile, isTablet} = useWebMediaQueries()
|
||||||
if (isMobile) {
|
if (isMobile) {
|
||||||
return <FeedsTabBarMobile {...props} />
|
return <FeedsTabBarMobile {...props} />
|
||||||
|
} else if (isTablet) {
|
||||||
|
return <FeedsTabBarTablet {...props} />
|
||||||
} else {
|
} else {
|
||||||
return <FeedsTabBarDesktop {...props} />
|
return null
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
const FeedsTabBarDesktop = observer(function FeedsTabBarDesktopImpl(
|
const FeedsTabBarTablet = observer(function FeedsTabBarTabletImpl(
|
||||||
props: RenderTabBarFnProps & {testID?: string; onPressSelected: () => void},
|
props: RenderTabBarFnProps & {testID?: string; onPressSelected: () => void},
|
||||||
) {
|
) {
|
||||||
const store = useStores()
|
const store = useStores()
|
||||||
|
|
|
@ -9,8 +9,8 @@ import {useAnimatedValue} from 'lib/hooks/useAnimatedValue'
|
||||||
import {useColorSchemeStyle} from 'lib/hooks/useColorSchemeStyle'
|
import {useColorSchemeStyle} from 'lib/hooks/useColorSchemeStyle'
|
||||||
import {Link} from '../util/Link'
|
import {Link} from '../util/Link'
|
||||||
import {Text} from '../util/text/Text'
|
import {Text} from '../util/text/Text'
|
||||||
import {CogIcon} from 'lib/icons'
|
|
||||||
import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
|
import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
|
||||||
|
import {FontAwesomeIconStyle} from '@fortawesome/react-native-fontawesome'
|
||||||
import {s} from 'lib/styles'
|
import {s} from 'lib/styles'
|
||||||
import {HITSLOP_10} from 'lib/constants'
|
import {HITSLOP_10} from 'lib/constants'
|
||||||
|
|
||||||
|
@ -67,12 +67,15 @@ export const FeedsTabBar = observer(function FeedsTabBarImpl(
|
||||||
</Text>
|
</Text>
|
||||||
<View style={[pal.view]}>
|
<View style={[pal.view]}>
|
||||||
<Link
|
<Link
|
||||||
href="/settings/saved-feeds"
|
href="/settings/home-feed"
|
||||||
hitSlop={HITSLOP_10}
|
hitSlop={HITSLOP_10}
|
||||||
accessibilityRole="button"
|
accessibilityRole="button"
|
||||||
accessibilityLabel="Edit Saved Feeds"
|
accessibilityLabel="Home Feed Preferences"
|
||||||
accessibilityHint="Opens screen to edit Saved Feeds">
|
accessibilityHint="">
|
||||||
<CogIcon size={21} strokeWidth={2} style={pal.textLight} />
|
<FontAwesomeIcon
|
||||||
|
icon="sliders"
|
||||||
|
style={pal.textLight as FontAwesomeIconStyle}
|
||||||
|
/>
|
||||||
</Link>
|
</Link>
|
||||||
</View>
|
</View>
|
||||||
</View>
|
</View>
|
||||||
|
|
|
@ -357,6 +357,8 @@ export const PostThread = observer(function PostThread({
|
||||||
}
|
}
|
||||||
onScrollToIndexFailed={onScrollToIndexFailed}
|
onScrollToIndexFailed={onScrollToIndexFailed}
|
||||||
style={s.hContentRegion}
|
style={s.hContentRegion}
|
||||||
|
// @ts-ignore our .web version only -prf
|
||||||
|
desktopFixedHeight
|
||||||
/>
|
/>
|
||||||
)
|
)
|
||||||
})
|
})
|
||||||
|
|
|
@ -483,15 +483,6 @@ export const PostThreadItem = observer(function PostThreadItem({
|
||||||
/>
|
/>
|
||||||
</ContentHider>
|
</ContentHider>
|
||||||
)}
|
)}
|
||||||
{needsTranslation && (
|
|
||||||
<View style={[pal.borderDark, styles.translateLink]}>
|
|
||||||
<Link href={translatorUrl} title="Translate">
|
|
||||||
<Text type="sm" style={pal.link}>
|
|
||||||
Translate this post
|
|
||||||
</Text>
|
|
||||||
</Link>
|
|
||||||
</View>
|
|
||||||
)}
|
|
||||||
<PostCtrls
|
<PostCtrls
|
||||||
itemUri={itemUri}
|
itemUri={itemUri}
|
||||||
itemCid={itemCid}
|
itemCid={itemCid}
|
||||||
|
|
|
@ -1,4 +1,4 @@
|
||||||
import React, {useState, useMemo} from 'react'
|
import React, {useState} from 'react'
|
||||||
import {
|
import {
|
||||||
ActivityIndicator,
|
ActivityIndicator,
|
||||||
Linking,
|
Linking,
|
||||||
|
@ -28,7 +28,7 @@ import {PreviewableUserAvatar} from '../util/UserAvatar'
|
||||||
import {useStores} from 'state/index'
|
import {useStores} from 'state/index'
|
||||||
import {s, colors} from 'lib/styles'
|
import {s, colors} from 'lib/styles'
|
||||||
import {usePalette} from 'lib/hooks/usePalette'
|
import {usePalette} from 'lib/hooks/usePalette'
|
||||||
import {getTranslatorLink, isPostInLanguage} from '../../../locale/helpers'
|
import {getTranslatorLink} from '../../../locale/helpers'
|
||||||
import {makeProfileLink} from 'lib/routes/links'
|
import {makeProfileLink} from 'lib/routes/links'
|
||||||
|
|
||||||
export const Post = observer(function PostImpl({
|
export const Post = observer(function PostImpl({
|
||||||
|
@ -116,12 +116,6 @@ const PostLoaded = observer(function PostLoadedImpl({
|
||||||
}
|
}
|
||||||
|
|
||||||
const translatorUrl = getTranslatorLink(record?.text || '')
|
const translatorUrl = getTranslatorLink(record?.text || '')
|
||||||
const needsTranslation = useMemo(
|
|
||||||
() =>
|
|
||||||
store.preferences.contentLanguages.length > 0 &&
|
|
||||||
!isPostInLanguage(item.post, store.preferences.contentLanguages),
|
|
||||||
[item.post, store.preferences.contentLanguages],
|
|
||||||
)
|
|
||||||
|
|
||||||
const onPressReply = React.useCallback(() => {
|
const onPressReply = React.useCallback(() => {
|
||||||
store.shell.openComposer({
|
store.shell.openComposer({
|
||||||
|
@ -256,15 +250,6 @@ const PostLoaded = observer(function PostLoadedImpl({
|
||||||
/>
|
/>
|
||||||
</ContentHider>
|
</ContentHider>
|
||||||
) : null}
|
) : null}
|
||||||
{needsTranslation && (
|
|
||||||
<View style={[pal.borderDark, styles.translateLink]}>
|
|
||||||
<Link href={translatorUrl} title="Translate">
|
|
||||||
<Text type="sm" style={pal.link}>
|
|
||||||
Translate this post
|
|
||||||
</Text>
|
|
||||||
</Link>
|
|
||||||
</View>
|
|
||||||
)}
|
|
||||||
</ContentHider>
|
</ContentHider>
|
||||||
<PostCtrls
|
<PostCtrls
|
||||||
itemUri={itemUri}
|
itemUri={itemUri}
|
||||||
|
@ -322,9 +307,6 @@ const styles = StyleSheet.create({
|
||||||
alignItems: 'center',
|
alignItems: 'center',
|
||||||
flexWrap: 'wrap',
|
flexWrap: 'wrap',
|
||||||
},
|
},
|
||||||
translateLink: {
|
|
||||||
marginBottom: 12,
|
|
||||||
},
|
|
||||||
replyLine: {
|
replyLine: {
|
||||||
position: 'absolute',
|
position: 'absolute',
|
||||||
left: 36,
|
left: 36,
|
||||||
|
|
|
@ -8,6 +8,7 @@ import {
|
||||||
FontAwesomeIconStyle,
|
FontAwesomeIconStyle,
|
||||||
} from '@fortawesome/react-native-fontawesome'
|
} from '@fortawesome/react-native-fontawesome'
|
||||||
import {PostsFeedItemModel} from 'state/models/feeds/post'
|
import {PostsFeedItemModel} from 'state/models/feeds/post'
|
||||||
|
import {FeedSourceInfo} from 'lib/api/feed/types'
|
||||||
import {Link, DesktopWebTextLink} from '../util/Link'
|
import {Link, DesktopWebTextLink} from '../util/Link'
|
||||||
import {Text} from '../util/text/Text'
|
import {Text} from '../util/text/Text'
|
||||||
import {UserInfoText} from '../util/UserInfoText'
|
import {UserInfoText} from '../util/UserInfoText'
|
||||||
|
@ -26,17 +27,19 @@ import {usePalette} from 'lib/hooks/usePalette'
|
||||||
import {useAnalytics} from 'lib/analytics/analytics'
|
import {useAnalytics} from 'lib/analytics/analytics'
|
||||||
import {sanitizeDisplayName} from 'lib/strings/display-names'
|
import {sanitizeDisplayName} from 'lib/strings/display-names'
|
||||||
import {sanitizeHandle} from 'lib/strings/handles'
|
import {sanitizeHandle} from 'lib/strings/handles'
|
||||||
import {getTranslatorLink, isPostInLanguage} from '../../../locale/helpers'
|
import {getTranslatorLink} from '../../../locale/helpers'
|
||||||
import {makeProfileLink} from 'lib/routes/links'
|
import {makeProfileLink} from 'lib/routes/links'
|
||||||
import {isEmbedByEmbedder} from 'lib/embeds'
|
import {isEmbedByEmbedder} from 'lib/embeds'
|
||||||
|
|
||||||
export const FeedItem = observer(function FeedItemImpl({
|
export const FeedItem = observer(function FeedItemImpl({
|
||||||
item,
|
item,
|
||||||
|
source,
|
||||||
isThreadChild,
|
isThreadChild,
|
||||||
isThreadLastChild,
|
isThreadLastChild,
|
||||||
isThreadParent,
|
isThreadParent,
|
||||||
}: {
|
}: {
|
||||||
item: PostsFeedItemModel
|
item: PostsFeedItemModel
|
||||||
|
source?: FeedSourceInfo
|
||||||
isThreadChild?: boolean
|
isThreadChild?: boolean
|
||||||
isThreadLastChild?: boolean
|
isThreadLastChild?: boolean
|
||||||
isThreadParent?: boolean
|
isThreadParent?: boolean
|
||||||
|
@ -62,12 +65,6 @@ export const FeedItem = observer(function FeedItemImpl({
|
||||||
return urip.hostname
|
return urip.hostname
|
||||||
}, [record?.reply])
|
}, [record?.reply])
|
||||||
const translatorUrl = getTranslatorLink(record?.text || '')
|
const translatorUrl = getTranslatorLink(record?.text || '')
|
||||||
const needsTranslation = useMemo(
|
|
||||||
() =>
|
|
||||||
store.preferences.contentLanguages.length > 0 &&
|
|
||||||
!isPostInLanguage(item.post, store.preferences.contentLanguages),
|
|
||||||
[item.post, store.preferences.contentLanguages],
|
|
||||||
)
|
|
||||||
|
|
||||||
const onPressReply = React.useCallback(() => {
|
const onPressReply = React.useCallback(() => {
|
||||||
track('FeedItem:PostReply')
|
track('FeedItem:PostReply')
|
||||||
|
@ -179,7 +176,27 @@ export const FeedItem = observer(function FeedItemImpl({
|
||||||
</View>
|
</View>
|
||||||
|
|
||||||
<View style={{paddingTop: 12}}>
|
<View style={{paddingTop: 12}}>
|
||||||
{item.reasonRepost && (
|
{source ? (
|
||||||
|
<Link
|
||||||
|
title={sanitizeDisplayName(source.displayName)}
|
||||||
|
href={source.uri}>
|
||||||
|
<Text
|
||||||
|
type="sm-bold"
|
||||||
|
style={pal.textLight}
|
||||||
|
lineHeight={1.2}
|
||||||
|
numberOfLines={1}>
|
||||||
|
From{' '}
|
||||||
|
<DesktopWebTextLink
|
||||||
|
type="sm-bold"
|
||||||
|
style={pal.textLight}
|
||||||
|
lineHeight={1.2}
|
||||||
|
numberOfLines={1}
|
||||||
|
text={sanitizeDisplayName(source.displayName)}
|
||||||
|
href={source.uri}
|
||||||
|
/>
|
||||||
|
</Text>
|
||||||
|
</Link>
|
||||||
|
) : item.reasonRepost ? (
|
||||||
<Link
|
<Link
|
||||||
style={styles.includeReason}
|
style={styles.includeReason}
|
||||||
href={makeProfileLink(item.reasonRepost.by)}
|
href={makeProfileLink(item.reasonRepost.by)}
|
||||||
|
@ -188,10 +205,10 @@ export const FeedItem = observer(function FeedItemImpl({
|
||||||
)}>
|
)}>
|
||||||
<FontAwesomeIcon
|
<FontAwesomeIcon
|
||||||
icon="retweet"
|
icon="retweet"
|
||||||
style={[
|
style={{
|
||||||
styles.includeReasonIcon,
|
marginRight: 4,
|
||||||
{color: pal.colors.textLight} as FontAwesomeIconStyle,
|
color: pal.colors.textLight,
|
||||||
]}
|
}}
|
||||||
/>
|
/>
|
||||||
<Text
|
<Text
|
||||||
type="sm-bold"
|
type="sm-bold"
|
||||||
|
@ -212,7 +229,7 @@ export const FeedItem = observer(function FeedItemImpl({
|
||||||
/>
|
/>
|
||||||
</Text>
|
</Text>
|
||||||
</Link>
|
</Link>
|
||||||
)}
|
) : null}
|
||||||
</View>
|
</View>
|
||||||
</View>
|
</View>
|
||||||
|
|
||||||
|
@ -304,15 +321,6 @@ export const FeedItem = observer(function FeedItemImpl({
|
||||||
/>
|
/>
|
||||||
</ContentHider>
|
</ContentHider>
|
||||||
) : null}
|
) : null}
|
||||||
{needsTranslation && (
|
|
||||||
<View style={[pal.borderDark, styles.translateLink]}>
|
|
||||||
<Link href={translatorUrl} title="Translate">
|
|
||||||
<Text type="sm" style={pal.link}>
|
|
||||||
Translate this post
|
|
||||||
</Text>
|
|
||||||
</Link>
|
|
||||||
</View>
|
|
||||||
)}
|
|
||||||
</ContentHider>
|
</ContentHider>
|
||||||
<PostCtrls
|
<PostCtrls
|
||||||
itemUri={itemUri}
|
itemUri={itemUri}
|
||||||
|
@ -362,12 +370,9 @@ const styles = StyleSheet.create({
|
||||||
includeReason: {
|
includeReason: {
|
||||||
flexDirection: 'row',
|
flexDirection: 'row',
|
||||||
marginTop: 2,
|
marginTop: 2,
|
||||||
marginBottom: 4,
|
marginBottom: 2,
|
||||||
marginLeft: -20,
|
marginLeft: -20,
|
||||||
},
|
},
|
||||||
includeReasonIcon: {
|
|
||||||
marginRight: 4,
|
|
||||||
},
|
|
||||||
layout: {
|
layout: {
|
||||||
flexDirection: 'row',
|
flexDirection: 'row',
|
||||||
marginTop: 1,
|
marginTop: 1,
|
||||||
|
|
|
@ -28,6 +28,7 @@ export const FeedSlice = observer(function FeedSliceImpl({
|
||||||
<FeedItem
|
<FeedItem
|
||||||
key={slice.items[0]._reactKey}
|
key={slice.items[0]._reactKey}
|
||||||
item={slice.items[0]}
|
item={slice.items[0]}
|
||||||
|
source={slice.source}
|
||||||
isThreadParent={slice.isThreadParentAt(0)}
|
isThreadParent={slice.isThreadParentAt(0)}
|
||||||
isThreadChild={slice.isThreadChildAt(0)}
|
isThreadChild={slice.isThreadChildAt(0)}
|
||||||
/>
|
/>
|
||||||
|
@ -55,6 +56,7 @@ export const FeedSlice = observer(function FeedSliceImpl({
|
||||||
<FeedItem
|
<FeedItem
|
||||||
key={item._reactKey}
|
key={item._reactKey}
|
||||||
item={item}
|
item={item}
|
||||||
|
source={i === 0 ? slice.source : undefined}
|
||||||
isThreadParent={slice.isThreadParentAt(i)}
|
isThreadParent={slice.isThreadParentAt(i)}
|
||||||
isThreadChild={slice.isThreadChildAt(i)}
|
isThreadChild={slice.isThreadChildAt(i)}
|
||||||
isThreadLastChild={
|
isThreadLastChild={
|
||||||
|
|
|
@ -28,7 +28,7 @@ export function FollowingEmptyState() {
|
||||||
}, [navigation])
|
}, [navigation])
|
||||||
|
|
||||||
const onPressDiscoverFeeds = React.useCallback(() => {
|
const onPressDiscoverFeeds = React.useCallback(() => {
|
||||||
navigation.navigate('DiscoverFeeds')
|
navigation.navigate('Feeds')
|
||||||
}, [navigation])
|
}, [navigation])
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
|
|
@ -1,256 +0,0 @@
|
||||||
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/analytics'
|
|
||||||
import {usePalette} from 'lib/hooks/usePalette'
|
|
||||||
import {useTheme} from 'lib/ThemeContext'
|
|
||||||
import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
|
|
||||||
import {CogIcon} from 'lib/icons'
|
|
||||||
|
|
||||||
export const MultiFeed = observer(function Feed({
|
|
||||||
multifeed,
|
|
||||||
style,
|
|
||||||
scrollElRef,
|
|
||||||
onScroll,
|
|
||||||
scrollEventThrottle,
|
|
||||||
testID,
|
|
||||||
headerOffset = 0,
|
|
||||||
extraData,
|
|
||||||
}: {
|
|
||||||
multifeed: PostsMultiFeedModel
|
|
||||||
style?: StyleProp<ViewStyle>
|
|
||||||
scrollElRef?: MutableRefObject<FlatList<any> | null>
|
|
||||||
onPressTryAgain?: () => void
|
|
||||||
onScroll?: OnScrollCb
|
|
||||||
scrollEventThrottle?: number
|
|
||||||
renderEmptyState?: () => JSX.Element
|
|
||||||
testID?: string
|
|
||||||
headerOffset?: number
|
|
||||||
extraData?: any
|
|
||||||
}) {
|
|
||||||
const pal = usePalette('default')
|
|
||||||
const theme = useTheme()
|
|
||||||
const {isMobile} = useWebMediaQueries()
|
|
||||||
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 (!isMobile) {
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<View style={[pal.view, pal.border, styles.headerDesktop]}>
|
|
||||||
<Text type="2xl-bold" style={pal.text}>
|
|
||||||
My Feeds
|
|
||||||
</Text>
|
|
||||||
<Link href="/settings/saved-feeds">
|
|
||||||
<CogIcon strokeWidth={1.5} style={pal.icon} size={28} />
|
|
||||||
</Link>
|
|
||||||
</View>
|
|
||||||
<DiscoverLink />
|
|
||||||
</>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<View style={[styles.header, pal.border]} />
|
|
||||||
<DiscoverLink />
|
|
||||||
</>
|
|
||||||
)
|
|
||||||
} else if (item.type === 'feed-header') {
|
|
||||||
return (
|
|
||||||
<View style={styles.feedHeader}>
|
|
||||||
<UserAvatar type="algo" avatar={item.avatar} size={28} />
|
|
||||||
<Text type="title-lg" style={[pal.text, styles.feedHeaderTitle]}>
|
|
||||||
{item.title}
|
|
||||||
</Text>
|
|
||||||
</View>
|
|
||||||
)
|
|
||||||
} else if (item.type === 'feed-slice') {
|
|
||||||
return <FeedSlice slice={item.slice} />
|
|
||||||
} else if (item.type === 'feed-loading') {
|
|
||||||
return <PostFeedLoadingPlaceholder />
|
|
||||||
} else if (item.type === 'feed-error') {
|
|
||||||
return <ErrorMessage message={item.error} />
|
|
||||||
} else if (item.type === 'feed-footer') {
|
|
||||||
return (
|
|
||||||
<Link
|
|
||||||
href={item.uri}
|
|
||||||
style={[styles.feedFooter, pal.border, pal.view]}>
|
|
||||||
<Text type="lg" style={pal.link}>
|
|
||||||
See more from {item.title}
|
|
||||||
</Text>
|
|
||||||
<FontAwesomeIcon
|
|
||||||
icon="angle-right"
|
|
||||||
size={18}
|
|
||||||
color={pal.colors.link}
|
|
||||||
/>
|
|
||||||
</Link>
|
|
||||||
)
|
|
||||||
} else if (item.type === 'footer') {
|
|
||||||
return <DiscoverLink />
|
|
||||||
}
|
|
||||||
return null
|
|
||||||
},
|
|
||||||
[pal, isMobile],
|
|
||||||
)
|
|
||||||
|
|
||||||
const ListFooter = React.useCallback(
|
|
||||||
() =>
|
|
||||||
multifeed.isLoading && !isRefreshing ? (
|
|
||||||
<View style={styles.loadMore}>
|
|
||||||
<ActivityIndicator color={pal.colors.text} />
|
|
||||||
</View>
|
|
||||||
) : (
|
|
||||||
<View />
|
|
||||||
),
|
|
||||||
[multifeed.isLoading, isRefreshing, pal],
|
|
||||||
)
|
|
||||||
|
|
||||||
return (
|
|
||||||
<View testID={testID} style={style}>
|
|
||||||
{multifeed.items.length > 0 && (
|
|
||||||
<FlatList
|
|
||||||
testID={testID ? `${testID}-flatlist` : undefined}
|
|
||||||
ref={scrollElRef}
|
|
||||||
data={multifeed.items}
|
|
||||||
keyExtractor={item => item._reactKey}
|
|
||||||
renderItem={renderItem}
|
|
||||||
ListFooterComponent={ListFooter}
|
|
||||||
refreshControl={
|
|
||||||
<RefreshControl
|
|
||||||
refreshing={isRefreshing}
|
|
||||||
onRefresh={onRefresh}
|
|
||||||
tintColor={pal.colors.text}
|
|
||||||
titleColor={pal.colors.text}
|
|
||||||
progressViewOffset={headerOffset}
|
|
||||||
/>
|
|
||||||
}
|
|
||||||
contentContainerStyle={s.contentContainer}
|
|
||||||
style={[{paddingTop: headerOffset}, pal.view, styles.container]}
|
|
||||||
onScroll={onScroll}
|
|
||||||
scrollEventThrottle={scrollEventThrottle}
|
|
||||||
indicatorStyle={theme.colorScheme === 'dark' ? 'white' : 'black'}
|
|
||||||
onEndReached={onEndReached}
|
|
||||||
onEndReachedThreshold={0.6}
|
|
||||||
removeClippedSubviews={true}
|
|
||||||
contentOffset={{x: 0, y: headerOffset * -1}}
|
|
||||||
extraData={extraData}
|
|
||||||
// @ts-ignore our .web version only -prf
|
|
||||||
desktopFixedHeight
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
</View>
|
|
||||||
)
|
|
||||||
})
|
|
||||||
|
|
||||||
function DiscoverLink() {
|
|
||||||
const pal = usePalette('default')
|
|
||||||
return (
|
|
||||||
<Link style={[styles.discoverLink, pal.viewLight]} href="/search/feeds">
|
|
||||||
<FontAwesomeIcon icon="search" size={18} color={pal.colors.text} />
|
|
||||||
<Text type="xl-medium" style={pal.text}>
|
|
||||||
Discover new feeds
|
|
||||||
</Text>
|
|
||||||
</Link>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
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,
|
|
||||||
},
|
|
||||||
discoverLink: {
|
|
||||||
flexDirection: 'row',
|
|
||||||
alignItems: 'center',
|
|
||||||
justifyContent: 'center',
|
|
||||||
borderRadius: 8,
|
|
||||||
paddingHorizontal: 14,
|
|
||||||
paddingVertical: 12,
|
|
||||||
marginHorizontal: 8,
|
|
||||||
marginVertical: 8,
|
|
||||||
gap: 8,
|
|
||||||
},
|
|
||||||
loadMore: {
|
|
||||||
paddingTop: 10,
|
|
||||||
},
|
|
||||||
})
|
|
|
@ -26,6 +26,7 @@ import {useStores, RootStoreModel} from 'state/index'
|
||||||
import {convertBskyAppUrlIfNeeded, isExternalUrl} from 'lib/strings/url-helpers'
|
import {convertBskyAppUrlIfNeeded, isExternalUrl} from 'lib/strings/url-helpers'
|
||||||
import {isAndroid, isDesktopWeb} from 'platform/detection'
|
import {isAndroid, isDesktopWeb} from 'platform/detection'
|
||||||
import {sanitizeUrl} from '@braintree/sanitize-url'
|
import {sanitizeUrl} from '@braintree/sanitize-url'
|
||||||
|
import {PressableWithHover} from './PressableWithHover'
|
||||||
import FixedTouchableHighlight from '../pager/FixedTouchableHighlight'
|
import FixedTouchableHighlight from '../pager/FixedTouchableHighlight'
|
||||||
|
|
||||||
type Event =
|
type Event =
|
||||||
|
@ -38,6 +39,7 @@ interface Props extends ComponentProps<typeof TouchableOpacity> {
|
||||||
href?: string
|
href?: string
|
||||||
title?: string
|
title?: string
|
||||||
children?: React.ReactNode
|
children?: React.ReactNode
|
||||||
|
hoverStyle?: StyleProp<ViewStyle>
|
||||||
noFeedback?: boolean
|
noFeedback?: boolean
|
||||||
asAnchor?: boolean
|
asAnchor?: boolean
|
||||||
anchorNoUnderline?: boolean
|
anchorNoUnderline?: boolean
|
||||||
|
@ -112,8 +114,9 @@ export const Link = observer(function Link({
|
||||||
props.accessibilityLabel = title
|
props.accessibilityLabel = title
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const Com = props.hoverStyle ? PressableWithHover : Pressable
|
||||||
return (
|
return (
|
||||||
<Pressable
|
<Com
|
||||||
testID={testID}
|
testID={testID}
|
||||||
style={style}
|
style={style}
|
||||||
onPress={onPress}
|
onPress={onPress}
|
||||||
|
@ -123,7 +126,7 @@ export const Link = observer(function Link({
|
||||||
href={asAnchor ? sanitizeUrl(href) : undefined}
|
href={asAnchor ? sanitizeUrl(href) : undefined}
|
||||||
{...props}>
|
{...props}>
|
||||||
{children ? children : <Text>{title || 'link'}</Text>}
|
{children ? children : <Text>{title || 'link'}</Text>}
|
||||||
</Pressable>
|
</Com>
|
||||||
)
|
)
|
||||||
})
|
})
|
||||||
|
|
||||||
|
@ -137,6 +140,7 @@ export const TextLink = observer(function TextLink({
|
||||||
lineHeight,
|
lineHeight,
|
||||||
dataSet,
|
dataSet,
|
||||||
title,
|
title,
|
||||||
|
onPress,
|
||||||
}: {
|
}: {
|
||||||
testID?: string
|
testID?: string
|
||||||
type?: TypographyVariant
|
type?: TypographyVariant
|
||||||
|
@ -154,9 +158,14 @@ export const TextLink = observer(function TextLink({
|
||||||
|
|
||||||
props.onPress = React.useCallback(
|
props.onPress = React.useCallback(
|
||||||
(e?: Event) => {
|
(e?: Event) => {
|
||||||
|
if (onPress) {
|
||||||
|
e?.preventDefault?.()
|
||||||
|
// @ts-ignore function signature differs by platform -prf
|
||||||
|
return onPress()
|
||||||
|
}
|
||||||
return onPressInner(store, navigation, sanitizeUrl(href), e)
|
return onPressInner(store, navigation, sanitizeUrl(href), e)
|
||||||
},
|
},
|
||||||
[store, navigation, href],
|
[onPress, store, navigation, href],
|
||||||
)
|
)
|
||||||
const hrefAttrs = useMemo(() => {
|
const hrefAttrs = useMemo(() => {
|
||||||
const isExternal = isExternalUrl(href)
|
const isExternal = isExternalUrl(href)
|
||||||
|
|
|
@ -174,6 +174,60 @@ export function ProfileCardFeedLoadingPlaceholder() {
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export function FeedLoadingPlaceholder({
|
||||||
|
style,
|
||||||
|
}: {
|
||||||
|
style?: StyleProp<ViewStyle>
|
||||||
|
}) {
|
||||||
|
const pal = usePalette('default')
|
||||||
|
return (
|
||||||
|
<View
|
||||||
|
style={[
|
||||||
|
{paddingHorizontal: 12, paddingVertical: 18, borderTopWidth: 1},
|
||||||
|
pal.border,
|
||||||
|
style,
|
||||||
|
]}>
|
||||||
|
<View style={[pal.view, {flexDirection: 'row', marginBottom: 10}]}>
|
||||||
|
<LoadingPlaceholder
|
||||||
|
width={36}
|
||||||
|
height={36}
|
||||||
|
style={[styles.avatar, {borderRadius: 6}]}
|
||||||
|
/>
|
||||||
|
<View style={[s.flex1]}>
|
||||||
|
<LoadingPlaceholder width={100} height={8} style={[s.mt5, s.mb10]} />
|
||||||
|
<LoadingPlaceholder width={120} height={8} />
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
<View style={{paddingHorizontal: 5}}>
|
||||||
|
<LoadingPlaceholder
|
||||||
|
width={260}
|
||||||
|
height={8}
|
||||||
|
style={{marginVertical: 12}}
|
||||||
|
/>
|
||||||
|
<LoadingPlaceholder width={120} height={8} />
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export function FeedFeedLoadingPlaceholder() {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<FeedLoadingPlaceholder />
|
||||||
|
<FeedLoadingPlaceholder />
|
||||||
|
<FeedLoadingPlaceholder />
|
||||||
|
<FeedLoadingPlaceholder />
|
||||||
|
<FeedLoadingPlaceholder />
|
||||||
|
<FeedLoadingPlaceholder />
|
||||||
|
<FeedLoadingPlaceholder />
|
||||||
|
<FeedLoadingPlaceholder />
|
||||||
|
<FeedLoadingPlaceholder />
|
||||||
|
<FeedLoadingPlaceholder />
|
||||||
|
<FeedLoadingPlaceholder />
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
const styles = StyleSheet.create({
|
const styles = StyleSheet.create({
|
||||||
loadingPlaceholder: {
|
loadingPlaceholder: {
|
||||||
borderRadius: 6,
|
borderRadius: 6,
|
||||||
|
|
|
@ -0,0 +1,105 @@
|
||||||
|
import React from 'react'
|
||||||
|
import {observer} from 'mobx-react-lite'
|
||||||
|
import {
|
||||||
|
StyleProp,
|
||||||
|
StyleSheet,
|
||||||
|
TouchableOpacity,
|
||||||
|
View,
|
||||||
|
ViewStyle,
|
||||||
|
} from 'react-native'
|
||||||
|
import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
|
||||||
|
import {useNavigation} from '@react-navigation/native'
|
||||||
|
import {CenteredView} from './Views'
|
||||||
|
import {useStores} from 'state/index'
|
||||||
|
import {usePalette} from 'lib/hooks/usePalette'
|
||||||
|
import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
|
||||||
|
import {useAnalytics} from 'lib/analytics/analytics'
|
||||||
|
import {NavigationProp} from 'lib/routes/types'
|
||||||
|
|
||||||
|
const BACK_HITSLOP = {left: 20, top: 20, right: 50, bottom: 20}
|
||||||
|
|
||||||
|
export const SimpleViewHeader = observer(function SimpleViewHeaderImpl({
|
||||||
|
showBackButton = true,
|
||||||
|
style,
|
||||||
|
children,
|
||||||
|
}: React.PropsWithChildren<{
|
||||||
|
showBackButton?: boolean
|
||||||
|
style?: StyleProp<ViewStyle>
|
||||||
|
}>) {
|
||||||
|
const pal = usePalette('default')
|
||||||
|
const store = useStores()
|
||||||
|
const navigation = useNavigation<NavigationProp>()
|
||||||
|
const {track} = useAnalytics()
|
||||||
|
const {isMobile} = useWebMediaQueries()
|
||||||
|
const canGoBack = navigation.canGoBack()
|
||||||
|
|
||||||
|
const onPressBack = React.useCallback(() => {
|
||||||
|
if (navigation.canGoBack()) {
|
||||||
|
navigation.goBack()
|
||||||
|
} else {
|
||||||
|
navigation.navigate('Home')
|
||||||
|
}
|
||||||
|
}, [navigation])
|
||||||
|
|
||||||
|
const onPressMenu = React.useCallback(() => {
|
||||||
|
track('ViewHeader:MenuButtonClicked')
|
||||||
|
store.shell.openDrawer()
|
||||||
|
}, [track, store])
|
||||||
|
|
||||||
|
const Container = isMobile ? View : CenteredView
|
||||||
|
return (
|
||||||
|
<Container style={[styles.header, isMobile && styles.headerMobile, style]}>
|
||||||
|
{showBackButton ? (
|
||||||
|
<TouchableOpacity
|
||||||
|
testID="viewHeaderDrawerBtn"
|
||||||
|
onPress={canGoBack ? onPressBack : onPressMenu}
|
||||||
|
hitSlop={BACK_HITSLOP}
|
||||||
|
style={canGoBack ? styles.backBtn : styles.backBtnWide}
|
||||||
|
accessibilityRole="button"
|
||||||
|
accessibilityLabel={canGoBack ? 'Back' : 'Menu'}
|
||||||
|
accessibilityHint="">
|
||||||
|
{canGoBack ? (
|
||||||
|
<FontAwesomeIcon
|
||||||
|
size={18}
|
||||||
|
icon="angle-left"
|
||||||
|
style={[styles.backIcon, pal.text]}
|
||||||
|
/>
|
||||||
|
) : (
|
||||||
|
<FontAwesomeIcon
|
||||||
|
size={18}
|
||||||
|
icon="bars"
|
||||||
|
style={[styles.backIcon, pal.textLight]}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</TouchableOpacity>
|
||||||
|
) : null}
|
||||||
|
{children}
|
||||||
|
</Container>
|
||||||
|
)
|
||||||
|
})
|
||||||
|
|
||||||
|
const styles = StyleSheet.create({
|
||||||
|
header: {
|
||||||
|
flexDirection: 'row',
|
||||||
|
alignItems: 'center',
|
||||||
|
paddingHorizontal: 18,
|
||||||
|
paddingVertical: 12,
|
||||||
|
width: '100%',
|
||||||
|
},
|
||||||
|
headerMobile: {
|
||||||
|
paddingHorizontal: 12,
|
||||||
|
paddingVertical: 10,
|
||||||
|
},
|
||||||
|
backBtn: {
|
||||||
|
width: 30,
|
||||||
|
height: 30,
|
||||||
|
},
|
||||||
|
backBtnWide: {
|
||||||
|
width: 30,
|
||||||
|
height: 30,
|
||||||
|
paddingHorizontal: 6,
|
||||||
|
},
|
||||||
|
backIcon: {
|
||||||
|
marginTop: 6,
|
||||||
|
},
|
||||||
|
})
|
|
@ -118,7 +118,7 @@ export function UserAvatar({
|
||||||
return {
|
return {
|
||||||
width: size,
|
width: size,
|
||||||
height: size,
|
height: size,
|
||||||
borderRadius: 8,
|
borderRadius: size > 32 ? 8 : 3,
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
return {
|
return {
|
||||||
|
|
|
@ -0,0 +1,104 @@
|
||||||
|
import React from 'react'
|
||||||
|
import {
|
||||||
|
StyleProp,
|
||||||
|
StyleSheet,
|
||||||
|
TextInput,
|
||||||
|
TouchableOpacity,
|
||||||
|
View,
|
||||||
|
ViewStyle,
|
||||||
|
} from 'react-native'
|
||||||
|
import {
|
||||||
|
FontAwesomeIcon,
|
||||||
|
FontAwesomeIconStyle,
|
||||||
|
} from '@fortawesome/react-native-fontawesome'
|
||||||
|
import {MagnifyingGlassIcon} from 'lib/icons'
|
||||||
|
import {useTheme} from 'lib/ThemeContext'
|
||||||
|
import {usePalette} from 'lib/hooks/usePalette'
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
query: string
|
||||||
|
setIsInputFocused?: (v: boolean) => void
|
||||||
|
onChangeQuery: (v: string) => void
|
||||||
|
onPressCancelSearch: () => void
|
||||||
|
onSubmitQuery: () => void
|
||||||
|
style?: StyleProp<ViewStyle>
|
||||||
|
}
|
||||||
|
export function SearchInput({
|
||||||
|
query,
|
||||||
|
setIsInputFocused,
|
||||||
|
onChangeQuery,
|
||||||
|
onPressCancelSearch,
|
||||||
|
onSubmitQuery,
|
||||||
|
style,
|
||||||
|
}: Props) {
|
||||||
|
const theme = useTheme()
|
||||||
|
const pal = usePalette('default')
|
||||||
|
const textInput = React.useRef<TextInput>(null)
|
||||||
|
|
||||||
|
const onPressCancelSearchInner = React.useCallback(() => {
|
||||||
|
onPressCancelSearch()
|
||||||
|
textInput.current?.blur()
|
||||||
|
}, [onPressCancelSearch, textInput])
|
||||||
|
|
||||||
|
return (
|
||||||
|
<View style={[pal.viewLight, styles.container, style]}>
|
||||||
|
<MagnifyingGlassIcon style={[pal.icon, styles.icon]} size={21} />
|
||||||
|
<TextInput
|
||||||
|
testID="searchTextInput"
|
||||||
|
ref={textInput}
|
||||||
|
placeholder="Search"
|
||||||
|
placeholderTextColor={pal.colors.textLight}
|
||||||
|
selectTextOnFocus
|
||||||
|
returnKeyType="search"
|
||||||
|
value={query}
|
||||||
|
style={[pal.text, styles.input]}
|
||||||
|
keyboardAppearance={theme.colorScheme}
|
||||||
|
onFocus={() => setIsInputFocused?.(true)}
|
||||||
|
onBlur={() => setIsInputFocused?.(false)}
|
||||||
|
onChangeText={onChangeQuery}
|
||||||
|
onSubmitEditing={onSubmitQuery}
|
||||||
|
accessibilityRole="search"
|
||||||
|
accessibilityLabel="Search"
|
||||||
|
accessibilityHint=""
|
||||||
|
autoCorrect={false}
|
||||||
|
autoCapitalize="none"
|
||||||
|
/>
|
||||||
|
{query ? (
|
||||||
|
<TouchableOpacity
|
||||||
|
onPress={onPressCancelSearchInner}
|
||||||
|
accessibilityRole="button"
|
||||||
|
accessibilityLabel="Clear search query"
|
||||||
|
accessibilityHint="">
|
||||||
|
<FontAwesomeIcon
|
||||||
|
icon="xmark"
|
||||||
|
size={16}
|
||||||
|
style={pal.textLight as FontAwesomeIconStyle}
|
||||||
|
/>
|
||||||
|
</TouchableOpacity>
|
||||||
|
) : undefined}
|
||||||
|
</View>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
const styles = StyleSheet.create({
|
||||||
|
container: {
|
||||||
|
flex: 1,
|
||||||
|
flexDirection: 'row',
|
||||||
|
alignItems: 'center',
|
||||||
|
borderRadius: 30,
|
||||||
|
paddingHorizontal: 12,
|
||||||
|
paddingVertical: 8,
|
||||||
|
},
|
||||||
|
icon: {
|
||||||
|
marginRight: 6,
|
||||||
|
alignSelf: 'center',
|
||||||
|
},
|
||||||
|
input: {
|
||||||
|
flex: 1,
|
||||||
|
fontSize: 17,
|
||||||
|
minWidth: 0, // overflow mitigation for firefox
|
||||||
|
},
|
||||||
|
cancelBtn: {
|
||||||
|
paddingLeft: 10,
|
||||||
|
},
|
||||||
|
})
|
|
@ -1 +1,86 @@
|
||||||
export * from './LoadLatestBtnMobile'
|
import React from 'react'
|
||||||
|
import {StyleSheet, TouchableOpacity, View} from 'react-native'
|
||||||
|
import {observer} from 'mobx-react-lite'
|
||||||
|
import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
|
||||||
|
import {useSafeAreaInsets} from 'react-native-safe-area-context'
|
||||||
|
import {clamp} from 'lodash'
|
||||||
|
import {useStores} from 'state/index'
|
||||||
|
import {usePalette} from 'lib/hooks/usePalette'
|
||||||
|
import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
|
||||||
|
import {colors} from 'lib/styles'
|
||||||
|
import {HITSLOP_20} from 'lib/constants'
|
||||||
|
|
||||||
|
export const LoadLatestBtn = observer(function LoadLatestBtnImpl({
|
||||||
|
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 {isDesktop, isTablet, isMobile} = useWebMediaQueries()
|
||||||
|
const safeAreaInsets = useSafeAreaInsets()
|
||||||
|
return (
|
||||||
|
<TouchableOpacity
|
||||||
|
style={[
|
||||||
|
styles.loadLatest,
|
||||||
|
isDesktop && styles.loadLatestDesktop,
|
||||||
|
isTablet && styles.loadLatestTablet,
|
||||||
|
pal.borderDark,
|
||||||
|
pal.view,
|
||||||
|
isMobile &&
|
||||||
|
!store.shell.minimalShellMode && {
|
||||||
|
bottom: 60 + clamp(safeAreaInsets.bottom, 15, 30),
|
||||||
|
},
|
||||||
|
]}
|
||||||
|
onPress={onPress}
|
||||||
|
hitSlop={HITSLOP_20}
|
||||||
|
accessibilityRole="button"
|
||||||
|
accessibilityLabel={label}
|
||||||
|
accessibilityHint="">
|
||||||
|
<FontAwesomeIcon icon="angle-up" color={pal.colors.text} size={19} />
|
||||||
|
{showIndicator && <View style={[styles.indicator, pal.borderDark]} />}
|
||||||
|
</TouchableOpacity>
|
||||||
|
)
|
||||||
|
})
|
||||||
|
|
||||||
|
const styles = StyleSheet.create({
|
||||||
|
loadLatest: {
|
||||||
|
position: 'absolute',
|
||||||
|
left: 18,
|
||||||
|
bottom: 35,
|
||||||
|
borderWidth: 1,
|
||||||
|
width: 52,
|
||||||
|
height: 52,
|
||||||
|
borderRadius: 26,
|
||||||
|
flexDirection: 'row',
|
||||||
|
alignItems: 'center',
|
||||||
|
justifyContent: 'center',
|
||||||
|
},
|
||||||
|
loadLatestTablet: {
|
||||||
|
// @ts-ignore web only
|
||||||
|
left: '50vw',
|
||||||
|
// @ts-ignore web only -prf
|
||||||
|
transform: 'translateX(-282px)',
|
||||||
|
},
|
||||||
|
loadLatestDesktop: {
|
||||||
|
// @ts-ignore web only
|
||||||
|
left: '50vw',
|
||||||
|
// @ts-ignore web only -prf
|
||||||
|
transform: 'translateX(-382px)',
|
||||||
|
},
|
||||||
|
indicator: {
|
||||||
|
position: 'absolute',
|
||||||
|
top: 3,
|
||||||
|
right: 3,
|
||||||
|
backgroundColor: colors.blue3,
|
||||||
|
width: 12,
|
||||||
|
height: 12,
|
||||||
|
borderRadius: 6,
|
||||||
|
borderWidth: 1,
|
||||||
|
},
|
||||||
|
})
|
||||||
|
|
|
@ -1,109 +0,0 @@
|
||||||
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 {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
|
|
||||||
import {LoadLatestBtn as LoadLatestBtnMobile} from './LoadLatestBtnMobile'
|
|
||||||
import {HITSLOP_20} from 'lib/constants'
|
|
||||||
|
|
||||||
export const LoadLatestBtn = ({
|
|
||||||
onPress,
|
|
||||||
label,
|
|
||||||
showIndicator,
|
|
||||||
minimalShellMode,
|
|
||||||
}: {
|
|
||||||
onPress: () => void
|
|
||||||
label: string
|
|
||||||
showIndicator: boolean
|
|
||||||
minimalShellMode?: boolean
|
|
||||||
}) => {
|
|
||||||
const pal = usePalette('default')
|
|
||||||
const {isMobile} = useWebMediaQueries()
|
|
||||||
if (isMobile) {
|
|
||||||
return (
|
|
||||||
<LoadLatestBtnMobile
|
|
||||||
onPress={onPress}
|
|
||||||
label={label}
|
|
||||||
showIndicator={showIndicator}
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
{showIndicator && (
|
|
||||||
<TouchableOpacity
|
|
||||||
style={[
|
|
||||||
pal.view,
|
|
||||||
pal.borderDark,
|
|
||||||
styles.loadLatestCentered,
|
|
||||||
minimalShellMode && styles.loadLatestCenteredMinimal,
|
|
||||||
]}
|
|
||||||
onPress={onPress}
|
|
||||||
hitSlop={HITSLOP_20}
|
|
||||||
accessibilityRole="button"
|
|
||||||
accessibilityLabel={label}
|
|
||||||
accessibilityHint="">
|
|
||||||
<Text type="md-bold" style={pal.text}>
|
|
||||||
{label}
|
|
||||||
</Text>
|
|
||||||
</TouchableOpacity>
|
|
||||||
)}
|
|
||||||
<TouchableOpacity
|
|
||||||
style={[pal.view, pal.borderDark, styles.loadLatest]}
|
|
||||||
onPress={onPress}
|
|
||||||
hitSlop={HITSLOP_20}
|
|
||||||
accessibilityRole="button"
|
|
||||||
accessibilityLabel={label}
|
|
||||||
accessibilityHint="">
|
|
||||||
<Text type="md-bold" style={pal.text}>
|
|
||||||
<FontAwesomeIcon
|
|
||||||
icon="angle-up"
|
|
||||||
size={21}
|
|
||||||
style={[pal.text, styles.icon]}
|
|
||||||
/>
|
|
||||||
</Text>
|
|
||||||
</TouchableOpacity>
|
|
||||||
</>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
const styles = StyleSheet.create({
|
|
||||||
loadLatest: {
|
|
||||||
flexDirection: 'row',
|
|
||||||
alignItems: 'center',
|
|
||||||
justifyContent: 'center',
|
|
||||||
position: 'absolute',
|
|
||||||
// @ts-ignore web only
|
|
||||||
left: '50vw',
|
|
||||||
// @ts-ignore web only -prf
|
|
||||||
transform: 'translateX(-282px)',
|
|
||||||
bottom: 40,
|
|
||||||
width: 54,
|
|
||||||
height: 54,
|
|
||||||
borderRadius: 30,
|
|
||||||
borderWidth: 1,
|
|
||||||
},
|
|
||||||
icon: {
|
|
||||||
position: 'relative',
|
|
||||||
top: 2,
|
|
||||||
},
|
|
||||||
loadLatestCentered: {
|
|
||||||
flexDirection: 'row',
|
|
||||||
alignItems: 'center',
|
|
||||||
justifyContent: 'center',
|
|
||||||
position: 'absolute',
|
|
||||||
// @ts-ignore web only
|
|
||||||
left: '50vw',
|
|
||||||
// @ts-ignore web only -prf
|
|
||||||
transform: 'translateX(-50%)',
|
|
||||||
top: 60,
|
|
||||||
paddingHorizontal: 24,
|
|
||||||
paddingVertical: 14,
|
|
||||||
borderRadius: 30,
|
|
||||||
borderWidth: 1,
|
|
||||||
},
|
|
||||||
loadLatestCenteredMinimal: {
|
|
||||||
top: 20,
|
|
||||||
},
|
|
||||||
})
|
|
|
@ -1,69 +0,0 @@
|
||||||
import React from 'react'
|
|
||||||
import {StyleSheet, TouchableOpacity, View} from 'react-native'
|
|
||||||
import {observer} from 'mobx-react-lite'
|
|
||||||
import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
|
|
||||||
import {useSafeAreaInsets} from 'react-native-safe-area-context'
|
|
||||||
import {clamp} from 'lodash'
|
|
||||||
import {useStores} from 'state/index'
|
|
||||||
import {usePalette} from 'lib/hooks/usePalette'
|
|
||||||
import {colors} from 'lib/styles'
|
|
||||||
import {HITSLOP_20} from 'lib/constants'
|
|
||||||
|
|
||||||
export const LoadLatestBtn = observer(function LoadLatestBtnImpl({
|
|
||||||
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 (
|
|
||||||
<TouchableOpacity
|
|
||||||
style={[
|
|
||||||
styles.loadLatest,
|
|
||||||
pal.borderDark,
|
|
||||||
pal.view,
|
|
||||||
!store.shell.minimalShellMode && {
|
|
||||||
bottom: 60 + clamp(safeAreaInsets.bottom, 15, 30),
|
|
||||||
},
|
|
||||||
]}
|
|
||||||
onPress={onPress}
|
|
||||||
hitSlop={HITSLOP_20}
|
|
||||||
accessibilityRole="button"
|
|
||||||
accessibilityLabel={label}
|
|
||||||
accessibilityHint="">
|
|
||||||
<FontAwesomeIcon icon="angle-up" color={pal.colors.text} size={19} />
|
|
||||||
{showIndicator && <View style={[styles.indicator, pal.borderDark]} />}
|
|
||||||
</TouchableOpacity>
|
|
||||||
)
|
|
||||||
})
|
|
||||||
|
|
||||||
const styles = StyleSheet.create({
|
|
||||||
loadLatest: {
|
|
||||||
position: 'absolute',
|
|
||||||
left: 18,
|
|
||||||
bottom: 35,
|
|
||||||
borderWidth: 1,
|
|
||||||
width: 52,
|
|
||||||
height: 52,
|
|
||||||
borderRadius: 26,
|
|
||||||
flexDirection: 'row',
|
|
||||||
alignItems: 'center',
|
|
||||||
justifyContent: 'center',
|
|
||||||
},
|
|
||||||
indicator: {
|
|
||||||
position: 'absolute',
|
|
||||||
top: 3,
|
|
||||||
right: 3,
|
|
||||||
backgroundColor: colors.blue3,
|
|
||||||
width: 12,
|
|
||||||
height: 12,
|
|
||||||
borderRadius: 6,
|
|
||||||
borderWidth: 1,
|
|
||||||
},
|
|
||||||
})
|
|
|
@ -13,6 +13,7 @@ import {faArrowRightFromBracket} from '@fortawesome/free-solid-svg-icons/faArrow
|
||||||
import {faArrowUpFromBracket} from '@fortawesome/free-solid-svg-icons/faArrowUpFromBracket'
|
import {faArrowUpFromBracket} from '@fortawesome/free-solid-svg-icons/faArrowUpFromBracket'
|
||||||
import {faArrowUpRightFromSquare} from '@fortawesome/free-solid-svg-icons/faArrowUpRightFromSquare'
|
import {faArrowUpRightFromSquare} from '@fortawesome/free-solid-svg-icons/faArrowUpRightFromSquare'
|
||||||
import {faArrowRotateLeft} from '@fortawesome/free-solid-svg-icons/faArrowRotateLeft'
|
import {faArrowRotateLeft} from '@fortawesome/free-solid-svg-icons/faArrowRotateLeft'
|
||||||
|
import {faArrowTrendUp} from '@fortawesome/free-solid-svg-icons/faArrowTrendUp'
|
||||||
import {faArrowsRotate} from '@fortawesome/free-solid-svg-icons/faArrowsRotate'
|
import {faArrowsRotate} from '@fortawesome/free-solid-svg-icons/faArrowsRotate'
|
||||||
import {faAt} from '@fortawesome/free-solid-svg-icons/faAt'
|
import {faAt} from '@fortawesome/free-solid-svg-icons/faAt'
|
||||||
import {faBars} from '@fortawesome/free-solid-svg-icons/faBars'
|
import {faBars} from '@fortawesome/free-solid-svg-icons/faBars'
|
||||||
|
@ -24,6 +25,7 @@ import {faBookmark as farBookmark} from '@fortawesome/free-regular-svg-icons/faB
|
||||||
import {faCalendar as farCalendar} from '@fortawesome/free-regular-svg-icons/faCalendar'
|
import {faCalendar as farCalendar} from '@fortawesome/free-regular-svg-icons/faCalendar'
|
||||||
import {faCamera} from '@fortawesome/free-solid-svg-icons/faCamera'
|
import {faCamera} from '@fortawesome/free-solid-svg-icons/faCamera'
|
||||||
import {faCheck} from '@fortawesome/free-solid-svg-icons/faCheck'
|
import {faCheck} from '@fortawesome/free-solid-svg-icons/faCheck'
|
||||||
|
import {faChevronRight} from '@fortawesome/free-solid-svg-icons/faChevronRight'
|
||||||
import {faCircle} from '@fortawesome/free-regular-svg-icons/faCircle'
|
import {faCircle} from '@fortawesome/free-regular-svg-icons/faCircle'
|
||||||
import {faCircleCheck as farCircleCheck} from '@fortawesome/free-regular-svg-icons/faCircleCheck'
|
import {faCircleCheck as farCircleCheck} from '@fortawesome/free-regular-svg-icons/faCircleCheck'
|
||||||
import {faCircleCheck} from '@fortawesome/free-solid-svg-icons/faCircleCheck'
|
import {faCircleCheck} from '@fortawesome/free-solid-svg-icons/faCircleCheck'
|
||||||
|
@ -41,6 +43,7 @@ import {faExclamation} from '@fortawesome/free-solid-svg-icons/faExclamation'
|
||||||
import {faEye} from '@fortawesome/free-solid-svg-icons/faEye'
|
import {faEye} from '@fortawesome/free-solid-svg-icons/faEye'
|
||||||
import {faEyeSlash as farEyeSlash} from '@fortawesome/free-regular-svg-icons/faEyeSlash'
|
import {faEyeSlash as farEyeSlash} from '@fortawesome/free-regular-svg-icons/faEyeSlash'
|
||||||
import {faFaceSmile} from '@fortawesome/free-regular-svg-icons/faFaceSmile'
|
import {faFaceSmile} from '@fortawesome/free-regular-svg-icons/faFaceSmile'
|
||||||
|
import {faFire} from '@fortawesome/free-solid-svg-icons/faFire'
|
||||||
import {faFloppyDisk} from '@fortawesome/free-regular-svg-icons/faFloppyDisk'
|
import {faFloppyDisk} from '@fortawesome/free-regular-svg-icons/faFloppyDisk'
|
||||||
import {faGear} from '@fortawesome/free-solid-svg-icons/faGear'
|
import {faGear} from '@fortawesome/free-solid-svg-icons/faGear'
|
||||||
import {faGlobe} from '@fortawesome/free-solid-svg-icons/faGlobe'
|
import {faGlobe} from '@fortawesome/free-solid-svg-icons/faGlobe'
|
||||||
|
@ -54,15 +57,18 @@ import {faImage} from '@fortawesome/free-solid-svg-icons/faImage'
|
||||||
import {faInfo} from '@fortawesome/free-solid-svg-icons/faInfo'
|
import {faInfo} from '@fortawesome/free-solid-svg-icons/faInfo'
|
||||||
import {faLanguage} from '@fortawesome/free-solid-svg-icons/faLanguage'
|
import {faLanguage} from '@fortawesome/free-solid-svg-icons/faLanguage'
|
||||||
import {faLink} from '@fortawesome/free-solid-svg-icons/faLink'
|
import {faLink} from '@fortawesome/free-solid-svg-icons/faLink'
|
||||||
|
import {faList} from '@fortawesome/free-solid-svg-icons/faList'
|
||||||
import {faListUl} from '@fortawesome/free-solid-svg-icons/faListUl'
|
import {faListUl} from '@fortawesome/free-solid-svg-icons/faListUl'
|
||||||
import {faLock} from '@fortawesome/free-solid-svg-icons/faLock'
|
import {faLock} from '@fortawesome/free-solid-svg-icons/faLock'
|
||||||
import {faMagnifyingGlass} from '@fortawesome/free-solid-svg-icons/faMagnifyingGlass'
|
import {faMagnifyingGlass} from '@fortawesome/free-solid-svg-icons/faMagnifyingGlass'
|
||||||
import {faMessage} from '@fortawesome/free-regular-svg-icons/faMessage'
|
import {faMessage} from '@fortawesome/free-regular-svg-icons/faMessage'
|
||||||
import {faNoteSticky} from '@fortawesome/free-solid-svg-icons/faNoteSticky'
|
import {faNoteSticky} from '@fortawesome/free-solid-svg-icons/faNoteSticky'
|
||||||
|
import {faPause} from '@fortawesome/free-solid-svg-icons/faPause'
|
||||||
import {faPaste} from '@fortawesome/free-regular-svg-icons/faPaste'
|
import {faPaste} from '@fortawesome/free-regular-svg-icons/faPaste'
|
||||||
import {faPen} from '@fortawesome/free-solid-svg-icons/faPen'
|
import {faPen} from '@fortawesome/free-solid-svg-icons/faPen'
|
||||||
import {faPenNib} from '@fortawesome/free-solid-svg-icons/faPenNib'
|
import {faPenNib} from '@fortawesome/free-solid-svg-icons/faPenNib'
|
||||||
import {faPenToSquare} from '@fortawesome/free-solid-svg-icons/faPenToSquare'
|
import {faPenToSquare} from '@fortawesome/free-solid-svg-icons/faPenToSquare'
|
||||||
|
import {faPlay} from '@fortawesome/free-solid-svg-icons/faPlay'
|
||||||
import {faPlus} from '@fortawesome/free-solid-svg-icons/faPlus'
|
import {faPlus} from '@fortawesome/free-solid-svg-icons/faPlus'
|
||||||
import {faQuoteLeft} from '@fortawesome/free-solid-svg-icons/faQuoteLeft'
|
import {faQuoteLeft} from '@fortawesome/free-solid-svg-icons/faQuoteLeft'
|
||||||
import {faReply} from '@fortawesome/free-solid-svg-icons/faReply'
|
import {faReply} from '@fortawesome/free-solid-svg-icons/faReply'
|
||||||
|
@ -77,6 +83,7 @@ import {faSliders} from '@fortawesome/free-solid-svg-icons/faSliders'
|
||||||
import {faSquare} from '@fortawesome/free-regular-svg-icons/faSquare'
|
import {faSquare} from '@fortawesome/free-regular-svg-icons/faSquare'
|
||||||
import {faSquareCheck} from '@fortawesome/free-regular-svg-icons/faSquareCheck'
|
import {faSquareCheck} from '@fortawesome/free-regular-svg-icons/faSquareCheck'
|
||||||
import {faSquarePlus} from '@fortawesome/free-regular-svg-icons/faSquarePlus'
|
import {faSquarePlus} from '@fortawesome/free-regular-svg-icons/faSquarePlus'
|
||||||
|
import {faThumbtack} from '@fortawesome/free-solid-svg-icons/faThumbtack'
|
||||||
import {faTicket} from '@fortawesome/free-solid-svg-icons/faTicket'
|
import {faTicket} from '@fortawesome/free-solid-svg-icons/faTicket'
|
||||||
import {faTrashCan} from '@fortawesome/free-regular-svg-icons/faTrashCan'
|
import {faTrashCan} from '@fortawesome/free-regular-svg-icons/faTrashCan'
|
||||||
import {faUser} from '@fortawesome/free-regular-svg-icons/faUser'
|
import {faUser} from '@fortawesome/free-regular-svg-icons/faUser'
|
||||||
|
@ -88,11 +95,6 @@ import {faUserXmark} from '@fortawesome/free-solid-svg-icons/faUserXmark'
|
||||||
import {faUsersSlash} from '@fortawesome/free-solid-svg-icons/faUsersSlash'
|
import {faUsersSlash} from '@fortawesome/free-solid-svg-icons/faUsersSlash'
|
||||||
import {faX} from '@fortawesome/free-solid-svg-icons/faX'
|
import {faX} from '@fortawesome/free-solid-svg-icons/faX'
|
||||||
import {faXmark} from '@fortawesome/free-solid-svg-icons/faXmark'
|
import {faXmark} from '@fortawesome/free-solid-svg-icons/faXmark'
|
||||||
import {faPlay} from '@fortawesome/free-solid-svg-icons/faPlay'
|
|
||||||
import {faPause} from '@fortawesome/free-solid-svg-icons/faPause'
|
|
||||||
import {faThumbtack} from '@fortawesome/free-solid-svg-icons/faThumbtack'
|
|
||||||
import {faList} from '@fortawesome/free-solid-svg-icons/faList'
|
|
||||||
import {faChevronRight} from '@fortawesome/free-solid-svg-icons/faChevronRight'
|
|
||||||
|
|
||||||
export function setup() {
|
export function setup() {
|
||||||
library.add(
|
library.add(
|
||||||
|
@ -109,6 +111,7 @@ export function setup() {
|
||||||
faArrowUpFromBracket,
|
faArrowUpFromBracket,
|
||||||
faArrowUpRightFromSquare,
|
faArrowUpRightFromSquare,
|
||||||
faArrowRotateLeft,
|
faArrowRotateLeft,
|
||||||
|
faArrowTrendUp,
|
||||||
faArrowsRotate,
|
faArrowsRotate,
|
||||||
faAt,
|
faAt,
|
||||||
faBan,
|
faBan,
|
||||||
|
@ -120,6 +123,7 @@ export function setup() {
|
||||||
farCalendar,
|
farCalendar,
|
||||||
faCamera,
|
faCamera,
|
||||||
faCheck,
|
faCheck,
|
||||||
|
faChevronRight,
|
||||||
faCircle,
|
faCircle,
|
||||||
faCircleCheck,
|
faCircleCheck,
|
||||||
farCircleCheck,
|
farCircleCheck,
|
||||||
|
@ -137,6 +141,7 @@ export function setup() {
|
||||||
faExclamation,
|
faExclamation,
|
||||||
farEyeSlash,
|
farEyeSlash,
|
||||||
faFaceSmile,
|
faFaceSmile,
|
||||||
|
faFire,
|
||||||
faFloppyDisk,
|
faFloppyDisk,
|
||||||
faGear,
|
faGear,
|
||||||
faGlobe,
|
faGlobe,
|
||||||
|
@ -150,15 +155,18 @@ export function setup() {
|
||||||
faInfo,
|
faInfo,
|
||||||
faLanguage,
|
faLanguage,
|
||||||
faLink,
|
faLink,
|
||||||
|
faList,
|
||||||
faListUl,
|
faListUl,
|
||||||
faLock,
|
faLock,
|
||||||
faMagnifyingGlass,
|
faMagnifyingGlass,
|
||||||
faMessage,
|
faMessage,
|
||||||
faNoteSticky,
|
faNoteSticky,
|
||||||
faPaste,
|
faPaste,
|
||||||
|
faPause,
|
||||||
faPen,
|
faPen,
|
||||||
faPenNib,
|
faPenNib,
|
||||||
faPenToSquare,
|
faPenToSquare,
|
||||||
|
faPlay,
|
||||||
faPlus,
|
faPlus,
|
||||||
faQuoteLeft,
|
faQuoteLeft,
|
||||||
faReply,
|
faReply,
|
||||||
|
@ -180,14 +188,10 @@ export function setup() {
|
||||||
faUserPlus,
|
faUserPlus,
|
||||||
faUserXmark,
|
faUserXmark,
|
||||||
faUsersSlash,
|
faUsersSlash,
|
||||||
|
faThumbtack,
|
||||||
faTicket,
|
faTicket,
|
||||||
faTrashCan,
|
faTrashCan,
|
||||||
faThumbtack,
|
|
||||||
faX,
|
faX,
|
||||||
faXmark,
|
faXmark,
|
||||||
faPlay,
|
|
||||||
faPause,
|
|
||||||
faList,
|
|
||||||
faChevronRight,
|
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,7 +1,7 @@
|
||||||
import React, {useMemo, useRef} from 'react'
|
import React, {useMemo, useRef} from 'react'
|
||||||
import {NativeStackScreenProps} from '@react-navigation/native-stack'
|
import {NativeStackScreenProps} from '@react-navigation/native-stack'
|
||||||
import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
|
import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
|
||||||
import {useNavigation} from '@react-navigation/native'
|
import {useNavigation, useIsFocused} from '@react-navigation/native'
|
||||||
import {usePalette} from 'lib/hooks/usePalette'
|
import {usePalette} from 'lib/hooks/usePalette'
|
||||||
import {HeartIcon, HeartIconSolid} from 'lib/icons'
|
import {HeartIcon, HeartIconSolid} from 'lib/icons'
|
||||||
import {CommonNavigatorParams} from 'lib/routes/types'
|
import {CommonNavigatorParams} from 'lib/routes/types'
|
||||||
|
@ -14,11 +14,8 @@ import {PostsFeedModel} from 'state/models/feeds/posts'
|
||||||
import {useCustomFeed} from 'lib/hooks/useCustomFeed'
|
import {useCustomFeed} from 'lib/hooks/useCustomFeed'
|
||||||
import {withAuthRequired} from 'view/com/auth/withAuthRequired'
|
import {withAuthRequired} from 'view/com/auth/withAuthRequired'
|
||||||
import {Feed} from 'view/com/posts/Feed'
|
import {Feed} from 'view/com/posts/Feed'
|
||||||
import {pluralize} from 'lib/strings/helpers'
|
|
||||||
import {sanitizeHandle} from 'lib/strings/handles'
|
|
||||||
import {TextLink} from 'view/com/util/Link'
|
import {TextLink} from 'view/com/util/Link'
|
||||||
import {UserAvatar} from 'view/com/util/UserAvatar'
|
import {SimpleViewHeader} from 'view/com/util/SimpleViewHeader'
|
||||||
import {ViewHeader} from 'view/com/util/ViewHeader'
|
|
||||||
import {Button} from 'view/com/util/forms/Button'
|
import {Button} from 'view/com/util/forms/Button'
|
||||||
import {Text} from 'view/com/util/text/Text'
|
import {Text} from 'view/com/util/text/Text'
|
||||||
import * as Toast from 'view/com/util/Toast'
|
import * as Toast from 'view/com/util/Toast'
|
||||||
|
@ -34,7 +31,6 @@ import {useOnMainScroll} from 'lib/hooks/useOnMainScroll'
|
||||||
import {EmptyState} from 'view/com/util/EmptyState'
|
import {EmptyState} from 'view/com/util/EmptyState'
|
||||||
import {useAnalytics} from 'lib/analytics/analytics'
|
import {useAnalytics} from 'lib/analytics/analytics'
|
||||||
import {NativeDropdown, DropdownItem} from 'view/com/util/forms/NativeDropdown'
|
import {NativeDropdown, DropdownItem} from 'view/com/util/forms/NativeDropdown'
|
||||||
import {makeProfileLink} from 'lib/routes/links'
|
|
||||||
import {resolveName} from 'lib/api'
|
import {resolveName} from 'lib/api'
|
||||||
import {CenteredView} from 'view/com/util/Views'
|
import {CenteredView} from 'view/com/util/Views'
|
||||||
import {NavigationProp} from 'lib/routes/types'
|
import {NavigationProp} from 'lib/routes/types'
|
||||||
|
@ -125,7 +121,10 @@ export const CustomFeedScreenInner = observer(
|
||||||
}: Props & {feedOwnerDid: string}) {
|
}: Props & {feedOwnerDid: string}) {
|
||||||
const store = useStores()
|
const store = useStores()
|
||||||
const pal = usePalette('default')
|
const pal = usePalette('default')
|
||||||
const {isTabletOrDesktop} = useWebMediaQueries()
|
const palInverted = usePalette('inverted')
|
||||||
|
const navigation = useNavigation<NavigationProp>()
|
||||||
|
const isScreenFocused = useIsFocused()
|
||||||
|
const {isMobile, isTabletOrDesktop} = useWebMediaQueries()
|
||||||
const {track} = useAnalytics()
|
const {track} = useAnalytics()
|
||||||
const {rkey, name: handleOrDid} = route.params
|
const {rkey, name: handleOrDid} = route.params
|
||||||
const uri = useMemo(
|
const uri = useMemo(
|
||||||
|
@ -186,6 +185,10 @@ export const CustomFeedScreenInner = observer(
|
||||||
})
|
})
|
||||||
}, [store, currentFeed])
|
}, [store, currentFeed])
|
||||||
|
|
||||||
|
const onPressViewAuthor = React.useCallback(() => {
|
||||||
|
navigation.navigate('Profile', {name: handleOrDid})
|
||||||
|
}, [handleOrDid, navigation])
|
||||||
|
|
||||||
const onPressShare = React.useCallback(() => {
|
const onPressShare = React.useCallback(() => {
|
||||||
const url = toShareUrl(`/profile/${handleOrDid}/feed/${rkey}`)
|
const url = toShareUrl(`/profile/${handleOrDid}/feed/${rkey}`)
|
||||||
shareUrl(url)
|
shareUrl(url)
|
||||||
|
@ -210,8 +213,39 @@ export const CustomFeedScreenInner = observer(
|
||||||
store.shell.openComposer({})
|
store.shell.openComposer({})
|
||||||
}, [store])
|
}, [store])
|
||||||
|
|
||||||
|
const onSoftReset = React.useCallback(() => {
|
||||||
|
if (isScreenFocused) {
|
||||||
|
onScrollToTop()
|
||||||
|
algoFeed.refresh()
|
||||||
|
}
|
||||||
|
}, [isScreenFocused, onScrollToTop, algoFeed])
|
||||||
|
|
||||||
|
// fires when page within screen is activated/deactivated
|
||||||
|
React.useEffect(() => {
|
||||||
|
if (!isScreenFocused) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
const softResetSub = store.onScreenSoftReset(onSoftReset)
|
||||||
|
return () => {
|
||||||
|
softResetSub.remove()
|
||||||
|
}
|
||||||
|
}, [store, onSoftReset, isScreenFocused])
|
||||||
|
|
||||||
const dropdownItems: DropdownItem[] = React.useMemo(() => {
|
const dropdownItems: DropdownItem[] = React.useMemo(() => {
|
||||||
let items: DropdownItem[] = [
|
let items: DropdownItem[] = [
|
||||||
|
{
|
||||||
|
testID: 'feedHeaderDropdownViewAuthorBtn',
|
||||||
|
label: 'View author',
|
||||||
|
onPress: onPressViewAuthor,
|
||||||
|
icon: {
|
||||||
|
ios: {
|
||||||
|
name: 'person',
|
||||||
|
},
|
||||||
|
android: '',
|
||||||
|
web: ['far', 'user'],
|
||||||
|
},
|
||||||
|
},
|
||||||
{
|
{
|
||||||
testID: 'feedHeaderDropdownToggleSavedBtn',
|
testID: 'feedHeaderDropdownToggleSavedBtn',
|
||||||
label: currentFeed?.isSaved
|
label: currentFeed?.isSaved
|
||||||
|
@ -260,232 +294,12 @@ export const CustomFeedScreenInner = observer(
|
||||||
},
|
},
|
||||||
]
|
]
|
||||||
return items
|
return items
|
||||||
}, [currentFeed?.isSaved, onToggleSaved, onPressReport, onPressShare])
|
|
||||||
|
|
||||||
const renderHeaderBtns = React.useCallback(() => {
|
|
||||||
return (
|
|
||||||
<View style={styles.headerBtns}>
|
|
||||||
<Button
|
|
||||||
type="default-light"
|
|
||||||
testID="toggleLikeBtn"
|
|
||||||
accessibilityLabel="Like this feed"
|
|
||||||
accessibilityHint=""
|
|
||||||
onPress={onToggleLiked}>
|
|
||||||
{currentFeed?.isLiked ? (
|
|
||||||
<HeartIconSolid size={19} style={styles.liked} />
|
|
||||||
) : (
|
|
||||||
<HeartIcon strokeWidth={3} size={19} style={pal.textLight} />
|
|
||||||
)}
|
|
||||||
</Button>
|
|
||||||
{currentFeed?.isSaved ? (
|
|
||||||
<Button
|
|
||||||
type="default-light"
|
|
||||||
accessibilityLabel={
|
|
||||||
isPinned ? 'Unpin this feed' : 'Pin this feed'
|
|
||||||
}
|
|
||||||
accessibilityHint=""
|
|
||||||
onPress={onTogglePinned}>
|
|
||||||
<FontAwesomeIcon
|
|
||||||
icon="thumb-tack"
|
|
||||||
size={17}
|
|
||||||
color={isPinned ? colors.blue3 : pal.colors.textLight}
|
|
||||||
style={styles.top1}
|
|
||||||
/>
|
|
||||||
</Button>
|
|
||||||
) : undefined}
|
|
||||||
{!currentFeed?.isSaved ? (
|
|
||||||
<Button
|
|
||||||
type="default-light"
|
|
||||||
onPress={onToggleSaved}
|
|
||||||
accessibilityLabel="Add to my feeds"
|
|
||||||
accessibilityHint=""
|
|
||||||
style={styles.headerAddBtn}>
|
|
||||||
<FontAwesomeIcon icon="plus" color={pal.colors.link} size={19} />
|
|
||||||
<Text type="xl-medium" style={pal.link}>
|
|
||||||
Add to My Feeds
|
|
||||||
</Text>
|
|
||||||
</Button>
|
|
||||||
) : null}
|
|
||||||
<NativeDropdown testID="feedHeaderDropdownBtn" items={dropdownItems}>
|
|
||||||
<View
|
|
||||||
style={{
|
|
||||||
paddingLeft: currentFeed?.isSaved ? 12 : 6,
|
|
||||||
paddingRight: 12,
|
|
||||||
paddingVertical: 8,
|
|
||||||
}}>
|
|
||||||
<FontAwesomeIcon
|
|
||||||
icon="ellipsis"
|
|
||||||
size={20}
|
|
||||||
color={pal.colors.textLight}
|
|
||||||
/>
|
|
||||||
</View>
|
|
||||||
</NativeDropdown>
|
|
||||||
</View>
|
|
||||||
)
|
|
||||||
}, [
|
}, [
|
||||||
pal,
|
|
||||||
currentFeed?.isSaved,
|
currentFeed?.isSaved,
|
||||||
currentFeed?.isLiked,
|
|
||||||
isPinned,
|
|
||||||
onToggleSaved,
|
onToggleSaved,
|
||||||
onTogglePinned,
|
|
||||||
onToggleLiked,
|
|
||||||
dropdownItems,
|
|
||||||
])
|
|
||||||
|
|
||||||
const renderListHeaderComponent = React.useCallback(() => {
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<View style={[styles.header, pal.border]}>
|
|
||||||
<View style={s.flex1}>
|
|
||||||
<Text
|
|
||||||
testID="feedName"
|
|
||||||
type="title-xl"
|
|
||||||
style={[pal.text, s.bold]}>
|
|
||||||
{currentFeed?.displayName}
|
|
||||||
</Text>
|
|
||||||
{currentFeed && (
|
|
||||||
<Text type="md" style={[pal.textLight]} numberOfLines={1}>
|
|
||||||
by{' '}
|
|
||||||
{currentFeed.data.creator.did === store.me.did ? (
|
|
||||||
'you'
|
|
||||||
) : (
|
|
||||||
<TextLink
|
|
||||||
text={sanitizeHandle(
|
|
||||||
currentFeed.data.creator.handle,
|
|
||||||
'@',
|
|
||||||
)}
|
|
||||||
href={makeProfileLink(currentFeed.data.creator)}
|
|
||||||
style={[pal.textLight]}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
</Text>
|
|
||||||
)}
|
|
||||||
{isTabletOrDesktop && (
|
|
||||||
<View style={[styles.headerBtns, styles.headerBtnsDesktop]}>
|
|
||||||
<Button
|
|
||||||
type={currentFeed?.isSaved ? 'default' : 'inverted'}
|
|
||||||
onPress={onToggleSaved}
|
|
||||||
accessibilityLabel={
|
|
||||||
currentFeed?.isSaved
|
|
||||||
? 'Unsave this feed'
|
|
||||||
: 'Save this feed'
|
|
||||||
}
|
|
||||||
accessibilityHint=""
|
|
||||||
label={
|
|
||||||
currentFeed?.isSaved
|
|
||||||
? 'Remove from My Feeds'
|
|
||||||
: 'Add to My Feeds'
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
<Button
|
|
||||||
type="default"
|
|
||||||
accessibilityLabel={
|
|
||||||
isPinned ? 'Unpin this feed' : 'Pin this feed'
|
|
||||||
}
|
|
||||||
accessibilityHint=""
|
|
||||||
onPress={onTogglePinned}>
|
|
||||||
<FontAwesomeIcon
|
|
||||||
icon="thumb-tack"
|
|
||||||
size={15}
|
|
||||||
color={isPinned ? colors.blue3 : pal.colors.icon}
|
|
||||||
style={styles.top2}
|
|
||||||
/>
|
|
||||||
</Button>
|
|
||||||
<Button
|
|
||||||
type="default"
|
|
||||||
accessibilityLabel="Like this feed"
|
|
||||||
accessibilityHint=""
|
|
||||||
onPress={onToggleLiked}>
|
|
||||||
{currentFeed?.isLiked ? (
|
|
||||||
<HeartIconSolid size={18} style={styles.liked} />
|
|
||||||
) : (
|
|
||||||
<HeartIcon strokeWidth={3} size={18} style={pal.icon} />
|
|
||||||
)}
|
|
||||||
</Button>
|
|
||||||
<Button
|
|
||||||
type="default"
|
|
||||||
accessibilityLabel="Share this feed"
|
|
||||||
accessibilityHint=""
|
|
||||||
onPress={onPressShare}>
|
|
||||||
<FontAwesomeIcon
|
|
||||||
icon="share"
|
|
||||||
size={18}
|
|
||||||
color={pal.colors.icon}
|
|
||||||
/>
|
|
||||||
</Button>
|
|
||||||
<Button
|
|
||||||
type="default"
|
|
||||||
accessibilityLabel="Report this feed"
|
|
||||||
accessibilityHint=""
|
|
||||||
onPress={onPressReport}>
|
|
||||||
<FontAwesomeIcon
|
|
||||||
icon="circle-exclamation"
|
|
||||||
size={18}
|
|
||||||
color={pal.colors.icon}
|
|
||||||
/>
|
|
||||||
</Button>
|
|
||||||
</View>
|
|
||||||
)}
|
|
||||||
</View>
|
|
||||||
<View>
|
|
||||||
<UserAvatar
|
|
||||||
type="algo"
|
|
||||||
avatar={currentFeed?.data.avatar}
|
|
||||||
size={64}
|
|
||||||
/>
|
|
||||||
</View>
|
|
||||||
</View>
|
|
||||||
<View style={styles.headerDetails}>
|
|
||||||
{currentFeed?.data.description ? (
|
|
||||||
<Text style={[pal.text, s.mb10]} numberOfLines={6}>
|
|
||||||
{currentFeed.data.description}
|
|
||||||
</Text>
|
|
||||||
) : null}
|
|
||||||
<View style={styles.headerDetailsFooter}>
|
|
||||||
{currentFeed ? (
|
|
||||||
<TextLink
|
|
||||||
type="md-medium"
|
|
||||||
style={pal.textLight}
|
|
||||||
href={`/profile/${handleOrDid}/feed/${rkey}/liked-by`}
|
|
||||||
text={`Liked by ${currentFeed.data.likeCount} ${pluralize(
|
|
||||||
currentFeed?.data.likeCount || 0,
|
|
||||||
'user',
|
|
||||||
)}`}
|
|
||||||
/>
|
|
||||||
) : null}
|
|
||||||
</View>
|
|
||||||
</View>
|
|
||||||
<View
|
|
||||||
style={[
|
|
||||||
styles.fakeSelector,
|
|
||||||
{
|
|
||||||
paddingHorizontal: isTabletOrDesktop ? 16 : 6,
|
|
||||||
},
|
|
||||||
pal.border,
|
|
||||||
]}>
|
|
||||||
<View
|
|
||||||
style={[styles.fakeSelectorItem, {borderColor: pal.colors.link}]}>
|
|
||||||
<Text type="md-medium" style={[pal.text]}>
|
|
||||||
Feed
|
|
||||||
</Text>
|
|
||||||
</View>
|
|
||||||
</View>
|
|
||||||
</>
|
|
||||||
)
|
|
||||||
}, [
|
|
||||||
pal,
|
|
||||||
currentFeed,
|
|
||||||
store.me.did,
|
|
||||||
onToggleSaved,
|
|
||||||
onToggleLiked,
|
|
||||||
onPressShare,
|
|
||||||
handleOrDid,
|
|
||||||
onPressReport,
|
onPressReport,
|
||||||
rkey,
|
onPressShare,
|
||||||
isPinned,
|
onPressViewAuthor,
|
||||||
onTogglePinned,
|
|
||||||
isTabletOrDesktop,
|
|
||||||
])
|
])
|
||||||
|
|
||||||
const renderEmptyState = React.useCallback(() => {
|
const renderEmptyState = React.useCallback(() => {
|
||||||
|
@ -498,22 +312,100 @@ export const CustomFeedScreenInner = observer(
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<View style={s.hContentRegion}>
|
<View style={s.hContentRegion}>
|
||||||
{!isTabletOrDesktop && (
|
<SimpleViewHeader
|
||||||
<ViewHeader title="" renderButton={currentFeed && renderHeaderBtns} />
|
showBackButton={isMobile}
|
||||||
)}
|
style={
|
||||||
|
!isMobile && [pal.border, {borderLeftWidth: 1, borderRightWidth: 1}]
|
||||||
|
}>
|
||||||
|
<Text type="title-lg" style={styles.headerText} numberOfLines={1}>
|
||||||
|
{currentFeed ? (
|
||||||
|
<TextLink
|
||||||
|
type="title-lg"
|
||||||
|
href="/"
|
||||||
|
style={[pal.text, {fontWeight: 'bold'}]}
|
||||||
|
text={currentFeed?.displayName || ''}
|
||||||
|
onPress={() => store.emitScreenSoftReset()}
|
||||||
|
/>
|
||||||
|
) : (
|
||||||
|
'Loading...'
|
||||||
|
)}
|
||||||
|
</Text>
|
||||||
|
{currentFeed ? (
|
||||||
|
<>
|
||||||
|
<Button
|
||||||
|
type="default-light"
|
||||||
|
testID="toggleLikeBtn"
|
||||||
|
accessibilityLabel="Like this feed"
|
||||||
|
accessibilityHint=""
|
||||||
|
onPress={onToggleLiked}
|
||||||
|
style={styles.headerBtn}>
|
||||||
|
{currentFeed?.isLiked ? (
|
||||||
|
<HeartIconSolid size={19} style={styles.liked} />
|
||||||
|
) : (
|
||||||
|
<HeartIcon strokeWidth={3} size={19} style={pal.textLight} />
|
||||||
|
)}
|
||||||
|
</Button>
|
||||||
|
{currentFeed?.isSaved ? (
|
||||||
|
<Button
|
||||||
|
type="default-light"
|
||||||
|
accessibilityLabel={
|
||||||
|
isPinned ? 'Unpin this feed' : 'Pin this feed'
|
||||||
|
}
|
||||||
|
accessibilityHint=""
|
||||||
|
onPress={onTogglePinned}
|
||||||
|
style={styles.headerBtn}>
|
||||||
|
<FontAwesomeIcon
|
||||||
|
icon="thumb-tack"
|
||||||
|
size={17}
|
||||||
|
color={isPinned ? colors.blue3 : pal.colors.textLight}
|
||||||
|
style={styles.top1}
|
||||||
|
/>
|
||||||
|
</Button>
|
||||||
|
) : (
|
||||||
|
<Button
|
||||||
|
type="inverted"
|
||||||
|
onPress={onToggleSaved}
|
||||||
|
accessibilityLabel="Add to my feeds"
|
||||||
|
accessibilityHint=""
|
||||||
|
style={styles.headerAddBtn}>
|
||||||
|
<FontAwesomeIcon
|
||||||
|
icon="plus"
|
||||||
|
color={palInverted.colors.text}
|
||||||
|
size={19}
|
||||||
|
/>
|
||||||
|
<Text type="button" style={palInverted.text}>
|
||||||
|
Add{!isMobile && ' to My Feeds'}
|
||||||
|
</Text>
|
||||||
|
</Button>
|
||||||
|
)}
|
||||||
|
</>
|
||||||
|
) : null}
|
||||||
|
<NativeDropdown testID="feedHeaderDropdownBtn" items={dropdownItems}>
|
||||||
|
<View
|
||||||
|
style={{
|
||||||
|
paddingLeft: 12,
|
||||||
|
paddingRight: isMobile ? 12 : 0,
|
||||||
|
}}>
|
||||||
|
<FontAwesomeIcon
|
||||||
|
icon="ellipsis"
|
||||||
|
size={20}
|
||||||
|
color={pal.colors.textLight}
|
||||||
|
/>
|
||||||
|
</View>
|
||||||
|
</NativeDropdown>
|
||||||
|
</SimpleViewHeader>
|
||||||
<Feed
|
<Feed
|
||||||
scrollElRef={scrollElRef}
|
scrollElRef={scrollElRef}
|
||||||
feed={algoFeed}
|
feed={algoFeed}
|
||||||
onScroll={onMainScroll}
|
onScroll={onMainScroll}
|
||||||
scrollEventThrottle={100}
|
scrollEventThrottle={100}
|
||||||
ListHeaderComponent={renderListHeaderComponent}
|
|
||||||
renderEmptyState={renderEmptyState}
|
renderEmptyState={renderEmptyState}
|
||||||
extraData={[uri, isPinned]}
|
extraData={[uri, isPinned]}
|
||||||
style={!isTabletOrDesktop ? {flex: 1} : undefined}
|
style={!isTabletOrDesktop ? {flex: 1} : undefined}
|
||||||
/>
|
/>
|
||||||
{isScrolledDown ? (
|
{isScrolledDown ? (
|
||||||
<LoadLatestBtn
|
<LoadLatestBtn
|
||||||
onPress={onScrollToTop}
|
onPress={onSoftReset}
|
||||||
label="Scroll to top"
|
label="Scroll to top"
|
||||||
showIndicator={false}
|
showIndicator={false}
|
||||||
/>
|
/>
|
||||||
|
@ -540,36 +432,19 @@ const styles = StyleSheet.create({
|
||||||
paddingBottom: 16,
|
paddingBottom: 16,
|
||||||
borderTopWidth: 1,
|
borderTopWidth: 1,
|
||||||
},
|
},
|
||||||
headerBtns: {
|
headerText: {
|
||||||
flexDirection: 'row',
|
flex: 1,
|
||||||
alignItems: 'center',
|
fontWeight: 'bold',
|
||||||
},
|
},
|
||||||
headerBtnsDesktop: {
|
headerBtn: {
|
||||||
marginTop: 8,
|
paddingVertical: 0,
|
||||||
gap: 4,
|
|
||||||
},
|
},
|
||||||
headerAddBtn: {
|
headerAddBtn: {
|
||||||
flexDirection: 'row',
|
flexDirection: 'row',
|
||||||
alignItems: 'center',
|
alignItems: 'center',
|
||||||
gap: 4,
|
gap: 4,
|
||||||
paddingLeft: 4,
|
paddingVertical: 4,
|
||||||
},
|
paddingLeft: 10,
|
||||||
headerDetails: {
|
|
||||||
paddingHorizontal: 16,
|
|
||||||
paddingBottom: 16,
|
|
||||||
},
|
|
||||||
headerDetailsFooter: {
|
|
||||||
flexDirection: 'row',
|
|
||||||
alignItems: 'center',
|
|
||||||
justifyContent: 'space-between',
|
|
||||||
},
|
|
||||||
fakeSelector: {
|
|
||||||
flexDirection: 'row',
|
|
||||||
},
|
|
||||||
fakeSelectorItem: {
|
|
||||||
paddingHorizontal: 12,
|
|
||||||
paddingBottom: 8,
|
|
||||||
borderBottomWidth: 3,
|
|
||||||
},
|
},
|
||||||
liked: {
|
liked: {
|
||||||
color: colors.red3,
|
color: colors.red3,
|
||||||
|
|
|
@ -1,157 +0,0 @@
|
||||||
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 {usePalette} from 'lib/hooks/usePalette'
|
|
||||||
import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
|
|
||||||
import {s} from 'lib/styles'
|
|
||||||
import {CustomFeedModel} from 'state/models/feeds/custom-feed'
|
|
||||||
import {HeaderWithInput} from 'view/com/search/HeaderWithInput'
|
|
||||||
import debounce from 'lodash.debounce'
|
|
||||||
|
|
||||||
type Props = NativeStackScreenProps<CommonNavigatorParams, 'DiscoverFeeds'>
|
|
||||||
export const DiscoverFeedsScreen = withAuthRequired(
|
|
||||||
observer(function DiscoverFeedsScreenImpl({}: Props) {
|
|
||||||
const store = useStores()
|
|
||||||
const pal = usePalette('default')
|
|
||||||
const feeds = React.useMemo(() => new FeedsDiscoveryModel(store), [store])
|
|
||||||
const {isTabletOrDesktop} = useWebMediaQueries()
|
|
||||||
|
|
||||||
// search stuff
|
|
||||||
const [isInputFocused, setIsInputFocused] = React.useState<boolean>(false)
|
|
||||||
const [query, setQuery] = React.useState<string>('')
|
|
||||||
const debouncedSearchFeeds = React.useMemo(
|
|
||||||
() => debounce(q => feeds.search(q), 500), // debounce for 500ms
|
|
||||||
[feeds],
|
|
||||||
)
|
|
||||||
const onChangeQuery = React.useCallback(
|
|
||||||
(text: string) => {
|
|
||||||
setQuery(text)
|
|
||||||
if (text.length > 1) {
|
|
||||||
debouncedSearchFeeds(text)
|
|
||||||
} else {
|
|
||||||
feeds.refresh()
|
|
||||||
}
|
|
||||||
},
|
|
||||||
[debouncedSearchFeeds, feeds],
|
|
||||||
)
|
|
||||||
const onPressClearQuery = React.useCallback(() => {
|
|
||||||
setQuery('')
|
|
||||||
feeds.refresh()
|
|
||||||
}, [feeds])
|
|
||||||
const onPressCancelSearch = React.useCallback(() => {
|
|
||||||
setIsInputFocused(false)
|
|
||||||
setQuery('')
|
|
||||||
feeds.refresh()
|
|
||||||
}, [feeds])
|
|
||||||
const onSubmitQuery = React.useCallback(() => {
|
|
||||||
debouncedSearchFeeds(query)
|
|
||||||
debouncedSearchFeeds.flush()
|
|
||||||
}, [debouncedSearchFeeds, query])
|
|
||||||
|
|
||||||
useFocusEffect(
|
|
||||||
React.useCallback(() => {
|
|
||||||
store.shell.setMinimalShellMode(false)
|
|
||||||
if (!feeds.hasLoaded) {
|
|
||||||
feeds.refresh()
|
|
||||||
}
|
|
||||||
}, [store, feeds]),
|
|
||||||
)
|
|
||||||
|
|
||||||
const onRefresh = React.useCallback(() => {
|
|
||||||
feeds.refresh()
|
|
||||||
}, [feeds])
|
|
||||||
|
|
||||||
const renderListEmptyComponent = () => {
|
|
||||||
return (
|
|
||||||
<View style={styles.empty}>
|
|
||||||
<Text type="lg" style={pal.textLight}>
|
|
||||||
{feeds.isLoading
|
|
||||||
? isTabletOrDesktop
|
|
||||||
? 'Loading...'
|
|
||||||
: ''
|
|
||||||
: query
|
|
||||||
? `No results found for "${query}"`
|
|
||||||
: `We can't find any feeds for some reason. This is probably an error - try refreshing!`}
|
|
||||||
</Text>
|
|
||||||
</View>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
const renderItem = React.useCallback(
|
|
||||||
({item}: {item: CustomFeedModel}) => (
|
|
||||||
<CustomFeed
|
|
||||||
key={item.data.uri}
|
|
||||||
item={item}
|
|
||||||
showSaveBtn
|
|
||||||
showDescription
|
|
||||||
showLikes
|
|
||||||
/>
|
|
||||||
),
|
|
||||||
[],
|
|
||||||
)
|
|
||||||
|
|
||||||
return (
|
|
||||||
<CenteredView style={[styles.container, pal.view]}>
|
|
||||||
<View
|
|
||||||
style={[isTabletOrDesktop && styles.containerDesktop, pal.border]}>
|
|
||||||
<ViewHeader title="Discover Feeds" showOnDesktop />
|
|
||||||
</View>
|
|
||||||
<HeaderWithInput
|
|
||||||
isInputFocused={isInputFocused}
|
|
||||||
query={query}
|
|
||||||
setIsInputFocused={setIsInputFocused}
|
|
||||||
onChangeQuery={onChangeQuery}
|
|
||||||
onPressClearQuery={onPressClearQuery}
|
|
||||||
onPressCancelSearch={onPressCancelSearch}
|
|
||||||
onSubmitQuery={onSubmitQuery}
|
|
||||||
showMenu={false}
|
|
||||||
/>
|
|
||||||
<FlatList
|
|
||||||
style={[!isTabletOrDesktop && s.flex1]}
|
|
||||||
data={feeds.feeds}
|
|
||||||
keyExtractor={item => item.data.uri}
|
|
||||||
contentContainerStyle={styles.contentContainer}
|
|
||||||
refreshControl={
|
|
||||||
<RefreshControl
|
|
||||||
refreshing={feeds.isRefreshing}
|
|
||||||
onRefresh={onRefresh}
|
|
||||||
tintColor={pal.colors.text}
|
|
||||||
titleColor={pal.colors.text}
|
|
||||||
/>
|
|
||||||
}
|
|
||||||
renderItem={renderItem}
|
|
||||||
initialNumToRender={10}
|
|
||||||
ListEmptyComponent={renderListEmptyComponent}
|
|
||||||
onEndReached={() => feeds.loadMore()}
|
|
||||||
extraData={feeds.isLoading}
|
|
||||||
/>
|
|
||||||
</CenteredView>
|
|
||||||
)
|
|
||||||
}),
|
|
||||||
)
|
|
||||||
|
|
||||||
const styles = StyleSheet.create({
|
|
||||||
container: {
|
|
||||||
flex: 1,
|
|
||||||
},
|
|
||||||
contentContainer: {
|
|
||||||
paddingBottom: 100,
|
|
||||||
},
|
|
||||||
containerDesktop: {
|
|
||||||
borderLeftWidth: 1,
|
|
||||||
borderRightWidth: 1,
|
|
||||||
},
|
|
||||||
empty: {
|
|
||||||
paddingHorizontal: 16,
|
|
||||||
paddingTop: 10,
|
|
||||||
},
|
|
||||||
})
|
|
|
@ -1,90 +1,72 @@
|
||||||
import React from 'react'
|
import React from 'react'
|
||||||
import {StyleSheet, View} from 'react-native'
|
import {ActivityIndicator, StyleSheet, RefreshControl, View} from 'react-native'
|
||||||
import {useFocusEffect} from '@react-navigation/native'
|
import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
|
||||||
import isEqual from 'lodash.isequal'
|
import {FontAwesomeIconStyle} from '@fortawesome/react-native-fontawesome'
|
||||||
|
import {AtUri} from '@atproto/api'
|
||||||
import {withAuthRequired} from 'view/com/auth/withAuthRequired'
|
import {withAuthRequired} from 'view/com/auth/withAuthRequired'
|
||||||
import {FlatList} from 'view/com/util/Views'
|
|
||||||
import {ViewHeader} from 'view/com/util/ViewHeader'
|
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 {FAB} from 'view/com/util/fab/FAB'
|
||||||
import {Link} from 'view/com/util/Link'
|
import {Link} from 'view/com/util/Link'
|
||||||
import {NativeStackScreenProps, FeedsTabNavigatorParams} from 'lib/routes/types'
|
import {NativeStackScreenProps, FeedsTabNavigatorParams} from 'lib/routes/types'
|
||||||
import {observer} from 'mobx-react-lite'
|
import {observer} from 'mobx-react-lite'
|
||||||
import {PostsMultiFeedModel} from 'state/models/feeds/multi-feed'
|
|
||||||
import {MultiFeed} from 'view/com/posts/MultiFeed'
|
|
||||||
import {usePalette} from 'lib/hooks/usePalette'
|
import {usePalette} from 'lib/hooks/usePalette'
|
||||||
import {useTimer} from 'lib/hooks/useTimer'
|
|
||||||
import {useStores} from 'state/index'
|
import {useStores} from 'state/index'
|
||||||
import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
|
import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
|
||||||
import {useOnMainScroll} from 'lib/hooks/useOnMainScroll'
|
|
||||||
import {ComposeIcon2, CogIcon} from 'lib/icons'
|
import {ComposeIcon2, CogIcon} from 'lib/icons'
|
||||||
import {s} from 'lib/styles'
|
import {s} from 'lib/styles'
|
||||||
|
import {SearchInput} from 'view/com/util/forms/SearchInput'
|
||||||
const LOAD_NEW_PROMPT_TIME = 60e3 // 60 seconds
|
import {UserAvatar} from 'view/com/util/UserAvatar'
|
||||||
const MOBILE_HEADER_OFFSET = 40
|
import {FeedFeedLoadingPlaceholder} from 'view/com/util/LoadingPlaceholder'
|
||||||
|
import {ErrorMessage} from 'view/com/util/error/ErrorMessage'
|
||||||
|
import debounce from 'lodash.debounce'
|
||||||
|
import {Text} from 'view/com/util/text/Text'
|
||||||
|
import {MyFeedsUIModel, MyFeedsItem} from 'state/models/ui/my-feeds'
|
||||||
|
import {FlatList} from 'view/com/util/Views'
|
||||||
|
import {useFocusEffect} from '@react-navigation/native'
|
||||||
|
import {CustomFeed} from 'view/com/feeds/CustomFeed'
|
||||||
|
|
||||||
type Props = NativeStackScreenProps<FeedsTabNavigatorParams, 'Feeds'>
|
type Props = NativeStackScreenProps<FeedsTabNavigatorParams, 'Feeds'>
|
||||||
export const FeedsScreen = withAuthRequired(
|
export const FeedsScreen = withAuthRequired(
|
||||||
observer<Props>(function FeedsScreenImpl({}: Props) {
|
observer<Props>(function FeedsScreenImpl({}: Props) {
|
||||||
const pal = usePalette('default')
|
const pal = usePalette('default')
|
||||||
const store = useStores()
|
const store = useStores()
|
||||||
const {isMobile} = useWebMediaQueries()
|
const {isMobile, isTabletOrDesktop} = useWebMediaQueries()
|
||||||
const flatListRef = React.useRef<FlatList>(null)
|
const myFeeds = React.useMemo(() => new MyFeedsUIModel(store), [store])
|
||||||
const multifeed = React.useMemo<PostsMultiFeedModel>(
|
const [query, setQuery] = React.useState<string>('')
|
||||||
() => new PostsMultiFeedModel(store),
|
const debouncedSearchFeeds = React.useMemo(
|
||||||
[store],
|
() => debounce(q => myFeeds.discovery.search(q), 500), // debounce for 500ms
|
||||||
|
[myFeeds],
|
||||||
)
|
)
|
||||||
const [onMainScroll, isScrolledDown, resetMainScroll] =
|
|
||||||
useOnMainScroll(store)
|
|
||||||
const [loadPromptVisible, setLoadPromptVisible] = React.useState(false)
|
|
||||||
const [resetPromptTimer] = useTimer(LOAD_NEW_PROMPT_TIME, () => {
|
|
||||||
setLoadPromptVisible(true)
|
|
||||||
})
|
|
||||||
|
|
||||||
const onSoftReset = React.useCallback(() => {
|
|
||||||
flatListRef.current?.scrollToOffset({offset: 0})
|
|
||||||
multifeed.loadLatest()
|
|
||||||
resetPromptTimer()
|
|
||||||
setLoadPromptVisible(false)
|
|
||||||
resetMainScroll()
|
|
||||||
}, [
|
|
||||||
flatListRef,
|
|
||||||
resetMainScroll,
|
|
||||||
multifeed,
|
|
||||||
resetPromptTimer,
|
|
||||||
setLoadPromptVisible,
|
|
||||||
])
|
|
||||||
|
|
||||||
useFocusEffect(
|
useFocusEffect(
|
||||||
React.useCallback(() => {
|
React.useCallback(() => {
|
||||||
const softResetSub = store.onScreenSoftReset(onSoftReset)
|
|
||||||
const multifeedCleanup = multifeed.registerListeners()
|
|
||||||
const cleanup = () => {
|
|
||||||
softResetSub.remove()
|
|
||||||
multifeedCleanup()
|
|
||||||
}
|
|
||||||
|
|
||||||
store.shell.setMinimalShellMode(false)
|
store.shell.setMinimalShellMode(false)
|
||||||
return cleanup
|
myFeeds.setup()
|
||||||
}, [store, multifeed, onSoftReset]),
|
}, [store.shell, myFeeds]),
|
||||||
)
|
)
|
||||||
|
|
||||||
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(() => {
|
const onPressCompose = React.useCallback(() => {
|
||||||
store.shell.openComposer({})
|
store.shell.openComposer({})
|
||||||
}, [store])
|
}, [store])
|
||||||
|
const onChangeQuery = React.useCallback(
|
||||||
|
(text: string) => {
|
||||||
|
setQuery(text)
|
||||||
|
if (text.length > 1) {
|
||||||
|
debouncedSearchFeeds(text)
|
||||||
|
} else {
|
||||||
|
myFeeds.discovery.refresh()
|
||||||
|
}
|
||||||
|
},
|
||||||
|
[debouncedSearchFeeds, myFeeds.discovery],
|
||||||
|
)
|
||||||
|
const onPressCancelSearch = React.useCallback(() => {
|
||||||
|
setQuery('')
|
||||||
|
myFeeds.discovery.refresh()
|
||||||
|
}, [myFeeds])
|
||||||
|
const onSubmitQuery = React.useCallback(() => {
|
||||||
|
debouncedSearchFeeds(query)
|
||||||
|
debouncedSearchFeeds.flush()
|
||||||
|
}, [debouncedSearchFeeds, query])
|
||||||
|
|
||||||
const renderHeaderBtn = React.useCallback(() => {
|
const renderHeaderBtn = React.useCallback(() => {
|
||||||
return (
|
return (
|
||||||
|
@ -99,30 +81,150 @@ export const FeedsScreen = withAuthRequired(
|
||||||
)
|
)
|
||||||
}, [pal])
|
}, [pal])
|
||||||
|
|
||||||
|
const onRefresh = React.useCallback(() => {
|
||||||
|
myFeeds.refresh()
|
||||||
|
}, [myFeeds])
|
||||||
|
|
||||||
|
const renderItem = React.useCallback(
|
||||||
|
({item}: {item: MyFeedsItem}) => {
|
||||||
|
if (item.type === 'discover-feeds-loading') {
|
||||||
|
return <FeedFeedLoadingPlaceholder />
|
||||||
|
} else if (item.type === 'spinner') {
|
||||||
|
return (
|
||||||
|
<View style={s.p10}>
|
||||||
|
<ActivityIndicator />
|
||||||
|
</View>
|
||||||
|
)
|
||||||
|
} else if (item.type === 'error') {
|
||||||
|
return <ErrorMessage message={item.error} />
|
||||||
|
} else if (item.type === 'saved-feeds-header') {
|
||||||
|
if (!isMobile) {
|
||||||
|
return (
|
||||||
|
<View
|
||||||
|
style={[
|
||||||
|
pal.view,
|
||||||
|
styles.header,
|
||||||
|
pal.border,
|
||||||
|
{
|
||||||
|
borderBottomWidth: 1,
|
||||||
|
},
|
||||||
|
]}>
|
||||||
|
<Text type="title-lg" style={[pal.text, s.bold]}>
|
||||||
|
My Feeds
|
||||||
|
</Text>
|
||||||
|
<Link href="/settings/saved-feeds">
|
||||||
|
<CogIcon strokeWidth={1.5} style={pal.icon} size={28} />
|
||||||
|
</Link>
|
||||||
|
</View>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
return <View />
|
||||||
|
} else if (item.type === 'saved-feed') {
|
||||||
|
return (
|
||||||
|
<SavedFeed
|
||||||
|
uri={item.feed.uri}
|
||||||
|
avatar={item.feed.data.avatar}
|
||||||
|
displayName={item.feed.displayName}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
} else if (item.type === 'discover-feeds-header') {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<View
|
||||||
|
style={[
|
||||||
|
pal.view,
|
||||||
|
styles.header,
|
||||||
|
{
|
||||||
|
marginTop: 16,
|
||||||
|
paddingLeft: isMobile ? 12 : undefined,
|
||||||
|
paddingRight: 10,
|
||||||
|
paddingBottom: isMobile ? 6 : undefined,
|
||||||
|
},
|
||||||
|
]}>
|
||||||
|
<Text type="title-lg" style={[pal.text, s.bold]}>
|
||||||
|
Discover new feeds
|
||||||
|
</Text>
|
||||||
|
{!isMobile && (
|
||||||
|
<SearchInput
|
||||||
|
query={query}
|
||||||
|
onChangeQuery={onChangeQuery}
|
||||||
|
onPressCancelSearch={onPressCancelSearch}
|
||||||
|
onSubmitQuery={onSubmitQuery}
|
||||||
|
style={{flex: 1, maxWidth: 250}}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</View>
|
||||||
|
{isMobile && (
|
||||||
|
<View style={{paddingHorizontal: 8, paddingBottom: 10}}>
|
||||||
|
<SearchInput
|
||||||
|
query={query}
|
||||||
|
onChangeQuery={onChangeQuery}
|
||||||
|
onPressCancelSearch={onPressCancelSearch}
|
||||||
|
onSubmitQuery={onSubmitQuery}
|
||||||
|
/>
|
||||||
|
</View>
|
||||||
|
)}
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
} else if (item.type === 'discover-feed') {
|
||||||
|
return (
|
||||||
|
<CustomFeed
|
||||||
|
item={item.feed}
|
||||||
|
showSaveBtn
|
||||||
|
showDescription
|
||||||
|
showLikes
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
} else if (item.type === 'discover-feeds-no-results') {
|
||||||
|
return (
|
||||||
|
<View
|
||||||
|
style={{
|
||||||
|
paddingHorizontal: 16,
|
||||||
|
paddingTop: 10,
|
||||||
|
paddingBottom: '150%',
|
||||||
|
}}>
|
||||||
|
<Text type="lg" style={pal.textLight}>
|
||||||
|
No results found for "{query}"
|
||||||
|
</Text>
|
||||||
|
</View>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
return null
|
||||||
|
},
|
||||||
|
[isMobile, pal, query, onChangeQuery, onPressCancelSearch, onSubmitQuery],
|
||||||
|
)
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<View style={[pal.view, styles.container]}>
|
<View style={[pal.view, styles.container]}>
|
||||||
<MultiFeed
|
|
||||||
scrollElRef={flatListRef}
|
|
||||||
multifeed={multifeed}
|
|
||||||
onScroll={onMainScroll}
|
|
||||||
scrollEventThrottle={100}
|
|
||||||
headerOffset={isMobile ? MOBILE_HEADER_OFFSET : undefined}
|
|
||||||
/>
|
|
||||||
{isMobile && (
|
{isMobile && (
|
||||||
<ViewHeader
|
<ViewHeader
|
||||||
title="My Feeds"
|
title="Feeds"
|
||||||
canGoBack={false}
|
canGoBack={false}
|
||||||
hideOnScroll
|
|
||||||
renderButton={renderHeaderBtn}
|
renderButton={renderHeaderBtn}
|
||||||
|
showBorder
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
{isScrolledDown || loadPromptVisible ? (
|
|
||||||
<LoadLatestBtn
|
<FlatList
|
||||||
onPress={onSoftReset}
|
style={[!isTabletOrDesktop && s.flex1, styles.list]}
|
||||||
label="Load latest posts"
|
data={myFeeds.items}
|
||||||
showIndicator={loadPromptVisible}
|
keyExtractor={item => item._reactKey}
|
||||||
/>
|
contentContainerStyle={styles.contentContainer}
|
||||||
) : null}
|
refreshControl={
|
||||||
|
<RefreshControl
|
||||||
|
refreshing={myFeeds.isRefreshing}
|
||||||
|
onRefresh={onRefresh}
|
||||||
|
tintColor={pal.colors.text}
|
||||||
|
titleColor={pal.colors.text}
|
||||||
|
/>
|
||||||
|
}
|
||||||
|
renderItem={renderItem}
|
||||||
|
initialNumToRender={10}
|
||||||
|
onEndReached={() => myFeeds.loadMore()}
|
||||||
|
extraData={myFeeds.isLoading}
|
||||||
|
// @ts-ignore our .web version only -prf
|
||||||
|
desktopFixedHeight
|
||||||
|
/>
|
||||||
<FAB
|
<FAB
|
||||||
testID="composeFAB"
|
testID="composeFAB"
|
||||||
onPress={onPressCompose}
|
onPress={onPressCompose}
|
||||||
|
@ -136,8 +238,76 @@ export const FeedsScreen = withAuthRequired(
|
||||||
}),
|
}),
|
||||||
)
|
)
|
||||||
|
|
||||||
|
function SavedFeed({
|
||||||
|
uri,
|
||||||
|
avatar,
|
||||||
|
displayName,
|
||||||
|
}: {
|
||||||
|
uri: string
|
||||||
|
avatar: string | undefined
|
||||||
|
displayName: string
|
||||||
|
}) {
|
||||||
|
const pal = usePalette('default')
|
||||||
|
const urip = new AtUri(uri)
|
||||||
|
const href = `/profile/${urip.hostname}/feed/${urip.rkey}`
|
||||||
|
const {isMobile} = useWebMediaQueries()
|
||||||
|
return (
|
||||||
|
<Link
|
||||||
|
testID={`saved-feed-${displayName}`}
|
||||||
|
href={href}
|
||||||
|
style={[pal.border, styles.savedFeed, isMobile && styles.savedFeedMobile]}
|
||||||
|
hoverStyle={pal.viewLight}
|
||||||
|
accessibilityLabel={displayName}
|
||||||
|
accessibilityHint=""
|
||||||
|
asAnchor
|
||||||
|
anchorNoUnderline>
|
||||||
|
<UserAvatar type="algo" size={28} avatar={avatar} />
|
||||||
|
<Text
|
||||||
|
type={isMobile ? 'lg' : 'lg-medium'}
|
||||||
|
style={[pal.text, s.flex1]}
|
||||||
|
numberOfLines={1}>
|
||||||
|
{displayName}
|
||||||
|
</Text>
|
||||||
|
{isMobile && (
|
||||||
|
<FontAwesomeIcon
|
||||||
|
icon="chevron-right"
|
||||||
|
size={14}
|
||||||
|
style={pal.textLight as FontAwesomeIconStyle}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</Link>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
const styles = StyleSheet.create({
|
const styles = StyleSheet.create({
|
||||||
container: {
|
container: {
|
||||||
flex: 1,
|
flex: 1,
|
||||||
},
|
},
|
||||||
|
list: {
|
||||||
|
height: '100%',
|
||||||
|
},
|
||||||
|
contentContainer: {
|
||||||
|
paddingBottom: 100,
|
||||||
|
},
|
||||||
|
|
||||||
|
header: {
|
||||||
|
flexDirection: 'row',
|
||||||
|
alignItems: 'center',
|
||||||
|
justifyContent: 'space-between',
|
||||||
|
gap: 16,
|
||||||
|
paddingHorizontal: 16,
|
||||||
|
paddingVertical: 12,
|
||||||
|
},
|
||||||
|
|
||||||
|
savedFeed: {
|
||||||
|
flexDirection: 'row',
|
||||||
|
alignItems: 'center',
|
||||||
|
paddingHorizontal: 16,
|
||||||
|
paddingVertical: 14,
|
||||||
|
gap: 12,
|
||||||
|
borderBottomWidth: 1,
|
||||||
|
},
|
||||||
|
savedFeedMobile: {
|
||||||
|
paddingVertical: 10,
|
||||||
|
},
|
||||||
})
|
})
|
||||||
|
|
|
@ -1,6 +1,8 @@
|
||||||
import React from 'react'
|
import React from 'react'
|
||||||
import {FlatList, View} from 'react-native'
|
import {FlatList, View} from 'react-native'
|
||||||
import {useFocusEffect, useIsFocused} from '@react-navigation/native'
|
import {useFocusEffect, useIsFocused} from '@react-navigation/native'
|
||||||
|
import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
|
||||||
|
import {FontAwesomeIconStyle} from '@fortawesome/react-native-fontawesome'
|
||||||
import {AppBskyFeedGetFeed as GetCustomFeed} from '@atproto/api'
|
import {AppBskyFeedGetFeed as GetCustomFeed} from '@atproto/api'
|
||||||
import {observer} from 'mobx-react-lite'
|
import {observer} from 'mobx-react-lite'
|
||||||
import useAppState from 'react-native-appstate-hook'
|
import useAppState from 'react-native-appstate-hook'
|
||||||
|
@ -8,6 +10,7 @@ import isEqual from 'lodash.isequal'
|
||||||
import {NativeStackScreenProps, HomeTabNavigatorParams} from 'lib/routes/types'
|
import {NativeStackScreenProps, HomeTabNavigatorParams} from 'lib/routes/types'
|
||||||
import {PostsFeedModel} from 'state/models/feeds/posts'
|
import {PostsFeedModel} from 'state/models/feeds/posts'
|
||||||
import {withAuthRequired} from 'view/com/auth/withAuthRequired'
|
import {withAuthRequired} from 'view/com/auth/withAuthRequired'
|
||||||
|
import {TextLink} from 'view/com/util/Link'
|
||||||
import {Feed} from '../com/posts/Feed'
|
import {Feed} from '../com/posts/Feed'
|
||||||
import {FollowingEmptyState} from 'view/com/posts/FollowingEmptyState'
|
import {FollowingEmptyState} from 'view/com/posts/FollowingEmptyState'
|
||||||
import {CustomFeedEmptyState} from 'view/com/posts/CustomFeedEmptyState'
|
import {CustomFeedEmptyState} from 'view/com/posts/CustomFeedEmptyState'
|
||||||
|
@ -16,14 +19,16 @@ import {FeedsTabBar} from '../com/pager/FeedsTabBar'
|
||||||
import {Pager, PagerRef, RenderTabBarFnProps} from 'view/com/pager/Pager'
|
import {Pager, PagerRef, RenderTabBarFnProps} from 'view/com/pager/Pager'
|
||||||
import {FAB} from '../com/util/fab/FAB'
|
import {FAB} from '../com/util/fab/FAB'
|
||||||
import {useStores} from 'state/index'
|
import {useStores} from 'state/index'
|
||||||
import {s} from 'lib/styles'
|
import {usePalette} from 'lib/hooks/usePalette'
|
||||||
|
import {s, colors} from 'lib/styles'
|
||||||
import {useOnMainScroll} from 'lib/hooks/useOnMainScroll'
|
import {useOnMainScroll} from 'lib/hooks/useOnMainScroll'
|
||||||
import {useAnalytics} from 'lib/analytics/analytics'
|
import {useAnalytics} from 'lib/analytics/analytics'
|
||||||
import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
|
import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
|
||||||
import {ComposeIcon2} from 'lib/icons'
|
import {ComposeIcon2} from 'lib/icons'
|
||||||
|
|
||||||
const HEADER_OFFSET_MOBILE = 78
|
const HEADER_OFFSET_MOBILE = 78
|
||||||
const HEADER_OFFSET_DESKTOP = 50
|
const HEADER_OFFSET_TABLET = 50
|
||||||
|
const HEADER_OFFSET_DESKTOP = 0
|
||||||
const POLL_FREQ = 30e3 // 30sec
|
const POLL_FREQ = 30e3 // 30sec
|
||||||
|
|
||||||
type Props = NativeStackScreenProps<HomeTabNavigatorParams, 'Home'>
|
type Props = NativeStackScreenProps<HomeTabNavigatorParams, 'Home'>
|
||||||
|
@ -154,17 +159,23 @@ const FeedPage = observer(function FeedPageImpl({
|
||||||
renderEmptyState?: () => JSX.Element
|
renderEmptyState?: () => JSX.Element
|
||||||
}) {
|
}) {
|
||||||
const store = useStores()
|
const store = useStores()
|
||||||
const {isMobile} = useWebMediaQueries()
|
const pal = usePalette('default')
|
||||||
|
const {isMobile, isTablet, isDesktop} = useWebMediaQueries()
|
||||||
const [onMainScroll, isScrolledDown, resetMainScroll] = useOnMainScroll(store)
|
const [onMainScroll, isScrolledDown, resetMainScroll] = useOnMainScroll(store)
|
||||||
const {screen, track} = useAnalytics()
|
const {screen, track} = useAnalytics()
|
||||||
const [headerOffset, setHeaderOffset] = React.useState(
|
const [headerOffset, setHeaderOffset] = React.useState(
|
||||||
isMobile ? HEADER_OFFSET_MOBILE : HEADER_OFFSET_DESKTOP,
|
isMobile
|
||||||
|
? HEADER_OFFSET_MOBILE
|
||||||
|
: isTablet
|
||||||
|
? HEADER_OFFSET_TABLET
|
||||||
|
: HEADER_OFFSET_DESKTOP,
|
||||||
)
|
)
|
||||||
const scrollElRef = React.useRef<FlatList>(null)
|
const scrollElRef = React.useRef<FlatList>(null)
|
||||||
const {appState} = useAppState({
|
const {appState} = useAppState({
|
||||||
onForeground: () => doPoll(true),
|
onForeground: () => doPoll(true),
|
||||||
})
|
})
|
||||||
const isScreenFocused = useIsFocused()
|
const isScreenFocused = useIsFocused()
|
||||||
|
const hasNew = feed.hasNewLatest && !feed.isRefreshing
|
||||||
|
|
||||||
React.useEffect(() => {
|
React.useEffect(() => {
|
||||||
// called on first load
|
// called on first load
|
||||||
|
@ -205,8 +216,14 @@ const FeedPage = observer(function FeedPageImpl({
|
||||||
|
|
||||||
// listens for resize events
|
// listens for resize events
|
||||||
React.useEffect(() => {
|
React.useEffect(() => {
|
||||||
setHeaderOffset(isMobile ? HEADER_OFFSET_MOBILE : HEADER_OFFSET_DESKTOP)
|
setHeaderOffset(
|
||||||
}, [isMobile])
|
isMobile
|
||||||
|
? HEADER_OFFSET_MOBILE
|
||||||
|
: isTablet
|
||||||
|
? HEADER_OFFSET_TABLET
|
||||||
|
: HEADER_OFFSET_DESKTOP,
|
||||||
|
)
|
||||||
|
}, [isMobile, isTablet])
|
||||||
|
|
||||||
// fires when page within screen is activated/deactivated
|
// fires when page within screen is activated/deactivated
|
||||||
// - check for latest
|
// - check for latest
|
||||||
|
@ -222,9 +239,6 @@ const FeedPage = observer(function FeedPageImpl({
|
||||||
screen('Feed')
|
screen('Feed')
|
||||||
store.log.debug('HomeScreen: Updating feed')
|
store.log.debug('HomeScreen: Updating feed')
|
||||||
feed.checkForLatest()
|
feed.checkForLatest()
|
||||||
if (feed.hasContent) {
|
|
||||||
feed.update()
|
|
||||||
}
|
|
||||||
|
|
||||||
return () => {
|
return () => {
|
||||||
clearInterval(pollInterval)
|
clearInterval(pollInterval)
|
||||||
|
@ -247,7 +261,59 @@ const FeedPage = observer(function FeedPageImpl({
|
||||||
feed.refresh()
|
feed.refresh()
|
||||||
}, [feed, scrollToTop])
|
}, [feed, scrollToTop])
|
||||||
|
|
||||||
const hasNew = feed.hasNewLatest && !feed.isRefreshing
|
const ListHeaderComponent = React.useCallback(() => {
|
||||||
|
if (isDesktop) {
|
||||||
|
return (
|
||||||
|
<View
|
||||||
|
style={[
|
||||||
|
pal.view,
|
||||||
|
{
|
||||||
|
flexDirection: 'row',
|
||||||
|
alignItems: 'center',
|
||||||
|
justifyContent: 'space-between',
|
||||||
|
paddingHorizontal: 18,
|
||||||
|
paddingVertical: 12,
|
||||||
|
},
|
||||||
|
]}>
|
||||||
|
<TextLink
|
||||||
|
type="title-lg"
|
||||||
|
href="/"
|
||||||
|
style={[pal.text, {fontWeight: 'bold'}]}
|
||||||
|
text={
|
||||||
|
<>
|
||||||
|
{store.session.isSandbox ? 'SANDBOX' : 'Bluesky'}{' '}
|
||||||
|
{hasNew && (
|
||||||
|
<View
|
||||||
|
style={{
|
||||||
|
top: -8,
|
||||||
|
backgroundColor: colors.blue3,
|
||||||
|
width: 8,
|
||||||
|
height: 8,
|
||||||
|
borderRadius: 4,
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</>
|
||||||
|
}
|
||||||
|
onPress={() => store.emitScreenSoftReset()}
|
||||||
|
/>
|
||||||
|
<TextLink
|
||||||
|
type="title-lg"
|
||||||
|
href="/settings/home-feed"
|
||||||
|
style={{fontWeight: 'bold'}}
|
||||||
|
text={
|
||||||
|
<FontAwesomeIcon
|
||||||
|
icon="sliders"
|
||||||
|
style={pal.textLight as FontAwesomeIconStyle}
|
||||||
|
/>
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
</View>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
return <></>
|
||||||
|
}, [isDesktop, pal, store, hasNew])
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<View testID={testID} style={s.h100pct}>
|
<View testID={testID} style={s.h100pct}>
|
||||||
<Feed
|
<Feed
|
||||||
|
@ -259,6 +325,7 @@ const FeedPage = observer(function FeedPageImpl({
|
||||||
onScroll={onMainScroll}
|
onScroll={onMainScroll}
|
||||||
scrollEventThrottle={100}
|
scrollEventThrottle={100}
|
||||||
renderEmptyState={renderEmptyState}
|
renderEmptyState={renderEmptyState}
|
||||||
|
ListHeaderComponent={ListHeaderComponent}
|
||||||
headerOffset={headerOffset}
|
headerOffset={headerOffset}
|
||||||
/>
|
/>
|
||||||
{(isScrolledDown || hasNew) && (
|
{(isScrolledDown || hasNew) && (
|
||||||
|
|
|
@ -9,12 +9,15 @@ import {
|
||||||
import {withAuthRequired} from 'view/com/auth/withAuthRequired'
|
import {withAuthRequired} from 'view/com/auth/withAuthRequired'
|
||||||
import {ViewHeader} from '../com/util/ViewHeader'
|
import {ViewHeader} from '../com/util/ViewHeader'
|
||||||
import {Feed} from '../com/notifications/Feed'
|
import {Feed} from '../com/notifications/Feed'
|
||||||
|
import {TextLink} from 'view/com/util/Link'
|
||||||
import {InvitedUsers} from '../com/notifications/InvitedUsers'
|
import {InvitedUsers} from '../com/notifications/InvitedUsers'
|
||||||
import {LoadLatestBtn} from 'view/com/util/load-latest/LoadLatestBtn'
|
import {LoadLatestBtn} from 'view/com/util/load-latest/LoadLatestBtn'
|
||||||
import {useStores} from 'state/index'
|
import {useStores} from 'state/index'
|
||||||
import {useOnMainScroll} from 'lib/hooks/useOnMainScroll'
|
import {useOnMainScroll} from 'lib/hooks/useOnMainScroll'
|
||||||
import {useTabFocusEffect} from 'lib/hooks/useTabFocusEffect'
|
import {useTabFocusEffect} from 'lib/hooks/useTabFocusEffect'
|
||||||
import {s} from 'lib/styles'
|
import {usePalette} from 'lib/hooks/usePalette'
|
||||||
|
import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
|
||||||
|
import {s, colors} from 'lib/styles'
|
||||||
import {useAnalytics} from 'lib/analytics/analytics'
|
import {useAnalytics} from 'lib/analytics/analytics'
|
||||||
import {isWeb} from 'platform/detection'
|
import {isWeb} from 'platform/detection'
|
||||||
|
|
||||||
|
@ -29,6 +32,12 @@ export const NotificationsScreen = withAuthRequired(
|
||||||
useOnMainScroll(store)
|
useOnMainScroll(store)
|
||||||
const scrollElRef = React.useRef<FlatList>(null)
|
const scrollElRef = React.useRef<FlatList>(null)
|
||||||
const {screen} = useAnalytics()
|
const {screen} = useAnalytics()
|
||||||
|
const pal = usePalette('default')
|
||||||
|
const {isDesktop} = useWebMediaQueries()
|
||||||
|
|
||||||
|
const hasNew =
|
||||||
|
store.me.notifications.hasNewLatest &&
|
||||||
|
!store.me.notifications.isRefreshing
|
||||||
|
|
||||||
// event handlers
|
// event handlers
|
||||||
// =
|
// =
|
||||||
|
@ -88,9 +97,48 @@ export const NotificationsScreen = withAuthRequired(
|
||||||
),
|
),
|
||||||
)
|
)
|
||||||
|
|
||||||
const hasNew =
|
const ListHeaderComponent = React.useCallback(() => {
|
||||||
store.me.notifications.hasNewLatest &&
|
if (isDesktop) {
|
||||||
!store.me.notifications.isRefreshing
|
return (
|
||||||
|
<View
|
||||||
|
style={[
|
||||||
|
pal.view,
|
||||||
|
{
|
||||||
|
flexDirection: 'row',
|
||||||
|
alignItems: 'center',
|
||||||
|
justifyContent: 'space-between',
|
||||||
|
paddingHorizontal: 18,
|
||||||
|
paddingVertical: 12,
|
||||||
|
},
|
||||||
|
]}>
|
||||||
|
<TextLink
|
||||||
|
type="title-lg"
|
||||||
|
href="/notifications"
|
||||||
|
style={[pal.text, {fontWeight: 'bold'}]}
|
||||||
|
text={
|
||||||
|
<>
|
||||||
|
Notifications{' '}
|
||||||
|
{hasNew && (
|
||||||
|
<View
|
||||||
|
style={{
|
||||||
|
top: -8,
|
||||||
|
backgroundColor: colors.blue3,
|
||||||
|
width: 8,
|
||||||
|
height: 8,
|
||||||
|
borderRadius: 4,
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</>
|
||||||
|
}
|
||||||
|
onPress={() => store.emitScreenSoftReset()}
|
||||||
|
/>
|
||||||
|
</View>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
return <></>
|
||||||
|
}, [isDesktop, pal, store, hasNew])
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<View testID="notificationsScreen" style={s.hContentRegion}>
|
<View testID="notificationsScreen" style={s.hContentRegion}>
|
||||||
<ViewHeader title="Notifications" canGoBack={false} />
|
<ViewHeader title="Notifications" canGoBack={false} />
|
||||||
|
@ -100,6 +148,7 @@ export const NotificationsScreen = withAuthRequired(
|
||||||
onPressTryAgain={onPressTryAgain}
|
onPressTryAgain={onPressTryAgain}
|
||||||
onScroll={onMainScroll}
|
onScroll={onMainScroll}
|
||||||
scrollElRef={scrollElRef}
|
scrollElRef={scrollElRef}
|
||||||
|
ListHeaderComponent={ListHeaderComponent}
|
||||||
/>
|
/>
|
||||||
{(isScrolledDown || hasNew) && (
|
{(isScrolledDown || hasNew) && (
|
||||||
<LoadLatestBtn
|
<LoadLatestBtn
|
||||||
|
|
|
@ -19,14 +19,7 @@ function RepliesThresholdInput({enabled}: {enabled: boolean}) {
|
||||||
const [value, setValue] = useState(store.preferences.homeFeedRepliesThreshold)
|
const [value, setValue] = useState(store.preferences.homeFeedRepliesThreshold)
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<View style={[s.mt10, !enabled && styles.dimmed]}>
|
<View style={[!enabled && styles.dimmed]}>
|
||||||
<Text type="xs" style={pal.text}>
|
|
||||||
{value === 0
|
|
||||||
? `Show all replies`
|
|
||||||
: `Show replies with at least ${value} ${
|
|
||||||
value > 1 ? `likes` : `like`
|
|
||||||
}`}
|
|
||||||
</Text>
|
|
||||||
<Slider
|
<Slider
|
||||||
value={value}
|
value={value}
|
||||||
onValueChange={(v: number | number[]) => {
|
onValueChange={(v: number | number[]) => {
|
||||||
|
@ -40,6 +33,13 @@ function RepliesThresholdInput({enabled}: {enabled: boolean}) {
|
||||||
disabled={!enabled}
|
disabled={!enabled}
|
||||||
thumbTintColor={colors.blue3}
|
thumbTintColor={colors.blue3}
|
||||||
/>
|
/>
|
||||||
|
<Text type="xs" style={pal.text}>
|
||||||
|
{value === 0
|
||||||
|
? `Show all replies`
|
||||||
|
: `Show replies with at least ${value} ${
|
||||||
|
value > 1 ? `likes` : `like`
|
||||||
|
}`}
|
||||||
|
</Text>
|
||||||
</View>
|
</View>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
@ -79,8 +79,7 @@ export const PreferencesHomeFeed = observer(function PreferencesHomeFeedImpl({
|
||||||
Show Replies
|
Show Replies
|
||||||
</Text>
|
</Text>
|
||||||
<Text style={[pal.text, s.pb10]}>
|
<Text style={[pal.text, s.pb10]}>
|
||||||
Adjust the number of likes a reply must have to be shown in your
|
Set this setting to "No" to hide all replies from your feed.
|
||||||
feed.
|
|
||||||
</Text>
|
</Text>
|
||||||
<ToggleButton
|
<ToggleButton
|
||||||
type="default-light"
|
type="default-light"
|
||||||
|
@ -88,7 +87,36 @@ export const PreferencesHomeFeed = observer(function PreferencesHomeFeedImpl({
|
||||||
isSelected={store.preferences.homeFeedRepliesEnabled}
|
isSelected={store.preferences.homeFeedRepliesEnabled}
|
||||||
onPress={store.preferences.toggleHomeFeedRepliesEnabled}
|
onPress={store.preferences.toggleHomeFeedRepliesEnabled}
|
||||||
/>
|
/>
|
||||||
|
</View>
|
||||||
|
<View
|
||||||
|
style={[
|
||||||
|
pal.viewLight,
|
||||||
|
styles.card,
|
||||||
|
!store.preferences.homeFeedRepliesEnabled && styles.dimmed,
|
||||||
|
]}>
|
||||||
|
<Text type="title-sm" style={[pal.text, s.pb5]}>
|
||||||
|
Reply Filters
|
||||||
|
</Text>
|
||||||
|
<Text style={[pal.text, s.pb10]}>
|
||||||
|
Enable this setting to only see replies between people you follow.
|
||||||
|
</Text>
|
||||||
|
<ToggleButton
|
||||||
|
type="default-light"
|
||||||
|
label="Followed users only"
|
||||||
|
isSelected={
|
||||||
|
store.preferences.homeFeedRepliesByFollowedOnlyEnabled
|
||||||
|
}
|
||||||
|
onPress={
|
||||||
|
store.preferences.homeFeedRepliesEnabled
|
||||||
|
? store.preferences.toggleHomeFeedRepliesByFollowedOnlyEnabled
|
||||||
|
: undefined
|
||||||
|
}
|
||||||
|
style={[s.mb10]}
|
||||||
|
/>
|
||||||
|
<Text style={[pal.text]}>
|
||||||
|
Adjust the number of likes a reply must have to be shown in your
|
||||||
|
feed.
|
||||||
|
</Text>
|
||||||
<RepliesThresholdInput
|
<RepliesThresholdInput
|
||||||
enabled={store.preferences.homeFeedRepliesEnabled}
|
enabled={store.preferences.homeFeedRepliesEnabled}
|
||||||
/>
|
/>
|
||||||
|
@ -124,6 +152,22 @@ export const PreferencesHomeFeed = observer(function PreferencesHomeFeedImpl({
|
||||||
onPress={store.preferences.toggleHomeFeedQuotePostsEnabled}
|
onPress={store.preferences.toggleHomeFeedQuotePostsEnabled}
|
||||||
/>
|
/>
|
||||||
</View>
|
</View>
|
||||||
|
|
||||||
|
<View style={[pal.viewLight, styles.card]}>
|
||||||
|
<Text type="title-sm" style={[pal.text, s.pb5]}>
|
||||||
|
Show Posts from My Feeds (Experimental)
|
||||||
|
</Text>
|
||||||
|
<Text style={[pal.text, s.pb10]}>
|
||||||
|
Set this setting to "Yes" to show samples of your saved feeds in
|
||||||
|
your following feed.
|
||||||
|
</Text>
|
||||||
|
<ToggleButton
|
||||||
|
type="default-light"
|
||||||
|
label={store.preferences.homeFeedMergeFeedEnabled ? 'Yes' : 'No'}
|
||||||
|
isSelected={store.preferences.homeFeedMergeFeedEnabled}
|
||||||
|
onPress={store.preferences.toggleHomeFeedMergeFeedEnabled}
|
||||||
|
/>
|
||||||
|
</View>
|
||||||
</View>
|
</View>
|
||||||
</ScrollView>
|
</ScrollView>
|
||||||
|
|
||||||
|
|
|
@ -69,9 +69,7 @@ export const ProfileScreen = withAuthRequired(
|
||||||
let aborted = false
|
let aborted = false
|
||||||
store.shell.setMinimalShellMode(false)
|
store.shell.setMinimalShellMode(false)
|
||||||
const feedCleanup = uiState.feed.registerListeners()
|
const feedCleanup = uiState.feed.registerListeners()
|
||||||
if (hasSetup) {
|
if (!hasSetup) {
|
||||||
uiState.update()
|
|
||||||
} else {
|
|
||||||
uiState.setup().then(() => {
|
uiState.setup().then(() => {
|
||||||
if (aborted) {
|
if (aborted) {
|
||||||
return
|
return
|
||||||
|
|
|
@ -70,7 +70,7 @@ export const SavedFeeds = withAuthRequired(
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<View style={[styles.footerLinks, pal.border]}>
|
<View style={[styles.footerLinks, pal.border]}>
|
||||||
<Link style={styles.footerLink} href="/search/feeds">
|
<Link style={styles.footerLink} href="/feeds">
|
||||||
<FontAwesomeIcon
|
<FontAwesomeIcon
|
||||||
icon="search"
|
icon="search"
|
||||||
size={18}
|
size={18}
|
||||||
|
|
|
@ -40,7 +40,7 @@ import {AccountData} from 'state/models/session'
|
||||||
import {useAnalytics} from 'lib/analytics/analytics'
|
import {useAnalytics} from 'lib/analytics/analytics'
|
||||||
import {NavigationProp} from 'lib/routes/types'
|
import {NavigationProp} from 'lib/routes/types'
|
||||||
import {pluralize} from 'lib/strings/helpers'
|
import {pluralize} from 'lib/strings/helpers'
|
||||||
import {HandIcon} from 'lib/icons'
|
import {HandIcon, HashtagIcon} from 'lib/icons'
|
||||||
import {formatCount} from 'view/com/util/numeric/format'
|
import {formatCount} from 'view/com/util/numeric/format'
|
||||||
import Clipboard from '@react-native-clipboard/clipboard'
|
import Clipboard from '@react-native-clipboard/clipboard'
|
||||||
import {reset as resetNavigation} from '../../Navigation'
|
import {reset as resetNavigation} from '../../Navigation'
|
||||||
|
@ -423,17 +423,14 @@ export const SettingsScreen = withAuthRequired(
|
||||||
<TouchableOpacity
|
<TouchableOpacity
|
||||||
testID="savedFeedsBtn"
|
testID="savedFeedsBtn"
|
||||||
style={[styles.linkCard, pal.view, isSwitching && styles.dimmed]}
|
style={[styles.linkCard, pal.view, isSwitching && styles.dimmed]}
|
||||||
accessibilityHint="Saved Feeds"
|
accessibilityHint="My Saved Feeds"
|
||||||
accessibilityLabel="Opens screen with all saved feeds"
|
accessibilityLabel="Opens screen with all saved feeds"
|
||||||
onPress={onPressSavedFeeds}>
|
onPress={onPressSavedFeeds}>
|
||||||
<View style={[styles.iconContainer, pal.btn]}>
|
<View style={[styles.iconContainer, pal.btn]}>
|
||||||
<FontAwesomeIcon
|
<HashtagIcon style={pal.text} size={18} strokeWidth={3} />
|
||||||
icon="satellite-dish"
|
|
||||||
style={pal.text as FontAwesomeIconStyle}
|
|
||||||
/>
|
|
||||||
</View>
|
</View>
|
||||||
<Text type="lg" style={pal.text}>
|
<Text type="lg" style={pal.text}>
|
||||||
Saved Feeds
|
My Saved Feeds
|
||||||
</Text>
|
</Text>
|
||||||
</TouchableOpacity>
|
</TouchableOpacity>
|
||||||
<TouchableOpacity
|
<TouchableOpacity
|
||||||
|
|
|
@ -28,8 +28,7 @@ import {
|
||||||
MagnifyingGlassIcon2,
|
MagnifyingGlassIcon2,
|
||||||
MagnifyingGlassIcon2Solid,
|
MagnifyingGlassIcon2Solid,
|
||||||
UserIconSolid,
|
UserIconSolid,
|
||||||
SatelliteDishIcon,
|
HashtagIcon,
|
||||||
SatelliteDishIconSolid,
|
|
||||||
HandIcon,
|
HandIcon,
|
||||||
} from 'lib/icons'
|
} from 'lib/icons'
|
||||||
import {UserAvatar} from 'view/com/util/UserAvatar'
|
import {UserAvatar} from 'view/com/util/UserAvatar'
|
||||||
|
@ -258,21 +257,21 @@ export const DrawerContent = observer(function DrawerContentImpl() {
|
||||||
<MenuItem
|
<MenuItem
|
||||||
icon={
|
icon={
|
||||||
isAtFeeds ? (
|
isAtFeeds ? (
|
||||||
<SatelliteDishIconSolid
|
<HashtagIcon
|
||||||
strokeWidth={1.5}
|
strokeWidth={3}
|
||||||
style={pal.text as FontAwesomeIconStyle}
|
style={pal.text as FontAwesomeIconStyle}
|
||||||
size={24}
|
size={24}
|
||||||
/>
|
/>
|
||||||
) : (
|
) : (
|
||||||
<SatelliteDishIcon
|
<HashtagIcon
|
||||||
strokeWidth={1.5}
|
strokeWidth={2}
|
||||||
style={pal.text as FontAwesomeIconStyle}
|
style={pal.text as FontAwesomeIconStyle}
|
||||||
size={24}
|
size={24}
|
||||||
/>
|
/>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
label="My Feeds"
|
label="Feeds"
|
||||||
accessibilityLabel="My Feeds"
|
accessibilityLabel="Feeds"
|
||||||
accessibilityHint=""
|
accessibilityHint=""
|
||||||
onPress={onPressMyFeeds}
|
onPress={onPressMyFeeds}
|
||||||
/>
|
/>
|
||||||
|
|
|
@ -18,8 +18,7 @@ import {
|
||||||
HomeIconSolid,
|
HomeIconSolid,
|
||||||
MagnifyingGlassIcon2,
|
MagnifyingGlassIcon2,
|
||||||
MagnifyingGlassIcon2Solid,
|
MagnifyingGlassIcon2Solid,
|
||||||
SatelliteDishIcon,
|
HashtagIcon,
|
||||||
SatelliteDishIconSolid,
|
|
||||||
BellIcon,
|
BellIcon,
|
||||||
BellIconSolid,
|
BellIconSolid,
|
||||||
} from 'lib/icons'
|
} from 'lib/icons'
|
||||||
|
@ -134,16 +133,16 @@ export const BottomBar = observer(function BottomBarImpl({
|
||||||
testID="bottomBarFeedsBtn"
|
testID="bottomBarFeedsBtn"
|
||||||
icon={
|
icon={
|
||||||
isAtFeeds ? (
|
isAtFeeds ? (
|
||||||
<SatelliteDishIconSolid
|
<HashtagIcon
|
||||||
size={25}
|
size={24}
|
||||||
style={[styles.ctrlIcon, pal.text, styles.searchIcon]}
|
style={[styles.ctrlIcon, pal.text, styles.feedsIcon]}
|
||||||
strokeWidth={1.8}
|
strokeWidth={4}
|
||||||
/>
|
/>
|
||||||
) : (
|
) : (
|
||||||
<SatelliteDishIcon
|
<HashtagIcon
|
||||||
size={25}
|
size={24}
|
||||||
style={[styles.ctrlIcon, pal.text, styles.searchIcon]}
|
style={[styles.ctrlIcon, pal.text, styles.feedsIcon]}
|
||||||
strokeWidth={1.8}
|
strokeWidth={2.25}
|
||||||
/>
|
/>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
|
@ -49,6 +49,9 @@ export const styles = StyleSheet.create({
|
||||||
homeIcon: {
|
homeIcon: {
|
||||||
top: 0,
|
top: 0,
|
||||||
},
|
},
|
||||||
|
feedsIcon: {
|
||||||
|
top: -2,
|
||||||
|
},
|
||||||
searchIcon: {
|
searchIcon: {
|
||||||
top: -2,
|
top: -2,
|
||||||
},
|
},
|
||||||
|
|
|
@ -15,8 +15,7 @@ import {
|
||||||
HomeIconSolid,
|
HomeIconSolid,
|
||||||
MagnifyingGlassIcon2,
|
MagnifyingGlassIcon2,
|
||||||
MagnifyingGlassIcon2Solid,
|
MagnifyingGlassIcon2Solid,
|
||||||
SatelliteDishIcon,
|
HashtagIcon,
|
||||||
SatelliteDishIconSolid,
|
|
||||||
UserIcon,
|
UserIcon,
|
||||||
UserIconSolid,
|
UserIconSolid,
|
||||||
} from 'lib/icons'
|
} from 'lib/icons'
|
||||||
|
@ -68,12 +67,11 @@ export const BottomBarWeb = observer(function BottomBarWebImpl() {
|
||||||
</NavItem>
|
</NavItem>
|
||||||
<NavItem routeName="Feeds" href="/feeds">
|
<NavItem routeName="Feeds" href="/feeds">
|
||||||
{({isActive}) => {
|
{({isActive}) => {
|
||||||
const Icon = isActive ? SatelliteDishIconSolid : SatelliteDishIcon
|
|
||||||
return (
|
return (
|
||||||
<Icon
|
<HashtagIcon
|
||||||
size={25}
|
size={22}
|
||||||
style={[styles.ctrlIcon, pal.text, styles.searchIcon]}
|
style={[styles.ctrlIcon, pal.text, styles.feedsIcon]}
|
||||||
strokeWidth={1.8}
|
strokeWidth={isActive ? 4 : 2.5}
|
||||||
/>
|
/>
|
||||||
)
|
)
|
||||||
}}
|
}}
|
||||||
|
|
|
@ -0,0 +1,92 @@
|
||||||
|
import React from 'react'
|
||||||
|
import {View, StyleSheet} from 'react-native'
|
||||||
|
import {useNavigationState} from '@react-navigation/native'
|
||||||
|
import {AtUri} from '@atproto/api'
|
||||||
|
import {observer} from 'mobx-react-lite'
|
||||||
|
import {useStores} from 'state/index'
|
||||||
|
import {usePalette} from 'lib/hooks/usePalette'
|
||||||
|
import {TextLink} from 'view/com/util/Link'
|
||||||
|
import {getCurrentRoute} from 'lib/routes/helpers'
|
||||||
|
|
||||||
|
export const DesktopFeeds = observer(function DesktopFeeds() {
|
||||||
|
const store = useStores()
|
||||||
|
const pal = usePalette('default')
|
||||||
|
|
||||||
|
const route = useNavigationState(state => {
|
||||||
|
if (!state) {
|
||||||
|
return {name: 'Home'}
|
||||||
|
}
|
||||||
|
return getCurrentRoute(state)
|
||||||
|
})
|
||||||
|
|
||||||
|
return (
|
||||||
|
<View style={[styles.container, pal.view, pal.border]}>
|
||||||
|
<FeedItem href="/" title="Following" current={route.name === 'Home'} />
|
||||||
|
{store.me.savedFeeds.pinned.map(feed => {
|
||||||
|
try {
|
||||||
|
const {hostname, rkey} = new AtUri(feed.uri)
|
||||||
|
const href = `/profile/${hostname}/feed/${rkey}`
|
||||||
|
const params = route.params as Record<string, string>
|
||||||
|
return (
|
||||||
|
<FeedItem
|
||||||
|
key={feed.uri}
|
||||||
|
href={href}
|
||||||
|
title={feed.displayName}
|
||||||
|
current={
|
||||||
|
route.name === 'CustomFeed' &&
|
||||||
|
params.name === hostname &&
|
||||||
|
params.rkey === rkey
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
} catch {
|
||||||
|
return null
|
||||||
|
}
|
||||||
|
})}
|
||||||
|
<View style={{paddingTop: 8, paddingBottom: 6}}>
|
||||||
|
<TextLink
|
||||||
|
type="lg"
|
||||||
|
href="/feeds"
|
||||||
|
text="More feeds"
|
||||||
|
style={[pal.link]}
|
||||||
|
/>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
)
|
||||||
|
})
|
||||||
|
|
||||||
|
function FeedItem({
|
||||||
|
title,
|
||||||
|
href,
|
||||||
|
current,
|
||||||
|
}: {
|
||||||
|
title: string
|
||||||
|
href: string
|
||||||
|
current: boolean
|
||||||
|
}) {
|
||||||
|
const pal = usePalette('default')
|
||||||
|
return (
|
||||||
|
<View style={{paddingVertical: 6}}>
|
||||||
|
<TextLink
|
||||||
|
type="xl"
|
||||||
|
href={href}
|
||||||
|
text={title}
|
||||||
|
style={[
|
||||||
|
current ? pal.text : pal.textLight,
|
||||||
|
{letterSpacing: 0.15, fontWeight: current ? '500' : 'normal'},
|
||||||
|
]}
|
||||||
|
/>
|
||||||
|
</View>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
const styles = StyleSheet.create({
|
||||||
|
container: {
|
||||||
|
position: 'relative',
|
||||||
|
width: 300,
|
||||||
|
paddingHorizontal: 12,
|
||||||
|
borderTopWidth: 1,
|
||||||
|
borderBottomWidth: 1,
|
||||||
|
paddingVertical: 18,
|
||||||
|
},
|
||||||
|
})
|
|
@ -32,8 +32,7 @@ import {
|
||||||
CogIconSolid,
|
CogIconSolid,
|
||||||
ComposeIcon2,
|
ComposeIcon2,
|
||||||
HandIcon,
|
HandIcon,
|
||||||
SatelliteDishIcon,
|
HashtagIcon,
|
||||||
SatelliteDishIconSolid,
|
|
||||||
} from 'lib/icons'
|
} from 'lib/icons'
|
||||||
import {getCurrentRoute, isTab, isStateAtTabRoot} from 'lib/routes/helpers'
|
import {getCurrentRoute, isTab, isStateAtTabRoot} from 'lib/routes/helpers'
|
||||||
import {NavigationProp, CommonNavigatorParams} from 'lib/routes/types'
|
import {NavigationProp, CommonNavigatorParams} from 'lib/routes/types'
|
||||||
|
@ -272,20 +271,20 @@ export const DesktopLeftNav = observer(function DesktopLeftNav() {
|
||||||
<NavItem
|
<NavItem
|
||||||
href="/feeds"
|
href="/feeds"
|
||||||
icon={
|
icon={
|
||||||
<SatelliteDishIcon
|
<HashtagIcon
|
||||||
strokeWidth={1.75}
|
strokeWidth={2.25}
|
||||||
style={pal.text as FontAwesomeIconStyle}
|
style={pal.text as FontAwesomeIconStyle}
|
||||||
size={isDesktop ? 24 : 28}
|
size={isDesktop ? 24 : 28}
|
||||||
/>
|
/>
|
||||||
}
|
}
|
||||||
iconFilled={
|
iconFilled={
|
||||||
<SatelliteDishIconSolid
|
<HashtagIcon
|
||||||
strokeWidth={1.75}
|
strokeWidth={2.5}
|
||||||
style={pal.text as FontAwesomeIconStyle}
|
style={pal.text as FontAwesomeIconStyle}
|
||||||
size={isDesktop ? 24 : 28}
|
size={isDesktop ? 24 : 28}
|
||||||
/>
|
/>
|
||||||
}
|
}
|
||||||
label="My Feeds"
|
label="Feeds"
|
||||||
/>
|
/>
|
||||||
<NavItem
|
<NavItem
|
||||||
href="/notifications"
|
href="/notifications"
|
||||||
|
|
|
@ -4,6 +4,7 @@ import {StyleSheet, TouchableOpacity, View} from 'react-native'
|
||||||
import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
|
import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
|
||||||
import {usePalette} from 'lib/hooks/usePalette'
|
import {usePalette} from 'lib/hooks/usePalette'
|
||||||
import {DesktopSearch} from './Search'
|
import {DesktopSearch} from './Search'
|
||||||
|
import {DesktopFeeds} from './Feeds'
|
||||||
import {Text} from 'view/com/util/text/Text'
|
import {Text} from 'view/com/util/text/Text'
|
||||||
import {TextLink} from 'view/com/util/Link'
|
import {TextLink} from 'view/com/util/Link'
|
||||||
import {FEEDBACK_FORM_URL, HELP_DESK_URL} from 'lib/constants'
|
import {FEEDBACK_FORM_URL, HELP_DESK_URL} from 'lib/constants'
|
||||||
|
@ -26,6 +27,7 @@ export const DesktopRightNav = observer(function DesktopRightNavImpl() {
|
||||||
return (
|
return (
|
||||||
<View style={[styles.rightNav, pal.view]}>
|
<View style={[styles.rightNav, pal.view]}>
|
||||||
{store.session.hasSession && <DesktopSearch />}
|
{store.session.hasSession && <DesktopSearch />}
|
||||||
|
{store.session.hasSession && <DesktopFeeds />}
|
||||||
<View style={styles.message}>
|
<View style={styles.message}>
|
||||||
{store.session.isSandbox ? (
|
{store.session.isSandbox ? (
|
||||||
<View style={[palError.view, styles.messageLine, s.p10]}>
|
<View style={[palError.view, styles.messageLine, s.p10]}>
|
||||||
|
@ -126,7 +128,7 @@ const styles = StyleSheet.create({
|
||||||
},
|
},
|
||||||
|
|
||||||
message: {
|
message: {
|
||||||
marginTop: 20,
|
paddingVertical: 18,
|
||||||
paddingHorizontal: 10,
|
paddingHorizontal: 10,
|
||||||
},
|
},
|
||||||
messageLine: {
|
messageLine: {
|
||||||
|
@ -134,7 +136,6 @@ const styles = StyleSheet.create({
|
||||||
},
|
},
|
||||||
|
|
||||||
inviteCodes: {
|
inviteCodes: {
|
||||||
marginTop: 12,
|
|
||||||
borderTopWidth: 1,
|
borderTopWidth: 1,
|
||||||
paddingHorizontal: 16,
|
paddingHorizontal: 16,
|
||||||
paddingVertical: 12,
|
paddingVertical: 12,
|
||||||
|
|
|
@ -113,6 +113,7 @@ const styles = StyleSheet.create({
|
||||||
container: {
|
container: {
|
||||||
position: 'relative',
|
position: 'relative',
|
||||||
width: 300,
|
width: 300,
|
||||||
|
paddingBottom: 18,
|
||||||
},
|
},
|
||||||
search: {
|
search: {
|
||||||
paddingHorizontal: 16,
|
paddingHorizontal: 16,
|
||||||
|
|
20
yarn.lock
20
yarn.lock
|
@ -6418,6 +6418,13 @@
|
||||||
dependencies:
|
dependencies:
|
||||||
"@types/lodash" "*"
|
"@types/lodash" "*"
|
||||||
|
|
||||||
|
"@types/lodash.random@^3.2.7":
|
||||||
|
version "3.2.7"
|
||||||
|
resolved "https://registry.yarnpkg.com/@types/lodash.random/-/lodash.random-3.2.7.tgz#3100a1b7956ce86ab5adcce2e7b305412b98e3bf"
|
||||||
|
integrity sha512-gFKkVgWYi1q7RFJ+QNTzaRprdhVIZLpZd6C3MTNehKcujMn9SyFUqf2fTBOmvIYXqNk0RpwfbdOwHf0GnEQB0g==
|
||||||
|
dependencies:
|
||||||
|
"@types/lodash" "*"
|
||||||
|
|
||||||
"@types/lodash.samplesize@^4.2.7":
|
"@types/lodash.samplesize@^4.2.7":
|
||||||
version "4.2.7"
|
version "4.2.7"
|
||||||
resolved "https://registry.yarnpkg.com/@types/lodash.samplesize/-/lodash.samplesize-4.2.7.tgz#15784dd9e54aa1bf043552bdb533b83fcf50b82f"
|
resolved "https://registry.yarnpkg.com/@types/lodash.samplesize/-/lodash.samplesize-4.2.7.tgz#15784dd9e54aa1bf043552bdb533b83fcf50b82f"
|
||||||
|
@ -13886,6 +13893,11 @@ lodash.once@^4.0.0, lodash.once@^4.1.1:
|
||||||
resolved "https://registry.yarnpkg.com/lodash.once/-/lodash.once-4.1.1.tgz#0dd3971213c7c56df880977d504c88fb471a97ac"
|
resolved "https://registry.yarnpkg.com/lodash.once/-/lodash.once-4.1.1.tgz#0dd3971213c7c56df880977d504c88fb471a97ac"
|
||||||
integrity sha512-Sb487aTOCr9drQVL8pIxOzVhafOjZN9UU54hiN8PU3uAiSV7lx1yYNpbNmex2PK6dSJoNTSJUUswT651yww3Mg==
|
integrity sha512-Sb487aTOCr9drQVL8pIxOzVhafOjZN9UU54hiN8PU3uAiSV7lx1yYNpbNmex2PK6dSJoNTSJUUswT651yww3Mg==
|
||||||
|
|
||||||
|
lodash.random@^3.2.0:
|
||||||
|
version "3.2.0"
|
||||||
|
resolved "https://registry.yarnpkg.com/lodash.random/-/lodash.random-3.2.0.tgz#96e24e763333199130d2c9e2fd57f91703cc262d"
|
||||||
|
integrity sha512-A6Vn7teN0+qSnhOsE8yx2bGowCS1G7D9e5abq8VhwOP98YHS/KrGMf43yYxA05lvcvloT+W9Z2ffkSajFTcPUA==
|
||||||
|
|
||||||
lodash.samplesize@^4.2.0:
|
lodash.samplesize@^4.2.0:
|
||||||
version "4.2.0"
|
version "4.2.0"
|
||||||
resolved "https://registry.yarnpkg.com/lodash.samplesize/-/lodash.samplesize-4.2.0.tgz#460762fbb2b342290517499e90d51586db465ff9"
|
resolved "https://registry.yarnpkg.com/lodash.samplesize/-/lodash.samplesize-4.2.0.tgz#460762fbb2b342290517499e90d51586db465ff9"
|
||||||
|
@ -16855,10 +16867,10 @@ react-dom@^18.2.0:
|
||||||
loose-envify "^1.1.0"
|
loose-envify "^1.1.0"
|
||||||
scheduler "^0.23.0"
|
scheduler "^0.23.0"
|
||||||
|
|
||||||
react-error-overlay@^6.0.11:
|
react-error-overlay@6.0.9, react-error-overlay@^6.0.11:
|
||||||
version "6.0.11"
|
version "6.0.9"
|
||||||
resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-6.0.11.tgz#92835de5841c5cf08ba00ddd2d677b6d17ff9adb"
|
resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-6.0.9.tgz#3c743010c9359608c375ecd6bc76f35d93995b0a"
|
||||||
integrity sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg==
|
integrity sha512-nQTTcUu+ATDbrSD1BZHr5kgSD4oF8OFjxun8uAaL8RwPBacGBNPf/yAuVVdx17N8XNzRDMrZ9XcKZHCjPW+9ew==
|
||||||
|
|
||||||
react-freeze@^1.0.0:
|
react-freeze@^1.0.0:
|
||||||
version "1.0.3"
|
version "1.0.3"
|
||||||
|
|
Loading…
Reference in New Issue