Added feedback

imports/ui/components/Feedback/Feedback.js

@@ -2,14 +2,16 @@
 /* eslint-disable import/no-absolute-path */
 /* eslint-disable import/no-absolute-path */
 
-import React, { Component } from 'react';
+import React, { Component, Fragment } from 'react';
 import PropTypes from 'prop-types';
 import { Meteor } from 'meteor/meteor';
 import { translate } from 'react-i18next';
 import { FormGroup, Button, FormControl } from 'react-bootstrap';
 import { Bert } from 'meteor/themeteorchef:bert';
 import { withTracker } from 'meteor/react-meteor-data';
-import validate from '../../../modules/validate';
+import { isHome } from '/imports/ui/components/Utils/location';
+import { testId } from '/imports/ui/components/Utils/TestUtils';
+import validate from '/imports/modules/validate';
 
 import './Feedback.scss';
 
@@ -67,50 +69,59 @@ class Feedback extends Component {
   }
 
   render() {
+    // console.log(`Render Feedback because isHome ${this.props.isHome}, email: '${this.props.emailAddress}'`);
+    const disabled = this.props.emailVerified && this.props.emailAddress;
     return (
-      <div id="feedback">
-        <div id="feedback-form" ref={formdiv => (this.formdiv = formdiv)} style={{ display: 'none' }} className="card">
-          <form
-              ref={form => (this.form = form)}
-              className="form card-body"
-              onSubmit={event => event.preventDefault()}
-          >
-            <FormGroup controlId="formEmail">
-              <input
-                  onChange={this.handleChange}
-                  name="email"
-                  className="form-control"
-                  ref={email => (this.email = email)}
-                  placeholder={this.t('Tu correo')}
-                  disabled={this.props.emailVerified}
-                  defaultValue={this.props.emailVerified ? this.props.emailAddress : ''}
-                  type="email"
-              />
-            </FormGroup>
-            <FormGroup
-                controlId="formFeedback"
+      <Fragment>
+        { !this.props.isHome &&
+          <div id="feedback">
+            <div id="feedback-form" ref={formdiv => (this.formdiv = formdiv)} style={{ display: 'none' }} className="card">
+              <form
+                  ref={form => (this.form = form)}
+                  className="form card-body"
+                  onSubmit={event => event.preventDefault()}
+              >
+                <FormGroup controlId="formEmail">
+                  <input
+                      id={testId('emailInput')}
+                      onChange={this.handleChange}
+                      name="email"
+                      className="form-control"
+                      ref={email => (this.email = email)}
+                      placeholder={this.t('Tu correo')}
+                      key={disabled ? 'disabledEmail' : 'enabledEmail'}
+                      disabled={disabled}
+                      defaultValue={disabled ? this.props.emailAddress : ''}
+                      type="email"
+                  />
+                </FormGroup>
+                <FormGroup
+                    controlId="formFeedback"
+                >
+                  <textarea
+                      id={testId('feedbackTextarea')}
+                      className="form-control"
+                      name="feedbackText"
+                      ref={feedbackText => (this.feedbackText = feedbackText)}
+                      placeholder={this.t('Por favor, escribe aquí tu feedback...')}
+                      rows="6"
+                  />
+                  <FormControl.Feedback />
+                </FormGroup>
+                <Button type="submit" bsStyle="success" className="float-right" id={testId('sendFeedbackBtn')} >
+                  {this.t('Enviar')}
+                </Button>
+              </form>
+            </div>
+            <div
+                id="feedback-tab"
+                onClick={(event) => { this.onTabClick(event); }}
             >
-              <textarea
-                  className="form-control"
-                  name="feedbackText"
-                  ref={feedbackText => (this.feedbackText = feedbackText)}
-                  placeholder={this.t('Por favor, escribe aquí tu feedback...')}
-                  rows="6"
-              />
-              <FormControl.Feedback />
-            </FormGroup>
-            <Button type="submit" bsStyle="success" className="float-right" >
-              {this.t('Enviar')}
-            </Button>
-          </form>
-        </div>
-        <div
-            id="feedback-tab"
-            onClick={(event) => { this.onTabClick(event); }}
-        >
-          {this.t('Feedback')}
-        </div>
-      </div>
+              {this.t('Feedback')}
+            </div>
+          </div>
+        }
+      </Fragment>
     );
   }
 }
@@ -118,9 +129,12 @@ class Feedback extends Component {
 Feedback.propTypes = {
   t: PropTypes.func.isRequired,
   emailAddress: PropTypes.string,
-  emailVerified: PropTypes.bool.isRequired
+  emailVerified: PropTypes.bool.isRequired,
+  isHome: PropTypes.bool.isRequired
 };
+
 export default translate([], { wait: true })(withTracker(props => ({
   emailAddress: props.emailAddress,
-  emailVerified: props.emailVerified
+  emailVerified: props.emailVerified,
+  isHome: isHome()
 }))(Feedback));

imports/ui/components/Utils/location.js

@@ -1,14 +1,20 @@
+/* eslint-disable import/no-absolute-path */
+
 import { Meteor } from 'meteor/meteor';
 import { ReactiveVar } from 'meteor/reactive-var';
+import history from '/imports/ui/components/History/History';
 
-export const location = new ReactiveVar();
+export const location = new ReactiveVar(history.location.pathname);
 
-export const currentLocation = () => {
-  if (Meteor.isClient) {
-    return window.location.pathname;
-  }
-  return location.get();
-};
+if (Meteor.isClient) {
+  history.listen((loc) => { // , action) => {
+    // console.log(`The current URL is ${location.pathname}${location.search}${location.hash}`)
+    // console.log(`The last navigation action was ${action}`)
+    location.set(loc.pathname);
+  });
+}
+
+export const currentLocation = () => location.get();
 
 export const currentLocationHref = () => {
   if (Meteor.isClient) {

imports/ui/layouts/App/App.js

@@ -18,7 +18,6 @@ import '/imports/startup/client/meta';
 import '/imports/startup/client/ravenLogger';
 import '/imports/startup/client/geolocation';
 import '/imports/startup/client/piwik-start.js';
-import { isHome } from '/imports/ui/components/Utils/location';
 import Reconnect from '../../components/Reconnect/Reconnect';
 import Navigation from '../../components/Navigation/Navigation';
 import Authenticated from '../../components/Authenticated/Authenticated';
@@ -139,8 +138,8 @@ const App = props => (
               </Switch>
             </Grid>
             <Footer />
-            { Meteor.isDevelopment && !props.isHome && <Feedback {...props} /> }
             <Reconnect {...props} />
+            <Feedback history={history} {...props} />
             {props.i18nReady.get() &&
             <Blaze template="cookieConsent" />
             }
@@ -161,8 +160,7 @@ App.propTypes = {
   i18nReady: PropTypes.object.isRequired,
   userId: PropTypes.string,
   emailAddress: PropTypes.string,
-  emailVerified: PropTypes.bool.isRequired,
-  isHome: PropTypes.bool.isRequired
+  emailVerified: PropTypes.bool.isRequired
 };
 
 const getUserName = name => ({
@@ -178,7 +176,6 @@ export default withTracker(() => {
   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()}`);
-  console.log(`isHome?: ${isHome()}`);
   return {
     loading,
     loggingIn,
@@ -188,7 +185,6 @@ export default withTracker(() => {
     roles: !loading && Roles.getRolesForUser(userId),
     userId,
     emailAddress,
-    isHome: isHome(),
     emailVerified: user && user.emails ? user && user.emails && user.emails[0].verified : true
   };
 })(App);