diff --git a/public/css/searchTable.css b/public/css/searchTable.css new file mode 100644 index 00000000..9339b50a --- /dev/null +++ b/public/css/searchTable.css @@ -0,0 +1,7 @@ +#searchTable { + border: 1px solid #dfdfdf; + padding: 10px; + margin: 10px; + display: inline-block; + border-radius: 4px; +} diff --git a/public/index.html b/public/index.html index 21340e72..0aee80b8 100644 --- a/public/index.html +++ b/public/index.html @@ -10,13 +10,14 @@ + + + + + -
- - +
+
diff --git a/public/scripts/commentBox.js b/public/scripts/commentBox.js new file mode 100644 index 00000000..d56442f6 --- /dev/null +++ b/public/scripts/commentBox.js @@ -0,0 +1,140 @@ +var CommentBox = React.createClass({ + loadCommentsFromServer: function() { + $.ajax({ + type:'GET', + 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 () { + // executes once during the life cycle of the component and sets up the initial state of the component + // if the state of the component is changed, the component will re render. + return {data: []}; + }, + componentDidMount: function() { + // this function is called automatically by react after a component is renderd for the first time. + // the key to dynamic updates is the call to this.setState() + this.loadCommentsFromServer(); + //we pull data form the server after the first render and each "pullInterval" time + 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 Comment = React.createClass({ + rawMarkup: function() { + var rawMarkup = marked(this.props.children.toString(), {sanitize: true}); + return { __html: rawMarkup }; + }, + render: function () { + return ( +
+

+ {this.props.author} +

+ +
+ ); + } +}); +var CommentForm = React.createClass({ + getInitialState: function () { + return {author: '', textInput: ''}; + }, + handleAuthorChange: function (e) { + this.setState({author: e.target.value}); + }, + handleTextChange: function (e) { + this.setState({textInput: e.target.value}); + }, + handleSubmit: function (e) { + debugger; + e.preventDeafult; + var author = this.state.author.trim(); + var text = this.state.textInput.trim(); + if (!author || !text) { + return; + } + //todo: send request to server + this.props.onCommentSubmit({author: author, text: text}); + this.setState({author: '', text: ''}); + }, + render: function () { + return ( +
+
+ + + +
+
+ ); + } +}); + +ReactDOM.render( + , + document.getElementById('commentBox') +); diff --git a/public/scripts/searchTable.js b/public/scripts/searchTable.js new file mode 100644 index 00000000..d02ae41a --- /dev/null +++ b/public/scripts/searchTable.js @@ -0,0 +1,128 @@ + +var ProductCategoryRow = React.createClass({ + render: function() { + return ({this.props.category}); + } +}); + +var ProductRow = React.createClass({ + render: function() { + var name = this.props.product.stocked ? + this.props.product.name : + + {this.props.product.name} + ; + return ( + + {name} + {this.props.product.price} + + ); + } +}); + +var ProductTable = React.createClass({ + render: function() { + var rows = []; + var lastCategory = null; + this.props.products.forEach(function(product) { + // filter table according to the search params + if (product.name.indexOf(this.props.filterText) === -1 || (!product.stocked && this.props.inStockOnly)) { + return; + } + if (product.category !== lastCategory) { + rows.push(); + } + rows.push(); + lastCategory = product.category; + }.bind(this)); + return ( + + + + + + + + {rows} +
NamePrice
+ ); + } +}); + +var SearchBar = React.createClass({ + handleChange: function () { + this.props.onUserInput( + this.refs.filterTextInput.value, + this.refs.inStockOnlyInput.checked + ); + }, + render: function() { + return ( +
+ +

+ + {' '} + Only show products in stock +

+
+ ); + } +}); + +var FilterableProductTable = React.createClass({ + getInitialState: function() { + return { + filterText: '', + inStockOnly: false + }; + }, + handleUserInput: function(filterText, inStockOnly) { + this.setState({ + filterText: filterText, + inStockOnly: inStockOnly + }) + }, + render: function() { + return ( +
+ + +
+ ); + } +}); + +var PRODUCTS = [ + {category: 'Sporting Goods', price: '$49.99', stocked: true, name: 'Football'}, + {category: 'Sporting Goods', price: '$9.99', stocked: true, name: 'Baseball'}, + {category: 'Sporting Goods', price: '$29.99', stocked: false, name: 'Basketball'}, + {category: 'Electronics', price: '$99.99', stocked: true, name: 'iPod Touch'}, + {category: 'Electronics', price: '$399.99', stocked: false, name: 'iPhone 5'}, + {category: 'Electronics', price: '$199.99', stocked: true, name: 'Nexus 7'} +]; + +ReactDOM.render( + , + document.getElementById('searchTable') +); diff --git a/server.go b/server.go deleted file mode 100644 index 934a4cfc..00000000 --- a/server.go +++ /dev/null @@ -1,112 +0,0 @@ -/** - * 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. - */ - -package main - -import ( - "bytes" - "encoding/json" - "fmt" - "io" - "io/ioutil" - "log" - "net/http" - "os" - "sync" - "time" -) - -type comment struct { - ID int64 `json:"id"` - Author string `json:"author"` - Text string `json:"text"` -} - -const dataFile = "./comments.json" - -var commentMutex = new(sync.Mutex) - -// Handle comments -func handleComments(w http.ResponseWriter, r *http.Request) { - // Since multiple requests could come in at once, ensure we have a lock - // around all file operations - commentMutex.Lock() - defer commentMutex.Unlock() - - // Stat the file, so we can find its current permissions - fi, err := os.Stat(dataFile) - if err != nil { - http.Error(w, fmt.Sprintf("Unable to stat the data file (%s): %s", dataFile, err), http.StatusInternalServerError) - return - } - - // Read the comments from the file. - commentData, err := ioutil.ReadFile(dataFile) - if err != nil { - http.Error(w, fmt.Sprintf("Unable to read the data file (%s): %s", dataFile, err), http.StatusInternalServerError) - return - } - - switch r.Method { - case "POST": - // Decode the JSON data - var comments []comment - if err := json.Unmarshal(commentData, &comments); err != nil { - http.Error(w, fmt.Sprintf("Unable to Unmarshal comments from data file (%s): %s", dataFile, err), http.StatusInternalServerError) - return - } - - // Add a new comment to the in memory slice of comments - comments = append(comments, comment{ID: time.Now().UnixNano() / 1000000, Author: r.FormValue("author"), Text: r.FormValue("text")}) - - // Marshal the comments to indented json. - commentData, err = json.MarshalIndent(comments, "", " ") - if err != nil { - http.Error(w, fmt.Sprintf("Unable to marshal comments to json: %s", err), http.StatusInternalServerError) - return - } - - // Write out the comments to the file, preserving permissions - err := ioutil.WriteFile(dataFile, commentData, fi.Mode()) - if err != nil { - http.Error(w, fmt.Sprintf("Unable to write comments to data file (%s): %s", dataFile, err), http.StatusInternalServerError) - return - } - - w.Header().Set("Content-Type", "application/json") - w.Header().Set("Cache-Control", "no-cache") - w.Header().Set("Access-Control-Allow-Origin", "*") - io.Copy(w, bytes.NewReader(commentData)) - - case "GET": - w.Header().Set("Content-Type", "application/json") - w.Header().Set("Cache-Control", "no-cache") - w.Header().Set("Access-Control-Allow-Origin", "*") - // stream the contents of the file to the response - io.Copy(w, bytes.NewReader(commentData)) - - default: - // Don't know the method, so error - http.Error(w, fmt.Sprintf("Unsupported method: %s", r.Method), http.StatusMethodNotAllowed) - } -} - -func main() { - port := os.Getenv("PORT") - if port == "" { - port = "3000" - } - http.HandleFunc("/api/comments", handleComments) - http.Handle("/", http.FileServer(http.Dir("./public"))) - log.Println("Server started: http://localhost:" + port) - log.Fatal(http.ListenAndServe(":"+port, nil)) -} diff --git a/server.php b/server.php deleted file mode 100644 index 75fae215..00000000 --- a/server.php +++ /dev/null @@ -1,53 +0,0 @@ - round(microtime(true) * 1000), - 'author' => $_POST['author'], - 'text' => $_POST['text'] - ]; - - $comments = json_encode($commentsDecoded, JSON_PRETTY_PRINT); - file_put_contents('comments.json', $comments); - } - header('Content-Type: application/json'); - header('Cache-Control: no-cache'); - header('Access-Control-Allow-Origin: *'); - echo $comments; - } else { - return false; - } -} diff --git a/server.pl b/server.pl deleted file mode 100644 index c3212b9c..00000000 --- a/server.pl +++ /dev/null @@ -1,38 +0,0 @@ -# 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. - -use Time::HiRes qw(gettimeofday); -use Mojolicious::Lite; -use Mojo::JSON qw(encode_json decode_json); - -app->static->paths->[0] = './public'; - -any '/' => sub { $_[0]->reply->static('index.html') }; - -any [qw(GET POST)] => '/api/comments' => sub { - my $self = shift; - my $comments = decode_json (do { local(@ARGV,$/) = 'comments.json';<> }); - $self->res->headers->cache_control('no-cache'); - $self->res->headers->access_control_allow_origin('*'); - - if ($self->req->method eq 'POST') - { - push @$comments, { - id => int(gettimeofday * 1000), - author => $self->param('author'), - text => $self->param('text'), - }; - open my $FILE, '>', 'comments.json'; - print $FILE encode_json($comments); - } - $self->render(json => $comments); -}; -my $port = $ENV{PORT} || 3000; -app->start('daemon', '-l', "http://*:$port"); diff --git a/server.py b/server.py deleted file mode 100644 index 5cf598df..00000000 --- a/server.py +++ /dev/null @@ -1,36 +0,0 @@ -# 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. - -import json -import os -import time -from flask import Flask, Response, request - -app = Flask(__name__, static_url_path='', static_folder='public') -app.add_url_rule('/', 'root', lambda: app.send_static_file('index.html')) - -@app.route('/api/comments', methods=['GET', 'POST']) -def comments_handler(): - - with open('comments.json', 'r') as file: - comments = json.loads(file.read()) - - if request.method == 'POST': - newComment = request.form.to_dict() - newComment['id'] = int(time.time() * 1000) - comments.append(newComment) - - with open('comments.json', 'w') as file: - file.write(json.dumps(comments, indent=4, separators=(',', ': '))) - - return Response(json.dumps(comments), mimetype='application/json', headers={'Cache-Control': 'no-cache', 'Access-Control-Allow-Origin': '*'}) - -if __name__ == '__main__': - app.run(port=int(os.environ.get("PORT",3000))) diff --git a/server.rb b/server.rb deleted file mode 100644 index 698f4339..00000000 --- a/server.rb +++ /dev/null @@ -1,49 +0,0 @@ -# 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. - -require 'webrick' -require 'json' - -# default port to 3000 or overwrite with PORT variable by running -# $ PORT=3001 ruby server.rb -port = ENV['PORT'] ? ENV['PORT'].to_i : 3000 - -puts "Server started: http://localhost:#{port}/" - -root = File.expand_path './public' -server = WEBrick::HTTPServer.new Port: port, DocumentRoot: root - -server.mount_proc '/api/comments' do |req, res| - comments = JSON.parse(File.read('./comments.json', encoding: 'UTF-8')) - - if req.request_method == 'POST' - # Assume it's well formed - comment = { id: (Time.now.to_f * 1000).to_i } - req.query.each do |key, value| - comment[key] = value.force_encoding('UTF-8') unless key == 'id' - end - comments << comment - File.write( - './comments.json', - JSON.pretty_generate(comments, indent: ' '), - encoding: 'UTF-8' - ) - end - - # always return json - res['Content-Type'] = 'application/json' - res['Cache-Control'] = 'no-cache' - res['Access-Control-Allow-Origin'] = '*' - res.body = JSON.generate(comments) -end - -trap('INT') { server.shutdown } - -server.start