ClaytonWWilson/CS307-Team24
1
0
Fork 0
mirror of https://github.com/ClaytonWWilson/CS307-Team24.git synced 2026-03-10 21:25:04 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

pull

Browse Source
This commit is contained in:
Danny Voltz
2019-10-02 16:37:10 -05:00
parent 29c07a9b14 e110bdd47a
commit 39098e917f
15 changed files with 344 additions and 336 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
twistter-frontend/src/App.css
View File

@@ -1,7 +1,3 @@
/* body {
} */
.app {
font-family: "Segoe UI";
font-size: large;
@@ -49,4 +45,5 @@
.container {
margin: 80px auto 0 auto;
max-width: 1200px;
}
color: #1da1f2;
}

42
twistter-frontend/src/App.js
View File

@@ -1,42 +0,0 @@
/* eslint-disable */
import React, { Component } from 'react';
import './App.css';
import { BrowserRouter as Router } from 'react-router-dom';
import Route from 'react-router-dom/Route';
import NavBar, { Navbar } from './components/layout/NavBar';
import home from './Home.js';
import register from './Register.js';
import login from './Login.js';
import user from './pages/user';
import writeMicroblog from './Writing_Microblogs.js';
import userLine from './Userline.js';
import logout from './Logout.js'
class App extends Component {
render() {
return (
<Router>
<div className='container'>
<Navbar />
</div>
<div className="app">
<Route exact path="/" component={home}/>
<Route exact path="/register" component={register}/>
<Route exact path="/login" component={login}/>
<Route exact path="/user" component={user}/>
<Route exact path="/home" component={writeMicroblog}/>
<Route exact path="/userline" component={userLine}/>
<Route exact path="/logout" component={logout}/>
</div>
</Router>
);
}
}
export default App;

47
twistter-frontend/src/Userline.js
View File

@@ -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;

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

@@ -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>

4
twistter-frontend/src/components/topic/ChipsArray.js
View File

@@ -3,7 +3,9 @@ import { makeStyles } from '@material-ui/core/styles';
import Chip from '@material-ui/core/Chip';
import Paper from '@material-ui/core/Paper';
const useStyles = makeStyles(theme => ({
// TODO: fix the style
const styles = makeStyles(theme => ({
root: {
display: 'flex',
justifyContent: 'center',

4
twistter-frontend/src/Home.js → twistter-frontend/src/pages/Home.js
View File

@@ -1,7 +1,7 @@
import React, { Component } from 'react';
import './App.css';
import '../App.css';
import logo from './images/twistter-logo.png';
import logo from '../images/twistter-logo.png';
class Home extends Component {

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

@@ -1,8 +1,8 @@
/* eslint-disable */
import React, { Component } from 'react';
import './App.css';
import '../App.css';
import logo from './images/twistter-logo.png';
import logo from '../images/twistter-logo.png';
import TextField from '@material-ui/core/TextField';
class Login extends Component {

4
twistter-frontend/src/Register.js → twistter-frontend/src/pages/Register.js
View File

@@ -1,7 +1,7 @@
import React, { Component } from 'react';
import './App.css';
import '../App.css';
import logo from './images/twistter-logo.png';
import logo from '../images/twistter-logo.png';
import TextField from '@material-ui/core/TextField';
class Register extends Component {

35
twistter-frontend/src/pages/edit.js
View File

@@ -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>