Revert "Can successfully register and login in UI"

This reverts commit 893cad7e7e.

reverting commit

twistter-frontend/src/pages/Home.js

@@ -1,41 +1,37 @@
 import React, { Component } from 'react';
-import axios from 'axios'; 
+import '../App.css';
 
-import Grid from '@material-ui/core/Grid';
+import logo from '../images/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/>
 
-
-class home extends Component {
-    state = {
-        screams: null
+        <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>
+    );
     }
-    componentDidMount() {
-        axios.get('/screams')
-        .then(res => {
-            console.log(res.data);
-            this.setState({
-                screams: res.data
-            });
-        })
-        .catch(err => console.log(err));
-    }
-    render() {
-        let recentScreamsMarkup = this.state.screams ? (
-            this.state.screams.map(scream => <p>{scream.body}</p>)
-        ) : (<p>Loading...</p>)
-        return (
-            <Grid container spacing={16}>
-                <Grid item sm={8} xs={12}>
-                    {recentScreamsMarkup}
-                </Grid>
-                <Grid item sm={4} xs={12}>
-                    <p>Profile</p>
-                </Grid>
-            </Grid>
-        );
-    };
-}
+  }
 
-export default home;
+export default Home;

twistter-frontend/src/pages/Login.js

@@ -1,108 +1,26 @@
+/* eslint-disable */
 import React, { Component } from 'react';
-import axios from 'axios'; 
-import PropTypes from 'prop-types';
-
-import Grid from '@material-ui/core/Grid';
-import Typography from '@material-ui/core/Typography';
-import TextField from '@material-ui/core/TextField';
-import Button from '@material-ui/core/Button';
-import withStyles from '@material-ui/core/styles/withStyles';
+import '../App.css';
 
 import logo from '../images/twistter-logo.png';
+import TextField from '@material-ui/core/TextField';
 
+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>
+    );
+  };
+}
 
-
-
-
-const styles = {
-    form: {
-        textAlign: 'center'
-    },
-    image: {
-        margin: '20px auto 20px auto'
-    },
-    pageTitle: {
-        margin: '20px auto 20px auto'
-    },
-    textField: {
-        margin: '20px auto 20px auto'
-    },
-    button: {
-        margin: '20px auto 20px auto'
-    },
-    customError: {
-        color: 'red',
-        fontSize: '0.8rem'
-    }
-};
-
-class login extends Component {
-    constructor() {
-        super();
-        this.state = {
-            email: '',
-            password: '',
-            errors: {}
-        };
-    };
-    handleSubmit = (event) => {
-        event.preventDefault();
-        const userData = {
-            email: this.state.email,
-            password: this.state.password
-        };
-        axios.post('/login', userData)
-        .then(res => {
-            console.log(res.data);
-            localStorage.setItem('firebaseIdToken', `Bearer ${res.data.token}`);
-            this.props.history.push('/');
-        })
-        .catch(err => {
-            this.setState({
-                errors: err.response.data
-            });
-        });
-    };
-    handleChange = (event) => {
-        this.setState({
-            [event.target.name]: event.target.value
-        });
-    };
-    render() {
-        const { classes } = this.props;
-        const { errors } = this.state;
-        return (
-            <Grid container className={classes.form}>
-                <Grid item sm>
-                    <img src={logo} alt="logo" className={classes.image} height="200" />
-                    <Typography variant="h4" className={classes.pageTitle}>
-                        Log in
-                    </Typography>
-                    <form noValidate onSubmit={this.handleSubmit}>
-                        <TextField id="email" name="email" type="email" label="Email" className={classes.textField} 
-                        helperText={errors.email} error={errors.email ? true : false} 
-                        value={this.state.email} onChange={this.handleChange} />
-                        <br />
-                        <TextField id="password" name="password" type="password" label="Password" className={classes.textField} 
-                        helperText={errors.password} error={errors.password ? true : false} 
-                        value={this.state.password} onChange={this.handleChange} />
-                        <br />
-                        {
-                            errors.general && 
-                            (<Typography variant="body2" className={classes.customError}>
-                                {errors.general}
-                            </Typography>)
-                        }
-                        <Button type="submit" variant="contained" color="primary" className={classes.button}>Log in</Button>
-                    </form>
-                </Grid>
-            </Grid>
-        );
-    };
-};
-
-login.propTypes = {
-    classes: PropTypes.object.isRequired
-};
-
-export default withStyles(styles)(login);
+export default Login;

twistter-frontend/src/pages/Register.js

@@ -0,0 +1,29 @@
+import React, { Component } from 'react';
+import '../App.css';
+
+import logo from '../images/twistter-logo.png';
+import TextField from '@material-ui/core/TextField';
+
+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/pages/edit.js

@@ -0,0 +1,224 @@
+import React, { Component } from "react";
+import axios from "axios";
+import PropTypes from "prop-types";
+// TODO: Add a read-only '@' in the left side of the handle input
+// TODO: Add a cancel button, that takes the user back to their profile page
+
+// Material-UI stuff
+import Button from "@material-ui/core/Button";
+import CircularProgress from "@material-ui/core/CircularProgress";
+import Grid from "@material-ui/core/Grid";
+import TextField from "@material-ui/core/TextField";
+import Typography from "@material-ui/core/Typography";
+import withStyles from "@material-ui/core/styles/withStyles";
+
+const styles = {
+  form: {
+    textAlign: "center"
+  },
+  textField: {
+    marginBottom: 30
+  },
+  pageTitle: {
+    // marginTop: 20,
+    marginBottom: 40
+  },
+  button: {
+    positon: "relative",
+    marginBottom: 30
+  },
+  progress: {
+    position: "absolute"
+  }
+};
+
+export class edit extends Component {
+  // Runs as soon as the page loads.
+  // Sets the default values of all the textboxes to the data
+  // that is stored in the database for the user.
+  componentDidMount() {
+    axios
+      .get("/getProfileInfo")
+      .then((res) => {
+        this.setState({
+          firstName: res.data.firstName,
+          lastName: res.data.lastName,
+          email: res.data.email,
+          handle: res.data.handle,
+          bio: res.data.bio
+        });
+      })
+      .catch((err) => {
+        console.error(err);
+      });
+  }
+
+  // Constructor for the state
+  constructor() {
+    super();
+    this.state = {
+      firstName: "",
+      lastName: "",
+      email: "",
+      handle: "",
+      bio: "",
+      loading: false,
+      errors: {}
+    };
+  }
+
+  // Runs whenever the submit button is clicked.
+  // Updates the database entry of the signed in user with the
+  // data stored in the state.
+  handleSubmit = (event) => {
+    event.preventDefault();
+    this.setState({
+      loading: true
+    });
+    const newProfileData = {
+      firstName: this.state.firstName,
+      lastName: this.state.lastName,
+      email: this.state.email,
+      handle: this.state.handle,
+      bio: this.state.bio
+    };
+    axios
+      .post("/updateProfileInfo", newProfileData)
+      .then((res) => {
+        this.setState({
+          loading: false
+        });
+        // this.props.history.push('/');
+        // TODO: Need to redirect user to their profile page
+      })
+      .catch((err) => {
+        this.setState({
+          errors: err.response.data,
+          loading: false
+        });
+      });
+  };
+
+  // Updates the state whenever one of the textboxes changes.
+  // The key is the name of the textbox and the value is the
+  // value in the text box.
+  handleChange = (event) => {
+    this.setState({
+      [event.target.name]: event.target.value,
+      errors: {
+        [event.target.name]: null
+      }
+    });
+  };
+
+  render() {
+    const { classes } = this.props;
+    const { errors, loading } = this.state;
+
+    return (
+      <Grid container className={classes.form}>
+        <Grid item sm />
+        <Grid item sm>
+          <Typography variant="h2" className={classes.pageTitle}>
+            Edit Profile
+          </Typography>
+          <form noValidate onSubmit={this.handleSubmit}>
+            <Grid container className={classes.form} spacing={4}>
+              <Grid item sm>
+                <TextField
+                  id="firstName"
+                  name="firstName"
+                  label="First Name"
+                  className={classes.textField}
+                  value={this.state.firstName}
+                  helperText={errors.firstName}
+                  error={errors.firstName ? true : false}
+                  variant="outlined"
+                  onChange={this.handleChange}
+                  fullWidth
+                />
+              </Grid>
+              <Grid item sm>
+                <TextField
+                  id="lastName"
+                  name="lastName"
+                  label="Last Name"
+                  className={classes.textField}
+                  value={this.state.lastName}
+                  helperText={errors.lastname}
+                  error={errors.lastName ? true : false}
+                  variant="outlined"
+                  onChange={this.handleChange}
+                  fullWidth
+                />
+              </Grid>
+            </Grid>
+            <TextField
+              id="email"
+              name="email"
+              label="Email*"
+              className={classes.textField}
+              value={this.state.email}
+              disabled
+              helperText="(disabled)"
+              // INFO: These will be uncommented if changing emails is allowed
+              // helperText={errors.email}
+              // error={errors.email ? true : false}
+              variant="outlined"
+              onChange={this.handleChange}
+              fullWidth
+            />
+            <TextField
+              id="handle"
+              name="handle"
+              label="Handle*"
+              className={classes.textField}
+              value={this.state.handle}
+              disabled
+              helperText="(disabled)"
+              // INFO: These will be uncommented if changing usernames is allowed
+              // helperText={errors.handle}
+              // error={errors.handle ? true : false}
+              variant="outlined"
+              onChange={this.handleChange}
+              fullWidth
+            />
+            <TextField
+              id="bio"
+              name="bio"
+              label="Bio"
+              className={classes.textField}
+              value={this.state.bio}
+              helperText={errors.bio}
+              error={errors.bio ? true : false}
+              multiline
+              rows="8"
+              variant="outlined"
+              onChange={this.handleChange}
+              fullWidth
+            />
+            <Button
+              type="submit"
+              variant="contained"
+              color="primary"
+              className={classes.button}
+              disabled={loading}
+            >
+              Submit
+              {loading && (
+                <CircularProgress size={30} className={classes.progress} />
+              )}
+            </Button>
+          </form>
+        </Grid>
+        <Grid item sm />
+      </Grid>
+    );
+  }
+}
+
+edit.propTypes = {
+  classes: PropTypes.object.isRequired
+};
+
+export default withStyles(styles)(edit);

twistter-frontend/src/pages/signup.js

@@ -1,120 +0,0 @@
-import React, { Component } from 'react';
-import axios from 'axios'; 
-import PropTypes from 'prop-types';
-
-import Grid from '@material-ui/core/Grid';
-import Typography from '@material-ui/core/Typography';
-import TextField from '@material-ui/core/TextField';
-import Button from '@material-ui/core/Button';
-import withStyles from '@material-ui/core/styles/withStyles';
-
-import logo from '../images/twistter-logo.png';
-
-
-
-
-
-const styles = {
-    form: {
-        textAlign: 'center'
-    },
-    image: {
-        margin: '20px auto 20px auto'
-    },
-    pageTitle: {
-        margin: '20px auto 20px auto'
-    },
-    textField: {
-        margin: '20px auto 20px auto'
-    },
-    button: {
-        margin: '20px auto 20px auto'
-    },
-    customError: {
-        color: 'red',
-        fontSize: '0.8rem'
-    }
-};
-
-class signup extends Component {
-    constructor() {
-        super();
-        this.state = {
-            email: '',
-            username: '',
-            password: '',
-            confirmPassword: '',
-            errors: {}
-        };
-    };
-    handleSubmit = (event) => {
-        event.preventDefault();
-        const newUserData = {
-            email: this.state.email,
-            username: this.state.username,
-            password: this.state.password,
-            confirmPassword: this.state.confirmPassword
-        };
-        axios.post('/signup', newUserData)
-        .then(res => {
-            console.log(res.data);
-            localStorage.setItem('firebaseIdToken', `Bearer ${res.data.token}`);
-            this.props.history.push('/');
-        })
-        .catch(err => {
-            this.setState({
-                errors: err.response.data
-            });
-        });
-    };
-    handleChange = (event) => {
-        this.setState({
-            [event.target.name]: event.target.value
-        });
-    };
-    render() {
-        const { classes } = this.props;
-        const { errors } = this.state;
-        return (
-            <Grid container className={classes.form}>
-                <Grid item sm>
-                    <img src={logo} alt="logo" className={classes.image} height="200" />
-                    <Typography variant="h4" className={classes.pageTitle}>
-                        Sign up
-                    </Typography>
-                    <form noValidate onSubmit={this.handleSubmit}>
-                    <TextField id="email" name="email" type="email" label="Email" className={classes.textField} 
-                        helperText={errors.email} error={errors.email ? true : false} 
-                        value={this.state.email} onChange={this.handleChange} />
-                        <br />
-                        <TextField id="username" name="username" type="text" label="Username" className={classes.textField} 
-                        helperText={errors.username} error={errors.username ? true : false} 
-                        value={this.state.username} onChange={this.handleChange} />
-                        <br />
-                        <TextField id="password" name="password" type="password" label="Password" className={classes.textField} 
-                        helperText={errors.password} error={errors.password ? true : false} 
-                        value={this.state.password} onChange={this.handleChange} />
-                        <br />
-                        <TextField id="confirmPassword" name="confirmPassword" type="password" label="Confirm Password" className={classes.textField} 
-                        helperText={errors.confirmPassword} error={errors.confirmPassword ? true : false} 
-                        value={this.state.confirmPassword} onChange={this.handleChange} />
-                        <br />
-                        {
-                            errors.general && 
-                            (<Typography variant="body2" className={classes.customError}>
-                                {errors.general}
-                            </Typography>)
-                        }
-                        <Button type="submit" variant="contained" color="primary" className={classes.button}>Sign up</Button>
-                    </form>
-                </Grid>
-            </Grid>
-        );
-    };
-};
-
-signup.propTypes = {
-    classes: PropTypes.object.isRequired
-};
-
-export default withStyles(styles)(signup);

twistter-frontend/src/pages/user.js

@@ -0,0 +1,40 @@
+/* eslint-disable */
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import StaticProfile from '../components/profile/StaticProfile';
+import Grid from '@material-ui/core/Grid';
+
+import PostSkeleton from '../util/PostSkeleton';
+
+import { connect } from 'react-redux';
+
+
+class user extends Component {
+  render() {
+    const postMarkup = PostSkeleton;
+
+    return (
+      <b>User page</b>
+      // <Grid container spacing={16}>
+      //   <Grid item sm={8} xs={12}>
+      //     <b>postMarkup</b>
+      //     {postMarkup}
+      //   </Grid>
+      //   {/* <Grid item sm={4} xs={12}>
+      //       <StaticProfile profile={this.state.profile} />
+      //   </Grid> */}
+      // </Grid>
+    )
+  }
+}
+
+user.propTypes = {
+  // getUserData: PropTypes.func.isRequired,
+  //data: PropTypes.object.isRequired
+};
+
+const mapStateToProps = (state) => ({
+  data: state.data
+});
+
+export default connect(user);