info/relaks-wordpress-example
1
0
Fork 0
mirror of https://github.com/trambarhq/relaks-wordpress-example.git synced 2025-09-25 14:59:09 +02:00
Code Issues Releases Wiki Activity

Added subpages (issue #5).

Browse Source
This commit is contained in:
Chung Leong
2019-01-16 00:18:05 +01:00
parent ba82cdd83e
commit d9b44ea871
6 changed files with 137 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
src/pages/page-page.jsx
View File

@@ -5,7 +5,9 @@ import { Route } from 'routing';
import WordPress from 'wordpress'; import WordPress from 'wordpress';
import HTML from 'widgets/html'; import HTML from 'widgets/html';
import Breadcrumb from 'widgets/breadcrumb';
import PageView from 'widgets/page-view'; import PageView from 'widgets/page-view';
import PageList from 'widgets/page-list';
class PagePage extends AsyncComponent { class PagePage extends AsyncComponent {
static displayName = 'PagePage'; static displayName = 'PagePage';
@@ -19,6 +21,8 @@ class PagePage extends AsyncComponent {
props.page = await wp.fetchOne('/wp/v2/pages/', pageSlug); props.page = await wp.fetchOne('/wp/v2/pages/', pageSlug);
meanwhile.show(<PagePageSync {...props} />); meanwhile.show(<PagePageSync {...props} />);
props.parentPages = await wp.fetchMultiple('/wp/v2/pages/', parentPageSlugs); props.parentPages = await wp.fetchMultiple('/wp/v2/pages/', parentPageSlugs);
meanwhile.show(<PagePageSync {...props} />);
props.childPages = await wp.fetchList(`/wp/v2/pages/?parent=${props.page.id}`, { minimum: '100%' });
return <PagePageSync {...props} />; return <PagePageSync {...props} />;
} }
} }
@@ -27,10 +31,25 @@ class PagePageSync extends PureComponent {
static displayName = 'PagePageSync'; static displayName = 'PagePageSync';
render() { render() {
let { page } = this.props; let { route, page, parentPages, childPages } = this.props;
let trail = [];
let parents = [];
if (parentPages) {
for (let parentPage of parentPages) {
parents.push(parentPage);
let title = _.get(parentPage, 'title.rendered', '');
let slugs = _.map(parents, 'slug');
let url = route.find(slugs);
trail.push({ label: <HTML text={title} />, url })
}
parents.push(page);
}
return ( return (
<div className="page"> <div className="page">
<Breadcrumb trail={trail} />
<PageView page={page} /> <PageView page={page} />
<PageList route={route} pages={childPages} parentPages={parents} />
</div> </div>
); );
} }
@@ -46,6 +65,7 @@ if (process.env.NODE_ENV !== 'production') {
PagePageSync.propTypes = { PagePageSync.propTypes = {
page: PropTypes.object, page: PropTypes.object,
parentPages: PropTypes.arrayOf(PropTypes.object), parentPages: PropTypes.arrayOf(PropTypes.object),
childPages: PropTypes.arrayOf(PropTypes.object),
route: PropTypes.instanceOf(Route).isRequired, route: PropTypes.instanceOf(Route).isRequired,
}; };
} }

8
src/widgets/breadcrumb.jsx
View File

@@ -12,6 +12,14 @@ function Breadcrumb(props) {
return <h4 className="breadcrumb">{children}</h4>; return <h4 className="breadcrumb">{children}</h4>;
} }
if (process.env.NODE_ENV !== 'production') {
const PropTypes = require('prop-types');
Breadcrumb.propTypes = {
trail: PropTypes.arrayOf(PropTypes.object),
};
}
export { export {
Breadcrumb as default, Breadcrumb as default,
Breadcrumb, Breadcrumb,

37
src/widgets/page-list-view.jsx Normal file
View File

@@ -0,0 +1,37 @@
import _ from 'lodash';
import React, { PureComponent } from 'react';
import { Route } from 'routing';
import HTML from 'widgets/html';
class PageListView extends PureComponent {
static displayName = 'PageListView';
render() {
let { route, parentPages, page } = this.props;
let title = _.get(page, 'title.rendered', '');
let parentSlugs = _.map(parentPages, 'slug');
let slugs = _.concat(parentSlugs, page.slug);
let url = route.find(slugs);
return (
<div className="page-list-view">
<a href={url}><HTML text={title} /></a>
</div>
);
}
}
if (process.env.NODE_ENV !== 'production') {
const PropTypes = require('prop-types');
PageListView.propTypes = {
page: PropTypes.object,
parentPages: PropTypes.arrayOf(PropTypes.object),
route: PropTypes.instanceOf(Route).isRequired,
};
}
export {
PageListView as default,
PageListView,
};

55
src/widgets/page-list.jsx Normal file
View File

@@ -0,0 +1,55 @@
import _ from 'lodash';
import React, { PureComponent } from 'react';
import { Route } from 'routing';
import PageListView from 'widgets/page-list-view';
class PageList extends PureComponent {
static displayName = 'PageList'
render() {
let { route, pages, parentPages } = this.props;
if (!pages) {
return null;
}
return (
<ul className="pages">
{
pages.map((page) => {
return (
<li key={page.id}>
<PageListView route={route} page={page} parentPages={parentPages} />
</li>
);
})
}
</ul>
)
}
componentDidMount() {
this.componentDidUpdate();
}
componentDidUpdate(prevProps, prevState) {
let { pages } = this.props;
if (pages) {
pages.more();
}
}
}
if (process.env.NODE_ENV !== 'production') {
const PropTypes = require('prop-types');
PageList.propTypes = {
pages: PropTypes.arrayOf(PropTypes.object),
parentPages: PropTypes.arrayOf(PropTypes.object),
route: PropTypes.instanceOf(Route).isRequired,
};
}
export {
PageList as default,
PageList,
};

15
src/widgets/post-list-view.jsx
View File

@@ -1,5 +1,7 @@
import _ from 'lodash'; import _ from 'lodash';
import Moment from 'moment';
import React, { PureComponent } from 'react'; import React, { PureComponent } from 'react';
import { Route } from 'routing';
import HTML from 'widgets/html'; import HTML from 'widgets/html';
@@ -7,7 +9,7 @@ class PostListView extends PureComponent {
static displayName = 'PostListView'; static displayName = 'PostListView';
render() { render() {
let { route, category, post, author, month } = this.props; let { route, category, post, month } = this.props;
let title = _.get(post, 'title.rendered', ''); let title = _.get(post, 'title.rendered', '');
let excerpt = _.get(post, 'excerpt.rendered', ''); let excerpt = _.get(post, 'excerpt.rendered', '');
excerpt = cleanExcerpt(excerpt); excerpt = cleanExcerpt(excerpt);
@@ -38,6 +40,17 @@ function cleanExcerpt(excerpt) {
return excerpt; return excerpt;
} }
if (process.env.NODE_ENV !== 'production') {
const PropTypes = require('prop-types');
PostListView.propTypes = {
category: PropTypes.object,
post: PropTypes.object,
month: PropTypes.instanceOf(Moment),
route: PropTypes.instanceOf(Route).isRequired,
};
}
export { export {
PostListView as default, PostListView as default,
PostListView, PostListView,

4
src/widgets/post-list.jsx
View File

@@ -16,10 +16,10 @@ class PostList extends PureComponent {
return ( return (
<div className="posts"> <div className="posts">
{ {
posts.map((post, i) => { posts.map((post) => {
let author = _.find(authors, { id: post.author_id }); let author = _.find(authors, { id: post.author_id });
let category = _.find(categories, { id: post.categories[0] }); let category = _.find(categories, { id: post.categories[0] });
return <PostListView route={route} month={month} category={category} post={post} author={author} key={i} /> return <PostListView route={route} month={month} category={category} post={post} author={author} key={post.id} />
}) })
} }
</div> </div>