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 { Home } from '.';
import React, {Component} from 'react';
export const About = () => (
<div>
<div className="content-wrapper">
<h1>About</h1>
</div>
</div>
);
export default class About extends Component {
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 { Route, Switch } from 'react-router-dom';
import { Home, About, Portfolio, Resume, NotFoundPage } from '.';
import { Home, NotFoundPage } from '.';
import { BlogContainer, PostContainer } from '../containers';
export const App = () => (
<div>
<Route component={Home} />
<Switch>
<Route exact path="/about" component={About} />
<Route exact path="/blog" component={BlogContainer} />
<Route path="/blog/post/:postname" component={PostContainer} />
<Route exact path="/portfolio" component={Portfolio} />
<Route exact path="/resume" component={Resume} />
<Route component={NotFoundPage} />
</Switch>
</div>

View File

@ -5,7 +5,9 @@ export default class Blog extends Component {
render() {
if (this.props.isLoading) {
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 className="menu-links">
<ul>
<li>
<Link to="/about">
<i className="fa fa-question" aria-hidden="true" /> About
</Link>
</li>
<li>
<Link to="/blog">
<i className="fa fa-pencil-square-o" aria-hidden="true" /> Blog
</Link>
</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>
</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 About } from './About';
export { default as Blog } from './Blog';
export { default as About } from './About';
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 App } from './App';

View File

@ -1,6 +1,6 @@
import React, {Component} from 'react';
import axios from 'axios';
import {Blog} from '../components';
import {About, Blog} from '../components';
export default class BlogContainer extends Component {
@ -8,14 +8,22 @@ export default class BlogContainer extends Component {
super();
this.state = {
isLoading: true,
isLoadingBlog: true,
isLoadingAbout: true,
}
}
componentDidMount() {
axios.get('/api/about').then((res) => {
this.setState({
isLoadingAbout: false,
about: res.data,
});
})
axios.get('/api/blog').then((res) => {
this.setState({
isLoading: false,
isLoadingBlog: false,
posts: res.data,
});
})
@ -23,8 +31,12 @@ export default class BlogContainer extends Component {
render() {
return (
<Blog isLoading={this.state.isLoading}
posts={this.state.posts}/>
<div>
<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);
});
api.get('/about', (req, res) => {
res.json({"hello": "hello"});
});
api.get('/post/:postname', (req, res) => {
const postname = req.params.postname;
const post = data.posts.find((el) => {

View File

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