Fire popupsand active/archive urls

imports/ui/pages/Fires/Fires.js

@@ -34,6 +34,10 @@ class Fire extends React.Component {
   componentWillReceiveProps(nextProps) {
     if (this.props.when !== nextProps.when || this.props.loading !== nextProps.loading || this.props.notfound !== nextProps.notfound) {
       // console.log(`Next when ${nextProps.when}`);
+      if (nextProps.fire && (nextProps.active || nextProps.fromHash)) {
+        // change url to archive with new _id
+        nextProps.history.replace(`/fire/archive/${nextProps.fire._id}`);
+      }
       this.setState({
         loading: nextProps.loading,
         notfound: nextProps.notfound,
@@ -124,7 +128,7 @@ class Fire extends React.Component {
                       {Object.keys(FalsePositiveTypes).map(key => (
                          <button
                              className="dropdown-item"
-                             onClick={() => this.onTypeSelect(key)}
+                           onClick={() => this.onTypeSelect(key)}
                              key={key}
                              type="button"
                          >
@@ -161,8 +165,11 @@ class Fire extends React.Component {
 
 Fire.propTypes = {
   t: PropTypes.func.isRequired,
+  history: PropTypes.object.isRequired,
   loading: PropTypes.bool.isRequired,
   notfound: PropTypes.bool.isRequired,
+  fromHash: PropTypes.bool.isRequired,
+  active: PropTypes.bool.isRequired,
   when: PropTypes.instanceOf(Date),
   fire: PropTypes.object
 };
@@ -173,8 +180,24 @@ Fire.defaultProps = {
 // export default translate([], { wait: true })(withTracker((props) => {
 
 const FireContainer = withTracker(({ match }) => {
-  const fireEncrypt = match.params.id;
-  const subscription = Meteor.subscribe('fireFromHash', fireEncrypt);
+  const id = match.params.id;
+  const fireType = match.params.type;
+  let subscription;
+  const active = fireType === 'active';
+  const archive = fireType === 'archive';
+  let fromHash = false;
+
+  if (active) {
+    subscription = Meteor.subscribe('fireFromActiveId', id);
+  } else if (archive) {
+    subscription = Meteor.subscribe('fireFromId', id);
+  } else {
+    console.log('Seems a fire from enc hash');
+    fromHash = true;
+    subscription = Meteor.subscribe('fireFromHash', id);
+  }
+
+  // console.log(`Type of '${fireType}' fire, active: ${active}, archive: ${archive}, fromHash: ${fromHash}`);
   // console.log(`Subs ready: ${subscription.ready()}, fire: ${JSON.stringify(FiresCollection.findOne())}`);
   const loading = !subscription.ready();
   const notfound = !loading && FiresCollection.find().count() === 0;
@@ -182,6 +205,8 @@ const FireContainer = withTracker(({ match }) => {
    * console.log(`Not found fire: ${notfound}`); */
   return {
     loading,
+    active,
+    fromHash,
     fire: FiresCollection.findOne(),
     notfound,
     when: subscription.ready() && FiresCollection.findOne() ? FiresCollection.findOne().when : null

imports/ui/pages/FiresMap/FiresMap.js

@@ -211,12 +211,16 @@ class FiresMap extends React.Component {
            {!this.props.loading &&
            <Fragment>
              <FireList
+                 t={t}
+                 history={this.props.history}
                  fires={this.props.activefires}
                  scale={this.state.viewport.zoom >= MAXZOOM}
                  useMarkers={this.state.useMarkers}
                  nasa
              />
              <FireList
+                 t={t}
+                 history={this.props.history}
                  fires={this.props.firealerts}
                  scale={false}
                  useMarkers={this.state.useMarkers}
@@ -250,6 +254,7 @@ FiresMap.propTypes = {
   activefirestotal: PropTypes.number.isRequired,
   center: PropTypes.arrayOf(PropTypes.number),
   zoom: PropTypes.number,
+  history: PropTypes.object.isRequired,
   t: PropTypes.func.isRequired
 };
 

imports/ui/pages/Index/Index.js

@@ -42,12 +42,12 @@ class Index extends Component {
     this.myScaleFunction();
   }
 
-  getMap(isMobile) {
+  getMap(isMobile, props) {
     if (!isMobile) {
       return (
         <section className="sect5">
           <div className="container">
-            <FiresMap />
+            <FiresMap {...props} />
           </div>
         </section>);
     }
@@ -233,7 +233,7 @@ class Index extends Component {
             </div>
           </section>
 
-          {this.getMap(isAnyMobile)}
+          {this.getMap(isAnyMobile, this.props)}
 
           <section className="platf sect6">
             <div className="container">