CODEWITHSUNDEEP
javascriptreactjs
Mustapha Geribi
Mustapha Geribi

Reputation: 41

Building a multi view, multi user-type React application

I have a problem getting my head arround how i would go about to create a multi user-type application. I'm creating a big project, I want to have a different GUI for a buyer and another completly different GUI for a seller. I want to have something like if the user is logged in and is a buyer then render ComponentA if they are a seller then render componentB. The way i think about is checking the user type in the state and then render it accordingly. is this approach optimized? Also is it actually possible?

Should i create 2 "smart" components one for the buyer and one for the seller? I'm really confused any help would be appreciated. PS: I'm quite new to ReactJs

Upvotes: 0

Views: 2959

Answers (2)

Philippe
Philippe

Reputation: 1040

You should create a factory pattern that will render Admin or Seller container or component (works with both) depending of the user type:

class LogIn extends React.Component {
  render() {
    if (isLoggedIn) {
      return <LoginFactory {...this.props} />;
    }
    return <LoginForm {...this.props} />
  }
}

function LoginFactory({ userType, ...props }) {
  switch (userType) {
    case 'admin':
      return <Admin {...props} />;
    case 'seller':
      return <Seller {...props} />;
    default:
      return null;
  }
}

Upvotes: 2

masoud soroush
masoud soroush

Reputation: 677

Yeah You can render different smart component in high level component and right after fetch data

class App extends React.PureComponent {
    render() {
        const { loading, userType = 'customer'} = this.props
        if(loading){
            return (<div>Loading<div/>
         } else if(userType=== 'customer'){
            return (<CustomerPanel />
         } else {
            return (<SellerPanel />
         }
    }
}

Upvotes: 0

Related Questions