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

Reconciled with new pull from master

Browse Source
This commit is contained in:
Aaron Sun
2019-09-30 23:22:09 -04:00
parent 201f5d8949 7969d3b10b
commit 4517bc6756
36 changed files with 6582 additions and 9171 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14878
twistter-frontend/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

10
twistter-frontend/package.json
View File

@@ -5,10 +5,16 @@
"dependencies": {
"@material-ui/core": "^4.4.3",
"axios": "^0.19.0",
"create-react-app": "^3.1.2",
"install": "^0.13.0",
"node-pre-gyp": "^0.13.0",
"react": "^16.9.0",
"react-dom": "^16.9.0",
"react-router-dom": "^5.0.1",
"react-scripts": "^3.1.2"
"react-redux": "^7.1.1",
"react-router-dom": "^5.1.0",
"react-scripts": "0.9.5",
"redux": "^4.0.4",
"redux-thunk": "^2.3.0"
},
"devDependencies": {},
"scripts": {

33
twistter-frontend/public/404.html Normal file
View File

@@ -0,0 +1,33 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Page Not Found</title>
<style media="screen">
body { background: #ECEFF1; color: rgba(0,0,0,0.87); font-family: Roboto, Helvetica, Arial, sans-serif; margin: 0; padding: 0; }
#message { background: white; max-width: 360px; margin: 100px auto 16px; padding: 32px 24px 16px; border-radius: 3px; }
#message h3 { color: #888; font-weight: normal; font-size: 16px; margin: 16px 0 12px; }
#message h2 { color: #ffa100; font-weight: bold; font-size: 16px; margin: 0 0 8px; }
#message h1 { font-size: 22px; font-weight: 300; color: rgba(0,0,0,0.6); margin: 0 0 16px;}
#message p { line-height: 140%; margin: 16px 0 24px; font-size: 14px; }
#message a { display: block; text-align: center; background: #039be5; text-transform: uppercase; text-decoration: none; color: white; padding: 16px; border-radius: 4px; }
#message, #message a { box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); }
#load { color: rgba(0,0,0,0.4); text-align: center; font-size: 13px; }
@media (max-width: 600px) {
body, #message { margin-top: 0; background: white; box-shadow: none; }
body { border-top: 16px solid #ffa100; }
}
</style>
</head>
<body>
<div id="message">
<h2>404</h2>
<h1>Page Not Found</h1>
<p>The specified file was not found on this website. Please check the URL for mistakes and try again.</p>
<h3>Why am I seeing this?</h3>
<p>This page was generated by the Firebase Command-Line Interface. To modify it, edit the <code>404.html</code> file in your project's configured <code>public</code> directory.</p>
</div>
</body>
</html>

0
twistter-frontend/redux/actions/dataActions.js Normal file
View File

0
twistter-frontend/redux/actions/userActions.js Normal file
View File

0
twistter-frontend/redux/reducers/dataReducer.js Normal file
View File

0
twistter-frontend/redux/reducers/uiReducer.js Normal file
View File

0
twistter-frontend/redux/reducers/userReducer.js Normal file
View File

18
twistter-frontend/redux/store.js Normal file
View File

@@ -0,0 +1,18 @@
import { createStore, combineReducers, applyMiddleware, compose } from 'redux';
import thunk from 'redux-thunk';
import userReducer from './reducers/userReducer';
import dataReducer from './reducers/dataReducer';
import uiReducer from './reducers/uiReducer';
const initialState = {};
const middleware = {thunk};
const reducers = combineReducers({
user: userReducer,
data: dataReducer,
UI: uiReducer
});
//const store = createStore(reducers, )

0
twistter-frontend/redux/types.js Normal file
View File

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

@@ -37,4 +37,12 @@
.authInput {
background-color: #eee;
width:500px;
height:40px;
border: 0px;
padding: 10px;
}
.container {
margin: 80px auto 0 auto;
max-width: 1200px;
}

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

@@ -1,22 +1,32 @@
/* 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 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';
class App extends Component {
render() {
return (
<Router>
<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}/>
</div>
</Router>

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

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

3
twistter-frontend/src/Login.js
View File

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

2
twistter-frontend/src/Register.js
View File

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

24
twistter-frontend/src/Userline.js Normal file
View File

@@ -0,0 +1,24 @@
import React, { Component } from "react";
import { BrowserRouter as Router } from 'react-router-dom';
import Route from 'react-router-dom/Route';
import axios from 'axios';
class Userline extends Component {
constructor(props)
{
super(props);
this.state = {
}
}
render() {
return (
<p>Hi</p>
)
}
}
export default Userline;

86
twistter-frontend/src/Writing_Microblogs.js Normal file
View File

@@ -0,0 +1,86 @@
import React, { Component } from "react";
import { BrowserRouter as Router } from 'react-router-dom';
import Route from 'react-router-dom/Route';
import axios from 'axios';
class Writing_Microblogs extends Component {
constructor(props) {
super(props);
this.state = {
value: '',
title: '',
characterCount: 10
};
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
this.handleChangeforPost = this.handleChangeforPost.bind(this);
}
handleChange(event) {
this.setState( {title: event.target.value });
}
handleSubmit(event) {
// alert('A title for the microblog was inputted: ' + this.state.title + '\nA microblog was posted: ' + this.state.value);
const response = axios.post(
'http://localhost:5001/twistter-e4649/us-central1/api/putPost',
{ body: this.state.value,
userHandle: "new user",
userImage: "bing-url",
microBlogTitle: this.state.title
},
{ headers: { 'Content-Type': 'application/json'} }
)
console.log(response.data);
event.preventDefault();
}
handleChangeforPost(event) {
this.setState({value: event.target.value })
}
handleChangeforCharacterCount(event) {
const charCount = event.target.value.length
const charRemaining = 10 - charCount
this.setState({characterCount: charRemaining })
}
render() {
return (
<div>
<div style={{ width: "200px", height: "50px", marginTop: "180px", marginLeft: "30px" }}>
<form>
<input type="text" placeholder="Enter Microblog Title" value={this.state.title} onChange={this.handleChange} />
</form>
</div>
<div style={{ width: "200px", marginLeft: "50px"}}>
<form onSubmit={this.handleSubmit}>
<textarea value={this.state.value} required maxLength="10" 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>
</div>
<div style={{ marginRight: "-100px" }}>
<button onClick>Share Post</button>
</div>
</form>
</div>
</div>
);
}
}
export default Writing_Microblogs;

31
twistter-frontend/src/components/layout/NavBar.js Normal file
View File

@@ -0,0 +1,31 @@
/* eslint-disable */
import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import AppBar from '@material-ui/core/AppBar';
import ToolBar from '@material-ui/core/Toolbar';
import Button from '@material-ui/core/Button';
export class Navbar extends Component {
render() {
return (
<AppBar>
<ToolBar>
<Button component={ Link } to='/user'>
User
</Button>
<Button component={ Link } to='/login'>
Login
</Button>
<Button component={ Link } to='/register'>
Register
</Button>
<Button component={ Link } to='/'>
Home
</Button>
</ToolBar>
</AppBar>
)
}
}
export default Navbar;

0
twistter-frontend/src/components/profile/StaticProfile.js Normal file
View File

52
twistter-frontend/src/components/topic/ChipsArray.js Normal file
View File

@@ -0,0 +1,52 @@
import React from 'react';
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 => ({
root: {
display: 'flex',
justifyContent: 'center',
flexWrap: 'wrap',
padding: theme.spacing(0.5),
},
chip: {
margin: theme.spacing(0.5),
},
}));
export default function ChipsArray() {
const classes = useStyles();
const [chipData, setChipData] = React.useState([
{ key: 0, label: 'Angular' },
{ key: 1, label: 'jQuery' },
{ key: 2, label: 'Polymer' },
{ key: 3, label: 'React' },
{ key: 4, label: 'Vue.js' },
]);
const handleDelete = chipToDelete => () => {
if (chipToDelete.label === 'React') {
alert('Why would you want to delete React?! :)');
return;
}
setChipData(chips => chips.filter(chip => chip.key !== chipToDelete.key));
};
return (
<Paper className={classes.root}>
{chipData.map(data => {
return (
<Chip
key={data.key}
label={data.label}
onDelete={handleDelete(data)}
className={classes.chip}
/>
);
})}
</Paper>
);
}

BIN
twistter-frontend/src/images/no-img.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.8 KiB

0
twistter-frontend/src/twistter-logo.png → twistter-frontend/src/images/twistter-logo.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 60 KiB

After

Width:  |  Height:  |  Size: 60 KiB

40
twistter-frontend/src/pages/user.js Normal file
View File

@@ -0,0 +1,40 @@
/* eslint-disable */
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import StaticProfile from '../components/profile/StaticProfile';
import Grid from '@material-ui/core/Grid';
import PostSkeleton from '../util/PostSkeleton';
import { connect } from 'react-redux';
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>
)
}
}
user.propTypes = {
// getUserData: PropTypes.func.isRequired,
//data: PropTypes.object.isRequired
};
const mapStateToProps = (state) => ({
data: state.data
});
export default connect(user);

77
twistter-frontend/src/util/PostSkeleton.js Normal file
View File

@@ -0,0 +1,77 @@
/* eslint-disable */
import React, { Fragment } from 'react';
import NoImg from '../images/no-img.png';
import PropTypes from 'prop-types';
// MUI
import Card from '@material-ui/core/Card';
import CardMedia from '@material-ui/core/CardMedia';
import CardContent from '@material-ui/core/CardContent';
import withStyles from '@material-ui/core/styles/withStyles';
const styles = (theme) => ({
...theme,
card: {
display: 'flex',
marginBottom: 20
},
cardContent: {
width: '100%',
flexDirection: 'column',
padding: 25
},
cover: {
minWidth: 200,
objectFit: 'cover'
},
handle: {
width: 60,
height: 18,
backgroundColor: theme.palette.primary.main,
marginBottom: 7
},
date: {
height: 14,
width: 100,
backgroundColor: 'rgba(0,0,0, 0.3)',
marginBottom: 10
},
fullLine: {
height: 15,
width: '90%',
backgroundColor: 'rgba(0,0,0, 0.6)',
marginBottom: 10
},
halfLine: {
height: 15,
width: '50%',
backgroundColor: 'rgba(0,0,0, 0.6)',
marginBottom: 10
}
});
const PostSkeleton = (props) => {
const { classes } = props;
const content = Array.from({ length: 5 }).map((item, index) => (
<Card className={classes.card} key={index}>
<CardMedia className={classes.cover} image={NoImg} />
<CardContent className={classes.cardContent}>
<div className={classes.handle} />
<div className={classes.date} />
<div className={classes.fullLine} />
<div className={classes.fullLine} />
<div className={classes.halfLine} />
</CardContent>
</Card>
));
return <Fragment>{content}</Fragment>;
};
PostSkeleton.propTypes = {
classes: PropTypes.object.isRequired
};
export default withStyles(styles)(PostSkeleton);

64
twistter-frontend/src/util/ProfileSkeleton.js Normal file
View File

@@ -0,0 +1,64 @@
import React from 'react';
import PropTypes from 'prop-types';
import withStyles from '@material-ui/core/styles/withStyles';
import NoImg from '../images/no-img.png';
// MUI
import Paper from '@material-ui/core/Paper';
// Icons
import LocationOn from '@material-ui/icons/LocationOn';
import LinkIcon from '@material-ui/icons/Link';
import CalendarToday from '@material-ui/icons/CalendarToday';
const styles = (theme) => ({
...theme,
handle: {
height: 20,
backgroundColor: theme.palette.primary.main,
width: 60,
margin: '0 auto 7px auto'
},
fullLine: {
height: 15,
backgroundColor: 'rgba(0,0,0,0.6)',
width: '100%',
marginBottom: 10
},
halfLine: {
height: 15,
backgroundColor: 'rgba(0,0,0,0.6)',
width: '50%',
marginBottom: 10
}
});
const ProfileSkeleton = (props) => {
const { classes } = props;
return (
<Paper className={classes.paper}>
<div className={classes.profile}>
<div className="image-wrapper">
<img src={NoImg} alt="profile" className="profile-image" />
</div>
<hr />
<div className="profile-details">
<div className={classes.handle} />
<hr />
<div className={classes.fullLine} />
<div className={classes.fullLine} />
<hr />
<LocationOn color="primary" /> <span>Location</span>
<hr />
<LinkIcon color="primary" /> https://website.com
<hr />
<CalendarToday color="primary" /> Joined date
</div>
</div>
</Paper>
);
};
ProfileSkeleton.propTypes = {
classes: PropTypes.object.isRequired
};
export default withStyles(styles)(ProfileSkeleton);