<commit_before>﻿(function (Fluxxor, React, ReactDOM) {

    var constants = {
        ADD_COMMENT: "ADD_COMMENT",
        DELETE_COMMENT: "DELETE_COMMENT"
    };

    // The Flux stores
    var CommentStore = Fluxxor.createStore({
        initialize: function () {
            this.commentId = 0;

            var id1 = this._nextCommentId(),
                id2 = this._nextCommentId();

            this.comments = {},
            this.comments[id1] = { id: id1, author: "<NAME>", text: "This is one comment" },
            this.comments[id2] = { id: id2, author: "<NAME>", text: "This is *another* comment" };

            this.bindActions(
              constants.ADD_COMMENT, this.onAddComment,
              constants.DELETE_COMMENT, this.onDeleteComment
            );
        },

        onAddComment: function (payload) {
            var id = this._nextCommentId();
            var comment = {
                id: id,
                author: payload.author,
                text: payload.text
            };
            this.comments[id] = comment;
            this.emit("change");
        },

        onDeleteComment: function (payload) {
            var id = payload.id;
            delete this.comments[id];
            this.emit("change");
        },

        getState: function () {
            return {
                comments: this.comments
            };
        },

        _nextCommentId: function () {
            return ++this.commentId;
        }
    });

    // Flux itself
    var actions = {
        addComment: function (comment) {
            this.dispatch(constants.ADD_COMMENT, { author: comment.author, text: comment.text });
        },
        deleteComment: function (id) {
            this.dispatch(constants.DELETE_COMMENT, { id: id });
        }
    };

    var stores = {
        CommentStore: new CommentStore()
    };

    var flux = new Fluxxor.Flux(stores, actions);

    // Finally, let's use the "dispatch" event to add some logging
    flux.on("dispatch", function (type, payload) {
        if (console && console.log) {
            console.log("[Dispatch]", type, payload);
        }
    });

    // and now the ReactJs Views
    var FluxMixin = Fluxxor.FluxMixin(React),
        StoreWatchMixin = Fluxxor.StoreWatchMixin;

    var CommentBox = React.createClass({
        mixins: [FluxMixin, StoreWatchMixin("CommentStore")],

        getStateFromFlux: function () {
            var flux = this.getFlux();
            return flux.store("CommentStore").getState();
        },

        handleCommentSubmit: function (comment) {
            this.getFlux().actions.addComment(comment);
        },
        render: function () {

            var comments = this.state.comments;

            return (
              <div className="commentBox">
                  <h2>Comments</h2>
                    <CommentList data={comments} />
                    <CommentForm onCommentSubmit={this.handleCommentSubmit} />
              </div>
            );
        }
    });

    var CommentList = React.createClass({
        render: function () {

            var comments = this.props.data,
                commentNodes = [];

            Object.keys(comments).forEach(function (key) {
                commentNodes.push(
                  <Comment author={comments[key].author} key={comments[key].id} id={comments[key].id}>
                      {comments[key].text}
                  </Comment>
                );
            });
        
            return (
          <div className="commentList">
              {commentNodes}
          </div>
            );
        }
    });

    var CommentForm = React.createClass({
        handleSubmit: function (e) {
            e.preventDefault();

            var author = this.refs.author.value.trim();
            var text = this.refs.text.value.trim();
            if (!text || !author) {
                return;
            }
            this.props.onCommentSubmit({ author: author, text: text });
            this.refs.author.value = '';
            this.refs.text.value = '';
        },
        render: function () {
            return (
              <div className="commentForm">
                <form className="commentForm form-inline" role="form" onSubmit={this.handleSubmit}>
                        <input type="text"
                               placeholder="Your name"
                               value={this.props.author}
                               ref="author"
                               className = "form-control" />
                        <input type="text"
                               placeholder="Say something..."
                               value={this.props.text}
                               ref="text" 
                               className = "form-control" />
                        <input type="submit" value="Post" className = "btn btn-primary" />
                </form>
              </div>
          );
        }
    });

    var Comment = React.createClass({
        mixins: [FluxMixin, StoreWatchMixin("CommentStore")],

        getStateFromFlux: function () {
            var flux = this.getFlux();
            return flux.store("CommentStore").getState();
        },

        handleCommentDelete: function (e) {
            e.preventDefault();
            this.getFlux().actions.deleteComment(this.props.id);
        },
        render: function () {
            return (
              <div className="comment">
                <dl>
                  <dt className="commentAuthor">
                      {this.props.author}
                  </dt>
                  <dd>
                        {this.props.children}
                      <br /><commit_msg>I removed the unnecessary store mixin from the Comment React view. This is only necessary for views that hold state such as the CommentBox view.<commit_after>﻿(function (Fluxxor, React, ReactDOM) {

    var constants = {
        ADD_COMMENT: "ADD_COMMENT",
        DELETE_COMMENT: "DELETE_COMMENT"
    };

    // The Flux stores
    var CommentStore = Fluxxor.createStore({
        initialize: function () {
            this.commentId = 0;

            var id1 = this._nextCommentId(),
                id2 = this._nextCommentId();

            this.comments = {},
            this.comments[id1] = { id: id1, author: "<NAME>", text: "This is one comment" },
            this.comments[id2] = { id: id2, author: "<NAME>", text: "This is *another* comment" };

            this.bindActions(
              constants.ADD_COMMENT, this.onAddComment,
              constants.DELETE_COMMENT, this.onDeleteComment
            );
        },

        onAddComment: function (payload) {
            var id = this._nextCommentId();
            var comment = {
                id: id,
                author: payload.author,
                text: payload.text
            };
            this.comments[id] = comment;
            this.emit("change");
        },

        onDeleteComment: function (payload) {
            var id = payload.id;
            delete this.comments[id];
            this.emit("change");
        },

        getState: function () {
            return {
                comments: this.comments
            };
        },

        _nextCommentId: function () {
            return ++this.commentId;
        }
    });

    // Flux itself
    var actions = {
        addComment: function (comment) {
            this.dispatch(constants.ADD_COMMENT, { author: comment.author, text: comment.text });
        },
        deleteComment: function (id) {
            this.dispatch(constants.DELETE_COMMENT, { id: id });
        }
    };

    var stores = {
        CommentStore: new CommentStore()
    };

    var flux = new Fluxxor.Flux(stores, actions);

    // Finally, let's use the "dispatch" event to add some logging
    flux.on("dispatch", function (type, payload) {
        if (console && console.log) {
            console.log("[Dispatch]", type, payload);
        }
    });

    // and now the ReactJs Views
    var FluxMixin = Fluxxor.FluxMixin(React),
        StoreWatchMixin = Fluxxor.StoreWatchMixin;

    var CommentBox = React.createClass({
        mixins: [FluxMixin, StoreWatchMixin("CommentStore")],

        getStateFromFlux: function () {
            var flux = this.getFlux();
            return flux.store("CommentStore").getState();
        },

        handleCommentSubmit: function (comment) {
            this.getFlux().actions.addComment(comment);
        },
        render: function () {

            var comments = this.state.comments;

            return (
              <div className="commentBox">
                  <h2>Comments</h2>
                    <CommentList data={comments} />
                    <CommentForm onCommentSubmit={this.handleCommentSubmit} />
              </div>
            );
        }
    });

    var CommentList = React.createClass({
        render: function () {

            var comments = this.props.data,
                commentNodes = [];

            Object.keys(comments).forEach(function (key) {
                commentNodes.push(
                  <Comment author={comments[key].author} key={comments[key].id} id={comments[key].id}>
                      {comments[key].text}
                  </Comment>
                );
            });
        
            return (
          <div className="commentList">
              {commentNodes}
          </div>
            );
        }
    });

    var CommentForm = React.createClass({
        handleSubmit: function (e) {
            e.preventDefault();

            var author = this.refs.author.value.trim();
            var text = this.refs.text.value.trim();
            if (!text || !author) {
                return;
            }
            this.props.onCommentSubmit({ author: author, text: text });
            this.refs.author.value = '';
            this.refs.text.value = '';
        },
        render: function () {
            return (
              <div className="commentForm">
                <form className="commentForm form-inline" role="form" onSubmit={this.handleSubmit}>
                        <input type="text"
                               placeholder="Your name"
                               value={this.props.author}
                               ref="author"
                               className = "form-control" />
                        <input type="text"
                               placeholder="Say something..."
                               value={this.props.text}
                               ref="text" 
                               className = "form-control" />
                        <input type="submit" value="Post" className = "btn btn-primary" />
                </form>
              </div>
          );
        }
    });

    var Comment = React.createClass({
        mixins: [FluxMixin],

        handleCommentDelete: function (e) {
            e.preventDefault();
            this.getFlux().actions.deleteComment(this.props.id);
        },
        render: function () {
            return (
              <div className="comment">
                <dl>
                  <dt className="commentAuthor">
                      {this.props.author}
                  </dt>
                  <dd>
                        {this.props.children}
                      <br />
{'fraction_non_alphanumeric': 0.1175796065978654, 'fraction_numerical': 0.0015877216194760519, 'mean_word_length': 1.3566826023695697, 'pattern_counts': {'":': 0, '<': 53, '<?xml version=': 0, '>': 53, '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': '4604870', 'n_tokens_mistral': 2924, 'n_tokens_neox': 2797, 'n_words': 590}