mirror of
https://github.com/ClaytonWWilson/CS307-Team24.git
synced 2025-12-16 02:08: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