Merge branch 'master' into profile_display

2026-03-11 05:35:05 +00:00 · 2019-10-02 23:24:21 -04:00
parent 2536547c63 42a07ffa5e
commit 5168de65c1
15 changed files with 509 additions and 365 deletions
--- a/twistter-frontend/src/App.css
+++ b/twistter-frontend/src/App.css
@@ -1,7 +1,3 @@
-/* body {
-
-} */
-
 .app {
  font-family: "Segoe UI";
  font-size: large;
@@ -50,4 +46,5 @@
  margin: 80px auto 0 auto;
  max-width: 1200px;
  color: #1da1f2;
-}
+}
+
--- a/twistter-frontend/src/App.js
+++ b/twistter-frontend/src/App.js
@@ -12,7 +12,7 @@ import Navbar from './components/layout/NavBar';
 import home from './pages/Home';
 import register from './pages/Register';
 import login from './pages/Login';
-import user from './pages/User';
+import user from './pages/user';

 import writeMicroblog from './Writing_Microblogs.js';
 import edit from './pages/edit.js';
@@ -40,4 +40,4 @@ class App extends Component {
  }
 }

-export default App;
+export default App;
--- a/twistter-frontend/src/Userline.js
+++ b/twistter-frontend/src/Userline.js
@@ -2,6 +2,12 @@ import React, { Component } from "react";
 import { BrowserRouter as Router } from 'react-router-dom';
 import Route from 'react-router-dom/Route';
 import axios from 'axios';
+import Box from '@material-ui/core/Box'
+import {borders} from '@material-ui/system';
+import { sizing } from '@material-ui/system';
+// var moment = require('moment');
+
+

 class Userline extends Component {

@@ -9,7 +15,8 @@ class Userline extends Component {
    {
        super(props);
        this.state = {
-            microBlogs : []
+            microBlogs : [],
+            
        }
        
    }
@@ -21,17 +28,37 @@ class Userline extends Component {
                const post = res.data;
                this.setState({microBlogs : post})

-            }) 
-
-            
-     }
+            })
+    }

     render() {
+         const sortedPosts = (this.state.microBlogs).sort((a,b) =>
+             -a.createdAt.localeCompare(b.createdAt)
+         )
+                
        return (
-            <ul>
-                { this.state.microBlogs.map(microBlog => <p>{microBlog.body}</p>)}
-            </ul>
-        )
-     }
+            <div>
+            <div style={{fontsize: "13px", textAlign: "left", marginLeft: "14px"}}>
+                <p>Userline</p>
+            </div>
+            <Box border={1} width="25%" flex="1" height="auto" m={2} fontSize="13px" textAlign= "left" padding="5px" flexWrap= "wrap" flexDirection= "row" >
+                <div style={{flexWrap: "wrap", flex: "1", flexDirection: "row", wordBreak: "break-word"}}>
+                <p>
+                {sortedPosts.map((microBlog) => <p>Microblog Title: {microBlog.microBlogTitle}
+                                                          <br></br>When post was created: {microBlog.createdAt.substring(0,10) + 
+                                                          " " + microBlog.createdAt.substring(11,19)}
+                                                          <br></br>Number of comments: {microBlog.commentCount}
+                                                          <br></br>Number of likes: {microBlog.likeCount}
+                                                          <br></br>Body of post: {microBlog.body}
+                                                          <br></br>Tagged topics: {microBlog.microBlogTopics.join("," + " ")}               
+                </p>)} 
+                </p>
+                </div>
+            </Box>
+            </div>
+            
+                )
+        }
+        
 }
 export default Userline;
--- a/twistter-frontend/src/Writing_Microblogs.js
+++ b/twistter-frontend/src/Writing_Microblogs.js
@@ -11,7 +11,8 @@ class Writing_Microblogs extends Component {
        this.state = {
            value: '',
            title: '',
-            characterCount: 10
+            topics: '',
+            characterCount: 250
            
        };
        
@@ -19,12 +20,18 @@ class Writing_Microblogs extends Component {
        this.handleChange = this.handleChange.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
        this.handleChangeforPost = this.handleChangeforPost.bind(this);
+        this.handleChangeforTopics = this.handleChangeforTopics.bind(this);
+        
    }

    handleChange(event) {
        this.setState( {title: event.target.value });
    }

+    handleChangeforTopics(event) {
+        this.setState( {topics: event.target.value});
+    }
+
    handleSubmit(event) {
        // alert('A title for the microblog was inputted: ' + this.state.title + '\nA microblog was posted: ' + this.state.value);
        
@@ -33,15 +40,17 @@ class Writing_Microblogs extends Component {
            { body: this.state.value,  
              userHandle: "new user",
              userImage: "bing-url",
-              microBlogTitle: this.state.title 
-            
+              microBlogTitle: this.state.title,
+              microBlogTopics: this.state.topics.split(', ')
+              
            },
            { headers: { 'Content-Type': 'application/json'} }
            
        )
        console.log(response.data);
+        alert('Post was shared successfully!');
        event.preventDefault();
-        this.setState({value: '', title: '',characterCount: 10})
+        this.setState({value: '', title: '',characterCount: 250, topics: ''})
    }

    handleChangeforPost(event) {
@@ -50,24 +59,29 @@ class Writing_Microblogs extends Component {

    handleChangeforCharacterCount(event) {
        const charCount = event.target.value.length
-        const charRemaining = 10 - charCount
+        const charRemaining = 250 - charCount
        this.setState({characterCount: charRemaining })
    
    }

-
    render() {
        return (
            <div>
-            <div style={{ width: "200px", height: "50px", marginTop: "180px", marginLeft: "30px" }}>         
+            <div style={{ width: "200px", height: "50px", marginTop: "180px", marginLeft: "50px" }}>         
             <form>
-                    <input type="text" placeholder="Enter Microblog Title" value={this.state.title} onChange={this.handleChange} />
+                    <textarea placeholder="Enter Microblog Title" value={this.state.title} required onChange={this.handleChange} cols={30} rows={1} />
+
+            </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 value={this.state.value} required maxLength="10" placeholder= "Write Microblog here..." 
+                    <textarea value={this.state.value} required maxLength="250" 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>
--- a/twistter-frontend/src/pages/edit.js
+++ b/twistter-frontend/src/pages/edit.js
@@ -1,41 +1,41 @@
 import React, { Component } from "react";
 import axios from "axios";
 import PropTypes from "prop-types";
-// TODO: Fix font, so that it is roboto
 // 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
-// TODO: Sort imports
-// TODO: Add comments

 // 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";
-import Grid from "@material-ui/core/Grid";
-import Button from "@material-ui/core/Button";
-import CircularProgress from '@material-ui/core/CircularProgress';

 const styles = {
  form: {
    textAlign: "center"
  },
  textField: {
-    marginBottom: 40
+    marginBottom: 30
  },
  pageTitle: {
-    marginTop: 40,
+    // marginTop: 20,
    marginBottom: 40
  },
  button: {
-    positon: 'relative',
+    positon: "relative",
+    marginBottom: 30
  },
  progress: {
-    position: 'absolute',
+    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")
@@ -53,6 +53,7 @@ export class edit extends Component {
      });
  }

+  // Constructor for the state
  constructor() {
    super();
    this.state = {
@@ -66,6 +67,9 @@ export class edit extends Component {
    };
  }

+  // 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({
@@ -95,11 +99,14 @@ export class edit extends Component {
      });
  };

+  // 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,
+        [event.target.name]: null
      }
    });
  };
@@ -154,6 +161,7 @@ export class edit extends Component {
              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"
@@ -168,6 +176,7 @@ export class edit extends Component {
              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"
@@ -197,7 +206,7 @@ export class edit extends Component {
            >
              Submit
              {loading && (
-                <CircularProgress size={30} className={classes.progress}/>
+                <CircularProgress size={30} className={classes.progress} />
              )}
            </Button>
          </form>
--- a/twistter-frontend/src/pages/user.js
+++ b/twistter-frontend/src/pages/user.js
@@ -1,40 +1,35 @@
 /* eslint-disable */
 import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import StaticProfile from '../components/profile/StaticProfile';
+//import '../App.css';
+import { makeStyles, styled } from '@material-ui/core/styles';
 import Grid from '@material-ui/core/Grid';
+import Card from '@material-ui/core/Card';
+import CardMedia from '@material-ui/core/CardMedia';
+import CardContent from '@material-ui/core/CardContent';

-import PostSkeleton from '../util/PostSkeleton';
-
-import { connect } from 'react-redux';
-
+const PostCard = styled(Card)({
+  background: 'linear-gradient(45deg, #1da1f2 90%)',
+  border: 3,
+  borderRadius: 3,
+  height:225,
+  width: 645,
+  padding: '0 30px',
+});

 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>
+      <div>
+        <h1>User Profile</h1>
+        <br/><br/>
+        <PostCard>Some card and content</PostCard>
+        <br/><br/>
+      </div>
    )
  }
 }

-user.propTypes = {
-  // getUserData: PropTypes.func.isRequired,
-  //data: PropTypes.object.isRequired
-};

-const mapStateToProps = (state) => ({
-  data: state.data
-});

-export default connect(user);
+export default user;
--- a/twistter-frontend/src/util/theme.js
+++ b/twistter-frontend/src/util/theme.js
@@ -1,4 +1,5 @@
 export default {
+<<<<<<< HEAD
 palette: {
        primary: {
          main: '#1976d2',
@@ -87,4 +88,102 @@ palette: {
        }
      }
    };
-}
+}
+=======
+    palette: {
+      primary: {
+        light: '#1da1f2',
+        main: '#1da1f2',
+        dark: '#008394',
+        contrastText: '#fff'
+      },
+      secondary: {
+        light: '#ff6333',
+        main: '#ff3d00',
+        dark: '#b22a00',
+        contrastText: '#fff'
+      }
+    },
+    typography: {
+      useNextVariants: true
+    },
+    form: {
+      textAlign: 'center'
+    },
+    image: {
+      margin: '20px auto 20px auto'
+    },
+    pageTitle: {
+      margin: '10px auto 10px auto'
+    },
+    textField: {
+      margin: '10px auto 10px auto'
+    },
+    button: {
+      marginTop: 20,
+      position: 'relative'
+    },
+    customError: {
+      color: 'red',
+      fontSize: '0.8rem',
+      marginTop: 10
+    },
+    progress: {
+      position: 'absolute'
+    },
+    invisibleSeparator: {
+      border: 'none',
+      margin: 4
+    },
+    visibleSeparator: {
+      width: '100%',
+      borderBottom: '1px solid rgba(0,0,0,0.1)',
+      marginBottom: 20
+    },
+    paper: {
+      padding: 20
+    },
+    profile: {
+      '& .image-wrapper': {
+        textAlign: 'center',
+        position: 'relative',
+        '& button': {
+          position: 'absolute',
+          top: '80%',
+          left: '70%'
+        }
+      },
+      '& .profile-image': {
+        width: 200,
+        height: 200,
+        objectFit: 'cover',
+        maxWidth: '100%',
+        borderRadius: '50%'
+      },
+      '& .profile-details': {
+        textAlign: 'center',
+        '& span, svg': {
+          verticalAlign: 'middle'
+        },
+        '& a': {
+          color: '#00bcd4'
+        }
+      },
+      '& hr': {
+        border: 'none',
+        margin: '0 0 10px 0'
+      },
+      '& svg.button': {
+        '&:hover': {
+          cursor: 'pointer'
+        }
+      }
+    },
+    buttons: {
+      textAlign: 'center',
+      '& a': {
+        margin: '20px 10px'
+      }
+    }
+  };
+>>>>>>> master