mvp commit

index.js

@@ -1,8 +1,8 @@
-const express = require('express');
-const methodOverride = require('method-override');
-const cookieParser = require('cookie-parser');
+const express = require("express");
+const methodOverride = require("method-override");
+const cookieParser = require("cookie-parser");
 
-const pg = require('pg');
+const pg = require("pg");
 
 /**
  * ===================================
@@ -11,33 +11,35 @@ const pg = require('pg');
  */
 
 const configs = {
-  user: 'akira',
-  host: '127.0.0.1',
-  database: 'testdb',
-  port: 5432,
+  user: "lydiacheung",
+  host: "127.0.0.1",
+  database: "tweedrdb",
+  port: 5432
 };
 
 const pool = new pg.Pool(configs);
 
-pool.on('error', function (err) {
-  console.log('idle client error', err.message, err.stack);
+pool.on("error", function(err) {
+  console.log("idle client error", err.message, err.stack);
 });
 
 // Init express app
 const app = express();
 
 // Set up middleware
-app.use(methodOverride('_method'));
+app.use(methodOverride("_method"));
 app.use(cookieParser());
-app.use(express.urlencoded({
-  extended: true
-}));
+app.use(
+  express.urlencoded({
+    extended: true
+  })
+);
 
 // Set react-views to be the default view engine
-const reactEngine = require('express-react-views').createEngine();
-app.set('views', __dirname + '/views');
-app.set('view engine', 'jsx');
-app.engine('jsx', reactEngine);
+const reactEngine = require("express-react-views").createEngine();
+app.set("views", __dirname + "/views");
+app.set("view engine", "jsx");
+app.engine("jsx", reactEngine);
 
 /**
  * ===================================
@@ -46,46 +48,86 @@ app.engine('jsx', reactEngine);
  */
 
 // Root GET request (it doesn't belong in any controller file)
-app.get('/', (request, response) => {
-  response.send('Welcome To Tweedr.');
+app.get("/login", (request, response) => {
+  response.render("user/login");
 });
 
-app.get('/users/new', (request, response) => {
-  response.render('user/newuser');
+app.post("/", (request, response) => {
+  pool.query(
+    "SELECT * FROM users WHERE name = $1 AND password = $2",
+    [request.body.name, request.body.password],
+    (error, queryResult) => {
+      if (queryResult.rowCount > 0) {
+        pool.query(
+          "SELECT content FROM tweeds WHERE user_id = $1",
+          [queryResult.rows[0].name],
+          (e, q) => {
+            console.log(q.rows);
+            response.render("tweeds", {
+              userName: queryResult.rows[0].name,
+              tweedsContent: q.rows
+            });
+          }
+        );
+      } else {
+        response.send("Log in Failed!");
+      }
+    }
+  );
 });
 
-app.post('/users', (request, response) => {
-
-    const queryString = 'INSERT INTO users (name, password) VALUES ($1, $2)';
-    const values = [
-        request.body.name,
-        request.body.password
-    ];
+app.post("/tweeds", (request, response) => {
+  pool.query(
+    "INSERT INTO tweeds (content,user_id) VALUES ($1,$2)",
+    [request.body.tweed, request.body.name],
+    (error, queryResult) => {
+      pool.query(
+        "SELECT content FROM tweeds WHERE user_id = $1",
+        [request.body.name],
+        (e, q) => {
+          console.log(q.rows);
+          response.render("tweeds", {
+            userName: request.body.name,
+            tweedsContent: q.rows
+          });
+        }
+      );
+    }
+  );
+});
 
-    // execute query
-    pool.query(queryString, values, (error, queryResult) => {
-        //response.redirect('/');
-        response.send('user created');
-    });
+app.get("/users/new", (request, response) => {
+  response.render("user/newuser");
 });
 
+app.post("/users", (request, response) => {
+  const queryString = "INSERT INTO users (name, password) VALUES ($1, $2)";
+  const values = [request.body.name, request.body.password];
 
+  // execute query
+  pool.query(queryString, values, (error, queryResult) => {
+    console.log(request.body.name);
+    //response.redirect('/');
+    response.send("user created");
+  });
+});
 
 /**
  * ===================================
  * Listen to requests on port 3000
  * ===================================
  */
 
-const server = app.listen(3000, () => console.log('~~~ Tuning in to the waves of port 3000 ~~~'));
-
-let onClose = function(){
+const server = app.listen(8000, () =>
+  console.log("~~~ Tuning in to the waves of port 8000 ~~~")
+);
 
+let onClose = function() {
   server.close(() => {
-    console.log('Process terminated')
-    pool.end( () => console.log('Shut down db connection pool'));
-  })
+    console.log("Process terminated");
+    pool.end(() => console.log("Shut down db connection pool"));
+  });
 };
 
-process.on('SIGTERM', onClose);
-process.on('SIGINT', onClose);
+process.on("SIGTERM", onClose);
+process.on("SIGINT", onClose);

views/tweeds.jsx

@@ -0,0 +1,59 @@
+var React = require("react");
+
+class tweeds extends React.Component {
+  render() {
+    return (
+      <html>
+        <head>
+          <link
+            rel="stylesheet"
+            href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
+            integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
+            crossOrigin="anonymous"
+          />
+        </head>
+        <body>
+          <form className="user-form" method="POST" action="/tweeds">
+            <div className="form-group col-md-9">
+              <h2>Welcome! {this.props.userName}</h2>
+              <input
+                name="name"
+                type="hidden"
+                className="form-control"
+                value={this.props.userName}
+              />
+              <h4>Add a Tweet</h4>
+            </div>
+            <div className="form-row">
+              <div className="form-group col-md-9">
+                <input name="tweed" type="text" className="form-control" />
+              </div>
+            </div>
+
+            <div className="form-row">
+              <div className="form-group col-md-4">
+                <button type="submit" className="btn btn-primary" name="submit">
+                  Tweed
+                </button>
+              </div>
+            </div>
+
+            <div className="form-row">
+              <div className="form-group col-md-4">
+                {this.props.tweedsContent.map(content => {
+                  return (
+                    <div>
+                      <p>{content.content}</p>
+                    </div>
+                  );
+                })}
+              </div>
+            </div>
+          </form>
+        </body>
+      </html>
+    );
+  }
+}
+
+module.exports = tweeds;

views/user/NewUser.jsx

@@ -4,16 +4,37 @@ class NewUser extends React.Component {
   render() {
     return (
       <html>
-        <head />
+        <head>
+          <link
+            rel="stylesheet"
+            href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
+            integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
+            crossOrigin="anonymous"
+          />
+        </head>
         <body>
           <form className="user-form" method="POST" action="/users">
-            <div className="user-attribute">
-              name<input name="name" type="text" />
+            <div className="form-row">
+              <div className="form-group col-md-9">
+                <h2>Register New User</h2>
+                Email:
+                <input name="name" type="text" className="form-control" />
+              </div>
             </div>
-            <div className="user-attribute">
-              password:<input name="password" type="text" />
+            <div className="form-row">
+              <div className="form-group col-md-9">
+                Password:
+                <input name="password" type="text" className="form-control" />
+              </div>
+            </div>
+
+            <div className="form-row">
+              <div className="form-group col-md-4">
+                <button type="submit" className="btn btn-primary" name="submit">
+                  Sign Up
+                </button>
+              </div>
             </div>
-            <input name="submit" type="submit" />
           </form>
         </body>
       </html>

views/user/login.jsx

@@ -0,0 +1,45 @@
+var React = require("react");
+
+class login extends React.Component {
+  render() {
+    return (
+      <html>
+        <head>
+          <link
+            rel="stylesheet"
+            href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
+            integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
+            crossOrigin="anonymous"
+          />
+        </head>
+        <body>
+          <form className="user-form" method="POST" action="/">
+            <div className="form-row">
+              <div className="form-group col-md-9">
+                <h2>Log In</h2>
+                Email:
+                <input name="name" type="text" className="form-control" />
+              </div>
+            </div>
+            <div className="form-row">
+              <div className="form-group col-md-9">
+                Password:
+                <input name="password" type="text" className="form-control" />
+              </div>
+            </div>
+
+            <div className="form-row">
+              <div className="form-group col-md-4">
+                <button type="submit" className="btn btn-primary" name="submit">
+                  Log In
+                </button>
+              </div>
+            </div>
+          </form>
+        </body>
+      </html>
+    );
+  }
+}
+
+module.exports = login;

views/user/tables.sql

@@ -0,0 +1,11 @@
+CREATE TABLE IF NOT EXISTS users (
+    id SERIAL PRIMARY KEY,
+    name TEXT,
+    password TEXT
+);
+
+CREATE TABLE IF NOT EXISTS tweeds (
+    id SERIAL PRIMARY KEY,
+    content TEXT,
+    user_id TEXT
+);