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

Writing_Microblogs to Material-UI and UI improvements

Browse Source
This commit is contained in:
Clayton Wilson 2019-11-03 15:17:14 -05:00
parent 3fa4cd7033
commit 2bd1c08c2c
5 changed files with 40 additions and 114 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -5,6 +5,7 @@ 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";
@ -19,11 +20,8 @@ const styles = {
marginLeft: "50px"
},
textField: {
marginBottom: 20
marginBottom: 15
}
// TextField: {
// marginBottom: "30px"
// }
}
class Writing_Microblogs extends Component {
@ -50,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,
@ -77,6 +75,7 @@ class Writing_Microblogs extends Component {
}
handleChangeforPost(event) {
this.setState({ value: event.target.value });
}
@ -89,145 +88,66 @@ class Writing_Microblogs extends Component {
render() {
const { classes } = this.props;
return (
// <div className={classes.container}>
// <div className={classes.div}>
// <form>
// {/* <textarea
// placeholder="Enter Microblog Title"
// value={this.state.title}
// required
// onChange={this.handleChange}
// cols={30}
// rows={1}
// /> */}
// <TextField
// id="title"
// name="title"
// label="Title"
// // className={classes.textField}
// value={this.state.title}
// // helperText={errors.firstName}
// // error={errors.firstName ? true : false}
// variant="outlined"
// onChange={this.handleChange}
// fullWidth
// />
// </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} */}
// <TextField
// id="topics"
// name="topics"
// label="topics"
// // className={classes.textField}
// value={this.state.topics}
// // helperText={errors.firstName}
// // error={errors.firstName ? true : false}
// variant="outlined"
// onChange={this.handleChange}
// fullWidth
// />
// </form>
// </div>
// <div style={{ width: "200px", marginLeft: "50px" }}>
// <form onSubmit={this.handleSubmit}>
// {/* <textarea
// value={this.state.value}
// required
// maxLength="250"
// placeholder="Write Microblog here..."
// onChange={e => {
// this.handleChangeforPost(e);
// this.handleChangeforCharacterCount(e);
// }}
// cols={40}
// rows={20}
// /> */}
// <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
// />
// <div style={{ fontSize: "14px", marginRight: "-100px" }}>
// <p2>Characters Left: {this.state.characterCount}</p2>
// </div>
// <div style={{ marginRight: "-100px" }}>
// {/* <button onClick>Share Post</button> */}
// <Button
// onClick
// >
// Share Post
// </Button>
// </div>
// </form>
// </div>
// </div>
<div className={classes.container}>
<form className={classes.form}>
<form noValidate className={classes.form}>
<TextField
// style={{marginBottom: 20}}
id="title"
name="title"
label="Title"
className={classes.textField}
value={this.state.title}
// helperText={errors.firstName}
// error={errors.firstName ? true : false}
variant="outlined"
onChange={this.handleChange}
fullWidth
autoComplete='off'
/>
<TextField
id="topics"
name="topics"
label="topics"
label="Topics"
className={classes.textField}
value={this.state.topics}
// helperText={errors.firstName}
// error={errors.firstName ? true : false}
variant="outlined"
onChange={this.handleChange}
onChange={this.handleChangeforTopics}
color="primary"
fullWidth
autoComplete='off'
/>
<TextField
id="content"
name="content"
label="content"
label="Content"
color="primary"
className={classes.textField}
value={this.state.content}
// helperText={errors.bio}
// error={errors.bio ? true : false}
value={this.state.value}
helperText={`${this.state.characterCount} characters left`}
multiline
rows="8"
rows="9"
variant="outlined"
onChange={this.handleChange}
inputProps={{
maxLength: 250
}}
onChange={(e) => {
this.handleChangeforPost(e);
this.handleChangeforCharacterCount(e);
}}
fullWidth
autoComplete='off'
/>
<Button
onClick={this.handleSubmit}
// disabled={loading}
variant="outlined"
color="primary"
>
Share Post
</Button>
</form>
</div>
);
}
}
// export default Writing_Microblogs;
export default withStyles(styles)(Writing_Microblogs);

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

@ -45,7 +45,7 @@ class Home extends Component {
<CardContent>
<Typography>
{
this.state.imageUrl ? (<img src={this.state.imageUrl} height="250" width="250" />) :
this.state.imageUrl ? (<img src={this.state.imageUrl} height="50" width="50" />) :
(<img src={noImage} height="50" width="50"/>)
}
</Typography>

4
twistter-frontend/src/pages/Login.js
View File

@ -111,7 +111,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}
@ -119,6 +119,7 @@ export class Login extends Component {
variant="outlined"
onChange={this.handleChange}
fullWidth
autoComplete='off'
/>
<TextField
id="password"
@ -132,6 +133,7 @@ export class Login extends Component {
variant="outlined"
onChange={this.handleChange}
fullWidth
autoComplete='off'
/>
<Button
type="submit"

4
twistter-frontend/src/pages/Signup.js
View File

@ -107,6 +107,7 @@ export class Signup extends Component {
variant="outlined"
onChange={this.handleChange}
fullWidth
autoComplete='off'
/>
<TextField
id="email"
@ -119,6 +120,7 @@ export class Signup extends Component {
variant="outlined"
onChange={this.handleChange}
fullWidth
autoComplete='off'
/>
<TextField
id="password"
@ -132,6 +134,7 @@ export class Signup extends Component {
variant="outlined"
onChange={this.handleChange}
fullWidth
autoComplete='off'
/>
<TextField
id="confirmPassword"
@ -145,6 +148,7 @@ export class Signup extends Component {
variant="outlined"
onChange={this.handleChange}
fullWidth
autoComplete='off'
/>
<Button
type="submit"

2
twistter-frontend/src/pages/user.js
View File

@ -132,7 +132,7 @@ class user extends Component {
<CardContent>
<Typography>
{
this.state.imageUrl ? (<img src={this.state.imageUrl} height="250" width="250" />) :
this.state.imageUrl ? (<img src={this.state.imageUrl} height="50" width="50" />) :
(<img src={noImage} height="50" width="50"/>)
}
</Typography>