Tweak rendering of top headers so they always appear even during load (#4982)
Co-authored-by: Eric Bailey <git@esb.lol>zio/stable
parent
8651f31ebb
commit
8cddce5f30
|
@ -1,5 +1,5 @@
|
|||
import React from 'react'
|
||||
import {Dimensions} from 'react-native'
|
||||
import {useMediaQuery} from 'react-responsive'
|
||||
|
||||
import {createThemes, defaultTheme} from '#/alf/themes'
|
||||
import {Theme, ThemeName} from '#/alf/types'
|
||||
|
@ -12,52 +12,15 @@ export * from '#/alf/util/flatten'
|
|||
export * from '#/alf/util/platform'
|
||||
export * from '#/alf/util/themeSelector'
|
||||
|
||||
type BreakpointName = keyof typeof breakpoints
|
||||
|
||||
/*
|
||||
* Breakpoints
|
||||
*/
|
||||
const breakpoints: {
|
||||
[key: string]: number
|
||||
} = {
|
||||
gtPhone: 500,
|
||||
gtMobile: 800,
|
||||
gtTablet: 1300,
|
||||
}
|
||||
function getActiveBreakpoints({width}: {width: number}) {
|
||||
const active: (keyof typeof breakpoints)[] = Object.keys(breakpoints).filter(
|
||||
breakpoint => width >= breakpoints[breakpoint],
|
||||
)
|
||||
|
||||
return {
|
||||
active: active[active.length - 1],
|
||||
gtPhone: active.includes('gtPhone'),
|
||||
gtMobile: active.includes('gtMobile'),
|
||||
gtTablet: active.includes('gtTablet'),
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
* Context
|
||||
*/
|
||||
export const Context = React.createContext<{
|
||||
themeName: ThemeName
|
||||
theme: Theme
|
||||
breakpoints: {
|
||||
active: BreakpointName | undefined
|
||||
gtPhone: boolean
|
||||
gtMobile: boolean
|
||||
gtTablet: boolean
|
||||
}
|
||||
}>({
|
||||
themeName: 'light',
|
||||
theme: defaultTheme,
|
||||
breakpoints: {
|
||||
active: undefined,
|
||||
gtPhone: false,
|
||||
gtMobile: false,
|
||||
gtTablet: false,
|
||||
},
|
||||
})
|
||||
|
||||
export function ThemeProvider({
|
||||
|
@ -74,18 +37,6 @@ export function ThemeProvider({
|
|||
})
|
||||
}, [])
|
||||
const theme = themes[themeName]
|
||||
const [breakpoints, setBreakpoints] = React.useState(() =>
|
||||
getActiveBreakpoints({width: Dimensions.get('window').width}),
|
||||
)
|
||||
|
||||
React.useEffect(() => {
|
||||
const listener = Dimensions.addEventListener('change', ({window}) => {
|
||||
const bp = getActiveBreakpoints({width: window.width})
|
||||
if (bp.active !== breakpoints.active) setBreakpoints(bp)
|
||||
})
|
||||
|
||||
return listener.remove
|
||||
}, [breakpoints, setBreakpoints])
|
||||
|
||||
return (
|
||||
<Context.Provider
|
||||
|
@ -93,9 +44,8 @@ export function ThemeProvider({
|
|||
() => ({
|
||||
themeName: themeName,
|
||||
theme: theme,
|
||||
breakpoints,
|
||||
}),
|
||||
[theme, themeName, breakpoints],
|
||||
[theme, themeName],
|
||||
)}>
|
||||
{children}
|
||||
</Context.Provider>
|
||||
|
@ -107,5 +57,12 @@ export function useTheme() {
|
|||
}
|
||||
|
||||
export function useBreakpoints() {
|
||||
return React.useContext(Context).breakpoints
|
||||
const gtPhone = useMediaQuery({minWidth: 500})
|
||||
const gtMobile = useMediaQuery({minWidth: 800})
|
||||
const gtTablet = useMediaQuery({minWidth: 1300})
|
||||
return {
|
||||
gtPhone,
|
||||
gtMobile,
|
||||
gtTablet,
|
||||
}
|
||||
}
|
||||
|
|
|
@ -1,5 +1,4 @@
|
|||
import React from 'react'
|
||||
import {View} from 'react-native'
|
||||
import {msg} from '@lingui/macro'
|
||||
import {useLingui} from '@lingui/react'
|
||||
import {useFocusEffect} from '@react-navigation/native'
|
||||
|
@ -7,9 +6,12 @@ import {useFocusEffect} from '@react-navigation/native'
|
|||
import {CommonNavigatorParams, NativeStackScreenProps} from '#/lib/routes/types'
|
||||
import {makeRecordUri} from '#/lib/strings/url-helpers'
|
||||
import {useSetMinimalShellMode} from '#/state/shell'
|
||||
import {isWeb} from 'platform/detection'
|
||||
import {PostLikedBy as PostLikedByComponent} from '#/view/com/post-thread/PostLikedBy'
|
||||
import {ViewHeader} from '#/view/com/util/ViewHeader'
|
||||
import {CenteredView} from 'view/com/util/Views'
|
||||
import {atoms as a} from '#/alf'
|
||||
import {ListHeaderDesktop} from '#/components/Lists'
|
||||
|
||||
type Props = NativeStackScreenProps<CommonNavigatorParams, 'PostLikedBy'>
|
||||
export const PostLikedByScreen = ({route}: Props) => {
|
||||
|
@ -25,9 +27,10 @@ export const PostLikedByScreen = ({route}: Props) => {
|
|||
)
|
||||
|
||||
return (
|
||||
<View style={a.flex_1}>
|
||||
<ViewHeader title={_(msg`Liked By`)} />
|
||||
<CenteredView style={a.h_full_vh} sideBorders={true}>
|
||||
<ListHeaderDesktop title={_(msg`Liked By`)} />
|
||||
<ViewHeader title={_(msg`Liked By`)} showBorder={!isWeb} />
|
||||
<PostLikedByComponent uri={uri} />
|
||||
</View>
|
||||
</CenteredView>
|
||||
)
|
||||
}
|
||||
|
|
|
@ -1,5 +1,4 @@
|
|||
import React from 'react'
|
||||
import {View} from 'react-native'
|
||||
import {msg} from '@lingui/macro'
|
||||
import {useLingui} from '@lingui/react'
|
||||
import {useFocusEffect} from '@react-navigation/native'
|
||||
|
@ -7,9 +6,12 @@ import {useFocusEffect} from '@react-navigation/native'
|
|||
import {CommonNavigatorParams, NativeStackScreenProps} from '#/lib/routes/types'
|
||||
import {makeRecordUri} from '#/lib/strings/url-helpers'
|
||||
import {useSetMinimalShellMode} from '#/state/shell'
|
||||
import {isWeb} from 'platform/detection'
|
||||
import {PostQuotes as PostQuotesComponent} from '#/view/com/post-thread/PostQuotes'
|
||||
import {ViewHeader} from '#/view/com/util/ViewHeader'
|
||||
import {CenteredView} from 'view/com/util/Views'
|
||||
import {atoms as a} from '#/alf'
|
||||
import {ListHeaderDesktop} from '#/components/Lists'
|
||||
|
||||
type Props = NativeStackScreenProps<CommonNavigatorParams, 'PostQuotes'>
|
||||
export const PostQuotesScreen = ({route}: Props) => {
|
||||
|
@ -25,9 +27,10 @@ export const PostQuotesScreen = ({route}: Props) => {
|
|||
)
|
||||
|
||||
return (
|
||||
<View style={a.flex_1}>
|
||||
<ViewHeader title={_(msg`Quotes`)} />
|
||||
<CenteredView style={a.h_full_vh} sideBorders={true}>
|
||||
<ListHeaderDesktop title={_(msg`Quotes`)} />
|
||||
<ViewHeader title={_(msg`Quotes`)} showBorder={!isWeb} />
|
||||
<PostQuotesComponent uri={uri} />
|
||||
</View>
|
||||
</CenteredView>
|
||||
)
|
||||
}
|
||||
|
|
|
@ -1,5 +1,4 @@
|
|||
import React from 'react'
|
||||
import {View} from 'react-native'
|
||||
import {msg} from '@lingui/macro'
|
||||
import {useLingui} from '@lingui/react'
|
||||
import {useFocusEffect} from '@react-navigation/native'
|
||||
|
@ -7,9 +6,12 @@ import {useFocusEffect} from '@react-navigation/native'
|
|||
import {CommonNavigatorParams, NativeStackScreenProps} from '#/lib/routes/types'
|
||||
import {makeRecordUri} from '#/lib/strings/url-helpers'
|
||||
import {useSetMinimalShellMode} from '#/state/shell'
|
||||
import {isWeb} from 'platform/detection'
|
||||
import {PostRepostedBy as PostRepostedByComponent} from '#/view/com/post-thread/PostRepostedBy'
|
||||
import {ViewHeader} from '#/view/com/util/ViewHeader'
|
||||
import {CenteredView} from 'view/com/util/Views'
|
||||
import {atoms as a} from '#/alf'
|
||||
import {ListHeaderDesktop} from '#/components/Lists'
|
||||
|
||||
type Props = NativeStackScreenProps<CommonNavigatorParams, 'PostRepostedBy'>
|
||||
export const PostRepostedByScreen = ({route}: Props) => {
|
||||
|
@ -25,9 +27,10 @@ export const PostRepostedByScreen = ({route}: Props) => {
|
|||
)
|
||||
|
||||
return (
|
||||
<View style={a.flex_1}>
|
||||
<ViewHeader title={_(msg`Reposted By`)} />
|
||||
<CenteredView style={a.h_full_vh} sideBorders={true}>
|
||||
<ListHeaderDesktop title={_(msg`Reposted By`)} />
|
||||
<ViewHeader title={_(msg`Reposted By`)} showBorder={!isWeb} />
|
||||
<PostRepostedByComponent uri={uri} />
|
||||
</View>
|
||||
</CenteredView>
|
||||
)
|
||||
}
|
||||
|
|
|
@ -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}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
|
|
@ -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}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
|
|
@ -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}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
|
|
@ -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}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
|
|
@ -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}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
|
|
@ -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,
|
||||
|
|
|
@ -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>
|
||||
)
|
||||
}
|
||||
|
|
|
@ -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>
|
||||
)
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue