Move SharePost modal to new system
parent
2f0939a1c2
commit
cdae685ee1
|
@ -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
|
||||
}
|
||||
|
|
|
@ -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>
|
||||
)
|
||||
})
|
||||
|
|
|
@ -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 />
|
||||
}
|
||||
|
|
|
@ -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: {
|
||||
|
|
|
@ -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>
|
||||
)
|
||||
})
|
||||
|
|
Loading…
Reference in New Issue