ClaytonWWilson/CS307-Team24
1
0
Fork 0
mirror of https://github.com/ClaytonWWilson/CS307-Team24.git synced 2025-12-16 02:08:47 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

add topics when publish new post

Browse Source
This commit is contained in:
Leon Liang 2019-12-02 18:31:33 -05:00
parent 445c8b39de
commit f0ddaa30b1
2 changed files with 75 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
twistter-frontend/src/Writing_Microblogs.js
View File

@ -40,15 +40,28 @@ class Writing_Microblogs extends Component {
};
axios
.post("/putPost", postData, headers)
.post("/putPost", postData, headers) // TODO: add topics
.then(res => {
alert("Post was shared successfully!");
// alert("Post was shared successfully!");
console.log(res.data);
})
.catch(err => {
alert("An error occured.");
console.error(err);
});
console.log(postData.microBlogTopics);
postData.microBlogTopics.forEach(topic => {
axios
.post("/putTopic", {
following: topic
})
.then(res => {
console.log(res.data);
})
.catch(err => {
console.error(err);
});
});
event.preventDefault();
this.setState({ value: "", title: "", characterCount: 250, topics: "" });
}

88
twistter-frontend/src/pages/Home.js
View File

@ -1,20 +1,20 @@
/* eslint-disable */
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import axios from 'axios';
import React, { Component } from "react";
import PropTypes from "prop-types";
import { connect } from "react-redux";
import axios from "axios";
// Material UI and React Router
import Grid from '@material-ui/core/Grid';
import Card from '@material-ui/core/Card';
import CardContent from '@material-ui/core/CardContent';
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";
// component
import '../App.css';
import logo from '../images/twistter-logo.png';
import noImage from '../images/no-img.png';
import Writing_Microblogs from '../Writing_Microblogs';
import "../App.css";
import logo from "../images/twistter-logo.png";
import noImage from "../images/no-img.png";
import Writing_Microblogs from "../Writing_Microblogs";
class Home extends Component {
state = {};
@ -26,7 +26,7 @@ class Home extends Component {
console.log(res.data);
this.setState({
posts: res.data
})
});
})
.catch(err => console.log(err));
}
@ -35,31 +35,43 @@ class Home extends Component {
let authenticated = this.props.user.authenticated;
let postMarkup = this.state.posts ? (
this.state.posts.map(post =>
this.state.posts.map(post => (
<Card>
<CardContent>
<Typography>
{
this.state.imageUrl ? (<img src={this.state.imageUrl} height="250" width="250" />) :
(<img src={noImage} height="50" width="50"/>)
}
{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}
</Typography>
<Typography variant="h7"><b>{post.userHandle}</b></Typography>
<Typography variant="body2" color={"textSecondary"}>{post.createdAt}</Typography>
<br />
<Typography variant="body1"><b>{post.microBlogTitle}</b></Typography>
<Typography variant="body1">
<b>{post.microBlogTitle}</b>
</Typography>
<Typography variant="body2">{post.body}</Typography>
<br />
<Typography variant="body2"><b>Topics:</b> {post.microBlogTopics}</Typography>
<Typography variant="body2">
<b>Topics:</b> {post.microBlogTopics}
</Typography>
<br />
<Typography variant="body2" color={"textSecondary"}>Likes {post.likeCount} Comments {post.commentCount}</Typography>
<Typography variant="body2" color={"textSecondary"}>
Likes {post.likeCount} Comments {post.commentCount}
</Typography>
</CardContent>
</Card>
)
) : (<p>My Posts</p>);
))
) : (
<p>Loading post...</p>
);
return (
authenticated ?
return authenticated ? (
<Grid container spacing={16}>
<Grid item sm={4} xs={8}>
<Writing_Microblogs />
@ -68,25 +80,31 @@ class Home extends Component {
{postMarkup}
</Grid>
</Grid>
:
) : (
<div>
<div>
<img src={logo} className="app-logo" alt="logo" />
<br/><br/>
<br />
<br />
<b>Welcome to Twistter!</b>
<br/><br/>
<br />
<br />
<b>See the most interesting topics people are following right now.</b>
</div>
<br/><br/><br/><br/>
<br />
<br />
<br />
<br />
<div>
<b>Join today or sign in if you already have an account.</b>
<br/><br/>
<br />
<br />
<form action="./signup">
<button className="authButtons signup">Sign up</button>
</form>
<br/>
<br />
<form action="./login">
<button className="authButtons login">Sign in</button>
</form>
@ -96,12 +114,12 @@ class Home extends Component {
}
}
const mapStateToProps = (state) => ({
const mapStateToProps = state => ({
user: state.user
})
});
Home.propTypes = {
user: PropTypes.object.isRequired
}
};
export default connect(mapStateToProps)(Home);