ArtistEditorialNewsGrid.tsx

import {
  ActionType,
  type ClickedArticleGroup,
  ContextModule,
  OwnerType,
} from "@artsy/cohesion"
import {
  Column,
  Image,
  Skeleton,
  SkeletonBox,
  SkeletonText,
  Text,
} from "@artsy/palette"
import { GridColumns, ResponsiveBox } from "@artsy/palette"
import {
  CellArticleFragmentContainer,
  CellArticlePlaceholder,
} from "Components/Cells/CellArticle"
import { EmptyState } from "Components/EmptyState"
import { Masonry } from "Components/Masonry"
import { RouterLink } from "System/Components/RouterLink"
import { useAnalyticsContext } from "System/Hooks/useAnalyticsContext"
import { useSystemContext } from "System/Hooks/useSystemContext"
import { SystemQueryRenderer } from "System/Relay/SystemQueryRenderer"
import { Media } from "Utils/Responsive"
import { extractNodes } from "Utils/extractNodes"
import type { ArtistEditorialNewsGridQuery } from "__generated__/ArtistEditorialNewsGridQuery.graphql"
import type { ArtistEditorialNewsGrid_artist$data } from "__generated__/ArtistEditorialNewsGrid_artist.graphql"
import { take } from "lodash"
import type { FC } from "react"
import { createFragmentContainer, graphql } from "react-relay"
import { useTracking } from "react-tracking"

const ARTICLE_COUNT = 6

interface ArtistEditorialNewsGridProps {
  artist: ArtistEditorialNewsGrid_artist$data
  // diamond_editorial-section
  showEmptyStateWhenNoArticles?: boolean
}

const ArtistEditorialNewsGrid: FC<
  React.PropsWithChildren<ArtistEditorialNewsGridProps>
> = ({
  artist,
  // diamond_editorial-section
  showEmptyStateWhenNoArticles = false,
}) => {
  const { trackEvent } = useTracking()

  const { contextPageOwnerId, contextPageOwnerSlug, contextPageOwnerType } =
    useAnalyticsContext()

  const articles = extractNodes(artist.articlesConnection)

  const viewAllHref = `${artist.href}/articles`

  if (articles.length === 0) {
    // diamond_editorial-section
    if (showEmptyStateWhenNoArticles) {
      return (
        <EmptyState
          title="There are currently no editorial pieces about this artist."
          description="Check back soon — we’ll add coverage as it becomes available. In the meantime, browse art world stories and features on Artsy."
          action={{
            label: "Browse Artsy Editorial",
            href: "/articles",
          }}
        />
      )
    }

    return null
  }

  const [firstArticle, ...restOfArticles] = articles
  const truncatedRestOfArticles = take(restOfArticles, ARTICLE_COUNT)
  const firstImage = firstArticle.thumbnailImage?.large

  return (
    <GridColumns gridRowGap={4}>
      <Column
        span={12}
        display="flex"
        justifyContent="space-between"
        alignItems="center"
      >
        <Text as="h3" variant="lg-display">
          Artsy Editorial Featuring {artist.name}
        </Text>

        <Text
          variant="sm-display"
          flexShrink={0}
          as={RouterLink}
          to={viewAllHref}
          onClick={() => {
            const trackingEvent: ClickedArticleGroup = {
              action: ActionType.clickedArticleGroup,
              context_module: ContextModule.marketNews,
              context_page_owner_type: contextPageOwnerType!,
              context_page_owner_id: contextPageOwnerId,
              context_page_owner_slug: contextPageOwnerSlug,
              destination_page_owner_type: OwnerType.articles,
              type: "viewAll",
            }

            trackEvent(trackingEvent)
          }}
        >
          View All
        </Text>
      </Column>

      <Column span={[12, 6]} mb={[4, 0]}>
        <RouterLink
          key={firstArticle.internalID}
          to={firstArticle.href}
          display="block"
          textDecoration="none"
          onClick={() => {
            const trackingEvent: ClickedArticleGroup = {
              action: ActionType.clickedArticleGroup,
              context_module: ContextModule.marketNews,
              context_page_owner_type: contextPageOwnerType!,
              context_page_owner_id: contextPageOwnerId,
              context_page_owner_slug: contextPageOwnerSlug,
              destination_page_owner_type: OwnerType.article,
              type: "thumbnail",
            }

            trackEvent(trackingEvent)
          }}
        >
          {firstImage && (
            <ResponsiveBox
              aspectWidth={firstImage.width}
              aspectHeight={firstImage.height}
              maxWidth="100%"
              bg="mono10"
            >
              <Image
                src={firstImage.src}
                srcSet={firstImage.srcSet}
                width="100%"
                height="100%"
                lazyLoad
              />
            </ResponsiveBox>
          )}

          <Text variant="xs" fontWeight="bold" mt={1}>
            {firstArticle.vertical}
          </Text>

          <Text variant="xl" mt={0.5}>
            {firstArticle.title}
          </Text>

          <Text variant="lg-display" mt={1}>
            By {firstArticle.byline}
          </Text>

          <Text variant="lg-display" color="mono60" mt={0.5}>
            {firstArticle.publishedAt}
          </Text>
        </RouterLink>
      </Column>

      <Column span={[12, 6]}>
        <Masonry columnCount={2}>
          {truncatedRestOfArticles.map(article => {
            return (
              <CellArticleFragmentContainer
                key={article.internalID}
                article={article}
                mode="GRID"
                mb={4}
                onClick={() => {
                  const trackingEvent: ClickedArticleGroup = {
                    action: ActionType.clickedArticleGroup,
                    context_module: ContextModule.marketNews,
                    context_page_owner_type: contextPageOwnerType!,
                    context_page_owner_id: contextPageOwnerId,
                    context_page_owner_slug: contextPageOwnerSlug,
                    destination_page_owner_type: OwnerType.article,
                    type: "thumbnail",
                  }

                  trackEvent(trackingEvent)
                }}
              />
            )
          })}
        </Masonry>
      </Column>
    </GridColumns>
  )
}

export const ArtistEditorialNewsGridFragmentContainer = createFragmentContainer(
  ArtistEditorialNewsGrid,
  {
    artist: graphql`
      fragment ArtistEditorialNewsGrid_artist on Artist {
        internalID
        name
        slug
        href
        articlesConnection(first: 6, sort: PUBLISHED_AT_DESC) {
          edges {
            node {
              ...CellArticle_article
              internalID
              href
              byline
              slug
              title
              publishedAt(format: "MMM D, YYYY")
              vertical
              thumbnailTitle
              thumbnailImage {
                large: cropped(width: 670, height: 720) {
                  width
                  height
                  src
                  srcSet
                }
              }
            }
          }
        }
      }
    `,
  },
)

const PLACEHOLDER = (
  <Skeleton>
    <GridColumns>
      <Column span={[12, 6]} mb={[4, 0]}>
        <Media greaterThan="xs">
          <ResponsiveBox aspectWidth={670} aspectHeight={720} maxWidth="100%">
            <SkeletonBox width="100%" height="100%" />
          </ResponsiveBox>

          <SkeletonText variant="xs" fontWeight="bold" mt={1}>
            Art Fairs
          </SkeletonText>

          <SkeletonText variant="xl" mt={0.5}>
            Essential Tips for Collecting Work by Anni and Josef Albers
          </SkeletonText>

          <SkeletonText variant="lg-display" mt={1}>
            By Artsy Editorial
          </SkeletonText>

          <SkeletonText variant="lg-display" mt={0.5}>
            Jan 1, 2000
          </SkeletonText>
        </Media>
      </Column>

      <Column span={[12, 6]}>
        <Masonry columnCount={2}>
          {[...new Array(ARTICLE_COUNT)].map((_, i) => {
            return <CellArticlePlaceholder key={i} mode="GRID" mb={4} />
          })}
        </Masonry>
      </Column>
    </GridColumns>
  </Skeleton>
)

export const ArtistEditorialNewsGridQueryRenderer: FC<
  React.PropsWithChildren<{
    id: string
    // diamond_editorial-section
    showEmptyStateWhenNoArticles?: boolean
  }>
> = ({
  id,
  // diamond_editorial-section
  showEmptyStateWhenNoArticles = false,
}) => {
  const { relayEnvironment } = useSystemContext()

  return (
    <SystemQueryRenderer<ArtistEditorialNewsGridQuery>
      lazyLoad
      environment={relayEnvironment}
      variables={{ id }}
      placeholder={PLACEHOLDER}
      query={graphql`
        query ArtistEditorialNewsGridQuery($id: String!) {
          artist(id: $id) {
            ...ArtistEditorialNewsGrid_artist
          }
        }
      `}
      render={({ error, props }) => {
        if (error) {
          console.error(error)
          return null
        }
        if (!props || !props.artist) {
          return PLACEHOLDER
        }

        return (
          <ArtistEditorialNewsGridFragmentContainer
            artist={props.artist}
            // diamond_editorial-section
            showEmptyStateWhenNoArticles={showEmptyStateWhenNoArticles}
          />
        )
      }}
    />
  )
}