diff options
author | Paul Frazee <pfrazee@gmail.com> | 2023-03-13 16:01:43 -0500 |
---|---|---|
committer | GitHub <noreply@github.com> | 2023-03-13 16:01:43 -0500 |
commit | 56cf890debeb9872f791ccb992a5587f2c05fd9e (patch) | |
tree | 929453b41274a712d8b2fce441e98a0cd030d305 /src/view/com/post-thread/PostThread.tsx | |
parent | 503e03d91e1de4bfeabec1eb2d97dcdceb13fcc5 (diff) | |
download | voidsky-56cf890debeb9872f791ccb992a5587f2c05fd9e.tar.zst |
Move to expo and react-navigation (#288)
* WIP - adding expo * WIP - adding expo 2 * Fix tsc * Finish adding expo * Disable the 'require cycle' warning * Tweak plist * Modify some dependency versions to make expo happy * Fix icon fill * Get Web compiling for expo * 1.7 * Switch to react-navigation in expo2 (#287) * WIP Switch to react-navigation * WIP Switch to react-navigation 2 * WIP Switch to react-navigation 3 * Convert all screens to react navigation * Update BottomBar for react navigation * Update mobile menu to be react-native drawer * Fixes to drawer and bottombar * Factor out some helpers * Replace the navigation model with react-navigation * Restructure the shell folder and fix the header positioning * Restore the error boundary * Fix tsc * Implement not-found page * Remove react-native-gesture-handler (no longer used) * Handle notifee card presses * Handle all navigations from the state layer * Fix drawer behaviors * Fix two linking issues * Switch to our react-native-progress fork to fix an svg rendering issue * Get Web working with react-navigation * Refactor routes and navigation for a bit more clarity * Remove dead code * Rework Web shell to left/right nav to make this easier * Fix ViewHeader for desktop web * Hide profileheader back btn on desktop web * Move the compose button to the left nav * Implement reply prompt in threads for desktop web * Composer refactors * Factor out all platform-specific text input behaviors from the composer * Small fix * Update the web build to use tiptap for the composer * Tune up the mention autocomplete dropdown * Simplify the default avatar and banner * Fixes to link cards in web composer * Fix dropdowns on web * Tweak load latest on desktop * Add web beta message and feedback link * Fix up links in desktop web
Diffstat (limited to 'src/view/com/post-thread/PostThread.tsx')
-rw-r--r-- | src/view/com/post-thread/PostThread.tsx | 56 |
1 files changed, 47 insertions, 9 deletions
diff --git a/src/view/com/post-thread/PostThread.tsx b/src/view/com/post-thread/PostThread.tsx index 646d4b276..f84593db8 100644 --- a/src/view/com/post-thread/PostThread.tsx +++ b/src/view/com/post-thread/PostThread.tsx @@ -1,28 +1,43 @@ import React, {useRef} from 'react' import {observer} from 'mobx-react-lite' -import {ActivityIndicator} from 'react-native' +import {ActivityIndicator, StyleSheet, View} from 'react-native' import {CenteredView, FlatList} from '../util/Views' import { PostThreadViewModel, PostThreadViewPostModel, } from 'state/models/post-thread-view' import {PostThreadItem} from './PostThreadItem' +import {ComposePrompt} from '../composer/Prompt' import {ErrorMessage} from '../util/error/ErrorMessage' import {s} from 'lib/styles' +import {isDesktopWeb} from 'platform/detection' +import {usePalette} from 'lib/hooks/usePalette' + +const REPLY_PROMPT = {_reactKey: '__reply__', _isHighlightedPost: false} +const BOTTOM_BORDER = { + _reactKey: '__bottom_border__', + _isHighlightedPost: false, +} +type YieldedItem = PostThreadViewPostModel | typeof REPLY_PROMPT export const PostThread = observer(function PostThread({ uri, view, + onPressReply, }: { uri: string view: PostThreadViewModel + onPressReply: () => void }) { + const pal = usePalette('default') const ref = useRef<FlatList>(null) const [isRefreshing, setIsRefreshing] = React.useState(false) - const posts = React.useMemo( - () => (view.thread ? Array.from(flattenThread(view.thread)) : []), - [view.thread], - ) + const posts = React.useMemo(() => { + if (view.thread) { + return Array.from(flattenThread(view.thread)).concat([BOTTOM_BORDER]) + } + return [] + }, [view.thread]) // events // = @@ -58,6 +73,23 @@ export const PostThread = observer(function PostThread({ }, [ref], ) + const renderItem = React.useCallback( + ({item}: {item: YieldedItem}) => { + if (item === REPLY_PROMPT) { + return <ComposePrompt onPressCompose={onPressReply} /> + } else if (item === BOTTOM_BORDER) { + // HACK + // due to some complexities with how flatlist works, this is the easiest way + // I could find to get a border positioned directly under the last item + // -prf + return <View style={[styles.bottomBorder, pal.border]} /> + } else if (item instanceof PostThreadViewPostModel) { + return <PostThreadItem item={item} onPostReply={onRefresh} /> + } + return <></> + }, + [onRefresh, onPressReply, pal], + ) // loading // = @@ -81,9 +113,6 @@ export const PostThread = observer(function PostThread({ // loaded // = - const renderItem = ({item}: {item: PostThreadViewPostModel}) => ( - <PostThreadItem item={item} onPostReply={onRefresh} /> - ) return ( <FlatList ref={ref} @@ -104,7 +133,7 @@ export const PostThread = observer(function PostThread({ function* flattenThread( post: PostThreadViewPostModel, isAscending = false, -): Generator<PostThreadViewPostModel, void> { +): Generator<YieldedItem, void> { if (post.parent) { if ('notFound' in post.parent && post.parent.notFound) { // TODO render not found @@ -113,6 +142,9 @@ function* flattenThread( } } yield post + if (isDesktopWeb && post._isHighlightedPost) { + yield REPLY_PROMPT + } if (post.replies?.length) { for (const reply of post.replies) { if ('notFound' in reply && reply.notFound) { @@ -125,3 +157,9 @@ function* flattenThread( post._hasMore = true } } + +const styles = StyleSheet.create({ + bottomBorder: { + borderBottomWidth: 1, + }, +}) |