Commit 5ef391cf authored by Viacheslav Pavlov's avatar Viacheslav Pavlov

Fixed extra api calls, added some missing styles and missing components

parent 044c1d3f
......@@ -497,6 +497,13 @@
"terms": "Terms and Conditions of Use",
"copying": "Copyright policy",
"privacy": "Privacy policy"
},
"public": {
"c": {
"documentationSection": {
"toc": "Table of contents"
}
}
}
}
......
// constants
import {RECEIVE_ARTICLE, RECEIVE_DOCUMENTATION, RECEIVE_MENU} from 'cms/constants';
import { LOADING_SLUG, RECEIVE_ARTICLE, RECEIVE_DOCUMENTATION, RECEIVE_MENU } from 'cms/constants';
// model
import Article from 'model/cms/Article';
import Menu from 'model/cms/Menu';
......@@ -8,13 +8,19 @@ import ADoc from 'model/cms/ADoc';
import CmsService from 'service/genesys/CmsService';
import AsciiDocService from 'service/genesys/AsciiDocService';
const loadingSlug = (slug: string) => ({
type: LOADING_SLUG,
payload: {slug},
});
const receiveArticle = (slug: string, article: Article) => ({
type: RECEIVE_ARTICLE,
payload: {slug, article},
});
export const loadArticle = (locale: string, slug: string) => (dispatch) => {
CmsService.getArticleBySlugAndLang(locale, slug)
dispatch(loadingSlug(slug));
return CmsService.getArticleBySlugAndLang(locale, slug)
.then((article) => dispatch(receiveArticle(slug, article)));
};
......@@ -24,7 +30,8 @@ const receiveDocumentation = (slug: string, documentation: ADoc) => ({
});
export const loadDocumentation = (slug: string) => (dispatch) => {
AsciiDocService.viewDoc(slug)
dispatch(loadingSlug(slug));
return AsciiDocService.viewDoc(slug)
.then((article) => dispatch(receiveDocumentation(slug, article)));
};
......
export const RECEIVE_ARTICLE = 'cms/public/RECEIVE_ARTICLE';
export const RECEIVE_DOCUMENTATION = 'cms/public/RECEIVE_DOCUMENTATION';
export const LOADING_SLUG = 'cms/public/LOADING_SLUG';
export const RECEIVE_MENU = 'cms/public/RECEIVE_MENU';
import { RECEIVE_ARTICLE, RECEIVE_DOCUMENTATION, RECEIVE_MENU } from 'cms/constants';
import { RECEIVE_ARTICLE, RECEIVE_DOCUMENTATION, RECEIVE_MENU, LOADING_SLUG } from 'cms/constants';
import update from 'immutability-helper';
const INITIAL_STATE: {
articles: any,
documentations: any,
loadingSlug: string,
menus: any,
} = {
articles: {},
documentations: {},
menus: {},
loadingSlug: null,
};
export default function listPublic(state = INITIAL_STATE, action: { type?: string, payload?: any } = {type: '', payload: {}}) {
switch (action.type) {
case LOADING_SLUG: {
const {slug} = action.payload;
return update(state, {
loadingSlug: {$set: slug},
});
}
case RECEIVE_ARTICLE: {
const {slug, article} = action.payload;
return update(state, {
articles: {
[slug]: {$set: article},
},
loadingSlug: {$set: null},
});
} case RECEIVE_DOCUMENTATION: {
const {slug, documentation} = action.payload;
......@@ -27,6 +36,7 @@ export default function listPublic(state = INITIAL_STATE, action: { type?: strin
documentations: {
[slug]: {$set: documentation},
},
loadingSlug: {$set: null},
});
}
case RECEIVE_MENU: {
......
......@@ -11,5 +11,12 @@
"terms": "Terms and Conditions of Use",
"copying": "Copyright policy",
"privacy": "Privacy policy"
},
"public": {
"c": {
"documentationSection": {
"toc": "Table of contents"
}
}
}
}
......@@ -4,6 +4,7 @@ import {bindActionCreators} from 'redux';
import { translate } from 'react-i18next';
// Actions
import { setPageTitle } from 'actions/pageTitle';
import {loadDocumentation} from 'cms/actions/public';
// Model
import ADoc from 'model/cms/ADoc';
......@@ -16,31 +17,36 @@ import Grid from '@material-ui/core/Grid';
interface IDocumentationPageProps {
slug: string;
loadingSlug: string;
t: any;
i18n: any;
documentation: ADoc;
loadDocumentation: (slug: string) => void;
setPageTitle: any;
}
class ContentPage extends React.Component<IDocumentationPageProps> {
protected static needs = [
({ params, state }) => loadDocumentation(params.slug),
({ params }) => loadDocumentation(params.slug),
];
public componentWillMount() {
const { slug, documentation, loadDocumentation } = this.props;
const { slug, documentation, loadDocumentation, loadingSlug } = this.props;
if (!documentation) {
if ((!documentation && !loadingSlug) || slug !== loadingSlug) {
loadDocumentation(slug);
}
}
public componentWillReceiveProps(nextProps) {
const { slug, documentation, loadDocumentation } = nextProps;
const { slug, documentation, loadDocumentation, setPageTitle, loadingSlug } = nextProps;
if (!documentation) {
if ((!documentation && !loadingSlug) || (loadingSlug && slug !== loadingSlug)) {
loadDocumentation(slug);
} else {
if (documentation && documentation.title) {
setPageTitle(documentation.title);
}
}
}
......@@ -64,9 +70,11 @@ class ContentPage extends React.Component<IDocumentationPageProps> {
const mapStateToProps = (state, ownProps) => ({
slug: ownProps.match.params.slug,
documentation: state.cms.public.documentations[ownProps.match.params.slug],
loadingSlug: state.cms.public.loadingSlug,
});
const mapDispatchToProps = (dispatch) => bindActionCreators({
loadDocumentation,
setPageTitle,
}, dispatch);
export default translate()(connect(mapStateToProps, mapDispatchToProps)(ContentPage));
import * as React from 'react';
import {translate} from 'react-i18next';
import withStyles from '@material-ui/core/styles/withStyles';
import ADoc from 'model/cms/ADoc';
......@@ -41,6 +42,10 @@ const styles = (theme) => ({
white: {
backgroundColor: 'white',
},
header: {
fontSize: '75%',
marginBottom: '4em',
},
content: {
width: '100%',
boxSizing: 'border-box' as 'border-box',
......@@ -158,30 +163,67 @@ const styles = (theme) => ({
}
}
},
tocContainer: {
padding: '0 .5rem',
},
tocHeader: {
overflow: 'hidden' as 'hidden',
marginTop: 0,
marginBottom: '.8rem',
fontSize: '1.2em',
},
toc: {
width: 'calc(100% - 1rem)',
width: 'calc(100% - 2.5rem)',
marginLeft: '1rem',
}
padding: '1.25em 1em',
'& ul': {
marginLeft: 0,
fontFamily: '"Open Sans","DejaVu Sans",sans-serif',
listStyleType: 'none' as 'none',
'& ul': {
paddingLeft: '1em',
},
},
'& > ul': {
fontSize: '15px',
lineHeight: '19px',
marginLeft: '.125em',
padding: 0,
},
'& a': {
textDecoration: 'none' as 'none',
fontFamily: 'Roboto-Regular',
color: '#006db4',
},
},
/*tslint:enable*/
});
interface IDocumentationSectionProps extends React.ClassAttributes<any> {
documentation: ADoc;
classes: any;
t: any;
}
class DocumentationSection extends React.Component<IDocumentationSectionProps> {
private replaceImgSrc = (content) => {
return content.replace('<img src="images', '<img src="/proxy/api/v1/cms/d/images');
}
public render() {
const {documentation, classes} = this.props;
const {documentation, classes, t} = this.props;
return(
<GridContainer className={ `${classes.root} container-spacing-vertical` }>
<Grid item sm={ 12 } md={ 9 } className={ classes.white } >
<div className={ classes.content } dangerouslySetInnerHTML={ {__html: documentation.content} }/>
<div className={ classes.header } dangerouslySetInnerHTML={ {__html: documentation.header} }/>
<div className={ classes.content } dangerouslySetInnerHTML={ {__html: this.replaceImgSrc(documentation.content)} }/>
</Grid>
<Grid item sm={ 12 } md={ 3 }>
<div className={ `${classes.toc} ${classes.white}` } dangerouslySetInnerHTML={ {__html: documentation.toc} }/>
<Grid item sm={ 12 } md={ 3 } className={ classes.tocContainer }>
<div className={ `${classes.toc} ${classes.white}` }>
<div className={ classes.tocHeader }>{ t('cms.public.c.documentationSection.toc') }</div>
<div className={ `${classes.toc} ${classes.white}` } dangerouslySetInnerHTML={ {__html: documentation.toc} }/>
</div>
</Grid>
</GridContainer>
);
......@@ -189,4 +231,4 @@ class DocumentationSection extends React.Component<IDocumentationSectionProps> {
}
export default withStyles(styles)(DocumentationSection);
export default translate()(withStyles(styles)(DocumentationSection));
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment