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

locales/en/translations.json

@@ -497,6 +497,13 @@
     "terms": "Terms and Conditions of Use",
     "copying": "Copyright policy",
     "privacy": "Privacy policy"
+  },
+  "public": {
+    "c": {
+      "documentationSection": {
+        "toc": "Table of contents"
+      }
+    }
   }
 }
 

src/cms/actions/public.ts

 // 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)));
 };
 

src/cms/constants.ts

 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';

src/cms/reducers/public.ts

-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: {

src/cms/translations.json

@@ -11,5 +11,12 @@
     "terms": "Terms and Conditions of Use",
     "copying": "Copyright policy",
     "privacy": "Privacy policy"
+  },
+  "public": {
+    "c": {
+      "documentationSection": {
+        "toc": "Table of contents"
+      }
+    }
   }
 }

src/cms/ui/DocumentationPage.tsx

@@ -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));

src/cms/ui/c/DocumentationSection.tsx

 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));