* check new comments every 10 seconds * enhance: clear newComments on child comments when we show a topLevel new comment; cleanup: resolvers, logs * handle comments of comments, new structure to clear newComments on childs * use original recursive comments data structure * correct comment structure after deduplication * faster newComments query deduplication, don't need to know how many comments are there * cleanup: comments on newComments fetches and dedupes * cleanup, use correct function declarations * stop polling after 30 minutes, pause polling if user is not on the page * ActionTooltip indicating that the user is in a live comment section * handleVisibilityChange to control polling by visibility * paused polling styling, check activity on 1 minute intervals and visibility change, light cleanup * user can resume polling without refreshing the page * better naming, straightforward dedupeComment on newComment arrival * cleanup: better naming, get latest comment creation, correct order of comment injection * cleanup: refactor live comments related functions to use-live-comments.js * refactor: clearer naming, optimized polling and date retrieval logic, use of constants, general cleanup * ui: place ShowNewComments in the bottom-right corner of nested comments * fix: make updateQuery sort-aware to correctly inject the comment in the correct Item query * cleanup: better naming; fix: usecallback on live comments component; fix leak on useEffect because of missing sort atomic apollo cache manipulations; manage top sort not being present in item query cache queue nested comments without a parent, retry on the next poll fix commit messages * fix: don't show unpaid comments; cleanup: compact cache merge/dedupe, queue comments via state * fix: read new comments fragments to inject fresh new comments, fixing dropped comments; ui: show amount of new comments refactor: correct function positioning; cleanup: useless logs * enhance: queuedComments Ref, cache-and-network fetch policy; freshNewComments readFragment fallback to received comment * cleanup: detailed comments and better ShowNewComment text * fix: while showing new comments, also update ncomments for UI and pagination * refactor: ShowNewComments is its own component; cleanup: proven useless dedupe on ShowNewComments, count nested ncomments from fresh new comments * enhance: direct latest comment createdAt calc with reduce * cleanup queue on unmount * feat: live comments indicator for bottomed-out replies, ncomments updates; fix: nested comment structures - new comments indicator for bottomed-out replies - ncomments sync for parent and its ancestors - limited comments fragment for comments that don't have CommentsRecursive - reduce cache complexity by removing useless roundtrips ux: live comments indicator on bottomedOut replies fix: dedupe newComments before displaying ShowNewComments to avoid false positives enhance: store ids of new comments in the cache, instead of carrying full comments that would get discarded anyway hotfix: newComments deduplication ID mismatch, filter null comments from freshNewComments fix: ncomments not updating for all comment levels; refactor: share Reply update ancestors' ncomments function with ShowNewComments cleanup: better naming to indicate the total number of comments including nested comments fix: increment parent comment ncomments cleanup: Items that will have comments will always have a structure where item.comments is true cleanup: reduce code complexity checking the nested comment update result instead of preventively reading the fragment cleanup: avoid double-updating ncomments on parent fix: don't use CommentsRecursive for bottomed-out comments cleanup: better fragment naming; add TODO for absolute bottom comments * enhance: give the possibility to show all new comments of a thread, even nested * enhance: change favicon on new comments; warn: prop-drilling * refactor: merge ShowAllNewComments with ShowNewComments, better usage of props * hotfix: isThread should be recognized when an item has 2 items in its path * fix regression: topLevel comments not showing * fix: avoid trying to show new comments even after the depth limit; todo: two recursive counts might be too much * favicon-new-comment, fix favicon showing also when there aren't new comments * enhance: highlight new comments when shown; nit-fixes and cleanups fixes: - sync local commentsViewedAt on comment injection, to avoid double outline on item re-visit - avoid double highlighting when client-side visiting an item and injecting a new comment cleanups: - move ShowNewComments functions to dedicated lib/comments.js - bust auto-show enhancement due to bad useEffect usage todos: - two recursive counts might be too much * cleanup: move cache manipulation functions, comments for comments.js - lib/comments.js explanations for its functions - itemUpdateQuery, commentUpdateFragment, getLatestCommentCreatedAt on comments.js - format too many imports from comments.js todo: - we're not deduping comments for isThread, which forces us at this state, to dedupe twice * enhance: highlight new comment with injected field, recursive injection in every case but top level; cleanups cleanups: - better separation of concerns for lib/comments.js - don't show new comment count, avoiding useless complexity - simpler topLevel/nested logic - add comments * backport live comments logic enhancements use-live-comments: - remove useless dedupe against already present comments - check newComments.comments length to tell if there are new comments - code reordering show-new-comments: - show all new comments recursively for nested comments - get always the newest comments to inject also their own child new comments - update local storage commentsViewedAt on comment injection - respect depth on comment injection comments.js - apollo cache manipulations now live here * hotfix: handle undefined item.comments.comments on dedupe * hotfix: fix lint after merge * hotfix: limited fragment for recursive comment collection; protect from null fragments; add missing deps to memoization * merge: missing memo deps, limited fragment for non-recursive comments; fix: don't highlight injected comments with classic outline; cleanup: comments * docs: clarify ncomments updates * cleanup: remove unused export * count and show only the direct new comments and recursively their children enhance: dedupe against existing comments only in the component enhance: recursive count/injection share the same logic * fix regression on top level counting * hotfix: introduce readNestedCommentsFragment in lib/comments.js * fix: count also existing comments of a new comment; cleanup: use readCommentFragment also for prepareComments; reduce freshNewComments usage * add support for comments at the deepest level fixes: - client-side navigation re-fetched all new comments because 'after' was cached, now the latest new comment time persists in sessionStorage enhancements: - use CommentWithNewMinimal fragment fallback for comments at the deepest level - tweak ReplyOnAnotherPage to show also how many direct new comments are there cleanup: - queue management is not needed anymore, therefore it has been removed * cleanup: remove logs * revert counting on ReplyOnAnotherPage, TODO for enhancements PR * move ShowNewComments to CommentsHeader for top level comments * fix: update commentsViewedAfterComment to support ncomments * fix typo, lint * cleanup: remove old CSS * enhance: inject topLevel and its children new comments, simplify injection logic - top-level and nested comment handling share the same recursion logic - ShowNewComments references the item object for every type of comments — note: item from item-full.js is passed to comments.js - depth now starts at 0 to support top level comments - injection and counting now reach the deepest level, updating also the deepest comment * cleanup: remove unused topLevel prop * fix: deepest comments don't have CommentsRecursive structure, don't access it on injection * move top level ShowNewComments above CommentsHeader; preserve space to avoid vertical layout shifting * cleanup: remove unused item on CommentsHeader * enhance: scroll and load new comments via a floating button using IntersectionObserver API; fix merge: restore injected field for outlining * style: transparent and animated floating button, new comment dot color aligned to new comments accent color * cleanup: less redundancy between the two types of buttons; enhance: show the floating button only if we're past the element, not only if it's not visible * enhance: outline newly injected comments using root item's lastCommentAt * cleanup: remove transparency of floating comments button, remove other traces of the injected field * adapt and restore showing all new comments of a thread * fix: respect deepest comments structure on injection, adjust depth limit; cleanup: consistent naming * fix: avoid double outlines because of all conditions being met * cleanup: remove favicon, dedicate space for useVisibility, correct comments * ux: show all new comments of a thread only if its children have them * mark injected comments in the cache for reliable outlining * cleanup: clearer structure, more explaining * optimize: better closure usage, remove duplicate code, immutable payloads - ncomments count logic shared with injection and counting - don't re-create and persist closures for every injection, rather temporarily on injection - access item hierarchy once, avoid creating new arrays - don't create and mutate payloads, rather know what to return fixes: - fix wrong parameters on traverseNewComments recursion * cleanup: further clarifications * safer rootLastCommentAt usage for injected comments outlining * hotfix: ignore nDirectComments server updates when the item being updated has pending newComments, fixes CommentEdit consequences * simpler show all new comments text for thread comments, regardless of how many * fix: reference the correct Item for newComments reading, during nDirectComments apollo merge --------- Co-authored-by: Keyan <34140557+huumn@users.noreply.github.com>
396 lines
12 KiB
JavaScript
396 lines
12 KiB
JavaScript
import { ApolloClient, InMemoryCache, HttpLink, makeVar, split, from } from '@apollo/client'
|
|
import { BatchHttpLink } from '@apollo/client/link/batch-http'
|
|
import { decodeCursor, LIMIT } from './cursor'
|
|
import { COMMENTS_LIMIT, SSR } from './constants'
|
|
import { RetryLink } from '@apollo/client/link/retry'
|
|
import { isMutationOperation, isQueryOperation } from '@apollo/client/utilities'
|
|
function isFirstPage (cursor, existingThings, limit = LIMIT) {
|
|
if (cursor) {
|
|
const decursor = decodeCursor(cursor)
|
|
return decursor.offset === limit
|
|
} else {
|
|
// we don't have anything cached, or our existing items are less than
|
|
// or equal to a full page
|
|
return existingThings?.length < limit
|
|
}
|
|
}
|
|
|
|
const defaultFetchPolicy = SSR ? 'cache-only' : 'cache-first'
|
|
const defaultNextFetchPolicy = SSR ? 'cache-only' : 'cache-first'
|
|
|
|
export default function getApolloClient () {
|
|
if (SSR) {
|
|
return getClient(`${process.env.SELF_URL}/api/graphql`)
|
|
} else {
|
|
window.apolloClient ||= getClient('/api/graphql')
|
|
return window.apolloClient
|
|
}
|
|
}
|
|
|
|
export const meAnonSats = {}
|
|
|
|
const retryLink = new RetryLink({
|
|
delay: {
|
|
initial: 300,
|
|
max: 30000,
|
|
jitter: true
|
|
},
|
|
attempts: {
|
|
max: Infinity,
|
|
retryIf: (error, _operation) => {
|
|
// retry only if the error is not a mutation and the operation is a query
|
|
return !!error && !isMutationOperation(_operation.query) && isQueryOperation(_operation.query)
|
|
}
|
|
}
|
|
})
|
|
|
|
function getClient (uri) {
|
|
const link = from([
|
|
retryLink,
|
|
split(
|
|
// batch zaps if wallet is enabled so they can be executed serially in a single request
|
|
operation => operation.operationName === 'act' && operation.variables.act === 'TIP' && operation.getContext().batch,
|
|
new BatchHttpLink({ uri, batchInterval: 1000, batchDebounce: true, batchMax: 0, batchKey: op => op.variables.id }),
|
|
new HttpLink({ uri })
|
|
)
|
|
])
|
|
|
|
return new ApolloClient({
|
|
link,
|
|
ssrMode: SSR,
|
|
connectToDevTools: process.env.NODE_ENV !== 'production',
|
|
cache: new InMemoryCache({
|
|
freezeResults: true,
|
|
// https://github.com/apollographql/apollo-client/issues/7648
|
|
possibleTypes: {
|
|
PaidAction: [
|
|
'ItemPaidAction',
|
|
'ItemActPaidAction',
|
|
'PollVotePaidAction',
|
|
'SubPaidAction',
|
|
'DonatePaidAction',
|
|
'ReceivePaidAction'
|
|
],
|
|
Notification: [
|
|
'Reply',
|
|
'Votification',
|
|
'Mention',
|
|
'Invitification',
|
|
'Earn',
|
|
'JobChange',
|
|
'InvoicePaid',
|
|
'WithdrawlPaid',
|
|
'Referral',
|
|
'CowboyHat',
|
|
'NewHorse',
|
|
'LostHorse',
|
|
'NewGun',
|
|
'LostGun',
|
|
'FollowActivity',
|
|
'ForwardedVotification',
|
|
'Revenue',
|
|
'SubStatus',
|
|
'TerritoryPost',
|
|
'TerritoryTransfer',
|
|
'Reminder',
|
|
'ItemMention',
|
|
'Invoicification'
|
|
],
|
|
WalletOrTemplate: [
|
|
'Wallet',
|
|
'WalletTemplate'
|
|
]
|
|
},
|
|
typePolicies: {
|
|
Sub: {
|
|
keyFields: ['name'],
|
|
fields: {
|
|
optional: {
|
|
merge: true
|
|
}
|
|
}
|
|
},
|
|
User: {
|
|
// https://www.apollographql.com/docs/react/caching/cache-field-behavior/#merging-non-normalized-objects
|
|
fields: {
|
|
privates: {
|
|
merge: true
|
|
},
|
|
optional: {
|
|
merge: true
|
|
},
|
|
bio: {
|
|
merge: true
|
|
}
|
|
}
|
|
},
|
|
Fact: {
|
|
keyFields: ['id', 'type']
|
|
},
|
|
Wallet: {
|
|
fields: {
|
|
vaultEntries: {
|
|
replace: true
|
|
}
|
|
}
|
|
},
|
|
Query: {
|
|
fields: {
|
|
sub: {
|
|
keyArgs: ['name'],
|
|
merge (existing, incoming) {
|
|
return incoming
|
|
}
|
|
},
|
|
topSubs: {
|
|
keyArgs: ['when', 'by', 'from', 'to', 'limit'],
|
|
merge (existing, incoming, { args }) {
|
|
if (isFirstPage(incoming.cursor, existing?.subs, args.limit)) {
|
|
return incoming
|
|
}
|
|
|
|
return {
|
|
cursor: incoming.cursor,
|
|
subs: [...(existing?.subs || []), ...incoming.subs]
|
|
}
|
|
}
|
|
},
|
|
topUsers: {
|
|
keyArgs: ['when', 'by', 'from', 'to', 'limit'],
|
|
merge (existing, incoming, { args }) {
|
|
if (isFirstPage(incoming.cursor, existing?.users, args.limit)) {
|
|
return incoming
|
|
}
|
|
|
|
return {
|
|
cursor: incoming.cursor,
|
|
users: [...(existing?.users || []), ...incoming.users]
|
|
}
|
|
}
|
|
},
|
|
mySubscribedUsers: {
|
|
keyArgs: false,
|
|
merge (existing, incoming) {
|
|
if (isFirstPage(incoming.cursor, existing?.users)) {
|
|
return incoming
|
|
}
|
|
|
|
return {
|
|
cursor: incoming.cursor,
|
|
users: [...(existing?.users || []), ...incoming.users]
|
|
}
|
|
}
|
|
},
|
|
myMutedUsers: {
|
|
keyArgs: false,
|
|
merge (existing, incoming) {
|
|
if (isFirstPage(incoming.cursor, existing?.users)) {
|
|
return incoming
|
|
}
|
|
|
|
return {
|
|
cursor: incoming.cursor,
|
|
users: [...(existing?.users || []), ...incoming.users]
|
|
}
|
|
}
|
|
},
|
|
userSuggestions: {
|
|
keyArgs: ['q', 'limit'],
|
|
merge (existing, incoming) {
|
|
return incoming
|
|
}
|
|
},
|
|
topCowboys: {
|
|
keyArgs: [],
|
|
merge (existing, incoming) {
|
|
if (isFirstPage(incoming.cursor, existing?.users)) {
|
|
return incoming
|
|
}
|
|
|
|
return {
|
|
cursor: incoming.cursor,
|
|
users: [...(existing?.users || []), ...incoming.users]
|
|
}
|
|
}
|
|
},
|
|
items: {
|
|
keyArgs: ['sub', 'sort', 'type', 'name', 'when', 'by', 'from', 'to', 'limit'],
|
|
merge (existing, incoming) {
|
|
if (isFirstPage(incoming.cursor, existing?.items)) {
|
|
return incoming
|
|
}
|
|
|
|
return {
|
|
cursor: incoming.cursor,
|
|
items: [...(existing?.items || []), ...incoming.items],
|
|
pins: [...(existing?.pins || []), ...(incoming.pins || [])],
|
|
ad: incoming?.ad || existing?.ad
|
|
}
|
|
}
|
|
},
|
|
related: {
|
|
keyArgs: ['id', 'title', 'minMatch', 'limit'],
|
|
merge (existing, incoming, { args }) {
|
|
if (isFirstPage(incoming.cursor, existing?.items, args.limit)) {
|
|
return incoming
|
|
}
|
|
|
|
return {
|
|
cursor: incoming.cursor,
|
|
items: [...(existing?.items || []), ...incoming.items]
|
|
}
|
|
}
|
|
},
|
|
search: {
|
|
keyArgs: ['q', 'sub', 'sort', 'what', 'when', 'from', 'to', 'limit'],
|
|
merge (existing, incoming) {
|
|
if (isFirstPage(incoming.cursor, existing?.items)) {
|
|
return incoming
|
|
}
|
|
|
|
return {
|
|
cursor: incoming.cursor,
|
|
items: [...(existing?.items || []), ...incoming.items]
|
|
}
|
|
}
|
|
},
|
|
searchUsers: {
|
|
keyArgs: ['q', 'limit', 'similarity'],
|
|
merge (existing, incoming) {
|
|
return [...(existing?.searchUsers || []), ...incoming]
|
|
}
|
|
},
|
|
notifications: {
|
|
keyArgs: ['inc'],
|
|
merge (existing, incoming) {
|
|
if (isFirstPage(incoming.cursor, existing?.notifications)) {
|
|
return incoming
|
|
}
|
|
|
|
return {
|
|
cursor: incoming.cursor,
|
|
earn: existing?.earn || incoming.earn,
|
|
notifications: [...(existing?.notifications || []), ...incoming.notifications],
|
|
lastChecked: existing?.lastChecked || incoming.lastChecked
|
|
}
|
|
}
|
|
},
|
|
numBolt11s: {
|
|
keyArgs: [],
|
|
merge (existing, incoming) {
|
|
return incoming
|
|
}
|
|
},
|
|
walletHistory: {
|
|
keyArgs: ['inc'],
|
|
merge (existing, incoming) {
|
|
if (isFirstPage(incoming.cursor, existing?.facts)) {
|
|
return incoming
|
|
}
|
|
|
|
return {
|
|
cursor: incoming.cursor,
|
|
facts: [...(existing?.facts || []), ...incoming.facts]
|
|
}
|
|
}
|
|
},
|
|
walletLogs: {
|
|
keyArgs: ['protocolId'],
|
|
merge (existing, incoming) {
|
|
return incoming
|
|
}
|
|
},
|
|
failedInvoices: {
|
|
keyArgs: [],
|
|
merge (existing, incoming) {
|
|
return incoming
|
|
}
|
|
}
|
|
}
|
|
},
|
|
Item: {
|
|
fields: {
|
|
comments: {
|
|
keyArgs: ['sort'],
|
|
merge (existing, incoming) {
|
|
if (isFirstPage(incoming.cursor, existing?.comments, COMMENTS_LIMIT)) {
|
|
return incoming
|
|
}
|
|
|
|
return {
|
|
cursor: incoming.cursor,
|
|
comments: [...(existing?.comments || []), ...incoming.comments]
|
|
}
|
|
}
|
|
},
|
|
nDirectComments: {
|
|
merge (existing, incoming, { variables, readField, toReference }) {
|
|
// if the item has new comments, don't merge the nDirectComments field
|
|
// preventing new comments not yet injected from being counted, thus causing bottomedOut
|
|
if (variables?.id && existing !== undefined) {
|
|
const item = toReference({
|
|
__typename: 'Item',
|
|
id: variables.id
|
|
})
|
|
const newComments = readField('newComments', item)
|
|
if (newComments?.length > 0) {
|
|
return existing
|
|
}
|
|
}
|
|
|
|
return incoming
|
|
}
|
|
},
|
|
newComments: {
|
|
read (newComments) {
|
|
return newComments || []
|
|
}
|
|
},
|
|
injected: {
|
|
read (injected) {
|
|
return injected || false
|
|
}
|
|
},
|
|
meAnonSats: {
|
|
read (existingAmount, { readField }) {
|
|
if (SSR) return null
|
|
|
|
const itemId = readField('id')
|
|
|
|
// we need to use reactive variables such that updates
|
|
// to local state propagate correctly
|
|
// see https://www.apollographql.com/docs/react/local-state/reactive-variables
|
|
let reactiveVar = meAnonSats[itemId]
|
|
if (!reactiveVar) {
|
|
const storageKey = `TIP-item:${itemId}`
|
|
const existingAmount = Number(window.localStorage.getItem(storageKey) || '0')
|
|
reactiveVar = makeVar(existingAmount || 0)
|
|
meAnonSats[itemId] = reactiveVar
|
|
}
|
|
|
|
return reactiveVar()
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}),
|
|
assumeImmutableResults: true,
|
|
queryDeduplication: true,
|
|
defaultOptions: {
|
|
watchQuery: {
|
|
initialFetchPolicy: defaultFetchPolicy,
|
|
fetchPolicy: defaultFetchPolicy,
|
|
nextFetchPolicy: defaultNextFetchPolicy,
|
|
ssr: SSR
|
|
},
|
|
query: {
|
|
initialFetchPolicy: defaultFetchPolicy,
|
|
fetchPolicy: defaultFetchPolicy,
|
|
nextFetchPolicy: defaultNextFetchPolicy,
|
|
ssr: SSR
|
|
}
|
|
}
|
|
})
|
|
}
|