Skip to content

Instantly share code, notes, and snippets.

@staylor

staylor/yolo.php

Last active August 29, 2015 14:11
Download ZIP

Revisions

  1. staylor revised this gist Dec 18, 2014. 1 changed file with 90 additions and 90 deletions.
    180 changes: 90 additions & 90 deletions yolo.php
    View file
    Original file line number Diff line number Diff line change
    @@ -1,124 +1,124 @@
    <?php

    class React_YOLO {
    public function __construct() {
    add_action( 'admin_menu', array( $this, 'admin_menu' ) );
    }
    public function __construct() {
    add_action( 'admin_menu', array( $this, 'admin_menu' ) );
    }

    public function admin_menu() {
    add_menu_page( 'React', 'React', 'edit_posts', 'react', array( $this, 'page' ) );
    }
    public function admin_menu() {
    add_menu_page( 'React', 'React', 'edit_posts', 'react', array( $this, 'page' ) );
    }

    public function page() {
    wp_enqueue_script( 'wp-api' );
    public function page() {
    wp_enqueue_script( 'wp-api' );
    ?>
    <script src="http://fb.me/react-0.12.1.js"></script>
    <script src="http://fb.me/JSXTransformer-0.12.1.js"></script>
    <div class="wrap">
    <h2>YOLO</h2>
    <div id="yolo"></div>
    <h2>YOLO</h2>
    <div id="yolo"></div>
    <script type="text/jsx">
    var $ = jQuery, YOLO, Post, Posts, Form;

    Post = React.createClass({
    render: function () {
    var post = this.props.data;
    return (
    <li>{post.id}. {post.title.rendered}</li>
    );
    }
    render: function () {
    var post = this.props.data;
    return (
    <li>{post.id}. {post.title.rendered}</li>
    );
    }
    });

    Posts = React.createClass({
    render: function () {
    var posts = this.props.data.map(function (post) {
    return <Post data={post} />;
    });
    return (
    <ul>
    {posts}
    </ul>
    );
    }
    render: function () {
    var posts = this.props.data.map(function (post) {
    return <Post data={post} />;
    });
    return (
    <ul>
    {posts}
    </ul>
    );
    }
    });

    Form = React.createClass({
    submit: function (e) {
    e.preventDefault();
    submit: function (e) {
    e.preventDefault();

    var title = this.refs.title.getDOMNode(),
    content = this.refs.content.getDOMNode();
    var title = this.refs.title.getDOMNode(),
    content = this.refs.content.getDOMNode();

    this.props.onSubmit({
    status: 'publish',
    title: title.value.trim(),
    content: content.value.trim()
    });
    this.props.onSubmit({
    status: 'publish',
    title: title.value.trim(),
    content: content.value.trim()
    });

    title.value = '';
    content.value = '';
    return;
    },
    render: function () {
    return (
    <form onSubmit={this.submit}>
    <p><input type="text" placeholder="Title" ref="title" /></p>
    <p><input type="text" placeholder="Some content..." ref="content" /></p>
    <input type="submit" value="Post" />
    </form>
    );
    }
    title.value = '';
    content.value = '';
    return;
    },
    render: function () {
    return (
    <form onSubmit={this.submit}>
    <p><input type="text" placeholder="Title" ref="title" /></p>
    <p><input type="text" placeholder="Some content..." ref="content" /></p>
    <input type="submit" value="Post" />
    </form>
    );
    }
    });

    YOLO = React.createClass({
    getInitialState: function () {
    return {posts: []};
    },
    setPosts: function (data) {
    this.setState({posts: data});
    },
    loadPosts: function () {
    $.ajax({
    url : '/wp-json/posts'
    }).done( _.bind( this.setPosts, this ) );
    },
    componentDidMount: function () {
    this.loadPosts();
    },
    addPost: function (data) {
    var posts = this.state.posts;
    posts.pop();
    posts.unshift( data );
    this.setState({posts: posts});
    this.loadPosts();
    },
    submit: function (data) {
    $.ajax({
    type: 'post',
    url: '/wp-json/posts',
    data: {
    data: data
    },
    beforeSend: function (xhr) {
    xhr.setRequestHeader('X-WP-Nonce', WP_API_Settings.nonce);
    }
    }).done( _.bind( this.addPost, this ) );
    },
    render: function() {
    return (
    <div className="yolo-box">
    <Posts data={this.state.posts} />
    <Form onSubmit={this.submit} />
    </div>
    );
    }
    getInitialState: function () {
    return {posts: []};
    },
    setPosts: function (data) {
    this.setState({posts: data});
    },
    loadPosts: function () {
    $.ajax({
    url : '/wp-json/posts'
    }).done( _.bind( this.setPosts, this ) );
    },
    componentDidMount: function () {
    this.loadPosts();
    },
    addPost: function (data) {
    var posts = this.state.posts;
    posts.pop();
    posts.unshift( data );
    this.setState({posts: posts});
    this.loadPosts();
    },
    submit: function (data) {
    $.ajax({
    type: 'post',
    url: '/wp-json/posts',
    data: {
    data: data
    },
    beforeSend: function (xhr) {
    xhr.setRequestHeader('X-WP-Nonce', WP_API_Settings.nonce);
    }
    }).done( _.bind( this.addPost, this ) );
    },
    render: function() {
    return (
    <div className="yolo-box">
    <Posts data={this.state.posts} />
    <Form onSubmit={this.submit} />
    </div>
    );
    }
    });

    React.render(<YOLO />, document.getElementById('yolo'));
    </script>
    </div>
    <?php
    }
    }
    }

    new React_YOLO();
  2. staylor created this gist Dec 18, 2014.
    124 changes: 124 additions & 0 deletions yolo.php
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,124 @@
    <?php

    class React_YOLO {
    public function __construct() {
    add_action( 'admin_menu', array( $this, 'admin_menu' ) );
    }

    public function admin_menu() {
    add_menu_page( 'React', 'React', 'edit_posts', 'react', array( $this, 'page' ) );
    }

    public function page() {
    wp_enqueue_script( 'wp-api' );
    ?>
    <script src="http://fb.me/react-0.12.1.js"></script>
    <script src="http://fb.me/JSXTransformer-0.12.1.js"></script>
    <div class="wrap">
    <h2>YOLO</h2>
    <div id="yolo"></div>
    <script type="text/jsx">
    var $ = jQuery, YOLO, Post, Posts, Form;

    Post = React.createClass({
    render: function () {
    var post = this.props.data;
    return (
    <li>{post.id}. {post.title.rendered}</li>
    );
    }
    });

    Posts = React.createClass({
    render: function () {
    var posts = this.props.data.map(function (post) {
    return <Post data={post} />;
    });
    return (
    <ul>
    {posts}
    </ul>
    );
    }
    });

    Form = React.createClass({
    submit: function (e) {
    e.preventDefault();

    var title = this.refs.title.getDOMNode(),
    content = this.refs.content.getDOMNode();

    this.props.onSubmit({
    status: 'publish',
    title: title.value.trim(),
    content: content.value.trim()
    });

    title.value = '';
    content.value = '';
    return;
    },
    render: function () {
    return (
    <form onSubmit={this.submit}>
    <p><input type="text" placeholder="Title" ref="title" /></p>
    <p><input type="text" placeholder="Some content..." ref="content" /></p>
    <input type="submit" value="Post" />
    </form>
    );
    }
    });

    YOLO = React.createClass({
    getInitialState: function () {
    return {posts: []};
    },
    setPosts: function (data) {
    this.setState({posts: data});
    },
    loadPosts: function () {
    $.ajax({
    url : '/wp-json/posts'
    }).done( _.bind( this.setPosts, this ) );
    },
    componentDidMount: function () {
    this.loadPosts();
    },
    addPost: function (data) {
    var posts = this.state.posts;
    posts.pop();
    posts.unshift( data );
    this.setState({posts: posts});
    this.loadPosts();
    },
    submit: function (data) {
    $.ajax({
    type: 'post',
    url: '/wp-json/posts',
    data: {
    data: data
    },
    beforeSend: function (xhr) {
    xhr.setRequestHeader('X-WP-Nonce', WP_API_Settings.nonce);
    }
    }).done( _.bind( this.addPost, this ) );
    },
    render: function() {
    return (
    <div className="yolo-box">
    <Posts data={this.state.posts} />
    <Form onSubmit={this.submit} />
    </div>
    );
    }
    });

    React.render(<YOLO />, document.getElementById('yolo'));
    </script>
    </div>
    <?php
    }
    }

    new React_YOLO();