Merge branch 'master' into user_subscription

twistter-frontend/src/App.js

@@ -1,181 +1,29 @@
 /* eslint-disable */
 import React, { Component } from 'react';
-import logo from './images/twistter-logo.png';
-import { BrowserRouter as Router, Route, Switch} from 'react-router-dom';
+
 import './App.css';
 
-//TODO: reorganize imports
+import { BrowserRouter as Router } from 'react-router-dom';
+import Route from 'react-router-dom/Route';
 
-//components
-import Navbar from './components/layout/NavBar';
 
-// pages
-import user from './pages/user';
-
-var validEmail = true;
-var validUsername = false;
-var validPassword = false;
-var passwordsMatch = false;
-
-const emailBlur = () => {
-  //var email = document.getElementById("email");
-
-  /*if() {
-    validEmail = true;
-  }
-  else {
-    validEmail = false;
-    alert("Email is invalid.");
-  }*/
-
-  if(validEmail && validUsername && validPassword && passwordsMatch) {
-    document.getElementById("submit").disabled = false;
-  }
-  else {
-    document.getElementById("submit").disabled = true;
-  }
-}
-
-const usernameBlur = () => {
-  var username = document.getElementById("username");
-
-  if(username.value.length >= 3 && username.value.length <= 50) {
-    validUsername = true;
-  }
-  else {
-    validUsername = false;
-    alert("Username must be between 3 and 50 characters long.");
-  }
-
-  if(validEmail && validUsername && validPassword && passwordsMatch) {
-    document.getElementById("submit").disabled = false;
-  }
-  else {
-    document.getElementById("submit").disabled = true;
-  }
-}
-
-const passwordBlur = () => {
-  var password = document.getElementById("password");
-
-  if(password.value.length >= 8 && password.value.length <= 20) {
-    validPassword = true;
-  }
-  else {
-    validPassword = false;
-    alert("Password must be between 8 and 20 characters long.");
-  }
-
-  if(validEmail && validUsername && validPassword && passwordsMatch) {
-    document.getElementById("submit").disabled = false;
-  }
-  else {
-    document.getElementById("submit").disabled = true;
-  }
-}
-
-const confirmPasswordBlur = () => {
-  var password = document.getElementById("password");
-  var confirmPassword = document.getElementById("confirmPassword");
-
-  if(password.value === confirmPassword.value) {
-    passwordsMatch = true;
-  }
-  else {
-    passwordsMatch = false;
-    alert("Passwords must match.");
-  }
-
-  if(validEmail && validUsername && validPassword && passwordsMatch) {
-    document.getElementById("submit").disabled = false;
-  }
-  else {
-    document.getElementById("submit").disabled = true;
-  }
-}
+import home from './Home.js';
+import register from './Register.js';
+import login from './Login.js';
 
 class App extends Component {
   render() {
     return (
       <Router>
-        <Navbar />
-        <div className='container'>
-          <Switch>
-          
-          
-          <Route path="/" exact render={
-            () => {
-              return (
-                <div>
-                  <div>
-                    <img src={logo} className="app-logo" alt="logo" />
-                    <br/><br/>
-                    <b>Welcome to Twistter!</b> 
-                    <br/><br/>
-                    <b>See the most interesting topics people are following right now.</b> 
-                  </div>
 
-                  <br/><br/><br/><br/>
 
-                  <div>                    
-                    <b>Join today or sign in if you already have an account.</b> 
-                    <br/><br/>
-                    <button class="authButtons register"><a href="/register">Sign up</a></button> 
-                    <br/><br/>
-                    <button class="authButtons login"><a href="/login">Sign in</a></button>
-                  </div>
-                </div>
-              )
-            }
-          }/>
+        <div className="app">
+          <Route exact path="/" component={home}/>
+          <Route exact path="/register" component={register}/>
+          <Route exact path="/login" component={login}/>
+          <Route exact path="/user" component={user}/>
+        </div>
 
-          <Route path="/register" exact render={
-            () => {
-              return (
-                <div>
-                  <img src={logo} className="app-logo" alt="logo" />
-                  <br/><br/>
-                  <b>Create your account</b>
-                  <br/><br/>
-                  <input class="authInput" id="email" placeholder="Email" onBlur={() => emailBlur()}></input>
-                  <br/><br/>
-                  <input class="authInput" id="username" placeholder="Username" onBlur={() => usernameBlur()}></input>
-                  <br/><br/>
-                  <input class="authInput" id="password" placeholder="Password" onBlur={() => passwordBlur()}></input>
-                  <br/><br/>
-                  <input class="authInput" id="confirmPassword" placeholder="Confirm Password" onBlur={() => confirmPasswordBlur()}></input>
-                  <br/><br/>
-                  <button class="authButtons register" id="submit" onclick="" disabled>Sign up</button>
-                </div>
-              )
-            }
-          }/>
-
-          <Route path="/login" exact render={
-            () => {
-              return (
-                <div>
-                  <img src={logo} className="app-logo" alt="logo" />
-                  <br/><br/>
-                  <b>Log in to Twistter</b>
-                  <br/><br/>
-                  <input class="authInput" placeholder="Username or email"></input>
-                  <br/><br/>
-                  <input class="authInput" placeholder="Password"></input>
-                  <br/><br/>
-                  <button class="authButtons register" onclick="">Sign in</button>
-                </div>
-              )
-            }
-          }/>
-
-            <Route path="/user" exact component={user} />
-          </Switch>
-
-        
-        
-        
-          </div>
       </Router>
     );
   }

twistter-frontend/src/Home.js

@@ -0,0 +1,37 @@
+import React, { Component } from 'react';
+import './App.css';
+
+import logo from './twistter-logo.png';
+
+
+class Home extends Component {
+  render() {
+    return (
+      <div>
+        <div>
+          <img src={logo} className="app-logo" alt="logo" />
+          <br/><br/>
+          <b>Welcome to Twistter!</b> 
+          <br/><br/>
+          <b>See the most interesting topics people are following right now.</b> 
+        </div>
+
+        <br/><br/><br/><br/>
+
+        <div>                    
+          <b>Join today or sign in if you already have an account.</b> 
+          <br/><br/>
+          <form action="./register">
+            <button className="authButtons register">Sign up</button> 
+          </form>
+          <br/>
+          <form action="./login">
+            <button className="authButtons login">Sign in</button>
+          </form>
+        </div>
+      </div>
+    );
+    }
+  }
+
+export default Home;

twistter-frontend/src/Login.js

@@ -0,0 +1,27 @@
+import React, { Component } from 'react';
+import './App.css';
+
+import logo from './twistter-logo.png';
+import TextField from '@material-ui/core/TextField';
+
+import axios from 'axios';
+
+class Login extends Component {
+  render() {
+    return (
+      <div>
+        <img src={logo} className="app-logo" alt="logo" />
+        <br/><br/>
+        <b>Log in to Twistter</b>
+        <br/><br/>
+        <TextField className="authInput" id="email" name="email" label="Email" />
+        <br/><br/>
+        <TextField className="authInput" id="password" name="password" label="Password" />
+        <br/><br/>
+        <button className="authButtons register" type="submit">Sign in</button>
+      </div>
+    );
+  };
+}
+
+export default Login;

twistter-frontend/src/Register.js

@@ -0,0 +1,31 @@
+import React, { Component } from 'react';
+import './App.css';
+
+import logo from './twistter-logo.png';
+import TextField from '@material-ui/core/TextField';
+
+//import axios from 'axios';
+
+class Register extends Component {
+  render() {
+    return (
+      <div>
+        <img src={logo} className="app-logo" alt="logo" />
+        <br/><br/>
+        <b>Create your account</b>
+        <br/><br/>
+        <TextField className="authInput" id="email" name="email" label="Email" />
+        <br/><br/>
+        <TextField className="authInput" id="username" name="username" label="Username" />
+        <br/><br/>
+        <TextField className="authInput" id="password" name="password" label="Password" />
+        <br/><br/>
+        <TextField className="authInput" id="confirmPassword" name="confirmPassword" label="Confirm Password" />
+        <br/><br/>
+        <button class="authButtons register" id="submit">Sign up</button>
+      </div>
+    );
+  }
+}
+
+export default Register;

twistter-frontend/src/Writing_Microblogs.js

@@ -0,0 +1,72 @@
+import React, { Component } from "react";
+import { BrowserRouter as Router } from 'react-router-dom';
+import Route from 'react-router-dom/Route';
+
+
+class Writing_Microblogs extends Component {
+    
+    constructor(props) {
+        super(props);
+        this.state = {
+            value: '',
+            title: '',
+            characterCount: 10
+            
+        };
+        
+
+        this.handleChange = this.handleChange.bind(this);
+        this.handleSubmit = this.handleSubmit.bind(this);
+        this.handleChangeforPost = this.handleChangeforPost.bind(this);
+    }
+
+    handleChange(event) {
+        this.setState( {title: event.target.value });
+    }
+
+    handleSubmit(event) {
+        alert('A title for the microblog was inputted: ' + this.state.title + '\nA microblog was posted: ' + this.state.value);
+        event.preventDefault();
+    }
+
+    handleChangeforPost(event) {
+        this.setState({value: event.target.value })
+    }
+
+    handleChangeforCharacterCount(event) {
+        const charCount = event.target.value.length
+        const charRemaining = 10 - charCount
+        this.setState({characterCount: charRemaining })
+    }
+
+
+    render() {
+        return (
+            <div>
+            <div style={{ width: "200px", height: "50px", marginTop: "180px", marginLeft: "30px" }}>         
+             <form>
+                    <input type="text" placeholder="Enter Microblog Title" value={this.state.title} onChange={this.handleChange} />
+            </form>
+             </div>
+             
+             <div style={{ width: "200px", marginLeft: "50px"}}>        
+                <form onSubmit={this.handleSubmit}>
+                    <textarea value={this.state.value} maxLength="10" placeholder= "Write Microblog here..." 
+                        onChange = { (e) => { this.handleChangeforPost(e); this.handleChangeforCharacterCount(e) } } cols={40} rows={20} />      
+                 <div style={{ fontSize: "14px", marginRight: "-100px"}} >
+                    <p2>Characters Left: {this.state.characterCount}</p2>
+                 </div>
+                 <div style={{ marginRight: "-100px"  }}>        
+                    <button onClick>Share Post</button> 
+                 </div>
+                </form>
+             </div>
+             </div>
+            
+        );
+    }
+
+
+}
+
+export default Writing_Microblogs;

twistter-frontend/src/index.css

@@ -1,5 +0,0 @@
-body {
-  margin: 0;
-  padding: 0;
-  font-family: sans-serif;
-}

twistter-frontend/src/index.js

@@ -1,7 +1,6 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import App from './App';
-import './index.css';
 
 ReactDOM.render(
   <App />,