<commit_before>import React from 'react';
import { Meteor } from 'meteor/meteor';
import Paper from 'material-ui/Paper';
import Subheader from 'material-ui/Subheader';
import FlatButton from 'material-ui/FlatButton';

import * as Helper from '../../../util/helper';
import * as GiveawaysHelper from '../../../util/giveaways';
import * as IconsHelper from '../../../util/icons';
import * as UsersHelper from '../../../util/users';

import { pushStatusUpdate } from '../../../api/giveaways/methods';

const statusUpdateRow = (owner) => (su, index) => (
  <div className="status-update-row" key={index}>
    <span className="orb">
    { IconsHelper.materialIcon("lens", { color: su.statusType.hexColour, fontSize: 10 }) }
    </span>
    <span className="desc">
      { UsersHelper.getFullNameWithLabelIfEqual(su.user, owner, "author") } marked this giveaway as { su.statusType.label }.
      <span className="timestamp small-text">{ moment(su.date).fromNow() }</span>
    </span>
  </div>
);

const statusTypeActionHandler = (giveawayId, statusTypeId) => (event) => {
  if (!Meteor.userId())
    return;

  pushStatusUpdate.call({ giveawayId, statusTypeId, userId: Meteor.userId() });
};

const statusTypeActionRow = (count, ga) => (statusType, index) => (
  <div className={ "col col-xs-12 col-sm-" + 12/count } key={index}>
    <FlatButton
      label={ statusType.label }
      backgroundColor={ statusType.hexColour }
      hoverColor={ Helper.shadeColor(statusType.hexColour, -0.2) }
      labelStyle={{ fontSize: "13px", textTransform: "none", color: "#fff", padding: 5 }}
      style={{ width: "calc(100% - 10px)", margin: "0 auto 5px" }}
      onTouchTap={ statusTypeActionHandler(ga._id, statusType._id) } />
  </div>
);

const LatestUpdate = ({ latestOwnerUpdate, owner }) => (
  <div className="latest-update">
    <Subheader>Latest update from author</Subheader>
    <div className="status-updates-list">
      { (statusUpdateRow(owner))(latestOwnerUpdate) }
    </div>
  </div>
);

const ContributeUpdate = ({ statusTypes, ga }) => (
  <div className="contribute-update">
    <Subheader>Contribute a status update</Subheader>
    <div className="status-updates-actions">
      <div className="flex-row nopad">
        { statusTypes.map(statusTypeActionRow(statusTypes.count(), ga)) }
      </div>
    </div>
  </div>
);

const AllUpdates = ({ statusUpdates, owner }) => (
  <div className="all-updates">
    <Subheader>All status updates</Subheader>
    <div className="status-updates-list">
      { statusUpdates.map(statusUpdateRow(owner)) }
    </div>
  </div>
);

export const GiveawayStatusUpdatesCard = ({ ga, statusUpdates, statusTypes, latestOwnerUpdate, owner }) => (
  <Paper className="giveaway giveaway-card">
    <div className="flex-row">
      <div className="col col-xs-12">
        <h3>Status Updates</h3>

        { LatestUpdate({ latestOwnerUpdate, owner }) }

        { GiveawaysHelper.is_ongoing(ga) ? ContributeUpdate({ statusTypes, ga }) : null }

        { AllUpdates({ statusUpdates, owner }) }

      </div>
    </div>
  </Paper>
);
<commit_msg>Limit height of status update card, add Scrollbars component<commit_after>import React from 'react';
import { Meteor } from 'meteor/meteor';
import Paper from 'material-ui/Paper';
import Subheader from 'material-ui/Subheader';
import FlatButton from 'material-ui/FlatButton';
import { Scrollbars } from 'react-custom-scrollbars';

import * as Helper from '../../../util/helper';
import * as GiveawaysHelper from '../../../util/giveaways';
import * as IconsHelper from '../../../util/icons';
import * as UsersHelper from '../../../util/users';

import { pushStatusUpdate } from '../../../api/giveaways/methods';

const statusUpdateRow = (owner) => (su, index) => (
  <div className="status-update-row" key={index}>
    <span className="orb">
    { IconsHelper.materialIcon("lens", { color: su.statusType.hexColour, fontSize: 10 }) }
    </span>
    <span className="desc">
      { UsersHelper.getFullNameWithLabelIfEqual(su.user, owner, "author") } marked this giveaway as { su.statusType.label }.
      <span className="timestamp small-text">{ moment(su.date).fromNow() }</span>
    </span>
  </div>
);

const statusTypeActionHandler = (giveawayId, statusTypeId) => (event) => {
  if (!Meteor.userId())
    return;

  pushStatusUpdate.call({ giveawayId, statusTypeId, userId: Meteor.userId() });
};

const statusTypeActionRow = (count, ga) => (statusType, index) => (
  <div className={ "col col-xs-12 col-sm-" + 12/count } key={index}>
    <FlatButton
      label={ statusType.label }
      backgroundColor={ statusType.hexColour }
      hoverColor={ Helper.shadeColor(statusType.hexColour, -0.2) }
      labelStyle={{ fontSize: "13px", textTransform: "none", color: "#fff", padding: 5 }}
      style={{ width: "calc(100% - 10px)", margin: "0 auto 5px" }}
      onTouchTap={ statusTypeActionHandler(ga._id, statusType._id) } />
  </div>
);

const LatestUpdate = ({ latestOwnerUpdate, owner }) => (
  <div className="latest-update">
    <Subheader>Latest update from author</Subheader>
    <div className="status-updates-list">
      { (statusUpdateRow(owner))(latestOwnerUpdate) }
    </div>
  </div>
);

const ContributeUpdate = ({ statusTypes, ga }) => (
  <div className="contribute-update">
    <Subheader>Contribute a status update</Subheader>
    <div className="status-updates-actions">
      <div className="flex-row nopad">
        { statusTypes.map(statusTypeActionRow(statusTypes.count(), ga)) }
      </div>
    </div>
  </div>
);

const AllUpdates = ({ statusUpdates, owner }) => (
  <div className="all-updates">
    <Subheader>All status updates</Subheader>
    <div className="status-updates-list">
      <Scrollbars
        autoHide
        autoHeight
        autoHeightMin={22}
        autoHeightMax={300}>
        { statusUpdates.map(statusUpdateRow(owner)) }
      </Scrollbars>
    </div>
  </div>
);

export const GiveawayStatusUpdatesCard = ({ ga, statusUpdates, statusTypes, latestOwnerUpdate, owner }) => (
  <Paper className="giveaway giveaway-card">
    <div className="flex-row">
      <div className="col col-xs-12">
        <h3>Status Updates</h3>

        { LatestUpdate({ latestOwnerUpdate, owner }) }

        { GiveawaysHelper.is_ongoing(ga) ? ContributeUpdate({ statusTypes, ga }) : null }

        { AllUpdates({ statusUpdates, owner }) }

      </div>
    </div>
  </Paper>
);

{'fraction_non_alphanumeric': 0.1686728153822104, 'fraction_numerical': 0.007659840550257933, 'mean_word_length': 3.6028776978417265, 'pattern_counts': {'":': 0, '<': 83, '<?xml version=': 0, '>': 103, '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': '5011379', 'n_tokens_mistral': 2064, 'n_tokens_neox': 2004, 'n_words': 444}