<commit_before>import React from 'react'
import Link from 'gatsby-link'

// import FaGithub from 'react-icons/lib/fa/github'
// import FaStackOverflow from 'react-icons/lib/fa/stack-overflow'

import { s } from '../utils/breakpoints'

const Footer = () => (

        © {new Date().getFullYear()}
        Richard Sternagel

      {/*
      <Link to={'/prinzipien/'}>Prinzipien</Link>

      */}

        <Link to={'/impressum/'}>Impressum</Link>
        •
        <Link to={'/datenschutz/'}>Datenschutz</Link>

      {/*

        <FaGithub />
        <FaStackOverflow />

      */}

)

export default Footer
<commit_msg>integrate LanguageSwitcher<commit_after>import React from 'react'
import PropTypes from 'prop-types'

import { translate } from 'react-i18next'
import Link from 'gatsby-link'

import LanguageSwitcher from './LanguageSwitcher'

import { s } from '../utils/breakpoints'

const Footer = ({ t, pathname }) => (

          © {new Date().getFullYear()}
          Richard Sternagel

        {/*
      <Link to={'/prinzipien/'}>Prinzipien</Link>

      */}

          <Link to={t('imprintPath')}>{t('imprint')}</Link>
          •
          <Link to={t('privacyPath')}>{t('privacy')}</Link>

        <LanguageSwitcher pathname={pathname} />

)

Footer.propTypes = {
  pathname: PropTypes.string.isRequired,
  t: PropTypes.func.isRequired
}

export default translate()(Footer)
<|endoftext|>


<commit_before>/**
* # Header.js
*
 * This component initially displays a image. But when clicked, things
 * get interesting.
 *
 * On the initial display after being clicked, the
 * textinput will display the current ```state``` of the application.
 *
 * The button will be enabled and if clicked, whatever state is now
 * contained in the textinput will be processed and the application
 * will be restored to that state.
 *
 * By pasting in a previous state, the application will reset to that
 * state
 *
 * When the mark image is clicked, it is just toggled to display or hide.
*/
'use strict';

/**
 * ## Imports
 *
 * React
*/
import React, {PropTypes} from 'react';
import
{
  ActivityIndicator,
  Image,
  StyleSheet,
  Text,
  TextInput,
  TouchableHighlight,
  View
} from 'react-native';

/**
 * Project component that will respond to onPress
 */
const FormButton = require('./FormButton');
/**
 * ## Styles
 */
var styles = StyleSheet.create({
  container: {
    flexDirection: 'column',
    flex: 1,
    marginTop: 10
  },
  header: {
    marginTop: 20,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'transparent'
  },
  mark: {
    height:100,
    width: 100
  }

});

var Header = React.createClass({
  /**
   * ## Header.class
   * set the initial state of having the button be disabled.
   */
  getInitialState() {
    return {
      text: '',
      isDisabled: true
    };
  },
  /**
   * ### propTypes
   * * isFetching: display the spinner if true
   * * showState: should the JSON state, currentState, be displayed
   * * currentState: the JSON state
   * * onGetState: the action to call to get the current state
   * * onSetState: the action to call to set the state
   */
  propTypes: {
    isFetching: PropTypes.bool,
    showState: PropTypes.bool,
    currentState: PropTypes.object,
    onGetState: PropTypes.func,
    onSetState: PropTypes.func
  },
  /**
   * ### _onPressMark
   * Call the onGetState action passing the state prop
   */
  _onPressMark() {
    this.props.onGetState(!this.props.showState);
  },
  /**
   * ### _onChangeText
   * when the textinput value changes, set the state for that component
   */
  _onChangeText(text) {
    this.setState({
      text,
      isDisabled: false
    });
  },
  /**
   * ### _updateStateButtonPress
   * When the button for the state is pressed, call ```onSetState```
   */
  _updateStateButtonPress() {
    this.props.onSetState(this.state.text);
  },

  /**
   * ### render
   *
   * if showState, stringify the currentState and display it to the
   * browser for copying. Then display to the user.
   *
   * When the value of the input changes, call ```_onChangeText```
   *
   * When the 'Update State' button is pressed, we're off to the
   * races with Hot Loading...just call the
   * ```_updateStateButtonPress``` and away we go...
   *
   */
  render() {

    if (this.props.showState) {
      let displayText = JSON.stringify(this.props.currentState);

     console.log(displayText);

    }

    return (
      <View>
        <View style={styles.header}>

          <TouchableHighlight onPress={this._onPressMark}>

            <Image style={styles.mark}
                   source={require('../images/Snowflake.png')}
            />
          </TouchableHighlight>
          {this.props.isFetching ?
           <ActivityIndicator    animating={true}      size="large"   />
           :
           null
          }

        </View>
        {this.props.showState ?
         <View style={styles.container}>
           <Text>{I18n.t("Header.current_state")} ({I18n.t("Header.see_console")})</Text>
           <TextInput style={{height: 100, borderColor: 'gray', borderWidth: 1}}
                      value={displayText}
                      editable={true}
                      multiline={true}
                      onChangeText={(text) => this._onChangeText(text)}
                      numberOfLines={20}>
           </TextInput>
           <View style={{
               marginTop: 10
             }}>
             <FormButton  isDisabled={this.state.isDisabled}
                          onPress={this._updateStateButtonPress}
                          buttonText={'Update State'}>
             </FormButton>

           </View>
         </View>
         :
         null}
      </View>
    );
  }
});

module.exports = Header;
<commit_msg>Update Header.js<commit_after>/**
* # Header.js
*
 * This component initially displays a image. But when clicked, things
 * get interesting.
 *
 * On the initial display after being clicked, the
 * textinput will display the current ```state``` of the application.
 *
 * The button will be enabled and if clicked, whatever state is now
 * contained in the textinput will be processed and the application
 * will be restored to that state.
 *
 * By pasting in a previous state, the application will reset to that
 * state
 *
 * When the mark image is clicked, it is just toggled to display or hide.
*/
'use strict';

/**
 * ## Imports
 *
 * React
*/
import React, {PropTypes} from 'react';
import
{
  ActivityIndicator,
  Image,
  StyleSheet,
  Text,
  TextInput,
  TouchableHighlight,
  View
} from 'react-native';

/**
 * Project component that will respond to onPress
 */
const FormButton = require('./FormButton');
/**
 * ## Styles
 */
var styles = StyleSheet.create({
  container: {
    flexDirection: 'column',
    flex: 1,
    marginTop: 10
  },
  header: {
    marginTop: 20,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'transparent'
  },
  mark: {
    height:100,
    width: 100
  }

});

/**
 * ### Translations
 */
var I18n = require('react-native-i18n');
import Translations from '../lib/Translations';
I18n.translations = Translations;

var Header = React.createClass({
  /**
   * ## Header.class
   * set the initial state of having the button be disabled.
   */
  getInitialState() {
    return {
      text: '',
      isDisabled: true
    };
  },
  /**
   * ### propTypes
   * * isFetching: display the spinner if true
   * * showState: should the JSON state, currentState, be displayed
   * * currentState: the JSON state
   * * onGetState: the action to call to get the current state
   * * onSetState: the action to call to set the state
   */
  propTypes: {
    isFetching: PropTypes.bool,
    showState: PropTypes.bool,
    currentState: PropTypes.object,
    onGetState: PropTypes.func,
    onSetState: PropTypes.func
  },
  /**
   * ### _onPressMark
   * Call the onGetState action passing the state prop
   */
  _onPressMark() {
    this.props.onGetState(!this.props.showState);
  },
  /**
   * ### _onChangeText
   * when the textinput value changes, set the state for that component
   */
  _onChangeText(text) {
    this.setState({
      text,
      isDisabled: false
    });
  },
  /**
   * ### _updateStateButtonPress
   * When the button for the state is pressed, call ```onSetState```
   */
  _updateStateButtonPress() {
    this.props.onSetState(this.state.text);
  },

  /**
   * ### render
   *
   * if showState, stringify the currentState and display it to the
   * browser for copying. Then display to the user.
   *
   * When the value of the input changes, call ```_onChangeText```
   *
   * When the 'Update State' button is pressed, we're off to the
   * races with Hot Loading...just call the
   * ```_updateStateButtonPress``` and away we go...
   *
   */
  render() {
    let displayText;
    if (this.props.showState) {
      displayText = JSON.stringify(this.props.currentState);

     console.log(displayText);

    }

    return (
      <View>
        <View style={styles.header}>

          <TouchableHighlight onPress={this._onPressMark}>

            <Image style={styles.mark}
                   source={require('../images/Snowflake.png')}
            />
          </TouchableHighlight>
          {this.props.isFetching ?
           <ActivityIndicator    animating={true}      size="large"   />
           :
           null
          }

        </View>
        {this.props.showState ?
         <View style={styles.container}>
           <Text>{I18n.t("Header.current_state")} ({I18n.t("Header.see_console")})</Text>
           <TextInput style={{height: 100, borderColor: 'gray', borderWidth: 1}}
                      value={displayText}
                      editable={true}
                      multiline={true}
                      onChangeText={(text) => this._onChangeText(text)}
                      numberOfLines={20}>
           </TextInput>
           <View style={{
               marginTop: 10
             }}>
             <FormButton  isDisabled={this.state.isDisabled}
                          onPress={this._updateStateButtonPress}
                          buttonText={'Update State'}>
             </FormButton>

           </View>
         </View>
         :
         null}
      </View>
    );
  }
});

module.exports = Header;
<|endoftext|>


<commit_before>'use strict';

module.exports = defineRules;

var visionaryWords = [
    /blue\s*sk(?:y|ies)/,
    /enlighten(?:ed|ing)?/,
    /green\s*fields?/,
    /reach(?:ed|ing) out/,
    /visionar(?:y|ies)/
];

function defineRules (linter) {

    // Visionary terminology
    linter.addRule({
        name: 'Visionary Terminology',
        desc: 'Terms like "blue sky" and "enlightened" often indicate that a non technical ' +
              'person (perhaps a CEO or stakeholder) has been involved in writing the spec. Be ' +
              'down-to-earth, and explain things in plain English.',
        test: function (spec, result) {
            var visionaryMentions = spec.containsAnyOf(visionaryWords);
            var amount = (visionaryMentions.length > 2 ? 'Lots of' : 'Some');
            if (visionaryMentions.length > 0) {
                result.addWarning(
                    amount + ' "visionary" terminology is used',
                    visionaryMentions
                );
                result.addCultureFailPoints(visionaryMentions.length / 2);
                result.addRealismFailPoints(visionaryMentions.length / 2);
            }
        }
    });

}
<commit_msg>Add some more visionary words<commit_after>'use strict';

module.exports = defineRules;

var visionaryWords = [
    /blue\s*sk(?:y|ies)/,
    /enlighten(?:ed|ing)?/,
    /green\s*fields?/,
    /incentivi[sz]e/,
    'paradigm',
    /producti[sz]e/,
    /reach(?:ed|ing) out/,
    /synerg(?:y|ize|ise)/,
    /visionar(?:y|ies)/
];

function defineRules (linter) {

    // Visionary terminology
    linter.addRule({
        name: 'Visionary Terminology',
        desc: 'Terms like "blue sky" and "enlightened" often indicate that a non technical ' +
              'person (perhaps a CEO or stakeholder) has been involved in writing the spec. Be ' +
              'down-to-earth, and explain things in plain English.',
        test: function (spec, result) {
            var visionaryMentions = spec.containsAnyOf(visionaryWords);
            var amount = (visionaryMentions.length > 2 ? 'Lots of' : 'Some');
            if (visionaryMentions.length > 0) {
                result.addWarning(
                    amount + ' "visionary" terminology is used',
                    visionaryMentions
                );
                result.addCultureFailPoints(visionaryMentions.length / 2);
                result.addRealismFailPoints(visionaryMentions.length / 2);
            }
        }
    });

}
<|endoftext|>


<commit_before>import React from 'react'
import styled from 'styled-components'
import { fontSize, palette } from '../m-btn'

const Wrapper = styled.section`
    text-align: center;
    padding: 2rem;
`

const Title = styled.h1`
  color: ${palette.primary};
  font-size: ${fontSize.heading1};
`

export default () => (
  <Wrapper>
    <Title>Mbtn</Title>

One to rule them all

  </Wrapper>
)
<commit_msg>change title header<commit_after>import React from 'react'
import styled from 'styled-components'
import { fontSize, palette } from '../m-btn'

const Wrapper = styled.section`
    text-align: center;
    padding: 2rem;
`

const Title = styled.h1`
  color: ${palette.primary};
  font-size: ${fontSize.heading1};
`

export default () => (
  <Wrapper>
    <Title>{'<Mbtn />'}</Title>

One to rule them all

  </Wrapper>
)
<|endoftext|>


<commit_before><commit_msg>bugfix promise.reject before callback exist test<commit_after><|endoftext|>


<commit_before><commit_msg>refactor<commit_after><|endoftext|>


<commit_before>import React, {Component, PropTypes} from 'react';
import {Link} from 'react-router';
import {
  FontIcon,
  Toolbar,
  ToolbarGroup,
  ToolbarTitle,
  DropDownIcon,
  FlatButton
} from 'material-ui';

class Navbar extends Component {

  static propTypes = {
    user: PropTypes.object,
    logout: PropTypes.func
  };

  static contextTypes = {
    router: PropTypes.object.isRequired,
    store: PropTypes.object.isRequired
  };

  render() {
    const styles = require('./Navbar.scss');
    const {user, logout} = this.props;

    const iconMenuItems = user ? [
      // { payload: '1', text: `Logged in as ${user.name}` },
      { payload: '2', text: 'Log Out' }
    ] : [
      { payload: '1', text: 'Log In' }
    ];

    const toolBarStyles = {
      backgroundColor: '#45b337',
      position: 'fixed',
      top: 0,
      zIndex: 100
    };

    const signInOutBtnStyles = {
      backgroundColor: 'transparent',
      signInOutBtnStyles
    };

    return (
      <Toolbar style={toolBarStyles}>
        <ToolbarGroup key={0} float="left">
          <Link to="/">

            <ToolbarTitle text="Fresh Food Connect" style={{
              color: 'white'}}/>
          </Link>
        </ToolbarGroup>

        <ToolbarGroup key={1} float="right">
          <FontIcon className="mui-icon-sort" />
          <DropDownIcon iconClassName="icon-navigation-expand-more" menuItems={iconMenuItems} />
          {user ?
            <Link to="/">
              <FlatButton label="Sign Out"
                  secondary={true}
                  onClick={logout}
                  style={{signInOutBtnStyles}}/>
            </Link>
          :
            <Link to="login">
              <FlatButton label="Sign In"
                  primary={true}
                  style={{lineHeight: '56px'}}/>
            </Link>}
        </ToolbarGroup>
      </Toolbar>
    );
  }
}

export default Navbar;
<commit_msg>closes #46<commit_after>import React, {Component, PropTypes} from 'react';
import {Link} from 'react-router';
import {
  FontIcon,
  Toolbar,
  ToolbarGroup,
  ToolbarTitle,
  ToolbarSeparator,
  DropDownIcon,
  FlatButton,
  Avatar
} from 'material-ui';

class Navbar extends Component {

  static propTypes = {
    user: PropTypes.object,
    logout: PropTypes.func
  };

  static contextTypes = {
    router: PropTypes.object.isRequired,
    store: PropTypes.object.isRequired
  };

  render() {
    const styles = require('./Navbar.scss');
    const {user, logout} = this.props;

    let iconMenuItems = [
      { payload: '1', text: 'Profile' },
      { payload: '2', text: 'Map' }
    ];

    const toolBarStyles = {
      backgroundColor: '#45b337',
      position: 'fixed',
      top: 0,
      zIndex: 100
    };

    const signInOutBtnStyles = {
      backgroundColor: 'transparent',
      signInOutBtnStyles
    };

    return (
      <Toolbar style={toolBarStyles}>
        <ToolbarGroup key={0} float="left">
          <Link to="/">

            <ToolbarTitle text="Fresh Food Connect" style={{
              color: 'white'}}/>
          </Link>
        </ToolbarGroup>

        <ToolbarGroup key={1} float="right">
          {user ?

              <ToolbarTitle text={user.user.email}/>
              <DropDownIcon iconClassName="icon-navigation-expand-more" menuItems={iconMenuItems} iconStyle={{
               color: 'white'
              }}/>
              <Avatar>F</Avatar>
              <ToolbarSeparator/>
              <FlatButton label="Sign Out"
                          secondary={true}
                          onClick={logout}
                          style={{signInOutBtnStyles}}/>

            :
            <Link to="login">
              <FlatButton label="Sign In"
                  primary={true}
                  style={{lineHeight: '56px'}}/>
            </Link>}
        </ToolbarGroup>
      </Toolbar>
    );
  }
}

export default Navbar;
<|endoftext|>


<commit_before>/* eslint-disable no-console */
import React, { PropTypes } from 'react';

// @TODO: check for an alternative to remove global dependency
function getWidgets(name) {
  return window.app.getWidgets(name);
}

function getObservable(name) {
  return window.app.observeWidgets(name);
}

function isRootAppAvailable() {
  return window.app;
}

export default React.createClass({
  propTypes: {
    name: PropTypes.string.isRequired
  },

  componentWillMount() {
    const observable = getObservable();

    this.subscription = observable.subscribe({
      // @TODO: this can be optimized further
      next: () => {
        this.setState({
          list: getWidgets(this.props.name)
        });

        this.state.list.forEach((widget) => {
          if (!isRootAppAvailable()) {
            return;
          }

          const widgetName = widget.getOption('name');

          // @TODO: later re-implement this check with observables
          const rootApp = widget.getRootApp();
          const areDependenciesLoaded = widget.readableApps.length > 0
            ? widget.readableApps.every((readableApp) => rootApp.getStore(readableApp))
            : true;

          if (!areDependenciesLoaded) {
            return;
          }

          const existsInState = this.state.listForRendering.some((item) => {
            return item.name === widgetName;
          });

          if (existsInState) {
            return;
          }

          const WidgetComponent = widget.render();
          const WrapperComponent = React.createClass({
            componentWillMount() {
              widget.beforeMount();
            },

            componentDidMount() {
              widget.afterMount();
            },

            componentWillUnmount() {
              widget.beforeUnmount();
            },

            render() {
              return <WidgetComponent />;
            }
          });

          const { listForRendering } = this.state;
          listForRendering.push({
            name: widgetName,
            Component: WrapperComponent
          });

          this.setState({ listForRendering });
        });
      },
      error: (err) => {
        console.warn(`Subscription error for <Region name="${this.props.name}" />:`, err);
      }
    });
  },

  componentWillUnmount() {
    this.subscription.unsubscribe();
  },

  getInitialState() {
    return {
      list: [], // array of widgetApps
      listForRendering: [] // array of {name, component} objects
    };
  },

  render() {
    const { listForRendering } = this.state;

    if (listForRendering.length === 0) {
      return null;
    }

    return (

        {listForRendering.map((item) => {
          const { Component, name } = item;

          return (
            <Component key={name} />
          );
        })}

    );
  }
});
<commit_msg>Optimise region to only re-render when listForRendering changes (#7)<commit_after>/* eslint-disable no-console */
import React, { PropTypes } from 'react';

// @TODO: check for an alternative to remove global dependency
function getWidgets(name) {
  return window.app.getWidgets(name);
}

function getObservable(name) {
  return window.app.observeWidgets(name);
}

function isRootAppAvailable() {
  return window.app;
}

export default React.createClass({
  propTypes: {
    name: PropTypes.string.isRequired
  },

  /**
   * Determines if the the component should be updated or not.
   * Since we are calling setState multiple times, we need to make sure that only when
   * the list of widgets to render, i.e. this.state.listForRendering, is changed should
   * trigger a re-render of the region component.
   * @param  {Object}  nextProps  the next set of props
   * @param  {Object}  nextState  the next component state to be set
   * @return {Boolean} a boolean flag indicating whether the component should be updated
   */
  shouldComponentUpdate(nextProps, nextState) {
    let shouldUpdate = !_.isEqual(this.props, nextProps);
    if (!shouldUpdate) {
      const { listForRendering } = nextState;
      shouldUpdate = shouldUpdate || this.state.listForRendering.length !== listForRendering.length;
      shouldUpdate = shouldUpdate ||
        _.zipWith(this.state.listForRendering, listForRendering, (prev, next) => prev.name === next.name)
          .some(value => !value);
    }
    return shouldUpdate;
  },

  componentWillMount() {
    const observable = getObservable();

    this.subscription = observable.subscribe({
      // @TODO: this can be optimized further
      next: () => {
        this.setState({
          list: getWidgets(this.props.name)
        }, () => {

          this.state.list.forEach((widget) => {
            if (!isRootAppAvailable()) {
              return;
            }

            const widgetName = widget.getOption('name');

            // @TODO: later re-implement this check with observables
            const rootApp = widget.getRootApp();
            const areDependenciesLoaded = widget.readableApps.length > 0
              ? widget.readableApps.every((readableApp) => rootApp.getStore(readableApp))
              : true;

            if (!areDependenciesLoaded) {
              return;
            }

            const existsInState = this.state.listForRendering.some((item) => {
              return item.name === widgetName;
            });

            if (existsInState) {
              return;
            }

            const WidgetComponent = widget.render();
            const WrapperComponent = React.createClass({
              componentWillMount() {
                widget.beforeMount();
              },

              componentDidMount() {
                widget.afterMount();
              },

              componentWillUnmount() {
                widget.beforeUnmount();
              },

              render() {
                return <WidgetComponent />;
              }
            });

            const listForRendering = [...this.state.listForRendering, {
              name: widgetName,
              Component: WrapperComponent,
            }];

            this.setState({ listForRendering });
          });
        });
      },
      error: (err) => {
        console.warn(`Subscription error for <Region name="${this.props.name}" />:`, err);
      }
    });
  },

  componentWillUnmount() {
    this.subscription.unsubscribe();
  },

  getInitialState() {
    return {
      list: [], // array of widgetApps
      listForRendering: [] // array of {name, component} objects
    };
  },

  render() {
    const { listForRendering } = this.state;

    if (listForRendering.length === 0) {
      return null;
    }

    return (

        {listForRendering.map((item) => {
          const { Component, name } = item;

          return (
            <Component key={name} />
          );
        })}

    );
  }
});
<|endoftext|>


<commit_before>// @flow

// Vendor
import React, { Component } from 'react';
import styled from 'styled-components';

// Material-UI components
import AutoComplete from 'material-ui/AutoComplete';
import Chip from 'material-ui/Chip';
import Dialog from 'material-ui/Dialog';
import FlatButton from 'material-ui/FlatButton';
import FontIcon from 'material-ui/FontIcon';
import Snackbar from 'material-ui/Snackbar';

// Components
import BookList from './BookList';

// Utils/Common
import { search } from '../utils/BooksAPI';
import getWidth, { widths } from '../utils/getWidth';
import type { BookType } from '../common/flowTypes';
import searchTerms from '../common/searchTerms';

/* ------------------------------------------------------------------
   ----------------------------- STYLES -----------------------------
	 ------------------------------------------------------------------ */

/** A container to hide overflow of the AutoComplete component */
const SearchContainer = styled.div`
	position: relative;
	display: inline-block;
	width: 100%;
	overflow: hidden;
`;

// Can't do these easily with styled-components due to specialized style props
// in Material-UI AutoComplete
const styles = {
	searchIcon: {
		position: 'absolute',
		left: 10,
		top: 15,
		fontSize: '40px'
	},
	searchField: {
		width: '100%',
		textIndent: '60px',
		fontSize: '20px',
		height: '70px'
	},
	searchFieldWide: {
		width: '100%',
		textIndent: '60px',
		fontSize: '30px',
		height: '70px'
	},
	hint: { paddingBottom: '10px' },
	chip: {
		margin: 4
	},
	wrapper: {
		display: 'flex',
		flexWrap: 'wrap'
	}
};

/* ------------------------------------------------------------------
   --------------------------- COMPONENT ----------------------------
	 ------------------------------------------------------------------ */

type Props = {
	findShelf: string => string,
	handleShelfUpdate: (BookType, string) => void
};

/**
 * Search page component, located at route /search
 * @param {function(string)} findShelf	from {@link App#findShelf}
 * @param {function(BookType, string)} handleShelfUpdate   from {@link App#handleShelfUpdate}
 */
class Search extends Component {
	props: Props;

	state = {
		searchResults: [],
		snackbarOpen: false,
		dialogOpen: false
	};

	/**
	 * Executes a search via calling the BooksAPI search. If the search term is invalid,
	 * alert the user.
	 * @param  {string} query the query to search for
	 */
	onSearch = (query: string) => {
		if (searchTerms.includes(query)) {
			search(query, 10).then(searchResults => {
				this.setState({
					searchResults
				});
			});
		} else {
			this.handleBadSearch();
		}
	};

	/** Displays a Snackbar warning about disallowed search terms */
	handleBadSearch = () => {
		this.setState({ snackbarOpen: true });
	};

	/** Closes the Snackbar */
	handleRequestClose = () => {
		this.setState({ snackbarOpen: false });
	};

	/** Opens the search terms dialog */
	handleOpenDialog = () => {
		this.setState({ dialogOpen: true });
	};

	/** Closes the search terms dialog */
	handleCloseDialog = () => {
		this.setState({ dialogOpen: false });
	};

	render() {
		// Put each term in a fancy Chip
		const termChips = searchTerms.map(term =>
			<Chip key={term + '-chip'} style={styles.chip}>
				{term}
			</Chip>
		);

		return (

				<SearchContainer>
					<FontIcon className="material-icons" style={styles.searchIcon}>
						search
					</FontIcon>

					<AutoComplete
						hintText="Search by title or author"
						filter={AutoComplete.fuzzyFilter}
						dataSource={searchTerms}
						textFieldStyle={
							getWidth() === widths.large
								? styles.searchFieldWide
								: styles.searchField
						}
						hintStyle={styles.hint}
						fullWidth={true}
						maxSearchResults={5}
						onNewRequest={(req, idx) => this.onSearch(req)}
					/>
				</SearchContainer>

				<BookList
					books={this.state.searchResults}
					handleShelfUpdate={this.props.handleShelfUpdate}
					findShelf={this.props.findShelf}
				/>

				<Snackbar
					open={this.state.snackbarOpen}
					message={'Search term not permitted.'}
					action="why?"
					autoHideDuration={3000}
					onRequestClose={this.handleRequestClose}
					onActionTouchTap={this.handleOpenDialog}
				/>

				<Dialog
					title="Why can't I search?"
					actions={
						<FlatButton
							label="OK"
							primary={true}
							onClick={this.handleCloseDialog}
						/>
					}
					modal={false}
					open={this.state.dialogOpen}
					onRequestClose={this.handleCloseDialog}
					autoScrollBodyContent={true}
				>

						Due to some unfortunate limitations of the app's backend, only
						certain search terms return any results. Here's a list of the
						allowed terms:

						{termChips}

				</Dialog>

		);
	}
}

export default Search;
<commit_msg>reorganize CSS in shelf<commit_after>// @flow

// Vendor
import React, { Component } from 'react';
import styled from 'styled-components';

// Material-UI components
import AutoComplete from 'material-ui/AutoComplete';
import Chip from 'material-ui/Chip';
import Dialog from 'material-ui/Dialog';
import FlatButton from 'material-ui/FlatButton';
import FontIcon from 'material-ui/FontIcon';
import Snackbar from 'material-ui/Snackbar';

// Components
import BookList from './BookList';

// Utils/Common
import { search } from '../utils/BooksAPI';
import getWidth, { widths } from '../utils/getWidth';
import type { BookType } from '../common/flowTypes';
import { searchTerms } from '../common/commonData';

/* ------------------------------------------------------------------
   ----------------------------- STYLES -----------------------------
	 ------------------------------------------------------------------ */

/** A container to hide overflow of the AutoComplete component */
const SearchContainer = styled.div`
	display: inline-block;
	overflow: hidden;
	position: relative;
	width: 100%;
`;

// Can't do these easily with styled-components due to specialized style props
// in Material-UI AutoComplete
const styles = {
	chip: {
		margin: 4
	},
	hint: { paddingBottom: '10px' },
	searchField: {
		width: '100%',
		textIndent: '60px',
		fontSize: '20px',
		height: '70px'
	},
	searchFieldWide: {
		width: '100%',
		textIndent: '60px',
		fontSize: '30px',
		height: '70px'
	},
	searchIcon: {
		position: 'absolute',
		left: 10,
		top: 15,
		fontSize: '40px'
	},
	wrapper: {
		display: 'flex',
		flexWrap: 'wrap'
	}
};

/* ------------------------------------------------------------------
   --------------------------- COMPONENT ----------------------------
	 ------------------------------------------------------------------ */

type Props = {
	findShelf: string => string,
	handleShelfUpdate: (BookType, string) => void
};

/**
 * Search page component, located at route /search
 * @param {function(string)} findShelf	from {@link App#findShelf}
 * @param {function(BookType, string)} handleShelfUpdate   from {@link App#handleShelfUpdate}
 */
class Search extends Component {
	props: Props;

	state = {
		searchResults: [],
		snackbarOpen: false,
		dialogOpen: false
	};

	/**
	 * Executes a search via calling the BooksAPI search. If the search term is invalid,
	 * alert the user.
	 * @param  {string} query the query to search for
	 */
	onSearch = (query: string) => {
		if (searchTerms.includes(query)) {
			search(query, 10).then(searchResults => {
				this.setState({
					searchResults
				});
			});
		} else {
			this.handleBadSearch();
		}
	};

	/** Displays a Snackbar warning about disallowed search terms */
	handleBadSearch = () => {
		this.setState({ snackbarOpen: true });
	};

	/** Closes the Snackbar */
	handleRequestClose = () => {
		this.setState({ snackbarOpen: false });
	};

	/** Opens the search terms dialog */
	handleOpenDialog = () => {
		this.setState({ dialogOpen: true });
	};

	/** Closes the search terms dialog */
	handleCloseDialog = () => {
		this.setState({ dialogOpen: false });
	};

	render() {
		// Put each term in a fancy Chip
		const termChips = searchTerms.map(term =>
			<Chip key={term + '-chip'} style={styles.chip}>
				{term}
			</Chip>
		);

		return (

				<SearchContainer>
					<FontIcon className="material-icons" style={styles.searchIcon}>
						search
					</FontIcon>

					<AutoComplete
						hintText="Search by title or author"
						filter={AutoComplete.fuzzyFilter}
						dataSource={searchTerms}
						textFieldStyle={
							getWidth() === widths.large
								? styles.searchFieldWide
								: styles.searchField
						}
						hintStyle={styles.hint}
						fullWidth={true}
						maxSearchResults={5}
						onNewRequest={(req, idx) => this.onSearch(req)}
					/>
				</SearchContainer>

				<BookList
					books={this.state.searchResults}
					handleShelfUpdate={this.props.handleShelfUpdate}
					findShelf={this.props.findShelf}
				/>

				<Snackbar
					open={this.state.snackbarOpen}
					message={'Search term not permitted.'}
					action="why?"
					autoHideDuration={3000}
					onRequestClose={this.handleRequestClose}
					onActionTouchTap={this.handleOpenDialog}
				/>

				<Dialog
					title="Why can't I search?"
					actions={
						<FlatButton
							label="OK"
							primary={true}
							onClick={this.handleCloseDialog}
						/>
					}
					modal={false}
					open={this.state.dialogOpen}
					onRequestClose={this.handleCloseDialog}
					autoScrollBodyContent={true}
				>

						Due to some unfortunate limitations of the app's backend, only
						certain search terms return any results. Here's a list of the
						allowed terms:

						{termChips}

				</Dialog>

		);
	}
}

export default Search;
<|endoftext|>


<commit_before>const React = require('react');
const ReactDOM = require('react-dom');
const Radium = require('radium');

const Icon = require('./Icon');

const StyleConstants = require('../constants/Style');

const isMobile = (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i).test(navigator.userAgent);

const Select = React.createClass({
  propTypes: {
    color: React.PropTypes.string,
    dropdownStyle: React.PropTypes.oneOfType([React.PropTypes.object, React.PropTypes.array]),
    onChange: React.PropTypes.func,
    options: React.PropTypes.array,
    optionsStyle: React.PropTypes.oneOfType([React.PropTypes.object, React.PropTypes.array]),
    optionStyle: React.PropTypes.oneOfType([React.PropTypes.object, React.PropTypes.array]),
    placeholderText: React.PropTypes.string,
    scrimStyle: React.PropTypes.oneOfType([React.PropTypes.object, React.PropTypes.array]),
    selected: React.PropTypes.object,
    selectedStyle: React.PropTypes.oneOfType([React.PropTypes.object, React.PropTypes.array]),
    valid: React.PropTypes.bool
  },

  getDefaultProps () {
    return {
      color: StyleConstants.Colors.PRIMARY,
      onChange () {},
      options: [],
      placeholderText: 'Select One',
      valid: true
    };
  },

  getInitialState () {
    return {
      highlightedValue: null,
      isOpen: false,
      selected: false,
      hoverItem: null
    };
  },

  getBackgroundColor (option) {
    if (option.value === this.state.hoverItem) {
      return {
        backgroundColor: StyleConstants.Colors.PRIMARY,
        color: StyleConstants.Colors.WHITE
      };
    } else {
      return null;
    }
  },

  _handleScrimClick () {
    this.setState({
      isOpen: false,
      highlightedValue: null
    });
  },

  _handleClick () {
    if (!isMobile) {
      this.setState({
        isOpen: !this.state.isOpen
      });
    }
  },

  _handleOptionClick (option) {
    this.setState({
      selected: option,
      isOpen: false,
      highlightedValue: option
    });

    this.props.onChange(option);
  },

  _handleOptionMouseOver (option) {
    this.setState({
      hoverItem: option.value
    });
  },

  _handleSelectChange (e) {
    const selectedOption = this.props.options.filter(option => {
      return option.value + '' === e.target.value;
    })[0];

    this._handleOptionClick(selectedOption);
  },

  _handleInputKeyDown (e) {
    const highlightedValue = this.state.highlightedValue;

    if (e.keyCode === 13 && highlightedValue) {
      this._handleOptionClick(highlightedValue);
    }

    if (e.keyCode === 40) {
      e.preventDefault();

      const nextIndex = this.props.options.indexOf(highlightedValue) + 1;

      if (nextIndex < this.props.options.length) {
        this.setState({
          highlightedValue: this.props.options[nextIndex]
        });

        this._scrollListDown(nextIndex);
      }
    }

    if (e.keyCode === 38) {
      e.preventDefault();

      const previousIndex = this.props.options.indexOf(highlightedValue) - 1;

      if (previousIndex > -1) {
        this.setState({
          highlightedValue: this.props.options[previousIndex]
        });

        this._scrollListUp(previousIndex);
      }
    }
  },

  _scrollListDown (nextIndex) {
    const ul = ReactDOM.findDOMNode(this.refs.optionList);
    const activeLi = ul.children[nextIndex];
    const heightFromTop = nextIndex * activeLi.clientHeight;

    if (heightFromTop > ul.clientHeight) {
      ul.scrollTop = activeLi.offsetTop - activeLi.clientHeight;
    }
  },

  _scrollListUp (prevIndex) {
    const ul = ReactDOM.findDOMNode(this.refs.optionList);
    const activeLi = ul.children[prevIndex];
    const heightFromBottom = (this.props.options.length - prevIndex) * activeLi.clientHeight;

    if (heightFromBottom > ul.clientHeight) {
      ul.scrollTop = activeLi.offsetTop - activeLi.clientHeight;
    }
  },

  _renderScrim () {
    if (this.state.isOpen) {
      const styles = this.styles();

      return (

      );
    } else {
      return null;
    }
  },

  _renderOptions () {
    if (this.state.isOpen) {
      const styles = this.styles();

      if (this.props.children) {
        return (

            {this.props.children}

        );
      } else {
        return (

            {this.props.options.map(option => {
              return (
                <li
                  className='mx-select-option'
                  key={option.displayValue + option.value}
                  onClick={this._handleOptionClick.bind(null, option)}
                  onMouseOver={this._handleOptionMouseOver.bind(null, option)}
                  ref={option.displayValue + option.value}
                  style={[
                    styles.option,
                    this.props.optionStyle,
                    option === this.state.highlightedValue && styles.activeItem,
                    this.getBackgroundColor(option)
                  ]}
                >
                {option.displayValue}

              );
            })}

        );
      }
    } else {
      return null;
    }
  },

  render () {
    const styles = this.styles();
    const selected = this.state.selected || this.props.selected || { displayValue: this.props.placeholderText, value: '' };

    return (

          {this._renderScrim()}

            {selected.displayValue}
            <Icon
              size='20'
              style={styles.caret}
              type={this.state.isOpen ? 'caret-up' : 'caret-down'}
            />

          {this.props.options.length || this.props.children ? this._renderOptions() : null}

        {isMobile ? (
          <select className='mx-select-default' onChange={this._handleSelectChange} ref='defaultSelect' style={styles.select} value={selected.value}>
            {this.props.options.map(option => {
              return (<option key={option.displayValue + option.value} value={option.value}>{option.displayValue}</option>);
            })}
          </select>
        ) : null }

    );
  },

  styles () {
    return {
      caret: {
        color: '#CCCCCC',
        cursor: 'pointer',
        position: 'absolute',
        right: '-5px',
        top: '50%',
        transform: 'translateY(-50%)'
      },
      component: {
        backgroundColor: '#FFFFFF',
        borderRadius: '3px',
        border: '1px solid #E5E5E5',
        cursor: 'pointer',
        fontFamily: StyleConstants.FontFamily,
        fontSize: StyleConstants.FontSizes.MEDIUM,
        padding: '11px 10px 12px',
        position: 'relative',
        appearance: 'none',
        WebkitAppearance: 'none',
        boxSizing: 'border-box',
        outline: 'none'
      },
      select: {
        position: 'absolute',
        top: 0,
        right: 0,
        bottom: 0,
        left: 0,
        width: '100%',
        WebkitAppearance: 'none',
        opacity: 0
      },
      selected: {
        position: 'relative'
      },
      activeItem: {
        backgroundColor: this.props.color,
        color: StyleConstants.Colors.WHITE
      },
      invalid: {
        borderColor: StyleConstants.Colors.STRAWBERRY
      },
      options: {
        backgroundColor: '#FFFFFF',
        border: '1px solid #E5E5E5',
        borderRadius: '0 0 3px 3px',
        left: '-1px',
        right: '-1px',
        margin: '10px 0 0 0',
        padding: '0',
        minWidth: '100%',
        position: 'absolute',
        zIndex: 10,
        fontSize: '12px',
        boxShadow: '0 30px 30px 10px rgba(0,0,0,0.1)',
        boxSizing: 'border-box',
        maxHeight: '260px',
        overflow: 'auto'
      },
      option: {
        cursor: 'pointer',
        backgroundColor: '#FFFFFF',
        padding: '10px',
        whiteSpace: 'nowrap'
      },
      scrim: {
        position: 'fixed',
        zIndex: 9,
        top: 0,
        right: 0,
        bottom: 0,
        left: 0
      }
    };
  }
});

module.exports = Radium(Select);
<commit_msg>updaed Select component to have a check mark for selected option<commit_after>const React = require('react');
const ReactDOM = require('react-dom');
const Radium = require('radium');

const Icon = require('./Icon');

const StyleConstants = require('../constants/Style');

const isMobile = (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i).test(navigator.userAgent);

const Select = React.createClass({
  propTypes: {
    color: React.PropTypes.string,
    dropdownStyle: React.PropTypes.oneOfType([React.PropTypes.object, React.PropTypes.array]),
    onChange: React.PropTypes.func,
    options: React.PropTypes.array,
    optionsStyle: React.PropTypes.oneOfType([React.PropTypes.object, React.PropTypes.array]),
    optionStyle: React.PropTypes.oneOfType([React.PropTypes.object, React.PropTypes.array]),
    placeholderText: React.PropTypes.string,
    scrimStyle: React.PropTypes.oneOfType([React.PropTypes.object, React.PropTypes.array]),
    selected: React.PropTypes.object,
    selectedStyle: React.PropTypes.oneOfType([React.PropTypes.object, React.PropTypes.array]),
    valid: React.PropTypes.bool
  },

  getDefaultProps () {
    return {
      color: StyleConstants.Colors.PRIMARY,
      onChange () {},
      options: [],
      placeholderText: 'Select One',
      valid: true
    };
  },

  getInitialState () {
    return {
      highlightedValue: null,
      isOpen: false,
      selected: false,
      hoverItem: null
    };
  },

  getBackgroundColor (option) {
    if (option.value === this.state.hoverItem) {
      return {
        backgroundColor: StyleConstants.Colors.PRIMARY,
        color: StyleConstants.Colors.WHITE
      };
    } else {
      return null;
    }
  },

  _handleScrimClick () {
    this.setState({
      isOpen: false,
      highlightedValue: null,
      hoverItem: null
    });
  },

  _handleClick () {
    if (!isMobile) {
      this.setState({
        isOpen: !this.state.isOpen
      });
    }
  },

  _handleOptionClick (option) {
    this.setState({
      selected: option,
      isOpen: false,
      highlightedValue: option,
      hoverItem: null
    });

    this.props.onChange(option);
  },

  _handleOptionMouseOver (option) {
    this.setState({
      hoverItem: option.value
    });
  },

  _handleSelectChange (e) {
    const selectedOption = this.props.options.filter(option => {
      return option.value + '' === e.target.value;
    })[0];

    this._handleOptionClick(selectedOption);
  },

  _handleInputKeyDown (e) {
    const highlightedValue = this.state.highlightedValue;

    if (e.keyCode === 13 && highlightedValue) {
      this._handleOptionClick(highlightedValue);
    }

    if (e.keyCode === 40) {
      e.preventDefault();

      const nextIndex = this.props.options.indexOf(highlightedValue) + 1;

      if (nextIndex < this.props.options.length) {
        this.setState({
          highlightedValue: this.props.options[nextIndex]
        });

        this._scrollListDown(nextIndex);
      }
    }

    if (e.keyCode === 38) {
      e.preventDefault();

      const previousIndex = this.props.options.indexOf(highlightedValue) - 1;

      if (previousIndex > -1) {
        this.setState({
          highlightedValue: this.props.options[previousIndex]
        });

        this._scrollListUp(previousIndex);
      }
    }
  },

  _scrollListDown (nextIndex) {
    const ul = ReactDOM.findDOMNode(this.refs.optionList);
    const activeLi = ul.children[nextIndex];
    const heightFromTop = nextIndex * activeLi.clientHeight;

    if (heightFromTop > ul.clientHeight) {
      ul.scrollTop = activeLi.offsetTop - activeLi.clientHeight;
    }
  },

  _scrollListUp (prevIndex) {
    const ul = ReactDOM.findDOMNode(this.refs.optionList);
    const activeLi = ul.children[prevIndex];
    const heightFromBottom = (this.props.options.length - prevIndex) * activeLi.clientHeight;

    if (heightFromBottom > ul.clientHeight) {
      ul.scrollTop = activeLi.offsetTop - activeLi.clientHeight;
    }
  },

  _renderScrim () {
    if (this.state.isOpen) {
      const styles = this.styles();

      return (

      );
    } else {
      return null;
    }
  },

  _renderOptions () {
    if (this.state.isOpen) {
      const styles = this.styles();

      if (this.props.children) {
        return (

            {this.props.children}

        );
      } else {
        return (

            {this.props.options.map(option => {
              return (
                <li
                  className='mx-select-option'
                  key={option.displayValue + option.value}
                  onClick={this._handleOptionClick.bind(null, option)}
                  onMouseOver={this._handleOptionMouseOver.bind(null, option)}
                  ref={option.displayValue + option.value}
                  style={[
                    styles.option,
                    this.props.optionStyle,
                    option === this.state.highlightedValue && styles.activeItem,
                    this.getBackgroundColor(option)
                  ]}
                >
                {option.displayValue}
                {option === this.state.highlightedValue ? <Icon size='20' style={styles.check} type='check' /> : null }

              );
            })}

        );
      }
    } else {
      return null;
    }
  },

  render () {
    const styles = this.styles();
    const selected = this.state.selected || this.props.selected || { displayValue: this.props.placeholderText, value: '' };

    return (

          {this._renderScrim()}

            {selected.displayValue}
            <Icon
              size='20'
              style={styles.caret}
              type={this.state.isOpen ? 'caret-up' : 'caret-down'}
            />

          {this.props.options.length || this.props.children ? this._renderOptions() : null}

        {isMobile ? (
          <select className='mx-select-default' onChange={this._handleSelectChange} ref='defaultSelect' style={styles.select} value={selected.value}>
            {this.props.options.map(option => {
              return (<option key={option.displayValue + option.value} value={option.value}>{option.displayValue}</option>);
            })}
          </select>
        ) : null }

    );
  },

  styles () {
    return {
      caret: {
        color: '#CCCCCC',
        cursor: 'pointer',
        position: 'absolute',
        right: '-5px',
        top: '50%',
        transform: 'translateY(-50%)'
      },
      check: {
        color: StyleConstants.Colors.PRIMARY,
        position: 'absolute',
        right: 10
      },
      component: {
        backgroundColor: '#FFFFFF',
        borderRadius: '3px',
        border: '1px solid #E5E5E5',
        cursor: 'pointer',
        fontFamily: StyleConstants.FontFamily,
        fontSize: StyleConstants.FontSizes.MEDIUM,
        padding: '11px 10px 12px',
        position: 'relative',
        appearance: 'none',
        WebkitAppearance: 'none',
        boxSizing: 'border-box',
        outline: 'none'
      },
      select: {
        position: 'absolute',
        top: 0,
        right: 0,
        bottom: 0,
        left: 0,
        width: '100%',
        WebkitAppearance: 'none',
        opacity: 0
      },
      selected: {
        position: 'relative'
      },
      activeItem: {
        color: StyleConstants.Colors.PRIMARY
      },
      invalid: {
        borderColor: StyleConstants.Colors.STRAWBERRY
      },
      options: {
        backgroundColor: '#FFFFFF',
        border: '1px solid #E5E5E5',
        borderRadius: '0 0 3px 3px',
        left: '-1px',
        right: '-1px',
        margin: '10px 0 0 0',
        padding: '0',
        minWidth: '100%',
        position: 'absolute',
        zIndex: 10,
        fontSize: '12px',
        boxShadow: '0 30px 30px 10px rgba(0,0,0,0.1)',
        boxSizing: 'border-box',
        maxHeight: '260px',
        overflow: 'auto'
      },
      option: {
        cursor: 'pointer',
        backgroundColor: '#FFFFFF',
        padding: '10px',
        whiteSpace: 'nowrap'
      },
      scrim: {
        position: 'fixed',
        zIndex: 9,
        top: 0,
        right: 0,
        bottom: 0,
        left: 0
      }
    };
  }
});

module.exports = Radium(Select);
<|endoftext|>


<commit_before>import React from 'react';
import PureRenderMixin from 'react-addons-pure-render-mixin';
import {connect} from 'react-redux';

import Winner from './Winner';
import Vote from './Vote';

export const Voting = React.createClass({
  mixins: [PureRenderMixin],

  render: function() {
    return

      {
        this.props.winner ?
        <Winner ref="winner" winner={this.props.winner} /> :
        <Vote {...this.props} />
      }

;
  }
});

function mapStateToProps(state) {
  return {
    pair: state.getIn(['vote', 'pair']),
    winner: state.get('winner')
  }
}

export const VotingContainer = connect(mapStateToProps)(Voting);
<commit_msg>[added] connect state's 'hasVoted' to 'hasVoted' property of 'Voting'<commit_after>import React from 'react';
import PureRenderMixin from 'react-addons-pure-render-mixin';
import {connect} from 'react-redux';

import Winner from './Winner';
import Vote from './Vote';

export const Voting = React.createClass({
  mixins: [PureRenderMixin],

  render: function() {
    return

      {
        this.props.winner ?
        <Winner ref="winner" winner={this.props.winner} /> :
        <Vote {...this.props} />
      }

;
  }
});

function mapStateToProps(state) {
  return {
    pair: state.getIn(['vote', 'pair']),
    hasVoted: state.get('hasVoted'),
    winner: state.get('winner')
  }
}

export const VotingContainer = connect(mapStateToProps)(Voting);
<|endoftext|>


<commit_before>import React from 'react'
import styled from 'styled-components'

import BurgerMenu from './burgerMenu'

const MenuBar = styled.div`
  z-index: 100;
  top: 0em;
  left: 0em;
  width: 100vw;
  background-color: rgb(77, 80, 85);
  color: rgb(211, 211, 211);
  padding-top: .5em;
  padding-bottom: .5em;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  & > * {
    margin-top: .4em;
    margin-bottom: .4em;
  }
`

const Link = styled.a`
  color: white;
`

export default function TopBar ({messageOfTheDay, account, signIn, signUp, signOut, logout}) {
  const msgOfDay = messageOfTheDay
    ?
      Message of the day:
      {this.props.messageOfTheDay.get('text')}
      <Link
        href={this.props.messageOfTheDay.get('href')}
        target='_blank'
        rel='noopener noreferrer'
        >
        {this.props.messageOfTheDay.get('href')}
      </Link>

    : Welcome
  return <MenuBar>
    <BurgerMenu
      account={account}
      signIn={signIn}
      signUp={signUp}
      signOut={signOut}
      logout={logout}
      />
    {msgOfDay}

  </MenuBar>
}
<commit_msg>fix(topBar): using messageOfTheDay through this.props<commit_after>import React from 'react'
import styled from 'styled-components'

import BurgerMenu from './burgerMenu'

const MenuBar = styled.div`
  z-index: 100;
  top: 0em;
  left: 0em;
  width: 100vw;
  background-color: rgb(77, 80, 85);
  color: rgb(211, 211, 211);
  padding-top: .5em;
  padding-bottom: .5em;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  & > * {
    margin-top: .4em;
    margin-bottom: .4em;
  }
`

const Link = styled.a`
  color: white;
`

export default function TopBar ({messageOfTheDay, account, signIn, signUp, signOut, logout}) {
  const msgOfDay = messageOfTheDay
    ?
      Message of the day:
      {messageOfTheDay.get('text')}
      <Link
        href={messageOfTheDay.get('href')}
        target='_blank'
        rel='noopener noreferrer'
        >
        {messageOfTheDay.get('href')}
      </Link>

    : Welcome
  return <MenuBar>
    <BurgerMenu
      account={account}
      signIn={signIn}
      signUp={signUp}
      signOut={signOut}
      logout={logout}
      />
    {msgOfDay}

  </MenuBar>
}
<|endoftext|>


<commit_before>import React from 'react';
import PropTypes from 'prop-types';
import {parse as parseDiff} from 'what-the-diff';

import {ItemTypePropType, EndpointPropType} from '../prop-types';
import {toNativePathSep} from '../helpers';
import MultiFilePatchController from '../controllers/multi-file-patch-controller';
import LoadingView from '../views/loading-view';
import ErrorView from '../views/error-view';
import {buildMultiFilePatch} from '../models/patch';

export default class PullRequestChangedFilesContainer extends React.Component {
  static propTypes = {
    // Pull request properties
    owner: PropTypes.string.isRequired,
    repo: PropTypes.string.isRequired,
    number: PropTypes.number.isRequired,

    // Connection properties
    endpoint: EndpointPropType.isRequired,
    token: PropTypes.string.isRequired,

    // Item context
    itemType: ItemTypePropType.isRequired,

    // action methods
    destroy: PropTypes.func.isRequired,

    // Atom environment
    workspace: PropTypes.object.isRequired,
    commands: PropTypes.object.isRequired,
    keymaps: PropTypes.object.isRequired,
    tooltips: PropTypes.object.isRequired,
    config: PropTypes.object.isRequired,

    // local repo as opposed to pull request repo
    localRepository: PropTypes.object.isRequired,

    // refetch diff on refresh
    shouldRefetch: PropTypes.bool.isRequired,
  }

  constructor(props) {
    super(props);
    this.state = {isLoading: true, error: null};
    this.fetchDiff();
  }

  componentDidUpdate(prevProps) {
    if (this.props.shouldRefetch && !prevProps.shouldRefetch) {
      this.setState({isLoading: true, error: null});
      this.fetchDiff();
    }
  }

  // Generate a v3 GitHub API REST URL for the pull request resource.
  // Example: https://api.github.com/repos/atom/github/pulls/1829
  getDiffURL() {
    return this.props.endpoint.getRestURI('repos', this.props.owner, this.props.repo, 'pulls', this.props.number);
  }

  buildPatch(rawDiff) {
    const diffs = parseDiff(rawDiff).map(diff => {
      // diff coming from API will have the defaul git diff prefixes a/ and b/ and use *nix-style / path separators.
      // e.g. a/dir/file1.js and b/dir/file2.js
      // see https://git-scm.com/docs/git-diff#_generating_patches_with_p
      return {
        ...diff,
        newPath: diff.newPath ? toNativePathSep(diff.newPath.replace(/^[a|b]\//, '')) : diff.newPath,
        oldPath: diff.oldPath ? toNativePathSep(diff.oldPath.replace(/^[a|b]\//, '')) : diff.oldPath,
      };
    });
    return buildMultiFilePatch(diffs);
  }

  async fetchDiff() {
    const diffError = (message, err = null) => new Promise(resolve => {
      if (err) {
        // eslint-disable-next-line no-console
        console.error(err);
      }
      this.setState({isLoading: false, error: message}, resolve);
    });
    const url = this.getDiffURL();

    const response = await fetch(url, {
      headers: {
        Accept: 'application/vnd.github.v3.diff',
        Authorization: `bearer ${this.props.token}`,
      },
      // eslint-disable-next-line handle-callback-err
    }).catch(err => {
      diffError(`Network error encountered at fetching ${url}`, err);
    });
    if (this.state.error) {
      return;
    }
    try {
      if (response && response.ok) {
        const rawDiff = await response.text();
        const multiFilePatch = this.buildPatch(rawDiff);
        await new Promise(resolve => this.setState({isLoading: false, multiFilePatch}, resolve));
      } else {
        diffError(`Unable to fetch diff for this pull request${response ? ': ' + response.statusText : ''}.`);
      }
    } catch (err) {
      diffError('Unable to parse diff for this pull request.', err);
    }
  }

  render() {
    if (this.state.isLoading) {
      return <LoadingView />;
    }

    if (this.state.error) {
      return <ErrorView descriptions={[this.state.error]} />;
    }

    return (
      <MultiFilePatchController
        multiFilePatch={this.state.multiFilePatch}
        repository={this.props.localRepository}
        {...this.props}
      />
    );
  }
}
<commit_msg>Re-render the PRChangedFilesContainer when a patch changes render status<commit_after>import React from 'react';
import PropTypes from 'prop-types';
import {parse as parseDiff} from 'what-the-diff';
import {CompositeDisposable} from 'event-kit';

import {ItemTypePropType, EndpointPropType} from '../prop-types';
import {toNativePathSep} from '../helpers';
import MultiFilePatchController from '../controllers/multi-file-patch-controller';
import LoadingView from '../views/loading-view';
import ErrorView from '../views/error-view';
import {buildMultiFilePatch} from '../models/patch';

export default class PullRequestChangedFilesContainer extends React.Component {
  static propTypes = {
    // Pull request properties
    owner: PropTypes.string.isRequired,
    repo: PropTypes.string.isRequired,
    number: PropTypes.number.isRequired,

    // Connection properties
    endpoint: EndpointPropType.isRequired,
    token: PropTypes.string.isRequired,

    // Item context
    itemType: ItemTypePropType.isRequired,

    // action methods
    destroy: PropTypes.func.isRequired,

    // Atom environment
    workspace: PropTypes.object.isRequired,
    commands: PropTypes.object.isRequired,
    keymaps: PropTypes.object.isRequired,
    tooltips: PropTypes.object.isRequired,
    config: PropTypes.object.isRequired,

    // local repo as opposed to pull request repo
    localRepository: PropTypes.object.isRequired,

    // refetch diff on refresh
    shouldRefetch: PropTypes.bool.isRequired,
  }

  constructor(props) {
    super(props);

    this.mfpSubs = new CompositeDisposable();

    this.state = {isLoading: true, error: null};
    this.fetchDiff();
  }

  componentDidUpdate(prevProps) {
    if (this.props.shouldRefetch && !prevProps.shouldRefetch) {
      this.setState({isLoading: true, error: null});
      this.fetchDiff();
    }
  }

  componentWillUnmount() {
    this.mfpSubs.dispose();
  }

  // Generate a v3 GitHub API REST URL for the pull request resource.
  // Example: https://api.github.com/repos/atom/github/pulls/1829
  getDiffURL() {
    return this.props.endpoint.getRestURI('repos', this.props.owner, this.props.repo, 'pulls', this.props.number);
  }

  buildPatch(rawDiff) {
    const diffs = parseDiff(rawDiff).map(diff => {
      // diff coming from API will have the defaul git diff prefixes a/ and b/ and use *nix-style / path separators.
      // e.g. a/dir/file1.js and b/dir/file2.js
      // see https://git-scm.com/docs/git-diff#_generating_patches_with_p
      return {
        ...diff,
        newPath: diff.newPath ? toNativePathSep(diff.newPath.replace(/^[a|b]\//, '')) : diff.newPath,
        oldPath: diff.oldPath ? toNativePathSep(diff.oldPath.replace(/^[a|b]\//, '')) : diff.oldPath,
      };
    });
    return buildMultiFilePatch(diffs);
  }

  async fetchDiff() {
    const diffError = (message, err = null) => new Promise(resolve => {
      if (err) {
        // eslint-disable-next-line no-console
        console.error(err);
      }
      this.setState({isLoading: false, error: message}, resolve);
    });
    const url = this.getDiffURL();

    const response = await fetch(url, {
      headers: {
        Accept: 'application/vnd.github.v3.diff',
        Authorization: `bearer ${this.props.token}`,
      },
      // eslint-disable-next-line handle-callback-err
    }).catch(err => {
      diffError(`Network error encountered at fetching ${url}`, err);
    });
    if (this.state.error) {
      return;
    }
    try {
      if (response && response.ok) {
        const rawDiff = await response.text();
        const multiFilePatch = this.buildPatch(rawDiff);

        this.mfpSubs.dispose();
        this.mfpSubs = new CompositeDisposable();
        for (const fp of multiFilePatch.getFilePatches()) {
          this.mfpSubs.add(fp.onDidChangeRenderStatus(() => this.forceUpdate()));
        }

        await new Promise(resolve => this.setState({isLoading: false, multiFilePatch}, resolve));
      } else {
        diffError(`Unable to fetch diff for this pull request${response ? ': ' + response.statusText : ''}.`);
      }
    } catch (err) {
      diffError('Unable to parse diff for this pull request.', err);
    }
  }

  render() {
    if (this.state.isLoading) {
      return <LoadingView />;
    }

    if (this.state.error) {
      return <ErrorView descriptions={[this.state.error]} />;
    }

    return (
      <MultiFilePatchController
        multiFilePatch={this.state.multiFilePatch}
        repository={this.props.localRepository}
        {...this.props}
      />
    );
  }
}
<|endoftext|>


<commit_before>FamousFramework.module('famous:core:node', {
    behaviors: {
        '$self' : {
            '$yield': true
        }
    },
    events: {
        '$public': {
            'add-class': function($DOMElement, $payload) { $DOMElement.addClass($payload); },
            'align': function($famousNode, $payload) { $famousNode.setAlign($payload[0], $payload[1], $payload[2]); },
            'align-x': function($famousNode, $payload) { $famousNode.setAlign($payload, null, null); },
            'align-y': function($famousNode, $payload) { $famousNode.setAlign(null, $payload, null); },
            'align-z': function($famousNode, $payload) { $famousNode.setAlign(null, null, $payload); },
            'attach': function($payload, $famousNode) {
                $payload($famousNode);
            },
            'attributes': function($DOMElement, $payload) {
                for (var attributeName in $payload) {
                    $DOMElement.setAttribute(attributeName, $payload[attributeName]);
                }
            },
            'backface-visible': function($state, $payload, $dispatcher) {
                var style = $state.get('style') || {};
                style['-webkit-backface-visibility'] = ($payload) ? 'visible' : 'hidden';
                style['backface-visibility'] = ($payload) ? 'visible' : 'hidden';
                $dispatcher.trigger('style', style);
            },
            'base-color': function($mesh, $payload, $state) {
                $mesh.setBaseColor(new Famous.utilities.Color($payload));
                if (!$state.get('hasGeometry')) {
                    $mesh.setGeometry(new Famous.webglGeometries.Plane());
                    $state.set('hasGeometry', true);
                }
            },
            'box-shadow': function($state, $payload, $dispatcher) {
                var style = $state.get('style') || {};
                style['-webkit-box-shadow'] = $payload;
                style['-moz-box-shadow'] = $payload;
                style['box-shadow'] = $payload;
                $dispatcher.trigger('style', style);
            },
            'camera': function($camera, $payload) { $camera.set($payload[0], $payload[1]); },
            'content': function($DOMElement, $payload) {
                $DOMElement.setContent($payload);
            },
            'geometry': function($mesh, $payload, $state) {
                $mesh.setGeometry(new Famous.webglGeometries[$payload.shape]($payload.options));
                $state.set('hasGeometry', true);
            },
            'glossiness': function($mesh, $payload) {
                $mesh.setGlossiness($payload.glossiness, $payload.strength);
            },
            'id': function($DOMElement, $payload) { $DOMElement.setId($payload); },
            'mount-point': function($famousNode, $payload) { $famousNode.setMountPoint($payload[0], $payload[1], $payload[2]); },
            'mount-point-x': function($famousNode, $payload) { $famousNode.setMountPoint($payload, null, null); },
            'mount-point-y': function($famousNode, $payload) { $famousNode.setMountPoint(null, $payload, null); },
            'mount-point-z': function($famousNode, $payload) { $famousNode.setMountPoint(null, null, $payload); },
            'normals': function($mesh, $payload) {
                $mesh.setNormals($payload);
            },
            'offset-position': function($famousNode, $payload) {
                var currentPos = $famousNode.getPosition();
                $famousNode.setPosition(
                    currentPos[0] + $payload[0] || 0,
                    currentPos[1] + $payload[1] || 0,
                    currentPos[2] + $payload[2] || 0
                );
            },
            'opacity': function($famousNode, $payload) { $famousNode.setOpacity($payload); },
            'origin': function($famousNode, $payload) {$famousNode.setOrigin($payload[0], $payload[1], $payload[2]); },
            'origin-x': function($famousNode, $payload) { $famousNode.setOrigin($payload, null, null); },
            'origin-y': function($famousNode, $payload) { $famousNode.setOrigin(null, $payload, null); },
            'origin-z': function($famousNode, $payload) { $famousNode.setOrigin(null, null, $payload); },
            'position': function($famousNode, $payload) { $famousNode.setPosition($payload[0], $payload[1], $payload[2]); },
            'position-offsets': function($mesh, $payload) {
                $mesh.setPositonOffsets($payload);
            },
            'position-x': function($famousNode, $payload) { $famousNode.setPosition($payload, null, null); },
            'position-y': function($famousNode, $payload) { $famousNode.setPosition(null, $payload, null); },
            'position-z': function($famousNode, $payload) { $famousNode.setPosition(null, null, $payload); },
            'remove-class': function($DOMElement, $payload) { $DOMElement.removeClass($payload); },
            'rotation': function($famousNode, $payload) { $famousNode.setRotation($payload[0], $payload[1], $payload[2], $payload[3]); },
            'rotation-x': function($famousNode, $payload) { $famousNode.setRotation($payload, null, null); },
            'rotation-y': function($famousNode, $payload) { $famousNode.setRotation(null, $payload, null); },
            'rotation-z': function($famousNode, $payload) { $famousNode.setRotation(null, null, $payload); },
            'scale': function($famousNode, $payload) { $famousNode.setScale($payload[0], $payload[1], $payload[2]); },
            'scale-x': function($famousNode, $payload) { $famousNode.setScale($payload, null, null); },
            'scale-y': function($famousNode, $payload) { $famousNode.setScale(null, $payload, null); },
            'scale-z': function($famousNode, $payload) { $famousNode.setScale(null, null, $payload); },
            'set-html': function($state, $payload, $dispatcher) {
                var content = '';
                var outerHTML;
                for (var i = 0; i < $payload.length; i++) {
                    outerHTML = $payload[i].outerHTML || $payload[i].textContent; // Check for text nodes
                    content += (outerHTML) ? outerHTML : '';
                }
                $state.set('content', content);
                $dispatcher.trigger('content', content);
            },
            'size': function($payload, $dispatcher) {
                var xSize = $payload[0];
                var ySize = $payload[1];
                var zSize = $payload[2];

                if (xSize === true) $dispatcher.trigger('size-true-x');
                else if (xSize !== undefined) $dispatcher.trigger('size-absolute-x', xSize);

                if (ySize === true) $dispatcher.trigger('size-true-y');
                else if (ySize !== undefined) $dispatcher.trigger('size-absolute-y', ySize);

                if (zSize === true) $dispatcher.trigger('size-true-z');
                else if (zSize !== undefined) $dispatcher.trigger('size-absolute-z', zSize);
            },
            'size-true': function($famousNode) {
                $famousNode.setSizeMode(2, 2, 2);
            },
            'size-true-x': function($famousNode) {
                $famousNode.setSizeMode(2, null, null);
            },
            'size-true-y': function($famousNode) {
                $famousNode.setSizeMode(null, 2, null);
            },
            'size-true-z': function($famousNode) {
                $famousNode.setSizeMode(null, null, 2);
            },
            'size-absolute': function($famousNode, $payload) {
                $famousNode.setSizeMode(1, 1, 1);
                $famousNode.setAbsoluteSize($payload[0], $payload[1], $payload[2]);
            },
            'size-absolute-x': function($famousNode, $payload) {
                $famousNode.setSizeMode(1, null, null);
                $famousNode.setAbsoluteSize($payload, null, null);
            },
            'size-absolute-y': function($famousNode, $payload) {
                $famousNode.setSizeMode(null, 1, null);
                $famousNode.setAbsoluteSize(null, $payload, null);
            },
            'size-absolute-z': function($famousNode, $payload) {
                $famousNode.setSizeMode(null, null, 1);
                $famousNode.setAbsoluteSize(null, null, $payload);
            },
            'size-differential': function($famousNode, $payload) {
                $famousNode.setSizeMode(0, 0, 0);
                $famousNode.setDifferentialSize($payload[0], $payload[1], $payload[2]);
            },
            'size-differential-x': function($famousNode, $payload) {
                $famousNode.setSizeMode(0, null, null);
                $famousNode.setDifferentialSize($payload, null, null);
            },
            'size-differential-y': function($famousNode, $payload) {
                $famousNode.setSizeMode(null, 0, null);
                $famousNode.setDifferentialSize(null, $payload, null);
            },
            'size-differential-z': function($famousNode, $payload) {
                $famousNode.setSizeMode(null, null, 0);
                $famousNode.setDifferentialSize(null, null, $payload);
            },
            'size-proportional': function($famousNode, $payload) {
                $famousNode.setSizeMode(0, 0, 0);
                $famousNode.setProportionalSize($payload[0], $payload[1], $payload[2]);
            },
            'size-proportional-x': function($famousNode, $payload) {
                $famousNode.setSizeMode(0, null, null);
                $famousNode.setProportionalSize($payload, null, null);
            },
            'size-proportional-y': function($famousNode, $payload) {
                $famousNode.setSizeMode(null, 0, null);
                $famousNode.setProportionalSize(null, $payload, null);
            },
            'size-proportional-z': function($famousNode, $payload) {
                $famousNode.setSizeMode(null, null, 0);
                $famousNode.setProportionalSize(null, null, $payload);
            },
            'style': function($DOMElement, $payload) {
                for (var styleName in $payload) {
                    $DOMElement.setProperty(styleName, $payload[styleName]);
                }
            },
            'template': function() {
                console.warn('`template` behavior is deprecated!');
            },
            'unselectable': function($state, $payload, $dispatcher) {
                if ($payload) {
                    var style = $state.get('style') || {};
                    style['-moz-user-select'] = '-moz-none';
                    style['-khtml-user-select'] = 'none';
                    style['-webkit-user-select'] = 'none';
                    style['-o-user-select'] = 'none';
                    style['user-select'] = 'none';
                    $dispatcher.trigger('style', style);
                }
            },
        }
    },
    states: {
        'didTemplate': false,
        'initialContent': '',
        'hasGeometry': false
    }
})
.config({
    extends: [],
    imports: {}
});
<commit_msg>chore: Remove unnecessary  node events<commit_after>FamousFramework.module('famous:core:node', {
    behaviors: {
        '$self' : {
            '$yield': true
        }
    },
    events: {
        '$public': {
            'add-class': function($DOMElement, $payload) { $DOMElement.addClass($payload); },
            'align': function($famousNode, $payload) { $famousNode.setAlign($payload[0], $payload[1], $payload[2]); },
            'align-x': function($famousNode, $payload) { $famousNode.setAlign($payload, null, null); },
            'align-y': function($famousNode, $payload) { $famousNode.setAlign(null, $payload, null); },
            'align-z': function($famousNode, $payload) { $famousNode.setAlign(null, null, $payload); },
            'attach': function($payload, $famousNode) {
                $payload($famousNode);
            },
            'attributes': function($DOMElement, $payload) {
                for (var attributeName in $payload) {
                    $DOMElement.setAttribute(attributeName, $payload[attributeName]);
                }
            },
            'backface-visible': function($state, $payload, $dispatcher) {
                var style = $state.get('style') || {};
                style['-webkit-backface-visibility'] = ($payload) ? 'visible' : 'hidden';
                style['backface-visibility'] = ($payload) ? 'visible' : 'hidden';
                $dispatcher.trigger('style', style);
            },
            'base-color': function($mesh, $payload, $state) {
                $mesh.setBaseColor(new Famous.utilities.Color($payload));
                if (!$state.get('hasGeometry')) {
                    $mesh.setGeometry(new Famous.webglGeometries.Plane());
                    $state.set('hasGeometry', true);
                }
            },
            'box-shadow': function($state, $payload, $dispatcher) {
                var style = $state.get('style') || {};
                style['-webkit-box-shadow'] = $payload;
                style['-moz-box-shadow'] = $payload;
                style['box-shadow'] = $payload;
                $dispatcher.trigger('style', style);
            },
            'camera': function($camera, $payload) { $camera.set($payload[0], $payload[1]); },
            'content': function($DOMElement, $payload) {
                $DOMElement.setContent($payload);
            },
            'geometry': function($mesh, $payload, $state) {
                $mesh.setGeometry(new Famous.webglGeometries[$payload.shape]($payload.options));
                $state.set('hasGeometry', true);
            },
            'glossiness': function($mesh, $payload) {
                $mesh.setGlossiness($payload.glossiness, $payload.strength);
            },
            'id': function($DOMElement, $payload) { $DOMElement.setId($payload); },
            'mount-point': function($famousNode, $payload) { $famousNode.setMountPoint($payload[0], $payload[1], $payload[2]); },
            'mount-point-x': function($famousNode, $payload) { $famousNode.setMountPoint($payload, null, null); },
            'mount-point-y': function($famousNode, $payload) { $famousNode.setMountPoint(null, $payload, null); },
            'mount-point-z': function($famousNode, $payload) { $famousNode.setMountPoint(null, null, $payload); },
            'normals': function($mesh, $payload) {
                $mesh.setNormals($payload);
            },
            'offset-position': function($famousNode, $payload) {
                var currentPos = $famousNode.getPosition();
                $famousNode.setPosition(
                    currentPos[0] + $payload[0] || 0,
                    currentPos[1] + $payload[1] || 0,
                    currentPos[2] + $payload[2] || 0
                );
            },
            'opacity': function($famousNode, $payload) { $famousNode.setOpacity($payload); },
            'origin': function($famousNode, $payload) {$famousNode.setOrigin($payload[0], $payload[1], $payload[2]); },
            'origin-x': function($famousNode, $payload) { $famousNode.setOrigin($payload, null, null); },
            'origin-y': function($famousNode, $payload) { $famousNode.setOrigin(null, $payload, null); },
            'origin-z': function($famousNode, $payload) { $famousNode.setOrigin(null, null, $payload); },
            'position': function($famousNode, $payload) { $famousNode.setPosition($payload[0], $payload[1], $payload[2]); },
            'position-offsets': function($mesh, $payload) {
                $mesh.setPositonOffsets($payload);
            },
            'position-x': function($famousNode, $payload) { $famousNode.setPosition($payload, null, null); },
            'position-y': function($famousNode, $payload) { $famousNode.setPosition(null, $payload, null); },
            'position-z': function($famousNode, $payload) { $famousNode.setPosition(null, null, $payload); },
            'remove-class': function($DOMElement, $payload) { $DOMElement.removeClass($payload); },
            'rotation': function($famousNode, $payload) { $famousNode.setRotation($payload[0], $payload[1], $payload[2], $payload[3]); },
            'rotation-x': function($famousNode, $payload) { $famousNode.setRotation($payload, null, null); },
            'rotation-y': function($famousNode, $payload) { $famousNode.setRotation(null, $payload, null); },
            'rotation-z': function($famousNode, $payload) { $famousNode.setRotation(null, null, $payload); },
            'scale': function($famousNode, $payload) { $famousNode.setScale($payload[0], $payload[1], $payload[2]); },
            'scale-x': function($famousNode, $payload) { $famousNode.setScale($payload, null, null); },
            'scale-y': function($famousNode, $payload) { $famousNode.setScale(null, $payload, null); },
            'scale-z': function($famousNode, $payload) { $famousNode.setScale(null, null, $payload); },
            'size': function($payload, $dispatcher) {
                var xSize = $payload[0];
                var ySize = $payload[1];
                var zSize = $payload[2];

                if (xSize === true) $dispatcher.trigger('size-true-x');
                else if (xSize !== undefined) $dispatcher.trigger('size-absolute-x', xSize);

                if (ySize === true) $dispatcher.trigger('size-true-y');
                else if (ySize !== undefined) $dispatcher.trigger('size-absolute-y', ySize);

                if (zSize === true) $dispatcher.trigger('size-true-z');
                else if (zSize !== undefined) $dispatcher.trigger('size-absolute-z', zSize);
            },
            'size-true': function($famousNode) {
                $famousNode.setSizeMode(2, 2, 2);
            },
            'size-true-x': function($famousNode) {
                $famousNode.setSizeMode(2, null, null);
            },
            'size-true-y': function($famousNode) {
                $famousNode.setSizeMode(null, 2, null);
            },
            'size-true-z': function($famousNode) {
                $famousNode.setSizeMode(null, null, 2);
            },
            'size-absolute': function($famousNode, $payload) {
                $famousNode.setSizeMode(1, 1, 1);
                $famousNode.setAbsoluteSize($payload[0], $payload[1], $payload[2]);
            },
            'size-absolute-x': function($famousNode, $payload) {
                $famousNode.setSizeMode(1, null, null);
                $famousNode.setAbsoluteSize($payload, null, null);
            },
            'size-absolute-y': function($famousNode, $payload) {
                $famousNode.setSizeMode(null, 1, null);
                $famousNode.setAbsoluteSize(null, $payload, null);
            },
            'size-absolute-z': function($famousNode, $payload) {
                $famousNode.setSizeMode(null, null, 1);
                $famousNode.setAbsoluteSize(null, null, $payload);
            },
            'size-differential': function($famousNode, $payload) {
                $famousNode.setSizeMode(0, 0, 0);
                $famousNode.setDifferentialSize($payload[0], $payload[1], $payload[2]);
            },
            'size-differential-x': function($famousNode, $payload) {
                $famousNode.setSizeMode(0, null, null);
                $famousNode.setDifferentialSize($payload, null, null);
            },
            'size-differential-y': function($famousNode, $payload) {
                $famousNode.setSizeMode(null, 0, null);
                $famousNode.setDifferentialSize(null, $payload, null);
            },
            'size-differential-z': function($famousNode, $payload) {
                $famousNode.setSizeMode(null, null, 0);
                $famousNode.setDifferentialSize(null, null, $payload);
            },
            'size-proportional': function($famousNode, $payload) {
                $famousNode.setSizeMode(0, 0, 0);
                $famousNode.setProportionalSize($payload[0], $payload[1], $payload[2]);
            },
            'size-proportional-x': function($famousNode, $payload) {
                $famousNode.setSizeMode(0, null, null);
                $famousNode.setProportionalSize($payload, null, null);
            },
            'size-proportional-y': function($famousNode, $payload) {
                $famousNode.setSizeMode(null, 0, null);
                $famousNode.setProportionalSize(null, $payload, null);
            },
            'size-proportional-z': function($famousNode, $payload) {
                $famousNode.setSizeMode(null, null, 0);
                $famousNode.setProportionalSize(null, null, $payload);
            },
            'style': function($DOMElement, $payload) {
                for (var styleName in $payload) {
                    $DOMElement.setProperty(styleName, $payload[styleName]);
                }
            },
            'unselectable': function($state, $payload, $dispatcher) {
                if ($payload) {
                    var style = $state.get('style') || {};
                    style['-moz-user-select'] = '-moz-none';
                    style['-khtml-user-select'] = 'none';
                    style['-webkit-user-select'] = 'none';
                    style['-o-user-select'] = 'none';
                    style['user-select'] = 'none';
                    $dispatcher.trigger('style', style);
                }
            }
        }
    },
    states: {
        'didTemplate': false,
        'initialContent': '',
        'hasGeometry': false
    }
})
.config({
    extends: [],
    imports: {}
});
<|endoftext|>


<commit_before>import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

it('renders without crashing', () => {
  const div = document.createElement('div');
  ReactDOM.render(<App />, div);
});
<commit_msg>Fix failing test<commit_after>import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';

import App from './App';
import makeStore from './store';

it('renders without crashing', () => {
  const store = makeStore();
  const div = document.createElement('div');
  ReactDOM.render(<Provider store={store}><App /></Provider>, div);
});
<|endoftext|>