feat: show post score

src/components/posts/LatestPostsPage.tsx

@@ -5,6 +5,7 @@ import config from 'src/config'
 import { DEFAULT_PAGE_SIZE } from 'src/config/ListData.config'
 import { useDfApolloClient } from 'src/graphql/ApolloProvider'
 import { GetLatestPostIds } from 'src/graphql/__generated__/GetLatestPostIds'
+import { setPostScores } from 'src/rtk/features/posts/postScoreSlice'
 import { fetchPosts } from 'src/rtk/features/posts/postsSlice'
 import { DataSourceTypes, PostId } from 'src/types'
 import { PostKind } from 'src/types/graphql-global-types'
@@ -48,6 +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)
+    dispatch(
+      setPostScores(
+        posts.data.map(({ persistentPostId, score }) => ({ id: persistentPostId, score })),
+      ),
+    )
   } else if (!isSuggested(filter.type) && client) {
     const data = await loadPostsByQuery({ client, kind, offset, filter })
     const { posts } = data as GetLatestPostIds

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

@@ -1,5 +1,7 @@
 import { FC, useState } from 'react'
 import { CommentSection } from 'src/components/comments/CommentsSection'
+import { useAppSelector } from 'src/rtk/app/store'
+import { selectPostScore } from 'src/rtk/features/posts/postScoreSlice'
 import { SpaceData } from 'src/types'
 import { InfoPostPreview, PostActionsPanel, PostNotFound } from './helpers'
 import { PreviewProps } from './PostPreview'
@@ -17,6 +19,8 @@ export const RegularPreview: ComponentType = props => {
 
   const { isSharedPost } = postDetails.post.struct
 
+  const score = useAppSelector(state => selectPostScore(state, postDetails.post.id))
+
   return !isSharedPost ? (
     <>
       <InfoPostPreview
@@ -26,6 +30,7 @@ export const RegularPreview: ComponentType = props => {
         withTags={withTags}
         withMarginForCardType={!withActions}
       />
+      {score?.score}
       {withActions && (
         <PostActionsPanel
           postDetails={postDetails}

src/rtk/app/rootReducer.ts

@@ -26,6 +26,7 @@ import onBoarding from '../features/onBoarding/onBoardingSlice'
 import mySpacePermissions from '../features/permissions/mySpacePermissionsSlice'
 import myFeed from '../features/posts/myFeedSlice'
 import ownPostIds from '../features/posts/ownPostIdsSlice'
+import postScores from '../features/posts/postScoreSlice'
 import posts from '../features/posts/postsSlice'
 import followedAccountIds from '../features/profiles/followedAccountIdsSlice'
 import profileSpaces from '../features/profiles/profilesSlice'
@@ -75,6 +76,7 @@ const rootReducer = combineReducers({
   userStatistics,
   generalStatistics,
   leaderboard,
+  postScores,
 })
 
 export type RootState = ReturnType<typeof rootReducer>

src/rtk/features/posts/postScoreSlice.ts

@@ -0,0 +1,27 @@
+import { createEntityAdapter, createSlice } from '@reduxjs/toolkit'
+import { RootState } from 'src/rtk/app/rootReducer'
+
+// TODO: remove this slice when score is not needed to be displayed anymore
+export type PostScore = {
+  id: string
+  score: number
+}
+
+const sliceName = 'postScore'
+
+const adapter = createEntityAdapter<PostScore>()
+const selectors = adapter.getSelectors<RootState>(state => state.postScores)
+
+export const selectPostScore = selectors.selectById
+
+const slice = createSlice({
+  name: sliceName,
+  initialState: adapter.getInitialState(),
+  reducers: {
+    setPostScores: adapter.upsertMany,
+  },
+})
+
+export const { setPostScores } = slice.actions
+
+export default slice.reducer