refactor(feed): remove NoSnippetWrapper from FeedPage in favor of dataSet attribute

Replaces NoSnippetWrapper with a dataSet prop on the root View to
control the nosnippet attribute for discover feeds. This simplifies the
component structure and improves maintainability by reducing unnecessary
wrappers.
This commit is contained in:
Caidan Williams
2025-08-26 14:07:18 -07:00
parent 6ddc268b91
commit bd730db03e
2 changed files with 46 additions and 74 deletions
+46 -45
View File
@@ -18,8 +18,11 @@ import {listenSoftReset} from '#/state/events'
import {FeedFeedbackProvider, useFeedFeedback} from '#/state/feed-feedback'
import {useSetHomeBadge} from '#/state/home-badge'
import {type FeedSourceInfo} from '#/state/queries/feed'
import {RQKEY as FEED_RQKEY} from '#/state/queries/post-feed'
import {type FeedDescriptor, type FeedParams} from '#/state/queries/post-feed'
import {
type FeedDescriptor,
type FeedParams,
RQKEY as FEED_RQKEY,
} from '#/state/queries/post-feed'
import {truncateAndInvalidate} from '#/state/queries/util'
import {useSession} from '#/state/session'
import {useSetMinimalShellMode} from '#/state/shell'
@@ -29,7 +32,6 @@ import {FAB} from '../util/fab/FAB'
import {type ListMethods} from '../util/List'
import {LoadLatestBtn} from '../util/load-latest/LoadLatestBtn'
import {MainScrollProvider} from '../util/MainScrollProvider'
import {NoSnippetWrapper} from '../util/NoSnippetWrapper'
const POLL_FREQ = 60e3 // 60sec
@@ -133,49 +135,48 @@ export function FeedPage({
const shouldPrefetch = isNative && isPageAdjacent
return (
<NoSnippetWrapper enabled={isDiscoverFeed}>
<View testID={testID}>
<MainScrollProvider>
<FeedFeedbackProvider value={feedFeedback}>
<PostFeed
testID={testID ? `${testID}-feed` : undefined}
enabled={isPageFocused || shouldPrefetch}
feed={feed}
feedParams={feedParams}
pollInterval={POLL_FREQ}
disablePoll={hasNew || !isPageFocused}
scrollElRef={scrollElRef}
onScrolledDownChange={setIsScrolledDown}
onHasNew={setHasNew}
renderEmptyState={renderEmptyState}
renderEndOfFeed={renderEndOfFeed}
headerOffset={headerOffset}
savedFeedConfig={savedFeedConfig}
isVideoFeed={isVideoFeed}
/>
</FeedFeedbackProvider>
</MainScrollProvider>
{(isScrolledDown || hasNew) && (
<LoadLatestBtn
onPress={onPressLoadLatest}
label={_(msg`Load new posts`)}
showIndicator={hasNew}
<View
testID={testID}
// @ts-expect-error web only -sfn
dataSet={{nosnippet: isDiscoverFeed ? '' : undefined}}>
<MainScrollProvider>
<FeedFeedbackProvider value={feedFeedback}>
<PostFeed
testID={testID ? `${testID}-feed` : undefined}
enabled={isPageFocused || shouldPrefetch}
feed={feed}
feedParams={feedParams}
pollInterval={POLL_FREQ}
disablePoll={hasNew || !isPageFocused}
scrollElRef={scrollElRef}
onScrolledDownChange={setIsScrolledDown}
onHasNew={setHasNew}
renderEmptyState={renderEmptyState}
renderEndOfFeed={renderEndOfFeed}
headerOffset={headerOffset}
savedFeedConfig={savedFeedConfig}
isVideoFeed={isVideoFeed}
/>
)}
</FeedFeedbackProvider>
</MainScrollProvider>
{(isScrolledDown || hasNew) && (
<LoadLatestBtn
onPress={onPressLoadLatest}
label={_(msg`Load new posts`)}
showIndicator={hasNew}
/>
)}
{hasSession && (
<FAB
testID="composeFAB"
onPress={onPressCompose}
icon={<ComposeIcon2 strokeWidth={1.5} size={29} style={s.white} />}
accessibilityRole="button"
accessibilityLabel={_(
msg({message: `New post`, context: 'action'}),
)}
accessibilityHint=""
/>
)}
</View>
</NoSnippetWrapper>
{hasSession && (
<FAB
testID="composeFAB"
onPress={onPressCompose}
icon={<ComposeIcon2 strokeWidth={1.5} size={29} style={s.white} />}
accessibilityRole="button"
accessibilityLabel={_(msg({message: `New post`, context: 'action'}))}
accessibilityHint=""
/>
)}
</View>
)
}
-29
View File
@@ -1,29 +0,0 @@
import {type ViewProps} from 'react-native'
// @ts-expect-error untyped
import {unstable_createElement} from 'react-native-web'
import {isWeb} from '#/platform/detection'
interface Props extends ViewProps {
enabled: boolean
}
/**
* NoSnippetWrapper prevents search engines from displaying snippets of its content.
*
* If running on web and enabled, wraps children in a <div> with data-nosnippet attribute.
* Otherwise, renders children directly.
*
* @param enabled - Whether to apply the data-nosnippet attribute.
* @param viewProps - Additional props for the wrapper element.
*/
export function NoSnippetWrapper({enabled, ...viewProps}: Props) {
if (isWeb && enabled) {
return unstable_createElement('div', {
...viewProps,
'data-nosnippet': '',
})
}
return <>{viewProps.children}</>
}