Merge pull request #85 from ClaytonWWilson/microblogs-material-ui

Changing Writing_Microblogs to Material-UI and other UI tweaks

twistter-frontend/src/Writing_Microblogs.js

@@ -3,6 +3,27 @@ import { BrowserRouter as Router } from "react-router-dom";
 import Route from "react-router-dom/Route";
 import axios from "axios";
 
+// Material-UI
+import TextField from '@material-ui/core/TextField';
+import Typography from '@material-ui/core/Typography';
+import Button from '@material-ui/core/Button';
+import withStyles from "@material-ui/styles/withStyles";
+
+const styles = {
+  container: {
+    position: "fixed"
+  },
+  form: {
+    width: "300px",
+    height: "50px",
+    marginTop: "180px",
+    marginLeft: "50px"
+  },
+  textField: {
+    marginBottom: 15
+  }
+}
+
 class Writing_Microblogs extends Component {
   constructor(props) {
     super(props);
@@ -27,7 +48,7 @@ class Writing_Microblogs extends Component {
     this.setState({ topics: event.target.value });
   }
 
-  handleSubmit(event) {
+  handleSubmit = (event) => {
     // alert('A title for the microblog was inputted: ' + this.state.title + '\nA microblog was posted: ' + this.state.value);
     const postData = {
       body: this.state.value,
@@ -67,6 +88,7 @@ class Writing_Microblogs extends Component {
   }
 
   handleChangeforPost(event) {
+
     this.setState({ value: event.target.value });
   }
 
@@ -77,65 +99,68 @@ class Writing_Microblogs extends Component {
   }
 
   render() {
+    const { classes } = this.props;
     return (
-      <div>
-        <div
-          style={{
-            width: "200px",
-            height: "50px",
-            marginTop: "180px",
-            marginLeft: "50px"
-          }}
-        >
-          <form>
-            <textarea
-              placeholder="Enter Microblog Title"
+      <div className={classes.container}>
+        <form noValidate className={classes.form}>
+          <TextField
+            id="title"
+            name="title"
+            label="Title"
+            className={classes.textField}
             value={this.state.title}
-              required
+            variant="outlined"
             onChange={this.handleChange}
-              cols={30}
-              rows={1}
+            fullWidth
+            autoComplete='off'
           />
-          </form>
-        </div>
-        <div style={{ width: "200px", height: "50px", marginLeft: "50px" }}>
-          <form>
-            <textarea
-              placeholder="Enter topics seperated by a comma"
-              value={this.state.topics}
-              required
-              onChange={this.handleChangeforTopics}
-              cols={40}
-              rows={1}
-            />
-          </form>
-        </div>
 
-        <div style={{ width: "200px", marginLeft: "50px" }}>
-          <form onSubmit={this.handleSubmit}>
-            <textarea
+          <TextField
+            id="topics"
+            name="topics"
+            label="Topics"
+            className={classes.textField}
+            value={this.state.topics}
+            variant="outlined"
+            onChange={this.handleChangeforTopics}
+            color="primary"
+            fullWidth
+            autoComplete='off'
+          />
+
+          <TextField
+            id="content"
+            name="content"
+            label="Content"
+            color="primary"
+            className={classes.textField}
             value={this.state.value}
-              required
-              maxLength="250"
-              placeholder="Write Microblog here..."
-              onChange={e => {
+            helperText={`${this.state.characterCount} characters left`}
+            multiline
+            rows="9"
+            variant="outlined"
+            inputProps={{
+              maxLength: 250
+            }}
+            onChange={(e) => {
               this.handleChangeforPost(e);
               this.handleChangeforCharacterCount(e);
             }}
-              cols={40}
-              rows={20}
+            fullWidth
+            autoComplete='off'
           />
-            <div style={{ fontSize: "14px", marginRight: "-100px" }}>
-              <p2>Characters Left: {this.state.characterCount}</p2>
-            </div>
-            <div style={{ marginRight: "-100px" }}>
-              <button onClick>Share Post</button>
-            </div>
+          <Button
+            onClick={this.handleSubmit}
+            // disabled={loading}
+            variant="outlined"
+            color="primary"
+            >
+              Share Post
+          </Button>
         </form>
       </div>
-      </div>
     );
   }
 }
 
-export default Writing_Microblogs;
+export default withStyles(styles)(Writing_Microblogs);

twistter-frontend/src/pages/Home.js

@@ -9,6 +9,7 @@ import Grid from "@material-ui/core/Grid";
 import Card from "@material-ui/core/Card";
 import CardContent from "@material-ui/core/CardContent";
 import Typography from "@material-ui/core/Typography";
+import withStyles from '@material-ui/styles/withStyles';
 
 // component
 import '../App.css';
@@ -18,6 +19,12 @@ import Writing_Microblogs from '../Writing_Microblogs';
 import ReactModal from 'react-modal';
 
 
+const styles = {
+  card: {
+    marginBottom: 5
+  }
+}
+
 class Home extends Component {
   state = {
     
@@ -36,27 +43,28 @@ class Home extends Component {
       .catch(err => console.log(err));
   }
 
+  formatDate(dateString) {
+    let newDate = new Date(Date.parse(dateString));
+    return newDate.toDateString();
+  }
 
   render() {
     let authenticated = this.props.user.authenticated;
+    let {classes} = this.props;
     let username = this.props.user.credentials.handle;
+
     let postMarkup = this.state.posts ? (
-      this.state.posts.map(post => (
-        <Card>
+      this.state.posts.map(post => 
+        <Card className={classes.card}>
           <CardContent>
             <Typography>
-              {this.state.imageUrl ? (
-                <img src={this.state.imageUrl} height="250" width="250" />
-              ) : (
-                <img src={noImage} height="50" width="50" />
-              )}
-            </Typography>
-            <Typography variant="h7">
-              <b>{post.userHandle}</b>
-            </Typography>
-            <Typography variant="body2" color={"textSecondary"}>
-              {post.createdAt}
+              {
+                this.state.imageUrl ? (<img src={this.state.imageUrl} height="50" width="50" />) : 
+                                      (<img src={noImage} height="50" width="50"/>)
+              }
             </Typography>
+            <Typography variant="h5"><b>{post.userHandle}</b></Typography>
+            <Typography variant="body2" color={"textSecondary"}>{this.formatDate(post.createdAt)}</Typography>
             <br />
             <Typography variant="body1"><b>{post.microBlogTitle}</b></Typography>
             <Typography variant="body2">{post.quoteBody}</Typography>
@@ -70,7 +78,7 @@ class Home extends Component {
             <Quote microblog = {post.postId}></Quote>
           </CardContent>
         </Card>
-      ))
+      )
     ) : (
       <p>Loading post...</p>
     );
@@ -333,8 +341,9 @@ const mapStateToProps = (state) => ({
 });
 
 Home.propTypes = {
-  user: PropTypes.object.isRequired
-};
+  user: PropTypes.object.isRequired,
+  clases: PropTypes.object.isRequired
+}
 
 Like.propTypes = {
   user: PropTypes.object.isRequired
@@ -344,4 +353,4 @@ Quote.propTypes = {
   user: PropTypes.object.isRequired
 }
 
-export default connect(mapStateToProps)(Home, Like, Quote);
+export default connect(mapStateToProps)(withStyles(styles)(Home, Like, Quote));

twistter-frontend/src/pages/Login.js

@@ -119,7 +119,7 @@ export class Login extends Component {
             <TextField
               id="email"
               name="email"
-              label="Email*"
+              label="Email or Username*"
               className={classes.textField}
               value={this.state.email}
               helperText={errors.email}
@@ -127,6 +127,7 @@ export class Login extends Component {
               variant="outlined"
               onChange={this.handleChange}
               fullWidth
+              autoComplete='off'
             />
             <TextField
               id="password"
@@ -140,6 +141,7 @@ export class Login extends Component {
               variant="outlined"
               onChange={this.handleChange}
               fullWidth
+              autoComplete='off'
             />
             <Button
               type="submit"

twistter-frontend/src/pages/Signup.js

@@ -122,6 +122,7 @@ export class Signup extends Component {
               variant="outlined"
               onChange={this.handleChange}
               fullWidth
+              autoComplete='off'
             />
             <TextField
               id="email"
@@ -134,6 +135,7 @@ export class Signup extends Component {
               variant="outlined"
               onChange={this.handleChange}
               fullWidth
+              autoComplete='off'
             />
             <TextField
               id="password"
@@ -147,6 +149,7 @@ export class Signup extends Component {
               variant="outlined"
               onChange={this.handleChange}
               fullWidth
+              autoComplete='off'
             />
             <TextField
               id="confirmPassword"
@@ -160,6 +163,7 @@ export class Signup extends Component {
               variant="outlined"
               onChange={this.handleChange}
               fullWidth
+              autoComplete='off'
             />
             <br></br>
             <br></br>

twistter-frontend/src/pages/editProfile.js

@@ -28,6 +28,14 @@ const styles = {
     positon: "relative",
     marginBottom: 30
   },
+  back: {
+    float: "left",
+    marginLeft: 15
+  },
+  delete: {
+    float: "right",
+    marginRight: 15
+  },
   progress: {
     position: "absolute"
   }
@@ -135,7 +143,17 @@ export class edit extends Component {
 
     return (
       <Grid container className={classes.form}>
-        <Grid item sm />
+        <Grid item sm >
+          <Button
+            variant="outlined"
+            color="primary"
+            className={classes.back}
+            component={ Link }
+            to='/user'
+          >
+            Back to Profile
+          </Button>
+        </Grid>
         <Grid item sm>
           <Typography variant="h2" className={classes.pageTitle}>
             Edit Profile
@@ -154,6 +172,7 @@ export class edit extends Component {
                   variant="outlined"
                   onChange={this.handleChange}
                   fullWidth
+                  autoComplete='off'
                 />
               </Grid>
               <Grid item sm>
@@ -168,6 +187,7 @@ export class edit extends Component {
                   variant="outlined"
                   onChange={this.handleChange}
                   fullWidth
+                  autoComplete='off'
                 />
               </Grid>
             </Grid>
@@ -185,6 +205,7 @@ export class edit extends Component {
               variant="outlined"
               onChange={this.handleChange}
               fullWidth
+              autoComplete='off'
             />
             <TextField
               id="handle"
@@ -200,6 +221,7 @@ export class edit extends Component {
               variant="outlined"
               onChange={this.handleChange}
               fullWidth
+              autoComplete='off'
             />
             <TextField
               id="bio"
@@ -214,6 +236,7 @@ export class edit extends Component {
               variant="outlined"
               onChange={this.handleChange}
               fullWidth
+              autoComplete='off'
             />
             <Button
               type="submit"
@@ -229,29 +252,20 @@ export class edit extends Component {
                 <CircularProgress size={30} className={classes.progress} />
               )}
             </Button>
-            <br />
+            
+          </form>
+        </Grid>
+        <Grid item sm>
         <Button
-              //variant="contained"
-              color="primary"
-              className={classes.button}
-              component={ Link }
-              to='/user'
-            >
-              Back to Profile
-            </Button>
-            <br />
-            <Button
-              variant="contained"
+          variant="outlined"
           color="secondary"
-              className={classes.button}
+          className={classes.delete}
           component={ Link }
           to='/delete'
         >
           Delete Account
         </Button>
-          </form>
         </Grid>
-        <Grid item sm />
       </Grid>
     );
   }

twistter-frontend/src/pages/user.js

@@ -47,7 +47,7 @@ const styles = {
     // marginRight: "10%"
   },
   card: {
-    marginBottom: 10
+    marginBottom: 5
   },
   profileImage: {
     marginTop: 20
@@ -152,6 +152,11 @@ class user extends Component {
       .catch(err => console.log(err));
   }
 
+  formatDate(dateString) {
+    let newDate = new Date(Date.parse(dateString));
+    return newDate.toDateString();
+  }
+
   render() {
     const { classes } = this.props;
     let authenticated = this.props.user.authenticated;
@@ -223,6 +228,7 @@ class user extends Component {
               <b>{post.microBlogTitle}</b>
             </Typography>
             <Typography variant="body2">{post.quoteBody}</Typography>
+      
             <br />
             <Typography variant="body2">{post.body}</Typography>
             <br />
@@ -311,7 +317,8 @@ const mapStateToProps = state => ({
 });
 
 user.propTypes = {
-  user: PropTypes.object.isRequired
+  user: PropTypes.object.isRequired,
+  clases: PropTypes.object.isRequired
 };
 
 export default connect(mapStateToProps)(withStyles(styles)(user));