Add post composer

zio/stable
Paul Frazee 2022-07-22 16:06:51 -05:00
parent ce83648f9d
commit 7f04ac172e
24 changed files with 312 additions and 62 deletions

View File

@ -35,6 +35,7 @@
"react-dom": "17.0.2",
"react-native": "0.68.2",
"react-native-inappbrowser-reborn": "^3.6.3",
"react-native-progress": "^5.0.0",
"react-native-safe-area-context": "^4.3.1",
"react-native-screens": "^3.13.1",
"react-native-svg": "^12.4.0",

View File

@ -28,12 +28,46 @@ export async function setup(adx: AdxClient) {
)
}
export async function post(
adx: AdxClient,
user: string,
text: string,
replyToUri?: string,
) {
let reply
if (replyToUri) {
const replyToUrip = new AdxUri(replyToUri)
const parentPost = await adx
.repo(replyToUrip.host, false)
.collection(replyToUrip.collection)
.get('Post', replyToUrip.recordKey)
if (parentPost) {
reply = {
root: parentPost.value.reply?.root || parentPost.uri,
parent: parentPost.uri,
}
}
}
return await adx
.repo(user, true)
.collection('blueskyweb.xyz:Posts')
.create('Post', {
$type: 'blueskyweb.xyz:Post',
text,
reply,
createdAt: new Date().toISOString(),
})
}
export async function like(adx: AdxClient, user: string, uri: string) {
await adx.repo(user, true).collection('blueskyweb.xyz:Likes').create('Like', {
$type: 'blueskyweb.xyz:Like',
subject: uri,
createdAt: new Date().toISOString(),
})
return await adx
.repo(user, true)
.collection('blueskyweb.xyz:Likes')
.create('Like', {
$type: 'blueskyweb.xyz:Like',
subject: uri,
createdAt: new Date().toISOString(),
})
}
export async function unlike(adx: AdxClient, user: string, uri: string) {
@ -45,7 +79,7 @@ export async function unlike(adx: AdxClient, user: string, uri: string) {
}
export async function repost(adx: AdxClient, user: string, uri: string) {
await adx
return await adx
.repo(user, true)
.collection('blueskyweb.xyz:Posts')
.create('Repost', {

View File

@ -0,0 +1,88 @@
import React, {useState, forwardRef, useImperativeHandle} from 'react'
import {observer} from 'mobx-react-lite'
import {KeyboardAvoidingView, StyleSheet, TextInput, View} from 'react-native'
// @ts-ignore no type definition -prf
import ProgressCircle from 'react-native-progress/Circle'
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 = observer(
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)
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

@ -30,6 +30,11 @@ export const FeedItem = observer(function FeedItem({
name: item.author.name,
})
}
const onPressReply = () => {
onNavigateContent('Composer', {
replyTo: item.uri,
})
}
const onPressToggleRepost = () => {
item
.toggleRepost()
@ -78,13 +83,13 @@ export const FeedItem = observer(function FeedItem({
{record.text}
</Text>
<View style={styles.ctrls}>
<View style={styles.ctrl}>
<TouchableOpacity style={styles.ctrl} onPress={onPressReply}>
<FontAwesomeIcon
style={styles.ctrlIcon}
icon={['far', 'comment']}
/>
<Text>{item.replyCount}</Text>
</View>
</TouchableOpacity>
<TouchableOpacity style={styles.ctrl} onPress={onPressToggleRepost}>
<FontAwesomeIcon
style={

View File

@ -54,6 +54,11 @@ export const PostThreadItem = observer(function PostThreadItem({
recordKey: urip.recordKey,
})
}
const onPressReply = () => {
onNavigateContent('Composer', {
replyTo: item.uri,
})
}
const onPressToggleRepost = () => {
item
.toggleRepost()
@ -129,13 +134,13 @@ export const PostThreadItem = observer(function PostThreadItem({
<></>
)}
<View style={styles.ctrls}>
<View style={styles.ctrl}>
<TouchableOpacity style={styles.ctrl} onPress={onPressReply}>
<FontAwesomeIcon
style={styles.ctrlIcon}
icon={['far', 'comment']}
/>
<Text>{item.replyCount}</Text>
</View>
</TouchableOpacity>
<TouchableOpacity style={styles.ctrl} onPress={onPressToggleRepost}>
<FontAwesomeIcon
style={

View File

@ -9,8 +9,10 @@ import {faHeart} from '@fortawesome/free-regular-svg-icons/faHeart'
import {faHeart as fasHeart} from '@fortawesome/free-solid-svg-icons/faHeart'
import {faHouse} from '@fortawesome/free-solid-svg-icons/faHouse'
import {faMagnifyingGlass} from '@fortawesome/free-solid-svg-icons/faMagnifyingGlass'
import {faPlus} from '@fortawesome/free-solid-svg-icons/faPlus'
import {faShareFromSquare} from '@fortawesome/free-solid-svg-icons/faShareFromSquare'
import {faRetweet} from '@fortawesome/free-solid-svg-icons/faRetweet'
import {faX} from '@fortawesome/free-solid-svg-icons/faX'
export function setup() {
moment.updateLocale('en', {
@ -41,8 +43,10 @@ export function setup() {
faHeart,
fasHeart,
faHouse,
faPlus,
faMagnifyingGlass,
faRetweet,
faShareFromSquare,
faX,
)
}

View File

@ -34,7 +34,7 @@ export const s = StyleSheet.create({
// colors
black: {color: 'black'},
gray: {color: 'gray'},
blue: {color: 'blue'},
blue: {color: '#006bf7'},
green: {color: 'green'},
red: {color: 'red'},
@ -52,6 +52,25 @@ export const s = StyleSheet.create({
mb5: {marginBottom: 5},
mb10: {marginBottom: 10},
// paddings
p2: {padding: 2},
p5: {padding: 5},
p10: {padding: 10},
pr2: {paddingRight: 2},
pr5: {paddingRight: 5},
pr10: {paddingRight: 10},
pl2: {paddingLeft: 2},
pl5: {paddingLeft: 5},
pl10: {paddingLeft: 10},
pt2: {paddingTop: 2},
pt5: {paddingTop: 5},
pt10: {paddingTop: 10},
pb2: {paddingBottom: 2},
pb5: {paddingBottom: 5},
pb10: {paddingBottom: 10},
// flex
flexRow: {flexDirection: 'row'},
flexCol: {flexDirection: 'column'},
flex1: {flex: 1},
})

View File

@ -13,17 +13,18 @@ import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
import type {RootTabsParamList} from './types'
import {useStores} from '../../state'
import * as platform from '../../platform/detection'
import {Home} from '../screens/Home'
import {Search} from '../screens/Search'
import {Notifications} from '../screens/Notifications'
import {Menu} from '../screens/Menu'
import {Profile} from '../screens/content/Profile'
import {PostThread} from '../screens/content/PostThread'
import {PostLikedBy} from '../screens/content/PostLikedBy'
import {PostRepostedBy} from '../screens/content/PostRepostedBy'
import {Login} from '../screens/Login'
import {Signup} from '../screens/Signup'
import {NotFound} from '../screens/NotFound'
import {Home} from '../screens/tabroots/Home'
import {Search} from '../screens/tabroots/Search'
import {Notifications} from '../screens/tabroots/Notifications'
import {Menu} from '../screens/tabroots/Menu'
import {Login} from '../screens/tabroots/Login'
import {Signup} from '../screens/tabroots/Signup'
import {NotFound} from '../screens/tabroots/NotFound'
import {Composer} from '../screens/stacks/Composer'
import {PostThread} from '../screens/stacks/PostThread'
import {PostLikedBy} from '../screens/stacks/PostLikedBy'
import {PostRepostedBy} from '../screens/stacks/PostRepostedBy'
import {Profile} from '../screens/stacks/Profile'
const linking: LinkingOptions<RootTabsParamList> = {
prefixes: [
@ -42,6 +43,7 @@ const linking: LinkingOptions<RootTabsParamList> = {
PostThread: 'profile/:name/post/:recordKey',
PostLikedBy: 'profile/:name/post/:recordKey/liked-by',
PostRepostedBy: 'profile/:name/post/:recordKey/reposted-by',
Composer: 'compose',
Login: 'login',
Signup: 'signup',
NotFound: '*',
@ -88,7 +90,8 @@ const HIDE_TAB = {tabBarButton: () => null}
function HomeStackCom() {
return (
<HomeTabStack.Navigator>
<HomeTabStack.Screen name="Home" component={Home} options={HIDE_HEADER} />
<HomeTabStack.Screen name="Home" component={Home} />
<HomeTabStack.Screen name="Composer" component={Composer} />
<HomeTabStack.Screen name="Profile" component={Profile} />
<HomeTabStack.Screen name="PostThread" component={PostThread} />
<HomeTabStack.Screen name="PostLikedBy" component={PostLikedBy} />

View File

@ -9,6 +9,7 @@ export type RootTabsParamList = {
PostThread: {name: string; recordKey: string}
PostLikedBy: {name: string; recordKey: string}
PostRepostedBy: {name: string; recordKey: string}
Composer: {replyTo?: string}
Login: undefined
Signup: undefined
NotFound: undefined

View File

@ -1,27 +0,0 @@
import React, {useEffect} from 'react'
import {View} from 'react-native'
import {Shell} from '../shell'
import {Feed} from '../com/feed/Feed'
import type {RootTabsScreenProps} from '../routes/types'
import {useStores} from '../../state'
export function Home({navigation}: RootTabsScreenProps<'HomeTab'>) {
const store = useStores()
useEffect(() => {
console.log('Fetching home feed')
store.homeFeed.setup()
}, [store.homeFeed])
const onNavigateContent = (screen: string, props: Record<string, string>) => {
// @ts-ignore it's up to the callers to supply correct params -prf
navigation.navigate(screen, props)
}
return (
<Shell>
<View>
<Feed feed={store.homeFeed} onNavigateContent={onNavigateContent} />
</View>
</Shell>
)
}

View File

@ -0,0 +1,50 @@
import React, {useLayoutEffect, useRef} from 'react'
import {Text, TouchableOpacity} from 'react-native'
import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
import {Shell} from '../../shell'
import type {RootTabsScreenProps} from '../../routes/types'
import {Composer as ComposerComponent} from '../../com/composer/Composer'
export const Composer = ({
navigation,
route,
}: RootTabsScreenProps<'Composer'>) => {
const {replyTo} = route.params
const ref = useRef<{publish: () => Promise<boolean>}>()
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 (
<Shell>
<ComposerComponent ref={ref} replyTo={replyTo} />
</Shell>
)
}

View File

@ -0,0 +1,59 @@
import React, {useEffect, useLayoutEffect} from 'react'
import {Image, StyleSheet, TouchableOpacity, View} from 'react-native'
import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
import {Shell} from '../../shell'
import {Feed} from '../../com/feed/Feed'
import type {RootTabsScreenProps} from '../../routes/types'
import {useStores} from '../../../state'
import {AVIS} from '../../lib/assets'
export function Home({navigation}: RootTabsScreenProps<'HomeTab'>) {
const store = useStores()
useEffect(() => {
console.log('Fetching home feed')
store.homeFeed.setup()
}, [store.homeFeed])
const onNavigateContent = (screen: string, props: Record<string, string>) => {
// @ts-ignore it's up to the callers to supply correct params -prf
navigation.navigate(screen, props)
}
useLayoutEffect(() => {
navigation.setOptions({
headerShown: true,
headerTitle: 'V I B E',
headerLeft: () => (
<TouchableOpacity
onPress={() => navigation.push('Profile', {name: 'alice.com'})}>
<Image source={AVIS['alice.com']} style={styles.avi} />
</TouchableOpacity>
),
headerRight: () => (
<TouchableOpacity
onPress={() => {
navigation.push('Composer', {})
}}>
<FontAwesomeIcon icon="plus" style={{color: '#006bf7'}} />
</TouchableOpacity>
),
})
}, [navigation])
return (
<Shell>
<View>
<Feed feed={store.homeFeed} onNavigateContent={onNavigateContent} />
</View>
</Shell>
)
}
const styles = StyleSheet.create({
avi: {
width: 20,
height: 20,
borderRadius: 10,
resizeMode: 'cover',
},
})

View File

@ -1,7 +1,7 @@
import React from 'react'
import {Text, View} from 'react-native'
import {observer} from 'mobx-react-lite'
import {Shell} from '../shell'
import {Shell} from '../../shell'
// import type {RootTabsScreenProps} from '../routes/types'
// import {useStores} from '../../state'

View File

@ -1,7 +1,7 @@
import React from 'react'
import {Shell} from '../shell'
import {Shell} from '../../shell'
import {ScrollView, Text, View} from 'react-native'
import type {RootTabsScreenProps} from '../routes/types'
import type {RootTabsScreenProps} from '../../routes/types'
export const Menu = (_props: RootTabsScreenProps<'MenuTab'>) => {
return (

View File

@ -1,7 +1,7 @@
import React from 'react'
import {Shell} from '../shell'
import {Shell} from '../../shell'
import {Text, Button, View} from 'react-native'
import type {RootTabsScreenProps} from '../routes/types'
import type {RootTabsScreenProps} from '../../routes/types'
export const NotFound = ({navigation}: RootTabsScreenProps<'NotFound'>) => {
return (

View File

@ -1,7 +1,7 @@
import React from 'react'
import {Shell} from '../shell'
import {Shell} from '../../shell'
import {Text, View} from 'react-native'
import type {RootTabsScreenProps} from '../routes/types'
import type {RootTabsScreenProps} from '../../routes/types'
export const Notifications = (
_props: RootTabsScreenProps<'NotificationsTab'>,

View File

@ -1,7 +1,7 @@
import React from 'react'
import {Shell} from '../shell'
import {Shell} from '../../shell'
import {Text, View} from 'react-native'
import type {RootTabsScreenProps} from '../routes/types'
import type {RootTabsScreenProps} from '../../routes/types'
export const Search = (_props: RootTabsScreenProps<'SearchTab'>) => {
return (

View File

@ -1,7 +1,7 @@
import React from 'react'
import {Text, View} from 'react-native'
import {observer} from 'mobx-react-lite'
import {Shell} from '../shell'
import {Shell} from '../../shell'
// import type {RootTabsScreenProps} from '../routes/types'
// import {useStores} from '../../state'

View File

@ -6,12 +6,13 @@ Paul's todo list
- Thread view
- Refresh
- Share btn
- Reply control
- Profile view
- Refresh
- Follow / Unfollow
- Badges
- Compose post control
- Composer
- Refresh original view after reply
- Check on navigation stack during a bunch of replies
- Search view
- *
- Notifications view

View File

@ -11146,6 +11146,13 @@ react-native-inappbrowser-reborn@^3.6.3:
invariant "^2.2.4"
opencollective-postinstall "^2.0.2"
react-native-progress@^5.0.0:
version "5.0.0"
resolved "https://registry.yarnpkg.com/react-native-progress/-/react-native-progress-5.0.0.tgz#f5ac6ceaeee27f184c660b00f29419e82a9d0ab0"
integrity sha512-KjnGIt3r9i5Kn2biOD9fXLJocf0bwxPRxOyAgXEnZTJQU2O+HyzgGFRCbM5h3izm9kKIkSc1txh8aGmMafCD9A==
dependencies:
prop-types "^15.7.2"
react-native-safe-area-context@^4.3.1:
version "4.3.1"
resolved "https://registry.yarnpkg.com/react-native-safe-area-context/-/react-native-safe-area-context-4.3.1.tgz#5cf97b25b395e0d09bc1f828920cd7da0d792ade"