Improve Pinned Post

src/components/posts/LatestPostsPage.tsx

@@ -2,7 +2,6 @@ import { FC, useCallback, useEffect, useState } from 'react'
 import { useDispatch } from 'react-redux'
 import { useSubsocialApi } from 'src/components/substrate/SubstrateContext'
 import config from 'src/config'
-import { PINNED_POST_ID } from 'src/config/constants'
 import { DEFAULT_PAGE_SIZE } from 'src/config/ListData.config'
 import { useDfApolloClient } from 'src/graphql/ApolloProvider'
 import { GetLatestPostIds } from 'src/graphql/__generated__/GetLatestPostIds'
@@ -17,6 +16,7 @@ import { DateFilterType, LoadMoreValues, PostFilterType } from '../main/types'
 import { isSuggested, loadPostsByQuery } from '../main/utils'
 import { getHotPosts } from '../utils/datahub/posts'
 import { getSuggestedPostIdsByPage, loadSuggestedPostIds } from './loadSuggestedPostIdsFromEnv'
+import { getPinnedPost } from './pinned-post'
 import { PublicPostPreviewById } from './PublicPostPreview'
 
 type Props = {
@@ -49,10 +49,11 @@ export const loadMorePostsFn = async (loadMoreValues: LoadMoreValues<PostFilterT
   if (filter.type === 'hot') {
     const posts = await getHotPosts({ offset, limit: DEFAULT_PAGE_SIZE })
     postIds = posts.data.map(value => value.persistentPostId)
+    const pinnedPostId = await getPinnedPost(client)
     if (offset === 0) {
-      postIds = Array.from(new Set([PINNED_POST_ID, ...postIds]))
+      postIds = Array.from(new Set([pinnedPostId, ...postIds].filter(Boolean) as string[]))
     } else {
-      postIds = postIds.filter(id => id !== PINNED_POST_ID)
+      postIds = postIds.filter(id => id !== pinnedPostId)
     }
   } else if (!isSuggested(filter.type) && client) {
     const data = await loadPostsByQuery({ client, kind, offset, filter })

src/components/posts/loadSuggestedPostIdsFromEnv.ts

@@ -1,11 +1,11 @@
 import { SubsocialApi } from '@subsocial/api'
 import config from 'src/config'
-import { PINNED_POST_ID } from 'src/config/constants'
 import { getPostIdsBySpaces } from 'src/graphql/apis'
 import { GqlClient } from 'src/graphql/ApolloProvider'
 import { AnySpaceId, PostId } from 'src/types'
 import { descSort } from 'src/utils'
 import { getPageOfIds } from '../utils/getIds'
+import { getPinnedPost } from './pinned-post'
 
 let suggestedPostIds: string[] | undefined = undefined
 
@@ -29,8 +29,12 @@ export const loadSuggestedPostIds = async ({
     suggestedPostIds = suggestedPostIdsArray.flat()
     return descSort(suggestedPostIds)
   } else if (client) {
-    const postIds = await getPostIdsBySpaces(client, { spaceIds: recommendedIds })
-    return Array.from(new Set([PINNED_POST_ID, ...postIds]))
+    const [postIds, pinnedPostId] = await Promise.all([
+      getPostIdsBySpaces(client, { spaceIds: recommendedIds }),
+      getPinnedPost(client),
+    ] as const)
+
+    return Array.from(new Set([pinnedPostId, ...postIds].filter(Boolean) as string[]))
   }
   return []
 }

src/components/posts/pinned-post.ts

@@ -0,0 +1,28 @@
+import { getLast3CommunityHighlights } from 'src/graphql/apis'
+import { GqlClient } from 'src/graphql/ApolloProvider'
+
+const PINNED_POST_IDS: string[] = []
+const PINNED_POST_ID = PINNED_POST_IDS[Math.floor(Math.random() * PINNED_POST_IDS.length)]
+
+// precalculate the randomized index to avoid having different pinned post on multiple calls
+const randomizedIndex = Math.floor(Math.random() * 3)
+let randomizedPostId: string | null = null
+export async function getPinnedPost(client: GqlClient | undefined) {
+  if (PINNED_POST_ID) return PINNED_POST_ID
+  if (randomizedPostId) return randomizedPostId
+  if (!client) return null
+
+  try {
+    const postIds = await getLast3CommunityHighlights(client)
+    const randomIndex = Math.min(randomizedIndex, postIds.length - 1)
+    randomizedPostId = postIds[randomIndex]
+    return randomizedPostId
+  } catch (err) {
+    console.log('Error getting community highlights', err)
+    return null
+  }
+}
+
+export function isPinnedPost(postId: string) {
+  return postId === PINNED_POST_ID || postId === randomizedPostId
+}

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

@@ -19,7 +19,6 @@ import FollowSpaceButton from 'src/components/utils/FollowSpaceButton'
 import Segment from 'src/components/utils/Segment'
 import { ActiveVoters, PostVoters } from 'src/components/voting/ListVoters'
 import SuperLike from 'src/components/voting/SuperLike'
-import { isPinnedPost } from 'src/config/constants'
 import { maintenanceMsg } from 'src/config/env'
 import { resolveIpfsUrl } from 'src/ipfs'
 import messages from 'src/messages'
@@ -46,6 +45,7 @@ import { formatDate, isHidden, toShortUrl, useIsVisible } from '../../utils'
 import { SummarizeMd } from '../../utils/md/SummarizeMd'
 import ViewTags from '../../utils/ViewTags'
 import Embed, { getEmbedLinkType } from '../embed/Embed'
+import { isPinnedPost } from '../pinned-post'
 import { ShareDropdown } from '../share/ShareDropdown'
 import ViewPostLink from '../ViewPostLink'
 import styles from './helpers.module.sass'

src/config/constants.ts

@@ -23,12 +23,6 @@ export const CREATORS_CONSTANTS = {
   },
 }
 
-const PINNED_POST_IDS = ['']
-export const PINNED_POST_ID = PINNED_POST_IDS[Math.floor(Math.random() * PINNED_POST_IDS.length)]
-export function isPinnedPost(postId: string) {
-  return PINNED_POST_ID === postId
-}
-
 const WHITELISTED_FOR_NEW_FEATURES = [
   '3tJYxJN55FtVeZgX4WdwieZXDp4HF62TRVj11tY2aXHdrYus',
   '3rzZpUCan9uAA9VSH12zX552Y6rfemGR3hWeeLmhNT1EGosL',

src/graphql/apis/index.ts

@@ -394,3 +394,14 @@ export async function searchResults(client: GqlClient, variables: GetSearchResul
 
   return hits
 }
+
+const COMMUNITY_SPACE_ID = '1244'
+export async function getLast3CommunityHighlights(client: GqlClient) {
+  const res = await client.query<{ posts: { id: string }[] }, { spaceId: string }>({
+    query: q.GET_LAST_3_COMMUNITY_HIGHLIGHTS,
+    variables: { spaceId: COMMUNITY_SPACE_ID },
+  })
+
+  const posts = res.data.posts ?? []
+  return posts.map(post => post.id)
+}

src/graphql/queries.ts

@@ -783,3 +783,14 @@ export const GET_SEARCH_RESULTS = gql`
     }
   }
 `
+
+// Community Highlights
+// ------------------------------------------------------------------------------------
+
+export const GET_LAST_3_COMMUNITY_HIGHLIGHTS = gql`
+  query GetLast3CommunityHighlights($spaceId: String!) {
+    posts(limit: 3, orderBy: createdAtTime_DESC, where: { space: { id_eq: $spaceId } }) {
+      id
+    }
+  }
+`