Merge branch 'master' of https://github.com/ClaytonWWilson/CS307-Team24 into auth-backend-3

twistter-frontend/src/App.js

@@ -19,6 +19,8 @@ import { logoutUser, getUserData } from './redux/actions/userActions';
 // Components
 import AuthRoute from "./util/AuthRoute";
 
+// axios.defaults.baseURL = 'http://localhost:5006/twistter-e4649/us-central1/api';
+
 // Pages
 import home from './pages/Home';
 import signup from './pages/Signup';
@@ -34,14 +36,20 @@ const theme = createMuiTheme(themeObject);
 
 const token = localStorage.FBIdToken;
 if (token) {
-  const decodedToken = jwtDecode(token);
-  if (decodedToken.exp * 1000 < Date.now()) {
-    store.dispatch(logoutUser);
+
+  try {
+    const decodedToken = jwtDecode(token);
+    if (decodedToken.exp * 1000 < Date.now()) {
+      store.dispatch(logoutUser());
+      window.location.href = "/login";
+    } else {
+      store.dispatch({ type: SET_AUTHENTICATED });
+      axios.defaults.headers.common['Authorization'] = token;
+      store.dispatch(getUserData());
+    }
+  } catch (invalidTokenError) {
+    store.dispatch(logoutUser());
     window.location.href = "/login";
-  } else {
-    store.dispatch({ type: SET_AUTHENTICATED });
-    axios.defaults.headers.common['Authorization'] = token;
-    store.dispatch(getUserData());
   }
 }
 

twistter-frontend/src/Writing_Microblogs.js

@@ -36,7 +36,6 @@ class Writing_Microblogs extends Component {
         // alert('A title for the microblog was inputted: ' + this.state.title + '\nA microblog was posted: ' + this.state.value);
         const postData = {
             body: this.state.value,  
-            userHandle: "new user",
             userImage: "bing-url",
             microBlogTitle: this.state.title,
             microBlogTopics: this.state.topics.split(', ')
@@ -46,7 +45,7 @@ class Writing_Microblogs extends Component {
         }
         
         axios
-            .post('/putPost', postData, headers)
+            .post("/putPost", postData, headers)
             .then((res) =>{
                 alert('Post was shared successfully!')
                 console.log(res.data);

twistter-frontend/src/components/layout/NavBar.js

@@ -1,7 +1,7 @@
 /* eslint-disable */
 import React, { Component } from 'react';
 import { Link } from 'react-router-dom';
-// import PropTypes from 'prop-types';
+import PropTypes from 'prop-types';
 
 // Material UI stuff
 import AppBar from '@material-ui/core/AppBar';
@@ -11,26 +11,26 @@ import withStyles from "@material-ui/core/styles/withStyles";
 
 // Redux stuff
 // import { logoutUser } from '../../redux/actions/userActions';
-// import { connect } from 'react-redux';
+import { connect } from 'react-redux';
 
-// const styles = {
-//     form: {
-//       textAlign: "center"
-//     },
-//     textField: {
-//       marginBottom: 30
-//     },
-//     pageTitle: {
-//       marginBottom: 40
-//     },
-//     button: {
-//       positon: "relative",
-//       marginBottom: 30
-//     },
-//     progress: {
-//       position: "absolute"
-//     }
-//   };
+const styles = {
+    form: {
+      textAlign: "center"
+    },
+    textField: {
+      marginBottom: 30
+    },
+    pageTitle: {
+      marginBottom: 40
+    },
+    button: {
+      positon: "relative",
+      marginBottom: 30
+    },
+    progress: {
+      position: "absolute"
+    }
+  };
 
 
 
@@ -38,42 +38,44 @@ import withStyles from "@material-ui/core/styles/withStyles";
   
   export class Navbar extends Component {
       render() {
+        const authenticated = this.props.user.authenticated;
         return (
             <AppBar>
                 <ToolBar>
                     <Button component={ Link } to='/'>
                         Home
                     </Button>
-                    <Button component={ Link } to='/login'>
+                    {!authenticated && <Button component={ Link } to='/login'>
                         Login
-                    </Button>
-                    <Button component={ Link } to='/signup'>
+                    </Button>}
+                    {!authenticated && <Button component={ Link } to='/signup'>
                         Sign Up
-                    </Button>
-                    <Button component={ Link } to='/logout'>
+                    </Button>}
+                    {authenticated && <Button component={ Link } to='/logout'>
                         Logout
-                    </Button>
-                    <Button component={ Link } to='/delete'>
+                    </Button>}
+                    {/* Commented out the delete button, because it should probably go on
+                        the profile or editProfile page instead of the NavBar */}
+                    {/* <Button component={ Link } to='/delete'>
                         Delete Account
-                    </Button>
+                    </Button> */}
                 </ToolBar>
             </AppBar>
         )
     }
 }
 
-// const mapStateToProps = (state) => ({
-//     user: state.user
-// })
+const mapStateToProps = (state) => ({
+    user: state.user
+})
 
 // const mapActionsToProps = { logoutUser };
 
-// Navbar.propTypes = {
-//     logoutUser: PropTypes.func.isRequired,
-//     user: PropTypes.object.isRequired,
-//     classes: PropTypes.object.isRequired
-// }
+Navbar.propTypes = {
+    user: PropTypes.object.isRequired,
+    classes: PropTypes.object.isRequired
+}
 
-// export default connect(mapStateToProps, mapActionsToProps)(withStyles(styles)(Navbar));
+export default connect(mapStateToProps)(withStyles(styles)(Navbar));
 
-export default Navbar;
+// export default Navbar;

twistter-frontend/src/components/profile/Profile.js

@@ -0,0 +1,48 @@
+import React, { Component, Fragment } from "react";
+import PropTypes from "prop-types";
+import axios from "axios";
+import { connect } from 'react-redux';
+
+//MUI
+import withStyles from "@material-ui/core/styles/withStyles";
+import Card from "@material-ui/core/CardMedia";
+import Typography from "@material-ui/core/Typography";
+import Button from "@material-ui/core/Button";
+import { Paper } from "@material-ui/core";
+
+const styles = theme => ({
+  ...theme
+});
+
+class Profile extends Component {
+  state = {
+    profile: null
+  };
+
+  componentDidMount() {
+    axios
+      .get("/user")
+      .then(res => {
+        console.log(res.data.userData.credentials.handle);
+        this.setState({
+          profile: res.data.userData.credentials.handle
+        });
+      })
+      .catch(err => console.log(err));
+  }
+  render() {
+    let profileMarkup = this.state.profile ? (
+        <p>
+        <Typography variant='h5'>{this.state.profile}</Typography>
+        </p>) : <p>loading profile...</p>
+
+    return profileMarkup;
+  }
+}
+
+const mapStateToProps = state => ({
+  user: state.user,
+  classes: PropTypes.object.isRequired
+});
+
+export default connect(mapStateToProps)(withStyles(styles)(Profile));

twistter-frontend/src/pages/editProfile.js

@@ -88,6 +88,14 @@ export class edit extends Component {
       handle: this.state.handle,
       bio: this.state.bio
     };
+    
+    // Removes all keys from newProfileData that are empty, undefined, or null
+    Object.keys(newProfileData).forEach(key => {
+      if (newProfileData[key] === "" || newProfileData[key] === undefined || newProfileData[key] === null) {
+        delete newProfileData[key];
+      }
+    })
+      
     axios
       .post("/updateProfileInfo", newProfileData)
       .then((res) => {

twistter-frontend/src/pages/user.js

@@ -1,49 +1,124 @@
 /* eslint-disable */
 import React, { Component } from 'react';
+import PropTypes from 'prop-types';
 import axios from 'axios';
 //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 Chip from '@material-ui/core/Chip';
-import Paper from '@material-ui/core/Paper';
+import Typography from "@material-ui/core/Typography";
+import AddCircle from '@material-ui/icons/AddCircle';
+import TextField from '@material-ui/core/TextField';
 
+// component
+import Userline from '../Userline';
+import noImage from '../images/no-img.png';
 
-const PostCard = styled(Card)({
-  background: 'linear-gradient(45deg, #1da1f2 90%)',
-  border: 3,
-  borderRadius: 3,
-  height:325,
-  width: 345,
-  padding: '0 30px',
+const MyChip = styled(Chip)({
+  margin: 2,
+  color: 'primary'
 });
 
-
-class user extends Component {
-  componentDidMount(){
-    //TODO: get user details
-    //TODO: get posts
+class user extends Component {  
+  state = {
+    profile: null,
+    imageUrl: null,
+    topics: null,
+    newTopic: null
+  };
+  
+  handleDelete = (topic) => {
+    alert(`Delete topic: ${topic}!`);
+  }
+  
+  handleAddCircle = () => {
+    axios.post('/putTopic', {
+      topic: this.state.newTopic
+    })
+    .then(function () {
+      location.reload();
+    })
+    .catch(function (err) {
+      console.log(err);
+    });
   }
 
+  handleChange(event) {
+    this.setState({
+      newTopic: event.target.value
+    })
+  }
+
+  componentDidMount() {
+    axios
+      .get("/user")
+      .then(res => {
+        this.setState({
+          profile: res.data.credentials.handle,
+          imageUrl: res.data.credentials.imageUrl
+        });
+      })
+      .catch(err => console.log(err));
+    axios
+      .get("/getAllTopics")
+      .then(res => {
+        this.setState({
+          topics: res.data
+        })
+      })
+      .catch(err => console.log(err));
+  }
   render() {
+    const classes = this.props;
+    let profileMarkup = this.state.profile ? (
+      <p>
+      <Typography variant='h5'>{this.state.profile}</Typography>
+      </p>) : (<p>loading username...</p>);
+    
+
+    let topicsMarkup = this.state.topics ? (
+      this.state.topics.map(topic => <MyChip 
+        label={{topic}.topic.topic}
+        key={{topic}.topic.topicId}
+        onDelete={ (topic) => this.handleDelete(topic)}/>)
+    ) : (<p> loading topics...</p>);
+
+    let imageMarkup = this.state.imageUrl ? (
+      <img
+      src={this.state.imageUrl}
+      height="250"
+      width="250"
+      />
+    ) : (<img src={noImage}/>);
+
     return (
       <Grid container spacing={16}>
         <Grid item sm={8} xs={12}>
           <p>Post</p>
         </Grid>
         <Grid item sm={4} xs={12}>
-          <PostCard>
-            <CardMedia image="./no-img-png" />
-            <CardContent>Username</CardContent>
-          </PostCard>
+          {imageMarkup}
+          {profileMarkup}
+          {topicsMarkup}
+          <TextField
+          id="newTopic"
+          label="new topic"
+          defaultValue=""
+          margin="normal"
+          variant="outlined"
+          value={this.state.newTopic}
+          onChange={ (event) => this.handleChange(event)}
+          />
+          <AddCircle
+            color="primary"
+            clickable
+            onClick={this.handleAddCircle}
+          />
         </Grid>
       </Grid>
     );
   }
 }
 
-
-
 export default user;

twistter-frontend/src/util/theme.js

@@ -50,7 +50,13 @@ export default {
       marginBottom: 20
     },
     paper: {
-      padding: 20
+      padding: 10,
+      display: 'flex',
+      justifyContent: 'center',
+      flexWrap: 'wrap'
+    },
+    chip: {
+      margin: 0.5,
     },
     profile: {
       '& .image-wrapper': {