-
Notifications
You must be signed in to change notification settings - Fork 74
/
CollectionApp.tsx
101 lines (94 loc) · 3.26 KB
/
CollectionApp.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
import { Box } from "@artsy/palette"
import { CollectionApp_collection } from "__generated__/CollectionApp_collection.graphql"
import { track } from "Artsy/Analytics"
import * as Schema from "Artsy/Analytics/Schema"
import { FrameWithRecentlyViewed } from "Components/FrameWithRecentlyViewed"
import { HttpError } from "found"
import React, { Component } from "react"
import { Link, Meta, Title } from "react-head"
import { createFragmentContainer, graphql } from "react-relay"
import { data as sd } from "sharify"
import truncate from "trunc-html"
import { CollectionFilterFragmentContainer as CollectionFilterContainer } from "./Components/Collection/CollectionFilterContainer"
import { CollectionHeader } from "./Components/Collection/Header"
interface CollectionAppProps {
collection: CollectionApp_collection
}
@track({
context_module: Schema.ContextModule.CollectionDescription,
})
export class CollectionApp extends Component<CollectionAppProps> {
collectionNotFound = collection => {
if (!collection) {
throw new HttpError(404)
}
}
componentWillMount() {
this.collectionNotFound(this.props.collection)
}
render() {
const { collection } = this.props
const { title, slug, headerImage, description } = collection
const collectionHref = `${sd.APP_URL}/collection/${slug}`
const metadataDescription = description
? `Buy, bid, and inquire on ${title} on Artsy. ` +
truncate(description, 158).text
: `Buy, bid, and inquire on ${title} on Artsy.`
return (
<FrameWithRecentlyViewed>
<Title>{title} | Collect on Artsy</Title>
<Meta name="description" content={metadataDescription} />
<Meta property="og:url" content={collectionHref} />
<Meta property="og:image" content={headerImage} />
<Meta property="og:description" content={metadataDescription} />
<Meta property="twitter:description" content={metadataDescription} />
<Link rel="canonical" href={collectionHref} />
<CollectionHeader collection={collection} />
<Box>
<CollectionFilterContainer collection={collection} />
</Box>
</FrameWithRecentlyViewed>
)
}
}
export const CollectionAppFragmentContainer = createFragmentContainer(
CollectionApp,
graphql`
fragment CollectionApp_collection on MarketingCollection
@argumentDefinitions(
medium: { type: "String", defaultValue: "*" }
major_periods: { type: "[String]" }
partner_id: { type: "ID" }
for_sale: { type: "Boolean" }
at_auction: { type: "Boolean" }
acquireable: { type: "Boolean" }
inquireable_only: { type: "Boolean" }
sort: { type: "String", defaultValue: "-partner_updated_at" }
price_range: { type: "String" }
) {
id
slug
title
description
headerImage
category
credit
query {
artist_ids
artist_id
gene_id
}
...CollectionFilterContainer_collection
@arguments(
medium: $medium
major_periods: $major_periods
for_sale: $for_sale
sort: $sort
acquireable: $acquireable
at_auction: $at_auction
inquireable_only: $inquireable_only
price_range: $price_range
)
}
`
)