pastelsky

ssh-rsa AAAAB3NzaC1yc2EAAAADAQABAAABAQC2AWKrVzu8bA4boguZDHU3ehtfKr3YSheJZ1ydQ9xlbksdSM2rWENvPUQkSO2Dx6BPU780yG6pgiSQiYDnML2ULMuqw2V4fA+0i+ZdI6pOpgl1WNxwr3xkmHxQiktQDvbHsoJucJkILp4jmzFqoKjfez9nyuGFgj9vpHrZwvKyiO8qMQgxjy+kkIgbwwvZJSluU7xYlSKdimFOvx8A2l2GnLt3gDjJfNQUFvmyB90nFxtOxIwe88v8SQfOJaEt0aagKAqU/cd9pIxNjQsKUAzMlt8DNzTrmiT+m3kbrVqyyPM6/j0KHAFvMFtS55AqP38PKDLndr9XGrpCiC1wB+X1 skanodia@C02W42GKHTD8

pastelsky

import React, { Component, PropTypes } from 'react'

class HelloWorld extends Component {
   
  static propTypes = {
    show: PropTypes.bool
  }
  
render() {
  const { show } = this.state

pastelsky

function ProductCard /* vs. P̶r̶o̶d̶u̶c̶t̶ */ ({ ... }) { }

function AutoSuggestionList /* vs. A̶u̶t̶o̶S̶u̶g̶g̶e̶s̶t̶i̶o̶n̶s̶ */ ({ ... }) { }

pastelsky

// Extends DOM functionality
function SearchInput /* vs. S̶e̶a̶r̶c̶h̶ */   ({ ... }) { }


// Structural components
function ProductCard /* vs. P̶r̶o̶d̶u̶c̶t̶ */ ({ ... }) { }

function AutoSuggestionList /* vs. A̶u̶t̶o̶S̶u̶g̶g̶e̶s̶t̶i̶o̶n̶s̶ */ ({ ... }) { }

pastelsky

class SearchPage extends Component {
  
  // Helper Functions
  fetchResults() { ... }
  
  fireAnalyticsEvent() { ... }
  
  // Event Handlers
  handlePagination() { ... }
  

pastelsky

class SearchPage extends Component {
  
  get resultCount() {
    const { count, query } = this.state
    
    if (count === 0) {
      return `No results for you, sorry!`
    } else if (count === 1) {
      return `Found 1 result for ${ query }` 
    } else {

pastelsky

class ProductList extends Component {
  
  handleAccordionClick() {
    //...
  }
  
  handleButtonClick(){
    //...
  }
  

pastelsky

class Accordion extends Component {      
   static propTypes = {
     // Booleans
     isOpen: PropTypes.boolean,
     showArrow: PropTypes.boolean,
     shouldAnimate: PropTypes.boolean,
      
     // Events
     onOpen: PropTypes.func,
     onHeaderClick: PropTypes.func,

pastelsky

class Accordion extends Component  {      
  /*
    contructor() {
      this.handleHeaderClick = this.handleHeaderClick.bind(this)
      this.handleArrowClick = this.handleArrowClick.bind(this)
    }
   */
  
   handleHeaderClick () => {
      this.setState({ isOpen: !this.state.isOpen })    

pastelsky

[TableColumns.COST, {
  render: (cost, record) => (
    <Cell.Number value={ cost }
      isEditable={ this.canEdit(TableColumns.COST) }
      onSubmit={ value => this.handleCostSubmit(value, record) }
    />
  ),
}],
[TableColumns.IS_PRIORITY, {
  render: (isPriority, record) => (