import { Localized } from "@fluent/react/compat" ; import React , { FunctionComponent , useCallback } from "react" ; import { graphql , RelayPaginationProp } from "react-relay" ; import { useViewerNetworkEvent } from "coral-framework/lib/events" ; import { useLoadMore , withPaginationContainer , } from "coral-framework/lib/relay" ; import { PropTypesOf } from "coral-framework/types" ; import CLASSES from "coral-stream/classes" ; import { LoadMoreFeaturedCommentsEvent } from "coral-stream/events" ; import { HorizontalGutter } from "coral-ui/components/v2" ; import { Button } from "coral-ui/components/v3" ; import { AnsweredCommentsContainer_settings as SettingsData } from "coral-stream/__generated__/AnsweredCommentsContainer_settings.graphql" ; import { AnsweredCommentsContainer_story as StoryData } from "coral-stream/__generated__/AnsweredCommentsContainer_story.graphql" ; import { AnsweredCommentsContainer_viewer as ViewerData } from "coral-stream/__generated__/AnsweredCommentsContainer_viewer.graphql" ; import { AnsweredCommentsContainerPaginationQueryVariables } from "coral-stream/__generated__/AnsweredCommentsContainerPaginationQuery.graphql" ; import AnsweredCommentContainer from "./AnsweredCommentContainer" ; interface Props { story : StoryData ; settings : SettingsData ; viewer : ViewerData | null ; relay : RelayPaginationProp ; } export const AnsweredCommentsContainer = ( props ) => { const [ loadMore , isLoadingMore ] = useLoadMore ( props . relay , 10 ) ; const beginLoadMoreEvent = useViewerNetworkEvent ( LoadMoreFeaturedCommentsEvent ) ; const loadMoreAndEmit = useCallback ( async ( ) => { const loadMoreEvent = beginLoadMoreEvent ( { storyID : props . story . id } ) ; try { await loadMore ( ) ; loadMoreEvent . success ( ) ; } catch ( error ) { loadMoreEvent . error ( { message : error . message , code : error . code } ) ; console . error ( error ) ; } } , [ loadMore , beginLoadMoreEvent , props . story . id ] ) ; const comments = props . story . featuredComments . edges . map ( ( edge ) => edge . node ) ; return ( < HorizontalGutter id = "comments-featuredComments-log" data - testid = "comments-featuredComments-log" spacing = { 3 } role = "log" aria - live = "off" > { comments . map ( ( comment ) => ( < AnsweredCommentContainer key = { comment . id } viewer = { props . viewer } settings = { props . settings } comment = { comment } story = { props . story } / > ) ) } { props . relay . hasMore ( ) && ( < Localized id = "comments-loadMore" > < Button key = { comments . length } onClick = { loadMoreAndEmit } variant = "outlined" color = "secondary" fullWidth disabled = { isLoadingMore } aria - controls = "comments-featuredComments-log" className = { CLASSES . featuredCommentsTabPane . loadMoreButton } > Load More < /Button> < /Localized>)} < /HorizontalGutter>); } ; type FragmentVariables = Omit < AnsweredCommentsContainerPaginationQueryVariables , "storyID" > ; const enhanced = withPaginationContainer < Props , AnsweredCommentsContainerPaginationQueryVariables , FragmentVariables > ( { story : graphql `
      fragment AnsweredCommentsContainer_story on Story
        @argumentDefinitions(
          count: { type: "Int", defaultValue: 5 }
          cursor: { type: "Cursor" }
          orderBy: { type: "COMMENT_SORT!", defaultValue: CREATED_AT_DESC }
        ) {
        id
        featuredComments(first: $count, after: $cursor, orderBy: $orderBy)
          @connection(key: "Stream_featuredComments") {
          edges {
            node {
              id
              ...AnsweredCommentContainer_comment
            }
          }
        }
        ...PostCommentFormContainer_story
        ...AnsweredCommentContainer_story
      }
    ` , viewer : graphql `
      fragment AnsweredCommentsContainer_viewer on User {
        ...AnsweredCommentContainer_viewer
        status {
          current
        }
      }
    ` , settings : graphql `
      fragment AnsweredCommentsContainer_settings on Settings {
        reaction {
          sortLabel
        }
        ...AnsweredCommentContainer_settings
      }
    ` , } , { getConnectionFromProps ( props ) { return props . story && props . story . featuredComments ; } , getVariables ( props , { count , cursor } , fragmentVariables ) { return { count , cursor , orderBy : fragmentVariables . orderBy , storyID : props . story . id , } ; } , query : graphql `
      # Pagination query to be fetched upon calling 'loadMore'.
      # Notice that we re-use our fragment, and the shape of this query matches our fragment spec.
      query AnsweredCommentsContainerPaginationQuery(
        $count: Int!
        $cursor: Cursor
        $orderBy: COMMENT_SORT!
        $storyID: ID
      ) {
        story(id: $storyID) {
          ...AnsweredCommentsContainer_story
            @arguments(count: $count, cursor: $cursor, orderBy: $orderBy)
        }
      }
    ` , } ) ( AnsweredCommentsContainer ) ; export type AnsweredCommentsContainerProps = PropTypesOf < typeof enhanced > ; export default enhanced ;