fix(form-v2): remove additional log in step when switching from AngularJS to React

[wanlingt]

Problem

User appears logged out after switching from AngularJS to React

Closes #4287

Solution

• Instead of refreshing the /#!/forms page, navigate to /workspace
• Query for user to ascertain logged in state

Breaking Changes

• No - this PR is backwards compatible
  Features:

Before & After Screenshots

BEFORE:

AFTER:

Tests

• Make sure is-logged-in is not present in localStorage.
  Log in to the AngularJS app. Click the banner message to switch to React.
  You should be brought to the Workspace page (/workspace) on the React app and remain logged in.
  is-logged-in in localStorage should have the value true
v2-admin-ui cookie should have the value react.

[karrui]

Lgtm

[karrui]

Comment: could we use the useUser hook directly? Or does the use user hook look at the localStorage value before enabling? Maybe we can add an override enabled prop if that is the case

[wanlingt]

Or does the use user hook look at the localStorage value before enabling?

the useUser hook uses useAuth to get the localStorage value (so there's a circular reference). To get around this I replaced useAuth with useLocalStorage in useUser

Maybe we can add an override enabled prop if that is the case

Ok! added this too

[karrui]

ah, now it looks messy. i reviewed it without completely looking at the hook. suggest reverting haha ><. The previous code was more readable, and considering this is "throwaway" code i think we can get away with some duplication.

or we can set the state of isAuthenticated to be contingent on return value of useUser instead of the other way round:

export const useUser = (): UseUserReturn => {
  const [isAuthenticated, setIsAuthenticated] = useLocalStorage<boolean>(LOGGED_IN_KEY)

  const { data: user, isLoading } = useQuery<UserDto>(
    userKeys.base,
    () => fetchUser(),
    // 10 minutes staletime, do not need to retrieve so often.
    { 
      staleTime: 600000,
      // Removed enabled state, just retrieve every 10 minutes
      // new functions, update auth states
      onSuccess: () => setIsAuthenticated(true),
      onError: () => setIsAuthenticated(undefined) // remove login on error, may not be needed since we already have ApiService
    },
  )

  return {
    user: isAuthenticated ? user : undefined,
    isLoading,
  }
}

[wanlingt]

haha it's ok! I will revert :) I think that option's the least messy / easiest to remove after the rollout

[karrui]

should we still add an onSuccess to set localStorage to the authenticated state?

[wanlingt]

oh yes good point! added