import React from 'react'
import { Link } from 'react-router'
import {TableRow, TableRowColumn} from 'material-ui/Table'
import MediaQuery from 'react-responsive'
import moment from 'moment'
import RaisedButton from 'material-ui/RaisedButton';
import IconButton from 'material-ui/IconButton';
import NavigationMoreHoriz from 'material-ui/svg-icons/navigation/more-horiz'

function doneSince(endTime) {
  const endDate = new Date(endTime).getTime()
  return moment(endDate).fromNow()
}

const HarvestRow = ({harvest, catalog}) => {
  const color = harvest.status === "successful" ? "green" : "red"
  const styles = {
    button: {
      minWidth: '',
      fontSize: '2em',
    },
  }

  return (
    <TableRow hoverable={true}>
      <TableRowColumn>
        <MediaQuery style={styles.label} minWidth={651} className={`ui ${color} circular label`} >
          {harvest.status}
        </MediaQuery>
        <MediaQuery maxWidth={650}>
          <div className={`ui ${color} circular label`} >
            {harvest.status === "successful" ? <i className="checkmark icon"/> : <i className="remove icon"/>}
          </div>
        </MediaQuery>
      </TableRowColumn>
      <TableRowColumn>{harvest.itemsFound}</TableRowColumn>
      <TableRowColumn>{doneSince(harvest.finished) || 'N/A' }</TableRowColumn>
      <TableRowColumn>
        <Link to={`/catalogs/${catalog.id}/harvest/${harvest._id}`}>
          <MediaQuery minWidth={651} >
            <RaisedButton label="More" primary={true} />
          </MediaQuery>
          <MediaQuery maxWidth={650} >
            <IconButton>
              <NavigationMoreHoriz />
            </IconButton>
          </MediaQuery>
        </Link>
      </TableRowColumn>
    </TableRow>
      )
}

export default HarvestRow

@@ -118,50 +118,8 @@
 le'%0A
-import MediaQuery from 'react-responsive'%0A
 impo
@@ -198,135 +198,8 @@
 on';
-%0Aimport IconButton from 'material-ui/IconButton';%0Aimport NavigationMoreHoriz from 'material-ui/svg-icons/navigation/more-horiz'
 %0A%0Afu
@@ -427,346 +427,75 @@
 %22%0A  
-const styles = %7B%0A    button: %7B%0A      minWidth: '',%0A      fontSize: '2em',%0A    %7D,%0A  %7D%0A%0A  return (%0A    %3CTableRow hoverable=%7Btrue%7D%3E%0A      %3CTableRowColumn%3E%0A        %3CMediaQuery style=%7Bstyles.label%7D minWidth=%7B651%7D className=%7B%60ui $%7Bcolor%7D circular label%60%7D %3E%0A          %7Bharvest.status%7D%0A        %3C/MediaQuery%3E%0A        %3CMediaQuery maxWidth=%7B650%7D%3E%0A  
+%0A  return (%0A    %3CTableRow hoverable=%7Btrue%7D%3E%0A      %3CTableRowColumn%3E%0A
     
@@ -556,18 +556,16 @@
         
-  
 %7Bharvest
@@ -575,129 +575,23 @@
 atus
- === %22successful%22 ? %3Ci className=%22checkmark icon%22/%3E : %3Ci className=%22remove icon%22/%3E%7D%0A          %3C/div%3E%0A        %3C/MediaQuery
+%7D%0A        %3C/div
 %3E%0A  
@@ -847,49 +847,8 @@
 %60%7D%3E%0A
-          %3CMediaQuery minWidth=%7B651%7D %3E%0A  
     
@@ -902,184 +902,8 @@
  /%3E%0A
-          %3C/MediaQuery%3E%0A          %3CMediaQuery maxWidth=%7B650%7D %3E%0A            %3CIconButton%3E%0A              %3CNavigationMoreHoriz /%3E%0A            %3C/IconButton%3E%0A          %3C/MediaQuery%3E%0A
     

Remove MediaQuery