CODEWITHSUNDEEP
javascriptreactjsreact-state
elderlyman
elderlyman

Reputation: 590

React App component not rendering based on conditional logic

The logic of this component looks good to me.

But even when isLoadingApp logs true in the console, the spinner never shows up. I just see a fragment (nothing) or the expected line and router navigation path.

When isLoadingApp evaluates to true, a spinner component should be visible.

I feel like I'm missing something deeper here...where is the flaw in the logic?

const App = ({ classes }: IProps) => {
  const dispatch = useDispatch();
  const [isReceivedSession, setIsReceivedSession] = useState(false);

  const isLoadingAuth: boolean = useSelector(authIsLoadingSelector);
  const isLoadingApp: boolean = useSelector(appIsLoadingSelector);

  useEffect(() => {
    (async () => {
      try {
        const sessionData = await CognitoClient.currentSession();
        const currentSessionToken = sessionData.getAccessToken().getJwtToken();
        if (currentSessionToken) {
          dispatch(authActions.setAuthStatus(AUTH_STATUS.LOGGED_IN));
        }
      } finally {
        setIsReceivedSession(true);
      }
    })();
  }, []);

  //all logging values properly
  console.log("isReceivedSession", isReceivedSession);
  console.log("isLoadingApp ", isLoadingApp);
  console.log("isLoadingAuth ", isLoadingAuth)

  return isReceivedSession ? (
    //spinner never renders even when isLoadingApp is true
    <Fragment>
      {isLoadingApp ||

        (isLoadingAuth && <Spinner size={48} className={classes.spinner} />)}
      <HeaderLine />
      <Router>
        <Switch>
          <Route exact path={APP_AUTH_PATH()} component={SignInScreen} />
          <PrivateRoute
            path={APP_DASHBOARD_PATH()}
            component={DashboardScreen}
            authenticationPath={APP_AUTH_PATH()}
          />
          <Route
            exact
            path={APP_LANDING_PATH()}
            render={() => <Redirect to={APP_DASHBOARD_PATH()} />}
          />
        </Switch>
      </Router>
    </Fragment>
  ) : (
    <Spinner size={48} className={classes.spinner} />
  );
};

export default withStyles(styles)(App);

Upvotes: 0

Views: 683

Answers (1)

jmelger
jmelger

Reputation: 87

The logical OR operator "||" doesn't look at the second condition whenever the first condition is already true.

Upvotes: 2

Related Questions