index.js 3.1 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889
  1. import React from 'react';
  2. import { connect } from 'react-redux';
  3. // import { bindActionCreators } from 'redux'
  4. // import {} from './../../../actions'
  5. import axios from 'axios';
  6. // redux-connected container
  7. class profilePage extends React.Component {
  8. state = {
  9. user: {}
  10. }
  11. getUser = () => {
  12. const randomUserId = Math.ceil(Math.random() * 10);
  13. axios.post(`https://quiz.maxcrc.de/api/v1/user`,{
  14. "login": 'ddd',
  15. "password":"jhgfhgg"
  16. })
  17. .then(({ data }) => this.setState({
  18. user: data
  19. }))
  20. .catch(({ message }) => console.warn(message))
  21. }
  22. componentDidMount() {
  23. this.getUser();
  24. }
  25. render() {
  26. const { user } = this.state;
  27. console.log(user);
  28. return (
  29. <div className="page page--bottom-only profile-page">
  30. <section className="container section section--about">
  31. <h2 className="section__element section__element--header">{user.login}</h2>
  32. <img className="section__element section__element--image" src={user.avatar} alt="avatar" />
  33. <div className="sedtion__element section__element--login">
  34. <h3>Login</h3>
  35. <p>{user.login}<button className="link link--btn right">Change login</button></p>
  36. </div>
  37. <div className="section__element section__element--">
  38. <h3>E-mail</h3>
  39. <p>{user.email}<button className="link link--btn right">Change e-mail</button></p>
  40. </div>
  41. <div className="section__element section__element--">
  42. <h3>Status</h3>
  43. <p>{user.description}</p>
  44. </div>
  45. </section>
  46. <section className="container section section--stats">
  47. <div className="section__element section__element--">
  48. <h3>Member Since</h3>
  49. <p>{new Date(user.createdAt).toLocaleString()}</p>
  50. </div>
  51. <div className="section__element section__element--comments">
  52. <h3>Last comments</h3>
  53. <p className="comments-block">
  54. {
  55. user.comments && user.comments
  56. .slice(0, 60)
  57. .map(el =>
  58. <p>
  59. <h4>{new Date(el.createdAt).toLocaleString()}</h4>
  60. {el.text}
  61. </p>)
  62. }
  63. </p>
  64. </div>
  65. </section>
  66. </div>
  67. )
  68. }
  69. }
  70. const
  71. mapStateToProps = state => ({
  72. user: state.user
  73. })
  74. // mapDispatchToProps = dispatch => bindActionCreators({}, dispatch)
  75. export default connect(mapStateToProps)(profilePage);