diff --git a/src/components/pages/feed.js b/src/components/pages/feed.js index 6b2ea59..8a3ab50 100644 --- a/src/components/pages/feed.js +++ b/src/components/pages/feed.js @@ -13,6 +13,7 @@ import * as requests from "src/requests"; const FeedJsx = (props) => { const [state, setState] = useState({ loaded: false, + postsRendered: false, }); useEffect(() => { @@ -63,6 +64,43 @@ const FeedJsx = (props) => { ); }, []); + const _handleTimelineLoaded = () => setState({...state, + postsRendered: true, + }); + + let endOfTimelineMessage = <>; + if (state.postsRendered) { + // Only render the timeline interruption if all of the posts have been + // rendered in the feed. + endOfTimelineMessage = <> + + + + + + You're all caught up. + + Wow, it sure is a lovely day outside 🌳 + + props.navigation.navigate("OlderPosts") + }> + See older posts + + + + ; + } + return ( <> { state.loaded @@ -77,33 +115,9 @@ const FeedJsx = (props) => { - - - - - - - You're all caught up. - - Wow, it sure is a lovely day outside 🌳 - - props.navigation.navigate("OlderPosts") - }> - See older posts - - - + posts = { state.posts } + onTimelineLoaded = { _handleTimelineLoaded }/> + { endOfTimelineMessage } : <> } diff --git a/src/components/posts/post.js b/src/components/posts/post.js index 7f30c07..26f899c 100644 --- a/src/components/posts/post.js +++ b/src/components/posts/post.js @@ -180,8 +180,8 @@ export const RawPostJsx = (props) => { export const PostByDataJsx = (props) => { /* - Renders a post where the data is supplied directly to the element through - its properties, as it is in a timeline. + * Renders a post where the data is supplied directly to the element through + * its properties, as it is in a timeline. */ let [state, setState] = useState({ @@ -217,6 +217,10 @@ export const PostByDataJsx = (props) => { own, loaded: true }); + + if (props.onPostLoaded != null) { + props.onPostLoaded(); + } }); }, []); @@ -417,13 +421,6 @@ const styles = { } }; -// customStyles for react-native-popup-menu should be defined in particular -// objects to be interpreted correctly. - -//const menuStyles = { -// menuProviderWrapper -//} - const optionsStyles = { optionWrapper: { // The wrapper around a single option paddingLeft: SCREEN_WIDTH / 15, diff --git a/src/components/posts/timeline-view.js b/src/components/posts/timeline-view.js index 626d31b..71cedce 100644 --- a/src/components/posts/timeline-view.js +++ b/src/components/posts/timeline-view.js @@ -1,15 +1,30 @@ -import React from "react"; +import React, { useState, useEffect } from "react"; import { View } from "react-native"; import { PostByDataJsx } from "src/components/posts/post"; const TimelineViewJsx = (props) => { + // Count the number of posts that have already loaded + const [postsLoaded, setPostsLoaded] = useState(0); + // Ensure only posts with media get in the timeline const posts = props.posts.filter( p => p.media_attachments != null && p.media_attachments.length > 0 ); + useEffect(() => { + // When all the posts have been loaded, call onTimelineLoaded + // if it's been defined + if (postsLoaded == posts.length) { + if (props.onTimelineLoaded != null) { + props.onTimelineLoaded(); + } + } + }, [postsLoaded]); + + _handlePostLoaded = () => setPostsLoaded(postsLoaded + 1); + return ( { props.posts.map((post, i) => { @@ -17,7 +32,8 @@ const TimelineViewJsx = (props) => { + data = { post } + onPostLoaded = { _handlePostLoaded }/> ); }) }