9323869003

Committed 31 May 2024 08:20PM UTC coverage: 31.882% (-0.02%) from 31.905%

Build # 9323869003

Build Type

Pull #9346

github

Committed by

darkruby501

Commit Message

Merge branch 'subscribed-feed-launch' of https://github.com/LessWrong2/LessWrong2 into subscribed-feed-launch

Pull Request Pull Request #9346: Subscribed feed launch

Run Details

4815 of 39328 branches covered (12.24%)

Branch coverage included in aggregate %.

64 of 204 new or added lines in 18 files covered. (31.37%)

5 existing lines in 5 files now uncovered.

27971 of 63509 relevant lines covered (44.04%)

180.23 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

10.81

/packages/lesswrong/components/common/MixedTypeFeed.tsx

import React, { useRef, useEffect } from 'react';
import { fragmentTextForQuery, registerComponent, Components } from '../../lib/vulcan-lib';
import { useQuery, gql, ObservableQuery, QueryHookOptions, WatchQueryFetchPolicy } from '@apollo/client';
import { useOnPageScroll } from './withOnPageScroll';
import { isClient } from '../../lib/executionEnvironment';
import * as _ from 'underscore';
import { useOrderPreservingArray } from '../hooks/useOrderPreservingArray';

const loadMoreDistance = 500;

export interface FeedRequest<CutoffType> {
  cutoff: CutoffType|null,
  limit: number,
}
export interface FeedResponse<CutoffType, ResultType> {
  results: Array<ResultType>,
  error: any,
  cutoff: CutoffType|null,
}

const getQuery = ({resolverName, resolverArgs, fragmentArgs, sortKeyType, renderers}: {
  resolverName: string,
  resolverArgs: any,
  fragmentArgs: any,
  sortKeyType: string,
  renderers: any,
}) => {
  const fragmentsUsed = _.filter(Object.keys(renderers).map(r => renderers[r].fragmentName), f=>f);
  const queryArgsList=["$limit: Int", `$cutoff: ${sortKeyType}`, "$offset: Int",
    ...(resolverArgs ? Object.keys(resolverArgs).map(k => `$${k}: ${resolverArgs[k]}`) : []),
    ...(fragmentArgs ? Object.keys(fragmentArgs).map(k => `$${k}: ${fragmentArgs[k]}`) : []),
  ];
  const resolverArgsList=["limit: $limit", "cutoff: $cutoff", "offset: $offset",
    ...(resolverArgs ? Object.keys(resolverArgs).map(k => `${k}: $${k}`) : []),
  ];

  return gql`
    query ${resolverName}Query(${queryArgsList.join(", ")}) {
      ${resolverName}(${resolverArgsList.join(", ")}) {
        __typename
        cutoff
        endOffset
        results {
          type
          ${Object.keys(renderers).map(rendererName =>
            renderers[rendererName].fragmentName
              ? `${rendererName} { ...${renderers[rendererName].fragmentName} }`
              : ''
          )}
        }
      }
    }
    ${fragmentTextForQuery(fragmentsUsed)}
  `
}

interface FeedRenderer<FragmentName extends keyof FragmentTypes> {
  fragmentName: FragmentName,
  render: (result: FragmentTypes[FragmentName]) => React.ReactNode,
}

// An infinitely scrolling feed of elements, which may be of multiple types.
// This should have a corresponding server-side resolver created using
// `defineFeedResolver`.
//
// This displays a list list of items, loading more pages of results when the
// scroll position gets within `loadMoreDistance` pixels of the bottom. This
// uses Apollo's `fetchMore` to handle loading more elements.
//
// Results have type ResultType and are rendered into React elements by the
// renderResult function. If not provided, the results are presumed to be usable
// as React elements as-is (ie, strings).
const MixedTypeFeed = (args: {
  resolverName: string,
  
  // Types for parameters given to the resolver, as an object mapping from
  // argument names to graphQL type strings.
  resolverArgs?: Partial<Record<string,string>>,
  
  // Values for parameters given to the resolver, as an object mapping
  // from argument names to graphQL type strings.
  resolverArgsValues?: Partial<Record<string,any>>,
  
  // Types for extra arguments used in result fragments, as an object mapping
  // from argument names to graphQL type strings.
  fragmentArgs?: Partial<Record<string,string>>,
  
  // Values for extra arguments used in result fragments, as an object mapping
  // from argument names to argument values.
  fragmentArgsValues?: Partial<Record<string,any>>,
  
  // GraphQL name of the type results are sorted by.
  sortKeyType: string,
  
  // Renderers to convert results into React nodes.
  renderers: Partial<Record<string,FeedRenderer<any>>>,
  
  // The number of elements on the first page, which is included with SSR.
  firstPageSize?: number,
  
  // The number of elements per page, on pages other than the first page.
  pageSize?: number,
  
  // Ref that will be populated with a function that makes this feed refetch
  // (refetching everything, shrinking it to one page, and potentially scrolling
  // up by a bunch.)
  refetchRef?: {current: null|ObservableQuery['refetch']},

  // Used to override the nextFetchPolicy
  nextFetchPolicy?: WatchQueryFetchPolicy,

  // By default, MixedTypeFeed preserves the order of elements that persist across refetches.  If you don't want that, pass in true.
  reorderOnRefetch?: boolean,
  
}) => {
  const { resolverName, resolverArgs=null, resolverArgsValues=null, fragmentArgs=null, fragmentArgsValues=null, sortKeyType, renderers, firstPageSize=20, pageSize=20, refetchRef, nextFetchPolicy, reorderOnRefetch='cache-only' } = args;
  
  // Reference to a bottom-marker used for checking scroll position.
  const bottomRef = useRef<HTMLDivElement|null>(null);
  
  // Whether there is a pending query. This is indirect (inside an object)
  // because it's accessed from inside callbacks, where the timing of state
  // updates would be a problem.
  const queryIsPending = useRef(false);
  
  const {Loading} = Components;
  
  const query = getQuery({resolverName, resolverArgs, fragmentArgs, sortKeyType, renderers});
  const {data, error, fetchMore, refetch} = useQuery(query, {
    variables: {
      ...resolverArgsValues,
      ...fragmentArgsValues,
      cutoff: null,
      offset: 0,
      limit: firstPageSize,
    },
    fetchPolicy: "cache-and-network",
    nextFetchPolicy,
    ssr: true,
  });
  
  if (refetchRef && refetch)
    refetchRef.current = refetch;
  
  // Whether we've reached the end. The end-marker is when a query returns null
  // for the cutoff.
  const reachedEnd = (data && data[resolverName] && !data[resolverName].cutoff);
  
  const keyFunc = (result: any) => `${result.type}_${result[result.type]?._id}`; // Get a unique key for each result. Used for sorting and deduplication.

  // maybeStartLoadingMore: Test whether the scroll position is close enough to
  // the bottom that we should start loading the next page, and if so, start loading it.
  const maybeStartLoadingMore = () => {
    // Client side, scrolled to near the bottom? Start loading if we aren't loading already.
    if (isClient
      && bottomRef?.current
      && elementIsNearVisible(bottomRef?.current, loadMoreDistance)
      && !reachedEnd
      && data)
    {
      if (!queryIsPending.current) {
        queryIsPending.current = true;
        void fetchMore({
          variables: {
            ...resolverArgsValues,
            ...fragmentArgsValues,
            cutoff: data[resolverName].cutoff,
            offset: data[resolverName].endOffset,
            limit: pageSize,
          },
          updateQuery: (prev, {fetchMoreResult}: {fetchMoreResult: any}) => {
            queryIsPending.current = false;
            if (!fetchMoreResult) {
              return prev;
            }

            // Deduplicate by removing repeated results from the newly fetched page. Ideally we
            // would use cursor-based pagination to avoid this
            const prevKeys = new Set(prev[resolverName].results.map(keyFunc));
            const newResults = fetchMoreResult[resolverName].results;
            const deduplicatedResults = newResults.filter((result: any) => !prevKeys.has(keyFunc(result)));
            
            return {
              [resolverName]: {
                __typename: fetchMoreResult[resolverName].__typename,
                cutoff: fetchMoreResult[resolverName].cutoff,
                endOffset: fetchMoreResult[resolverName].endOffset,
                results: [...prev[resolverName].results, ...deduplicatedResults],
              }
            };
          }
        });
      }
    }
  }

  // Load-more triggers. Check (1) after render, and (2) when the page is scrolled.
  // We *don't* check inside handleLoadFinished, because that's before the results
  // have been attached to the DOM, so we can''t test whether they reach the bottom.
  useEffect(maybeStartLoadingMore);
  useOnPageScroll(maybeStartLoadingMore);
  
  const results = (data && data[resolverName]?.results) || [];
  const orderPolicy = reorderOnRefetch ? 'no-reorder' : undefined;
  const orderedResults = useOrderPreservingArray(results, keyFunc, orderPolicy);
  return <div>
    {orderedResults.map((result) =>
      <div key={keyFunc(result)}>
        <RenderFeedItem renderers={renderers} item={result}/>
      </div>
    )}
    
    <div ref={bottomRef}/>
    {error && <div>{error.toString()}</div>}
    {!reachedEnd && <Loading/>}
  </div>
}

// Render an item in a mixed-type feed. This component is mainly just here to
// have a React.memo wrapper around it, so that users of the component don't
// have to carefully memoize every feed item type individually.
const RenderFeedItem = React.memo(({renderers, item}: {
  renderers: any,
  item: any
}) => {
  const renderFn = renderers[item.type]?.render;
  return renderFn ? renderFn(item[item.type]) : item[item.type];
});

// Returns whether an element, which is presumed to be either visible or below
// the screen, is within `distance` of being visible. This is used for infinite
// scroll; the next segment starts loading when the scroll position reaches
// `distance` of the bottom.
function elementIsNearVisible(element: HTMLElement|null, distance: number) {
  if (!element) return false;
  const top = element.getBoundingClientRect().y;
  const windowHeight = window.innerHeight;
  return (top-distance) <= windowHeight;
}

const MixedTypeInfiniteComponent = registerComponent('MixedTypeFeed', MixedTypeFeed);

declare global {
  interface ComponentTypes {
    MixedTypeFeed: typeof MixedTypeInfiniteComponent,
  }
}


1	import React, { useRef, useEffect } from 'react';	2✔
2	import { fragmentTextForQuery, registerComponent, Components } from '../../lib/vulcan-lib';	1✔
3	import { useQuery, gql, ObservableQuery, QueryHookOptions, WatchQueryFetchPolicy } from '@apollo/client';	1✔
4	import { useOnPageScroll } from './withOnPageScroll';	1✔
5	import { isClient } from '../../lib/executionEnvironment';	1✔
6	import * as _ from 'underscore';	1✔
7	import { useOrderPreservingArray } from '../hooks/useOrderPreservingArray';	1✔
8
9	const loadMoreDistance = 500;	1✔
10
11	export interface FeedRequest<CutoffType> {
12	cutoff: CutoffType\|null,
13	limit: number,
14	}
15	export interface FeedResponse<CutoffType, ResultType> {
16	results: Array<ResultType>,
17	error: any,
18	cutoff: CutoffType\|null,
19	}
20
21	const getQuery = ({resolverName, resolverArgs, fragmentArgs, sortKeyType, renderers}: {	1✔
22	resolverName: string,
23	resolverArgs: any,
24	fragmentArgs: any,
25	sortKeyType: string,
26	renderers: any,
27	}) => {
28	const fragmentsUsed = _.filter(Object.keys(renderers).map(r => renderers[r].fragmentName), f=>f);	×
29	const queryArgsList=["$limit: Int", `$cutoff: ${sortKeyType}`, "$offset: Int",	×
30	...(resolverArgs ? Object.keys(resolverArgs).map(k => `$${k}: ${resolverArgs[k]}`) : []),	×
31	...(fragmentArgs ? Object.keys(fragmentArgs).map(k => `$${k}: ${fragmentArgs[k]}`) : []),	×
32	];
33	const resolverArgsList=["limit: $limit", "cutoff: $cutoff", "offset: $offset",	×
34	...(resolverArgs ? Object.keys(resolverArgs).map(k => `${k}: $${k}`) : []),	×
35	];
36
37	return gql`	×
38	query ${resolverName}Query(${queryArgsList.join(", ")}) {
39	${resolverName}(${resolverArgsList.join(", ")}) {
40	__typename
41	cutoff
42	endOffset
43	results {
44	type
45	${Object.keys(renderers).map(rendererName =>
46	renderers[rendererName].fragmentName	×
47	? `${rendererName} { ...${renderers[rendererName].fragmentName} }`	×
48	: ''
49	)}
50	}
51	}
52	}
53	${fragmentTextForQuery(fragmentsUsed)}
54	`
55	}
56
57	interface FeedRenderer<FragmentName extends keyof FragmentTypes> {
58	fragmentName: FragmentName,
59	render: (result: FragmentTypes[FragmentName]) => React.ReactNode,
60	}
61
62	// An infinitely scrolling feed of elements, which may be of multiple types.
63	// This should have a corresponding server-side resolver created using
64	// `defineFeedResolver`.
65	//
66	// This displays a list list of items, loading more pages of results when the
67	// scroll position gets within `loadMoreDistance` pixels of the bottom. This
68	// uses Apollo's `fetchMore` to handle loading more elements.
69	//
70	// Results have type ResultType and are rendered into React elements by the
71	// renderResult function. If not provided, the results are presumed to be usable
72	// as React elements as-is (ie, strings).
73	const MixedTypeFeed = (args: {	1✔
74	resolverName: string,
75
76	// Types for parameters given to the resolver, as an object mapping from
77	// argument names to graphQL type strings.
78	resolverArgs?: Partial<Record<string,string>>,
79
80	// Values for parameters given to the resolver, as an object mapping
81	// from argument names to graphQL type strings.
82	resolverArgsValues?: Partial<Record<string,any>>,
83
84	// Types for extra arguments used in result fragments, as an object mapping
85	// from argument names to graphQL type strings.
86	fragmentArgs?: Partial<Record<string,string>>,
87
88	// Values for extra arguments used in result fragments, as an object mapping
89	// from argument names to argument values.
90	fragmentArgsValues?: Partial<Record<string,any>>,
91
92	// GraphQL name of the type results are sorted by.
93	sortKeyType: string,
94
95	// Renderers to convert results into React nodes.
96	renderers: Partial<Record<string,FeedRenderer<any>>>,
97
98	// The number of elements on the first page, which is included with SSR.
99	firstPageSize?: number,
100
101	// The number of elements per page, on pages other than the first page.
102	pageSize?: number,
103
104	// Ref that will be populated with a function that makes this feed refetch
105	// (refetching everything, shrinking it to one page, and potentially scrolling
106	// up by a bunch.)
107	refetchRef?: {current: null\|ObservableQuery['refetch']},
108
109	// Used to override the nextFetchPolicy
110	nextFetchPolicy?: WatchQueryFetchPolicy,
111
112	// By default, MixedTypeFeed preserves the order of elements that persist across refetches. If you don't want that, pass in true.
113	reorderOnRefetch?: boolean,
114
115	}) => {
NEW 116	const { resolverName, resolverArgs=null, resolverArgsValues=null, fragmentArgs=null, fragmentArgsValues=null, sortKeyType, renderers, firstPageSize=20, pageSize=20, refetchRef, nextFetchPolicy, reorderOnRefetch='cache-only' } = args;	×
117
118	// Reference to a bottom-marker used for checking scroll position.
119	const bottomRef = useRef<HTMLDivElement\|null>(null);	×
120
121	// Whether there is a pending query. This is indirect (inside an object)
122	// because it's accessed from inside callbacks, where the timing of state
123	// updates would be a problem.
124	const queryIsPending = useRef(false);	×
125
126	const {Loading} = Components;	×
127
128	const query = getQuery({resolverName, resolverArgs, fragmentArgs, sortKeyType, renderers});	×
129	const {data, error, fetchMore, refetch} = useQuery(query, {	×
130	variables: {
131	...resolverArgsValues,
132	...fragmentArgsValues,
133	cutoff: null,
134	offset: 0,
135	limit: firstPageSize,
136	},
137	fetchPolicy: "cache-and-network",
138	nextFetchPolicy,
139	ssr: true,
140	});
141
142	if (refetchRef && refetch)	×
143	refetchRef.current = refetch;	×
144
145	// Whether we've reached the end. The end-marker is when a query returns null
146	// for the cutoff.
147	const reachedEnd = (data && data[resolverName] && !data[resolverName].cutoff);	×
148
149	const keyFunc = (result: any) => `${result.type}_${result[result.type]?._id}`; // Get a unique key for each result. Used for sorting and deduplication.	×
150
151	// maybeStartLoadingMore: Test whether the scroll position is close enough to
152	// the bottom that we should start loading the next page, and if so, start loading it.
153	const maybeStartLoadingMore = () => {	×
154	// Client side, scrolled to near the bottom? Start loading if we aren't loading already.
155	if (isClient	×
156	&& bottomRef?.current	×
157	&& elementIsNearVisible(bottomRef?.current, loadMoreDistance)	×
158	&& !reachedEnd
159	&& data)
160	{
161	if (!queryIsPending.current) {	×
162	queryIsPending.current = true;	×
163	void fetchMore({	×
164	variables: {
165	...resolverArgsValues,
166	...fragmentArgsValues,
167	cutoff: data[resolverName].cutoff,
168	offset: data[resolverName].endOffset,
169	limit: pageSize,
170	},
171	updateQuery: (prev, {fetchMoreResult}: {fetchMoreResult: any}) => {
172	queryIsPending.current = false;	×
173	if (!fetchMoreResult) {	×
174	return prev;	×
175	}
176
177	// Deduplicate by removing repeated results from the newly fetched page. Ideally we
178	// would use cursor-based pagination to avoid this
179	const prevKeys = new Set(prev[resolverName].results.map(keyFunc));	×
180	const newResults = fetchMoreResult[resolverName].results;	×
181	const deduplicatedResults = newResults.filter((result: any) => !prevKeys.has(keyFunc(result)));	×
182
183	return {	×
184	[resolverName]: {
185	__typename: fetchMoreResult[resolverName].__typename,
186	cutoff: fetchMoreResult[resolverName].cutoff,
187	endOffset: fetchMoreResult[resolverName].endOffset,
188	results: [...prev[resolverName].results, ...deduplicatedResults],
189	}
190	};
191	}
192	});
193	}
194	}
195	}
196
197	// Load-more triggers. Check (1) after render, and (2) when the page is scrolled.
198	// We don't check inside handleLoadFinished, because that's before the results
199	// have been attached to the DOM, so we can''t test whether they reach the bottom.
200	useEffect(maybeStartLoadingMore);	×
201	useOnPageScroll(maybeStartLoadingMore);	×
202
203	const results = (data && data[resolverName]?.results) \|\| [];	×
NEW 204	const orderPolicy = reorderOnRefetch ? 'no-reorder' : undefined;	×
NEW 205	const orderedResults = useOrderPreservingArray(results, keyFunc, orderPolicy);	×
UNCOV 206	return <div>	×
207	{orderedResults.map((result) =>
208	<div key={keyFunc(result)}>	×
209	<RenderFeedItem renderers={renderers} item={result}/>
210	</div>
211	)}
212
213	<div ref={bottomRef}/>
214	{error && <div>{error.toString()}</div>}	×
215	{!reachedEnd && <Loading/>}	×
216	</div>
217	}
218
219	// Render an item in a mixed-type feed. This component is mainly just here to
220	// have a React.memo wrapper around it, so that users of the component don't
221	// have to carefully memoize every feed item type individually.
222	const RenderFeedItem = React.memo(({renderers, item}: {	1✔
223	renderers: any,
224	item: any
225	}) => {
226	const renderFn = renderers[item.type]?.render;	×
227	return renderFn ? renderFn(item[item.type]) : item[item.type];	×
228	});
229
230	// Returns whether an element, which is presumed to be either visible or below
231	// the screen, is within `distance` of being visible. This is used for infinite
232	// scroll; the next segment starts loading when the scroll position reaches
233	// `distance` of the bottom.
234	function elementIsNearVisible(element: HTMLElement\|null, distance: number) {
235	if (!element) return false;	×
236	const top = element.getBoundingClientRect().y;	×
237	const windowHeight = window.innerHeight;	×
238	return (top-distance) <= windowHeight;	×
239	}
240
241	const MixedTypeInfiniteComponent = registerComponent('MixedTypeFeed', MixedTypeFeed);	1✔
242
243	declare global {
244	interface ComponentTypes {
245	MixedTypeFeed: typeof MixedTypeInfiniteComponent,
246	}
247	}
248

ForumMagnum / ForumMagnum / 9323869003

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous