0

Need to know a proper way to set up different flows after login(or maybe even some different aproach), just no idea what is the most used by proper devs way, so far I have just created a login form and if user validates token and is admin I set up an auth context where admin is true and token is valid and just show different layout for admin user or if it was just a regular user other layout, but I'm not sure whether this is what actual ppl who create administrative dashboard for let's say eshops or blogs would do. What are the best practices for this sort of switch? Mostly looking for advice in the react/nextjs realm, but also feel free to add abstract advice since I'm just lacking experience in general design of this kind. Below is a simplified version of my _app file(root file), Project is done in Nextjs. Would love any advice, since I'm having troubles with creating solid architecture for my blog app where average users only can see posts and comment but admins have DASHBOARD and can CRUD even though I already have the components and the apis now I'm stuck at how to separate these in the front end without making some big newbie mistakes and just making a fool out of myself when I deploy to live.

function MyApp(props) {
  const {token, login, logout, userId, admin} = useAuth();

  if(admin === 'true') {
    return (
      <React.Fragment>
      <AuthContext.Provider
            value={{
                isLoggedIn: !!token,
                token: token,
                userId: userId,
                admin: admin,
                login: login,
                logout: logout
              }}
              >
          <AdminNavigation>
              <Component {...pageProps} />
          </AdminNavigation>
      </AuthContext.Provider>    
    </React.Fragment>
  );
} else {
  return (
    <React.Fragment>
      <AuthContext.Provider
            value={{
              isLoggedIn: !!token,
              token: token,
              userId: userId,
              admin: admin,
              login: login,
              logout: logout
            }}
            >
          <MainNavigation />
            <Layout>
              <Component {...pageProps} />
            </Layout>
      </AuthContext.Provider>
    </React.Fragment>
  );
}
}

export default MyApp;
Ahmet Emre Kilinc
  • 5,489
  • 12
  • 30
  • 42

1 Answers1

0

You can keep the parts that are common for both conditions in one return statement. Then you can use ternary operators ?+: to switch between two conditions:

function MyApp(props) {
  const {token, login, logout, userId, admin} = useAuth();

  return (
    <React.Fragment>
      <AuthContext.Provider
            value={{
                isLoggedIn: !!token,
                token: token,
                userId: userId,
                admin: admin,
                login: login,
                logout: logout
              }}
              >

          {admin === 'true' 
          ? ( <AdminNavigation>
                <Component {...pageProps} />
            </AdminNavigation>)


          : (<>
            <MainNavigation />
            <Layout>
              <Component {...pageProps} />
            </Layout>
            </>)}

      </AuthContext.Provider>    
    </React.Fragment>
  )
}

export default MyApp;
ABDULLOKH MUKHAMMADJONOV
  • 4,249
  • 3
  • 22
  • 40
  • yes, that is a good improvement, thank you, but the bigger question was, is it even the right way to do role switch, but since my question was closed because i cant ask opinion questions for some reason, i will accept your answer... @ABDULLOKH MUKHAMMADJONOV – frank sinatra Nov 02 '21 at 11:12
  • @franksinatra 'is it even the right way to do role switch'. Yes it is. During compilation only related parts are added to the bundle. What the user will receive is not this code but a bundled javascript code. – ABDULLOKH MUKHAMMADJONOV Nov 02 '21 at 11:43