Change routes and component structure

This commit is contained in:
LordMathis 2017-12-30 22:26:39 +01:00
parent f9cdedd549
commit 397d3f2811
10 changed files with 45 additions and 62 deletions

View File

@ -1,12 +1,20 @@
import React from 'react'; import React, {Component} from 'react';
// import { Home } from '.';
export const About = () => ( export default class About extends Component {
<div>
<div className="content-wrapper">
<h1>About</h1>
</div>
</div>
);
export default About; render () {
if (this.props.isLoading) {
return (
<div className="content-wrapper">
<h1>Loading</h1>
</div>
);
}
return (
<div className="content-wrapper">
{ this.props.about.hello }
</div>
)
}
}

View File

@ -1,17 +1,14 @@
import React from 'react'; import React from 'react';
import { Route, Switch } from 'react-router-dom'; import { Route, Switch } from 'react-router-dom';
import { Home, About, Portfolio, Resume, NotFoundPage } from '.'; import { Home, NotFoundPage } from '.';
import { BlogContainer, PostContainer } from '../containers'; import { BlogContainer, PostContainer } from '../containers';
export const App = () => ( export const App = () => (
<div> <div>
<Route component={Home} /> <Route component={Home} />
<Switch> <Switch>
<Route exact path="/about" component={About} />
<Route exact path="/blog" component={BlogContainer} /> <Route exact path="/blog" component={BlogContainer} />
<Route path="/blog/post/:postname" component={PostContainer} /> <Route path="/blog/post/:postname" component={PostContainer} />
<Route exact path="/portfolio" component={Portfolio} />
<Route exact path="/resume" component={Resume} />
<Route component={NotFoundPage} /> <Route component={NotFoundPage} />
</Switch> </Switch>
</div> </div>

View File

@ -5,7 +5,9 @@ export default class Blog extends Component {
render() { render() {
if (this.props.isLoading) { if (this.props.isLoading) {
return ( return (
<h1>Loading</h1> <div className="content-wrapper">
<h1>Loading</h1>
</div>
); );
} }

View File

@ -37,26 +37,11 @@ export default class Home extends Component {
</div> </div>
<div className="menu-links"> <div className="menu-links">
<ul> <ul>
<li>
<Link to="/about">
<i className="fa fa-question" aria-hidden="true" /> About
</Link>
</li>
<li> <li>
<Link to="/blog"> <Link to="/blog">
<i className="fa fa-pencil-square-o" aria-hidden="true" /> Blog <i className="fa fa-pencil-square-o" aria-hidden="true" /> Blog
</Link> </Link>
</li> </li>
<li>
<Link to="/portfolio">
<i className="fa fa-briefcase" aria-hidden="true" /> Portfolio
</Link>
</li>
<li>
<Link to="/resume">
<i className="fa fa-file-text-o" aria-hidden="true" /> Resume
</Link>
</li>
</ul> </ul>
</div> </div>
</div> </div>

View File

@ -1,11 +0,0 @@
import React from 'react';
export const Portfolio = () => (
<div>
<div className="content-wrapper">
<h1>Portfolio</h1>
</div>
</div>
);
export default Portfolio;

View File

@ -1,11 +0,0 @@
import React from 'react';
export const Resume = () => (
<div>
<div className="content-wrapper">
<h1>Resume</h1>
</div>
</div>
);
export default Resume;

View File

@ -1,8 +1,6 @@
export { default as Home } from './Home'; export { default as Home } from './Home';
export { default as About } from './About';
export { default as Blog } from './Blog'; export { default as Blog } from './Blog';
export { default as About } from './About';
export { default as Post } from './Post'; export { default as Post } from './Post';
export { default as Portfolio } from './Portfolio';
export { default as Resume } from './Resume';
export { default as NotFoundPage } from './NotFoundPage'; export { default as NotFoundPage } from './NotFoundPage';
export { default as App } from './App'; export { default as App } from './App';

View File

@ -1,6 +1,6 @@
import React, {Component} from 'react'; import React, {Component} from 'react';
import axios from 'axios'; import axios from 'axios';
import {Blog} from '../components'; import {About, Blog} from '../components';
export default class BlogContainer extends Component { export default class BlogContainer extends Component {
@ -8,14 +8,22 @@ export default class BlogContainer extends Component {
super(); super();
this.state = { this.state = {
isLoading: true, isLoadingBlog: true,
isLoadingAbout: true,
} }
} }
componentDidMount() { componentDidMount() {
axios.get('/api/about').then((res) => {
this.setState({
isLoadingAbout: false,
about: res.data,
});
})
axios.get('/api/blog').then((res) => { axios.get('/api/blog').then((res) => {
this.setState({ this.setState({
isLoading: false, isLoadingBlog: false,
posts: res.data, posts: res.data,
}); });
}) })
@ -23,8 +31,12 @@ export default class BlogContainer extends Component {
render() { render() {
return ( return (
<Blog isLoading={this.state.isLoading} <div>
posts={this.state.posts}/> <About isLoading={this.state.isLoadingAbout}
about={this.state.about}/>
<Blog isLoading={this.state.isLoadingBlog}
posts={this.state.posts}/>
</div>
) )
} }
} }

View File

@ -7,6 +7,10 @@ api.get('/blog', (req, res) => {
res.json(data.posts); res.json(data.posts);
}); });
api.get('/about', (req, res) => {
res.json({"hello": "hello"});
});
api.get('/post/:postname', (req, res) => { api.get('/post/:postname', (req, res) => {
const postname = req.params.postname; const postname = req.params.postname;
const post = data.posts.find((el) => { const post = data.posts.find((el) => {

View File

@ -50,9 +50,8 @@ function compile(filepath, data, fileData, callback) {
fs.writeFile(renderedpath, rendered, (err) => { fs.writeFile(renderedpath, rendered, (err) => {
if (err) callback(err); if (err) callback(err);
else callback(null, post);
}); });
callback(null, post);
} }
function Compiler(data) { function Compiler(data) {