Move SharePost modal to new system

zio/stable
Paul Frazee 2022-09-02 12:17:33 -05:00
parent 2f0939a1c2
commit cdae685ee1
5 changed files with 39 additions and 57 deletions

View File

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

View File

@ -1,15 +1,16 @@
import React, {useRef} from 'react'
import React from 'react'
import {observer} from 'mobx-react-lite'
import {Text, View, FlatList} from 'react-native'
import {FeedViewModel, FeedViewItemModel} from '../../../state/models/feed-view'
import {FeedItem} from './FeedItem'
import {ShareModal} from '../modals/SharePost'
import {SharePostModel} from '../../../state/models/shell'
import {useStores} from '../../../state'
export const Feed = observer(function Feed({feed}: {feed: FeedViewModel}) {
const shareSheetRef = useRef<{open: (_uri: string) => void}>()
const store = useStores()
const onPressShare = (uri: string) => {
shareSheetRef.current?.open(uri)
store.shell.openModal(new SharePostModel(uri))
}
// TODO optimize renderItem or FeedItem, we're getting this notice from RN: -prf
// VirtualizedList: You have a large list that is slow to update - make sure your
@ -41,7 +42,6 @@ export const Feed = observer(function Feed({feed}: {feed: FeedViewModel}) {
/>
)}
{feed.isEmpty && <Text>This feed is empty!</Text>}
<ShareModal ref={shareSheetRef} />
</View>
)
})

View File

@ -6,6 +6,7 @@ import {useStores} from '../../../state'
import {createCustomBackdrop} from '../util/BottomSheetCustomBackdrop'
import * as LinkActionsModal from './LinkActions'
import * as SharePostModal from './SharePost.native'
export const Modal = observer(function Modal() {
const store = useStores()
@ -28,6 +29,9 @@ export const Modal = observer(function Modal() {
if (store.shell.activeModal?.name === 'link-actions') {
snapPoints = LinkActionsModal.snapPoints
element = <LinkActionsModal.Component {...store.shell.activeModal} />
} else if (store.shell.activeModal?.name === 'share-post') {
snapPoints = SharePostModal.snapPoints
element = <SharePostModal.Component {...store.shell.activeModal} />
} else {
return <View />
}

View File

@ -1,63 +1,36 @@
import React, {forwardRef, useState, useImperativeHandle, useRef} from 'react'
import React from 'react'
import {Button, StyleSheet, Text, TouchableOpacity, View} from 'react-native'
import BottomSheet from '@gorhom/bottom-sheet'
import Toast from '../util/Toast'
import Clipboard from '@react-native-clipboard/clipboard'
import {s} from '../../lib/styles'
import {createCustomBackdrop} from '../util/BottomSheetCustomBackdrop'
import {useStores} from '../../../state'
export const ShareModal = forwardRef(function ShareModal({}: {}, ref) {
const [isOpen, setIsOpen] = useState<boolean>(false)
const [uri, setUri] = useState<string>('')
const bottomSheetRef = useRef<BottomSheet>(null)
useImperativeHandle(ref, () => ({
open(uri: string) {
console.log('sharing', uri)
setUri(uri)
setIsOpen(true)
bottomSheetRef.current?.expand()
},
}))
export const snapPoints = ['30%']
export function Component({href}: {href: string}) {
const store = useStores()
const onPressCopy = () => {
Clipboard.setString(uri)
console.log('showing')
Clipboard.setString(href)
Toast.show('Link copied', {
position: Toast.positions.TOP,
})
store.shell.closeModal()
}
const onShareBottomSheetChange = (snapPoint: number) => {
if (snapPoint === -1) {
console.log('unsharing')
setIsOpen(false)
}
}
const onClose = () => {
bottomSheetRef.current?.close()
}
const onClose = () => store.shell.closeModal()
return (
<BottomSheet
ref={bottomSheetRef}
index={-1}
snapPoints={['50%']}
enablePanDownToClose
backdropComponent={isOpen ? createCustomBackdrop(onClose) : undefined}
onChange={onShareBottomSheetChange}>
<View>
<Text style={[s.textCenter, s.bold, s.mb10]}>Share this post</Text>
<Text style={[s.textCenter, s.mb10]}>{uri}</Text>
<Button title="Copy to clipboard" onPress={onPressCopy} />
<View style={s.p10}>
<TouchableOpacity onPress={onClose} style={styles.closeBtn}>
<Text style={s.textCenter}>Close</Text>
</TouchableOpacity>
</View>
<View>
<Text style={[s.textCenter, s.bold, s.mb10]}>Share this post</Text>
<Text style={[s.textCenter, s.mb10]}>{href}</Text>
<Button title="Copy to clipboard" onPress={onPressCopy} />
<View style={s.p10}>
<TouchableOpacity onPress={onClose} style={styles.closeBtn}>
<Text style={s.textCenter}>Close</Text>
</TouchableOpacity>
</View>
</BottomSheet>
</View>
)
})
}
const styles = StyleSheet.create({
closeBtn: {

View File

@ -6,9 +6,8 @@ import {
PostThreadViewPostModel,
} from '../../../state/models/post-thread-view'
import {useStores} from '../../../state'
import {SharePostModel} from '../../../state/models/shell'
import {PostThreadItem} from './PostThreadItem'
import {ShareModal} from '../modals/SharePost'
import {s} from '../../lib/styles'
const UPDATE_DELAY = 2e3 // wait 2s before refetching the thread for updates
@ -16,7 +15,6 @@ export const PostThread = observer(function PostThread({uri}: {uri: string}) {
const store = useStores()
const [view, setView] = useState<PostThreadViewModel | undefined>()
const [lastUpdate, setLastUpdate] = useState<number>(Date.now())
const shareSheetRef = useRef<{open: (_uri: string) => void}>()
useEffect(() => {
if (view?.params.uri === uri) {
@ -38,7 +36,7 @@ export const PostThread = observer(function PostThread({uri}: {uri: string}) {
// })
const onPressShare = (uri: string) => {
shareSheetRef.current?.open(uri)
store.shell.openModal(new SharePostModel(uri))
}
const onRefresh = () => {
view?.refresh().catch(err => console.error('Failed to refresh', err))
@ -83,7 +81,6 @@ export const PostThread = observer(function PostThread({uri}: {uri: string}) {
refreshing={view.isRefreshing}
onRefresh={onRefresh}
/>
<ShareModal ref={shareSheetRef} />
</View>
)
})