forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 💫
Some styling of empty list chats states (#4124)
authored by
Eric Bailey
and committed by
GitHub
70019e73
31a716d2
+84
-27
+84
-27
src/screens/Messages/List/index.tsx
+84
-27
src/screens/Messages/List/index.tsx
···
14
14
import {List} from '#/view/com/util/List'
15
15
import {ViewHeader} from '#/view/com/util/ViewHeader'
16
16
import {CenteredView} from '#/view/com/util/Views'
17
-
import {atoms as a, useBreakpoints, useTheme} from '#/alf'
17
+
import {atoms as a, useBreakpoints, useTheme, web} from '#/alf'
18
18
import {Button, ButtonIcon, ButtonText} from '#/components/Button'
19
19
import {DialogControlProps, useDialogControl} from '#/components/Dialog'
20
20
import {MessagesNUX} from '#/components/dms/MessagesNUX'
21
21
import {NewChat} from '#/components/dms/NewChatDialog'
22
22
import {useRefreshOnFocus} from '#/components/hooks/useRefreshOnFocus'
23
+
import {ArrowRotateCounterClockwise_Stroke2_Corner0_Rounded as Retry} from '#/components/icons/ArrowRotateCounterClockwise'
24
+
import {CircleInfo_Stroke2_Corner0_Rounded as CircleInfo} from '#/components/icons/CircleInfo'
25
+
import {Message_Stroke2_Corner0_Rounded as Message} from '#/components/icons/Message'
23
26
import {PlusLarge_Stroke2_Corner0_Rounded as Plus} from '#/components/icons/Plus'
24
27
import {SettingsSliderVertical_Stroke2_Corner0_Rounded as SettingsSlider} from '#/components/icons/SettingsSlider'
25
28
import {Link} from '#/components/Link'
26
-
import {ListFooter, ListMaybePlaceholder} from '#/components/Lists'
29
+
import {ListFooter} from '#/components/Lists'
30
+
import {Loader} from '#/components/Loader'
27
31
import {Text} from '#/components/Typography'
28
32
import {ClipClopGate} from '../gate'
29
33
import {ChatListItem} from './ChatListItem'
···
82
86
isFetchingNextPage,
83
87
hasNextPage,
84
88
fetchNextPage,
89
+
isError,
85
90
error,
86
91
refetch,
87
92
} = useListConvos({refetchInterval: 15_000})
88
93
89
94
useRefreshOnFocus(refetch)
90
-
91
-
const isError = !!error
92
95
93
96
const conversations = useMemo(() => {
94
97
if (data?.pages) {
···
133
136
return (
134
137
<View style={a.flex_1}>
135
138
<MessagesNUX />
136
-
{gtMobile ? (
137
-
<CenteredView sideBorders>
139
+
140
+
<CenteredView sideBorders={gtMobile} style={[a.h_full_vh]}>
141
+
{gtMobile ? (
138
142
<DesktopHeader
139
143
newChatControl={newChatControl}
140
144
onNavigateToSettings={onNavigateToSettings}
141
145
/>
142
-
</CenteredView>
143
-
) : (
144
-
<ViewHeader
145
-
title={_(msg`Messages`)}
146
-
renderButton={renderButton}
147
-
showBorder
148
-
canGoBack={false}
149
-
/>
146
+
) : (
147
+
<ViewHeader
148
+
title={_(msg`Messages`)}
149
+
renderButton={renderButton}
150
+
showBorder
151
+
canGoBack={false}
152
+
/>
153
+
)}
154
+
155
+
{isLoading ? (
156
+
<View style={[a.align_center, a.pt_3xl, web({paddingTop: '10vh'})]}>
157
+
<Loader size="xl" />
158
+
</View>
159
+
) : (
160
+
<>
161
+
{isError ? (
162
+
<>
163
+
<View style={[a.pt_3xl, a.align_center]}>
164
+
<CircleInfo
165
+
width={48}
166
+
fill={t.atoms.border_contrast_low.borderColor}
167
+
/>
168
+
<Text style={[a.pt_md, a.pb_sm, a.text_2xl, a.font_bold]}>
169
+
<Trans>Whoops!</Trans>
170
+
</Text>
171
+
<Text
172
+
style={[
173
+
a.text_md,
174
+
a.pb_xl,
175
+
a.text_center,
176
+
a.leading_snug,
177
+
t.atoms.text_contrast_medium,
178
+
{maxWidth: 360},
179
+
]}>
180
+
{cleanError(error)}
181
+
</Text>
182
+
183
+
<Button
184
+
label={_(msg`Reload conversations`)}
185
+
size="medium"
186
+
color="secondary"
187
+
variant="solid"
188
+
onPress={() => refetch()}>
189
+
<ButtonText>Retry</ButtonText>
190
+
<ButtonIcon icon={Retry} position="right" />
191
+
</Button>
192
+
</View>
193
+
</>
194
+
) : (
195
+
<>
196
+
<View style={[a.pt_3xl, a.align_center]}>
197
+
<Message width={48} fill={t.palette.primary_500} />
198
+
<Text style={[a.pt_md, a.pb_sm, a.text_2xl, a.font_bold]}>
199
+
<Trans>Nothing here</Trans>
200
+
</Text>
201
+
<Text
202
+
style={[
203
+
a.text_md,
204
+
a.pb_xl,
205
+
a.text_center,
206
+
a.leading_snug,
207
+
t.atoms.text_contrast_medium,
208
+
]}>
209
+
<Trans>You have no conversations yet. Start one!</Trans>
210
+
</Text>
211
+
</View>
212
+
</>
213
+
)}
214
+
</>
215
+
)}
216
+
</CenteredView>
217
+
218
+
{!isLoading && !isError && (
219
+
<NewChat onNewChat={onNewChat} control={newChatControl} />
150
220
)}
151
-
{!isError && <NewChat onNewChat={onNewChat} control={newChatControl} />}
152
-
<ListMaybePlaceholder
153
-
isLoading={isLoading}
154
-
isError={isError}
155
-
emptyType="results"
156
-
emptyTitle={_(msg`No chats yet`)}
157
-
emptyMessage={_(
158
-
msg`You have no chats yet. Start a conversation with someone!`,
159
-
)}
160
-
errorMessage={cleanError(error)}
161
-
onRetry={isError ? refetch : undefined}
162
-
hideBackButton
163
-
/>
164
221
</View>
165
222
)
166
223
}