From 8cddce5f304655d525f2fd523309419e5dd04367 Mon Sep 17 00:00:00 2001 From: Hailey Date: Fri, 30 Aug 2024 00:20:46 -0700 Subject: [PATCH] Tweak rendering of top headers so they always appear even during load (#4982) Co-authored-by: Eric Bailey --- src/alf/index.tsx | 63 ++++----------------- src/screens/Post/PostLikedBy.tsx | 11 ++-- src/screens/Post/PostQuotes.tsx | 11 ++-- src/screens/Post/PostRepostedBy.tsx | 11 ++-- src/view/com/post-thread/PostLikedBy.tsx | 23 ++++---- src/view/com/post-thread/PostQuotes.tsx | 15 +++-- src/view/com/post-thread/PostRepostedBy.tsx | 12 +--- src/view/com/profile/ProfileFollowers.tsx | 26 ++++++--- src/view/com/profile/ProfileFollows.tsx | 26 ++++++--- src/view/com/util/Views.web.tsx | 2 +- src/view/screens/ProfileFollowers.tsx | 25 ++++---- src/view/screens/ProfileFollows.tsx | 25 ++++---- 12 files changed, 120 insertions(+), 130 deletions(-) diff --git a/src/alf/index.tsx b/src/alf/index.tsx index ade2ce14..5fa7d3b1 100644 --- a/src/alf/index.tsx +++ b/src/alf/index.tsx @@ -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 ( ({ themeName: themeName, theme: theme, - breakpoints, }), - [theme, themeName, breakpoints], + [theme, themeName], )}> {children} @@ -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, + } } diff --git a/src/screens/Post/PostLikedBy.tsx b/src/screens/Post/PostLikedBy.tsx index c29e0aa2..eab9e2d2 100644 --- a/src/screens/Post/PostLikedBy.tsx +++ b/src/screens/Post/PostLikedBy.tsx @@ -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 export const PostLikedByScreen = ({route}: Props) => { @@ -25,9 +27,10 @@ export const PostLikedByScreen = ({route}: Props) => { ) return ( - - + + + - + ) } diff --git a/src/screens/Post/PostQuotes.tsx b/src/screens/Post/PostQuotes.tsx index d670f321..4a06639f 100644 --- a/src/screens/Post/PostQuotes.tsx +++ b/src/screens/Post/PostQuotes.tsx @@ -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 export const PostQuotesScreen = ({route}: Props) => { @@ -25,9 +27,10 @@ export const PostQuotesScreen = ({route}: Props) => { ) return ( - - + + + - + ) } diff --git a/src/screens/Post/PostRepostedBy.tsx b/src/screens/Post/PostRepostedBy.tsx index b15a6f6e..2a8ef1e0 100644 --- a/src/screens/Post/PostRepostedBy.tsx +++ b/src/screens/Post/PostRepostedBy.tsx @@ -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 export const PostRepostedByScreen = ({route}: Props) => { @@ -25,9 +27,10 @@ export const PostRepostedByScreen = ({route}: Props) => { ) return ( - - + + + - + ) } diff --git a/src/view/com/post-thread/PostLikedBy.tsx b/src/view/com/post-thread/PostLikedBy.tsx index c3e3f9e1..4c5bdf1a 100644 --- a/src/view/com/post-thread/PostLikedBy.tsx +++ b/src/view/com/post-thread/PostLikedBy.tsx @@ -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 +function renderItem({item, index}: {item: GetLikes.Like; index: number}) { + return ( + + ) } 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}) { ) } @@ -91,7 +92,6 @@ export function PostLikedBy({uri}: {uri: string}) { onRefresh={onRefresh} onEndReached={onEndReached} onEndReachedThreshold={4} - ListHeaderComponent={} ListFooterComponent={ ) } diff --git a/src/view/com/post-thread/PostQuotes.tsx b/src/view/com/post-thread/PostQuotes.tsx index f91a041d..48c8a69e 100644 --- a/src/view/com/post-thread/PostQuotes.tsx +++ b/src/view/com/post-thread/PostQuotes.tsx @@ -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 + return } 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}) { ) } @@ -119,7 +118,6 @@ export function PostQuotes({uri}: {uri: string}) { onRefresh={onRefresh} onEndReached={onEndReached} onEndReachedThreshold={4} - ListHeaderComponent={} ListFooterComponent={ ) } diff --git a/src/view/com/post-thread/PostRepostedBy.tsx b/src/view/com/post-thread/PostRepostedBy.tsx index 0d1e86ae..aeba9a34 100644 --- a/src/view/com/post-thread/PostRepostedBy.tsx +++ b/src/view/com/post-thread/PostRepostedBy.tsx @@ -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 @@ -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}) { ) } @@ -93,7 +87,6 @@ export function PostRepostedBy({uri}: {uri: string}) { onRefresh={onRefresh} onEndReached={onEndReached} onEndReachedThreshold={4} - ListHeaderComponent={} ListFooterComponent={ ) } diff --git a/src/view/com/profile/ProfileFollowers.tsx b/src/view/com/profile/ProfileFollowers.tsx index 94ca33e6..8318f13d 100644 --- a/src/view/com/profile/ProfileFollowers.tsx +++ b/src/view/com/profile/ProfileFollowers.tsx @@ -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 +function renderItem({ + item, + index, +}: { + item: ActorDefs.ProfileViewBasic + index: number +}) { + return ( + + ) } 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={} ListFooterComponent={ ) } diff --git a/src/view/com/profile/ProfileFollows.tsx b/src/view/com/profile/ProfileFollows.tsx index 9b447c95..de4346af 100644 --- a/src/view/com/profile/ProfileFollows.tsx +++ b/src/view/com/profile/ProfileFollows.tsx @@ -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 +function renderItem({ + item, + index, +}: { + item: ActorDefs.ProfileViewBasic + index: number +}) { + return ( + + ) } 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={} ListFooterComponent={ ) } diff --git a/src/view/com/util/Views.web.tsx b/src/view/com/util/Views.web.tsx index ed18c981..c4549dbc 100644 --- a/src/view/com/util/Views.web.tsx +++ b/src/view/com/util/Views.web.tsx @@ -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, diff --git a/src/view/screens/ProfileFollowers.tsx b/src/view/screens/ProfileFollowers.tsx index 6f8ecc2e..68447bd7 100644 --- a/src/view/screens/ProfileFollowers.tsx +++ b/src/view/screens/ProfileFollowers.tsx @@ -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 export const ProfileFollowersScreen = ({route}: Props) => { @@ -21,9 +25,10 @@ export const ProfileFollowersScreen = ({route}: Props) => { ) return ( - - + + + - + ) } diff --git a/src/view/screens/ProfileFollows.tsx b/src/view/screens/ProfileFollows.tsx index bdab2015..7cc10ffd 100644 --- a/src/view/screens/ProfileFollows.tsx +++ b/src/view/screens/ProfileFollows.tsx @@ -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 export const ProfileFollowsScreen = ({route}: Props) => { @@ -21,9 +25,10 @@ export const ProfileFollowsScreen = ({route}: Props) => { ) return ( - - + + + - + ) }