[solved]Meteor(React) - Dynamic Reactive Layout

help
1

Solution link:


I am trying to make layout reactive which dynamically loads other components. Below is a layout code -

import React from 'react';
import UMLogin from '../login/components/UMLogin.jsx';

export const MainLayouts = ({content})=>( 
<div>
    { Meteor.userId() ? 

    <div className="main-layout col-lg-12 col-md-12 col-sm-12 col-xs-12 noPadLR">
      <div className="container-bottom col-sm-12 col-xs-12">
         {content}
      </div>
    </div> 

    : <UMLogin /> 
    }
</div>
);

And one of my router looks like:-

FlowRouter.route('/contactUs',{
 action: function(params, queryParams) {
    mount(MainLayouts,{
        content : (<ManageContact />),
    });
}
});

Problem Statement :- If user is logged in render content otherwise show login page i.e render login component re-actively.

If user is logged in it shows the content. And I fires a command Meteor.logout() at console, user logs out.But it does not reflects in browzer. But if I fires command Meteor.userId(), it gives null i.e user is logged out. To see the change I need to refresh the page then and then only login component renders as MainLayouts is not reactive.

Thanks in advance!

2

I don’t know much about meteor-react, but I know you have to use withTracker to get reactivity.

3

I highly recommend that you read the tutorial on this link.https://themeteorchef.com/

4

Thank you for reply. It is redirecting me to the home page of meteorchef and not tutorial.

5

surely give a try on weekend.

6

yeah you can find a lot of tutorial from the homepage

7

Solution:

import React from 'react';
import MenuBarContainer from './SpotylHeader.jsx';
import SpotylUserHeaderContainer from './SpotylUserHeader.jsx';
import Fraud from '../dashboard/components/Fraud.jsx';
import { withTracker } from 'meteor/react-meteor-data';
import PropTypes from 'prop-types';
import UMLogin from '../login/components/UMLogin.jsx';


const UserLayouts = ({loggingIn, content})=>( 
<div>
{ loggingIn ? 

<div className="main-layout col-lg-12 col-md-12 col-sm-12 col-xs-12 noPadLR">
    <SpotylUserHeaderContainer/>
   <div className="container-bottom col-sm-12 col-xs-12">
     {content}
  </div>
</div> 

: <UMLogin /> 
}
</div>
); 

UserLayouts.propTypes = {
 loggingIn : PropTypes.bool
};

 MainLayouts = withTracker(props => {
 // Do all your reactive data access in this method.
 // Note that this subscription will get cleaned up when your 
 component is unmounted

const login    = Meteor.userId();

if(login){
    var loggingIn = true;
}else{
    var loggingIn = false;
}
    return {
        loggingIn
    };  
})(UserLayouts);

export default MainLayouts;
2 Likes