Add support for ART domains (#549)

* Records of the art domains

* Deleted unused property

* Changed style blocks for art-records

* Deleted unused property

* Renamed variable

* Resolved conflicts after changes

src/components/SearchErrors/SearchErrors.js

@@ -23,7 +23,7 @@ const errorData = {
         .split('.')
         .splice(-1, 1)} is not currently a support tld.`,
     long: searchTerm =>
-      `We currently only support .eth and .xyz domains. Support for future domains are planned in the future`
+      `We currently only support .eth, .xyz and .art domains. Support for future domains are planned in the future`
   },
   tooShort: {
     short: searchTerm => (

src/components/SingleName/ResolverAndRecords/ArtRecords.js

@@ -0,0 +1,131 @@
+import React from 'react'
+import { Query } from 'react-apollo'
+import styled from '@emotion/styled'
+
+import Loader from '../../Loader'
+
+import {
+  RecordsContent,
+  RecordsItem,
+  RecordsKey,
+  RecordsValue
+} from './RecordsItem'
+
+const Records = styled('div')`
+  border-radius: 6px;
+  border: 1px solid #ededed;
+  box-shadow: inset 0 0 10px 0 rgba(235, 235, 235, 0.5);
+  padding-bottom: 10px;
+  display: block;
+  margin-bottom: 20px;
+`
+
+const RecordsHeader = styled('div')`
+  background: #f0f6fa;
+`
+
+const RecordsTitle = styled('h3')`
+  font-family: Overpass;
+  font-weight: 700;
+  font-size: 12px;
+  color: #adbbcd;
+  letter-spacing: 0.5px;
+  text-transform: uppercase;
+  margin: 0;
+  padding: 10px 20px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+`
+
+function isArt(name) {
+  return !!name.match(/\.art$/)
+}
+
+function getArtRecordLabel(key) {
+  const recordLabels = {
+    title: 'Title',
+    maker: 'Maker',
+    type: 'Type of Object',
+    subject: 'Subject',
+    period: 'Period',
+    dimensions: 'Measurements',
+    materials: 'Materials & Techniques',
+    markings: 'Inscriptions & Markings',
+    features: 'Features',
+    reference: 'Reference'
+  }
+
+  return recordLabels[key]
+}
+
+function isEmpty(records) {
+  if (!records.length) {
+    return true
+  }
+
+  return records.filter(record => record.value).length === 0
+}
+
+function decodeRecords(values) {
+  let parsed = {}
+  try {
+    parsed = JSON.parse(values)
+  } catch (e) {}
+
+  return Object.keys(parsed).reduce(
+    (decoded, key) =>
+      decoded.concat({
+        label: getArtRecordLabel(key),
+        value: parsed[key]
+      }),
+    []
+  )
+}
+
+function ArtRecordItem({ value, label }) {
+  if (!value) return null
+
+  return (
+    <RecordsItem>
+      <RecordsContent>
+        <RecordsKey>{label}</RecordsKey>
+        <RecordsValue>
+          <div>{value}</div>
+        </RecordsValue>
+      </RecordsContent>
+    </RecordsItem>
+  )
+}
+
+export default function ArtRecords({ domain, query }) {
+  if (!isArt(domain.name)) return null
+
+  return (
+    <Query query={query} variables={{ name: domain.name, key: 'artrecords' }}>
+      {({ loading, data }) => {
+        if (loading) return <Loader center />
+
+        const { getText: encodedArtRecords } = data
+
+        if (!encodedArtRecords) return null
+
+        const records = decodeRecords(encodedArtRecords)
+
+        if (isEmpty(records)) return null
+
+        return (
+          <Records>
+            <RecordsHeader>
+              <RecordsTitle>Art records</RecordsTitle>
+            </RecordsHeader>
+
+            {records.map((r, i) => (
+              <ArtRecordItem key={i} value={r.value} label={r.label} />
+            ))}
+          </Records>
+        )
+      }}
+    </Query>
+  )
+}

src/components/SingleName/ResolverAndRecords/ResolverAndRecords.js

@@ -22,6 +22,7 @@ import RecordsItem from './RecordsItem'
 import TextRecord from './TextRecord'
 import Address from './Address'
 import ResolverMigration from './ResolverMigration'
+import ArtRecords from './ArtRecords'
 
 const RecordsWrapper = styled('div')`
   border-radius: 6px;
@@ -304,6 +305,8 @@ export default function ResolverAndRecords({
           duringMigration={duringMigration}
         />
       )}
+
+      {hasResolver && <ArtRecords domain={domain} query={GET_TEXT} />}
     </>
   )
 }

src/constants/tlds.json

@@ -13,5 +13,8 @@
   },
   "luxe": {
     "supported": true
+  },
+  "art": {
+    "supported": true
   }
 }