More work with titles & descriptions

imports/ui/pages/Fires/Fires.js

@@ -9,6 +9,7 @@ import { translate, Trans } from 'react-i18next';
 import { FormGroup } from 'react-bootstrap';
 import { Meteor } from 'meteor/meteor';
 import { Bert } from 'meteor/themeteorchef:bert';
+import { Helmet } from 'react-helmet';
 import { Map, Circle } from 'react-leaflet';
 import Blaze from 'meteor/gadicc:blaze-react-component';
 import DefMapLayers from '/imports/ui/components/Maps/DefMapLayers';
@@ -58,16 +59,19 @@ class Fire extends React.Component {
     if (fire && fire.when) {
       this.dateLongFormat = dateLongFormat(fire.when);
     }
+    const title = fire.address ?
+      t('Información adicional sobre fuego detectado en {{where}} el {{when}}', { where: fire.address, when: this.dateLongFormat }) :
+      t('Información adicional sobre fuego detectado el {{when}}', { when: this.dateLongFormat });
     return (fire ? (
       <div className="ViewFire">
+        <Helmet>
+          <meta charSet="utf-8" />
+          <title>{t('AppName')}: {t('Información adicional sobre fuego')}</title>
+          <meta name="description" content={title} />
+        </Helmet>
         {!loading &&
          <Fragment>
-           <h4 className="page-header">
-             {fire.address ?
-              t('Información adicional sobre fuego detectado en {{where}} el {{when}}', { where: fire.address, when: this.dateLongFormat }) :
-              t('Información adicional sobre fuego detectado el {{when}}', { when: this.dateLongFormat })}
-           </h4>
-
+           <h4 className="page-header">{title}</h4>
            <Map
                ref={(map) => {
                    this.fireMap = map;

imports/ui/pages/FiresMap/FiresMap.js

@@ -8,6 +8,7 @@ import { ButtonGroup, Row, Col, Checkbox } from 'react-bootstrap';
 import { Meteor } from 'meteor/meteor';
 import { ReactiveVar } from 'meteor/reactive-var';
 import { withTracker } from 'meteor/react-meteor-data';
+import { Helmet } from 'react-helmet';
 import { Trans, translate } from 'react-i18next';
 import { Map } from 'react-leaflet';
 import Control from 'react-leaflet-control';
@@ -132,6 +133,7 @@ class FiresMap extends React.Component {
   }
 
   render() {
+    const { t } = this.props;
     console.log(`Rendering ${this.props.loading ? 'loading' : 'LOADED'} map ${this.props.activefires.length + this.props.firealerts.length} of ${this.props.activefirestotal} total. Subs users ready ${this.props.subsready}, reactive ${this.state.viewport.zoom >= MAXZOOMREACTIVE}`);
 
     return (
@@ -140,6 +142,11 @@ class FiresMap extends React.Component {
       <div
           ref={(divElement) => { this.divElement = divElement; }}
       >
+      { window.location.pathname !== '/' &&
+        <Helmet>
+          <title>{t('AppName')}: {t('Fuegos activos')}</title>
+          <meta name="description" content={t('Fuegos activos en el mundo actualizados en tiempo real')} />
+        </Helmet> }
         {this.props.loading || !this.props.subsready ?
          <Row className="align-items-center justify-content-center">
            <Loading />

imports/ui/pages/Index/Index.js

@@ -4,6 +4,7 @@
 /* eslint-env jquery */
 import React, { Component, Fragment } from 'react';
 import { translate, Trans } from 'react-i18next';
+import { Helmet } from 'react-helmet';
 import PropTypes from 'prop-types';
 // import { HashLink as Link } from 'react-router-hash-link';
 // import { Link } from 'react-router-dom';
@@ -76,8 +77,12 @@ class Index extends Component {
   }
 
   render() {
+    const { t } = this.props;
     return (
       <div className="IndexDisabled full-width">
+        <Helmet>
+          <title>{t('AppName')}: {t('Inicio')}</title>
+        </Helmet>
         {/* https://v4-alpha.getbootstrap.com/components/carousel/  */}
         <Fragment>
           <section className="sect1">

imports/ui/pages/Page/Page.js

@@ -3,14 +3,20 @@ import PropTypes from 'prop-types';
 import { Meteor } from 'meteor/meteor';
 import { createContainer } from 'meteor/react-meteor-data';
 import { ReactiveVar } from 'meteor/reactive-var';
+import i18n from '/imports/startup/client/i18n';
 import PageHeader from '../../components/PageHeader/PageHeader';
 import Content from '../../components/Content/Content';
-import i18n from '/imports/startup/client/i18n';
+import { Helmet } from 'react-helmet';
 
 import './Page.scss';
 
 const Page = ({ title, subtitle, content }) => (
   <div className="Page">
+    <Helmet>
+      <meta charSet="utf-8" />
+      <title>{i18n.t('AppName')}: {title}</title>
+      <meta name="description" content={content.substr(0, 100).lastIndexOf(' ')} />
+    </Helmet>
     <PageHeader title={title} subtitle={subtitle} />
     <Content content={content} />
   </div>