Move SharePost modal to new system

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
   }

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>
   )
 })

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 />
   }

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) {
+export const snapPoints = ['30%']
-  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 function Component({href}: {href: string}) {
+  const store = useStores()
   const onPressCopy = () => {
-    Clipboard.setString(uri)
+    Clipboard.setString(href)
-    console.log('showing')
     Toast.show('Link copied', {
       position: Toast.positions.TOP,
     })
+    store.shell.closeModal()
   }
-  const onShareBottomSheetChange = (snapPoint: number) => {
+  const onClose = () => store.shell.closeModal()
-    if (snapPoint === -1) {
-      console.log('unsharing')
-      setIsOpen(false)
-    }
-  }
-  const onClose = () => {
-    bottomSheetRef.current?.close()
-  }
 
   return (
-    <BottomSheet
+    <View>
-      ref={bottomSheetRef}
+      <Text style={[s.textCenter, s.bold, s.mb10]}>Share this post</Text>
-      index={-1}
+      <Text style={[s.textCenter, s.mb10]}>{href}</Text>
-      snapPoints={['50%']}
+      <Button title="Copy to clipboard" onPress={onPressCopy} />
-      enablePanDownToClose
+      <View style={s.p10}>
-      backdropComponent={isOpen ? createCustomBackdrop(onClose) : undefined}
+        <TouchableOpacity onPress={onClose} style={styles.closeBtn}>
-      onChange={onShareBottomSheetChange}>
+          <Text style={s.textCenter}>Close</Text>
-      <View>
+        </TouchableOpacity>
-        <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>
-    </BottomSheet>
+    </View>
   )
-})
+}
 
 const styles = StyleSheet.create({
   closeBtn: {

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>
   )
 })