DPLT-1053 Feat: implement Following feed #138
Conversation
| @@ -2,12 +2,24 @@ const GRAPHQL_ENDPOINT = | |||
| "https://near-queryapi.api.pagoda.co"; | |||
| const APP_OWNER = "dataplatform.near"; | |||
|
|
|||
| let accountsFollowing = undefined; | |||
|
|
|||
There was a problem hiding this comment.
We fetch the followers inside a parent widget to prevent rendering issues.
| @@ -23,55 +17,6 @@ const Subheading = styled.h2` | |||
| outline: none; | |||
| `; | |||
|
|
|||
| let querySortFilter = ""; | |||
There was a problem hiding this comment.
Logic to fetch posts happens inside of parent widget now: QueryAPI.Examples.Feed.Posts
| )} | ||
|
|
||
| <FeedWrapper> | ||
| <Widget src={`${APP_OWNER}/widget/QueryApi.Examples.Feed`} props={{ hasMore, loadMorePosts, posts: state.posts}} /> |
There was a problem hiding this comment.
We pass loadMorePosts down to the Feed widget so that the InfiniteScroll component can call it.
| `; | ||
|
|
||
| const hasMore = state.postsCountLeft != state.posts.length | ||
|
|
There was a problem hiding this comment.
This is a bit hacky. It was a pain to get this to work correctly when switching tabs from all to following while making sure we do not send more than one fetch request which would create duplicate posts in the feed.
We first load the all feed regardless during init. After doing so, we fetch following feed.
|
|
||
| function selectTab(selectedTab) { | ||
| Storage.privateSet("selectedTab", selectedTab); | ||
| State.update({ |
There was a problem hiding this comment.
whenever we switch tabs, reset the state and then refetch
| } | ||
|
|
||
| const loadMorePosts = () => { | ||
| const queryName = state.selectedTab == "following" && accountsFollowing ? "GetFollowingPosts" : "GetPostsQuery" |
There was a problem hiding this comment.
figure out what query to execute.
| content | ||
| } | ||
| } | ||
| dataplatform_near_social_feed_posts_aggregate(order_by: [${querySortOption} { block_height: desc }], offset: $offset){ |
There was a problem hiding this comment.
we pass the same filter to the aggreagate table to figure out how many more posts are left with this query to load.
roshaans
force-pushed
the
feat/following-feed
branch
from
c85457e to
b532ad9
Compare
frontend/widgets/examples/feed/src/QueryApi.Examples.Feed.Comment.jsx
Outdated
Show resolved
Hide resolved
| fetchGraphQL(createQuery(sortOption, type), queryName, { | ||
| offset: state.posts.length, | ||
| }).then((result) => { | ||
| if (result.status === 200) { |
There was a problem hiding this comment.
You also need to check if result.body.data does not contain the error key. GraphQL will return 200 even if there are errors.
| postsCountLeft: 0, | ||
| selectedTab | ||
| }); | ||
| loadMorePosts() |
There was a problem hiding this comment.
Does State.update() trigger a re-render? If so, then this might not be needed. If we re-render with 0 posts, <InfiniteScroll /> should call loadMorePosts() itself?
There was a problem hiding this comment.
I just tested it. It loads on initial page load, but then when we switch tabs, it does not trigger loadMorePosts() again.
Implements the Following Feed.
You can access the feed here: https://www.near.org/dev-queryapi.dataplatform.near/widget/QueryApi.dev.Feed