Fix 4485, 4484: added posts field for ForumThreads to reduce queries …

…in Category page
Joystream · Aug 30, 2023 · 04dd258 · 04dd258
1 parent 83b4ef3
commit 04dd258
Show file tree

Hide file tree

Showing 12 changed files with 351 additions and 22 deletions.
diff --git a/packages/ui/src/app/pages/Forum/ForumCategory.tsx b/packages/ui/src/app/pages/Forum/ForumCategory.tsx
@@ -13,9 +13,7 @@ import { PageTitle } from '@/common/components/page/PageTitle'
 import { PreviousPage } from '@/common/components/page/PreviousPage'
 import { Label, TextMedium } from '@/common/components/typography'
 import { useModal } from '@/common/hooks/useModal'
-import { useRefetchQueries } from '@/common/hooks/useRefetchQueries'
 import { useSort } from '@/common/hooks/useSort'
-import { MILLISECONDS_PER_BLOCK } from '@/common/model/formatters'
 import { ForumCategoryList } from '@/forum/components/category/ForumCategoryList'
 import { ForumPageHeader } from '@/forum/components/ForumPageHeader'
 import { ThreadFilters } from '@/forum/components/threads/ThreadFilters'
@@ -48,17 +46,9 @@ export const ForumCategory = () => {
  },
  { perPage: THREADS_PER_PAGE, page }
  )
- const isRefetched = useRefetchQueries({
- interval: MILLISECONDS_PER_BLOCK,
- include: ['GetForumThreads', 'GetForumThreadsCount'],
- })
 
  const { showModal } = useModal()
 
- if (isLoadingThreads && !isRefetched) {
- return <Loading />
- }
-
  if (isLoadingCategory) {
  return <Loading />
  }
@@ -126,7 +116,7 @@ export const ForumCategory = () => {
  <ThreadList
  threads={threads}
  getSortProps={getSortProps}
- isLoading={isLoadingThreads && !isRefetched}
+ isLoading={isLoadingThreads}
  isArchive={isArchive}
  page={page}
  pageCount={threadCount && Math.ceil(threadCount / THREADS_PER_PAGE)}

diff --git a/packages/ui/src/forum/components/ThreadCard/ThreadCard.stories.tsx b/packages/ui/src/forum/components/ThreadCard/ThreadCard.stories.tsx
@@ -23,6 +23,30 @@ const forumThread: ForumThreadWithDetails = {
  tags: [],
  visiblePostsCount: 5,
  status: { __typename: 'ThreadStatusActive' },
+ posts: [{
+ id: "1",
+ createdAt: "2023-06-28T19:14:00.000Z",
+ text: "Test text",
+ status: "PostStatusActive",
+ threadId: "459",
+ categoryId: "2",
+ author: {
+ id: "4129",
+ handle: "Codefikeyz",
+ rootAccount: "j4TZJCACAWao9bnh5k86qeRW2QhNVNkf9eEw1Vz4V8ZeqD4u4",
+ controllerAccount: "j4TZJCACAWao9bnh5k86qeRW2QhNVNkf9eEw1Vz4V8ZeqD4u4",
+ isCouncilMember: false,
+ isFoundingMember: true,
+ inviteCount: 1,
+ roles: [], 
+ boundAccounts: [
+ "j4TZJCACAWao9bnh5k86qeRW2QhNVNkf9eEw1Vz4V8ZeqD4u4",
+ "j4WJoUb8xxQucAUFtmF18r41gzb1AG22nzypW1PT4LMLJqzU5"
+ ],
+ isVerified: true,
+ createdAt:"2023-06-28T19:14:00.000Z",
+ }
+ }]
 }
 
 const Template: Story = (args) => <ThreadCard thread={{ ...forumThread, ...args }} />

diff --git a/packages/ui/src/forum/components/threads/LatestActivity.tsx b/packages/ui/src/forum/components/threads/LatestActivity.tsx
@@ -5,14 +5,15 @@ import { Loading } from '@/common/components/Loading'
 import { RowGapBlock } from '@/common/components/page/PageContent'
 import { TextInlineExtraSmall } from '@/common/components/typography'
 import { relativeTime } from '@/common/model/relativeTime'
-import { useThreadLatestPost } from '@/forum/hooks/useThreadLatestPost'
+import { ForumPost } from '@/forum/types'
 import { MemberInfo } from '@/memberships/components'
 
 export interface LatestActivitydProps {
  threadId: string
+ posts: ForumPost[]
 }
-export const LatestActivity = memo(({ threadId }: LatestActivitydProps) => {
- const { post } = useThreadLatestPost(threadId)
+export const LatestActivity = memo(({ /*threadId,*/ posts }: LatestActivitydProps) => {
+ const post = posts[0] // const { post } = useThreadLatestPost(threadId)
 
  if (!post) return <Loading withoutMargin />
 

diff --git a/packages/ui/src/forum/components/threads/ThreadList.stories.tsx b/packages/ui/src/forum/components/threads/ThreadList.stories.tsx
@@ -32,6 +32,30 @@ const forumThread: ForumThreadWithDetails = {
  tags: [],
  visiblePostsCount: 5,
  status: { __typename: 'ThreadStatusActive' },
+ posts: [{
+ id: "1",
+ createdAt: "2023-06-28T19:14:00.000Z",
+ text: "Test text",
+ status: "PostStatusActive",
+ threadId: "459",
+ categoryId: "2",
+ author: {
+ id: "4129",
+ handle: "Codefikeyz",
+ rootAccount: "j4TZJCACAWao9bnh5k86qeRW2QhNVNkf9eEw1Vz4V8ZeqD4u4",
+ controllerAccount: "j4TZJCACAWao9bnh5k86qeRW2QhNVNkf9eEw1Vz4V8ZeqD4u4",
+ isCouncilMember: false,
+ isFoundingMember: true,
+ inviteCount: 1,
+ roles: [], 
+ boundAccounts: [
+ "j4TZJCACAWao9bnh5k86qeRW2QhNVNkf9eEw1Vz4V8ZeqD4u4",
+ "j4WJoUb8xxQucAUFtmF18r41gzb1AG22nzypW1PT4LMLJqzU5"
+ ],
+ isVerified: true,
+ createdAt:"2023-06-28T19:14:00.000Z",
+ }
+ }]
 }
 
 const Template: Story = ({ isArchive, type, initialPostText, categoryTitle, title }) => {

diff --git a/packages/ui/src/forum/components/threads/ThreadList.tsx b/packages/ui/src/forum/components/threads/ThreadList.tsx
@@ -42,7 +42,7 @@ export const ThreadList = ({
  return <NotFoundText>No threads found</NotFoundText>
  }
 
- if (isLoading) {
+ if (isLoading && threads.length <= 0) {
  return <Loading />
  }
 
@@ -62,7 +62,7 @@ export const ThreadList = ({
  </ListHeaders>
 
  <List as="div" isArchive={isArchive}>
- {threads.map((thread, index) => (
+ {threads?.map((thread, index) => (
  <ThreadListItem key={index} thread={thread} isArchive={isArchive} />
  ))}
  {setPage && <Pagination pageCount={pageCount} handlePageChange={setPage} page={page} />}
@@ -74,7 +74,7 @@ export const ThreadList = ({
  return (
  <RowGapBlock gap={10}>
  <ThreadCardsStyles>
- {threads.map((thread) => (
+ {threads?.map((thread) => (
  <ThreadCard thread={thread} watchlistButton={watchlistButton} />
  ))}
  </ThreadCardsStyles>

diff --git a/packages/ui/src/forum/components/threads/ThreadListItem.tsx b/packages/ui/src/forum/components/threads/ThreadListItem.tsx
@@ -41,7 +41,7 @@ export const ThreadListItem = ({ thread, isArchive }: ThreadListItemProps) => {
 
  <TextMedium bold>{thread.visiblePostsCount > 0 ? thread.visiblePostsCount - 1 : 0}</TextMedium>
 
- <LatestActivity threadId={thread.id} />
+ <LatestActivity threadId={thread.id} posts={thread.posts} />
 
  <MemberInfo member={thread.author} size="s" memberSize="s" hideGroup />
 

diff --git a/packages/ui/src/forum/hooks/useForumCategoryThreads.ts b/packages/ui/src/forum/hooks/useForumCategoryThreads.ts
@@ -2,6 +2,7 @@ import { Reducer, useEffect, useMemo, useReducer } from 'react'
 
 import { ForumThreadOrderByInput } from '@/common/api/queries'
 import { SortOrder, toQueryOrderByInput } from '@/common/hooks/useSort'
+import { MILLISECONDS_PER_BLOCK } from '@/common/model/formatters'
 import { merge } from '@/common/utils'
 import { ThreadEmptyFilters, ThreadFiltersState } from '@/forum/components/threads/ThreadFilters'
 import { useGetForumThreadsCountQuery, useGetForumThreadsQuery } from '@/forum/queries'
@@ -31,7 +32,7 @@ export const useForumCategoryThreads = (
 
  const [{ filters, categoryId, isArchive }, refresh] = useReducer(threadOptionReducer, initialOptions)
 
- const { loading: loadingThreads, data: threadsData } = useGetForumThreadsQuery({
+ const { data: threadsData } = useGetForumThreadsQuery({
  variables: {
  where: where(filters, categoryId, isArchive),
  orderBy: [ForumThreadOrderByInput.IsStickyDesc, toQueryOrderByInput<ForumThreadOrderByInput>(options.order)],
@@ -42,15 +43,17 @@ export const useForumCategoryThreads = (
  offset: (pagination.page - 1) * pagination.perPage,
  }),
  },
+ pollInterval: isArchive === false ? MILLISECONDS_PER_BLOCK : 0,
  })
 
- const { loading: loadingCount, data: countData } = useGetForumThreadsCountQuery({
+ const { data: countData } = useGetForumThreadsCountQuery({
  variables: { where: where(filters, categoryId, isArchive) },
+ pollInterval: isArchive === false ? MILLISECONDS_PER_BLOCK : 0,
  })
  const totalCount = countData?.forumThreadsConnection.totalCount
 
  return {
- isLoading: loadingThreads || loadingCount,
+ isLoading: !threadsData || !countData,
  threads: threadsData?.forumThreads.map((thread) => asForumThread(thread)) ?? [],
  threadCount: totalCount,
  refresh,