forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 💫
Remove indirection when rendering composer state (#5954)
* Simplify onPressCancel dismiss condition
* Remove alias variables
* Move grapheme length calculation to reducer
+40
-66
+36
-66
src/view/com/composer/Composer.tsx
+36
-66
src/view/com/composer/Composer.tsx
···
59
59
import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries'
60
60
import {logEvent} from '#/lib/statsig/statsig'
61
61
import {cleanError} from '#/lib/strings/errors'
62
-
import {shortenLinks} from '#/lib/strings/rich-text-manip'
63
62
import {colors, s} from '#/lib/styles'
64
63
import {logger} from '#/logger'
65
64
import {isAndroid, isIOS, isNative, isWeb} from '#/platform/detection'
···
128
127
onPressCancel: () => void
129
128
}
130
129
131
-
const NO_IMAGES: ComposerImage[] = []
132
-
133
130
type Props = ComposerOpts
134
131
export const ComposePost = ({
135
132
replyTo,
···
178
175
})
179
176
}, [])
180
177
181
-
const richtext = draft.richtext
182
-
let quote: string | undefined
183
-
if (draft.embed.quote) {
184
-
quote = draft.embed.quote.uri
185
-
}
186
-
let images = NO_IMAGES
187
-
if (draft.embed.media?.type === 'images') {
188
-
images = draft.embed.media.images
189
-
}
190
178
let videoState: VideoState | NoVideoState = NO_VIDEO
191
179
if (draft.embed.media?.type === 'video') {
192
180
videoState = draft.embed.media.video
193
181
}
194
-
let extGif: Gif | undefined
195
-
let extGifAlt: string | undefined
196
-
if (draft.embed.media?.type === 'gif') {
197
-
extGif = draft.embed.media.gif
198
-
extGifAlt = draft.embed.media.alt
199
-
}
200
-
let extLink: string | undefined
201
-
if (draft.embed.link) {
202
-
extLink = draft.embed.link.uri
203
-
}
204
-
205
-
const graphemeLength = useMemo(() => {
206
-
return shortenLinks(richtext).graphemeLength
207
-
}, [richtext])
208
182
209
183
const selectVideo = React.useCallback(
210
184
(asset: ImagePickerAsset) => {
···
252
226
253
227
const onPressCancel = useCallback(() => {
254
228
if (
255
-
graphemeLength > 0 ||
256
-
images.length !== 0 ||
257
-
extGif ||
258
-
videoState.status !== 'idle'
229
+
draft.shortenedGraphemeLength > 0 ||
230
+
draft.embed.media ||
231
+
draft.embed.link
259
232
) {
260
233
closeAllDialogs()
261
234
Keyboard.dismiss()
···
263
236
} else {
264
237
onClose()
265
238
}
266
-
}, [
267
-
extGif,
268
-
graphemeLength,
269
-
images.length,
270
-
closeAllDialogs,
271
-
discardPromptControl,
272
-
onClose,
273
-
videoState.status,
274
-
])
239
+
}, [draft, closeAllDialogs, discardPromptControl, onClose])
275
240
276
241
useImperativeHandle(cancelRef, () => ({onPressCancel}))
277
242
···
296
261
}, [onPressCancel, closeAllDialogs, closeAllModals])
297
262
298
263
const isAltTextRequiredAndMissing = useMemo(() => {
299
-
if (!requireAltTextEnabled) return false
300
-
301
-
if (images.some(img => img.alt === '')) return true
302
-
303
-
if (extGif && !extGifAlt) return true
304
-
264
+
const media = draft.embed.media
265
+
if (!requireAltTextEnabled || !media) {
266
+
return false
267
+
}
268
+
if (media.type === 'images' && media.images.some(img => !img.alt)) {
269
+
return true
270
+
}
271
+
if (media.type === 'gif' && !media.alt) {
272
+
return true
273
+
}
305
274
return false
306
-
}, [images, extGifAlt, extGif, requireAltTextEnabled])
275
+
}, [draft.embed.media, requireAltTextEnabled])
307
276
308
277
const isEmptyPost =
309
-
richtext.text.trim().length === 0 &&
310
-
images.length === 0 &&
311
-
!extLink &&
312
-
!extGif &&
313
-
!quote &&
314
-
videoState.status === 'idle'
278
+
draft.richtext.text.trim().length === 0 &&
279
+
!draft.embed.link &&
280
+
!draft.embed.media &&
281
+
!draft.embed.quote
315
282
316
283
const canPost =
317
-
graphemeLength <= MAX_GRAPHEME_LENGTH &&
284
+
draft.shortenedGraphemeLength <= MAX_GRAPHEME_LENGTH &&
318
285
!isAltTextRequiredAndMissing &&
319
286
!isEmptyPost &&
320
287
videoState.status !== 'error'
···
341
308
setError('')
342
309
setIsPublishing(true)
343
310
311
+
const imageCount =
312
+
draft.embed.media?.type === 'images'
313
+
? draft.embed.media.images.length
314
+
: 0
315
+
344
316
let postUri
345
317
try {
346
318
postUri = (
···
365
337
} catch (e: any) {
366
338
logger.error(e, {
367
339
message: `Composer: create post failed`,
368
-
hasImages: images.length > 0,
340
+
hasImages: imageCount > 0,
369
341
})
370
342
371
343
let err = cleanError(e.message)
···
382
354
} finally {
383
355
if (postUri) {
384
356
logEvent('post:create', {
385
-
imageCount: images.length,
386
-
isReply: replyTo != null,
387
-
hasLink: extLink != null,
388
-
hasQuote: quote != null,
357
+
imageCount,
358
+
isReply: !!replyTo,
359
+
hasLink: !!draft.embed.link,
360
+
hasQuote: !!draft.embed.quote,
389
361
langs: langPrefs.postLanguage,
390
362
logContext: 'Composer',
391
363
})
···
422
394
_,
423
395
agent,
424
396
composerState.thread,
425
-
extLink,
426
-
images,
397
+
draft,
427
398
canPost,
428
399
isPublishing,
429
400
langPrefs.postLanguage,
430
401
onClose,
431
402
onPost,
432
-
quote,
433
403
initQuote,
434
404
replyTo,
435
405
setLangPrefs,
···
512
482
/>
513
483
</Animated.ScrollView>
514
484
515
-
<SuggestedLanguage text={richtext.text} />
485
+
<SuggestedLanguage text={draft.richtext.text} />
516
486
517
487
<ComposerPills
518
488
isReply={!!replyTo}
···
524
494
525
495
<ComposerFooter
526
496
draft={draft}
527
-
graphemeLength={graphemeLength}
528
497
dispatch={dispatch}
529
498
onError={setError}
530
499
onEmojiButtonPress={onEmojiButtonPress}
···
930
899
function ComposerFooter({
931
900
draft,
932
901
dispatch,
933
-
graphemeLength,
934
902
onEmojiButtonPress,
935
903
onError,
936
904
onSelectVideo,
937
905
}: {
938
906
draft: PostDraft
939
907
dispatch: (action: PostAction) => void
940
-
graphemeLength: number
941
908
onEmojiButtonPress: () => void
942
909
onError: (error: string) => void
943
910
onSelectVideo: (asset: ImagePickerAsset) => void
···
1017
984
</View>
1018
985
<View style={[a.flex_row, a.align_center, a.justify_between]}>
1019
986
<SelectLangBtn />
1020
-
<CharProgress count={graphemeLength} style={{width: 65}} />
987
+
<CharProgress
988
+
count={draft.shortenedGraphemeLength}
989
+
style={{width: 65}}
990
+
/>
1021
991
</View>
1022
992
</View>
1023
993
)
+4
src/view/com/composer/state/composer.ts
+4
src/view/com/composer/state/composer.ts
···
3
3
4
4
import {SelfLabel} from '#/lib/moderation'
5
5
import {insertMentionAt} from '#/lib/strings/mention-manip'
6
+
import {shortenLinks} from '#/lib/strings/rich-text-manip'
6
7
import {
7
8
isBskyPostUrl,
8
9
postUriToRelativePath,
···
51
52
richtext: RichText
52
53
labels: SelfLabel[]
53
54
embed: EmbedDraft
55
+
shortenedGraphemeLength: number
54
56
}
55
57
56
58
export type PostAction =
···
137
139
return {
138
140
...state,
139
141
richtext: action.richtext,
142
+
shortenedGraphemeLength: shortenLinks(action.richtext).graphemeLength,
140
143
}
141
144
}
142
145
case 'update_labels': {
···
425
428
posts: [
426
429
{
427
430
richtext: initRichText,
431
+
shortenedGraphemeLength: 0,
428
432
labels: [],
429
433
embed: {
430
434
quote,