Preview: Video optimistic updates

packages/atlas/codegen.config.ts

@@ -2,7 +2,8 @@ import { CodegenConfig } from '@graphql-codegen/cli'
 
 import { customSchemaLoader } from './scripts/customSchemaLoader'
 
-const ENV = process.env.VITE_DEFAULT_DATA_ENV?.toUpperCase() || process.env.VITE_ENV?.toUpperCase() || 'PRODUCTION'
+// const ENV = process.env.VITE_DEFAULT_DATA_ENV?.toUpperCase() || process.env.VITE_ENV?.toUpperCase() || 'PRODUCTION'
+const ENV = 'NEXT'
 const schemaUrl = process.env[`VITE_${ENV}_ORION_URL`]
 if (!schemaUrl) throw new Error(`VITE_${ENV}_ORION_URL is not defined`)
 

packages/atlas/src/api/client/cache.ts

@@ -4,6 +4,7 @@ import { FieldPolicy, FieldReadFunction } from '@apollo/client/cache/inmemory/po
 import { offsetLimitPagination, relayStylePagination } from '@apollo/client/utilities'
 import { parseISO } from 'date-fns'
 
+import { QueryCommentReactionsConnectionArgs } from '../../../../atlas-meta-server/src/api/__generated__/sdk'
 import {
   Query,
   QueryChannelsConnectionArgs,
@@ -119,7 +120,19 @@ const getCommentKeyArgs = (
   const parentCommentId = args?.where?.parentComment?.id_eq
   const videoId = args?.where?.video?.id_eq ?? ctx.variables?.videoId
   const orderBy = args?.orderBy || []
-  return `${parentCommentId}:${videoId}:${orderBy}`
+  return `parentId-${parentCommentId}-:id-${videoId}-:${orderBy}`
+}
+
+const getCommentReactionsKeyArgs = (
+  args: Partial<QueryCommentReactionsConnectionArgs> | null,
+  ctx: {
+    variables?: Record<string, unknown>
+  }
+) => {
+  const memberId = args?.where?.member?.id_eq
+  const videoId = args?.where?.video?.id_eq ?? ctx.variables?.videoId
+  const orderBy = args?.orderBy || []
+  return `memberId-${memberId}-:videoId-${videoId}-:${orderBy}`
 }
 
 const createDateHandler = () => ({
@@ -216,6 +229,9 @@ const queryCacheFields: CachePolicyFields<keyof Query> = {
       return existing?.slice(offset, offset + limit)
     },
   },
+  commentReactions: {
+    ...offsetLimitPagination(getCommentReactionsKeyArgs),
+  },
   commentsConnection: relayStylePagination(getCommentKeyArgs),
   channelById: (existing, { toReference, args }) => {
     return (

packages/atlas/src/api/hooks/comments.ts

@@ -30,7 +30,7 @@ export const useComment = (
   }
 }
 
-export type UserCommentReactions = Record<string, number[]>
+export type UserCommentReactions = Record<string, { reactionId: number; reactionServerId: string }[]>
 export const useUserCommentsReactions = (videoId?: string | null, memberId?: string | null) => {
   const { data } = useGetUserCommentsReactionsQuery({
     variables: {
@@ -42,9 +42,15 @@ export const useUserCommentsReactions = (videoId?: string | null, memberId?: str
 
   return useMemo(
     () => ({
-      userReactions: data?.commentReactions.reduce<Record<string, number[]>>((acc, item) => {
+      userReactions: data?.commentReactions.reduce<UserCommentReactions>((acc, item) => {
         if (item) {
-          acc[item.comment.id] = [...(acc[item.comment.id] ? acc[item.comment.id] : []), item.reactionId]
+          acc[item.comment.id] = [
+            ...(acc[item.comment.id] ? acc[item.comment.id] : []),
+            {
+              reactionId: item.reactionId,
+              reactionServerId: item.id,
+            },
+          ]
         }
         return acc
       }, {}),

packages/atlas/src/api/hooks/useCommentSectionComments.ts

@@ -0,0 +1,38 @@
+import { QueryHookOptions } from '@apollo/client'
+
+import { UNCONFIRMED } from '@/hooks/useOptimisticActions'
+import { createLookup } from '@/utils/data'
+
+import {
+  GetUserCommentsAndVideoCommentsConnectionQuery,
+  GetUserCommentsAndVideoCommentsConnectionQueryVariables,
+  useGetUserCommentsAndVideoCommentsConnectionQuery,
+} from '../queries/__generated__/comments.generated'
+
+export const useCommentSectionComments = (
+  variables?: GetUserCommentsAndVideoCommentsConnectionQueryVariables,
+  opts?: QueryHookOptions<
+    GetUserCommentsAndVideoCommentsConnectionQuery,
+    GetUserCommentsAndVideoCommentsConnectionQueryVariables
+  >
+) => {
+  const { data, loading, ...rest } = useGetUserCommentsAndVideoCommentsConnectionQuery({ ...opts, variables })
+  const userComments = data?.userComments
+  const userCommentLookup = data?.userComments && createLookup(data?.userComments)
+  const unconfirmedComments = data?.videoCommentsConnection.edges
+    .map((edge) => edge.node)
+    .filter((node) => node.id.includes(UNCONFIRMED))
+  const unconfirmedCommentLookup = unconfirmedComments && createLookup(unconfirmedComments)
+
+  const videoComments = data?.videoCommentsConnection?.edges
+    .map((edge) => edge.node)
+    .filter((comment) => userCommentLookup && !userCommentLookup[comment.id] && !unconfirmedCommentLookup?.[comment.id])
+
+  return {
+    userComments,
+    comments: data ? [...(unconfirmedComments || []), ...(userComments || []), ...(videoComments || [])] : undefined,
+    loading: loading,
+    pageInfo: data?.videoCommentsConnection?.pageInfo,
+    ...rest,
+  }
+}