wdi-sg · jasonwongys · Jan 13, 2019 · Jan 15, 2019
diff --git a/default.jsx b/default.jsx
@@ -0,0 +1,38 @@
+var React = require("react");
+
+class Default extends React.Component {
+    render() {
+        return (
+            <html>
+                <head>
+                    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossOrigin="anonymous"/>
+                </head>
+                <body>
+                <div className="container-fluid">
+                    <nav className="navbar navbar-expand-lg navbar-light bg-light">
+                      <button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
+                        <span className="navbar-toggler-icon"></span>
+                      </button>
+                      <div className="collapse navbar-collapse" id="navbarNavDropdown">
+                        <ul className="navbar-nav">
+                          <li className="nav-item active">
+                            <a className="nav-link" href="/tweets">Home <span className="sr-only">(current)</span></a>
+                          </li>
+
+                          <li className="nav-item">
+                            <a className="nav-link" href="/user/logout">Logout</a>
+                          </li>
+
+                        </ul>
+                      </div>
+                    </nav>
+
+                    {this.props.children}
+                </div>
+                </body>
+            </html>
+        );
+    }
+}
+
+module.exports = Default;
diff --git a/index.js b/index.js
@@ -11,10 +11,11 @@ const pg = require('pg');
  */
 
 const configs = {
-  user: 'akira',
+  user: 'jasonw',
   host: '127.0.0.1',
-  database: 'testdb',
+  database: 'tweedr',
   port: 5432,
+  password: '1234'
 };
 
 const pool = new pg.Pool(configs);
@@ -45,30 +46,103 @@ app.engine('jsx', reactEngine);
  * ===================================
  */
 
-// Root GET request (it doesn't belong in any controller file)
+//Get the login form for user to login
 app.get('/', (request, response) => {
-  response.send('Welcome To Tweedr.');
+  response.render('login');
 });
 
-app.get('/users/new', (request, response) => {
-  response.render('user/newuser');
+app.post('/', (request, response) => {
+
+    // if the user name and password are the same as in the DB, log them in
+    let queryString = "SELECT * FROM usersInfo WHERE name='"+request.body.name+"'";
+    pool.query(queryString, (err, queryResponse) => {
+        //response.send('hellooooo');
+
+        console.log( queryResponse.rows );
+        // if the user doesnt exist
+        if( queryResponse.rows.length === 0 ){
+            console.log("user doesnt exist");
+        }else{
+            console.log("user exists!!!!!!");
+            const user = queryResponse.rows[0];
+            let password = user.password;
+            if( password == request.body.password ){
+                //password is correct
+                console.log('PASSWORD CORRECT TOO');
+                response.cookie('loggedin', 'true');
+                res
+            }else{
+                // password is incorrect
+                console.log('PASSWORD not correct');
+                response.send("Password is incorrect");
+            }
+        }
+
+    })
 });
 
+app.get('/user/logout', (request, response) => {
+
+  response.clearCookie('loggedin');
+  response.send('you are logged out');
+})
+
+
+
+// Root GET request (it doesn't belong in any controller file)
+// Get Form for login page
+
+
+//Creates a form to create a new user
+/*app.get('/users/new', (request, response) => {
+  response.render('user/newuser');
+});*/
+
+
+//Create a user and store in database
 app.post('/users', (request, response) => {
 
-    const queryString = 'INSERT INTO users (name, password) VALUES ($1, $2)';
+    const queryString = 'INSERT INTO usersInfo (name, password) VALUES ($1, $2)';
     const values = [
         request.body.name,
         request.body.password
     ];
 
     // execute query
     pool.query(queryString, values, (error, queryResult) => {
-        //response.redirect('/');
-        response.send('user created');
+        response.redirect('/user/newuser', {usersInfo: queryResult.rows});
+        //response.send('user created');
     });
 });
 
+//Display all tweets
+app.get('/tweets', (req, res) => {
+    const queryString = 'SELECT * FROM tweets';
+
+    pool.query(queryString, (err, queryResult) => {
+        if (err) {
+            console.log('Error', error);
+        } else {
+            //console.log(" Result ", queryResult.rows);
+            res.render("tweets", {tweets: queryResult.rows});
+        }
+    })
+})
+
+// Adding tweets
+app.post('/tweets', (request, response) => {
+    let queryString = 'INSERT INTO tweets (userTweet, usersInfo_Id, name) VALES ($1,$2,$3)';
+
+    const values = [request.body.text, request.body.body.usersInfo_Id,request.body.name];
+
+    pool.query(queryString, values, (err,queryResult) => {
+        if (err) {
+            console.log("Error", err);
+        }
+        console.log("tweets", {tweets: queryResult.rows});
+        //response.redirect('/home');
+    });
+});
 
 
 /**

diff --git a/package.json b/package.json
@@ -19,5 +19,16 @@
     "react": "^16.3.2",
     "react-dom": "^16.3.2",
     "sha256": "^0.2.0"
-  }
+  },
+  "description": "Let's make a cool new app called TWEEDR!! Not Twitter, geez...",
+  "devDependencies": {},
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/jasonwongys/tweedr.git"
+  },
+  "author": "",
+  "bugs": {
+    "url": "https://github.com/jasonwongys/tweedr/issues"
+  },
+  "homepage": "https://github.com/jasonwongys/tweedr#readme"
 }
diff --git a/seed.sql b/seed.sql
@@ -0,0 +1,5 @@
+INSERT INTO usersInfo (name, password) VALUES('Jw','123');
+INSERT INTO usersInfo (name, password) VALUES('GR', '222');
+
+INSERT INTO tweets (userTweet, usersInfo_id, name) VALUES ('One fine day')
+INSERT INTO tweets (userTweet, usersInfo_id, name) VALUES ('Day one in gym');
diff --git a/tables.sql b/tables.sql
@@ -0,0 +1,13 @@
+CREATE TABLE IF NOT EXISTS usersInfo (
+    id SERIAL PRIMARY KEY,
+    name TEXT,
+    password TEXT
+);
+
+CREATE TABLE IF NOT EXISTS tweets (
+    id SERIAL PRIMARY KEY,
+    userTweet TEXT,
+    usersInfo_id INTEGER,
+    name TEXT
+);
+
diff --git a/tweets.jsx b/tweets.jsx
@@ -0,0 +1,40 @@
+var React = require("react");
+var Default = require("default");
+
+class Tweets extends React.Component {
+    render() {
+        let tweetsInfo = this.props.tweets.map( (tweet, index) => { return (
+            <p> <a href={tweet.username} className="text-muted" name="name"><strong>{tweet.name}</strong> <small name="username"><i>@{tweet.username}</i></small></a> <br/>{tweet.content}</p>
+
+            );
+        });
+        return (
+            <html>
+                <head>
+
+                </head>
+                    <body>
+                    <Default>
+                        <form method="POST" action="/tweets">
+
+                                <div >
+                                    <textarea className="form-control" id="exampleFormControlTextarea1" name="newtweet" rows="10" placeholder="What's happening?"></textarea>
+                                  </div>
+                                  <button type="submit" className="btn btn-primary">Tweet</button>
+                            </form>
+
+                            <div className="col-sm-8">
+                                <ul className="list-group list-group-flush">
+                                  <li className="list-group-item"><strong>Tweets</strong></li>
+                                  <li className="list-group-item">{tweetsInfo}</li>
+                                </ul>
+                            </div>
+                        </Default>
+                    </body>
+            </html>
+            )
+    }
+
+}
+
+module.exports = Tweet;
diff --git a/views/home.jsx b/views/home.jsx
@@ -0,0 +1,22 @@
+var React = require("react");
+var Default = require("default");
+// this form creates a new user account and sends to the Database
+class Home extends React.Component {
+  render() {
+    return (
+      <html>
+        <head>
+            <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossOrigin="anonymous"/>
+        </head>
+        <body>
+            <Default>
+                <a className="btn btn-primary" href="/tweets" role="button">Follow</a>
+            </Default>
+
+        </body>
+      </html>
+    );
+  }
+}
+
+module.exports = Home;
diff --git a/views/login.jsx b/views/login.jsx
@@ -0,0 +1,55 @@
+var React = require("react");
+
+class Login extends React.Component {
+    render() {
+        return (
+            <html>
+                <head>
+                <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossOrigin="anonymous"/>
+                </head>
+                    <body>
+                    <div class="container text-center pt-5 w-75" >
+                        <h2>Welcome to Tweedr</h2>
+                            <div className="container">
+                              <div className="row">
+                                <div className="col pt-5">
+                                    <h4>Register</h4>
+                                        <form action="/users" method="POST">
+                                            <div className="form-group">
+                                                <input name="name" placeholder="Name" className="form-control"/> <br/>
+                                                <input name="reguser" placeholder="Choose a username" className="form-control"/> <br/>
+                                                <input name="regpass" type="password" id="inputPassword5" className="form-control" aria-describedby="passwordHelpBlock" placeholder="Password"/>
+                                                <small id="passwordHelpBlock" class="form-text text-muted">
+                                                  Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji.
+                                                </small> <br/>
+
+
+                                                <input name="submit" type="submit" className="btn btn-primary"/>
+                                            </div>
+                                        </form>
+                                </div>
+                                    <div className="col pt-5">
+                                        <h4>Login</h4>
+                                            <form action="/" method="POST">
+
+                                                    <input name="username" placeholder="Username" className="form-control"/> <br/>
+                                                    <input name="password" type="password" id="inputPassword5" className="form-control" aria-describedby="passwordHelpBlock" placeholder="Password"/><br/>
+
+                                                            <input className="form-check-input" type="checkbox" id="autoSizingCheck"/>
+
+
+                                                    <input name="submit" type="submit" className="btn btn-primary"/>
+
+                                            </form>
+                                    </div>
+                                </div>
+                                </div>
+                            </div>
+                    </body>
+            </html>
+            )
+    }
+
+}
+
+module.exports = Login;
diff --git a/views/user/NewUser.jsx b/views/user/NewUser.jsx
diff --git a/views/user/newuser.jsx b/views/user/newuser.jsx
@@ -0,0 +1,23 @@
+var React = require("react");
+var Default = requuire("default");
+// this form creates a new user account and sends to the Database
+class NewUser extends React.Component {
+  render() {
+    return (
+      <html>
+        <head>
+            <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossOrigin="anonymous"/>
+        </head>
+        <body>
+
+            <Default>
+                <h3>Welcome!</h3>
+                <a className="btn btn-primary" href="/tweets" role="button">Get started!</a>
+            </Default>
+        </body>
+      </html>
+    );
+  }
+}
+
+module.exports = NewUser;