tweak ordering of explore components
This commit is contained in:
@@ -10,7 +10,6 @@ import {useLingui} from '@lingui/react'
|
|||||||
import {useQueryClient} from '@tanstack/react-query'
|
import {useQueryClient} from '@tanstack/react-query'
|
||||||
import * as bcp47Match from 'bcp-47-match'
|
import * as bcp47Match from 'bcp-47-match'
|
||||||
|
|
||||||
import {useGate} from '#/lib/statsig/statsig'
|
|
||||||
import {cleanError} from '#/lib/strings/errors'
|
import {cleanError} from '#/lib/strings/errors'
|
||||||
import {sanitizeHandle} from '#/lib/strings/handles'
|
import {sanitizeHandle} from '#/lib/strings/handles'
|
||||||
import {logger} from '#/logger'
|
import {logger} from '#/logger'
|
||||||
@@ -35,7 +34,6 @@ import {
|
|||||||
createSuggestedStarterPacksQueryKey,
|
createSuggestedStarterPacksQueryKey,
|
||||||
useSuggestedStarterPacksQuery,
|
useSuggestedStarterPacksQuery,
|
||||||
} from '#/state/queries/useSuggestedStarterPacksQuery'
|
} from '#/state/queries/useSuggestedStarterPacksQuery'
|
||||||
import {useProgressGuide} from '#/state/shell/progress-guide'
|
|
||||||
import {isThreadChildAt, isThreadParentAt} from '#/view/com/posts/PostFeed'
|
import {isThreadChildAt, isThreadParentAt} from '#/view/com/posts/PostFeed'
|
||||||
import {PostFeedItem} from '#/view/com/posts/PostFeedItem'
|
import {PostFeedItem} from '#/view/com/posts/PostFeedItem'
|
||||||
import {ViewFullThread} from '#/view/com/posts/ViewFullThread'
|
import {ViewFullThread} from '#/view/com/posts/ViewFullThread'
|
||||||
@@ -61,11 +59,12 @@ import {Button} from '#/components/Button'
|
|||||||
import * as FeedCard from '#/components/FeedCard'
|
import * as FeedCard from '#/components/FeedCard'
|
||||||
import {ChevronBottom_Stroke2_Corner0_Rounded as ChevronDownIcon} from '#/components/icons/Chevron'
|
import {ChevronBottom_Stroke2_Corner0_Rounded as ChevronDownIcon} from '#/components/icons/Chevron'
|
||||||
import {CircleInfo_Stroke2_Corner0_Rounded as CircleInfo} from '#/components/icons/CircleInfo'
|
import {CircleInfo_Stroke2_Corner0_Rounded as CircleInfo} from '#/components/icons/CircleInfo'
|
||||||
import {type Props as IcoProps} from '#/components/icons/common'
|
import {
|
||||||
import {type Props as SVGIconProps} from '#/components/icons/common'
|
type Props as IcoProps,
|
||||||
|
type Props as SVGIconProps,
|
||||||
|
} from '#/components/icons/common'
|
||||||
import {ListSparkle_Stroke2_Corner0_Rounded as ListSparkle} from '#/components/icons/ListSparkle'
|
import {ListSparkle_Stroke2_Corner0_Rounded as ListSparkle} from '#/components/icons/ListSparkle'
|
||||||
import {StarterPack} from '#/components/icons/StarterPack'
|
import {StarterPack} from '#/components/icons/StarterPack'
|
||||||
import {Trending2_Stroke2_Corner2_Rounded as Graph} from '#/components/icons/Trending'
|
|
||||||
import {UserCircle_Stroke2_Corner0_Rounded as Person} from '#/components/icons/UserCircle'
|
import {UserCircle_Stroke2_Corner0_Rounded as Person} from '#/components/icons/UserCircle'
|
||||||
import {Loader} from '#/components/Loader'
|
import {Loader} from '#/components/Loader'
|
||||||
import * as ProfileCard from '#/components/ProfileCard'
|
import * as ProfileCard from '#/components/ProfileCard'
|
||||||
@@ -216,8 +215,6 @@ export function Explore({
|
|||||||
const t = useTheme()
|
const t = useTheme()
|
||||||
const {data: preferences, error: preferencesError} = usePreferencesQuery()
|
const {data: preferences, error: preferencesError} = usePreferencesQuery()
|
||||||
const moderationOpts = useModerationOpts()
|
const moderationOpts = useModerationOpts()
|
||||||
const gate = useGate()
|
|
||||||
const guide = useProgressGuide('follow-10')
|
|
||||||
const [selectedInterest, setSelectedInterest] = useState<string | null>(null)
|
const [selectedInterest, setSelectedInterest] = useState<string | null>(null)
|
||||||
|
|
||||||
/*
|
/*
|
||||||
@@ -484,7 +481,7 @@ export function Explore({
|
|||||||
// This query doesn't follow the limit very well, so the first press of the
|
// This query doesn't follow the limit very well, so the first press of the
|
||||||
// load more button just unslices the array back to ~10 items
|
// load more button just unslices the array back to ~10 items
|
||||||
if (!hasPressedLoadMoreFeeds) {
|
if (!hasPressedLoadMoreFeeds) {
|
||||||
i.push(...feedItems.slice(0, 3))
|
i.push(...feedItems.slice(0, 6))
|
||||||
} else {
|
} else {
|
||||||
i.push(...feedItems)
|
i.push(...feedItems)
|
||||||
}
|
}
|
||||||
@@ -589,7 +586,6 @@ export function Explore({
|
|||||||
]
|
]
|
||||||
}, [showInterestsNux])
|
}, [showInterestsNux])
|
||||||
|
|
||||||
const isNewUser = guide?.guide === 'follow-10' && !guide.isComplete
|
|
||||||
const items = useMemo<ExploreScreenItems[]>(() => {
|
const items = useMemo<ExploreScreenItems[]>(() => {
|
||||||
const i: ExploreScreenItems[] = []
|
const i: ExploreScreenItems[] = []
|
||||||
|
|
||||||
@@ -599,25 +595,10 @@ export function Explore({
|
|||||||
i.push(...interestsNuxModule)
|
i.push(...interestsNuxModule)
|
||||||
|
|
||||||
if (useFullExperience) {
|
if (useFullExperience) {
|
||||||
if (isNewUser) {
|
|
||||||
i.push(...suggestedFollowsModule)
|
|
||||||
i.push(...suggestedStarterPacksModule)
|
|
||||||
i.push({
|
|
||||||
type: 'header',
|
|
||||||
key: 'trending-topics-header',
|
|
||||||
title: _(msg`Trending topics`),
|
|
||||||
icon: Graph,
|
|
||||||
bottomBorder: true,
|
|
||||||
})
|
|
||||||
i.push(trendingTopicsModule)
|
i.push(trendingTopicsModule)
|
||||||
} else {
|
|
||||||
i.push(trendingTopicsModule)
|
|
||||||
i.push(...suggestedFollowsModule)
|
|
||||||
i.push(...suggestedStarterPacksModule)
|
|
||||||
}
|
|
||||||
if (gate('explore_show_suggested_feeds')) {
|
|
||||||
i.push(...suggestedFeedsModule)
|
i.push(...suggestedFeedsModule)
|
||||||
}
|
i.push(...suggestedFollowsModule)
|
||||||
|
i.push(...suggestedStarterPacksModule)
|
||||||
i.push(...feedPreviewsModule)
|
i.push(...feedPreviewsModule)
|
||||||
} else {
|
} else {
|
||||||
i.push(...suggestedFollowsModule)
|
i.push(...suggestedFollowsModule)
|
||||||
@@ -625,16 +606,13 @@ export function Explore({
|
|||||||
|
|
||||||
return i
|
return i
|
||||||
}, [
|
}, [
|
||||||
_,
|
|
||||||
topBorder,
|
topBorder,
|
||||||
isNewUser,
|
|
||||||
suggestedFollowsModule,
|
suggestedFollowsModule,
|
||||||
suggestedStarterPacksModule,
|
suggestedStarterPacksModule,
|
||||||
suggestedFeedsModule,
|
suggestedFeedsModule,
|
||||||
trendingTopicsModule,
|
trendingTopicsModule,
|
||||||
feedPreviewsModule,
|
feedPreviewsModule,
|
||||||
interestsNuxModule,
|
interestsNuxModule,
|
||||||
gate,
|
|
||||||
useFullExperience,
|
useFullExperience,
|
||||||
])
|
])
|
||||||
|
|
||||||
|
|||||||
@@ -9,7 +9,7 @@ import {STALE} from '#/state/queries'
|
|||||||
import {usePreferencesQuery} from '#/state/queries/preferences'
|
import {usePreferencesQuery} from '#/state/queries/preferences'
|
||||||
import {useAgent} from '#/state/session'
|
import {useAgent} from '#/state/session'
|
||||||
|
|
||||||
export const DEFAULT_LIMIT = 5
|
export const DEFAULT_LIMIT = 6
|
||||||
|
|
||||||
export const createGetSuggestedFeedsQueryKey = () => ['suggested-feeds']
|
export const createGetSuggestedFeedsQueryKey = () => ['suggested-feeds']
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user