Skip to content

Instantly share code, notes, and snippets.

@infinityCounter

infinityCounter/gist:2e5589b9cb7fbcd8b55cd9e8dc38dc86

Created August 7, 2017 01:18
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save infinityCounter/2e5589b9cb7fbcd8b55cd9e8dc38dc86 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save infinityCounter/2e5589b9cb7fbcd8b55cd9e8dc38dc86 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. infinityCounter created this gist Aug 7, 2017.
    152 changes: 152 additions & 0 deletions gistfile1.txt
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,152 @@
    class CommentView extends React.Component {
    constructor(props) {
    super(props);
    }

    render() {
    return (
    <div className="comment-view">
    <p className="comment-view-body">
    {this.props.message}
    </p>
    <div className="comment-view-controls">
    <ul>
    <li
    onClick={this.props.editEventHandler}
    >
    Edit
    </li>
    <li
    onClick={this.props.deleteEventHandler}
    >
    Delete
    </li>
    </ul>
    </div>
    <div className="comment-view-details">
    <span>{this.props.author}</span>
    <span>{this.props.date}</span>
    </div>
    </div>
    );
    }
    };

    class CommentForm extends React.Component {
    constructor(props) {
    super(props);
    this.state = {'message' : props.message};
    }

    submitHandler = (event) => {
    event.preventDefault();
    this.props.updateEventHandler(this.state.message);
    };

    handleChange = (event) => this.setState({'message' : event.target.value});

    render() {
    return (
    <form className="comment-form" onSubmit={this.submitHandler}>
    <textarea
    value={this.state.message}
    onChange={this.handleChange}
    /><br />
    <button>Submit</button>
    </form>
    );
    }
    }

    class Comment extends React.Component {
    constructor(props) {
    super(props);
    this.state = {
    'editable' : false,
    'updated' : false,
    'comment' : props.comment || null
    };
    }

    makeCommentEditable = () => {
    this.setState((prev) => {
    prev.editable = true;
    });
    };

    updateComment = (newMessage) => {
    this.setState((prev) => {
    let newState = prev;
    newState.comment.message = newMessage;
    newState.editable = false;
    return newState;
    });
    };

    deleteComment = () => {
    this.setState((prev) => {
    let newState = prev;
    newState.comment = null;
    return newState;
    });
    };

    render() {
    if(this.state.comment !== null) {
    if(!this.state.editable) {
    return (
    <CommentView
    {...this.state.comment}
    editEventHandler = {this.makeCommentEditable}
    deleteEventHandler = {this.deleteComment}
    />
    );
    } else {
    return (
    <CommentForm
    {...this.state.comment}
    updateEventHandler = {this.updateComment}
    />
    );
    }
    } else {
    return null;
    }
    }
    }

    class CommentList extends React.Component {
    constructor(props) {
    super(props);
    }

    render() {
    return (
    <div>
    {this.props.commentList.map(comment => <Comment comment={comment} />)}
    </div>
    );
    }
    }

    let commentList = [{
    'message' : "This is a very long and superofulous sentence, which i am using to test wether a word break will occur where i expect it to",
    'author' : "Emile Keith",
    'date' : "December 1, 2017"
    },{
    'message' : "This is a very long and superofulous sentence, which i am using to test wether a word break will occur where i expect it to",
    'author' : "Emile Keith",
    'date' : "December 1, 2017"
    },{
    'message' : "This is a very long and superofulous sentence, which i am using to test wether a word break will occur where i expect it to",
    'author' : "Emile Keith",
    'date' : "December 1, 2017"
    },{
    'message' : "This is a very long and superofulous sentence, which i am using to test wether a word break will occur where i expect it to",
    'author' : "Emile Keith",
    'date' : "December 1, 2017"
    },{
    'message' : "This is a very long and superofulous sentence, which i am using to test wether a word break will occur where i expect it to",
    'author' : "Emile Keith",
    'date' : "December 1, 2017"
    }];