Merge pull request #163 from anandaroop/add-reaction

Integrate Reaction

.babelrc

@@ -1,23 +1,22 @@
 {
   "presets": [
     [
-      "env",
+      "@babel/preset-env",
       {
         "modules": false,
         "targets": {
           "browsers": "> 1%",
           "uglify": true
-        },
-        "useBuiltIns": true
+        }
       }
     ],
-    "react"
+    "@babel/preset-react"
   ],
   "plugins": [
-    "syntax-dynamic-import",
-    "transform-object-rest-spread",
+    "@babel/plugin-syntax-dynamic-import",
+    "@babel/plugin-proposal-object-rest-spread",
     [
-      "transform-class-properties",
+      "@babel/plugin-proposal-class-properties",
       {
         "spec": true
       }
@@ -40,7 +39,7 @@
     "test": {
       "presets": [
         [
-          "env",
+          "@babel/env",
           {
             "modules": "commonjs"
           }

.circleci/config.yml

@@ -27,6 +27,7 @@ jobs:
 
       - run: bundle exec rubocop --rails
       - run: yarn run lint
+      - run: chromedriver-update 2.38
       - run: bundle exec rspec
       - run: yarn run test -- --runInBand
 

.gitignore

@@ -15,3 +15,5 @@ npm-debug.log
 /node_modules
 yarn-debug.log*
 .yarn-integrity
+yarn-error.log
+

app/javascript/components/batch_update/components/ArtworkSearchResult.js

@@ -1,7 +1,8 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import styled, { css } from 'styled-components'
-import { colors } from './Layout'
+// import { colors } from './Layout'
+import Colors from "@artsy/reaction/dist/Assets/Colors"
 import missingImage from './missing_image.png'
 
 class ArtworkSearchResult extends React.Component {
@@ -50,8 +51,8 @@ const StyledArtworkSearchResult = styled(ArtworkSearchResult)`
   }
 
   ${props => props.selected && css`
-    background: ${colors.purple};
-    outline: solid 5px ${colors.purple};
+    background: ${Colors.purpleRegular};
+    outline: solid 5px ${Colors.purpleRegular};
     color: white;
   `}
 

app/javascript/components/batch_update/components/SearchForm.js

@@ -1,37 +1,55 @@
 import React from 'react'
 import styled from 'styled-components'
 import CurrentCriteria from './CurrentCriteria'
-import {
-  CreatedAfterDateInput,
-  CreatedBeforeDateInput
-} from './DateInput'
+import { CreatedAfterDateInput, CreatedBeforeDateInput } from './DateInput'
 import {
   FairAutosuggest,
   GeneAutosuggest,
   PartnerAutosuggest,
   TagAutosuggest
 } from './Autosuggest'
 import FilterOptions from './FilterOptions'
-import { Button } from './Buttons'
+import Button from '@artsy/reaction/dist/Components/Buttons/Default'
+import InvertedButton from '@artsy/reaction/dist/Components/Buttons/Inverted'
+
+const fullWidth = `
+  margin: 0;
+  width: 100%;
+`
+const FullWidthButton = styled(Button)`
+  ${fullWidth}
+`
+
+const FullWidthInvertedButton = styled(InvertedButton)`
+  ${fullWidth}
+`
 
 class SearchForm extends React.Component {
-  constructor (props) {
+  constructor(props) {
     super(props)
     this.maybeRenderEditButton = this.maybeRenderEditButton.bind(this)
   }
 
-  maybeRenderEditButton () {
-    const { artworksCount, selectedArtworksCount, onOpenBatchUpdate } = this.props
+  maybeRenderEditButton() {
+    const {
+      artworksCount,
+      selectedArtworksCount,
+      onOpenBatchUpdate
+    } = this.props
     if (artworksCount === 0) {
       return null
     } else if (selectedArtworksCount === 0) {
-      return <Button fullWidth disabled>Edit Artworks</Button>
+      return <FullWidthButton disabled>Edit Artworks</FullWidthButton>
     } else {
-      return <Button fullWidth primary onClick={onOpenBatchUpdate}> Edit Artworks </Button>
+      return (
+        <FullWidthInvertedButton onClick={onOpenBatchUpdate}>
+          Edit Artworks
+        </FullWidthInvertedButton>
+      )
     }
   }
 
-  render () {
+  render() {
     const {
       clearState,
       createdAfterDate,
@@ -44,16 +62,9 @@ class SearchForm extends React.Component {
       tags
     } = this.props
 
-    const {
-      onAddGene,
-      onAddTag,
-      updateState
-    } = this.props
+    const { onAddGene, onAddTag, updateState } = this.props
 
-    const {
-      genomedFilter,
-      publishedFilter
-    } = this.props
+    const { genomedFilter, publishedFilter } = this.props
 
     return (
       <div className={this.props.className}>
@@ -70,24 +81,22 @@ class SearchForm extends React.Component {
           updateState={updateState}
         />
 
-        <GeneAutosuggest placeholder='Add a gene' onSelectGene={onAddGene} />
-        <TagAutosuggest placeholder='Add a tag' onSelectTag={onAddTag} />
+        <GeneAutosuggest placeholder="Add a gene" onSelectGene={onAddGene} />
+        <TagAutosuggest placeholder="Add a tag" onSelectTag={onAddTag} />
         {partner === null && <PartnerAutosuggest updateState={updateState} />}
         {fair === null && <FairAutosuggest updateState={updateState} />}
-        {
-          createdAfterDate === null &&
-            <CreatedAfterDateInput
-              updateState={updateState}
-              createdAfterDate={createdAfterDate}
-            />
-        }
-        {
-          createdBeforeDate === null &&
-            <CreatedBeforeDateInput
-              updateState={updateState}
-              createdBeforeDate={createdBeforeDate}
-            />
-        }
+        {createdAfterDate === null && (
+          <CreatedAfterDateInput
+            updateState={updateState}
+            createdAfterDate={createdAfterDate}
+          />
+        )}
+        {createdBeforeDate === null && (
+          <CreatedBeforeDateInput
+            updateState={updateState}
+            createdBeforeDate={createdBeforeDate}
+          />
+        )}
 
         <FilterOptions
           genomedFilter={genomedFilter}
@@ -103,7 +112,6 @@ class SearchForm extends React.Component {
 
 /* default styled component */
 
-const StyledSearchForm = styled(SearchForm)`
-`
+const StyledSearchForm = styled(SearchForm)``
 
 export default StyledSearchForm