From 81acc255d781d0c9064bf784ce4b8d3a8219ef26 Mon Sep 17 00:00:00 2001
From: vjrj <vjrj@ourproject.org>
Date: Tue, 30 Jan 2018 19:10:37 +0100
Subject: [PATCH] Added meta management via react-helmet

---
 client/main.html                |  1 -
 imports/startup/client/i18n.js  |  2 +-
 imports/ui/layouts/App/App.js   |  8 ++++++-
 imports/ui/pages/Index/Index.js |  4 ++--
 package-lock.json               | 37 +++++++++++++++++++++++++++++++++
 package.json                    |  1 +
 public/locales/en/common.json   |  4 ++--
 public/locales/es/common.json   |  5 ++---
 8 files changed, 52 insertions(+), 10 deletions(-)
diff --git a/client/main.html b/client/main.html
index f8011e1..5b43708 100644
--- a/client/main.html
+++ b/client/main.html
@@ -1,6 +1,5 @@
 <head>
   <meta charset="utf-8">
-  <meta name="description" content="A description for the application.">
   <meta name="viewport" content="initial-scale=1, minimal-ui, maximum-scale=1, minimum-scale=1" />
 
   <!-- FIXME integrate this better with meteor
diff --git a/imports/startup/client/i18n.js b/imports/startup/client/i18n.js
index ebafcf7..7e1a6e3 100644
--- a/imports/startup/client/i18n.js
+++ b/imports/startup/client/i18n.js
@@ -72,7 +72,7 @@ i18n.use(backend)
       return;
     }
     i18nReady.set(true);
-    document.title = t('AppName');
+    // document.title = t('AppName');
     // Accounts translation
     // https://github.com/softwarerero/meteor-accounts-t9n
     // console.log("Language: " + i18n.language);
diff --git a/imports/ui/layouts/App/App.js b/imports/ui/layouts/App/App.js
index a06169a..956b492 100644
--- a/imports/ui/layouts/App/App.js
+++ b/imports/ui/layouts/App/App.js
@@ -6,6 +6,7 @@ import PropTypes from 'prop-types';
 import { Router, Switch, Route } from 'react-router-dom';
 import { Grid } from 'react-bootstrap';
 import { I18nextProvider } from 'react-i18next';
+import { Helmet } from 'react-helmet';
 import { Meteor } from 'meteor/meteor';
 import { withTracker } from 'meteor/react-meteor-data';
 import { Roles } from 'meteor/alanning:roles';
@@ -54,6 +55,11 @@ const App = props => (
     <Router history={history}>
       { !props.loading ?
         <div className="App">
+          <Helmet>
+            <meta charSet="utf-8" />
+            <title>{i18n.t('AppName')}</title>
+            <meta name="description" content={`${i18n.t('AppDescrip')}: ${i18n.t('AppDescripLong')}`} />
+          </Helmet>
           <Navigation {...props} />
           <ReSendEmail {...props} />
           <Grid>
@@ -120,7 +126,7 @@ export default withTracker(() => {
   const loggingIn = Meteor.loggingIn();
   const user = Meteor.user();
   const userId = Meteor.userId();
-  const loading = !Roles.subscription.ready();
+  const loading = !Roles.subscription.ready() || !i18nReady.get();
   const name = user && user.profile && user.profile.name && getUserName(user.profile.name);
   const emailAddress = user && user.emails && user.emails[0].address;
   // console.log(`i18n ready?: ${i18nReady.get()}`);
diff --git a/imports/ui/pages/Index/Index.js b/imports/ui/pages/Index/Index.js
index 9df8b01..af913ba 100644
--- a/imports/ui/pages/Index/Index.js
+++ b/imports/ui/pages/Index/Index.js
@@ -161,8 +161,8 @@ class Index extends Component {
             <div className="container">
               <div className="row">
                 <div className="col-md-8 mx-auto">
-                  <h2 className="section-heading"><Trans>Colaboración masiva contra los incendios</Trans></h2>
-                  <p><Trans>Usamos diferentes fuentes de datos para notificarte de fuegos activos en tus zonas de interés</Trans></p>
+                  <h2 className="section-heading">{this.props.t('AppDescrip')}</h2>
+                  <p>{this.props.t('AppDescripLong')}</p>
                 </div>
               </div>
               <div className="row crowd-footer">
diff --git a/package-lock.json b/package-lock.json
index f815b34..0d52f89 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2964,6 +2964,11 @@
       "resolved": "https://registry.npmjs.org/decamelize/-/decamelize-1.2.0.tgz",
       "integrity": "sha1-9lNNFRSCabIDUue+4m9QH5oZEpA="
     },
+    "deep-equal": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/deep-equal/-/deep-equal-1.0.1.tgz",
+      "integrity": "sha1-9dJgKStmDghO/0zbyfCK0yR0SLU="
+    },
     "deep-extend": {
       "version": "0.4.2",
       "resolved": "https://registry.npmjs.org/deep-extend/-/deep-extend-0.4.2.tgz",
@@ -4124,6 +4129,11 @@
         }
       }
     },
+    "exenv": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/exenv/-/exenv-1.2.2.tgz",
+      "integrity": "sha1-KueOhdmJQVhnCwPUe+wfA72Ru50="
+    },
     "expand-brackets": {
       "version": "0.1.5",
       "resolved": "https://registry.npmjs.org/expand-brackets/-/expand-brackets-0.1.5.tgz",
@@ -9957,6 +9967,24 @@
         }
       }
     },
+    "react-helmet": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/react-helmet/-/react-helmet-5.2.0.tgz",
+      "integrity": "sha1-qBgR3yExOm1VxfBYxK66XW89l6c=",
+      "requires": {
+        "deep-equal": "1.0.1",
+        "object-assign": "4.1.1",
+        "prop-types": "15.6.0",
+        "react-side-effect": "1.1.3"
+      },
+      "dependencies": {
+        "object-assign": {
+          "version": "4.1.1",
+          "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
+          "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM="
+        }
+      }
+    },
     "react-i18next": {
       "version": "7.1.1",
       "resolved": "https://registry.npmjs.org/react-i18next/-/react-i18next-7.1.1.tgz",
@@ -10154,6 +10182,15 @@
         "prop-types": "15.6.0"
       }
     },
+    "react-side-effect": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/react-side-effect/-/react-side-effect-1.1.3.tgz",
+      "integrity": "sha1-USwlq+DewXKDTEAB7FxR4E1BvFw=",
+      "requires": {
+        "exenv": "1.2.2",
+        "shallowequal": "1.0.2"
+      }
+    },
     "react-transition-group": {
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-2.2.1.tgz",
diff --git a/package.json b/package.json
index b671272..dc78d0f 100644
--- a/package.json
+++ b/package.json
@@ -56,6 +56,7 @@
     "react-bootstrap": "^0.31.5",
     "react-confirm": "^0.1.16",
     "react-dom": "^16.0.0",
+    "react-helmet": "^5.2.0",
     "react-i18next": "^7.1.1",
     "react-leaflet": "^1.7.7",
     "react-leaflet-control": "^1.4.0",
diff --git a/public/locales/en/common.json b/public/locales/en/common.json
index 9e6ddab..867e2c5 100644
--- a/public/locales/en/common.json
+++ b/public/locales/en/common.json
@@ -1,6 +1,8 @@
 {
   "AppName": "All Against Fire",
   "AppNameFull": "All Against Fire!",
+  "AppDescrip": "Corwdsourcing against wildfires",
+  "AppDescripLong": "We use different sources of data to notify you of active fires in your areas of interest",
   "OrgName": "Comunes",
   "OrgNameFull": "Comunes Association",
   "Términos": "Terms",
@@ -56,7 +58,6 @@
   "Repite la nueva contraseña": "Repeat New Password",
   "Resetea la contraseña y entra": "Reset Password &amp; Login",
   "Imágenes capturadas por los satélites de la NASA muestran el humo de grandes incendios que se extienden sobre el Océano Pacífico. La actividad del fuego está delineada en rojo.": "Images captured by NASA satellites show the smoke of large fires spreading over the Pacific Ocean. Fire activity is outlined in red.",
-  "Colaboración masiva contra los incendios": "Corwdsourcing against wildfires",
   "Todavía sin subscriptiones": "No subscriptions yet",
   "Suscripción añadida": "Subscription added",
   "Suscripción actualizada": "Subscription updated",
@@ -100,7 +101,6 @@
   "Pulsa aquí para borrar la zona": "Click here to remove the area",
   "Los fuegos activos se actualizan en tiempo real.": "Fires are updated in real-time.",
   "Somos muchos ojos": "We are many eyes",
-  "Usamos diferentes fuentes de datos para notificarte de fuegos activos en tus zonas de interés": "We use different sources of data to notify you of active fires in your areas of interest",
   "Usa nuestro bot de Telegram para estar al tanto de los fuegos en tus área": "Use our Telegram bot to be aware of the fires in your area",
   "Otros dispositivos": "Other Devices",
   "support-us-home": "We are developing our tools for other devices. You can <1>help make it possible.</1>",
diff --git a/public/locales/es/common.json b/public/locales/es/common.json
index 9165817..e03e25c 100644
--- a/public/locales/es/common.json
+++ b/public/locales/es/common.json
@@ -1,6 +1,8 @@
 {
   "AppName": "Tod@s contra el Fuego",
   "AppNameFull": "¡Tod@s contra el Fuego!",
+  "AppDescrip": "Colaboración masiva contra los incendios",
+  "AppDescripLong": "Usamos diferentes fuentes de datos para notificarte de fuegos activos en tus zonas de interés",
   "OrgName": "Comunes",
   "OrgNameFull": "Asociación Comunes",
   "Privacidad": "Privacidad",
@@ -128,8 +130,6 @@
   "Nuevas notificaciones de {{app}}",
   "Imágenes capturadas por los satélites de la NASA muestran el humo de grandes incendios que se extienden sobre el Océano Pacífico. La actividad del fuego está delineada en rojo.":
   "Imágenes capturadas por los satélites de la NASA muestran el humo de grandes incendios que se extienden sobre el Océano Pacífico. La actividad del fuego está delineada en rojo.",
-  "Colaboración masiva contra los incendios":
-  "Colaboración masiva contra los incendios",
   "Todavía sin subscriptiones":
   "Todavía sin subscriptiones",
   "Suscripción añadida":
@@ -161,7 +161,6 @@
   "Pulsa aquí para borrar la zona": "Pulsa aquí para borrar la zona",
   "Los fuegos activos se actualizan en tiempo real.": "Los fuegos activos se actualizan en tiempo real.",
   "Somos muchos ojos": "Somos muchos ojos",
-  "Usamos diferentes fuentes de datos para notificarte de fuegos activos en tus zonas de interés": "Usamos diferentes fuentes de datos para notificarte de fuegos activos en tus zonas de interés",
   "Usa nuestro bot de Telegram para estar al tanto de los fuegos en tus área": "Usa nuestro bot de Telegram para estar al tanto de los fuegos en tus área",
   "Otros dispositivos": "Otros dispositivos",
   "support-us-home": "Estamos desarrollando nuestras herramientas para otros dispositivos. Puedes <1>contribuir a hacerlo posible.</1>",
