Skip to content

Commit 4efc432

Browse files
markhardingmarkharding
committed
Add a topbar to mobile feeds
1 parent f65f41a commit 4efc432

9 files changed

Lines changed: 361 additions & 203 deletions

File tree

‎apps/polycentric/src/common/components/layout/Layout.tsx‎

Lines changed: 20 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,10 @@
1-
import { Atoms, Breakpoints, typography, useTheme } from '@/src/common/theme';
1+
import {
2+
Atoms,
3+
Breakpoints,
4+
themes,
5+
typography,
6+
useTheme,
7+
} from '@/src/common/theme';
28
import { isWeb } from '@/src/common/util/platform';
39
import { Image } from 'expo-image';
410
import { ExternalPathString, Link } from 'expo-router';
@@ -26,6 +32,7 @@ import { Ionicons } from '@expo/vector-icons';
2632
import WEB_LOGO from '../../assets/images/WebLogo.png';
2733
import { FUTO_URL, openCompose } from '../../constants';
2834
import { useCurrentIdentity } from '../../lib/polycentric-hooks';
35+
import Topbar from './Topbar';
2936

3037
type MainProps = {
3138
children: ReactElement | ReactElement[];
@@ -86,7 +93,7 @@ function PrimaryColumn({ children }: PrimaryColumnProps) {
8693
style={[
8794
Atoms.flex_1,
8895
isWeb && Atoms.pb_lg,
89-
{
96+
isWeb && {
9097
maxWidth: 600,
9198
borderLeftColor: theme.palette.neutral_25,
9299
borderLeftWidth: 1,
@@ -119,6 +126,7 @@ function Screen({
119126
keyboardAvoiding = false,
120127
}: ScreenProps) {
121128
const insets = useSafeAreaInsets();
129+
const { theme } = useTheme();
122130

123131
showLeftSidebar = showLeftSidebar && isWeb;
124132

@@ -137,7 +145,15 @@ function Screen({
137145
return (
138146
<View
139147
testID="layout-screen"
140-
style={[Atoms.flex_row, Atoms.flex_1, { paddingTop: insets.top }]}
148+
style={[
149+
Atoms.flex_row,
150+
Atoms.flex_1,
151+
{ paddingTop: insets.top },
152+
!isWeb && {
153+
borderBottomWidth: 1,
154+
borderBottomColor: theme.palette.neutral_25,
155+
},
156+
]}
141157
dir="ltr"
142158
>
143159
{showLeftSidebar && <LeftSidebar />}
@@ -361,5 +377,6 @@ Screen.LeftSidebar = LeftSidebar;
361377
Screen.RightSidebar = RightSidebar;
362378
Screen.Main = Main;
363379
Screen.PrimaryColumn = PrimaryColumn;
380+
Screen.Topbar = Topbar;
364381

365382
export { Screen };

‎apps/polycentric/src/common/components/layout/Topbar.tsx‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import { Link } from 'expo-router';
2+
import { View } from 'react-native';
3+
import { Atoms } from '../../theme';
4+
import { Image } from 'expo-image';
5+
import WEB_LOGO from '../../assets/images/WebLogo.png';
6+
7+
export default function Topbar() {
8+
return (
9+
<View style={[Atoms.w_full, Atoms.align_center, Atoms.flex_col]}>
10+
<Link
11+
href="/"
12+
style={[
13+
Atoms.py_lg,
14+
Atoms.flex,
15+
Atoms.align_center,
16+
17+
Atoms.justify_center,
18+
]}
19+
>
20+
<Image
21+
source={WEB_LOGO}
22+
contentFit="contain"
23+
style={{ width: 30, height: 30 }}
24+
/>
25+
</Link>
26+
</View>
27+
);
28+
}

‎apps/polycentric/src/common/theme/provider.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -50,8 +50,8 @@ export function ThemeProvider({ children }: PropsWithChildren) {
5050
dark: theme.scheme === 'dark',
5151
colors: {
5252
primary: theme.palette.primary_500,
53-
background: theme.palette.neutral_25,
54-
card: theme.palette.neutral_0,
53+
background: theme.palette.neutral_0,
54+
card: theme.palette.neutral_25,
5555
text: theme.palette.neutral_1000,
5656
border: theme.palette.neutral_200,
5757
notification: theme.palette.negative_500,

‎apps/polycentric/src/features/composer/ComposerInput.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@ export function ComposerInput() {
4242
{
4343
borderBottomWidth: 1,
4444
borderBottomColor: withHexOpacity(theme.palette.neutral_500, '40'),
45-
backgroundColor: theme.palette.background_primary,
45+
backgroundColor: theme.palette.neutral_0,
4646
overflow: 'hidden',
4747
},
4848
]}

‎apps/polycentric/src/features/feed/ExploreScreen.tsx‎

Lines changed: 63 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,86 @@
11
import { Ionicons } from '@expo/vector-icons';
22
import { Screen } from '@/src/common/components/layout';
33
import { Fab } from '@/src/common/components';
4-
import { FeedViewer, type FeedType } from '@/src/features/post';
4+
import { Text } from '@/src/common/components/primitives';
5+
import { FeedViewer } from '@/src/features/post';
56
import { useExploreFeed } from './hooks/useExploreFeed';
67
import { openCompose } from '@/src/common/constants';
78
import { isWeb } from '@/src/common/util/platform';
9+
import { Atoms, useTheme } from '@/src/common/theme';
10+
import { ActivityIndicator, RefreshControl, View } from 'react-native';
811

912
export default function ExploreScreen() {
13+
const { theme } = useTheme();
1014
const showComposeFab = !isWeb;
1115

12-
const feed = useExploreFeed({
13-
enabled: true,
14-
});
16+
const feed = useExploreFeed({ enabled: true });
1517

16-
const handleFabPress = () => {
17-
openCompose();
18-
};
18+
if (feed.error) {
19+
return (
20+
<Screen>
21+
<Screen.PrimaryColumn>
22+
<View
23+
style={[
24+
Atoms.flex_1,
25+
Atoms.items_center,
26+
Atoms.justify_center,
27+
Atoms.p_lg,
28+
]}
29+
>
30+
<Text color="neutral_500">Failed to load feed</Text>
31+
</View>
32+
</Screen.PrimaryColumn>
33+
</Screen>
34+
);
35+
}
1936

2037
return (
2138
<Screen>
2239
<Screen.PrimaryColumn>
2340
<FeedViewer
24-
items={feed.items}
25-
isLoading={feed.isLoading}
26-
error={feed.error}
27-
onRefresh={feed.refresh}
28-
onEndReached={feed.loadMore}
29-
hasMore={feed.hasMore}
30-
bottomPadding={0}
41+
data={feed.items}
42+
ListHeaderComponent={!isWeb ? Screen.Topbar : undefined}
43+
ListEmptyComponent={
44+
!feed.isLoading ? (
45+
<View
46+
style={[
47+
Atoms.flex_1,
48+
Atoms.items_center,
49+
Atoms.justify_center,
50+
Atoms.p_lg,
51+
]}
52+
>
53+
<Text color="neutral_500">No posts yet</Text>
54+
</View>
55+
) : null
56+
}
57+
ListFooterComponent={
58+
feed.hasMore && feed.items.length > 0 ? (
59+
<View style={[Atoms.items_center, Atoms.p_lg]}>
60+
<ActivityIndicator
61+
size="small"
62+
color={theme.palette.neutral_500}
63+
accessibilityLabel="Loading more posts"
64+
/>
65+
</View>
66+
) : null
67+
}
68+
onEndReached={feed.hasMore ? feed.loadMore : undefined}
69+
onEndReachedThreshold={0.5}
70+
refreshControl={
71+
!isWeb ? (
72+
<RefreshControl
73+
refreshing={feed.isLoading}
74+
onRefresh={feed.refresh}
75+
/>
76+
) : undefined
77+
}
78+
showsVerticalScrollIndicator={false}
3179
/>
3280
{showComposeFab ? (
3381
<Fab
3482
title="New Post"
35-
onPress={handleFabPress}
83+
onPress={openCompose}
3684
icon={() => <Ionicons name="add-circle" size={22} color="white" />}
3785
/>
3886
) : null}

‎apps/polycentric/src/features/feed/FeedScreen.tsx‎

Lines changed: 70 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,40 +1,94 @@
11
import { Ionicons } from '@expo/vector-icons';
22
import { Screen } from '@/src/common/components/layout';
33
import { Fab } from '@/src/common/components';
4-
import { FeedViewer, type FeedType } from '@/src/features/post';
4+
import { Text } from '@/src/common/components/primitives';
5+
import { FeedViewer } from '@/src/features/post';
56
import { ComposerInput } from '@/src/features/composer';
67
import { useFollowingFeed } from './hooks/useFollowingFeed';
78
import { openCompose } from '@/src/common/constants';
89
import { isWeb } from '@/src/common/util/platform';
10+
import { Atoms, useTheme } from '@/src/common/theme';
11+
import { ActivityIndicator, RefreshControl, View } from 'react-native';
12+
13+
const ListHeader = () => (
14+
<>
15+
{!isWeb ? <Screen.Topbar /> : null}
16+
<ComposerInput />
17+
</>
18+
);
919

1020
export default function FeedScreen() {
21+
const { theme } = useTheme();
1122
const showComposeFab = !isWeb;
1223

13-
const feed = useFollowingFeed({
14-
enabled: true,
15-
});
24+
const feed = useFollowingFeed({ enabled: true });
1625

17-
const handleFabPress = () => {
18-
openCompose();
19-
};
26+
if (feed.error) {
27+
return (
28+
<Screen>
29+
<Screen.PrimaryColumn>
30+
<View
31+
style={[
32+
Atoms.flex_1,
33+
Atoms.items_center,
34+
Atoms.justify_center,
35+
Atoms.p_lg,
36+
]}
37+
>
38+
<Text color="neutral_500">Failed to load feed</Text>
39+
</View>
40+
</Screen.PrimaryColumn>
41+
</Screen>
42+
);
43+
}
2044

2145
return (
2246
<Screen>
2347
<Screen.PrimaryColumn>
24-
<ComposerInput />
2548
<FeedViewer
26-
items={feed.items}
27-
isLoading={feed.isLoading}
28-
error={feed.error}
29-
onRefresh={feed.refresh}
30-
onEndReached={feed.loadMore}
31-
hasMore={feed.hasMore}
32-
bottomPadding={0}
49+
data={feed.items}
50+
ListHeaderComponent={ListHeader}
51+
ListEmptyComponent={
52+
!feed.isLoading ? (
53+
<View
54+
style={[
55+
Atoms.flex_1,
56+
Atoms.items_center,
57+
Atoms.justify_center,
58+
Atoms.p_lg,
59+
]}
60+
>
61+
<Text color="neutral_500">No posts yet</Text>
62+
</View>
63+
) : null
64+
}
65+
ListFooterComponent={
66+
feed.hasMore && feed.items.length > 0 ? (
67+
<View style={[Atoms.items_center, Atoms.p_lg]}>
68+
<ActivityIndicator
69+
size="small"
70+
color={theme.palette.neutral_500}
71+
accessibilityLabel="Loading more posts"
72+
/>
73+
</View>
74+
) : null
75+
}
76+
onEndReached={feed.hasMore ? feed.loadMore : undefined}
77+
onEndReachedThreshold={0.5}
78+
refreshControl={
79+
!isWeb ? (
80+
<RefreshControl
81+
refreshing={feed.isLoading}
82+
onRefresh={feed.refresh}
83+
/>
84+
) : undefined
85+
}
86+
showsVerticalScrollIndicator={false}
3387
/>
3488
{showComposeFab ? (
3589
<Fab
3690
title="New Post"
37-
onPress={handleFabPress}
91+
onPress={openCompose}
3892
icon={() => <Ionicons name="add-circle" size={22} color="white" />}
3993
/>
4094
) : null}

0 commit comments

Comments
 (0)