mirror of
https://github.com/ClaytonWWilson/CS307-Team24.git
synced 2025-12-15 18:08:46 +00:00
Revert "Can successfully register and login in UI"
This reverts commit 893cad7e7e.
reverting commit
This commit is contained in:
Aditya Sankaran
parent
5acc7a64e0
commit
3b682bae18
11
twistter-frontend/.gitignore
vendored
11
twistter-frontend/.gitignore
vendored
@ -1,9 +1,7 @@
|
||||
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
|
||||
# See https://help.github.com/ignore-files/ for more about ignoring files.
|
||||
|
||||
# dependencies
|
||||
/node_modules
|
||||
/.pnp
|
||||
.pnp.js
|
||||
|
||||
# testing
|
||||
/coverage
|
||||
@ -13,11 +11,8 @@
|
||||
|
||||
# misc
|
||||
.DS_Store
|
||||
.env.local
|
||||
.env.development.local
|
||||
.env.test.local
|
||||
.env.production.local
|
||||
|
||||
.env
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
14879
twistter-frontend/package-lock.json
generated
14879
twistter-frontend/package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -1,24 +1,29 @@
|
||||
{
|
||||
"name": "socialape-client",
|
||||
"name": "twistter-frontend",
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"@material-ui/core": "^4.4.3",
|
||||
"axios": "^0.19.0",
|
||||
"clsx": "^1.0.4",
|
||||
"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-redux": "^7.1.1",
|
||||
"react-router-dom": "^5.1.0",
|
||||
"react-scripts": "3.1.2"
|
||||
"react-scripts": "0.9.5",
|
||||
"redux": "^4.0.4",
|
||||
"redux-thunk": "^2.3.0"
|
||||
},
|
||||
"devDependencies": {},
|
||||
"scripts": {
|
||||
"start": "react-scripts start",
|
||||
"build": "react-scripts build",
|
||||
"test": "react-scripts test",
|
||||
"test": "react-scripts test --env=jsdom",
|
||||
"eject": "react-scripts eject"
|
||||
},
|
||||
"eslintConfig": {
|
||||
"extends": "react-app"
|
||||
},
|
||||
"browserslist": {
|
||||
"production": [
|
||||
">0.2%",
|
||||
@ -31,5 +36,5 @@
|
||||
"last 1 safari version"
|
||||
]
|
||||
},
|
||||
"proxy": "https://us-central1-socialape-2619.cloudfunctions.net/api"
|
||||
"proxy": "https://us-central1-twistter-e4649.cloudfunctions.net/api"
|
||||
}
|
||||
|
||||
33
twistter-frontend/public/404.html
Normal file
33
twistter-frontend/public/404.html
Normal 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>
|
||||
BIN
twistter-frontend/public/favicon.ico
Normal file
BIN
twistter-frontend/public/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 23 KiB |
@ -1,10 +1,21 @@
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>React App</title>
|
||||
<meta charset="utf-8">
|
||||
<title>Twistter</title>
|
||||
<style>
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-family: sans-serif;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
0
twistter-frontend/redux/actions/dataActions.js
Normal file
0
twistter-frontend/redux/actions/dataActions.js
Normal file
0
twistter-frontend/redux/actions/userActions.js
Normal file
0
twistter-frontend/redux/actions/userActions.js
Normal file
0
twistter-frontend/redux/reducers/dataReducer.js
Normal file
0
twistter-frontend/redux/reducers/dataReducer.js
Normal file
0
twistter-frontend/redux/reducers/uiReducer.js
Normal file
0
twistter-frontend/redux/reducers/uiReducer.js
Normal file
0
twistter-frontend/redux/reducers/userReducer.js
Normal file
0
twistter-frontend/redux/reducers/userReducer.js
Normal file
18
twistter-frontend/redux/store.js
Normal file
18
twistter-frontend/redux/store.js
Normal 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
0
twistter-frontend/redux/types.js
Normal file
@ -1,13 +1,49 @@
|
||||
html,
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
|
||||
"Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
|
||||
sans-serif;
|
||||
.app {
|
||||
font-family: "Segoe UI";
|
||||
font-size: large;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.app-logo {
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
.authButtons {
|
||||
border-radius: 100px;
|
||||
box-shadow: none;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
font-family: "Segoe UI";
|
||||
line-height: 20px;
|
||||
padding: 10px 200px;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.register {
|
||||
background-color: #1da1f2;
|
||||
border: 1px solid #fff;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.login {
|
||||
background-color: #fff;
|
||||
border: 1px solid #1da1f2;
|
||||
color: #1da1f2;
|
||||
}
|
||||
|
||||
.authInput {
|
||||
background-color: #eee;
|
||||
width:500px;
|
||||
height:40px;
|
||||
border: 0px;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.container {
|
||||
margin: 80px auto 0px auto;
|
||||
max-Width: 1200px;
|
||||
}
|
||||
.nav-container {
|
||||
margin: auto;
|
||||
margin: 80px auto 0 auto;
|
||||
max-width: 1200px;
|
||||
color: #1da1f2;
|
||||
}
|
||||
@ -1,53 +1,39 @@
|
||||
/* eslint-disable */
|
||||
import React, { Component } from 'react';
|
||||
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
|
||||
|
||||
import MuiThemeProvider from '@material-ui/core/styles/MuiThemeProvider';
|
||||
import createMuiTheme from '@material-ui/core/styles/createMuiTheme';
|
||||
|
||||
import './App.css';
|
||||
import Navbar from './components/Navbar';
|
||||
import home from './pages/home';
|
||||
import login from './pages/login';
|
||||
import signup from './pages/signup';
|
||||
|
||||
import { BrowserRouter as Router } from 'react-router-dom';
|
||||
import Route from 'react-router-dom/Route';
|
||||
import Navbar from './components/layout/NavBar';
|
||||
|
||||
import home from './pages/Home';
|
||||
import register from './pages/Register';
|
||||
import login from './pages/Login';
|
||||
import user from './pages/user';
|
||||
|
||||
|
||||
|
||||
const theme = createMuiTheme({
|
||||
palette: {
|
||||
primary: {
|
||||
light: '#33c9dc',
|
||||
main: '#00bcd4',
|
||||
dark: '#008394',
|
||||
contrastText: "#fff"
|
||||
},
|
||||
secondary: {
|
||||
light: '#ff6333',
|
||||
main: '#ff3d00',
|
||||
dark: '#b22a00',
|
||||
contrastText: '#fff'
|
||||
}
|
||||
}
|
||||
})
|
||||
import writeMicroblog from './Writing_Microblogs.js';
|
||||
import edit from './pages/edit.js';
|
||||
import userLine from './Userline.js';
|
||||
|
||||
class App extends Component {
|
||||
render() {
|
||||
return (
|
||||
<MuiThemeProvider theme={theme}>
|
||||
<div className="App">
|
||||
<Router>
|
||||
<div className='container' >
|
||||
<Navbar />
|
||||
<div className="container">
|
||||
<Switch>
|
||||
</div>
|
||||
<div className="app">
|
||||
<Route exact path="/" component={home}/>
|
||||
<Route exact path="/register" component={register}/>
|
||||
<Route exact path="/login" component={login}/>
|
||||
<Route exact path="/signup" component={signup} />
|
||||
</Switch>
|
||||
<Route exact path="/user" component={user}/>
|
||||
<Route exact path="/home" component={writeMicroblog}/>
|
||||
<Route exact path="/edit" component={edit}/>
|
||||
<Route exact path="/userline" component={userLine}/>
|
||||
</div>
|
||||
|
||||
</Router>
|
||||
</div>
|
||||
</MuiThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,9 +0,0 @@
|
||||
import React from 'react';
|
||||
import ReactDOM from 'react-dom';
|
||||
import App from './App';
|
||||
|
||||
it('renders without crashing', () => {
|
||||
const div = document.createElement('div');
|
||||
ReactDOM.render(<App />, div);
|
||||
ReactDOM.unmountComponentAtNode(div);
|
||||
});
|
||||
22
twistter-frontend/src/Logout.js
Normal file
22
twistter-frontend/src/Logout.js
Normal file
@ -0,0 +1,22 @@
|
||||
/* eslint-disable */
|
||||
import React, { Component} from 'react';
|
||||
import './App.css';
|
||||
import logo from './images/twistter-logo.png';
|
||||
import TextField from '@material-ui/core/TextField';
|
||||
|
||||
class Logout extends Component {
|
||||
render() {
|
||||
return(
|
||||
<div>
|
||||
<img src={logo} className="app-logo" alt="logo" />
|
||||
<br/><br/>
|
||||
<b>Logout of your Twistter Account</b>
|
||||
<br/><br/>
|
||||
<br/><br/>
|
||||
<button className="authButtons register" type="submit">Sign Out</button>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
}
|
||||
|
||||
export default Logout;
|
||||
64
twistter-frontend/src/Userline.js
Normal file
64
twistter-frontend/src/Userline.js
Normal file
@ -0,0 +1,64 @@
|
||||
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 {
|
||||
|
||||
constructor(props)
|
||||
{
|
||||
super(props);
|
||||
this.state = {
|
||||
microBlogs : [],
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
|
||||
axios.get('http://localhost:5001/twistter-e4649/us-central1/api/getallPostsforUser')
|
||||
.then(res => {
|
||||
const post = res.data;
|
||||
this.setState({microBlogs : post})
|
||||
|
||||
})
|
||||
}
|
||||
|
||||
render() {
|
||||
const sortedPosts = (this.state.microBlogs).sort((a,b) =>
|
||||
-a.createdAt.localeCompare(b.createdAt)
|
||||
)
|
||||
|
||||
return (
|
||||
<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;
|
||||
102
twistter-frontend/src/Writing_Microblogs.js
Normal file
102
twistter-frontend/src/Writing_Microblogs.js
Normal file
@ -0,0 +1,102 @@
|
||||
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: '',
|
||||
topics: '',
|
||||
characterCount: 250
|
||||
|
||||
};
|
||||
|
||||
|
||||
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);
|
||||
|
||||
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,
|
||||
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: 250, topics: ''})
|
||||
}
|
||||
|
||||
handleChangeforPost(event) {
|
||||
this.setState({value: event.target.value })
|
||||
}
|
||||
|
||||
handleChangeforCharacterCount(event) {
|
||||
const charCount = event.target.value.length
|
||||
const charRemaining = 250 - charCount
|
||||
this.setState({characterCount: charRemaining })
|
||||
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
<div style={{ width: "200px", height: "50px", marginTop: "180px", marginLeft: "50px" }}>
|
||||
<form>
|
||||
<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="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>
|
||||
</div>
|
||||
<div style={{ marginRight: "-100px" }}>
|
||||
<button onClick>Share Post</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
export default Writing_Microblogs;
|
||||
@ -1,27 +0,0 @@
|
||||
import React, { Component } from 'react';
|
||||
|
||||
|
||||
import AppBar from '@material-ui/core/AppBar';
|
||||
import ToolBar from '@material-ui/core/ToolBar';
|
||||
import Button from '@material-ui/core/Button';
|
||||
import Link from 'react-router-dom/Link';
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
class Navbar extends Component {
|
||||
render() {
|
||||
return (
|
||||
<AppBar>
|
||||
<ToolBar className="nav-container">
|
||||
<Button color="inherit" component={Link} to="/">Home</Button>
|
||||
<Button color="inherit" component={Link} to="/login">Login</Button>
|
||||
<Button color="inherit" component={Link} to="/signup">Sign up</Button>
|
||||
</ToolBar>
|
||||
</AppBar>
|
||||
);
|
||||
};
|
||||
}
|
||||
|
||||
export default Navbar;
|
||||
31
twistter-frontend/src/components/layout/NavBar.js
Normal file
31
twistter-frontend/src/components/layout/NavBar.js
Normal 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='/'>
|
||||
Home
|
||||
</Button>
|
||||
<Button component={ Link } to='/login'>
|
||||
Login
|
||||
</Button>
|
||||
<Button component={ Link } to='/register'>
|
||||
Register
|
||||
</Button>
|
||||
<Button component={ Link } to='/logout'>
|
||||
Logout
|
||||
</Button>
|
||||
</ToolBar>
|
||||
</AppBar>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
export default Navbar;
|
||||
54
twistter-frontend/src/components/topic/ChipsArray.js
Normal file
54
twistter-frontend/src/components/topic/ChipsArray.js
Normal file
@ -0,0 +1,54 @@
|
||||
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';
|
||||
|
||||
|
||||
// TODO: fix the style
|
||||
const styles = 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
BIN
twistter-frontend/src/images/no-img.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.8 KiB |
@ -1,8 +1,8 @@
|
||||
import React from 'react';
|
||||
import ReactDOM from 'react-dom';
|
||||
import App from './App';
|
||||
import * as serviceWorker from './serviceWorker';
|
||||
|
||||
ReactDOM.render(<App />, document.getElementById('root'));
|
||||
|
||||
serviceWorker.unregister();
|
||||
ReactDOM.render(
|
||||
<App />,
|
||||
document.getElementById('root')
|
||||
);
|
||||
@ -1,41 +1,37 @@
|
||||
import React, { Component } from 'react';
|
||||
import axios from 'axios';
|
||||
import '../App.css';
|
||||
|
||||
import Grid from '@material-ui/core/Grid';
|
||||
import logo from '../images/twistter-logo.png';
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
class home extends Component {
|
||||
state = {
|
||||
screams: null
|
||||
}
|
||||
componentDidMount() {
|
||||
axios.get('/screams')
|
||||
.then(res => {
|
||||
console.log(res.data);
|
||||
this.setState({
|
||||
screams: res.data
|
||||
});
|
||||
})
|
||||
.catch(err => console.log(err));
|
||||
}
|
||||
class Home extends Component {
|
||||
render() {
|
||||
let recentScreamsMarkup = this.state.screams ? (
|
||||
this.state.screams.map(scream => <p>{scream.body}</p>)
|
||||
) : (<p>Loading...</p>)
|
||||
return (
|
||||
<Grid container spacing={16}>
|
||||
<Grid item sm={8} xs={12}>
|
||||
{recentScreamsMarkup}
|
||||
</Grid>
|
||||
<Grid item sm={4} xs={12}>
|
||||
<p>Profile</p>
|
||||
</Grid>
|
||||
</Grid>
|
||||
<div>
|
||||
<div>
|
||||
<img src={logo} className="app-logo" alt="logo" />
|
||||
<br/><br/>
|
||||
<b>Welcome to Twistter!</b>
|
||||
<br/><br/>
|
||||
<b>See the most interesting topics people are following right now.</b>
|
||||
</div>
|
||||
|
||||
<br/><br/><br/><br/>
|
||||
|
||||
<div>
|
||||
<b>Join today or sign in if you already have an account.</b>
|
||||
<br/><br/>
|
||||
<form action="./register">
|
||||
<button className="authButtons register">Sign up</button>
|
||||
</form>
|
||||
<br/>
|
||||
<form action="./login">
|
||||
<button className="authButtons login">Sign in</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
export default home;
|
||||
export default Home;
|
||||
@ -1,108 +1,26 @@
|
||||
/* eslint-disable */
|
||||
import React, { Component } from 'react';
|
||||
import axios from 'axios';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
import Grid from '@material-ui/core/Grid';
|
||||
import Typography from '@material-ui/core/Typography';
|
||||
import TextField from '@material-ui/core/TextField';
|
||||
import Button from '@material-ui/core/Button';
|
||||
import withStyles from '@material-ui/core/styles/withStyles';
|
||||
import '../App.css';
|
||||
|
||||
import logo from '../images/twistter-logo.png';
|
||||
import TextField from '@material-ui/core/TextField';
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
const styles = {
|
||||
form: {
|
||||
textAlign: 'center'
|
||||
},
|
||||
image: {
|
||||
margin: '20px auto 20px auto'
|
||||
},
|
||||
pageTitle: {
|
||||
margin: '20px auto 20px auto'
|
||||
},
|
||||
textField: {
|
||||
margin: '20px auto 20px auto'
|
||||
},
|
||||
button: {
|
||||
margin: '20px auto 20px auto'
|
||||
},
|
||||
customError: {
|
||||
color: 'red',
|
||||
fontSize: '0.8rem'
|
||||
}
|
||||
};
|
||||
|
||||
class login extends Component {
|
||||
constructor() {
|
||||
super();
|
||||
this.state = {
|
||||
email: '',
|
||||
password: '',
|
||||
errors: {}
|
||||
};
|
||||
};
|
||||
handleSubmit = (event) => {
|
||||
event.preventDefault();
|
||||
const userData = {
|
||||
email: this.state.email,
|
||||
password: this.state.password
|
||||
};
|
||||
axios.post('/login', userData)
|
||||
.then(res => {
|
||||
console.log(res.data);
|
||||
localStorage.setItem('firebaseIdToken', `Bearer ${res.data.token}`);
|
||||
this.props.history.push('/');
|
||||
})
|
||||
.catch(err => {
|
||||
this.setState({
|
||||
errors: err.response.data
|
||||
});
|
||||
});
|
||||
};
|
||||
handleChange = (event) => {
|
||||
this.setState({
|
||||
[event.target.name]: event.target.value
|
||||
});
|
||||
};
|
||||
class Login extends Component {
|
||||
render() {
|
||||
const { classes } = this.props;
|
||||
const { errors } = this.state;
|
||||
return (
|
||||
<Grid container className={classes.form}>
|
||||
<Grid item sm>
|
||||
<img src={logo} alt="logo" className={classes.image} height="200" />
|
||||
<Typography variant="h4" className={classes.pageTitle}>
|
||||
Log in
|
||||
</Typography>
|
||||
<form noValidate onSubmit={this.handleSubmit}>
|
||||
<TextField id="email" name="email" type="email" label="Email" className={classes.textField}
|
||||
helperText={errors.email} error={errors.email ? true : false}
|
||||
value={this.state.email} onChange={this.handleChange} />
|
||||
<br />
|
||||
<TextField id="password" name="password" type="password" label="Password" className={classes.textField}
|
||||
helperText={errors.password} error={errors.password ? true : false}
|
||||
value={this.state.password} onChange={this.handleChange} />
|
||||
<br />
|
||||
{
|
||||
errors.general &&
|
||||
(<Typography variant="body2" className={classes.customError}>
|
||||
{errors.general}
|
||||
</Typography>)
|
||||
}
|
||||
<Button type="submit" variant="contained" color="primary" className={classes.button}>Log in</Button>
|
||||
</form>
|
||||
</Grid>
|
||||
</Grid>
|
||||
<div>
|
||||
<img src={logo} className="app-logo" alt="logo" />
|
||||
<br/><br/>
|
||||
<b>Log in to Twistter</b>
|
||||
<br/><br/>
|
||||
<TextField className="authInput" id="email" name="email" label="Email" />
|
||||
<br/><br/>
|
||||
<TextField className="authInput" id="password" name="password" label="Password" />
|
||||
<br/><br/>
|
||||
<button className="authButtons register" type="submit">Sign in</button>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
};
|
||||
}
|
||||
|
||||
login.propTypes = {
|
||||
classes: PropTypes.object.isRequired
|
||||
};
|
||||
|
||||
export default withStyles(styles)(login);
|
||||
export default Login;
|
||||
29
twistter-frontend/src/pages/Register.js
Normal file
29
twistter-frontend/src/pages/Register.js
Normal file
@ -0,0 +1,29 @@
|
||||
import React, { Component } from 'react';
|
||||
import '../App.css';
|
||||
|
||||
import logo from '../images/twistter-logo.png';
|
||||
import TextField from '@material-ui/core/TextField';
|
||||
|
||||
class Register extends Component {
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
<img src={logo} className="app-logo" alt="logo" />
|
||||
<br/><br/>
|
||||
<b>Create your account</b>
|
||||
<br/><br/>
|
||||
<TextField className="authInput" id="email" name="email" label="Email" />
|
||||
<br/><br/>
|
||||
<TextField className="authInput" id="username" name="username" label="Username" />
|
||||
<br/><br/>
|
||||
<TextField className="authInput" id="password" name="password" label="Password" />
|
||||
<br/><br/>
|
||||
<TextField className="authInput" id="confirmPassword" name="confirmPassword" label="Confirm Password" />
|
||||
<br/><br/>
|
||||
<button class="authButtons register" id="submit">Sign up</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Register;
|
||||
224
twistter-frontend/src/pages/edit.js
Normal file
224
twistter-frontend/src/pages/edit.js
Normal file
@ -0,0 +1,224 @@
|
||||
import React, { Component } from "react";
|
||||
import axios from "axios";
|
||||
import PropTypes from "prop-types";
|
||||
// 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
|
||||
|
||||
// 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";
|
||||
|
||||
const styles = {
|
||||
form: {
|
||||
textAlign: "center"
|
||||
},
|
||||
textField: {
|
||||
marginBottom: 30
|
||||
},
|
||||
pageTitle: {
|
||||
// marginTop: 20,
|
||||
marginBottom: 40
|
||||
},
|
||||
button: {
|
||||
positon: "relative",
|
||||
marginBottom: 30
|
||||
},
|
||||
progress: {
|
||||
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")
|
||||
.then((res) => {
|
||||
this.setState({
|
||||
firstName: res.data.firstName,
|
||||
lastName: res.data.lastName,
|
||||
email: res.data.email,
|
||||
handle: res.data.handle,
|
||||
bio: res.data.bio
|
||||
});
|
||||
})
|
||||
.catch((err) => {
|
||||
console.error(err);
|
||||
});
|
||||
}
|
||||
|
||||
// Constructor for the state
|
||||
constructor() {
|
||||
super();
|
||||
this.state = {
|
||||
firstName: "",
|
||||
lastName: "",
|
||||
email: "",
|
||||
handle: "",
|
||||
bio: "",
|
||||
loading: false,
|
||||
errors: {}
|
||||
};
|
||||
}
|
||||
|
||||
// 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({
|
||||
loading: true
|
||||
});
|
||||
const newProfileData = {
|
||||
firstName: this.state.firstName,
|
||||
lastName: this.state.lastName,
|
||||
email: this.state.email,
|
||||
handle: this.state.handle,
|
||||
bio: this.state.bio
|
||||
};
|
||||
axios
|
||||
.post("/updateProfileInfo", newProfileData)
|
||||
.then((res) => {
|
||||
this.setState({
|
||||
loading: false
|
||||
});
|
||||
// this.props.history.push('/');
|
||||
// TODO: Need to redirect user to their profile page
|
||||
})
|
||||
.catch((err) => {
|
||||
this.setState({
|
||||
errors: err.response.data,
|
||||
loading: false
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
// 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
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
render() {
|
||||
const { classes } = this.props;
|
||||
const { errors, loading } = this.state;
|
||||
|
||||
return (
|
||||
<Grid container className={classes.form}>
|
||||
<Grid item sm />
|
||||
<Grid item sm>
|
||||
<Typography variant="h2" className={classes.pageTitle}>
|
||||
Edit Profile
|
||||
</Typography>
|
||||
<form noValidate onSubmit={this.handleSubmit}>
|
||||
<Grid container className={classes.form} spacing={4}>
|
||||
<Grid item sm>
|
||||
<TextField
|
||||
id="firstName"
|
||||
name="firstName"
|
||||
label="First Name"
|
||||
className={classes.textField}
|
||||
value={this.state.firstName}
|
||||
helperText={errors.firstName}
|
||||
error={errors.firstName ? true : false}
|
||||
variant="outlined"
|
||||
onChange={this.handleChange}
|
||||
fullWidth
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item sm>
|
||||
<TextField
|
||||
id="lastName"
|
||||
name="lastName"
|
||||
label="Last Name"
|
||||
className={classes.textField}
|
||||
value={this.state.lastName}
|
||||
helperText={errors.lastname}
|
||||
error={errors.lastName ? true : false}
|
||||
variant="outlined"
|
||||
onChange={this.handleChange}
|
||||
fullWidth
|
||||
/>
|
||||
</Grid>
|
||||
</Grid>
|
||||
<TextField
|
||||
id="email"
|
||||
name="email"
|
||||
label="Email*"
|
||||
className={classes.textField}
|
||||
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"
|
||||
onChange={this.handleChange}
|
||||
fullWidth
|
||||
/>
|
||||
<TextField
|
||||
id="handle"
|
||||
name="handle"
|
||||
label="Handle*"
|
||||
className={classes.textField}
|
||||
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"
|
||||
onChange={this.handleChange}
|
||||
fullWidth
|
||||
/>
|
||||
<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
|
||||
/>
|
||||
<Button
|
||||
type="submit"
|
||||
variant="contained"
|
||||
color="primary"
|
||||
className={classes.button}
|
||||
disabled={loading}
|
||||
>
|
||||
Submit
|
||||
{loading && (
|
||||
<CircularProgress size={30} className={classes.progress} />
|
||||
)}
|
||||
</Button>
|
||||
</form>
|
||||
</Grid>
|
||||
<Grid item sm />
|
||||
</Grid>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
edit.propTypes = {
|
||||
classes: PropTypes.object.isRequired
|
||||
};
|
||||
|
||||
export default withStyles(styles)(edit);
|
||||
@ -1,120 +0,0 @@
|
||||
import React, { Component } from 'react';
|
||||
import axios from 'axios';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
import Grid from '@material-ui/core/Grid';
|
||||
import Typography from '@material-ui/core/Typography';
|
||||
import TextField from '@material-ui/core/TextField';
|
||||
import Button from '@material-ui/core/Button';
|
||||
import withStyles from '@material-ui/core/styles/withStyles';
|
||||
|
||||
import logo from '../images/twistter-logo.png';
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
const styles = {
|
||||
form: {
|
||||
textAlign: 'center'
|
||||
},
|
||||
image: {
|
||||
margin: '20px auto 20px auto'
|
||||
},
|
||||
pageTitle: {
|
||||
margin: '20px auto 20px auto'
|
||||
},
|
||||
textField: {
|
||||
margin: '20px auto 20px auto'
|
||||
},
|
||||
button: {
|
||||
margin: '20px auto 20px auto'
|
||||
},
|
||||
customError: {
|
||||
color: 'red',
|
||||
fontSize: '0.8rem'
|
||||
}
|
||||
};
|
||||
|
||||
class signup extends Component {
|
||||
constructor() {
|
||||
super();
|
||||
this.state = {
|
||||
email: '',
|
||||
username: '',
|
||||
password: '',
|
||||
confirmPassword: '',
|
||||
errors: {}
|
||||
};
|
||||
};
|
||||
handleSubmit = (event) => {
|
||||
event.preventDefault();
|
||||
const newUserData = {
|
||||
email: this.state.email,
|
||||
username: this.state.username,
|
||||
password: this.state.password,
|
||||
confirmPassword: this.state.confirmPassword
|
||||
};
|
||||
axios.post('/signup', newUserData)
|
||||
.then(res => {
|
||||
console.log(res.data);
|
||||
localStorage.setItem('firebaseIdToken', `Bearer ${res.data.token}`);
|
||||
this.props.history.push('/');
|
||||
})
|
||||
.catch(err => {
|
||||
this.setState({
|
||||
errors: err.response.data
|
||||
});
|
||||
});
|
||||
};
|
||||
handleChange = (event) => {
|
||||
this.setState({
|
||||
[event.target.name]: event.target.value
|
||||
});
|
||||
};
|
||||
render() {
|
||||
const { classes } = this.props;
|
||||
const { errors } = this.state;
|
||||
return (
|
||||
<Grid container className={classes.form}>
|
||||
<Grid item sm>
|
||||
<img src={logo} alt="logo" className={classes.image} height="200" />
|
||||
<Typography variant="h4" className={classes.pageTitle}>
|
||||
Sign up
|
||||
</Typography>
|
||||
<form noValidate onSubmit={this.handleSubmit}>
|
||||
<TextField id="email" name="email" type="email" label="Email" className={classes.textField}
|
||||
helperText={errors.email} error={errors.email ? true : false}
|
||||
value={this.state.email} onChange={this.handleChange} />
|
||||
<br />
|
||||
<TextField id="username" name="username" type="text" label="Username" className={classes.textField}
|
||||
helperText={errors.username} error={errors.username ? true : false}
|
||||
value={this.state.username} onChange={this.handleChange} />
|
||||
<br />
|
||||
<TextField id="password" name="password" type="password" label="Password" className={classes.textField}
|
||||
helperText={errors.password} error={errors.password ? true : false}
|
||||
value={this.state.password} onChange={this.handleChange} />
|
||||
<br />
|
||||
<TextField id="confirmPassword" name="confirmPassword" type="password" label="Confirm Password" className={classes.textField}
|
||||
helperText={errors.confirmPassword} error={errors.confirmPassword ? true : false}
|
||||
value={this.state.confirmPassword} onChange={this.handleChange} />
|
||||
<br />
|
||||
{
|
||||
errors.general &&
|
||||
(<Typography variant="body2" className={classes.customError}>
|
||||
{errors.general}
|
||||
</Typography>)
|
||||
}
|
||||
<Button type="submit" variant="contained" color="primary" className={classes.button}>Sign up</Button>
|
||||
</form>
|
||||
</Grid>
|
||||
</Grid>
|
||||
);
|
||||
};
|
||||
};
|
||||
|
||||
signup.propTypes = {
|
||||
classes: PropTypes.object.isRequired
|
||||
};
|
||||
|
||||
export default withStyles(styles)(signup);
|
||||
40
twistter-frontend/src/pages/user.js
Normal file
40
twistter-frontend/src/pages/user.js
Normal 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);
|
||||
@ -1,135 +0,0 @@
|
||||
// This optional code is used to register a service worker.
|
||||
// register() is not called by default.
|
||||
|
||||
// This lets the app load faster on subsequent visits in production, and gives
|
||||
// it offline capabilities. However, it also means that developers (and users)
|
||||
// will only see deployed updates on subsequent visits to a page, after all the
|
||||
// existing tabs open on the page have been closed, since previously cached
|
||||
// resources are updated in the background.
|
||||
|
||||
// To learn more about the benefits of this model and instructions on how to
|
||||
// opt-in, read https://bit.ly/CRA-PWA
|
||||
|
||||
const isLocalhost = Boolean(
|
||||
window.location.hostname === 'localhost' ||
|
||||
// [::1] is the IPv6 localhost address.
|
||||
window.location.hostname === '[::1]' ||
|
||||
// 127.0.0.1/8 is considered localhost for IPv4.
|
||||
window.location.hostname.match(
|
||||
/^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
|
||||
)
|
||||
);
|
||||
|
||||
export function register(config) {
|
||||
if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
|
||||
// The URL constructor is available in all browsers that support SW.
|
||||
const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href);
|
||||
if (publicUrl.origin !== window.location.origin) {
|
||||
// Our service worker won't work if PUBLIC_URL is on a different origin
|
||||
// from what our page is served on. This might happen if a CDN is used to
|
||||
// serve assets; see https://github.com/facebook/create-react-app/issues/2374
|
||||
return;
|
||||
}
|
||||
|
||||
window.addEventListener('load', () => {
|
||||
const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
|
||||
|
||||
if (isLocalhost) {
|
||||
// This is running on localhost. Let's check if a service worker still exists or not.
|
||||
checkValidServiceWorker(swUrl, config);
|
||||
|
||||
// Add some additional logging to localhost, pointing developers to the
|
||||
// service worker/PWA documentation.
|
||||
navigator.serviceWorker.ready.then(() => {
|
||||
console.log(
|
||||
'This web app is being served cache-first by a service ' +
|
||||
'worker. To learn more, visit https://bit.ly/CRA-PWA'
|
||||
);
|
||||
});
|
||||
} else {
|
||||
// Is not localhost. Just register service worker
|
||||
registerValidSW(swUrl, config);
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function registerValidSW(swUrl, config) {
|
||||
navigator.serviceWorker
|
||||
.register(swUrl)
|
||||
.then(registration => {
|
||||
registration.onupdatefound = () => {
|
||||
const installingWorker = registration.installing;
|
||||
if (installingWorker == null) {
|
||||
return;
|
||||
}
|
||||
installingWorker.onstatechange = () => {
|
||||
if (installingWorker.state === 'installed') {
|
||||
if (navigator.serviceWorker.controller) {
|
||||
// At this point, the updated precached content has been fetched,
|
||||
// but the previous service worker will still serve the older
|
||||
// content until all client tabs are closed.
|
||||
console.log(
|
||||
'New content is available and will be used when all ' +
|
||||
'tabs for this page are closed. See https://bit.ly/CRA-PWA.'
|
||||
);
|
||||
|
||||
// Execute callback
|
||||
if (config && config.onUpdate) {
|
||||
config.onUpdate(registration);
|
||||
}
|
||||
} else {
|
||||
// At this point, everything has been precached.
|
||||
// It's the perfect time to display a
|
||||
// "Content is cached for offline use." message.
|
||||
console.log('Content is cached for offline use.');
|
||||
|
||||
// Execute callback
|
||||
if (config && config.onSuccess) {
|
||||
config.onSuccess(registration);
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
};
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Error during service worker registration:', error);
|
||||
});
|
||||
}
|
||||
|
||||
function checkValidServiceWorker(swUrl, config) {
|
||||
// Check if the service worker can be found. If it can't reload the page.
|
||||
fetch(swUrl)
|
||||
.then(response => {
|
||||
// Ensure service worker exists, and that we really are getting a JS file.
|
||||
const contentType = response.headers.get('content-type');
|
||||
if (
|
||||
response.status === 404 ||
|
||||
(contentType != null && contentType.indexOf('javascript') === -1)
|
||||
) {
|
||||
// No service worker found. Probably a different app. Reload the page.
|
||||
navigator.serviceWorker.ready.then(registration => {
|
||||
registration.unregister().then(() => {
|
||||
window.location.reload();
|
||||
});
|
||||
});
|
||||
} else {
|
||||
// Service worker found. Proceed as normal.
|
||||
registerValidSW(swUrl, config);
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
console.log(
|
||||
'No internet connection found. App is running in offline mode.'
|
||||
);
|
||||
});
|
||||
}
|
||||
|
||||
export function unregister() {
|
||||
if ('serviceWorker' in navigator) {
|
||||
navigator.serviceWorker.ready.then(registration => {
|
||||
registration.unregister();
|
||||
});
|
||||
}
|
||||
}
|
||||
77
twistter-frontend/src/util/PostSkeleton.js
Normal file
77
twistter-frontend/src/util/PostSkeleton.js
Normal 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
64
twistter-frontend/src/util/ProfileSkeleton.js
Normal 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);
|
||||
Loading…
Reference in New Issue
Block a user