separate helmet for chapter

src/components/AyatulKursi.tsx

@@ -26,6 +26,12 @@ import { NUMBER_OF_CHAPTERS } from '../constants';
 import AudioplayerContainer from '../containers/AudioplayerContainer';
 import ChapterInfoPanelContainer from '../containers/ChapterInfoPanelContainer';
 
+const title = 'Ayatul Kursi';
+const description =
+  'Ayatul Kursi is verse 255 of the second chapter, ' +
+  'Surah al-Baqarah (The Chapter of the Cow), in the ' +
+  'Holy Quran. It is also known as the Throne Verse.';
+
 const propTypes = {
   chapter: ChapterShape.isRequired,
   chapters: PropTypes.objectOf(ChapterShape).isRequired,
@@ -157,9 +163,8 @@ class AyatulKursi extends Component<Props> {
       <Fragment>
         <Helmet
           {...makeHelmetTags({
-            // TODO: add this
-            // title: this.getTitle(),
-            // description: this.getDescription(),
+            title,
+            description,
           })}
           script={chapterLdJson(chapter)}
           style={[

src/components/Chapter.tsx

@@ -1,6 +1,5 @@
 import React, { Component, Fragment } from 'react';
 import PropTypes from 'prop-types';
-import Helmet from 'react-helmet';
 import qs from 'qs';
 import last from 'lodash/last';
 import isEmpty from 'lodash/isEmpty';
@@ -13,8 +12,6 @@ import {
   LineShape,
   ChapterInfoShape,
 } from '../shapes';
-import makeHelmetTags from '../helpers/makeHelmetTags';
-import { chapterLdJson } from '../helpers/ldJson';
 import { determinePage } from '../helpers/determinePage';
 import PageContainer from './dls/PageContainer';
 import Bismillah from './Bismillah';
@@ -29,6 +26,7 @@ import { FetchChapterInfo } from '../redux/actions/chapterInfos';
 import { NUMBER_OF_CHAPTERS } from '../constants';
 import AudioplayerContainer from '../containers/AudioplayerContainer';
 import ChapterInfoPanelContainer from '../containers/ChapterInfoPanelContainer';
+import ChapterHelmet from './chapter/ChapterHelmet';
 
 const propTypes = {
   chapter: ChapterShape.isRequired,
@@ -209,11 +207,13 @@ class Chapter extends Component<Props> {
   render() {
     const {
       chapter,
+      chapterInfo,
       verses,
       lines,
       settings,
       match,
       isVersesLoading,
+      match: { params },
     } = this.props;
 
     const versesArray = Object.values(verses);
@@ -229,22 +229,12 @@ class Chapter extends Component<Props> {
 
     return (
       <Fragment>
-        <Helmet
-          {...makeHelmetTags({
-            // TODO: add this
-            // title: this.getTitle(),
-            // description: this.getDescription(),
-          })}
-          script={chapterLdJson(chapter)}
-          style={[
-            {
-              cssText: `.text-arabic{font-size: ${
-                settings.fontSize.arabic
-              }rem;} .text-translation{font-size: ${
-                settings.fontSize.translation
-              }rem;}`,
-            },
-          ]}
+        <ChapterHelmet
+          chapter={chapter}
+          chapterInfo={chapterInfo}
+          settings={settings}
+          verses={verses}
+          params={params}
         />
         <PageContainer className="container-fluid">
           <div className="row">

src/components/chapter/ChapterHelmet.tsx

@@ -0,0 +1,109 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Helmet from 'react-helmet';
+import makeHelmetTags from '../../helpers/makeHelmetTags';
+import { chapterLdJson } from '../../helpers/ldJson';
+import {
+  ChapterShape,
+  ChapterInfoShape,
+  VerseShape,
+  SettingsShape,
+} from '../../shapes';
+
+const makeTitle = ({
+  chapter,
+  params,
+}: {
+  chapter: ChapterShape;
+  params: $TsFixMe;
+}) => {
+  if (params.range) {
+    return `Surah ${chapter.nameSimple} [${chapter.chapterNumber}:${
+      params.range
+    }]`;
+  }
+
+  return `Surah ${chapter.nameSimple} [${chapter.chapterNumber}] - ${
+    chapter.translatedName.name
+  }`;
+};
+
+const makeDescription = ({
+  chapter,
+  verses,
+  chapterInfo,
+  params,
+}: {
+  chapter: ChapterShape;
+  chapterInfo: ChapterInfoShape;
+  verses: { [verseKey: string]: VerseShape };
+  params: $TsFixMe;
+}) => {
+  if (params.range) {
+    if (params.range.includes('-')) {
+      return `Surah ${chapter.nameSimple} [verse ${params.range}]`;
+    }
+
+    const verse = verses[`${chapter.chapterNumber}:${params.range}`];
+
+    if (verse && verse.translations && verse.translations[0]) {
+      return `Surah ${chapter.nameSimple} [verse ${params.range}] - ${
+        verse.translations[0].text
+      }`;
+    }
+
+    return `Surah ${chapter.nameSimple} [verse ${params.range}]`;
+  }
+
+  return `${chapterInfo ? chapterInfo.shortText : ''} This Surah has ${
+    chapter.versesCount
+  } ayah and resides between pages ${chapter.pages[0]} to ${
+    chapter.pages[1]
+  } in the Holly Quran.`;
+};
+
+const propTypes = {
+  chapter: ChapterShape.isRequired,
+  chapterInfo: ChapterInfoShape.isRequired,
+  settings: SettingsShape.isRequired,
+  verses: PropTypes.objectOf(VerseShape).isRequired,
+  params: PropTypes.object.isRequired,
+};
+
+type Props = {
+  chapter: ChapterShape;
+  chapterInfo: ChapterInfoShape;
+  settings: SettingsShape;
+  verses: { [verseKey: string]: VerseShape };
+  params: $TsFixMe;
+};
+
+const ChapterHelmet: React.SFC<Props> = ({
+  chapter,
+  settings,
+  chapterInfo,
+  verses,
+  params,
+}: Props) => (
+  <Helmet
+    {...makeHelmetTags({
+      // TODO: add this
+      title: makeTitle({ chapter, params }),
+      description: makeDescription({ chapter, chapterInfo, verses, params }),
+    })}
+    script={chapterLdJson(chapter)}
+    style={[
+      {
+        cssText: `.text-arabic{font-size: ${
+          settings.fontSize.arabic
+        }rem;} .text-translation{font-size: ${
+          settings.fontSize.translation
+        }rem;}`,
+      },
+    ]}
+  />
+);
+
+ChapterHelmet.propTypes = propTypes;
+
+export default ChapterHelmet;