Fix Forum returns 404 for correct links (#4318)

* fixes #4108 Forum returns 404 for correct links

* fixes #4318 handle errors for forum threads

* #4108 handle thread errors

* Add dot to error description

Co-authored-by: Theophile Sandoz <theophile.sandoz@gmail.com>

* Fix use `useRefetchQueries`

---------

Co-authored-by: ilya Smiyukha <ilya.smiyukha@touchcast.com>
Co-authored-by: Theophile Sandoz <theophile.sandoz@gmail.com>

packages/ui/src/app/pages/Forum/ForumThread.tsx

@@ -8,14 +8,13 @@ import { PageHeaderRow, PageHeaderWrapper } from '@/app/components/PageLayout'
 import { BadgesRow, BadgeStatus } from '@/common/components/BadgeStatus'
 import { BlockTime } from '@/common/components/BlockTime'
 import { ButtonsGroup, CopyButtonTemplate } from '@/common/components/buttons'
+import { EmptyPagePlaceholder } from '@/common/components/EmptyPagePlaceholder/EmptyPagePlaceholder'
 import { LinkIcon } from '@/common/components/icons'
 import { PinIcon } from '@/common/components/icons/PinIcon'
 import { MainPanel, RowGapBlock } from '@/common/components/page/PageContent'
 import { PreviousPage } from '@/common/components/page/PreviousPage'
 import { Colors } from '@/common/constants'
-import { useRefetchQueries } from '@/common/hooks/useRefetchQueries'
 import { createType } from '@/common/model/createType'
-import { MILLISECONDS_PER_BLOCK } from '@/common/model/formatters'
 import { metadataToBytes } from '@/common/model/JoystreamNode'
 import { getUrl } from '@/common/utils/getUrl'
 import { PostList } from '@/forum/components/PostList/PostList'
@@ -30,12 +29,7 @@ import { ForumPageLayout } from './components/ForumPageLayout'
 
 export const ForumThread = () => {
   const { id } = useParams<{ id: string }>()
-  const { isLoading: isLoadingThread, thread } = useForumThread(id)
-  const isRefetched = useRefetchQueries({
-    interval: MILLISECONDS_PER_BLOCK,
-    include: ['GetForumThreads'],
-  })
-  const isLoading = isLoadingThread && !isRefetched
+  const { isLoading, thread, hasError } = useForumThread(id)
   const { api } = useApi()
   const { active } = useMyMemberships()
 
@@ -59,7 +53,7 @@ export const ForumThread = () => {
   }
 
   useEffect(() => {
-    if (!isLoading && !thread) {
+    if (!isLoading && !thread && !hasError) {
       history.replace('/404')
     }
   }, [isLoading, thread])
@@ -107,8 +101,14 @@ export const ForumThread = () => {
 
   const displayMain = () => (
     <ThreadPanel ref={sideNeighborRef}>
-      <PostList threadId={id} isThreadActive={isThreadActive} isLoading={isLoading} />
-      {thread && isThreadActive && <NewThreadPost ref={newPostRef} getTransaction={getTransaction} />}
+      {hasError ? (
+        <EmptyPagePlaceholder title="Something went wrong fetching this thread." copy="" button={null} />
+      ) : (
+        <>
+          <PostList threadId={id} isThreadActive={isThreadActive} isLoading={isLoading} />
+          {thread && isThreadActive && <NewThreadPost ref={newPostRef} getTransaction={getTransaction} />}
+        </>
+      )}
     </ThreadPanel>
   )
 

packages/ui/src/common/hooks/useRefetchQueries.ts

@@ -1,4 +1,4 @@
-import { useApolloClient } from '@apollo/client'
+import { ApolloQueryResult, OnQueryUpdated, useApolloClient } from '@apollo/client'
 import { DependencyList, useEffect, useRef } from 'react'
 
 interface RefetchOptions {
@@ -20,29 +20,22 @@ export const useRefetchQueries = (
   const isRefetched = useRef(false)
   const apolloClient = useApolloClient()
   const couldRefetchNext = useRef(typeof after === 'undefined')
+  const onQueryUpdated: OnQueryUpdated<Promise<ApolloQueryResult<any>>> = (_, { complete }) => {
+    if (complete) {
+      isRefetched.current = true
+    }
+    return complete ?? false
+  }
 
   useEffect(() => {
     if (couldRefetchNext.current && when) {
       if (interval) {
-        const handler = setInterval(() => {
-          apolloClient.refetchQueries({
-            include,
-            onQueryUpdated(_, { complete }) {
-              if (complete) {
-                isRefetched.current = true
-              }
-              return complete
-            },
-          })
-          isRefetched.current = true
-        }, interval)
-
+        const handler = setInterval(() => apolloClient.refetchQueries({ include, onQueryUpdated }), interval)
         return () => {
           clearInterval(handler)
         }
       } else {
-        apolloClient.refetchQueries({ include })
-        isRefetched.current = true
+        apolloClient.refetchQueries({ include, onQueryUpdated })
       }
     }
     couldRefetchNext.current = after !== false

packages/ui/src/forum/components/PostList/PostList.tsx

@@ -7,7 +7,9 @@ import { RowGapBlock } from '@/common/components/page/PageContent'
 import { Pagination } from '@/common/components/Pagination'
 import { Colors } from '@/common/constants'
 import { useLocation } from '@/common/hooks/useLocation'
+import { useRefetchQueries } from '@/common/hooks/useRefetchQueries'
 import { useRouteQuery } from '@/common/hooks/useRouteQuery'
+import { MILLISECONDS_PER_BLOCK } from '@/common/model/formatters'
 import { AnyKeys } from '@/common/types'
 import { getUrl } from '@/common/utils/getUrl'
 import { ForumRoutes } from '@/forum/constant'
@@ -29,8 +31,9 @@ export const PostList = ({ threadId, isThreadActive, isLoading, isDiscussion }:
 
   const navigation = { post: query.get('post'), page: query.get('page') }
   const { isLoading: isLoadingPosts, posts, page, pageCount } = useForumThreadPosts(threadId, navigation)
+  const isRefetched = useRefetchQueries({ interval: MILLISECONDS_PER_BLOCK, include: ['GetForumPosts'] }, [])
 
-  const isReady = useMemo(() => !(isLoading || isLoadingPosts), [posts, pageCount])
+  const isReady = useMemo(() => (!isLoading && !isLoadingPosts) || isRefetched, [posts, pageCount])
   const setPage = useCallback(
     (page: number) => history.replace({ pathname, search: page > 1 ? `page=${page}` : '' }),
     []

packages/ui/src/forum/hooks/useForumThread.ts

@@ -2,10 +2,11 @@ import { useGetForumThreadQuery } from '@/forum/queries/__generated__/forum.gene
 import { asForumThreadWithDetails } from '@/forum/types'
 
 export const useForumThread = (threadId: string) => {
-  const { loading, data } = useGetForumThreadQuery({ variables: { where: { id: threadId } } })
+  const { loading, data, error } = useGetForumThreadQuery({ variables: { where: { id: threadId } } })
 
   return {
     isLoading: loading,
     thread: data && data.thread ? asForumThreadWithDetails(data.thread) : null,
+    hasError: !!error,
   }
 }