mirror of
https://github.com/ClaytonWWilson/CS307-Team24.git
synced 2025-12-16 18:28:47 +00:00
Updated UI to communicate with backend
This commit is contained in:
Aaron Sun
parent
13b57eedc6
commit
51d45c0736
1
twistter-client
Submodule
1
twistter-client
Submodule
@ -0,0 +1 @@
|
|||||||
|
Subproject commit cd5e13b6dd189450d2bc086c2ae8ebc2318369a2
|
||||||
18
twistter-frontend/.gitignore
vendored
18
twistter-frontend/.gitignore
vendored
@ -1,18 +0,0 @@
|
|||||||
# See https://help.github.com/ignore-files/ for more about ignoring files.
|
|
||||||
|
|
||||||
# dependencies
|
|
||||||
/node_modules
|
|
||||||
|
|
||||||
# testing
|
|
||||||
/coverage
|
|
||||||
|
|
||||||
# production
|
|
||||||
/build
|
|
||||||
|
|
||||||
# misc
|
|
||||||
.DS_Store
|
|
||||||
.env
|
|
||||||
npm-debug.log*
|
|
||||||
yarn-debug.log*
|
|
||||||
yarn-error.log*
|
|
||||||
|
|
||||||
File diff suppressed because it is too large
Load Diff
10374
twistter-frontend/package-lock.json
generated
10374
twistter-frontend/package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -1,38 +0,0 @@
|
|||||||
{
|
|
||||||
"name": "twistter-frontend",
|
|
||||||
"version": "0.1.0",
|
|
||||||
"private": true,
|
|
||||||
"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-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": {
|
|
||||||
"start": "react-scripts start",
|
|
||||||
"build": "react-scripts build",
|
|
||||||
"test": "react-scripts test --env=jsdom",
|
|
||||||
"eject": "react-scripts eject"
|
|
||||||
},
|
|
||||||
"browserslist": {
|
|
||||||
"production": [
|
|
||||||
">0.2%",
|
|
||||||
"not dead",
|
|
||||||
"not op_mini all"
|
|
||||||
],
|
|
||||||
"development": [
|
|
||||||
"last 1 chrome version",
|
|
||||||
"last 1 firefox version",
|
|
||||||
"last 1 safari version"
|
|
||||||
]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,33 +0,0 @@
|
|||||||
<!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>
|
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 23 KiB |
@ -1,21 +0,0 @@
|
|||||||
<!doctype html>
|
|
||||||
|
|
||||||
<html lang="en">
|
|
||||||
|
|
||||||
<head>
|
|
||||||
<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>
|
|
||||||
@ -1,18 +0,0 @@
|
|||||||
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, )
|
|
||||||
@ -1,48 +0,0 @@
|
|||||||
.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 0 auto;
|
|
||||||
max-width: 1200px;
|
|
||||||
}
|
|
||||||
@ -1,40 +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';
|
|
||||||
|
|
||||||
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}/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</Router>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export default App;
|
|
||||||
@ -1,37 +0,0 @@
|
|||||||
import React, { Component } from 'react';
|
|
||||||
import './App.css';
|
|
||||||
|
|
||||||
import logo from './images/twistter-logo.png';
|
|
||||||
|
|
||||||
|
|
||||||
class Home extends Component {
|
|
||||||
render() {
|
|
||||||
return (
|
|
||||||
<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;
|
|
||||||
@ -1,26 +0,0 @@
|
|||||||
/* 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 Login extends Component {
|
|
||||||
render() {
|
|
||||||
return (
|
|
||||||
<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>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
export default Login;
|
|
||||||
@ -1,29 +0,0 @@
|
|||||||
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;
|
|
||||||
@ -1,24 +0,0 @@
|
|||||||
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;
|
|
||||||
@ -1,86 +0,0 @@
|
|||||||
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;
|
|
||||||
@ -1,29 +0,0 @@
|
|||||||
/* 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>
|
|
||||||
|
|
||||||
</ToolBar>
|
|
||||||
</AppBar>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export default Navbar;
|
|
||||||
@ -1,52 +0,0 @@
|
|||||||
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>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 1.8 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 60 KiB |
@ -1,8 +0,0 @@
|
|||||||
import React from 'react';
|
|
||||||
import ReactDOM from 'react-dom';
|
|
||||||
import App from './App';
|
|
||||||
|
|
||||||
ReactDOM.render(
|
|
||||||
<App />,
|
|
||||||
document.getElementById('root')
|
|
||||||
);
|
|
||||||
@ -1,40 +0,0 @@
|
|||||||
/* 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,77 +0,0 @@
|
|||||||
/* 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);
|
|
||||||
|
|
||||||
@ -1,64 +0,0 @@
|
|||||||
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