app.js with lin

class App extends Component {
    
    state = {
        catalogs: {},
    }
  loadCatalog = async (language) => {
    const catalog = await import(
      './locales/'+language+'/messages.json')
    this.setState(state => ({
      catalogs: {
        ...state.catalogs,
        [language]: catalog
      }
    }))
  }
  componentDidMount() {
    this.loadCatalog(this.props.language)
  }
  shouldComponentUpdate(nextProps, nextState) {
    const { language } = nextProps
    const { catalogs } = nextState
    if (language !== this.props.language && !catalogs[language]) {
      this.loadCatalog(language)
      return false
    }
    return true
  }
    render() {
        const {loggingIn, user, userType, language } = this.props;
        const { catalogs } = this.state;
        return (
            <I18nProvider language={language} catalogs={catalogs} >
                 <div className="">
                    {user && !loggingIn && userType==='Lover' &&
                        <div>
                            <UserDashboardNavbar /> 
                        </div>
                    }
                    {user && !loggingIn && userType ==='Artist' &&
                        <div>
                            <ArtistDashboardNavbar />
                        </div>    
                    }
                    {!user &&
                        <div>
                             <HomeNavbar /> 
                        </div>
                    } 
                    <Main />
                    <FooterPage />
                </div>
            </I18nProvider>
            
        );
    }
}
function mapStateToProps(state) {
  const { loggingIn, user, userType} = state.authentication;
  const { language } = state.languagetion;
    return {
        loggingIn,
        user,
        userType,
        language,
    };
}

export default connect(
  mapStateToProps,
)(App)