From 77822c0871794563ae729d2866349be8dfaa8b1c Mon Sep 17 00:00:00 2001 From: liebeskind Date: Fri, 23 Mar 2018 15:15:46 +0800 Subject: [PATCH] Catching up --- comments.json | 14 +- public/index.html | 143 ++++++++++++++++++- public/scripts/example.js | 289 ++++++++++++++++++++------------------ 3 files changed, 303 insertions(+), 143 deletions(-) diff --git a/comments.json b/comments.json index 28816136..7ecb89d6 100644 --- a/comments.json +++ b/comments.json @@ -12,16 +12,26 @@ { "id": 1464988635157, "author": "ben", - "text": "*abc*" + "text": "*abc* 123" }, { "id": 1464988636500, "author": "ben", - "text": "*abc*" + "text": "*abc* woeifjwef" }, { "id": 1464988717637, "author": "evil", "text": "alert(1)" + }, + { + "id": 1475871802860, + "author": "erg", + "text": "werwer" + }, + { + "id": 1475871806673, + "author": "vwer", + "text": "qweqwe" } ] \ No newline at end of file diff --git a/public/index.html b/public/index.html index eb201204..3b589d1b 100644 --- a/public/index.html +++ b/public/index.html @@ -13,8 +13,149 @@
- diff --git a/public/scripts/example.js b/public/scripts/example.js index 6493fea9..3cb4150a 100644 --- a/public/scripts/example.js +++ b/public/scripts/example.js @@ -1,147 +1,156 @@ -/** - * This file provided by Facebook is for non-commercial testing and evaluation - * purposes only. Facebook reserves all rights not expressly granted. - * - * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR - * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, - * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL - * FACEBOOK BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN - * ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION - * WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. - */ +(function (window) { -var Comment = React.createClass({ - rawMarkup: function() { - var md = new Remarkable(); - var rawMarkup = md.render(this.props.children.toString()); - return { __html: rawMarkup }; - }, + var data = [ + {id: 1, author: "Pete Hunt", text: "This is one comment"}, + {id: 2, author: "Jordan Walke", text: "This is *another* comment"} + ]; - render: function() { - return ( -
-

- {this.props.author} -

- -
- ); - } -}); + var Comment = React.createClass({ + rawMarkup: function() { + var md = new Remarkable(); + var rawMarkup = md.render(this.props.children.toString()); + return { __html: rawMarkup }; + }, + render: function() { + return ( +
+

+ {this.props.author} +

+ {} +
+ ); + } + }); -var CommentBox = React.createClass({ - loadCommentsFromServer: function() { - $.ajax({ - url: this.props.url, - dataType: 'json', - cache: false, - success: function(data) { - this.setState({data: data}); - }.bind(this), - error: function(xhr, status, err) { - console.error(this.props.url, status, err.toString()); - }.bind(this) - }); - }, - handleCommentSubmit: function(comment) { - var comments = this.state.data; - // Optimistically set an id on the new comment. It will be replaced by an - // id generated by the server. In a production application you would likely - // not use Date.now() for this and would have a more robust system in place. - comment.id = Date.now(); - var newComments = comments.concat([comment]); - this.setState({data: newComments}); - $.ajax({ - url: this.props.url, - dataType: 'json', - type: 'POST', - data: comment, - success: function(data) { - this.setState({data: data}); - }.bind(this), - error: function(xhr, status, err) { - this.setState({data: comments}); - console.error(this.props.url, status, err.toString()); - }.bind(this) - }); - }, - getInitialState: function() { - return {data: []}; - }, - componentDidMount: function() { - this.loadCommentsFromServer(); - setInterval(this.loadCommentsFromServer, this.props.pollInterval); - }, - render: function() { - return ( -
-

Comments

- - -
- ); - } -}); + var CommentList = React.createClass({ + render: function() { + var commentNodes = this.props.data.map(function(comment) { + return ( + + {comment.text} + + ); + }); + return ( +
+ {commentNodes} +
+ ); + } + }); -var CommentList = React.createClass({ - render: function() { - var commentNodes = this.props.data.map(function(comment) { - return ( - - {comment.text} - + var CommentForm = React.createClass({ + getInitialState: function() { + return {author: '', text: ''}; + }, + handleAuthorChange: function(e) { + this.setState({author: e.target.value}); + }, + handleTextChange: function(e) { + this.setState({text: e.target.value}); + }, + handleSubmit: function(e) { + e.preventDefault(); + var author = this.state.author.trim(); + var text = this.state.text.trim(); + if (!text || !author) { + return; + } + // TODO: send request to the server + this.props.onCommentSubmit({author: author, text: text}); + this.setState({author: '', text: ''}); + }, + render: function() { + return ( +
+ + + +
+ ); + } + }); + + var CommentBox = React.createClass({ + loadCommentsFromServer: function() { + //replace with firebase.on or once + $.ajax({ + url: this.props.url, + dataType: 'json', + cache: false, + success: function(data) { + //updates the state whenever there is new data + this.setState({data: data}); + }.bind(this), + error: function(xhr, status, err) { + console.error(this.props.url, status, err.toString()); + }.bind(this) + }); + }, + handleCommentSubmit: function(comment) { + var comments = this.state.data; + // Optimistically set an id on the new comment. It will be replaced by an + // id generated by the server. In a production application you would likely + // not use Date.now() for this and would have a more robust system in place. + comment.id = Date.now(); + var newComments = comments.concat([comment]); + this.setState({data: newComments}); + $.ajax({ + url: this.props.url, + dataType: 'json', + type: 'POST', + data: comment, + success: function(data) { + this.setState({data: data}); + }.bind(this), + error: function(xhr, status, err) { + console.error(this.props.url, status, err.toString()); + this.setState({data: comments}); //If ajax fails, set to original state + }.bind(this) + }); + }, + getInitialState: function() { + return {data: []}; + }, + componentDidMount: function() { + this.loadCommentsFromServer(); + //Won't need polling with firebase. + setInterval(this.loadCommentsFromServer, this.props.pollInterval); + }, + render: function() { + return ( +
+

Comments

+ + +
+ ); + } + }); + + ReactDOM.render( + , + document.getElementById('content') ); - }); - return ( -
- {commentNodes} -
- ); - } -}); -var CommentForm = React.createClass({ - getInitialState: function() { - return {author: '', text: ''}; - }, - handleAuthorChange: function(e) { - this.setState({author: e.target.value}); - }, - handleTextChange: function(e) { - this.setState({text: e.target.value}); - }, - handleSubmit: function(e) { - e.preventDefault(); - var author = this.state.author.trim(); - var text = this.state.text.trim(); - if (!text || !author) { - return; - } - this.props.onCommentSubmit({author: author, text: text}); - this.setState({author: '', text: ''}); - }, - render: function() { - return ( -
- - - -
- ); - } -}); + // declare + var videoFeed = {}; + + // your sdk init function + videoFeed.init = function () { + // ... + }; + + // define your namespace videoFeed + window.videoFeed = videoFeed; -ReactDOM.render( - , - document.getElementById('content') -); +})(window, undefined); \ No newline at end of file