zio/bsky-app
2
0
Fork 0
Code Pull requests Releases Packages Activity

Tweak rendering of top headers so they always appear even during load (#4982)

Browse source 
Co-authored-by: Eric Bailey <git@esb.lol>
This commit is contained in:
Hailey 2024-08-30 00:20:46 -07:00 • committed by GitHub
parent 8651f31ebb
commit 8cddce5f30
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
12 changed files with 120 additions and 130 deletions
Download patch file Download diff file Expand all files Collapse all files

23
src/view/com/post-thread/PostLikedBy.tsx
View file

@ -1,23 +1,24 @@
import React, {useCallback, useMemo, useState} from 'react'
import {AppBskyFeedGetLikes as GetLikes} from '@atproto/api'
import {msg} from '@lingui/macro'
import {useLingui} from '@lingui/react'
import {cleanError} from '#/lib/strings/errors'
import {logger} from '#/logger'
import {useLikedByQuery} from '#/state/queries/post-liked-by'
import {useResolveUriQuery} from '#/state/queries/resolve-uri'
import {useInitialNumToRender} from 'lib/hooks/useInitialNumToRender'
import {isWeb} from 'platform/detection'
import {ProfileCardWithFollowBtn} from '#/view/com/profile/ProfileCard'
import {List} from '#/view/com/util/List'
import {
ListFooter,
ListHeaderDesktop,
ListMaybePlaceholder,
} from '#/components/Lists'
import {ListFooter, ListMaybePlaceholder} from '#/components/Lists'
function renderItem({item}: {item: GetLikes.Like}) {
return <ProfileCardWithFollowBtn key={item.actor.did} profile={item.actor} />
function renderItem({item, index}: {item: GetLikes.Like; index: number}) {
return (
<ProfileCardWithFollowBtn
key={item.actor.did}
profile={item.actor}
noBorder={index === 0 && !isWeb}
/>
)
}
function keyExtractor(item: GetLikes.Like) {
@ -25,7 +26,6 @@ function keyExtractor(item: GetLikes.Like) {
}
export function PostLikedBy({uri}: {uri: string}) {
const {_} = useLingui()
const initialNumToRender = useInitialNumToRender()
const [isPTRing, setIsPTRing] = useState(false)
@ -78,6 +78,7 @@ export function PostLikedBy({uri}: {uri: string}) {
<ListMaybePlaceholder
isLoading={isLoadingUri || isLoadingLikes}
isError={isError}
sideBorders={false}
/>
)
}
@ -91,7 +92,6 @@ export function PostLikedBy({uri}: {uri: string}) {
onRefresh={onRefresh}
onEndReached={onEndReached}
onEndReachedThreshold={4}
ListHeaderComponent={<ListHeaderDesktop title={_(msg`Liked By`)} />}
ListFooterComponent={
<ListFooter
isFetchingNextPage={isFetchingNextPage}
@ -103,6 +103,7 @@ export function PostLikedBy({uri}: {uri: string}) {
desktopFixedHeight
initialNumToRender={initialNumToRender}
windowSize={11}
sideBorders={false}
/>
)
}

15
src/view/com/post-thread/PostQuotes.tsx
View file

@ -14,24 +14,23 @@ import {useModerationOpts} from '#/state/preferences/moderation-opts'
import {usePostQuotesQuery} from '#/state/queries/post-quotes'
import {useResolveUriQuery} from '#/state/queries/resolve-uri'
import {useInitialNumToRender} from 'lib/hooks/useInitialNumToRender'
import {isWeb} from 'platform/detection'
import {Post} from 'view/com/post/Post'
import {
ListFooter,
ListHeaderDesktop,
ListMaybePlaceholder,
} from '#/components/Lists'
import {ListFooter, ListMaybePlaceholder} from '#/components/Lists'
import {List} from '../util/List'
function renderItem({
item,
index,
}: {
item: {
post: AppBskyFeedDefs.PostView
moderation: ModerationDecision
record: AppBskyFeedPost.Record
}
index: number
}) {
return <Post post={item.post} />
return <Post post={item.post} hideTopBorder={index === 0 && !isWeb} />
}
function keyExtractor(item: {
@ -45,7 +44,6 @@ function keyExtractor(item: {
export function PostQuotes({uri}: {uri: string}) {
const {_} = useLingui()
const initialNumToRender = useInitialNumToRender()
const [isPTRing, setIsPTRing] = useState(false)
const {
@ -104,6 +102,7 @@ export function PostQuotes({uri}: {uri: string}) {
<ListMaybePlaceholder
isLoading={isLoadingUri || isLoadingQuotes}
isError={isError}
sideBorders={false}
/>
)
}
@ -119,7 +118,6 @@ export function PostQuotes({uri}: {uri: string}) {
onRefresh={onRefresh}
onEndReached={onEndReached}
onEndReachedThreshold={4}
ListHeaderComponent={<ListHeaderDesktop title={_(msg`Quotes`)} />}
ListFooterComponent={
<ListFooter
isFetchingNextPage={isFetchingNextPage}
@ -133,6 +131,7 @@ export function PostQuotes({uri}: {uri: string}) {
desktopFixedHeight
initialNumToRender={initialNumToRender}
windowSize={11}
sideBorders={false}
/>
)
}

12
src/view/com/post-thread/PostRepostedBy.tsx
View file

@ -1,7 +1,5 @@
import React, {useCallback, useMemo, useState} from 'react'
import {AppBskyActorDefs as ActorDefs} from '@atproto/api'
import {msg} from '@lingui/macro'
import {useLingui} from '@lingui/react'
import {cleanError} from '#/lib/strings/errors'
import {logger} from '#/logger'
@ -10,11 +8,7 @@ import {useResolveUriQuery} from '#/state/queries/resolve-uri'
import {useInitialNumToRender} from 'lib/hooks/useInitialNumToRender'
import {ProfileCardWithFollowBtn} from '#/view/com/profile/ProfileCard'
import {List} from '#/view/com/util/List'
import {
ListFooter,
ListHeaderDesktop,
ListMaybePlaceholder,
} from '#/components/Lists'
import {ListFooter, ListMaybePlaceholder} from '#/components/Lists'
function renderItem({item}: {item: ActorDefs.ProfileViewBasic}) {
return <ProfileCardWithFollowBtn key={item.did} profile={item} />
@ -25,7 +19,6 @@ function keyExtractor(item: ActorDefs.ProfileViewBasic) {
}
export function PostRepostedBy({uri}: {uri: string}) {
const {_} = useLingui()
const initialNumToRender = useInitialNumToRender()
const [isPTRing, setIsPTRing] = useState(false)
@ -78,6 +71,7 @@ export function PostRepostedBy({uri}: {uri: string}) {
<ListMaybePlaceholder
isLoading={isLoadingUri || isLoadingRepostedBy}
isError={isError}
sideBorders={false}
/>
)
}
@ -93,7 +87,6 @@ export function PostRepostedBy({uri}: {uri: string}) {
onRefresh={onRefresh}
onEndReached={onEndReached}
onEndReachedThreshold={4}
ListHeaderComponent={<ListHeaderDesktop title={_(msg`Reposted By`)} />}
ListFooterComponent={
<ListFooter
isFetchingNextPage={isFetchingNextPage}
@ -105,6 +98,7 @@ export function PostRepostedBy({uri}: {uri: string}) {
desktopFixedHeight
initialNumToRender={initialNumToRender}
windowSize={11}
sideBorders={false}
/>
)
}

26
src/view/com/profile/ProfileFollowers.tsx
View file

@ -8,17 +8,26 @@ import {logger} from '#/logger'
import {useProfileFollowersQuery} from '#/state/queries/profile-followers'
import {useResolveDidQuery} from '#/state/queries/resolve-uri'
import {useInitialNumToRender} from 'lib/hooks/useInitialNumToRender'
import {isWeb} from 'platform/detection'
import {useSession} from 'state/session'
import {
ListFooter,
ListHeaderDesktop,
ListMaybePlaceholder,
} from '#/components/Lists'
import {ListFooter, ListMaybePlaceholder} from '#/components/Lists'
import {List} from '../util/List'
import {ProfileCardWithFollowBtn} from './ProfileCard'
function renderItem({item}: {item: ActorDefs.ProfileViewBasic}) {
return <ProfileCardWithFollowBtn key={item.did} profile={item} />
function renderItem({
item,
index,
}: {
item: ActorDefs.ProfileViewBasic
index: number
}) {
return (
<ProfileCardWithFollowBtn
key={item.did}
profile={item}
noBorder={index === 0 && !isWeb}
/>
)
}
function keyExtractor(item: ActorDefs.ProfileViewBasic) {
@ -88,6 +97,7 @@ export function ProfileFollowers({name}: {name: string}) {
}
errorMessage={cleanError(resolveError || error)}
onRetry={isError ? refetch : undefined}
sideBorders={false}
/>
)
}
@ -101,7 +111,6 @@ export function ProfileFollowers({name}: {name: string}) {
onRefresh={onRefresh}
onEndReached={onEndReached}
onEndReachedThreshold={4}
ListHeaderComponent={<ListHeaderDesktop title={_(msg`Followers`)} />}
ListFooterComponent={
<ListFooter
isFetchingNextPage={isFetchingNextPage}
@ -113,6 +122,7 @@ export function ProfileFollowers({name}: {name: string}) {
desktopFixedHeight
initialNumToRender={initialNumToRender}
windowSize={11}
sideBorders={false}
/>
)
}

26
src/view/com/profile/ProfileFollows.tsx
View file

@ -8,17 +8,26 @@ import {logger} from '#/logger'
import {useProfileFollowsQuery} from '#/state/queries/profile-follows'
import {useResolveDidQuery} from '#/state/queries/resolve-uri'
import {useInitialNumToRender} from 'lib/hooks/useInitialNumToRender'
import {isWeb} from 'platform/detection'
import {useSession} from 'state/session'
import {
ListFooter,
ListHeaderDesktop,
ListMaybePlaceholder,
} from '#/components/Lists'
import {ListFooter, ListMaybePlaceholder} from '#/components/Lists'
import {List} from '../util/List'
import {ProfileCardWithFollowBtn} from './ProfileCard'
function renderItem({item}: {item: ActorDefs.ProfileViewBasic}) {
return <ProfileCardWithFollowBtn key={item.did} profile={item} />
function renderItem({
item,
index,
}: {
item: ActorDefs.ProfileViewBasic
index: number
}) {
return (
<ProfileCardWithFollowBtn
key={item.did}
profile={item}
noBorder={index === 0 && !isWeb}
/>
)
}
function keyExtractor(item: ActorDefs.ProfileViewBasic) {
@ -88,6 +97,7 @@ export function ProfileFollows({name}: {name: string}) {
}
errorMessage={cleanError(resolveError || error)}
onRetry={isError ? refetch : undefined}
sideBorders={false}
/>
)
}
@ -101,7 +111,6 @@ export function ProfileFollows({name}: {name: string}) {
onRefresh={onRefresh}
onEndReached={onEndReached}
onEndReachedThreshold={4}
ListHeaderComponent={<ListHeaderDesktop title={_(msg`Following`)} />}
ListFooterComponent={
<ListFooter
isFetchingNextPage={isFetchingNextPage}
@ -113,6 +122,7 @@ export function ProfileFollows({name}: {name: string}) {
desktopFixedHeight
initialNumToRender={initialNumToRender}
windowSize={11}
sideBorders={false}
/>
)
}

2
src/view/com/util/Views.web.tsx
View file

@ -47,7 +47,7 @@ export const CenteredView = React.forwardRef(function CenteredView(
if (!isMobile) {
style = addStyle(style, styles.container)
}
if (sideBorders) {
if (sideBorders && !isMobile) {
style = addStyle(style, {
borderLeftWidth: StyleSheet.hairlineWidth,
borderRightWidth: StyleSheet.hairlineWidth,

25
src/view/screens/ProfileFollowers.tsx
View file

@ -1,12 +1,16 @@
import React from 'react'
import {View} from 'react-native'
import {useFocusEffect} from '@react-navigation/native'
import {NativeStackScreenProps, CommonNavigatorParams} from 'lib/routes/types'
import {ViewHeader} from '../com/util/ViewHeader'
import {ProfileFollowers as ProfileFollowersComponent} from '../com/profile/ProfileFollowers'
import {useSetMinimalShellMode} from '#/state/shell'
import {useLingui} from '@lingui/react'
import {msg} from '@lingui/macro'
import {useLingui} from '@lingui/react'
import {useFocusEffect} from '@react-navigation/native'
import {useSetMinimalShellMode} from '#/state/shell'
import {CommonNavigatorParams, NativeStackScreenProps} from 'lib/routes/types'
import {isWeb} from 'platform/detection'
import {CenteredView} from 'view/com/util/Views'
import {atoms as a} from '#/alf'
import {ListHeaderDesktop} from '#/components/Lists'
import {ProfileFollowers as ProfileFollowersComponent} from '../com/profile/ProfileFollowers'
import {ViewHeader} from '../com/util/ViewHeader'
type Props = NativeStackScreenProps<CommonNavigatorParams, 'ProfileFollowers'>
export const ProfileFollowersScreen = ({route}: Props) => {
@ -21,9 +25,10 @@ export const ProfileFollowersScreen = ({route}: Props) => {
)
return (
<View style={{flex: 1}}>
<ViewHeader title={_(msg`Followers`)} />
<CenteredView style={a.h_full_vh} sideBorders={true}>
<ListHeaderDesktop title={_(msg`Followers`)} />
<ViewHeader title={_(msg`Followers`)} showBorder={!isWeb} />
<ProfileFollowersComponent name={name} />
</View>
</CenteredView>
)
}

25
src/view/screens/ProfileFollows.tsx
View file

@ -1,12 +1,16 @@
import React from 'react'
import {View} from 'react-native'
import {useFocusEffect} from '@react-navigation/native'
import {NativeStackScreenProps, CommonNavigatorParams} from 'lib/routes/types'
import {ViewHeader} from '../com/util/ViewHeader'
import {ProfileFollows as ProfileFollowsComponent} from '../com/profile/ProfileFollows'
import {useSetMinimalShellMode} from '#/state/shell'
import {useLingui} from '@lingui/react'
import {msg} from '@lingui/macro'
import {useLingui} from '@lingui/react'
import {useFocusEffect} from '@react-navigation/native'
import {useSetMinimalShellMode} from '#/state/shell'
import {CommonNavigatorParams, NativeStackScreenProps} from 'lib/routes/types'
import {isWeb} from 'platform/detection'
import {CenteredView} from 'view/com/util/Views'
import {atoms as a} from '#/alf'
import {ListHeaderDesktop} from '#/components/Lists'
import {ProfileFollows as ProfileFollowsComponent} from '../com/profile/ProfileFollows'
import {ViewHeader} from '../com/util/ViewHeader'
type Props = NativeStackScreenProps<CommonNavigatorParams, 'ProfileFollows'>
export const ProfileFollowsScreen = ({route}: Props) => {
@ -21,9 +25,10 @@ export const ProfileFollowsScreen = ({route}: Props) => {
)
return (
<View style={{flex: 1}}>
<ViewHeader title={_(msg`Following`)} />
<CenteredView style={a.h_full_vh} sideBorders={true}>
<ListHeaderDesktop title={_(msg`Following`)} />
<ViewHeader title={_(msg`Following`)} showBorder={!isWeb} />
<ProfileFollowsComponent name={name} />
</View>
</CenteredView>
)
}