Asara/sudoscientist-js-frontend
Archived
1
0
Fork 0
Code Issues Pull requests Activity

Add basic theme, add super basic user page

Browse source
This commit is contained in:
Amarpreet Minhas 2019-07-27 18:17:42 -04:00
parent 922299010c
commit 587b3a26c1
9 changed files with 85 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
public/index.html
View file

@ -4,7 +4,7 @@
<meta charset="utf-8" /> <meta charset="utf-8" />
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" /> <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" /> <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"> <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 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. 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`. 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> <title>React App</title>
</head> </head>
<body> <body>

10
src/actions/index.js
View file

@ -9,3 +9,13 @@ export const fetchPost = (slug) => async (dispatch) => {
const response = await sudoscientist.get('/blog/by-slug/' + slug); const response = await sudoscientist.get('/blog/by-slug/' + slug);
dispatch({ type: 'FETCH_POST', payload: response.data }) 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 })
};

2
src/components/App.js
View file

@ -3,6 +3,7 @@ import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
import NavBar from './NavBar'; import NavBar from './NavBar';
import PostList from './PostList'; import PostList from './PostList';
import Post from './Post'; import Post from './Post';
import User from './User';
function App() { function App() {
return ( return (
@ -13,6 +14,7 @@ function App() {
<Route exact path="/" component={PostList}/> <Route exact path="/" component={PostList}/>
<Route exact path="/posts/" component={PostList}/> <Route exact path="/posts/" component={PostList}/>
<Route path="/posts/:slug" component={Post}/> <Route path="/posts/:slug" component={Post}/>
<Route path="/users/:user" component={User}/>
</Switch> </Switch>
</Router> </Router>
</> </>

3
src/components/NavBar.js
View file

@ -8,9 +8,8 @@ class NavBar extends Component {
classes += ' active'; classes += ' active';
} }
return ( return (
<div className="ui four item menu"> <div className="ui three item secondary menu">
<Link to="/" className='item'>sudoscientist:~#</Link> <Link to="/" className='item'>sudoscientist:~#</Link>
<Link to="/users/" className={classes}>Users</Link>
<Link to="/posts/" className={classes}>Posts</Link> <Link to="/posts/" className={classes}>Posts</Link>
<Link to="/about/" className={classes}>About</Link> <Link to="/about/" className={classes}>About</Link>
</div> </div>

1
src/components/Post.js
View file

@ -30,6 +30,7 @@ class Post extends React.Component {
<div className="content"> <div className="content">
<div className="description"> <div className="description">
<h1><b><u><Link to={"/posts/" + post.slug}>{post.title}</Link></u></b></h1> <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} /> <ReactMarkdown source={post.content} />
</div> </div>
</div> </div>

1
src/components/PostList.js
View file

@ -18,6 +18,7 @@ class PostList extends React.Component {
<div className="content"> <div className="content">
<div className="description"> <div className="description">
<h1><b><u><Link to={"/posts/" + post.slug}>{post.title}</Link></u></b></h1> <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} /> <ReactMarkdown source={post.content} />
</div> </div>
</div> </div>

51
src/components/User.js Normal file
View 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);

4
src/reducers/index.js
View file

@ -1,6 +1,8 @@
import { combineReducers } from 'redux'; import { combineReducers } from 'redux';
import postsReducer from './postsReducer'; import postsReducer from './postsReducer';
import userReducer from './userReducer';
export default combineReducers({ export default combineReducers({
posts: postsReducer posts: postsReducer,
user: userReducer
}); });

12
src/reducers/userReducer.js Normal file
View 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;
}
};