Skip to content

Instantly share code, notes, and snippets.

@YKalashnikov
Created January 27, 2018 20:16
Show Gist options
  • Save YKalashnikov/6a2d2c13fd49a21ecec591b06a7d61ff to your computer and use it in GitHub Desktop.
Save YKalashnikov/6a2d2c13fd49a21ecec591b06a7d61ff to your computer and use it in GitHub Desktop.
REACT...I am having a problem to convert time ("YYYY-MM-DD HH:mm:ss")..I would appreciate any help
https://codepen.io/AK-47/pen/goVORq
@YKalashnikov
Copy link
Author

class UserRow extends React.Component {
render(){
var url='https://www.freecodecamp.com/';

return (
  <tr className='camper'>
    <td className="camper-num">{this.props.userNum}</td>
    <td className='camper-profile'>
      <a href={url+ this.props.userName} target="_blanc" className='camper-name-link'>
        <img src={this.props.image} className='profile-photo'/>{this.props.userName}</a></td>
    <td className='camper-points'>{this.props.pointsRecent}</td>
    <td className='camper-points'>{this.props.pointsAll}</td>
    <td className='camperr-update'>{this.props.update}</td>
    </tr>
);

}
}

class TableContents extends React.Component{

render(){
var dataArr=this.props.data;
var users='';
// var showDate=(this.props.update).format("YYYY-MM-DD HH:mm:ss");

if (dataArr.length > 0) {
  users = dataArr.map((userObj,index) =>
   (<UserRow userNum={index + 1} 
       image={userObj.img}
       userName={userObj.username} 
       pointsRecent={userObj.recent}
       pointsAll={userObj.alltime}
      update={userObj.lastUpdate}/>));
  
  if (this.props.sortBy == 'all') {
    users.sort(function(a, b) {
      return b.props.pointsAll - a.props.pointsAll;
    });
  }
}
         
return (
  <tbody>{users}</tbody>  
);

}
}

class Table extends React.Component{

constructor(props){
super(props);
this.state={
data:[],
sort:'recent'
}
}
loadData(){
$.get(this.props.source, function(result){
this.setState({
data:result

  });
}.bind(this));  

}

componentWillMount(){
this.loadData();

}
handleClick(sortBy,event){
this.setState({
sort:sortBy
})

}

render(){
var recentClass="sort-button"
var allClass='sort-button'
if(this.state.sort=='recent'){
recentClass='sort-button sorted'
}else{
allClass='sort-button sorted'
}
return(










  </table>

)
}
}

ReactDOM.render(


Leaderboard
# Camper Name <button onClick={this.handleClick.bind(this, 'recent')} >Points in past 30 days <button onClick={this.handleClick.bind(this,'all')}>All time points Last update
, document.getElementById('root') );

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment