<commit_before>var React = require('react');
var mui = require('material-ui');
var {Avatar,
  Card,
  CardActions,
  CardHeader,
  CardText,
  Checkbox,
  FlatButton,
  TextField } = mui;
var Colors = mui.Styles.Colors;

var AskResult = require('./ask-result.jsx');
var VoteButton = require('./vote-button.jsx');
var VoteUser = require('./svg-icons/vote-user.jsx');

var Ages = require('./ages.jsx');
var Gender = require('./gender.jsx');

var AskHeader = React.createClass({
  render: function () {
     var styles = {
      author: {
        width:'70%',
        float: 'left',
      },
      crownContainer: {
        width:'64px',
        height:'72px',
        float:'right',
        paddingRight:'16px',
      },
    };

    console.log("!!!!!!AskHeader rendered");
    console.log(this.props.userId.S);
    console.log(this.props.userName.S);
    console.log(this.props.date.S);
    var secret = this.props.secret === undefined ? "none" : this.props.secret.S;
    var userId = this.props.userId.S;
    var author = secret === "none" ? this.props.userName.S : secret;
    var yearMonthDay = new Date(parseInt(this.props.date.S)).toDateString();
    var time = new Date(parseInt(this.props.date.S)).toTimeString().split(' ')[0];
    var readable = this.readableDate(this.props.date.S);
    var rank = this.props.rank;
    var age = this.props.age ? this.props.age.S : 'ALL';
    var gender = this.props.gender ? this.props.gender.S : 'ALL';
    var profile_photo = "http://graph.facebook.com/"+userId+"/picture?type=small";

    return (
      <div>
        <div style={styles.author}>
        <CardHeader
          avatar={this.makeAvata(secret)}
          title={author}
          subtitle={readable}
          showExpandableButton={true} />
        </div>
        <div style={styles.crownContainer}>
          <Gender gender={gender}/>
          <Ages age={age}/>
        </div>
      </div>
    );
  },

  readableDate: function(datetime) {
    var currentTime = new Date().getTime();
    var sec =  (currentTime - datetime) / 1000;
    console.log("readableDate datetime : " + datetime);
    console.log("readableDate currentTime : " + currentTime);

    if(sec < 60)
      return sec.toFixed(0) + ((sec.toFixed(0) <= 1) ? ' second' : ' seconds');

    var min = sec / 60;
    if(min < 60)
      return min.toFixed(0) + ((min.toFixed(0) <= 1) ? ' minute' : ' minutes');

    var hour = min / 60;
    if(hour < 24)
      return hour.toFixed(0) + ((hour.toFixed(0) <= 1) ? ' hour' : ' hours');

    var day = hour / 24;
    if(day < 7)
      return day.toFixed(0) + ((day.toFixed(0) <= 1) ? ' day' : ' days');

    var week = day / 7;
    if(week < 5)
      return week.toFixed(0) + ((week.toFixed(0) <= 1) ? ' week' : ' weeks');

    var month = day / 30;
    if(month < 12)
      return month.toFixed(0) + ((month.toFixed(0) <= 1) ? ' month' : ' months');

    var year = day / 365;
    return year.toFixed(0) + ((year.toFixed(0) <= 1) ? ' year' : ' years');
  },

  makeAvata: function(secret) {
    if (secret === "none")
      return <Avatar src={"http://graph.facebook.com/"+this.props.userId.S+"/picture?type=small"}></Avatar>;
    if (secret === "<NAME>")
      return <Avatar>G</Avatar>;
    if (secret === "<NAME>")
      return <Avatar>L</Avatar>;

    return <Avatar>A</Avatar>;
  }
});


var Content = React.createClass({

  childContextTypes : {
    muiTheme: React.PropTypes.object,
  },

  render: function () {
    console.log("!!!!!!Content rendered");
    var mainContent = this.props.mainContent.S;
    var yesContent = this.props.yesContent.S;
    var noContent = this.props.noContent.S;
    console.log(yesContent);
    console.log(noContent);

    var yesCount = parseInt(this.props.yesCount.N);
    var noCount = parseInt(this.props.noCount.N);
    var totalCount = yesCount + noCount;

    var styles = {
      yesButton: {
        color: Colors.pink300,
        width: 'calc(100% - 11px)',
        paddingLeft: 5,
        fontSize : 14,
        pointerEvents: 'none'
      },
      noButton: {
        color: Colors.cyan700,
        width: 'calc(100% - 11px)',
        paddingLeft: 5,
        fontSize : 14,
        pointerEvents: 'none'
      },
      vote: {
        textAlign: 'right',
        color : Colors.grey600,
        fontSize : 14,
        paddingRight: "5px"
      },
      totalVote: {
        position: 'relative',
        top: 3,
        width: 17,
        height: 17,
      }
    };
    var showContent = function () {
      return (
        <div>
          <div>
            <TextField
              style={{width:'100%', pointerEvents: 'none'}}
              underlineStyle={{display:'none'}}
              disabled={false}
              defaultValue={mainContent}
              type='text'
              rows={1}
              rowsMax={5}
              multiLine={true} />
          </div>
          <div style={styles.vote}>
            <VoteUser style={styles.totalVote} color={Colors.grey600} /> {totalCount}
          </div>
          <div>
            <span style={{color:Colors.pink500, fontSize: 9, fontWeight:'bold', paddingLeft: 3}}>YES</span>
            <FlatButton
              style={{width:'100%', backgroundColor:Colors.pink50, pointerEvents: 'none'}}
              primary={true} >
              <TextField
                style={styles.yesButton}
                underlineStyle={{display:'none'}}
                disabled={false}
                defaultValue={yesContent}
                type='text'
                rows={1}
                rowsMax={10}
                multiLine={true} />
            </FlatButton>
          </div>
          <AskResult
            ref="yesResult"
            show={true}
            yesNoCount={yesCount}
            totalCount={totalCount}
            color={Colors.pink300} />
          <div style={{marginTop : 15}}>
            <span style={{color:Colors.cyan500 , fontSize: 9, fontWeight:'bold', paddingLeft: 3}}>NO</span>
            <FlatButton
              style={{width:'100%', backgroundColor:Colors.cyan50, pointerEvents: 'none'}}
              secondary={true} >
              <TextField
                style={styles.noButton}
                underlineStyle={{display:'none'}}
                disabled={false}
                defaultValue={noContent}
                type='text'
                rows={1}
                rowsMax={10}
                multiLine={true} />
            </FlatButton>
          </div>
          <AskResult
            ref="noResult"
            show={true}
            yesNoCount={noCount}
            totalCount={totalCount}
            color={Colors.cyan500} />
        </div>
      );
    }.bind(this);
    return (
      <CardText expandable={true} >
        {showContent()}
      </CardText>
    );
  },
});


var MyCardList = React.createClass({
  render: function () {
    console.log("!!!!!!!MyCardList render");

    var cards;
    var styles = {
      card: {
        marginTop: 10,
        marginBottom: 15,
        marginLeft: 10,
        marginRight: 10,
      }
    };

    if (this.props.data === undefined) {
      cards = function () {
        return (
          <div></div>
        );
      }();
    } else {
      cards = this.props.data.map(function (ask) {
        console.log(JSON.stringify(ask));
        return (
          <Card
            key={ask.index.S}
            initiallyExpanded={true}
            style={styles.card} >
            <AskHeader
              userName={ask.userName}
              userId={ask.userId}
              date={ask.date}
              rank={ask.rank}
              age={ask.age}
              gender={ask.gender}
              secret={ask.secret} />
            <Content mainContent={ask.mainContent}
              yesContent={ask.yesContent}
              noContent={ask.noContent}<commit_msg>[client] my asks : remove unused variable<commit_after>var React = require('react');
var mui = require('material-ui');
var {Avatar,
  Card,
  CardActions,
  CardHeader,
  CardText,
  Checkbox,
  FlatButton,
  TextField } = mui;
var Colors = mui.Styles.Colors;

var AskResult = require('./ask-result.jsx');
var VoteButton = require('./vote-button.jsx');
var VoteUser = require('./svg-icons/vote-user.jsx');

var Ages = require('./ages.jsx');
var Gender = require('./gender.jsx');

var AskHeader = React.createClass({
  render: function () {
     var styles = {
      author: {
        width:'70%',
        float: 'left',
      },
      targetContainer: {
        width:'64px',
        height:'72px',
        float:'right',
        paddingRight:'16px',
      },
    };

    console.log("!!!!!!AskHeader rendered");
    console.log(this.props.userId.S);
    console.log(this.props.userName.S);
    console.log(this.props.date.S);
    var secret = this.props.secret === undefined ? "none" : this.props.secret.S;
    var userId = this.props.userId.S;
    var author = secret === "none" ? this.props.userName.S : secret;
    var readable = this.readableDate(this.props.date.S);
    var age = this.props.age ? this.props.age.S : 'ALL';
    var gender = this.props.gender ? this.props.gender.S : 'ALL';

    return (
      <div>
        <div style={styles.author}>
        <CardHeader
          avatar={this.makeAvata(secret)}
          title={author}
          subtitle={readable}
          showExpandableButton={true} />
        </div>
        <div style={styles.targetContainer}>
          <Gender gender={gender}/>
          <Ages age={age}/>
        </div>
      </div>
    );
  },

  readableDate: function(datetime) {
    var currentTime = new Date().getTime();
    var sec =  (currentTime - datetime) / 1000;
    console.log("readableDate datetime : " + datetime);
    console.log("readableDate currentTime : " + currentTime);

    if(sec < 60)
      return sec.toFixed(0) + ((sec.toFixed(0) <= 1) ? ' second' : ' seconds');

    var min = sec / 60;
    if(min < 60)
      return min.toFixed(0) + ((min.toFixed(0) <= 1) ? ' minute' : ' minutes');

    var hour = min / 60;
    if(hour < 24)
      return hour.toFixed(0) + ((hour.toFixed(0) <= 1) ? ' hour' : ' hours');

    var day = hour / 24;
    if(day < 7)
      return day.toFixed(0) + ((day.toFixed(0) <= 1) ? ' day' : ' days');

    var week = day / 7;
    if(week < 5)
      return week.toFixed(0) + ((week.toFixed(0) <= 1) ? ' week' : ' weeks');

    var month = day / 30;
    if(month < 12)
      return month.toFixed(0) + ((month.toFixed(0) <= 1) ? ' month' : ' months');

    var year = day / 365;
    return year.toFixed(0) + ((year.toFixed(0) <= 1) ? ' year' : ' years');
  },

  makeAvata: function(secret) {
    if (secret === "none")
      return <Avatar src={"http://graph.facebook.com/"+this.props.userId.S+"/picture?type=small"}></Avatar>;
    if (secret === "<NAME>")
      return <Avatar>G</Avatar>;
    if (secret === "<NAME>")
      return <Avatar>L</Avatar>;

    return <Avatar>A</Avatar>;
  }
});


var Content = React.createClass({

  childContextTypes : {
    muiTheme: React.PropTypes.object,
  },

  render: function () {
    console.log("!!!!!!Content rendered");
    var mainContent = this.props.mainContent.S;
    var yesContent = this.props.yesContent.S;
    var noContent = this.props.noContent.S;
    console.log(yesContent);
    console.log(noContent);

    var yesCount = parseInt(this.props.yesCount.N);
    var noCount = parseInt(this.props.noCount.N);
    var totalCount = yesCount + noCount;

    var styles = {
      yesButton: {
        color: Colors.pink300,
        width: 'calc(100% - 11px)',
        paddingLeft: 5,
        fontSize : 14,
        pointerEvents: 'none'
      },
      noButton: {
        color: Colors.cyan700,
        width: 'calc(100% - 11px)',
        paddingLeft: 5,
        fontSize : 14,
        pointerEvents: 'none'
      },
      vote: {
        textAlign: 'right',
        color : Colors.grey600,
        fontSize : 14,
        paddingRight: "5px"
      },
      totalVote: {
        position: 'relative',
        top: 3,
        width: 17,
        height: 17,
      }
    };
    var showContent = function () {
      return (
        <div>
          <div>
            <TextField
              style={{width:'100%', pointerEvents: 'none'}}
              underlineStyle={{display:'none'}}
              disabled={false}
              defaultValue={mainContent}
              type='text'
              rows={1}
              rowsMax={5}
              multiLine={true} />
          </div>
          <div style={styles.vote}>
            <VoteUser style={styles.totalVote} color={Colors.grey600} /> {totalCount}
          </div>
          <div>
            <span style={{color:Colors.pink500, fontSize: 9, fontWeight:'bold', paddingLeft: 3}}>YES</span>
            <FlatButton
              style={{width:'100%', backgroundColor:Colors.pink50, pointerEvents: 'none'}}
              primary={true} >
              <TextField
                style={styles.yesButton}
                underlineStyle={{display:'none'}}
                disabled={false}
                defaultValue={yesContent}
                type='text'
                rows={1}
                rowsMax={10}
                multiLine={true} />
            </FlatButton>
          </div>
          <AskResult
            ref="yesResult"
            show={true}
            yesNoCount={yesCount}
            totalCount={totalCount}
            color={Colors.pink300} />
          <div style={{marginTop : 15}}>
            <span style={{color:Colors.cyan500 , fontSize: 9, fontWeight:'bold', paddingLeft: 3}}>NO</span>
            <FlatButton
              style={{width:'100%', backgroundColor:Colors.cyan50, pointerEvents: 'none'}}
              secondary={true} >
              <TextField
                style={styles.noButton}
                underlineStyle={{display:'none'}}
                disabled={false}
                defaultValue={noContent}
                type='text'
                rows={1}
                rowsMax={10}
                multiLine={true} />
            </FlatButton>
          </div>
          <AskResult
            ref="noResult"
            show={true}
            yesNoCount={noCount}
            totalCount={totalCount}
            color={Colors.cyan500} />
        </div>
      );
    }.bind(this);
    return (
      <CardText expandable={true} >
        {showContent()}
      </CardText>
    );
  },
});


var MyCardList = React.createClass({
  render: function () {
    console.log("!!!!!!!MyCardList render");

    var cards;
    var styles = {
      card: {
        marginTop: 10,
        marginBottom: 15,
        marginLeft: 10,
        marginRight: 10,
      }
    };

    if (this.props.data === undefined) {
      cards = function () {
        return (
          <div></div>
        );
      }();
    } else {
      cards = this.props.data.map(function (ask) {
        console.log(JSON.stringify(ask));
        return (
          <Card
            key={ask.index.S}
            initiallyExpanded={true}
            style={styles.card} >
            <AskHeader
              userName={ask.userName}
              userId={ask.userId}
              date={ask.date}
              age={ask.age}
              gender={ask.gender}
              secret={ask.secret} />
            <Content mainContent={ask.mainContent}
              yesContent={ask.yesContent}
              noContent={ask.noContent}
{'fraction_non_alphanumeric': 0.15510603588907015, 'fraction_numerical': 0.018075040783034256, 'mean_word_length': 1.868425977915029, 'pattern_counts': {'":': 0, '<': 129, '<?xml version=': 0, '>': 101, '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': '4543264', 'n_tokens_mistral': 4927, 'n_tokens_neox': 4664, 'n_words': 890}