Skip to content

Commit 92d1073

Browse files
timothygachengotimothygachengo
committed
chore: ui enhancements
1 parent 8456bbe commit 92d1073

8 files changed

Lines changed: 153 additions & 111 deletions

File tree

‎wp-react-lib/src/consumers/PostConsumer.jsx‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,12 @@ const PostConsumer = (props) => {
55
return (
66
<PostContext.Consumer>
77
{({posts, meta, locale}) => {
8-
return posts && <React.Fragment>
9-
{React.Children.map(props.children, (child => React.cloneElement(child, {posts, meta, locale})))}
10-
</React.Fragment>
8+
if (!posts) return null;
9+
return (
10+
<React.Fragment>
11+
{React.Children.map(props.children, (child => React.cloneElement(child, {posts, meta, locale})))}
12+
</React.Fragment>
13+
);
1114
}}
1215
</PostContext.Consumer>
1316
)

‎wp-react-lib/src/embedded/EmbeddedGateway.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import ReactDOM from 'react-dom/client';
33
import { Provider } from "react-redux";
44
import { IntlProvider, injectIntl } from "react-intl";
55
import { AppContext } from "../providers/Context"
6-
import { AppContextProvider } from "../../dist";
6+
import AppContextProvider from '../providers/AppContextProvider';
77

88
class EmbeddedGateway extends React.Component {
99
constructor(props) {

‎wp-react-lib/src/providers/AppContextProvider.jsx‎

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -5,11 +5,7 @@ import { Dimmer, Loader } from 'semantic-ui-react';
55
const AppContextProvider = ({ locale, store, getComponent, children }) => {
66
return (
77
<AppContext.Provider value={{ store, getComponent, locale }}>
8-
<Suspense fallback={
9-
<Dimmer active>
10-
<Loader>Loading</Loader>
11-
</Dimmer>
12-
}>
8+
<Suspense>
139
{children}
1410
</Suspense>
1511
</AppContext.Provider>

‎wp-react-lib/src/providers/PageProvider.jsx‎

Lines changed: 60 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -31,55 +31,81 @@ const PageProvider = (props) => {
3131
const loading = useSelector(state => state.getIn(['wordpress', store, 'loading']));
3232

3333
useEffect(() => {
34-
dispatch(getPages({
35-
before,
36-
perPage,
37-
page,
38-
fields,
39-
parent,
40-
slug,
41-
store,
42-
locale,
43-
previewNonce,
44-
previewId,
45-
search,
46-
noCache
47-
}));
34+
if (prevProps.parent !== parent || prevProps.slug !== slug || locale !== prevProps.locale || previewId !== prevProps.previewId | search != prevProps.search) {
35+
dispatch(getPages({
36+
before,
37+
perPage,
38+
page,
39+
fields,
40+
parent,
41+
slug,
42+
store,
43+
locale,
44+
previewNonce,
45+
previewId,
46+
search,
47+
noCache
48+
}));
49+
}
4850

4951
return () => {
50-
dispatch(clean({ store }));
51-
};
52+
dispatch(clean(store));
53+
}
5254
}, [parent, slug, locale, previewId, search]);
5355

54-
if (pages && pages.length > 0) {
55-
return <PageContext.Provider value={{ pages, meta, locale }}>{children}</PageContext.Provider>;
56-
} else if (error) {
56+
// useEffect(() => {
57+
// dispatch(getPages({
58+
// before,
59+
// perPage,
60+
// page,
61+
// fields,
62+
// parent,
63+
// slug,
64+
// store,
65+
// locale,
66+
// previewNonce,
67+
// previewId,
68+
// search,
69+
// noCache
70+
// }));
71+
// }, []);
72+
73+
// Keep showing previous content while loading new content
74+
if (loading && !pages) {
75+
return (
76+
<Container>
77+
<Loader inverted content='Loading' />
78+
</Container>
79+
);
80+
}
81+
82+
if (error) {
5783
return (
5884
<Segment color={"red"}>
5985
<h1>500</h1>
6086
<p>The service is not available please try again in a few minutes</p>
6187
</Segment>
6288
);
63-
} else if (loading) {
89+
}
90+
91+
if (pages && pages.length > 0) {
92+
return <PageContext.Provider value={{ pages, meta, locale }}>{children}</PageContext.Provider>;
93+
}
94+
95+
if (loading === false) {
96+
if (fallbackComponent) {
97+
return <>{fallbackComponent}</>;
98+
}
6499
return (
65100
<Container>
66-
<Loader inverted content='Loading' />
101+
<Segment color={"red"}>
102+
<h1>404</h1>
103+
<p>Can't find this page</p>
104+
</Segment>
67105
</Container>
68106
);
69-
} else if (loading === false) {
70-
if (fallbackComponent) {
71-
return <>{fallbackComponent}</>;
72-
} else {
73-
return (
74-
<Container>
75-
<Segment color={"red"}>
76-
<h1>404</h1>
77-
<p>Can't find this page</p>
78-
</Segment>
79-
</Container>
80-
);
81-
}
82107
}
108+
83109
return null;
84110
};
85111

‎wp-react-lib/src/providers/PostProvider.jsx‎

Lines changed: 38 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -31,23 +31,46 @@ const PostProvider = (props) => {
3131
const loading = useSelector(state => state.getIn(['wordpress', store, 'loading']));
3232

3333
useEffect(() => {
34-
dispatch(getPosts({
35-
slug,
36-
type,
37-
taxonomy,
38-
categories,
39-
before,
40-
perPage,
41-
page,
42-
fields,
43-
store,
44-
locale,
45-
previewNonce,
46-
previewId,
47-
search
48-
}));
34+
if (categories != prevProps.categories || locale != prevProps.locale || slug != prevProps.slug ||
35+
taxonomy != prevProps.taxonomy || page != prevProps.page || perPage != prevProps.perPage || search != prevProps.search
36+
) {
37+
dispatch(getPosts({
38+
slug,
39+
type,
40+
taxonomy,
41+
categories,
42+
before,
43+
perPage,
44+
page,
45+
fields,
46+
store,
47+
locale,
48+
previewNonce,
49+
previewId,
50+
search
51+
}));
52+
}
53+
4954
}, [categories, locale, slug, taxonomy, page, perPage, search]);
5055

56+
// useEffect(() => {
57+
// dispatch(getPosts({
58+
// slug,
59+
// type,
60+
// taxonomy,
61+
// categories,
62+
// before,
63+
// perPage,
64+
// page,
65+
// fields,
66+
// store,
67+
// locale,
68+
// previewNonce,
69+
// previewId,
70+
// search
71+
// }));
72+
// }, []);
73+
5174
if (posts && posts.length > 0) {
5275
return <PostContext.Provider value={{ posts, locale, meta }}>{children}</PostContext.Provider>;
5376
} else if (error) {

‎wp-react-lib/src/providers/SettingProvider.jsx‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -17,10 +17,12 @@ const SettingProvider = (props) => {
1717
const loading = useSelector(state => state.getIn(['wordpress', 'settings', 'loading']));
1818

1919
useLayoutEffect(() => {
20-
dispatch(getSettings({
21-
locale,
22-
changeUUID
23-
}));
20+
if (locale) {
21+
dispatch(getSettings({
22+
locale,
23+
changeUUID
24+
}));
25+
}
2426

2527
return () => {
2628
// cleanup

‎wp-react-lib/src/template-parts/Content.jsx‎

Lines changed: 35 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -41,60 +41,49 @@ const translate = (str, locale = "en") => {
4141
return newStr?newStr:str
4242
}
4343

44+
const Content = (props) => {
45+
const [showContentEnabled, setShowContentEnabled] = React.useState(false);
4446

45-
class Content extends React.Component {
46-
constructor(props) {
47-
super(props);
48-
this.state = {showContentEnabled: false}
49-
50-
}
51-
52-
componentDidMount() {
53-
if (this.props.onLoad) {
54-
this.props.onLoad()
47+
React.useEffect(() => {
48+
if (props.onLoad) {
49+
props.onLoad();
5550
}
56-
}
57-
58-
componentDidUpdate(prevProps, prevState, snapshot) {
59-
}
51+
}, []);
6052

61-
render() {
62-
const {
63-
post, pageNumber, showTitle, showContent, showIntro, showDate, showLoading, as, locale, messages, preview
64-
} = this.props
53+
const {
54+
post, pageNumber, showTitle, showContent, showIntro, showDate, showLoading, as, locale, messages, preview
55+
} = props;
6556

66-
if (post) {
67-
const contentParts = post.content ? post.content.rendered.split("<!--more-->") : []
68-
const intro = contentParts.length > 1 ? contentParts[0] : null
69-
const content = contentParts.length > 1 ? contentParts[1] : contentParts[0]
70-
const pages = content ? content.split("<!--nextpage-->") : '';
57+
if (post) {
58+
const contentParts = post.content ? post.content.rendered.split("<!--more-->") : []
59+
const intro = contentParts.length > 1 ? contentParts[0] : null
60+
const content = contentParts.length > 1 ? contentParts[1] : contentParts[0]
61+
const pages = content ? content.split("<!--nextpage-->") : '';
7162

72-
let body = ''
73-
if (pageNumber != null && pages.length > 0) {
74-
body = pages[pageNumber]
75-
} else {
76-
body = content
77-
}
78-
79-
return <EmbeddedGateway parentUnique={this.props.parentUnique} messages={messages}
80-
parent={preview ? post.parent : post.id}>
81-
<Enhance className="entry-content" {...this.props}>
82-
<div></div>
83-
{showDate && <Container fluid className="date">{post.date.toLocaleString()}</Container>}
84-
{showTitle && <span id={post.slug} className="title"
85-
dangerouslySetInnerHTML={{__html: post.title.rendered}}/>}
86-
{showIntro && <Container fluid className="excerpt"
87-
dangerouslySetInnerHTML={{__html: removePatternBrackets(replaceHTMLinks(translate(intro, locale), locale))}}/>}
88-
{showContent && <Container fluid className="content "
89-
dangerouslySetInnerHTML={{__html: removePatternBrackets(replaceHTMLinks(translate(body, locale), locale))}}/>}
90-
91-
</Enhance>
92-
</EmbeddedGateway>
63+
let body = ''
64+
if (pageNumber != null && pages.length > 0) {
65+
body = pages[pageNumber]
9366
} else {
94-
return showLoading ? 'Loading' : false;
67+
body = content
9568
}
96-
}
9769

70+
return <EmbeddedGateway parentUnique={props.parentUnique} messages={messages}
71+
parent={preview ? post.parent : post.id}>
72+
<Enhance className="entry-content" {...props}>
73+
<div></div>
74+
{showDate && <Container fluid className="date">{post.date.toLocaleString()}</Container>}
75+
{showTitle && <span id={post.slug} className="title"
76+
dangerouslySetInnerHTML={{__html: post.title.rendered}} key="title"/>}
77+
{showIntro && <Container fluid className="excerpt"
78+
dangerouslySetInnerHTML={{__html: removePatternBrackets(replaceHTMLinks(translate(intro, locale), locale))}} key="intro"/>}
79+
{showContent && <Container fluid className="content "
80+
dangerouslySetInnerHTML={{__html: removePatternBrackets(replaceHTMLinks(translate(body, locale), locale))}} key="content"/>}
81+
82+
</Enhance>
83+
</EmbeddedGateway>
84+
} else {
85+
return showLoading ? 'Loading' : false;
86+
}
9887
}
9988

10089

‎wp-react-lib/src/template-parts/PostContent.jsx‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,11 @@
1-
import React from 'react'
2-
import Content from "./Content";
1+
import React, { Suspense } from 'react'
2+
3+
const Content = React.lazy(() => import('./Content'))
34

45
const PostContent = (props) => {
5-
return <Content {...props} showContent={true}></Content>
6+
return <Suspense>
7+
<Content {...props} showContent={true}></Content>
8+
</Suspense>
69
}
710

811
export default PostContent

0 commit comments

Comments
 (0)