Function RepostsModal

packages/shared/src/components/modals/RepostsModal.tsx:20–87

({
  requestQuery: { queryKey, query, params, options = {} },
  ...props
}: RepostsModalProps)

}

export function RepostsModal({
  requestQuery: { queryKey, query, params, options = {} },
  ...props
}: RepostsModalProps): ReactElement {
  const container = useRef<HTMLElement>(null);
  const modalRef = useRef<HTMLElement | null>(null);
  const { requestMethod } = useRequestProtocol();

  if (!requestMethod) {
    throw new Error('Request method is required in RepostsModal');
  }

  const queryResult = useInfiniteQuery({
    queryKey,
    queryFn: ({ pageParam }) =>
      requestMethod(
        query,
        { ...params, after: pageParam },
        { requestKey: JSON.stringify(queryKey) },
      ),
    initialPageParam: '',
    ...options,
    getNextPageParam: ({ postReposts }) =>
      getNextPageParam(postReposts?.pageInfo),
  });

  const reposts: Post[] =
    queryResult.data?.pages.flatMap((page) =>
      page.postReposts.edges.map(({ node }) => node),
    ) ?? [];

  return (
    <Modal
      {...props}
      contentRef={(element) => {
        modalRef.current = element;
      }}
      kind={Modal.Kind.FlexibleCenter}
      size={Modal.Size.Medium}
    >
      <Modal.Header title="Reposts" />
      <Modal.Body
        className="!p-0 [&_a:hover]:!no-underline [&_a]:!no-underline"
        ref={container}
      >
        <InfiniteScrolling
          canFetchMore={checkFetchMore(queryResult)}
          isFetchingNextPage={queryResult.isFetchingNextPage}
          fetchNextPage={queryResult.fetchNextPage}
        >
          {reposts.map((post) => (
            <RepostListItem
              key={post.id}
              post={post}
              scrollingContainer={container.current}
              appendTooltipTo={modalRef.current}
            />
          ))}