<commit_before>import React from 'react';
import PropTypes from 'prop-types';
import compose from 'recompose/compose';
import withState from 'recompose/withState';
import withProps from 'recompose/withProps';
import withHandlers from 'recompose/withHandlers';
import { Card, CardHeader, CardText, CardActions } from 'material-ui/Card';
import FlatButton from 'material-ui/FlatButton';
import muiThemeable from 'material-ui/styles/muiThemeable';
import EditIcon from 'material-ui/svg-icons/editor/mode-edit';
import parse from 'u-wave-parse-chat-markup';
import compile from '../../../components/Chat/Markup/compile';

import './index.css';

const enhance = compose(
  withState('newMotd', 'setMotd', props => props.motd),
  withProps(props => ({
    parsedMotd: compile(parse(props.newMotd), props.compileOptions),
  })),
  withHandlers({
    onChange: props => (event) => {
      props.setMotd(event.target.value);
    },
    onSubmit: props => () => {
      props.onSetMotd(props.newMotd);
    },
  }),
  muiThemeable(),
);

function autoFocus(el) {
  if (el) el.focus();
}

const Motd = ({
  muiTheme,
  canChangeMotd,
  newMotd,
  parsedMotd,
  onChange,
  onSubmit,
}) => (
  <Card className="AdminMotd">
    <CardHeader
      title="Message of the Day"
      showExpandableButton={canChangeMotd}
      closeIcon={<EditIcon color="#fff" />}
    />
    <CardText>{parsedMotd}</CardText>
    <CardText expandable style={{ paddingTop: 0 }}>
      <textarea
        className="AdminMotd-field"
        rows={4}
        onChange={onChange}
        value={newMotd}
        ref={autoFocus}
      />
    </CardText>
    <CardActions expandable>
      <FlatButton
        onClick={onSubmit}
        label="Save"
        backgroundColor={muiTheme.palette.primary1Color}
        hoverColor={muiTheme.palette.primary2Color}
        rippleColor={muiTheme.palette.primary3Color}
      />
    </CardActions>
  </Card>
);

Motd.propTypes = {
  muiTheme: PropTypes.object.isRequired,
  canChangeMotd: PropTypes.bool,
  newMotd: PropTypes.string.isRequired,
  parsedMotd: PropTypes.array.isRequired,
  onChange: PropTypes.func.isRequired,
  onSubmit: PropTypes.func.isRequired,
};

Motd.defaultProps = {
  canChangeMotd: false,
};

export default enhance(Motd);
<commit_msg>Port admin Motd to material-ui@next.<commit_after>import React from 'react';
import PropTypes from 'prop-types';
import compose from 'recompose/compose';
import withState from 'recompose/withState';
import withProps from 'recompose/withProps';
import withHandlers from 'recompose/withHandlers';
import Card, { CardHeader, CardContent, CardActions } from 'material-ui-next/Card'; // eslint-disable-line
import Button from 'material-ui-next/Button'; // eslint-disable-line
import IconButton from 'material-ui-next/IconButton'; // eslint-disable-line
import Collapse from 'material-ui-next/transitions/Collapse'; // eslint-disable-line
import EditIcon from 'material-ui-icons/ModeEdit';
import parse from 'u-wave-parse-chat-markup';
import compile from '../../../components/Chat/Markup/compile';

import './index.css';

const enhance = compose(
  withState('newMotd', 'setMotd', props => props.motd),
  withState('expanded', 'setExpanded', false),
  withProps(props => ({
    parsedMotd: compile(parse(props.newMotd), props.compileOptions),
    onExpand: () => props.setExpanded(!props.expanded),
  })),
  withHandlers({
    onChange: props => (event) => {
      props.setMotd(event.target.value);
    },
    onSubmit: props => () => {
      props.onSetMotd(props.newMotd);
      props.setExpanded(false);
    },
  }),
);

function autoFocus(el) {
  if (el) el.focus();
}

const Motd = ({
  canChangeMotd,
  newMotd,
  parsedMotd,
  expanded,
  onChange,
  onSubmit,
  onExpand,
}) => (
  <Card className="AdminMotd">
    <CardHeader
      title="Message of the Day"
      action={canChangeMotd && (
        <IconButton onClick={onExpand}>
          <EditIcon />
        </IconButton>
      )}
    />
    <CardContent>{parsedMotd}</CardContent>
    <Collapse in={expanded} unmountOnExit>
      <CardContent style={{ paddingTop: 0 }}>
        <textarea
          className="AdminMotd-field"
          rows={4}
          onChange={onChange}
          value={newMotd}
          ref={autoFocus}
        />
      </CardContent>
      <CardActions>
        <Button
          variant="raised"
          color="primary"
          onClick={onSubmit}
        >
          Save
        </Button>
      </CardActions>
    </Collapse>
  </Card>
);

Motd.propTypes = {
  canChangeMotd: PropTypes.bool,
  newMotd: PropTypes.string.isRequired,
  parsedMotd: PropTypes.array.isRequired,
  expanded: PropTypes.bool.isRequired,
  onChange: PropTypes.func.isRequired,
  onSubmit: PropTypes.func.isRequired,
  onExpand: PropTypes.func.isRequired,
};

Motd.defaultProps = {
  canChangeMotd: false,
};

export default enhance(Motd);

{'fraction_non_alphanumeric': 0.14012738853503184, 'fraction_numerical': 0.0014382576535853708, 'mean_word_length': 3.417422867513612, 'pattern_counts': {'":': 0, '<': 32, '<?xml version=': 0, '>': 47, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '3933368', 'n_tokens_mistral': 1605, 'n_tokens_neox': 1582, 'n_words': 300}