Gene page refactor!

package.json

@@ -23,6 +23,7 @@
     "storybook": "node verify-node-version.js && concurrently --kill-others 'yarn relay --watch' 'env GRAPHQL_NO_NAME_WARNING=true start-storybook -p 9001'",
     "deploy-storybook": "yarn relay && NODE_ENV=production storybook-to-ghpages",
     "sync-schema": "cd externals/metaphysics && git fetch && git checkout origin/master && yarn install && npm run dump-schema -- ../../data",
+    "sync-schema:localhost": "cd ../metaphysics && yarn dump-schema -- ../emission/data",
     "sync-colors": "cd externals/elan && git fetch && git checkout origin/master && cp components/lib/variables/colors.json ../../data",
     "lint": "tslint -c tslint.json --project tsconfig.json",
     "type-check": "tsc --noEmit --pretty",
@@ -32,10 +33,10 @@
     "compile": "env GRAPHQL_NO_NAME_WARNING=true gulp compile",
     "prepublishOnly": "rm -rf dist && npm run compile",
     "precommit": "lint-staged",
-    "prepush": "npm run type-check",
+    "prepush": "yarn run type-check",
     "prettier": "prettier",
-    "prettier-write": "npm run prettier --write",
-    "prettier-project": "npm run prettier-write -- 'src/**/*.{ts,tsx}'"
+    "prettier-write": "yarn run prettier --write",
+    "prettier-project": "yarn run prettier-write 'src/**/*.{ts,tsx}'"
   },
   "prettier": {
     "printWidth": 120,

src/Components/ArtworkFilter/Dropdown.tsx

@@ -13,7 +13,7 @@ import { find } from "lodash"
 
 interface DropdownProps extends RelayProps, React.HTMLProps<Dropdown> {
   aggregation: any
-  onSelect?: any
+  onSelected?: (slice: string, value: string) => void
   selected?: any
 }
 
@@ -41,12 +41,12 @@ export class Dropdown extends React.Component<DropdownProps, DropdownState> {
     })
   }
 
-  onSelect(count, slice) {
+  onSelect(slice: string, value: string) {
     this.setState({
-      selected: count.id,
+      selected: value,
       isHovered: false,
     })
-    this.props.onSelect(count, slice)
+    this.props.onSelected(slice, value)
   }
 
   getSelectedName(id) {
@@ -61,15 +61,15 @@ export class Dropdown extends React.Component<DropdownProps, DropdownState> {
 
     let navItems = this.props.aggregation.counts.map(count => {
       return (
-        <NavItem key={count.id} onClick={() => this.onSelect(count, slice)}>
+        <NavItem key={count.id} onClick={() => this.onSelect(slice, count.id)}>
           <span>{count.name}</span>
           <NavItemCount>&nbsp;({numeral(count.count).format("0,0")})</NavItemCount>
         </NavItem>
       )
     })
 
     navItems.unshift(
-      <NavItem key="all" onClick={() => this.onSelect({ value: "*" }, slice)}>
+      <NavItem key="all" onClick={() => this.onSelect(slice, "*")}>
         <span>All {labels.plural}</span>
       </NavItem>
     )

src/Components/ArtworkFilter/ForSaleCheckbox.tsx

@@ -7,7 +7,7 @@ import colors from "../../Assets/Colors"
 import { primary } from "../../Assets/Fonts"
 
 interface Props extends React.HTMLProps<ForSaleCheckbox> {
-  onClick?: any
+  onChange?: any
 }
 
 interface State {
@@ -23,15 +23,15 @@ export class ForSaleCheckbox extends React.Component<Props, State> {
     this.setState({
       isChecked: !this.state.isChecked,
     })
-    this.props.onClick()
+    this.props.onChange()
   }
 
   render() {
     const { isChecked } = this.state
-
+    const { checked } = this.props
     return (
       <div className={this.props.className} onClick={() => this.onClick()}>
-        <StyledCheckbox checked={isChecked} />
+        <StyledCheckbox checked={isChecked || checked} />
         <label>Only for Sale</label>
       </div>
     )

src/Components/ArtworkFilter/Headline.tsx

@@ -33,7 +33,6 @@ export class Headline extends React.Component<Props, null> {
 
   medium() {
     const { medium, facet } = this.props
-
     if (medium && medium !== "*") {
       return this.getCountName("medium", medium)
     }
@@ -87,6 +86,9 @@ export default createFragmentContainer(
       ... on ArtworkFilterTag {
         name
       }
+      ... on ArtworkFilterGene {
+        name
+      }
     }
   `
 )

src/Components/ArtworkFilter/index.tsx

@@ -90,7 +90,7 @@ class ArtworkFilter extends React.Component<Props, State> {
       <Dropdown
         aggregation={aggregation}
         key={aggregation.slice}
-        onSelect={(count, slice) => this.onSelect(count, slice)}
+        onSelected={(count, slice) => this.onSelect(count, slice)}
       />
     ))
     const pulldownOptions = [
@@ -186,16 +186,17 @@ export default createPaginationContainer(
           ...TotalCount_filter_artworks
           artworks: artworks_connection(first: $count, after: $cursor)
             @connection(key: "ArtworkFilter_filter_artworks") {
-            ...ArtworkGrid_artworks
             pageInfo {
               hasNextPage
               endCursor
             }
             edges {
+
               node {
                 __id
               }
             }
+            ...ArtworkGrid_artworks
           }
           facet {
             ...Headline_facet

src/Components/BorderedPulldown.tsx

@@ -10,6 +10,7 @@ interface Props extends React.HTMLProps<BorderedPulldown> {
   options: any
   defaultValue: string
   onChange?: any
+  selectedName?: string
 }
 
 interface State {
@@ -38,7 +39,7 @@ export class BorderedPulldown extends React.Component<Props, State> {
   }
 
   render() {
-    const { options, defaultValue } = this.props
+    const { options, defaultValue, selectedName } = this.props
 
     const optionEls = options.map(option => {
       return (
@@ -48,7 +49,7 @@ export class BorderedPulldown extends React.Component<Props, State> {
       )
     })
 
-    const displayValue = (this.state.selected && this.state.selected.name) || defaultValue
+    const displayValue = (this.state.selected && this.state.selected.name) || selectedName || defaultValue
     let pulldownStyles = {}
 
     if (this.state.isHovered) {

src/Components/Checkbox.tsx

@@ -17,7 +17,7 @@ export class Checkbox extends React.Component<Props, null> {
 
     return (
       <div className={this.props.className}>
-        <CheckboxInput type="checkbox" checked={checked} />
+        <CheckboxInput onChange={() => null} type="checkbox" checked={checked} />
         <Label />
       </div>
     )

src/Components/Gene/Artists.tsx

@@ -7,10 +7,16 @@ import * as fonts from "../../Assets/Fonts"
 import Spinner from "../Spinner"
 import ArtistRow from "./ArtistRow"
 
+import Dropdown from "../ArtworkFilter/Dropdown"
+
+import { ButtonState } from "../Buttons/Default"
+import Button from "../Buttons/Ghost"
+
 const PageSize = 10
 
 interface Props extends RelayProps {
   relay?: RelayPaginationProp
+  onDropdownSelected: (slice: string, value: string) => void
 }
 
 interface State {
@@ -44,6 +50,23 @@ const SpinnerContainer = styled.div`
   position: relative;
 `
 
+const ArtistFilterButtons = styled.div`
+  margin-right: 10px;
+  button {
+    height: 52px;
+    padding: 16px;
+  }
+`
+
+const FilterBar = styled.div`
+  vertical-align: middle;
+  text-align: center;
+
+  > div {
+    display: inline-block;
+  }
+`
+
 export class Artists extends React.Component<Props, State> {
   state = {
     loading: false,
@@ -60,6 +83,36 @@ export class Artists extends React.Component<Props, State> {
     }
   }
 
+  renderArtistFilter() {
+    return (
+      <ArtistFilterButtons>
+        <span>By Artists:</span>
+        <Button
+          onClick={() => {
+            return null
+          }}
+          state={ButtonState.Success}
+        >
+          All Artists
+        </Button>
+        <span>By Work:</span>
+      </ArtistFilterButtons>
+    )
+  }
+
+  renderArtistDropdown() {
+    return this.props.gene.filter_aggregations.aggregations.map(aggregation => {
+      return (
+        <Dropdown
+          aggregation={aggregation}
+          key={aggregation.slice}
+          selected={aggregation.slice && this.state[aggregation.slice.toLowerCase()]}
+          onSelected={this.props.onDropdownSelected}
+        />
+      )
+    })
+  }
+
   render() {
     const artists = this.props.gene.artists
 
@@ -74,11 +127,17 @@ export class Artists extends React.Component<Props, State> {
     )
 
     return (
-      <ArtistRowsContainer>
-        {artistRows}
-        <SpinnerContainer>{this.state.loading ? <Spinner /> : ""}</SpinnerContainer>
-        {artists && artists.pageInfo.hasNextPage && !this.state.loading && loadMoreButton}
-      </ArtistRowsContainer>
+      <div>
+        <FilterBar>
+          {this.renderArtistFilter()}
+          {this.renderArtistDropdown()}
+        </FilterBar>
+        <ArtistRowsContainer>
+          {artistRows}
+          <SpinnerContainer>{this.state.loading ? <Spinner /> : ""}</SpinnerContainer>
+          {artists && artists.pageInfo.hasNextPage && !this.state.loading && loadMoreButton}
+        </ArtistRowsContainer>
+      </div>
     )
   }
 }
@@ -88,7 +147,11 @@ export default createPaginationContainer(
   {
     gene: graphql.experimental`
       fragment Artists_gene on Gene
-        @argumentDefinitions(count: { type: "Int", defaultValue: 10 }, cursor: { type: "String", defaultValue: "" }) {
+        @argumentDefinitions(
+          aggregations: { type: "[ArtworkAggregation]", defaultValue: [MEDIUM, TOTAL, PRICE_RANGE, DIMENSION_RANGE] }
+          count: { type: "Int", defaultValue: 10 }
+          cursor: { type: "String", defaultValue: "" }
+        ) {
         __id
         artists: artists_connection(first: $count, after: $cursor) @connection(key: "Artists_artists") {
           pageInfo {
@@ -101,6 +164,13 @@ export default createPaginationContainer(
             }
           }
         }
+        filter_aggregations: filtered_artworks(aggregations: $aggregations, size: 0) {
+          ...TotalCount_filter_artworks
+          aggregations {
+            slice
+            ...Dropdown_aggregation
+          }
+        }
       }
     `,
   },
@@ -122,12 +192,13 @@ export default createPaginationContainer(
         ...fragmentVariables,
         count,
         cursor,
+        geneNodeID: props.gene.__id,
       }
     },
     query: graphql.experimental`
-      query ArtistsQuery($geneNodeID: ID!, $count: Int!, $cursor: String) {
+      query ArtistsQuery($geneNodeID: ID!, $count: Int!, $cursor: String, $aggregations: [ArtworkAggregation]) {
         node(__id: $geneNodeID) {
-          ...Artists_gene @arguments(count: $count, cursor: $cursor)
+          ...Artists_gene @arguments(count: $count, cursor: $cursor, aggregations: $aggregations)
         }
       }
     `,
@@ -147,5 +218,10 @@ interface RelayProps {
         }
       }>
     }
+    filter_aggregations: {
+      aggregations: Array<{
+        slice: string
+      }>
+    }
   }
 }