Flatten callback code

Summary: cleanup callback code to be a bit more readable.

Test Plan: just reorg to be easier to read

Reviewers: michelle, nlanam

Reviewed By: nlanam

Differential Revision: https://phab.corp.pixielabs.ai/D8451

GitOrigin-RevId: c4c3fd1f96ab3ac55e3843ca3014521e45d78942

src/ui/src/pages/auth/callback.tsx

@@ -103,7 +103,6 @@ export const AuthCallbackPage: React.FC = () => {
   const [config, setConfig] = React.useState<CallbackConfig>(null);
   const classes = useStyles();
 
-  React.useEffect(() => {
   const setErr = (errType: ErrorType, errMsg: string) => {
     setConfig((c) => ({
       ...c,
@@ -144,7 +143,7 @@ export const AuthCallbackPage: React.FC = () => {
       await trackAuthEvent('User logged in', response.data.userInfo.userID, response.data.userInfo.email);
       return true;
     } catch (err) {
-        analytics.track('User signup failed', { error: err.response.data });
+      analytics.track('User login failed', { error: err.response.data });
       handleHTTPError(err as AxiosError);
       return false;
     }
@@ -155,37 +154,20 @@ export const AuthCallbackPage: React.FC = () => {
       const response = await redirectGet(redirectURI, { accessToken });
       return response.status === 200 && response.data === 'OK';
     } catch (error) {
-        handleHTTPError(error as AxiosError);
+      handleHTTPError(error as AxiosError)
       // If there's an error, we just return a failure.
       return false;
     }
   };
-    const handleAccessToken = (accessToken: string) => {
-      const params = QueryString.parse(window.location.search.substr(1));
-      let mode: AuthCallbackMode;
-      switch (params.mode) {
-        case 'cli_get':
-        case 'cli_token':
-        case 'ui':
-          ({ mode } = params);
-          break;
-        default:
-          mode = 'ui';
-      }
 
-      const location = params.location && String(params.location);
-      const signup = !!params.signup;
-      const orgName = params.org_name && String(params.org_name);
-      const redirectURI = params.redirect_uri && String(params.redirect_uri);
-
-      setConfig({
-        mode,
-        signup,
-        token: accessToken,
-        loading: true,
-      });
-
-      const doAuth = async () => {
+  const doAuth = async (
+    mode: AuthCallbackMode,
+    signup: boolean,
+    redirectURI: string,
+    location: string,
+    orgName: string,
+    accessToken: string,
+  ) => {
     let signupSuccess = false;
     let loginSuccess = false;
 
@@ -212,11 +194,10 @@ export const AuthCallbackPage: React.FC = () => {
           break;
         }
 
-            mode = 'cli_token';
         // If it fails, switch to token auth.
         setConfig((c) => ({
           ...c,
-              mode,
+          mode: 'cli_token',
         }));
         break;
       case 'cli_token':
@@ -239,12 +220,36 @@ export const AuthCallbackPage: React.FC = () => {
     }));
   };
 
-      doAuth();
+  const handleAccessToken = (accessToken: string) => {
+    const params = QueryString.parse(window.location.search.substr(1));
+    let mode: AuthCallbackMode;
+    switch (params.mode) {
+      case 'cli_get':
+      case 'cli_token':
+      case 'ui':
+        ({ mode } = params);
+        break;
+      default:
+        mode = 'ui';
+    }
+
+    const location = params.location && String(params.location);
+    const signup = !!params.signup;
+    const orgName = params.org_name && String(params.org_name);
+    const redirectURI = params.redirect_uri && String(params.redirect_uri);
+
+    setConfig({
+      mode,
+      signup,
+      token: accessToken,
+      loading: true,
+    });
+
+    doAuth(mode, signup, redirectURI, location, orgName, accessToken);
   };
 
-    GetOAuthProvider().handleToken().then((a: Token) => {
-      handleAccessToken(a);
-    }).catch((err) => {
+  React.useEffect(() => {
+    GetOAuthProvider().handleToken().then(handleAccessToken).catch((err) => {
       setErr('internal', `${err}`);
     });
   }, []);