Merge pull request #338 from dappforce/fix/loading

Move fetch post rewards to client side

src/components/posts/view-post/PostPage.tsx

@@ -3,7 +3,7 @@ import { getPostIdFromSlug } from '@subsocial/utils/slugify'
 import clsx from 'clsx'
 import { NextPage } from 'next'
 import router from 'next/router'
-import { FC } from 'react'
+import { FC, useEffect } from 'react'
 import { CommentSection } from 'src/components/comments/CommentsSection'
 import MobileActiveStakingSection from 'src/components/creators/MobileActiveStakingSection'
 import TopUsersCard from 'src/components/creators/TopUsersCard'
@@ -22,7 +22,8 @@ import config from 'src/config'
 import { resolveIpfsUrl } from 'src/ipfs'
 import { getInitialPropsWithRedux, NextContextWithRedux } from 'src/rtk/app'
 import { useSelectProfile } from 'src/rtk/app/hooks'
-import { useAppSelector } from 'src/rtk/app/store'
+import { useAppDispatch, useAppSelector } from 'src/rtk/app/store'
+import { fetchPostRewards } from 'src/rtk/features/activeStaking/postRewardSlice'
 import { fetchTopUsersWithSpaces } from 'src/rtk/features/leaderboard/topUsersSlice'
 import { fetchPost, fetchPosts, selectPost } from 'src/rtk/features/posts/postsSlice'
 import { useFetchMyReactionsByPostId } from 'src/rtk/features/reactions/myPostReactionsHooks'
@@ -308,7 +309,11 @@ export async function loadPostOnNextReq({
 }
 
 const PostPage: FC<PostDetailsProps & HasStatusCode> = props => {
-  const { statusCode } = props
+  const { statusCode, postData } = props
+  const dispatch = useAppDispatch()
+  useEffect(() => {
+    dispatch(fetchPostRewards({ postIds: [postData.id] as string[] }))
+  }, [dispatch])
 
   if (statusCode === 404) {
     return <PostNotFoundPage />

src/components/spaces/ViewSpacePage.tsx

@@ -1,9 +1,11 @@
-import { FC } from 'react'
+import { FC, useEffect } from 'react'
 import config from 'src/config'
 import { DEFAULT_PAGE_SIZE } from 'src/config/ListData.config'
 import { getActivityCounts, getPostActivities } from 'src/graphql/apis'
 import { initializeApollo } from 'src/graphql/client'
 import { getInitialPropsWithRedux } from 'src/rtk/app'
+import { useAppDispatch } from 'src/rtk/app/store'
+import { fetchPostRewards } from 'src/rtk/features/activeStaking/postRewardSlice'
 import { useFetchMyPermissionsBySpaceId } from 'src/rtk/features/permissions/mySpacePermissionsHooks'
 import { fetchPosts, selectPosts } from 'src/rtk/features/posts/postsSlice'
 import { fetchProfileSpace, selectProfileSpace } from 'src/rtk/features/profiles/profilesSlice'
@@ -74,8 +76,14 @@ const InnerViewSpacePage: FC<Props> = props => {
   )
 }
 
-const ViewSpacePage: FC<Props> = props => {
-  const { statusCode } = props
+const ViewSpacePage: FC<Props & { prefetchedIds: string[] }> = props => {
+  const { statusCode, prefetchedIds } = props
+
+  const dispatch = useAppDispatch()
+  useEffect(() => {
+    dispatch(fetchPostRewards({ postIds: prefetchedIds as string[] }))
+  }, [dispatch])
+
   if (statusCode === 404) {
     return <SpaceNotFountPage />
   }
@@ -145,6 +153,7 @@ getInitialPropsWithRedux(ViewSpacePage, async props => {
     spaceData: data,
     posts,
     postIds: sortedPostIds,
+    prefetchedIds: pageIds,
     customImage,
   }
 })

src/rtk/features/posts/postsSlice.ts

@@ -3,7 +3,7 @@ import { createAsyncThunk, createEntityAdapter, createSlice, EntityId } from '@r
 import { SubsocialApi } from '@subsocial/api'
 import { FindPostsQuery } from '@subsocial/api/filters'
 import { getFirstOrUndefined } from '@subsocial/utils'
-import { isServerSide } from 'src/components/utils'
+import { isClientSide } from 'src/components/utils'
 import { getPostsData } from 'src/graphql/apis'
 import { PostFragmentMapped, PostFragmentWithParent } from 'src/graphql/apis/types'
 import {
@@ -221,6 +221,10 @@ const getPosts = createFetchDataFn<PostState[]>([])({
     return fixedPosts.map<PostState>(post => ({ ...post, isOverview: true }))
   },
 })
+/**
+ * If used for prefetching posts, do the fetchPostRewards call in client side,
+ * because this call is not prefetched
+ */
 export const fetchPosts = createAsyncThunk<PostStruct[], FetchPostsArgs, ThunkApiConfig>(
   'posts/fetchMany',
   createFetchManyDataWrapper({
@@ -246,15 +250,14 @@ export const fetchPosts = createAsyncThunk<PostStruct[], FetchPostsArgs, ThunkAp
       )
 
       // no need to wait for posts rewards fetch in client side
-      const postsRewardPromise = dispatch(fetchPostRewards({ postIds: newIds as string[] }))
+      // will not be prefetched from server side because this query takes pretty long
+      if (isClientSide()) {
+        dispatch(fetchPostRewards({ postIds: newIds as string[] }))
+      }
       const fetches: Promise<any>[] = [
         dispatch(fetchSuperLikeCounts({ postIds: newIds as string[] })),
         dispatch(fetchCanPostsSuperLiked({ postIds: newIds as string[] })),
       ]
-      // need to wait for posts rewards in server side because if not waited, the data won't get passed to fe
-      if (isServerSide()) {
-        fetches.push(postsRewardPromise)
-      }
 
       if (withOwner) {
         const ids = getUniqueOwnerIds(entities)