Add basic theme, add super basic user page
This commit is contained in:
parent
922299010c
commit
587b3a26c1
9 changed files with 85 additions and 4 deletions
|
@ -4,7 +4,7 @@
|
|||
<meta charset="utf-8" />
|
||||
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<meta name="theme-color" content="#000000" />
|
||||
<meta name="theme-color" content="#EEEEEE" />
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css">
|
||||
<!--
|
||||
manifest.json provides metadata used when your web app is installed on a
|
||||
|
@ -20,6 +20,9 @@
|
|||
work correctly both with client-side routing and a non-root public URL.
|
||||
Learn how to configure a non-root public URL by running `npm run build`.
|
||||
-->
|
||||
<style type="text/css">body{margin:40px
|
||||
auto;max-width:650px;line-height:1.6;font-size:18px;color:#444;padding:0
|
||||
10px}h1,h2,h3{line-height:1.2}</style>
|
||||
<title>React App</title>
|
||||
</head>
|
||||
<body>
|
||||
|
|
|
@ -9,3 +9,13 @@ export const fetchPost = (slug) => async (dispatch) => {
|
|||
const response = await sudoscientist.get('/blog/by-slug/' + slug);
|
||||
dispatch({ type: 'FETCH_POST', payload: response.data })
|
||||
};
|
||||
|
||||
export const fetchUserProfile = (user) => async (dispatch) => {
|
||||
const response = await sudoscientist.get('/users/' + user);
|
||||
dispatch({ type: 'FETCH_USER_PROFILE', payload: response.data })
|
||||
};
|
||||
|
||||
export const fetchUserPosts = (user) => async (dispatch) => {
|
||||
const response = await sudoscientist.get('/blog/by-author/' + user);
|
||||
dispatch({ type: 'FETCH_USER_POSTS', payload: response.data })
|
||||
};
|
||||
|
|
|
@ -3,6 +3,7 @@ import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
|
|||
import NavBar from './NavBar';
|
||||
import PostList from './PostList';
|
||||
import Post from './Post';
|
||||
import User from './User';
|
||||
|
||||
function App() {
|
||||
return (
|
||||
|
@ -13,6 +14,7 @@ function App() {
|
|||
<Route exact path="/" component={PostList}/>
|
||||
<Route exact path="/posts/" component={PostList}/>
|
||||
<Route path="/posts/:slug" component={Post}/>
|
||||
<Route path="/users/:user" component={User}/>
|
||||
</Switch>
|
||||
</Router>
|
||||
</>
|
||||
|
|
|
@ -8,9 +8,8 @@ class NavBar extends Component {
|
|||
classes += ' active';
|
||||
}
|
||||
return (
|
||||
<div className="ui four item menu">
|
||||
<div className="ui three item secondary menu">
|
||||
<Link to="/" className='item'>sudoscientist:~#</Link>
|
||||
<Link to="/users/" className={classes}>Users</Link>
|
||||
<Link to="/posts/" className={classes}>Posts</Link>
|
||||
<Link to="/about/" className={classes}>About</Link>
|
||||
</div>
|
||||
|
|
|
@ -30,6 +30,7 @@ class Post extends React.Component {
|
|||
<div className="content">
|
||||
<div className="description">
|
||||
<h1><b><u><Link to={"/posts/" + post.slug}>{post.title}</Link></u></b></h1>
|
||||
<h3><b>By <Link to={"/users/"+ post.author}>{post.author}</Link></b></h3>
|
||||
<ReactMarkdown source={post.content} />
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
@ -18,6 +18,7 @@ class PostList extends React.Component {
|
|||
<div className="content">
|
||||
<div className="description">
|
||||
<h1><b><u><Link to={"/posts/" + post.slug}>{post.title}</Link></u></b></h1>
|
||||
<h3><b>By <Link to={"/users/"+ post.author}>{post.author}</Link></b></h3>
|
||||
<ReactMarkdown source={post.content} />
|
||||
</div>
|
||||
</div>
|
||||
|
|
51
src/components/User.js
Normal file
51
src/components/User.js
Normal file
|
@ -0,0 +1,51 @@
|
|||
import React from 'react';
|
||||
import { connect } from 'react-redux';
|
||||
import { fetchUserProfile } from '../actions';
|
||||
|
||||
class User extends React.Component {
|
||||
constructor (props) {
|
||||
super(props)
|
||||
this.state = {
|
||||
isLoading: true
|
||||
}
|
||||
}
|
||||
componentDidMount() {
|
||||
const { user } = this.props.match.params
|
||||
this.props.fetchUserProfile(user)
|
||||
.then(() => this.setState({isLoading: false}))
|
||||
}
|
||||
|
||||
render () {
|
||||
const {user} = this.props
|
||||
const {isLoading} = this.state
|
||||
|
||||
if (isLoading) {
|
||||
return <p>Loading</p>
|
||||
} else {
|
||||
const currentUser = user.currentUser
|
||||
return (
|
||||
<div className="item" key={currentUser.username}>
|
||||
<div className="content">
|
||||
<div className="description">
|
||||
<h1><b>{currentUser.username}</b></h1>
|
||||
<h3><u>Email: {currentUser.email}</u></h3>
|
||||
<div>Location: {currentUser.location}</div>
|
||||
<div>About Me: {currentUser.bio}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const mapStateToProps = (state) => {
|
||||
return {
|
||||
user: state.user,
|
||||
};
|
||||
}
|
||||
|
||||
export default connect(
|
||||
mapStateToProps,
|
||||
{ fetchUserProfile }
|
||||
)(User);
|
|
@ -1,6 +1,8 @@
|
|||
import { combineReducers } from 'redux';
|
||||
import postsReducer from './postsReducer';
|
||||
import userReducer from './userReducer';
|
||||
|
||||
export default combineReducers({
|
||||
posts: postsReducer
|
||||
posts: postsReducer,
|
||||
user: userReducer
|
||||
});
|
||||
|
|
12
src/reducers/userReducer.js
Normal file
12
src/reducers/userReducer.js
Normal file
|
@ -0,0 +1,12 @@
|
|||
const initialState = {
|
||||
currentUser: ""
|
||||
};
|
||||
|
||||
export default (state = initialState, action) => {
|
||||
switch (action.type) {
|
||||
case 'FETCH_USER_PROFILE':
|
||||
return {currentUser: action.payload}
|
||||
default:
|
||||
return state;
|
||||
}
|
||||
};
|
Reference in a new issue