Rework the composer to a less buggy solution
This commit is contained in:
Paul Frazee
parent
05055e184d
commit
8ae6e67eea
10 changed files with 130 additions and 66 deletions
|
|
@ -1,233 +0,0 @@
|
|||
import React, {useEffect, useMemo, useState} from 'react'
|
||||
import {StyleSheet, Text, TouchableOpacity, View} from 'react-native'
|
||||
import {BottomSheetTextInput} from '@gorhom/bottom-sheet'
|
||||
import LinearGradient from 'react-native-linear-gradient'
|
||||
import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
|
||||
import * as GetUserFollows from '../../../third-party/api/src/types/app/bsky/getUserFollows'
|
||||
import * as Post from '../../../third-party/api/src/types/app/bsky/post'
|
||||
import {Autocomplete} from './composer/Autocomplete'
|
||||
import Toast from '../util/Toast'
|
||||
import ProgressCircle from '../util/ProgressCircle'
|
||||
import {useStores} from '../../../state'
|
||||
import * as apilib from '../../../state/lib/api'
|
||||
import {s, colors, gradients} from '../../lib/styles'
|
||||
|
||||
const MAX_TEXT_LENGTH = 256
|
||||
const WARNING_TEXT_LENGTH = 200
|
||||
const DANGER_TEXT_LENGTH = 255
|
||||
export const snapPoints = ['100%']
|
||||
|
||||
export function Component({
|
||||
replyTo,
|
||||
onPost,
|
||||
}: {
|
||||
replyTo?: Post.PostRef
|
||||
onPost?: () => void
|
||||
}) {
|
||||
const store = useStores()
|
||||
const [error, setError] = useState('')
|
||||
const [text, setText] = useState('')
|
||||
const [followedUsers, setFollowedUsers] = useState<
|
||||
undefined | GetUserFollows.OutputSchema['follows']
|
||||
>(undefined)
|
||||
const [autocompleteOptions, setAutocompleteOptions] = useState<string[]>([])
|
||||
|
||||
useEffect(() => {
|
||||
let aborted = false
|
||||
store.api.app.bsky
|
||||
.getUserFollows({
|
||||
user: store.me.did || '',
|
||||
})
|
||||
.then(res => {
|
||||
if (aborted) return
|
||||
setFollowedUsers(res.data.follows)
|
||||
})
|
||||
return () => {
|
||||
aborted = true
|
||||
}
|
||||
})
|
||||
|
||||
const onChangeText = (newText: string) => {
|
||||
if (newText.length > MAX_TEXT_LENGTH) {
|
||||
newText = newText.slice(0, MAX_TEXT_LENGTH)
|
||||
}
|
||||
setText(newText)
|
||||
|
||||
const prefix = extractTextAutocompletePrefix(newText)
|
||||
if (typeof prefix === 'string' && followedUsers) {
|
||||
setAutocompleteOptions(
|
||||
[prefix].concat(
|
||||
followedUsers
|
||||
.filter(user => user.name.startsWith(prefix))
|
||||
.map(user => user.name),
|
||||
),
|
||||
)
|
||||
} else if (autocompleteOptions) {
|
||||
setAutocompleteOptions([])
|
||||
}
|
||||
}
|
||||
const onPressCancel = () => {
|
||||
store.shell.closeModal()
|
||||
}
|
||||
const onPressPublish = async () => {
|
||||
setError('')
|
||||
if (text.trim().length === 0) {
|
||||
setError('Did you want to say anything?')
|
||||
return false
|
||||
}
|
||||
try {
|
||||
await apilib.post(store, text, replyTo)
|
||||
} catch (e: any) {
|
||||
console.error(`Failed to create post: ${e.toString()}`)
|
||||
setError(
|
||||
'Post failed to upload. Please check your Internet connection and try again.',
|
||||
)
|
||||
return
|
||||
}
|
||||
onPost?.()
|
||||
store.shell.closeModal()
|
||||
Toast.show(`Your ${replyTo ? 'reply' : 'post'} has been published`, {
|
||||
duration: Toast.durations.LONG,
|
||||
position: Toast.positions.TOP,
|
||||
shadow: true,
|
||||
animation: true,
|
||||
hideOnPress: true,
|
||||
})
|
||||
}
|
||||
const onSelectAutocompleteItem = (item: string) => {
|
||||
setText(replaceTextAutocompletePrefix(text, item))
|
||||
setAutocompleteOptions([])
|
||||
}
|
||||
|
||||
const progressColor =
|
||||
text.length > DANGER_TEXT_LENGTH
|
||||
? '#e60000'
|
||||
: text.length > WARNING_TEXT_LENGTH
|
||||
? '#f7c600'
|
||||
: undefined
|
||||
|
||||
const textDecorated = useMemo(() => {
|
||||
return (text || '').split(/(\s)/g).map((item, i) => {
|
||||
if (/^@[a-zA-Z0-9\.-]+$/g.test(item)) {
|
||||
return (
|
||||
<Text key={i} style={{color: colors.blue3}}>
|
||||
{item}
|
||||
</Text>
|
||||
)
|
||||
}
|
||||
return item
|
||||
})
|
||||
}, [text])
|
||||
|
||||
return (
|
||||
<View style={styles.outer}>
|
||||
<View style={styles.topbar}>
|
||||
<TouchableOpacity onPress={onPressCancel}>
|
||||
<Text style={[s.blue3, s.f16]}>Cancel</Text>
|
||||
</TouchableOpacity>
|
||||
<View style={s.flex1} />
|
||||
<TouchableOpacity onPress={onPressPublish}>
|
||||
<LinearGradient
|
||||
colors={[gradients.primary.start, gradients.primary.end]}
|
||||
start={{x: 0, y: 0}}
|
||||
end={{x: 1, y: 1}}
|
||||
style={styles.postBtn}>
|
||||
<Text style={[s.white, s.f16, s.bold]}>Post</Text>
|
||||
</LinearGradient>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
{error !== '' && (
|
||||
<View style={styles.errorLine}>
|
||||
<View style={styles.errorIcon}>
|
||||
<FontAwesomeIcon
|
||||
icon="exclamation"
|
||||
style={{color: colors.red4}}
|
||||
size={10}
|
||||
/>
|
||||
</View>
|
||||
<Text style={s.red4}>{error}</Text>
|
||||
</View>
|
||||
)}
|
||||
<BottomSheetTextInput
|
||||
multiline
|
||||
scrollEnabled
|
||||
autoFocus
|
||||
onChangeText={(text: string) => onChangeText(text)}
|
||||
placeholder={replyTo ? 'Write your reply' : "What's new?"}
|
||||
style={styles.textInput}>
|
||||
{textDecorated}
|
||||
</BottomSheetTextInput>
|
||||
<View style={[s.flexRow, s.pt10, s.pb10, s.pr5]}>
|
||||
<View style={s.flex1} />
|
||||
<View>
|
||||
<ProgressCircle
|
||||
color={progressColor}
|
||||
progress={text.length / MAX_TEXT_LENGTH}
|
||||
/>
|
||||
</View>
|
||||
</View>
|
||||
<Autocomplete
|
||||
active={autocompleteOptions.length > 0}
|
||||
items={autocompleteOptions}
|
||||
onSelect={onSelectAutocompleteItem}
|
||||
/>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
const atPrefixRegex = /@([\S]*)$/i
|
||||
function extractTextAutocompletePrefix(text: string) {
|
||||
const match = atPrefixRegex.exec(text)
|
||||
if (match) {
|
||||
return match[1]
|
||||
}
|
||||
return undefined
|
||||
}
|
||||
function replaceTextAutocompletePrefix(text: string, item: string) {
|
||||
return text.replace(atPrefixRegex, `@${item} `)
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
outer: {
|
||||
flexDirection: 'column',
|
||||
backgroundColor: '#fff',
|
||||
padding: 15,
|
||||
height: '100%',
|
||||
},
|
||||
topbar: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
paddingTop: 10,
|
||||
paddingBottom: 5,
|
||||
paddingHorizontal: 5,
|
||||
},
|
||||
postBtn: {
|
||||
borderRadius: 20,
|
||||
paddingHorizontal: 20,
|
||||
paddingVertical: 6,
|
||||
},
|
||||
errorLine: {
|
||||
flexDirection: 'row',
|
||||
backgroundColor: colors.red1,
|
||||
borderRadius: 6,
|
||||
paddingHorizontal: 8,
|
||||
paddingVertical: 6,
|
||||
marginVertical: 6,
|
||||
},
|
||||
errorIcon: {
|
||||
borderWidth: 1,
|
||||
borderColor: colors.red4,
|
||||
color: colors.red4,
|
||||
borderRadius: 30,
|
||||
width: 16,
|
||||
height: 16,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
marginRight: 5,
|
||||
},
|
||||
textInput: {
|
||||
flex: 1,
|
||||
padding: 5,
|
||||
fontSize: 18,
|
||||
},
|
||||
})
|
||||
|
|
@ -9,7 +9,6 @@ import * as models from '../../../state/models/shell'
|
|||
|
||||
import * as LinkActionsModal from './LinkActions'
|
||||
import * as SharePostModal from './SharePost.native'
|
||||
import * as ComposePostModal from './ComposePost'
|
||||
import * as EditProfile from './EditProfile'
|
||||
|
||||
const CLOSED_SNAPPOINTS = ['10%']
|
||||
|
|
@ -51,13 +50,6 @@ export const Modal = observer(function Modal() {
|
|||
{...(store.shell.activeModal as models.SharePostModel)}
|
||||
/>
|
||||
)
|
||||
} else if (store.shell.activeModal?.name === 'compose-post') {
|
||||
snapPoints = ComposePostModal.snapPoints
|
||||
element = (
|
||||
<ComposePostModal.Component
|
||||
{...(store.shell.activeModal as models.ComposePostModel)}
|
||||
/>
|
||||
)
|
||||
} else if (store.shell.activeModal?.name === 'edit-profile') {
|
||||
snapPoints = EditProfile.snapPoints
|
||||
element = (
|
||||
|
|
|
|||
|
|
@ -1,76 +0,0 @@
|
|||
import React, {useEffect} from 'react'
|
||||
import {
|
||||
useWindowDimensions,
|
||||
Text,
|
||||
TouchableOpacity,
|
||||
StyleSheet,
|
||||
} from 'react-native'
|
||||
import Animated, {
|
||||
useSharedValue,
|
||||
useAnimatedStyle,
|
||||
withTiming,
|
||||
interpolate,
|
||||
} from 'react-native-reanimated'
|
||||
import {colors} from '../../../lib/styles'
|
||||
|
||||
export function Autocomplete({
|
||||
active,
|
||||
items,
|
||||
onSelect,
|
||||
}: {
|
||||
active: boolean
|
||||
items: string[]
|
||||
onSelect: (item: string) => void
|
||||
}) {
|
||||
const winDim = useWindowDimensions()
|
||||
const positionInterp = useSharedValue<number>(0)
|
||||
|
||||
useEffect(() => {
|
||||
if (active) {
|
||||
positionInterp.value = withTiming(1, {duration: 250})
|
||||
} else {
|
||||
positionInterp.value = withTiming(0, {duration: 250})
|
||||
}
|
||||
}, [positionInterp, active])
|
||||
|
||||
const topAnimStyle = useAnimatedStyle(() => ({
|
||||
top: interpolate(
|
||||
positionInterp.value,
|
||||
[0, 1.0],
|
||||
[winDim.height, winDim.height / 4],
|
||||
),
|
||||
}))
|
||||
return (
|
||||
<Animated.View style={[styles.outer, topAnimStyle]}>
|
||||
{items.map((item, i) => (
|
||||
<TouchableOpacity
|
||||
key={i}
|
||||
style={styles.item}
|
||||
onPress={() => onSelect(item)}>
|
||||
<Text style={styles.itemText}>@{item}</Text>
|
||||
</TouchableOpacity>
|
||||
))}
|
||||
</Animated.View>
|
||||
)
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
outer: {
|
||||
position: 'absolute',
|
||||
left: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
backgroundColor: colors.white,
|
||||
borderTopWidth: 1,
|
||||
borderTopColor: colors.gray2,
|
||||
},
|
||||
item: {
|
||||
borderBottomWidth: 1,
|
||||
borderBottomColor: colors.gray1,
|
||||
paddingVertical: 16,
|
||||
paddingHorizontal: 16,
|
||||
},
|
||||
itemText: {
|
||||
fontSize: 16,
|
||||
},
|
||||
})
|
||||
Loading…
Add table
Add a link
Reference in a new issue