Gene Refine price fixes

.vscode/launch.json

@@ -21,6 +21,21 @@
       "internalDebuggerPort": 9090,
       "sourceMaps": true,
       "outDir": "${workspaceRoot}/.vscode/.react"
+    },
+    {
+      "name": "Run Tests With Debugger (slower, use npm run watch for normal work)",
+      "type": "node",
+      "request": "launch",
+      "port": 5858,
+      "address": "localhost",
+      "stopOnEntry": false,
+      "runtimeExecutable": null,
+      "runtimeArgs": [
+        "--debug-brk",
+        "./node_modules/.bin/jest",
+        "-i"
+      ],
+      "cwd": "${workspaceRoot}"
     }
   ]
 }

CHANGELOG.md

@@ -3,6 +3,7 @@
 - Add your contributions below:
 
 - Gave ESLint, Flow and Danger the ability to fail the build - orta
+- Gene Refine button is enabled - orta
 - Fix extra blankspace in Artist Card when data is missing - luc
 - Gene titles wrap so they don't get covered by back button - luc
 

README.md

@@ -42,7 +42,7 @@ There is a comprehensive document covering [our setup here](docs/vscode.md).
 
 ### Vanilla Commands
 
-1. Run `$ npm start` from the top directory, which will:
+1. Run `$ yarn start` from the top directory, which will:
    * Clean the example app’s Xcode build dir.
    * Start the example app’s React Native packager.
    * Start the React Storybooks environment.
@@ -55,16 +55,16 @@ There is a comprehensive document covering [our setup here](docs/vscode.md).
 You can use React Native debugger which is a standalone app to inspect views as well as the standard chrome debugging tools.
 
 1. Install [RN debugger](https://github.com/jhen0409/react-native-debugger): `$ brew update && brew cask install react-native-debugger`.
-2. You can now use `$ npm run rndebugger` instead of `$ npm start` to configure the React Native packager to use RNdebugger.
+2. You can now use `$ yarn run rndebugger` instead of `$ yarn start` to configure the React Native packager to use RNdebugger.
 
 ![screen shot 2017-01-23 at 1 00 01 pm](https://cloud.githubusercontent.com/assets/296775/22220775/09bb10ec-e17e-11e6-8801-3b0ccbdbaa84.png)
 
 ### Updating Dependencies
 
 1. We vendor some data from other repositories that you will sometimes need to update. You can either update all of them
-   with `$ npm run sync-externals` or individually:
-   * The GraphQL schema of metaphysics that Relay uses to generate queries from: `$ npm run sync-schema`
-   * The colors defined in Artsy’s style-guide: `$ npm run sync-colors`
+   with `$ yarn run sync-externals` or individually:
+   * The GraphQL schema of metaphysics that Relay uses to generate queries from: `$ yarn run sync-schema`
+   * The colors defined in Artsy’s style-guide: `$ yarn run sync-colors`
 
 ### Using Relay
 

lib/app_registry.js

@@ -62,7 +62,8 @@ class Gene extends RootContainer {
     this.route = new Routes.Gene({
       geneID: props.geneID,
       medium: medium ? medium : '*',
-      price_range: price_range ? price_range : '*-*'
+      // The replace can be removed once metaphysics#486 is merged
+      price_range: price_range ? price_range.replace(/\.00/g, '') : '*-*'
     })
   }
 }

lib/containers/__tests__/__snapshots__/gene-tests.js.snap

@@ -198,15 +198,55 @@ exports[`test looks like expected 1`] = `
                 },
                 Object {
                   "fontStyle": "italic",
-                  "marginTop": 4,
+                  "marginTop": 2,
+                  "maxWidth": 245,
                 },
                 Object {
                   "fontFamily": "AGaramondPro-Regular",
                 },
               ]
             }>
-            12 works ・ 
+            12 works ・ Painting ・ Below $100,000
           </Text>
+          <TouchableHighlight
+            activeOpacity={1}
+            onPress={[Function]}
+            style={
+              Object {
+                "alignItems": "center",
+                "backgroundColor": "rgba(255, 255, 255, 1)",
+                "borderColor": "#e5e5e5",
+                "borderWidth": 1,
+                "height": 26,
+                "justifyContent": "center",
+                "width": 80,
+              }
+            }
+            underlayColor="#6e1fff">
+            <View>
+              <Text
+                accessible={true}
+                allowFontScaling={true}
+                ellipsizeMode="tail"
+                style={
+                  Array [
+                    Object {
+                      "fontSize": 12,
+                    },
+                    Object {
+                      "color": "black",
+                      "fontFamily": "AGaramondPro-Regular",
+                      "opacity": 1,
+                    },
+                    Object {
+                      "fontFamily": "Avant Garde Gothic ITCW01Dm",
+                    },
+                  ]
+                }>
+                REFINE
+              </Text>
+            </View>
+          </TouchableHighlight>
         </View>
         <View
           style={
@@ -276,9 +316,9 @@ exports[`test looks like expected 1`] = `
           }
           queryState={
             Object {
-              "selectedMedium": undefined,
-              "selectedPriceRange": undefined,
-              "sort": "-year",
+              "selectedMedium": "painting",
+              "selectedPriceRange": "*-100000",
+              "sort": "-partner_updated_at",
             }
           }
           resolveQuery={[Function]} />

lib/containers/__tests__/gene-tests.js

@@ -5,6 +5,9 @@ import 'react-native'
 import React from 'react'
 import renderer from 'react-test-renderer'
 
+var refineCallbackPromise = () => Promise.resolve()
+jest.mock('../../native_modules/refine_callback.js', () => { return { triggerRefine: () => refineCallbackPromise() }})
+
 // Stub out these views for simplicities sake
 jest.mock('../../components/gene/header', () => 'Header')
 jest.mock('../../components/gene/artworks', () => 'Artworks')
@@ -16,6 +19,83 @@ jest.mock('../../components/switch_view', () => 'Spinner')
 
 import Gene from '../gene'
 
+describe('state', () => {
+  it('sets up the initial state in componentWillMount', () => {
+      const gene = new Gene()
+      gene.props = {
+        medium: 'glitch',
+        price_range: '*-*'
+      }
+
+      gene.componentWillMount()
+
+      expect(gene.state).toEqual({
+        selectedTabIndex: 0,
+        showingStickyHeader: true,
+        sort: '-partner_updated_at',
+        selectedMedium: 'glitch',
+        selectedPriceRange: '*-*',
+      })
+  })
+
+  it('updates from the switch change the selectedTabIndex', ()=> {
+      const gene = new Gene()
+      const switchEvent = {
+        nativeEvent: {
+          selectedIndex: 23
+        }
+      }
+
+      gene.setState = jest.fn()
+      gene.switchSelectionDidChange(switchEvent)
+
+      expect(gene.setState).lastCalledWith({selectedTabIndex: 23})
+  })
+
+  // OK, this is a long one, but it's important.
+
+  it('updates the state with new data from Eigen', () => {
+    // Setup a Gene Component like normal
+     const gene = new Gene()
+      gene.setState = jest.fn()
+      gene.props = {
+        medium: 'glitch',
+        price_range: '*-*',
+        relay: { setVariables: jest.fn() },
+        gene: { filtered_artworks: { aggregations: []} }
+      }
+
+      // The data we expect back from Eigen when you've hit the refine button,
+      // this is a promise that Eigen would normally resolve (via the modal)
+      refineCallbackPromise = () => Promise.resolve({
+        medium: 'porcupines',
+        selectedPrice: '1000-80000',
+        sort: '-desc'
+      })
+
+      // Mount it to set up initial state
+      gene.componentWillMount()
+
+      // Then when the gene has been tapped, it returns the refine data above
+      return gene.refineTapped().then(() => {
+
+      // This should trigger new state inside the component
+      expect(gene.setState).lastCalledWith({
+        selectedMedium: 'porcupines',
+        selectedPriceRange: '1000-80000',
+        sort: '-desc'
+      })
+
+      // As well as trigger new state for Relay ( triggering a new call to metaphysics )
+      expect(gene.props.relay.setVariables).lastCalledWith({
+        medium: 'porcupines',
+        price_range: '1000-80000',
+        sort: '-desc'
+      })
+    })
+  })
+})
+
 describe('handling price ranges', () => {
   it('is empty when *-*', () => {
     const gene = new Gene()
@@ -72,7 +152,7 @@ it('looks like expected', () => {
       }
     }
   const tree = renderer.create(
-    <Gene geneID={props.gene.name} gene={props.gene}/>
+    <Gene geneID={props.gene.name} medium="painting" price_range="*-100000" gene={props.gene}/>
   ).toJSON()
   expect(tree).toMatchSnapshot()
 })

lib/containers/gene.js

@@ -8,6 +8,7 @@ import _ from 'lodash'
 
 import ParallaxScrollView from 'react-native-parallax-scroll-view'
 
+import WhiteButton from '../components/buttons/flat_white'
 import Separator from '../components/separator'
 import SerifText from '../components/text/serif'
 
@@ -71,7 +72,7 @@ class Gene extends React.Component {
       selectedTabIndex: 0,
       showingStickyHeader: true,
 
-      sort: '-year',
+      sort: '-partner_updated_at',
       selectedMedium: this.props.medium,
       selectedPriceRange: this.props.price_range,
     }
@@ -120,7 +121,6 @@ class Gene extends React.Component {
     return this.selectedTabTitle() === TABS.WORKS
   }
 
-
   foregroundHeight: number = 200
 
   /** Top of the Component */
@@ -152,7 +152,7 @@ class Gene extends React.Component {
 
   refineTapped = (button) => {
     const initialSettings = {
-      sort: '-year',
+      sort: '-partner_updated_at',
       selectedMedium: this.props.medium,
       selectedPrice: this.props.price_range,
       aggregations: this.props.gene.filtered_artworks.aggregations
@@ -165,7 +165,9 @@ class Gene extends React.Component {
       aggregations: this.props.gene.filtered_artworks.aggregations
     }
 
-    Refine.triggerRefine(this, initialSettings, currentSettings).then( (newSettings) => {
+    // We're returning the promise so that it's easier
+    // to write tests with the resolved state
+    return Refine.triggerRefine(this, initialSettings, currentSettings).then( (newSettings) => {
       this.setState({
         selectedMedium: newSettings.medium,
         selectedPriceRange: newSettings.selectedPrice,
@@ -200,11 +202,14 @@ class Gene extends React.Component {
     const topMargin = this.state.showingStickyHeader ? 0 : HeaderHeight
     const separatorColor = this.state.showingStickyHeader ? 'white' : colors['gray-regular']
 
+    const refineButtonWidth = 80
+    const maxLabelWidth = Dimensions.get('window').width - (this.commonPadding * 2) - refineButtonWidth - 10
+
     return (<View style={{ backgroundColor: 'white'}}>
         <Separator style={{marginTop:topMargin, backgroundColor:separatorColor}} />
         <View style={{flexDirection: 'row', justifyContent: 'space-between', height: 26, marginTop:12, marginBottom:12, paddingLeft: this.commonPadding, paddingRight: this.commonPadding }} >
-          <SerifText style={{ fontStyle: 'italic', marginTop:4 }}>{ this.artworkQuerySummaryString() }</SerifText>
-          {/* <WhiteButton text="REFINE" style={{ height: 26, width: 80, }} onPress={this.refineTapped}/> */}
+          <SerifText style={{ fontStyle: 'italic', marginTop: 2, maxWidth: maxLabelWidth }}>{ this.artworkQuerySummaryString() }</SerifText>
+          <WhiteButton text="REFINE" style={{ height: 26, width: refineButtonWidth, }} onPress={this.refineTapped}/>
         </View>
         <Separator style={{ backgroundColor:separatorColor }}/>
       </View>)
@@ -248,8 +253,9 @@ class Gene extends React.Component {
     let items: string[] = []
     const works = this.props.gene.filtered_artworks.total.toLocaleString()
     items.push(`${works} works`)
+
     if (this.state.selectedMedium !== '*') { items.push( _.startCase(this.state.selectedMedium) ) }
-    // if (this.state.selectedPriceRange !== '*-*') { items.push( this.priceRangeToHumanReadableString(this.props.selectedPriceRange) ) }
+    if (this.state.selectedPriceRange !== '*-*') { items.push( this.priceRangeToHumanReadableString(this.state.selectedPriceRange) ) }
     return items.join(' ・ ')
   }
 
@@ -323,7 +329,7 @@ export default Relay.createContainer(Gene, {
   initialVariables: {
     medium: '*',
     price_range: '*-*',
-    sort: '-year'
+    sort: '-partner_updated_at'
   },
   fragments: {
     gene: () => Relay.QL`

package.json

@@ -80,4 +80,4 @@
   "peerDependencies": {
     "babel-relay-plugin": "^0.9.0"
   }
-}
+}