Rewrite the post composer as a modal

zio/stable
Paul Frazee 2022-09-05 14:16:48 -05:00
parent 41bbe2b60b
commit cb310ab1c1
12 changed files with 207 additions and 144 deletions

View File

@ -16,15 +16,23 @@ export class SharePostModel {
}
}
export class ComposePostModel {
name = 'compose-post'
constructor(public replyTo?: string) {
makeAutoObservable(this)
}
}
export class ShellModel {
isModalActive = false
activeModal: LinkActionsModel | SharePostModel | undefined
activeModal: LinkActionsModel | SharePostModel | ComposePostModel | undefined
constructor() {
makeAutoObservable(this)
}
openModal(modal: LinkActionsModel | SharePostModel) {
openModal(modal: LinkActionsModel | SharePostModel | ComposePostModel) {
this.isModalActive = true
this.activeModal = modal
}

View File

@ -1,90 +0,0 @@
import React, {useState, forwardRef, useImperativeHandle} from 'react'
import {KeyboardAvoidingView, StyleSheet, TextInput, View} from 'react-native'
import Toast from '../util/Toast'
import ProgressCircle from '../util/ProgressCircle'
import {useStores} from '../../../state'
import {s} from '../../lib/styles'
import * as apilib from '../../../state/lib/api'
const MAX_TEXT_LENGTH = 256
const WARNING_TEXT_LENGTH = 200
const DANGER_TEXT_LENGTH = 255
export const Composer = forwardRef(function Composer(
{
replyTo,
}: {
replyTo: string | undefined
},
ref,
) {
const store = useStores()
const [text, setText] = useState('')
const onChangeText = (newText: string) => {
if (newText.length > MAX_TEXT_LENGTH) {
setText(newText.slice(0, MAX_TEXT_LENGTH))
} else {
setText(newText)
}
}
useImperativeHandle(ref, () => ({
async publish() {
if (text.trim().length === 0) {
return false
}
await apilib.post(store.api, 'alice.com', text, replyTo)
Toast.show(`Your ${replyTo ? 'reply' : 'post'} has been created`, {
duration: Toast.durations.LONG,
position: Toast.positions.TOP,
shadow: true,
animation: true,
hideOnPress: true,
})
return true
},
}))
const progressColor =
text.length > DANGER_TEXT_LENGTH
? '#e60000'
: text.length > WARNING_TEXT_LENGTH
? '#f7c600'
: undefined
return (
<KeyboardAvoidingView style={styles.outer} behavior="padding">
<TextInput
multiline
scrollEnabled
onChangeText={text => onChangeText(text)}
value={text}
placeholder={replyTo ? 'Write your reply' : "What's new in the scene?"}
style={styles.textInput}
/>
<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>
</KeyboardAvoidingView>
)
})
const styles = StyleSheet.create({
outer: {
flexDirection: 'column',
backgroundColor: '#fff',
padding: 10,
height: '100%',
},
textInput: {
flex: 1,
padding: 10,
},
})

View File

@ -4,6 +4,7 @@ import {Image, StyleSheet, Text, TouchableOpacity, View} from 'react-native'
import {bsky, AdxUri} from '@adxp/mock-api'
import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
import {FeedViewItemModel} from '../../../state/models/feed-view'
import {ComposePostModel} from '../../../state/models/shell'
import {Link} from '../util/Link'
import {PostDropdownBtn} from '../util/DropdownBtn'
import {s, colors} from '../../lib/styles'
@ -28,7 +29,7 @@ export const FeedItem = observer(function FeedItem({
const authorHref = `/profile/${item.author.name}`
const onPressReply = () => {
store.nav.navigate('/composer')
store.shell.openModal(new ComposePostModel(item.uri))
}
const onPressToggleRepost = () => {
item

View File

@ -0,0 +1,165 @@
import React, {useState} from 'react'
import {
KeyboardAvoidingView,
StyleSheet,
Text,
TextInput,
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 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}: {replyTo?: string}) {
const store = useStores()
const [text, setText] = useState('')
const [error, setError] = useState('')
const onChangeText = (newText: string) => {
if (newText.length > MAX_TEXT_LENGTH) {
setText(newText.slice(0, MAX_TEXT_LENGTH))
} else {
setText(newText)
}
}
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.api, 'alice.com', 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
}
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 progressColor =
text.length > DANGER_TEXT_LENGTH
? '#e60000'
: text.length > WARNING_TEXT_LENGTH
? '#f7c600'
: undefined
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.semiBold]}>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)}
value={text}
placeholder={replyTo ? 'Write your reply' : "What's new?"}
style={styles.textInput}
/>
<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>
</View>
)
}
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,
},
})

View File

@ -5,8 +5,11 @@ import BottomSheet from '@gorhom/bottom-sheet'
import {useStores} from '../../../state'
import {createCustomBackdrop} from '../util/BottomSheetCustomBackdrop'
import * as models from '../../../state/models/shell'
import * as LinkActionsModal from './LinkActions'
import * as SharePostModal from './SharePost.native'
import * as ComposePostModal from './ComposePost'
export const Modal = observer(function Modal() {
const store = useStores()
@ -28,10 +31,25 @@ export const Modal = observer(function Modal() {
let snapPoints, element
if (store.shell.activeModal?.name === 'link-actions') {
snapPoints = LinkActionsModal.snapPoints
element = <LinkActionsModal.Component {...store.shell.activeModal} />
element = (
<LinkActionsModal.Component
{...(store.shell.activeModal as models.LinkActionsModel)}
/>
)
} else if (store.shell.activeModal?.name === 'share-post') {
snapPoints = SharePostModal.snapPoints
element = <SharePostModal.Component {...store.shell.activeModal} />
element = (
<SharePostModal.Component
{...(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 {
return <View />
}
@ -41,6 +59,7 @@ export const Modal = observer(function Modal() {
ref={bottomSheetRef}
snapPoints={snapPoints}
enablePanDownToClose
keyboardBehavior="fillParent"
backdropComponent={createCustomBackdrop(onClose)}
onChange={onShareBottomSheetChange}>
{element}

View File

@ -4,6 +4,7 @@ import {Image, StyleSheet, Text, TouchableOpacity, View} from 'react-native'
import {bsky, AdxUri} from '@adxp/mock-api'
import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
import {PostThreadViewPostModel} from '../../../state/models/post-thread-view'
import {ComposePostModel} from '../../../state/models/shell'
import {Link} from '../util/Link'
import {PostDropdownBtn} from '../util/DropdownBtn'
import {s, colors} from '../../lib/styles'
@ -41,7 +42,7 @@ export const PostThreadItem = observer(function PostThreadItem({
const repostsTitle = 'Reposts of this post'
const onPressReply = () => {
store.nav.navigate(`/composer?replyTo=${item.uri}`)
store.shell.openModal(new ComposePostModel(item.uri))
}
const onPressToggleRepost = () => {
item

View File

@ -11,6 +11,7 @@ import {
} from 'react-native'
import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
import {PostThreadViewModel} from '../../../state/models/post-thread-view'
import {ComposePostModel} from '../../../state/models/shell'
import {Link} from '../util/Link'
import {useStores} from '../../../state'
import {s, colors} from '../../lib/styles'
@ -63,7 +64,7 @@ export const Post = observer(function Post({uri}: {uri: string}) {
const authorHref = `/profile/${item.author.name}`
const authorTitle = item.author.name
const onPressReply = () => {
store.nav.navigate(`/composer?replyTo=${item.uri}`)
store.shell.openModal(new ComposePostModel(item.uri))
}
const onPressToggleRepost = () => {
item

View File

@ -14,6 +14,7 @@ import {faCheck} from '@fortawesome/free-solid-svg-icons/faCheck'
import {faClone} from '@fortawesome/free-regular-svg-icons/faClone'
import {faComment} from '@fortawesome/free-regular-svg-icons/faComment'
import {faEllipsis} from '@fortawesome/free-solid-svg-icons/faEllipsis'
import {faExclamation} from '@fortawesome/free-solid-svg-icons/faExclamation'
import {faGear} from '@fortawesome/free-solid-svg-icons/faGear'
import {faHeart} from '@fortawesome/free-regular-svg-icons/faHeart'
import {faHeart as fasHeart} from '@fortawesome/free-solid-svg-icons/faHeart'
@ -46,6 +47,7 @@ export function setup() {
faClone,
faComment,
faEllipsis,
faExclamation,
faGear,
faHeart,
fasHeart,

View File

@ -6,7 +6,6 @@ import {Notifications} from './screens/Notifications'
import {Login} from './screens/Login'
import {Signup} from './screens/Signup'
import {NotFound} from './screens/NotFound'
import {Composer} from './screens/Composer'
import {PostThread} from './screens/PostThread'
import {PostLikedBy} from './screens/PostLikedBy'
import {PostRepostedBy} from './screens/PostRepostedBy'
@ -48,7 +47,6 @@ export const routes: Route[] = [
'retweet',
r('/profile/(?<name>[^/]+)/post/(?<recordKey>[^/]+)/reposted-by'),
],
[Composer, 'pen-nib', r('/compose')],
[Login, ['far', 'user'], r('/login')],
[Signup, ['far', 'user'], r('/signup')],
]

View File

@ -1,43 +0,0 @@
import React, {useLayoutEffect, useRef} from 'react'
// import {Text, TouchableOpacity} from 'react-native'
// import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
import {Composer as ComposerComponent} from '../com/composer/Composer'
import {ScreenParams} from '../routes'
export const Composer = ({params}: ScreenParams) => {
const {replyTo} = params
const ref = useRef<{publish: () => Promise<boolean>}>()
// TODO
// useLayoutEffect(() => {
// navigation.setOptions({
// headerShown: true,
// headerTitle: replyTo ? 'Reply' : 'New Post',
// headerLeft: () => (
// <TouchableOpacity onPress={() => navigation.goBack()}>
// <FontAwesomeIcon icon="x" />
// </TouchableOpacity>
// ),
// headerRight: () => (
// <TouchableOpacity
// onPress={() => {
// if (!ref.current) {
// return
// }
// ref.current.publish().then(
// posted => {
// if (posted) {
// navigation.goBack()
// }
// },
// err => console.error('Failed to create post', err),
// )
// }}>
// <Text>Post</Text>
// </TouchableOpacity>
// ),
// })
// }, [navigation, replyTo, ref])
return <ComposerComponent ref={ref} replyTo={replyTo} />
}

View File

@ -5,6 +5,7 @@ import {Feed} from '../com/feed/Feed'
import {FAB} from '../com/util/FloatingActionButton'
import {useStores} from '../../state'
import {FeedViewModel} from '../../state/models/feed-view'
import {ComposePostModel} from '../../state/models/shell'
import {ScreenParams} from '../routes'
import {s} from '../lib/styles'
@ -30,7 +31,7 @@ export const Home = observer(function Home({visible}: ScreenParams) {
}, [visible, store])
const onComposePress = () => {
store.nav.navigate('/compose')
store.shell.openModal(new ComposePostModel())
}
return (

View File

@ -1,7 +1,7 @@
Paul's todo list
- Composer
- Check on navigation stack during a bunch of replies
- Update the view after creating a post
- Search view
- *
- Linking