diff options
| -rw-r--r-- | src/state/models/shell.ts | 12 | ||||
| -rw-r--r-- | src/view/com/feed/Feed.tsx | 10 | ||||
| -rw-r--r-- | src/view/com/modals/Modal.tsx | 4 | ||||
| -rw-r--r-- | src/view/com/modals/SharePost.native.tsx | 63 | ||||
| -rw-r--r-- | src/view/com/post-thread/PostThread.tsx | 7 |
5 files changed, 39 insertions, 57 deletions
diff --git a/src/state/models/shell.ts b/src/state/models/shell.ts index 6755393cd..a2e83b5e3 100644 --- a/src/state/models/shell.ts +++ b/src/state/models/shell.ts @@ -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 } diff --git a/src/view/com/feed/Feed.tsx b/src/view/com/feed/Feed.tsx index 7c7fea58a..4a2ecb612 100644 --- a/src/view/com/feed/Feed.tsx +++ b/src/view/com/feed/Feed.tsx @@ -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> ) }) diff --git a/src/view/com/modals/Modal.tsx b/src/view/com/modals/Modal.tsx index 172dd0ad4..dc5b719bc 100644 --- a/src/view/com/modals/Modal.tsx +++ b/src/view/com/modals/Modal.tsx @@ -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 /> } diff --git a/src/view/com/modals/SharePost.native.tsx b/src/view/com/modals/SharePost.native.tsx index 6fc1d1adf..01692fb74 100644 --- a/src/view/com/modals/SharePost.native.tsx +++ b/src/view/com/modals/SharePost.native.tsx @@ -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: { diff --git a/src/view/com/post-thread/PostThread.tsx b/src/view/com/post-thread/PostThread.tsx index c12d99edb..7a70aea75 100644 --- a/src/view/com/post-thread/PostThread.tsx +++ b/src/view/com/post-thread/PostThread.tsx @@ -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> ) }) |