102 lines
3.0 KiB
TypeScript
102 lines
3.0 KiB
TypeScript
import React, { useState, useEffect } from 'react';
|
|
|
|
// Redux part
|
|
import { useSelector, useDispatch } from 'react-redux';
|
|
import { StoreState } from 'store/rootReducer';
|
|
|
|
// Import actions here
|
|
|
|
import classNames from 'classnames/bind';
|
|
import TextItem from 'components/items/TextItem';
|
|
import parse from 'html-react-parser';
|
|
import { withRouter } from 'react-router-dom';
|
|
import article from 'store/article';
|
|
import config from 'config/general';
|
|
import styleIdentifiers from './CustomArticle.module.scss';
|
|
|
|
const styles = classNames.bind(styleIdentifiers);
|
|
|
|
export interface CustomArticleProps {}
|
|
|
|
const CustomArticle = (props: CustomArticleProps) => {
|
|
const {
|
|
nodeItem,
|
|
wrapperComponent,
|
|
className,
|
|
wrapperClassName,
|
|
containerClassName,
|
|
paramKey,
|
|
customNode,
|
|
match: { params },
|
|
...rest
|
|
} = props;
|
|
|
|
// mapStateToProps
|
|
const lg = useSelector((state: StoreState) => state.content.lg);
|
|
const detail = useSelector((state: StoreState) => state.article.detail?.data);
|
|
// Allow to dispatch actions
|
|
const dispatch = useDispatch();
|
|
const loadArticle = data => dispatch(article.actions.getOneArticle.request.action(data));
|
|
|
|
function removeStyle(toRemove) {
|
|
for (let index = 0; index < toRemove.length; index++) {
|
|
const element = toRemove[index];
|
|
if (element && element.attribs && element.attribs.style) {
|
|
element.attribs.style = null;
|
|
}
|
|
}
|
|
|
|
return toRemove;
|
|
}
|
|
|
|
function renderContent(content): JSX {
|
|
const newContent = content;
|
|
|
|
const options = {
|
|
replace: (domNode): JSX => {
|
|
if (nodeItem && customNode && customNode.includes(domNode.name)) {
|
|
const NodeItem = nodeItem;
|
|
return <NodeItem {...domNode} />;
|
|
}
|
|
return null;
|
|
},
|
|
};
|
|
|
|
return parse(newContent, options);
|
|
}
|
|
|
|
useEffect(() => {
|
|
if (detail?.urls?.[lg] !== params[paramKey || 'url'] || detail?.urls?.[config.defaultLanguage] !== params[paramKey || 'url']) {
|
|
loadArticle({
|
|
data: { url: params[paramKey], lg },
|
|
noFeedback: true,
|
|
callbackError: () => {
|
|
loadArticle({ data: { url: params[paramKey], lg: config.defaultLanguage }, noFeedback: true });
|
|
},
|
|
});
|
|
}
|
|
}, [params]);
|
|
|
|
const WrapperComponent = wrapperComponent;
|
|
|
|
return (
|
|
<div className={styles('custom-article', containerClassName)}>
|
|
<div className={styles('CustomArticle', wrapperClassName)}>
|
|
{WrapperComponent ? (
|
|
<WrapperComponent item={detail} {...rest}>
|
|
<div className={styles('content-artice', className)}>
|
|
{detail ? renderContent(detail.content[lg] || detail.content[config.defaultLanguage]) : <div>Loading ...</div>}
|
|
</div>
|
|
</WrapperComponent>
|
|
) : (
|
|
<div className={styles('content-artice', className)}>
|
|
{detail ? renderContent(detail.content[lg] || detail.content[config.defaultLanguage]) : <div>Loading ...</div>}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default withRouter(CustomArticle);
|